Adobe XDでウェブデザインを加速する！[第４回] デザインに動きをつけよう！プロトタイプモードでUIをつくる
Adobe XDでウェブデザインを加速する！
ウェブサイトのデザインは見た目だけでは終わりません。どこがクリックできるのか、クリックすると何が起こるのか、クリックできることをユーザーにどう伝えるのかをデザインして、ステークホルダーや開発者と共有しなければなりません。加えて、前回の最後に紹介したようなマウスオーバー時のボタン動きや、モバイル画面にメニューを表示する時の動きなど、静的なカンプでは表現できないデザイン要素もあります。こうしたデザインの動的な側面を簡単に表現できるのがAdobe XDの強みです。
そこで今回は、ページ遷移の情報や、ユーザーの注意を引くための動きを、XDのプロトタイプモードを使用してデザインに追加する手順を紹介します。Photoshopのカンプを読み込んで動きを付けたり、デバイスの画面で実際に操作してみることもできるため、覚えておくと、とても便利な使い方です。
ページ間のリンクを可視化する
ウェブサイトを制作する際には、サイト内のリンク情報が必要です。PSDのデザインデータでは、ファイル名や記入されたテキストを通じて、どこがトップページで、どのページとどのページが繋がっているのかを伝えることになりますが、これだけでは分かりづらいために、別途ページリスト等を要求されることがよくあります。また、実際にコーディングしてみた後になって、リンクをもっと増やしておけばよかったと気づくケースもあるでしょう。
こうした状況を防ぐには、リンクを可視化して体験できる仕組み、すなわちプロトタイプが有効です。Adobe XDの「プロトタイプ」モードを使うと、簡単なマウス操作だけで、リンク情報をデザインデータに付け加えることができます。
Adobe XDのプロトタイプモードでは、動作確認のためにリンクを設定できる
リンクの設定されたプロトタイプを実際に操作すれあば、ページ遷移や状態の変化を体験できるため、ウェブサイト全体の設計を把握しやすくなります。
「プロトタイプ」モードを表示する
早速「デザイン」モードを「プロトタイプ」モードに切り替えましょう。ワークスペース上部の「プロトタイプ」タブをクリックするか、Cmd+2（Mac）または Alt + 2（Win）キーを押してみてください。
Adobe XDのプロトタイプモード
プロトタイプモードでは、ページ間の遷移をはじめ、さまざまなインタラクションを設定できます。
ホームアートボードを設定する
ページをリンクする際の重要な決め事のひとつは、遷移が始まるアートボード、すなわち「トップページ」の選択です。プロトタイプモードではまず、遷移の開始点となるアートボードを「ホームアートボード」に指定するようにしましょう。
- プロトタイプモードに切り替えて、トップページにしたいアートボードを選択します。
- 選択されたアートボードの周囲の線が水色に変化し、左上にグレーの「家のアイコン」が表示されます。
- アートボード左上の「家のアイコン」をクリックして水色にします。（これが「ホームアートボード」のしるしです）
左上のアイコンが水色のアートボードがホームアートボード
水色になった「家のアイコン」をもう一度クリックするとグレーに戻ります。
ページ間のリンクを指定する
ホームアートボードを設定したら、下階層のページへのリンクを作成しましょう。
リンクするには、クリックすると遷移することになるオブジェクト（下の例ではカード）を選択します。次に、選択したオブジェクトの右側に表示される青いと矢印のアイコン（コネクタ）をドラッグして、リンクしたいアートボードの上でドロップします。すると、オブジェクトからアートボードにワイヤーが接続されます。
リンクを設定すると、リンク元のオブジェクトとリンク先のアートボードが青いワイヤーでつながる
繋いだワイヤーを解除するには、ワイヤーを選択して、Deleteキーを押します。
「デスクトッププレビュー」を使うと、設定したリンクの動作を確認できます。画面右上の再生アイコンをクリックすると「デスクトッププレビュー」ウインドウが表示されます。ウインドウ内では、リンクを設定したオブジェクトを実際にクリックして、遷移先の画面が表示されることを確認できます。
デスクトッププレビューを使うと、設定したリンクの動作を確認できる
これはごく簡単な操作ですが、リンクが適切かどうかを確認するのにとても有効です。また、操作のしやすさを確認することもできます。たとえば、ボタンから別のページへリンクする場合に、ボタンの文字だけをクリック可能にすると、操作できる領域が少なく、ユーザーにとっては使いにくいUIになってしまいます。プレビューしたリンクを実際に操作することで、こうした様々な点について確認しながら、デザイン作業を進められるようになります。
UIの「動き」を表現する
私たちが普段見ているウェブデザインには、多くの動きを伴う演出が使われています。これらの「動き」は、ユーザーの興味や関心をひくことで、目的のコンテンツに適切に誘導する役割を果たします。ウェブデザインの中でも、特にUI（ユーザー・インターフェース）のデザインにおいては、動きを含めたインタラクションの設計が欠かせません。
例として、下のオブジェクトについて考えてみましょう。クリック可能なボタンのような見た目をしたオブジェクトです。
操作可能なボタンのように見える
ボタンのような見た目に加えて、オブジェクトの上にマウスカーソルが移動したときになんらかの「動き」があると、そのオブジェクトは実際に操作できそうだと直感的に判断できます。
Adobe XDでは、前回の記事で解説した、コンポーネントの「ステート」という機能を使うと、通常の状態からホバー状態やクリックされた状態への変化を、操作可能なプロトタイプとして実現できます。
XDでは操作可能なボタンを簡単に作成できる
残念ながら、Photoshopではこうした「動き」を表現することはできません。レイヤーを分けて、ホバー状態やクリックされた瞬間を表すデザインデータを作成することは可能ですが、PSDデータだけで動きをつけることはできません。
スマートフォンのメニューをつくろう
インタラクションデザインの対象は、ボタンだけではなく、画面遷移に伴う変化や、画面上に表示されるモーダルウィンドウの動きなど多岐に渡ります。次は、スマートフォンサイトのハンバーガーアイコンをタップすると出てくるメニューの動きを考えてみましょう。
たとえば、メニューが、画面にふわっと浮き出てくるのか、左または右からスライドしてくるのかといった「動き」を実際に見せると、インタラクションのアイデアをチーム内で共有できます。イメージしている動きをできるだけ明確に伝えることは、無駄な手戻りを減らすためにとても重要です。
これから、下のサンプルのPhotoshopのデザインカンプを元に、スマートフォンのグローバルメニューのプロトタイプをつくる手順を紹介ます。さらに、細かい動きの調整方法と、デバイス画面でのプロトタイプの確認方法も紹介します。
Photoshopで作成されたモバイルページのデザインカンプ
「デザイン」モードでメニュー画面を作成
まず、「デザイン」モードで以下の作業を行います。
- 「長方形ツール」などでハンバーガーアイコン（線が三本あるアイコン）をつくります。
- 新規アートボードを作成します。その際、アートボードの大きさはビューポートに収まるようにします。
- 新しいアートボードに、メニューの背景と、メニュー項目を作成します。
ハンバーガーアイコンとメニュー画面が追加されたデザインカンプ
デザインができたら「プロトタイプ」モードに切り替えます。
プロトタイプモードで「オーバーレイ」表示を設定する
- ハンバーガーアイコンを選択し、ハンドルをドラッグしてメニュー用のアートボードにリンクします。
- プロパティインスペクターから、アクションの種類に「オーバーレイ」を選択します。
- メインのアートボードに黄緑色の十字アイコンとボックスが表示される（下図参照）ので、必要に応じてドラッグして位置を調整します。（これは、メニュー用アートボードの表示位置になります）
オーバーレイを指定すると、アートボードに黄緑色の十字アイコンと四角い枠が表示される
「デスクトッププレビュー」を使うと、設定した動作を確認できます。「デスクトッププレビュー」ウインドウを表示したら、ハンバーガーアイコンをクリックして、メニューが画面にオーバーレイ表示されることを確認しましょう。
デスクトッププレビューでアイコンをクリックした時の動作を確認
インタラクションの詳細を設定
プロトタイプモードでは、プロパティインスペクターを操作して、インタラクションの属性を変更できます。設定可能な主な項目は以下の通りです。
トリガー
トリガーはインタラクションの「発動条件」です。今回は、ハンバーガーアイコンのクリックによりメニューが表示されるため、「タップ」を選択します。他には、「ドラッグ」「キーとゲームパッド」「音声」が用意されています。
アクション
アクションは「種類」「移動先」と、その他のオプションに分かれます。
- 種類 -トリガーにより発動されるアクションの種類（今回は「オーバーレイ」を選択）
- 移動先 -インタラクション完了時に表示される画面（今回はメニュー画面のアートボードを指定）
「種類」と「移動先」を設定したら、その他のオプションで、遷移のスピードやイージングを調整していきます。
アニメーション
トリガーに「オーバーレイ」を選択した場合は、「アニメーション」の種類を選べます。「ディゾルブ」を選ぶと、メニュー用アートボードが浮かび上がるように表示されます。「左からスライド」または「右からスライド」は、メニューが横からスライドして表示されるアニメーションを指定したいときに使用します。
プロパティインスペクターでトリガーやアクションを指定できる
他にも「イージング」や「デュレーション」を指定できます。ですが、コードを書いて実装しているわけではないので、最終的な動きを100%再現するものではありません。あくまで手軽につくれる「再現性の高いプロトタイプ」であるということを念頭に置きつつ使いましょう。
要素を固定する
デスクトッププレビューを操作すると、ハンバーガーアイコンが他のコンテンツと一緒にスクロールされて、画面から消えてしまうことがあります。このままでは使いにくいので、ページをスクロールしてもハンバーガーアイコンが常に画面（ビューポート）内に表示されるUIを作成してみましょう。
- 重ね順を操作して、ハンバーガーアイコンを最前面へ配置します。
- ハンバーガーアイコンを選択した状態で、プロパティインスペクターの「スクロール時に位置を固定」をチェックします。
プロパティインスペクターの「スクロール時に要素を固定」をチェック
「デスクトッププレビュー」で確認してみましょう。スクロールしても、ハンバーガーアイコンが同じ位置に表示されていることを確認できます。これなら、いつでもメニュー画面を呼び出せます。
画面をスクロールしてもハンバーガーアイコンの位置が変わらない
スマートフォンで確認しよう
PCで作成したデザインをスマートフォンで表示してみると、思いのほか文字やボタンが大きすぎたり小さすぎたりして、読みにくかったり、操作がしにくいと感じることがあります。Adobe XDの「デバイスプレビュー」を使えば、常に手元のデバイスで見た目や使い勝手を確認しながらデザインを作成できます。
プレビューするデバイスにはXDのモバイルアプリをインストールします。モバイルアプリにはiOS版とAndroid版があり、どちらもダウンロードは無料です。インストールしたら、PC側と同一のAdobe IDでログインしておきましょう。
デバイスをUSBケーブルでPCと接続し、モバイルアプリを起動します。ライブプレビューのタブを選択すると、デスクトップのXDで選択されているアートボードが、デバイスの画面に表示されます。インタラクションが設定されている場合、デバイスプレビューでもデスクトッププレビューと同様にプロトタイプを操作できます。（なお、USB によるリアルタイムプレビューは、AndroidとWindows 10の組み合わせではサポートされていません）
この機能のよい点はリアルタイムで修正がデスクトップからデバイスに反映される点です。手元のデバイスで確認しながらデザインデータをつくり込んでいくのは、理想的なワークフローと言えるでしょう。
一方、デザイナー以外のチームメンバーが、デザイン確認のためにデバイスプレビューを利用すると、逆に非効率になってしまいます。そこでXDには、ブラウザーでプロトタイプを確認できるように、共有URLを発行する機能が提供されています。
次回は、さまざまな立場のメンバーとデザインを共有することができる「共有」モードの使い方を紹介します。