Adobe XD の使い方を公式で学ぶ。“Adobe XD Trail”
Adobe XDの使い方を動画、チューリアルファイルで学べるAdobe 公式サイト Adobe XD Trail。 基本操作をはじめ、ワイヤーフレームの作成、スタイルの適用、プロトタイプの作成、など実践的な使い方がこれでよく分かります。
Adobe XDとは？どんなことができるの？
Adobe XDとはAdobe Experience Design（アドビエクスペリエンスデザイン）の略で、Webサイトやモバイルアプリのデザイン、プロトタイプの作成をこれ1本で実現できるアプリケーションです。Webのデザインといえば、一昔前はPhotoshopやIllustrator、FireWorksなんていうのもありましたが、Web、アプリのUI・UXデザインに特化したAdobe XDがWeb関連デザイン制作のスタンダートになってきました。
XDの基本機能
ワイヤーフレーム、デザインカンプの作成
- ワイヤーフレーム＝webサイトの要素を確認するための設計図
- デザインカンプ＝Webデザインの見た目の完成形のこと
XDを使用して、実際のデバイスのサイズに合わせたデザインを作成できます。デフォルトで様々なアートボードサイズが用意されているため、レスポンシブデザインも簡単に作成可能です。
動きも確認可能なプロトタイプの作成
実際に出来上がったデザインは、ブラウザでプレビューしているような機能があり、スクロールやホバーアニメなどを確認することができます。別のページ（アートボード）への画面遷移も可能なため、実際のWebサイトやアプリに近い動きを直感的に確認ができます。
共有とレビュー機能
ワイヤーフレームやデザインカンプを作成したら、社内確認やクライアント確認のために、オンラインでの共有が可能です。ブラウザ上でデザイン確認でき、レビュー（コメント）も入力可能です。デザインを確認しながら、メモを入れたり、フィードバックをもらうことができます。
Adobe XD の便利機能
UI・UXに特化したアプリケーションならではの、便利機能があります。Webサイトのデザイン制作がスピードアップ、効率化すること間違いなしです。ここでは代表的な機能をご紹介します。
リピートグリッド
繰り返し使用される要素、例えばニュースやブログの投稿一覧等、複数の画像やテキストを素早く複製してくれます。リピートグリッドで作成されたアイテムは、フォントや色を変更しても、全てに適用されるため、同一デザインの修正が劇的にスピードアップします。
コンポーネントの作成
ページ内の違う場所で何度も使用するパーツや、ページをまたがる共通パーツはコンポーネントとして登録可能です。大きなメリットとしては、ベースのコンポーネントを修正すれば、全ての使用されているコンポーネントにその修正が適用されることです。共通デザインが変更された場合、鬼のコピペ作業はもう必要ありません。
ステートにインタラクションを設定
ホバーやタップなどのアクションを行なった場合の、インタラクションアニメをXD上で作成、プレビューが可能です。クライアントに対しての確認もさることながら、コーダーへの指定も完璧です！
Adobe XD の学習方法
Adobe XDの基本的な操作方法は、Illustratorに似ているためIllustratorを使用できる方は抵抗なく学習を進めていけるのではないでしょうか。XDの基本の使用方法については、Adobeの公式学習サイト、Adobe XD Trail を利用することをお勧めします。
Adobe XD Trailサイトを利用する
Adobe XD Trail https://xdtrail.com/
基本の操作方法から、インタラクションのセッティングまで、動画にて解説されています。XDを現在使用されている方も、復習や追加された機能などの使用法をわかりやすく学習できることでしょう。
出典: Adobe XD Trail
学習キットもダウンロードでき、学習用の XD ファイルと素材に加えて、手順書も同梱されているため、自習やチーム内勉強会はもちろん、ワークショップ開催にも利用できます。
Adobe XD Trailでは動画にて様々な機能の使用方法を学習可能です。XDを使用したことのない方も、新機能を確認したい方も、Adobe XD Trail でオンライン学習してみてはいかがでしょうか？
- 2021.04.26
- Category Web