Adobe XDで未経験からWebデザイナーを目指す！デザイン入門から実践編まで

これからWebデザインを学びたい人へ。フォントや色などのWebデザイン入門や、XDの使い方をわかりやすく解説。さらに初・中・上級編で、サンプルデザインを見ながら実際にXDで制作していきます。

Ratings: 4.63 / 5.00

この講座は、主に未経験からプロのWebデザイナーを目指している方を対象に作られた講座です。

色や写真、レイアウトなど、デザインについての基本的なことから、Adobe XDの機能や使い方、架空のクライアントを想定してコンセプトを設定し、デザイン制作に着手していく過程までを詳しく説明しています。全10時間、隙間時間を活用して、実際に手を動かしながらスキルの習得を目指しましょう。

なぜAdobe XDなのか

PhotoshopやIllustratorでWebデザイン制作を行うデザイナーは多いですが、Adobe XDでは平面でのデザインだけでなく、挙動（動き）の確認も行うことができます。

• リンク先は正しいか

• 画像切り替えの設定時間は、心地よく感じるか

• ボタンホバー時の色の濃度差は適切か

など、従来ならコーディングしてモックサイト上でしか確認できなかったことも、デザイン段階でクライアントや制作チームと共有できるようになるのです。Adobe XDは日々機能がアップデートされるアプリなので、頻繁にUIが変わります。つまり、それだけ技術が発展途中で、伸びしろのある分野だと言えるでしょう。

類似アプリケーションとしてFigmaもありますが、Adobe XDは機能がシンプルな分、Figmaほど習得に時間がかからないのと、デザイナーの必須ツールとも言えるAdobe CCのパッケージに含まれているため、本講座ではAdobe XDをメインツールに設定しています。

現役Webデザイナーによる監修

この講座では、ナビゲーター「トキ」と、3羽の生徒「めじろ・ひよこ・文鳥」の対話式で講義が進みます。上級編までデザインを作り切れれば、XDの操作はかなり慣れると思いますが、Webデザイナーとして独り立ちするにはたくさんの経験が必要です。めじろ・ひよこ・文鳥と一緒にコツコツがんばりましょう！

• ナビゲーター「トキ」：デザイン歴10年以上。Webデザイナーとして企業のWebサイトをデザインしたり、UI改善を行いながら、日々優れたデザインを追求して巣に引きこもっている。

• 3羽の生徒「めじろ・ひよこ・文鳥」：Webデザイナーとして活躍することを目指し、知識ゼロから勉強をスタート。三人寄れば文殊の知恵、になるのか…？

講座の構成

・入門編：これからデザインを学ぶ人向けの、デザイン入門の座学

・XDの使い方：XDの画面や機能、使い方をレクチャー

・初級編実践：まずは1ページだけ、居酒屋「うめえっちゃ」のWebサイトをデザイン

・中級編実践：次は全部で4ページ、旅館「たらい舟」のWebサイトをデザイン

・上級編実践：総仕上げ！XDの機能を駆使して全8ページ、建築会社のコーポレートサイトをデザイン