この講座は、主に未経験からプロの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ページ、建築会社のコーポレートサイトをデザイン