Adobe XDとは？基本・プロトタイプ・データ共有・便利機能までまとめて解説【保存版】

デザイン制作

Adobe XDには、デザイン作業を効率化する便利な機能がたくさん搭載されています。

代表的なものが「リピートグリッド」。

カードデザインや記事一覧など、同じレイアウトを何度も配置したい場面では、一つ作成した要素をドラッグするだけで複製が可能。余白もまとめて調整できるので、レイアウト作成が驚くほどスピーディになります。

また、「アセット機能」を使えば、カラーやテキストスタイル、アイコンなどを一括管理できるんです。

ブランドカラーや共通パーツを登録しておけば、修正が発生した場合でも全体へ反映できるため、デザインの品質を保ちながら効率的に制作を進められますね！

プロトタイプ作成

Adobe XD最大の特徴とも言えるのがプロトタイプ機能です。

ページ同士を線でつなぐだけで画面遷移を設定できるので、プログラミングをすることなく実際のWebサイトやアプリのような操作感を再現できます。

さらに、自動アニメーション機能を利用すれば、ボタンの動きや画面遷移も自然に表現できるんです！

完成イメージをチーム内やクライアントと共有しながら確認できるので、認識違いを防ぐことも、修正回数の削減することもできるんです！

URLによる共有・レビュー

Adobe XDは、デザインデータをURLで共有できるところも魅力のひとつ。

受け取った相手は専用ソフトを持っていなくてもブラウザ上で確認でき、コメント機能を利用してフィードバックを書き込むことも可能です。

デザイン確認のために画像を書き出したりPDFを作成したりする必要がなくなり、制作フローを大きく効率化できる機能として、多くの制作現場で活用されていました。

STEP1 デザインを作成する

まずはデザインを用意します。

Adobe XDにはUIキットも用意されているため、ボタンやフォーム、スマートフォン画面などを利用して短時間でレイアウトを作成できるんです！

もちろん、自分でイチからデザインを制作しても大丈夫ですよ◎

STEP2 プロトタイプモードへ切り替える

デザインが完成したら、画面上部の「プロトタイプ」を選択します。

デザインモードからプロトタイプモードへ切り替えることで、画面同士を接続できるようになります。

STEP3 アートボード同士をつなぐ

リンクを設定したいオブジェクトを選択すると、青い矢印が表示されます。その矢印を遷移先のアートボードへドラッグするだけで、画面遷移を設定できます。

非常にシンプルな操作ですが、これだけでクリック可能なプロトタイプが完成するんです。

STEP4 アニメーションを設定する

リンクを設定したら、画面遷移の演出を追加します。まずは「トリガー」、タップやドラッグなど、どんなアクションで画面が遷移するのかを設定しましょう。画面右のパネルを操作します。

続いてはトリガーに対するアクションの設定。先ほどと同じパネルで設定ができます。

代表的なアクションは以下のとおり。

トランジション
一般的な画面遷移。別途アニメーションの種類を手動で設定する必要がある。

自動アニメーション
トランジションに比べて動きのある画面遷移。同類のオブジェクトの変化に対して、自動的にアニメーションが設定される。

オーバーレイ
現在の画面に、指定したアートボードが上から重なって表示される。モーダルウィンドウはこのアクションを使用する。

スクロール先
俗に言うアンカーリンク。指定した場所までスクロールする。

特に自動アニメーションは、同じオブジェクト同士を自然につないでくれるため、完成度の高いUI表現を簡単に作成できます。

STEP5 プレビューで確認する

もろもろ設定してから右上の再生ボタンをクリックすると、実際の動きを確認できます。

デザインを修正するとプレビューにもリアルタイムで反映。細かい調整を繰り返しながら完成度を高めていけるので、とっても便利です。

スマートフォンアプリを利用すれば、実機で確認しながらデザインを制作することも可能ですよ◎

4-1. 5つの共有設定を使い分けよう

共有画面では、用途に合わせて表示方法を選択できます。

特に制作現場では、「デザインレビュー」と「開発」の2種類を使い分けるのが便利です。

4-2. 修正してもURLはそのまま

Adobe XDでは、一度発行した共有リンクを更新するだけで最新データに差し替えられます。

これ、とっても便利！！　修正のたびにURLを送り直す必要がありませんし、「最新版はどれ？」という混乱も起こりません。そして、クライアントも常に最新デザインを確認できる。まさに良いこと尽くしな機能です！

パスワード設定・リンク管理も可能

さらに、共有リンクにはパスワードの設定が可能。これなら社外とのやり取りでも安心ですね。

また、作成したリンクは一覧で管理可能で、不要になったものから削除していくこともできるんです◎

共同制作を前提に設計されたAdobe XDならではの便利な機能です◎

おすすめプラグイン

Ikono

アイコンをそのままXDへ配置できるプラグインです。
線幅の変更もできるため、ワイヤーフレームからデザイン制作まで幅広く活用できます。

Mimic

既存サイトの配色やフォント情報を読み込み、ラフ制作の参考資料を作成することができます。

もちろんデザインや画像には著作権がありますので、あくまでラフなどを作る際の参考程度に留めてくださいね。

Overflow

画面遷移やユーザーフローを視覚化できるプラグイン。プロジェクト全体の導線確認に便利です。

Stark

色のコントラストや色覚シミュレーションを行えるアクセシビリティチェックツール。現在のWeb制作でも重要な考え方なので、覚えておきたい機能です。

Unsplash Random Image

ダミー画像をワンクリックで配置できます。カンプ制作では今でも非常に便利な機能です。

5-2. 意外と便利な標準機能

Adobe XDはプラグインだけでなく、標準機能にも便利なものがたくさんあります。

パディング

テキスト量に応じて要素が可変（伸び縮み）させる方法。ボタンとテキストをグループ化すると、文字数に合わせてボタンサイズを自動調整してくれます。これを使うと、ボタンの修正が格段に楽なんです！

ホバーステート

ホバーとは、ボタンや画像などにカーソルを乗せたときに起こる演出です。このマウスオーバー時のデザイン変化を、プロトタイプ上で再現できる機能。エンジニアとの認識合わせにもお役立ちです！

スポイト

Adobe XDでは、vソフトの外に表示されている画面からでも色を取得できます。参考サイトを見ながら配色を確認したいときにとっても便利です！

イースターエッグ

ちょっとした遊び心として知られていた隠し機能もAdobe XDの魅力でした。

作成方法は超カンタン！プロパティインスペクター（画面右のパネル）の図形部分に「<3」と指定すれば完成です。あとは好きなカラーやサイズをお好みに合わせるだけです！