【AdobeXD】WebデザイナーがWebデザインの制作過程をフル公開
Вставка
- Опубліковано 22 лис 2024
- 現役WebデザイナーがAdobeXDでWebデザインをする過程を公開します。
単純に作業動画ではなく、Webデザインをする過程でAdobeXDの使い方のポイントも解説しています(｀･ω･´)ゞ
AdobeXDはWebデザインをする上で欠かせないツールです。うまく使いこなすことでかなり高速でWebデザインを制作することが可能になります。
この動画でWebデザイナーが実際にAdobeXDをどのように使いこなしているのかがわかると思います。
※一部訂正
5分35秒あたりで紹介した縦中央揃えのショートカットはCommand＋Control＋Mです。
（Command＋Shift＋Mと紹介していました）
--------------- 他のAdobeXDの動画
・WebデザイナーのためのXDの使い方【基礎編】
• WebデザイナーのためのXDの使い方【基礎編】
・WebデザイナーのためのAdobe XDの使い方【応用編】
• WebデザイナーのためのAdobe XDの使...
・Webデザイナー向け、Adobe XDでプロトタイプを作る方法
• 【AdobeXD】WebデザイナーがWebデ...
・WebデザイナーがAdobe XDでオススメするショートカットキーBest10！
• WebデザイナーがAdobe XDでオススメ...
#AdobeXD
#Webデザイナー
#Webデザイン
＝＝＝ 動画学習サービス「unazuki」
Web制作を学べる動画学習サービスを運営しています。
unazuki.online/
・WordPressコンプリートコース
unazuki.online...
・JavaScriptコース
unazuki.online...
・HTML & CSSコース
unazuki.online...
＝＝＝ SNS
■ Twitter： / life_toshindai
＝＝＝ 経歴
Webデザイナー・エンジニア
〜 2013 自動車メーカー系の企画職
2014 〜 フリーランスWebデザイナー
2016 〜 法人化
-------------------- 簡単な自己紹介
都内でWeb制作をやっています。
苦労した経験をもとに、
UA-camでは過去の自分が欲しかった
知識・技術・マインドなどをスライドやデモ解説で発信しています💪
🏋️♂️活動
WordPressやWebデザイン講座など有益な情報を発信。
初心者向けの動画〜超実践向けの動画まで多数公開しています。
再生リストも作っているのでよろしければご覧ください。
✈️出身
福岡県
---------------------------
Webデザイナーとして活躍される方の
知的好奇心・技術的向上心に少しでもお役に立てたらいいなと思っています
(｀･ω･´)ゞ
詳しくはチャンネル概要欄もご覧ください。
#ホームページ
#作り方
#アキユキ
私が受講したことある有料動画よりよっぽどためになる…この方の事もっと早く知りたかった
Webデザインの勉強を始めたばかりの者です。
具体的な作成の流れを見ることができて、とてもタメになり、モチベーションが上がりました！ありがとうございます。
ありがとうございます！
他の方の動画は実践の部分が少なく、喋るだけの動画になってしまっていて分かりにくかったのですが、主様の動画では実践を交えて解説してくださるので、ワクワクしながら学ぶ事が出来ました！
知識すらまだ殆ど無い高校二年生ですが、将来的に自分の夢であるWEBデザイナーとして活躍出来るように勉強を頑張っていきたいと思います！
そう言っていただけて嬉しいです。
高校生ですでに夢に向かって努力されてて素晴らしいですね！
（自分の高校時代を思い出すと恥ずかしい...）
頑張ってください！
今日からXD勉強始めた者です。勉強になったのは勿論、すごくワクワクしながら見ることができました！ありがとうございます。
ほんとですか！嬉しいですねー！
ありがとうございます。
Webデザインの学校卒業しましたが、全くそれよりすごく勉強になります。感謝でいっぱいです。
これ、Figmaとかでもめっちゃ応用効くし、普通にクッソ神動画だな。(デザインしたい人には)
私はillustratorが得意なのでXDは好きなのですが、有料の講座がphotoshop押しでもやもやしてました。ほんと、もっと早く辿り着ければ良かった。。
ありがとうございます！
こんな分かりやすい動画初めてだ。。。オンラインスクールに通ってるけど、こちらの動画の方が分かりやすい。。。
今年に入ってから勉強を始めた初心者です。とてもわかりやすく勉強になります。登録させていただきました。
ひとつずつ見せていただいて学習していきたいと思います。
ありがとうございます！
実はレイアウトよりも素材写真の収集と補正の方が時間がかかるという。。
クライアントさんがそこを理解してくれていると助かるんだけど、そうじゃない場合は結構地獄。
初米です！相変わらずイケメンですね。
すごいわかりやすいのでこのチャンネルの動画参考にしています！
腑に落ちてなかったことが、この動画で腑に落ちた！ありがとうございます！
本当に超有益動画でした。というか、アキユキさんの動画は全部超有益。マジ神です。
街で見かけたら何も言わずに抱きついて、キスしますので宜しくお願い致します。
本当にいつも素晴らしい情報発信をして頂きありがとうございます。
思いっきり初心者ですが、説明がわかりやすくポンポン次に進むので見入ってしまった。登録しようと思います
目からウロコすぎました！✨
サクサク作業出来そうです！
ありがとうございます🙇♀️
良かったですー！
完全に有料級の動画でビックリしたｗｗ
ありがとうございます。
素晴らしいです！！
勉強を始めたばかりの者です。とても分かりやすくモチベーションが高まりました！ありがとうございます^_^
感動しました！
勉強させてもらいます！
目から鱗でした。
有料で受講したモノより
ためになりました。
ありがとうございました。
いや、え、これ無料ですか？？？今デザイン学んでる身としては最高すぎる動画でした。。。！
ありがとうございます！
アキユキさん、すばらしい動画ありがとうございます。
今からwebデザインをはじめようと考えていた所なので本当に助かります。
完成図が簡単に作れて共有できるのですね。
マスターコンポーネントを活用するのと、ボタンタップでページ移動を学びました。
これからも、たくさん見て学ばせていただきます！！！
改めてありがとうございました。
自由自在なのがカッコいい！
すごくわかりやすくて、感謝しかないです
アキユキさん、figmaについてはどう思いますか？
figmaを使うメリットデメリットについて解説した動画をアップする事を希望します😊
サクサクでしかも分かりやすかったです。ありがとうございます。
わかりやすい！！ありがとうございます！
今回もとてもためになりました。ありがとうございます！
ＸD使いこなせると楽しそうですね！
デザイン力をつけるためにもっと勉強しようと思いました。
サムネイルがイカしてますね！(≧▽≦)
すごいわかりやすくて感動しました！ありがとうございます😊チャンネル登録しました！
まじですごい、、(語彙力)
Webデザイナーになるためにまじてがんばらろ、、🥺
この動画に対する初心者向けの解説動画があるとありがたいです…
広告何回も踏むなどよろしくお願いします🙇♂️
めちゃめちゃ素晴らしい動画ありがとうございます！
おせっかいかもしれませんが、5:35 くらいの中央整列のショートカットキーですが、Command＋Control＋Mでした！
ホントですね...
ご指摘ありがとうございます！
各要素の間に空のスペースBOX入れると空き感が統一できておすすめですよ。
あとカードデザイン作る時、paddingとスタック使うと楽。
ありがとうございます。
プロトタイプで各メニューにリンク貼りたかったりするので、僕の場合はスペースでやらないことが多いです。
スタックは確かに使ってなかったですね！
凄いです！
ウェブデザイナーに興味があってスクールで勉強しようかと考えてます。
色々検索してたらアキユキさんの動画にたどりつきました！感動して即チャンネル登録させて頂きました。Webデザイナーをメインにお仕事されているんですか？
初心者でも出来るようになりますか？
ありがとうございます！
僕はデザインも開発もどちらもやってます！
もちろん、最初は皆んな初心者ですし、他のデザイン経験がなくてもしっかり勉強して経験積んで行けば大丈夫です。
これからXdを使いますが、非常に参考になりました！
あと、もし可能でしたらアキユキさんが購入されているおしゃれなフレーム素材について、情報をいただけませんでしょうか。
こちらはプログラミングなしでホームページを作れるのですか？
わかりやすい動画ありがとうございます！
WEBデザイナー UI/UXデザイナー インタラクティブデザイナーの違いを教えてください！
見てたらめちゃ簡単そうと思ってインストールして使ったら想像以上に簡単だった。
Ps勉強してきた時間は何だったんだ
デザインをやることになり、迷っていたところに救世主!
かなり効率的にできるな!
使いこなそう😁😁😁
実際の動画すごく助かります。ありがとうございます(^^)
0.75倍速にすると丁度いい速さ
すごい.....
大変為になりました。ショートカット覚えないとですね。
wedデザイナーになるために今資格の勉強してます！
ミリアド プロというのがなかったんですが似たようなフォントってありませんか？
それと、写真を貼る時どうやって切り替えてますか？
大変参考になりました！
通常の作業とは逆だと思いますが、この動画での作業は実際出来上がったサイトを見ながらXDの作業をしているのでしょうか？
いまだFWで作ってる民。そろそろXD導入すべきかなｗ
とりあえずショートカットキー覚えたい
こんにちは！この、ソフトを使って、ランサーズなどのWEBデザインの受注を受けることは可能ですかね……
プロゲート少しかじったぐらいで、ITスキルは皆無にちかいですが、今回のような、デザイン制作は慣れれば出来ると思いました！
webデザイナーはhtmlとかのプログラミングは書かなくても大丈夫ですか？
XD使いやすいよねー、使ってた面白かったし
何もしたことない者ですが、XDでデザイン（案）だけのソフトですよね？
XDでデザイン作れてリンク遷移もできるなら、このままウェブサイト作れればいいのにと思ってしまうw
エアプでの質問で申し訳ないのですが、
12:28 からのコンポーネントの説明で、
マスターコンポーネントを変更すると
インスタンス？も変更されるとありますが、
マスターの1つ右のものは変更されてません。
どれがインスタンス？になっているものかが
分かるような機能はあるのでしょうか？
素晴らしい
やっぱりプロは凄いですね！
PhotoshopよりXDの方がデザイン作るはオススメですか？
画像加工はphotoshopを使うのでどちらも使いますが、
基本はXDでやっていくのがオススメです！
センターライン初めからズレてたからずっと気になってたやで…
ですよね...(；´Д｀)
これ無料で見て良いんですか。弟子入りしたい
今から未経験転職目指すなら、psよりxd勉強した方がよいのでしょうか？
それとも現場ではまだpsが主流なのでしょうか。
もうxdが主流だと思いますが、画像加工はpsでやったりしますので、psも画像加工レベルで使えるといいと思いますよ。
画像の書き出しは1つずつ指定するしかないのでしょうか？ Photohopではレイヤー名に「hoge.jpg7」とかつけてまとめて抜き出せてたので、同じ様なやり方が分かれば知りたいです。
複数選択してまとめて書き出しはできますよ！
psのようなファイル名から自動で書き出す生成機能はなかったと思います。
動画拝見させて頂きました。
自分もXDをMacBookでインストールしたいのですが、有料版と無料版どちらをインストールした方が良いでしょうか？
これでも、結局のところホームページ公開して運用出来ないところがネックですよね。XDはプロトタイプだけで、ウェブページとして使えないから、ホームページを作れる訳じゃない。悲しいです。
定規は使わないんですね！数値で判断してるのかな？
XDはFigmaと比べるとかなり使い勝手悪いかな。。主流はFigmaだと思います、、！
分かりやすい(*´ω`*)
なんか独学でサイト作りをやってきた自分的には、こういうのは最初からHTMLでやってしまうよね。
デザインを納品みたいなときにはADOBEで納品とかしなきゃなのかなｗ
ノンコードでフリーランスのwebクリエイターってなれるんですか？
マエケンに似てない？
私は外国人です。あなたの話は早いです。聞きにくいです。ですから
遅くもいいですか。お願いします。
グリッド引きなさいよ
グリッドシンプルに邪魔じゃない？
うわっ…DTP出身のかたですか？大人しく紙やっといてください
@@domtoyota え、なんかごめん；；