この記事はXDの基本的な使い方〜ちょっとした応用を色々とまとめた一覧記事です。
この記事を全て読み進めていく事で、初心者の方がXDでワイヤーフレームの作成が出来る様になる様なイメージで記載していきます。そして現場でも使えるレベルを目指していきます。
詳しい内容は各種詳細記事のリンクをクリックして下さい。
XDを始める前に必須なツールと基礎知識
UI kitsで感覚を養おう
Adobeが公式公開しているXDの無料素材の「UI kits」です。
デザインシステムを利用して効率化を図る事が出来ます。
またXDを勉強するのに非常に向いたサイトなので何処かに保存しときましょう。
共有してフィードバックをもらう
デザイン、システムの共有が最大のXDは醍醐味です。
XDの共有の仕方は必ず理解しておきましょう。
プロトタイプの基本
XDの醍醐味であるプロトタイプの基本的な使い方を紹介します。
XDでいろんなパーツを作成しよう
aタグリンクを表現
XDではWEBで言うaタグリンクを簡単に表現する事が出来ます。ワイヤー作成時点でリンクを表現出来たら凄い分かりやすいものになります。
サムネイルを作成
XDではサムネイルを作成するのに非常に向いているソフトかと思います。
ギャラリー
XDなら一瞬でギャラリーを表現する事が出来ます。
マウスホバー
XDならマウスホバーアクションを一瞬で表現出来ます。
スクロールブロック
XDならスクロールブロックを一瞬で作成出来ます。
表（テーブル）
XDで表（テーブル）を作成する方法です。少し変わったやり方なので覚えておきましょう。
ラジオボタン
お問い合わせフォームなどに良くあるラジオボタンの表現の仕方です。
ドロップダウン
多項目の中から一つを選択するのに便利なドロップダウンリストの作り方です。
要素を固定
XDなら要素の固定はワンクリックで可能です。
タブの切り替え
クリックで切り替わるタブ切り替えのボックスをコンポーネントで表現。LPでよく使われる動きなので覚えておきましょう。
アンカーリンク
グロナビなどにある、リンククリック後ページ内スクロールをしてアンカー着地地点まで行くアンカーリンクの作成の仕方です。XDならほんの少しの設定で表現する事が出来ます。
アニメーションデザインを作ろう
スライダー
XDでは、メインビジュアルなどに良くある、数秒後に自動でスライドするアニメーションを超簡単に表現出来ます。
回転アニメーション
くるくると回転するアニメーションをリピートします。
グロナビのマウスホバー
WEBサイトで良くあるグロナビ項目をホバーしたら下に小メニューが出てくる動きをXDで表現しています。
先方、外注先に動きを伝える時に役立ちます。
3Dギャラリー
立体的なギャラリーを作ってみました。
リアルタイムアニメーション
都市を選択すると地球が回転してピン立てしてくれる、リアルタイムアニメーションを表現。
クリック→アニメーションのリアルタイムな動きを知れるので色々と応用の効く内容になっています。
XDにおすすめのプラグイン
Mimic
任意のサイトの画像、フォントデータ、カラーコードをXDに落とし込みます。
以上が「XDの使い方まとめ：初心者〜現場レベルまで目指せ完全網羅！！」でした。
現在（2020/07/12）時点ではまだ記事数は少ないですが今後少しずつ追加していきます。
今暫くお待ちください。
