Adobe XDではじめる「動くプロトタイプ」Webデザイン講座

本講座は、「MdNの教室 MdN × Bau-ya」で2021年11月25日にオンラインセミナーとして開催された
「Adobe XDではじめる「動くプロトタイプ」Webデザイン講座」（講師：松下絵里）
https://www.street-academy.com/myclass/123934
を収録したものを、オンデマンド講座として再編集してご提供するものです。

※本講座は2021年11月当時の情報を元に講座としてご提供しているものです。これ以降になされた事実および情報の変更によっては、講座の中で取り上げた内容と異なる場合があります。登壇者、および株式会社エムディエヌコーポレーションは、本動画の中で紹介した内容によって生じたいかなる損害に一切の責任を負いかねますので、あらかじめご了承ください。

Webデザインにおける「プロトタイプ」とは、Webサイトやアプリなどの「試作品」を意味します。
Webは静止画とは違い、画面遷移したり、インタラクション機能など「動き」が求められるため、プロトタイプは、見た目以上にWebサイトやアプリのUI/UX、つまり操作性を評価するために使われます。

Webデザインの初心者やプロトタイピングツールが現在ほど一般的ではなかった時期から「見た目のWebデザイン」を中心に行っていたデザイナーの中には、プロトタイピング専門のツールではなく、Adobe Photoshopや、Adobe Illustratorといった静止画用のグラフィックツールをWebデザインに起用していた方も少なくありません。

しかし、現代のWebやアプリのUI/UXでは、見た目のデザインだけでなく「動き」をチームで共有してWebサイト制作を進めることが必須となっています。
では、どうしたら「動き」を表現するためのデザインをすることができるのでしょうか？

Adobe XD™は、Webページやアプリをデザインするために、ワイヤーフレーム、ビジュアルデザイン、そして「動くモックアップ」であるプロトタイプを効率よく制作し、チームで共有することで、プロジェクトのコミュニケーションを円滑にするUI/UXのプロトタイピングツールです。

Adobe XD
https://www.adobe.com/jp/products/xd.html

この講座では、Webデザイナー，UIデザイナーとして豊富な実績を持ち、「Adobe XD ユーザーグループ 大阪」の代表を務め、『Adobe XDではじめるWebデザイン＆プロトタイピング 一歩先行く現場のスキル』の著者としても知られる松下絵梨氏を招聘。
自らの体験を踏まえて京都造形芸術大学をはじめとする教育機関でWebデザインを教える氏に、Webデザインの初心者のために、Adobe XDを使って、「動くプロトタイプ」を制作してチームでイメージを共有し、最終的なWebやアプリのUI/UXに活かすまでの方法を解説していただきます。

また講座の中では、アセットやレスポンシブサイズ変更などの機能を活用して効率よくWebデザインを行い、自動アニメーションで「動くプロトタイプ」を制作してチーム内で共有し、コンセンサスを取る方法についても解説していきます。

本講座を受講することで、今まで静止画でデザインをして動きを表現することのできなかった方も最終イメージに近い「動くプロトタイプ」を制作し、より円滑なコミュニケーションを実現することができるようになるでしょう。

● 書籍情報
『Adobe XDではじめるWebデザイン＆プロトタイピング 一歩先行く現場のスキル』（翔泳社）
https://www.shoeisha.co.jp/book/detail/9784798158716

●協賛企業・ブランド
Adobe XD ユーザーグループ 大阪
https://xdug.jp/osaka/
フォントワークス株式会社
https://fontworks.co.jp
フォントワークス LETS
https://lets.fontworks.co.jp/fontworks

#mdnbauya48

Keywords: Web, アプリ, デザイン, UI, UX, プロトタイプ, インタラクション, Adobe XD, マイクロインタラクション, トランジション, アセット, コンポーネント, 自動アニメーション

●講座を受講する前に
・受講に際しての要件
・参考資料
・著作権および本講座提供のプログラムについて
●本編動画
・前編（52分19秒）
・後編（47分35秒）
●講師から受講者のみなさまへ

□ オンラインで受講いただく場合は、インターネット環境とコンピュータなどのデバイスおよびWebブラウザ。
□ ハンズオンスタイルで受講の方は、以下のアプリケーションがインストールされたコンピュータ。
・最新バージョンのAdobe XD
※ OSやWebブラウザ、各種アプリケーションなどは、最新のバージョンのものをご使用ください。
※ コンピュータの動作やソフトウェアなどの動作不良に関するサポートは行いません。
ーーー
●本講座の内容についてのご質問につきまして
 
［MdN × Bauya］オンデマンド収録講座プログラムは、過去に開催したリアルタイムセミナーの収録動画のためご質問は受け付けておりません。ご了承いただければ幸いです。動画本体が見られない、またダウンロードデータの破損など、内容以外のご質問につきましては「お問い合わせ」よりご連絡ください。