XDのプロトタイプモードの基本操作について、大まかに解説します。ブックマークUIデザインUXデザインWebデザイン公開日:2019/12/24最終更新日:2019/12/24目次1.プロトタイプとは2.プロトタイプモードの表示3.インタラクションの設定1.プロトタイプとはWebサイト・アプリなどの制作において、実装に入る前の段階で、仮説したユーザー体験や設計を検証するために実装されたかのような画面設計・インタラクションを再現した資料がプロトタイプです。それを活用した手法や検証工程はプロトタイピングと呼ばれます。XDでは、デザインモードで作成したUIデザインの各オブジェクトに対し、プロトタイプモードでインタラクションを設定して、ユーザーが実際に触れられるプロトタイプをコードを一切書かずにつくることができます。ユーザーによる一連の操作を録画し開発者間で共有できる機能、デザインやインタラクションに関してオンライン上でコミュニケーションができるコメント機能など、プロトタイピングがよりスムーズになる機能が備わっています。上部メニューにあるタブをクリックして「プロトタイプ」モードに切り替えます。切り替えることもできます。3.インタラクションの設定アートボードまたはオブジェクト毎に、いずれかの方法でインタラクションを設定できます。アートボードまたはオブジェクトを選択し、表示されるコネクタ(青い矢印のアイコン)を画面遷移先とするアートボードまでドラッグして離す※画面遷移を伴わない、音声再生などのアクションは1の方法でしか設定できません。トリガーインタラクションを発動させる方法を選択します。タップ、またはクリックで発動。左右・上下などにドラッグしたら発動。一定時間経過で発動(0.01〜5秒の間で指定可)。キーボードまたはゲームパッド上の任意のキーを押したら発動(音量調整、電源などシステムレベルキーは選択不可)。スペースキーを入力しながら、コマンドとして設定した言葉を話しかけると発動。アクション発動して実行される内容を選択します。選択した移動先へ遷移。イージング、デュレーションに加えアニメーションの種類を手動で調整します。選択した移動先へ遷移。同じレイヤー名のオブジェクトの変化に応じて、自動でアニメーションが設定されます。イージング、デュレーションは手動調整可。指定したアートボードを、現在表示している画面に重ねて表示します。モーダルウィンドウの表現などで活用。入力したテキストを機械音声で読み上げます。「ブラウザで戻る」のような挙動をします。アクションの種類によって選択できるオプションも変わります。詳しくは別のレッスンで詳説します。