デザインデータからコーディングを行う際に確認する際に、リンクがどこのページに遷移するのか悩んだ経験はありませんか？ 少ないページなら判断がつきますが、ページ数が膨大になればなるほど判断は難しくなります。
そこでAdobe XDの「プロトタイプ機能」の登場です。
Adobe XDにはコードを記述しない状態でWebサイトの挙動をテストすることができる機能があります。
この記事では、プロトタイプ機能の「概要」や「使用例」を画像を交えながら紹介していきます。
目次
プロトタイプ機能について学ぼう
まずは、Adobe XDのプロトタイプ機能についてイメージを膨らませていきましょう。
プロトタイプ機能とは
プロトタイプ機能とは、デザインデータ内でWebサイトのページ遷移やアニメーションを設定することができる機能です。
テキストでの説明だといまいちイメージができないと思うので、画像の例をご用意いたしました。
プロトタイプ機能の例
画像はデザインデータのみで実装されたものになります。
コードは一切記述していないにもかかわらず、要素をクリックするとページが遷移しました。
上記の例のように、デザインデータ内でWebサイトの挙動を確認できる機能がプロトタイプ機能になります。
プロトタイプ機能の使い所
プロトタイプ機能では、主に以下のことが実装できます。
プロトタイプ機能でできること
- デザインデータ内のページ遷移の設定
- アニメーションの設定
- ホーム画面の設定
デザインデータの状態から、遷移先のページやアニメーション等の試作を設定することができます。
上記の内容をデザイナーとエンジニア間で、プロトタイプ機能を通じて事前に共有できることがポイントです。
プロトタイプを設定するメリット
- デザイナーとエンジニア間のコミュニケーションコストが下がる
- 操作性や遷移先などの共有が容易になる
- デザインデータの状態でWebサイトの挙動の確認ができる
デザイナーとエンジニアの意思疎通が測りやすくなり、制作がスムーズに行うことができるようになります。
プロトタイプ機能の使い方
次にプロトタイプ機能の使い方について確認していきましょう。
今回は、プロトタイプ機能で最も基本的な「ページ遷移」について合わせて紹介していきます。
デザインを作成する
まずは、プロトタイプを作成するためのデザインを作成します。
練習用のデザイン
皆さんもアートボードを３つ用意し、簡単なボタンを置いてみましょう。
（記事の解説上、綺麗なボタンで作成していますが、皆さんは長方形を置くだけでも大丈夫です。）
プロトタイプの完成の動き
今回は、上記の例のようにボタンをクリックするとページが遷移するプロトタイプを設定します。
プロトタイプモードを開く
Adobe XDは３つのモードをが用意されています。
- デザインモード：デザインを作成するモード
- プロトタイプモード：プロトタイプを作成するモード
- 共有モード：デザインデータの共有設定を行うモード
この３つのモードの名前は覚えておきましょう。
普段、デザインを作成するために使用しているのはデザインモードです。
今回は、プロトタイプを作成するので、「プロトタイプモード」を選択しましょう。
画面左上から「プロトタイプ」をクリックする
それでは、プロトタイプモードへの切り替え方法を説明していきます。
プロトタイプモードに切り替える際は、Adobe XDの画面左上にある「プロトタイプ」をクリックします。
画面右側のプロパティの表記が変わっていることにも注目してみましょう。
インタラクションを設定する
次は、プロトタイプを作成する上で欠かせない「インタラクション」についての説明です。
インタラクションとは、プロトタイプモードで表示される導線のことです。
冒頭の例でお見せしたページ遷移を行うためには、インタラクションの理解が必要になります。
インタラクションを表示する
プロトタイプモードで要素を選択すると、インタラクションが表示されます。
画像の例で表示されている青い線がインタラクションです。
インタラクションでアートボードを繋ぐ
インタラクションは、先端をドラッグすることで伸ばしたり縮めたりすることができます。
インタラクションを繋ぎ合わせる場合は、先端をドラッグして繋ぎ合わせたいアートボードの上の上でドロップしてあげましょう。
今回は、ボタンをクリックしたらページが遷移するように設定します。
それぞれのボタンから伸びるインタラクションをアートボードに繋いであげましょう。
トリガーとアクションを設定する
インタラクションの設定では「トリガー」と「アクション」の２つの設定を行います。
「クリックしたらページを遷移させる動き」を実装する場合には特に設定は必要ありません。
デフォルトのまま、インタラクションを繋ぐだけで実装できます。
なので、先に進みたい方は次の「プレビューをする」まで読み進めてしまって大丈夫です。
詳しく知りたい方は、以下の項目も知識として持っておきましょう。
詳しく知りたい方向け
トリガーとアクションの設定は「何をした時、何をさせる」をイメージしましょう。
この２つの設定を行うことで、プロトタイプの設定を行っていきます。
トリガー
- タップ：タップ/クリックした時（デフォルト）
- ドラッグ：ドラッグした時
- ホバー：ホバーした時
- キーとゲームパッド：特定のキーを操作した時
- 音声：特定の音声が入力した時
トリガーの項目は全部で６つあります。
まずは基本的な設定となる「タップ」の項目だけ押さえておけば、一旦は大丈夫です。
アクション
- トランジション：ページを遷移させる（デフォルト）
- 自動アニメーション：アニメーションを起こさせる
- オーバーレイ：アートボードを重ねて表示させる
- スクロール：指定位置までスクロールさせる
- １つ前のアートボード：１つ前のアートボードを表示させる
- オーディオ再生：音声ファイルを再生させる
- 音声を読み上げる：テキストを音声で読み上げさせる
アクションの項目は全部で７つあります。
ここでも基本的な設定となる「トランジション」の項目だけ押さえておけば、一旦は大丈夫です。
トリガーとアクションのまとめ
ここまでで、トリガーとアクションの項目を紹介してきました。
「クリックしたらページを遷移させる動き」を実装する場合は、
トリガーを「タップ」、アクションを「トランジション」に設定すれば実装できます。
他の項目は、実装したいプロトタイプの動きによって設定を変えていきましょう。
プレビューをする
インタラクションの設定が完了したら、確認の作業に移ります。
プレビューをする
Adobe XDでは、デザインを確認するためのプレビュー機能があります。
このプレビューの状態で、デザインがどのような見た目で書き出されるかを確認していきます。
画面右上のプレビューアイコンをクリックするか、以下のショートカットキーでプレビュー画面を表示しましょう。
プレビューのショートカット
- Windows：Ctrl Enter
- Mac：Command Enter
動作を確認する
プレビュー画面を開いたら、実際にプロトタイプの設定が反映されているか確認しましょう。
インタラクションを設定した箇所をクリックし、ページが遷移できていれば成功です。
プロトタイプ機能を使いこなそう
ここまでで、プロトタイプ機能の「概要」と「使用例」について紹介していきました。
今回は、プロトタイプ機能の基礎的なページの遷移の方法に学ぶことができれば大丈夫です。
使い方以外にも、
- デザイナーとエンジニア間のコミュニケーションコストが下がる
- 操作性や遷移先などの共有が容易になる
- デザインデータの状態でWebサイトの挙動の確認ができる
プロトタイプ機能を使用すると、上記のメリットが得られることも忘れずにいてください。
他の設定についても実際にプロトタイプを作成してみて覚えていきましょう。
