UI/UXデザインツール『Adobe XD』入門

5-1. プロトタイプモードの基本操作

Adobe XDのプロトタイプモードの基本操作について、大まかに解説します。

  • UIデザイン
  • UXデザイン
  • Webデザイン

公開日:2019/12/24最終更新日:2019/12/24

1.プロトタイプとは

Webサイト・アプリなどの制作において、実装に入る前の段階で、仮説したユーザー体験や設計を検証するために実装されたかのような画面設計・インタラクションを再現した資料がプロトタイプです。それを活用した手法や検証工程はプロトタイピングと呼ばれます。

Adobe XDでは、デザインモードで作成したUIデザインの各オブジェクトに対し、プロトタイプモードでインタラクションを設定して、ユーザーが実際に触れられるプロトタイプをコードを一切書かずにつくることができます。そして、ユーザーによる一連の操作を録画し開発者間で共有できる機能、デザインやインタラクションに関してオンライン上でコミュニケーションができるコメント機能など、プロトタイピングがよりスムーズになる機能が備わっています。

2.プロトタイプモードの表示

上部メニューにあるタブをクリックして「プロトタイプ」モードに切り替えます。

ショートカット `control + tab` で切り替えることもできます。

3.インタラクションの設定

アートボードまたはオブジェクト毎に、いずれかの方法でインタラクションを設定できます。

(1) アートボードまたはオブジェクトを選択し、プロパティパネルの「+」をクリックしてトリガー、アクションなどを設定

(2) アートボードまたはオブジェクトを選択し、表示されるコネクタ(青い矢印のアイコン)を画面遷移先とするアートボードまでドラッグして離す
※画面遷移を伴わない、音声再生などのアクションは1の方法でしか設定できません。

トリガー

インタラクションを発動させる方法を選択します。次の種類があります。

  • タップ ... タップ、またはクリックで発動。
  • ドラッグ ... 左右・上下などにドラッグしたら発動。
  • 時間 ... 一定時間経過で発動(0.01〜5秒の間で指定可)。
  • キーとゲームパッド ... キーボードまたはゲームパッド上の任意のキーを押したら発動(音量調整、電源などシステムレベルキーは選択不可)。
  • 音声 ... スペースキーを入力しながら、コマンドとして設定した言葉を話しかけると発動。

アクション

発動して実行される内容を選択します。次の種類があります。

  • トランジション ... 選択した移動先へ遷移。イージング、デュレーションに加えアニメーションの種類を手動で調整します。
  • 自動アニメーション ... 選択した移動先へ遷移。同じレイヤー名のオブジェクトの変化に応じて、自動でアニメーションが設定されます。イージング、デュレーションは手動調整可。
  • オーバーレイ ... 指定したアートボードを、現在表示している画面に重ねて表示します。モーダルウィンドウの表現などで活用。
  • 音声を再生 ... 入力したテキストを機械音声で読み上げます。
  • ひとつ前のアートボード ... 「ブラウザで戻る」のような挙動をします。

アクションの種類によって選択できるオプションも変わります。詳しくは別のレッスンで詳説します。

理解度チェック

UI/UXデザインツール『Adobe XD』入門

1. Adobe XDの概要とインストール

2. Adobe XDの基本操作

3. Adobe XDで画面をデザインする

4. より効率よくデザインするための機能

5. Adobe XDでプロトタイプを作成する

6. Adobe XDでデザイン・プロトタイプを共有する

このレッスンの著者