Adobe XDのプロトタイプ練習｜3画面をつないでレビューする

Adobe XDは現在メンテナンスモードです。本記事はXDを利用できる既存ユーザー向けです。新規利用・再インストールの可否はAdobeアカウントの契約内容と管理者に確認してください。

この演習では「商品一覧 → 商品詳細 → 完了」の3画面を作り、進む・戻る操作と共有レビューを確認します。基本的な図形や文字の配置はXDの基本操作ガイドを参照してください。完成条件は、閲覧者が説明なしでも開始画面から完了画面まで操作できることです。

1. 演習の準備

1.1 ファイルと利用環境を確認する

XDが使える既存環境で新しい作業ファイルを用意します。元ファイルを利用する場合は複製し、画像やフォントが使えることを確認しましょう。古い月額料金や7日間という説明で、現在の契約は判断できません。

1.2 画面ごとの役割を決める

一覧には商品カード、詳細には商品名と確定ボタン、完了には結果と一覧へ戻るボタンを置きます。共通するボタンを部品として再利用し、押せる箇所が見分けられるようにしましょう。

1.3 ワイヤーフレームとプロトタイプの違い

ワイヤーフレームは情報の配置、モックアップは見た目、プロトタイプは操作の流れを確認するために使います。試作で画面が動いても、実際の注文処理やデータ保存が実装されたことにはなりません。

2. 3画面を準備する

• 同じサイズのアートボードを3つ作り、「一覧」「詳細」「完了」と名付けます。
• 一覧にカードを配置し、詳細と完了には次の操作が分かる文言を置きます。
• 文字が長い場合の折り返し、ボタンの押しやすさと余白を確認します。
• 今回は表示検証用のダミーデータと明記し、実顧客の情報を入れないでください。

3. トリガーとアクションを設定する

プロトタイプモードで一覧のカードを選び、詳細アートボードへ接続します。トリガーは操作のきっかけ、アクションはその結果です。まずクリックまたはタップで画面を遷移する設定を使い、詳細の確定ボタンから完了へ接続してください。

詳細の戻るボタンを一覧へ、完了の戻るボタンも一覧へつなぎます。開始画面を一覧に設定してプレビューを開き、各ボタンが狙った画面へ移るか確認します。接続を増やす前に、単純な経路が一通り動くことを確認しましょう。

4. 共有してレビューを行う

4.1 閲覧権限を確認する

共有モードでレビュー用リンクを作成し、公開範囲を確認します。自分の編集権限がない状態でも目的の閲覧者が開けるか、事前に確認してください。

4.2 一つのタスクを依頼する

「一覧から商品を選び、内容を確認して完了してください」と依頼します。先に正解の操作を説明せず、止まった箇所、迷った文言、戻れなかった画面を記録します。

4.3 修正と再確認

観察結果からボタンの文言、配置、接続先を修正し、リンクを更新して同じタスクを試します。コメントの確認者と修正済みの基準も決めましょう。

別のツールでも同じ3画面と検査表を使えば、操作の作り方を比較できます。Pixsoの無料プランには3つのデザインファイルと3つのホワイトボードファイルが含まれます。個人の下書きや閲覧用シートの扱いはチームの編集用ファイル数と区別し、現在の料金と上限を確認してください。

Pixsoで試す

Pixsoを無料で体験

5. 演習の完成条件

開始から完了まで進めること、戻れること、閲覧者がリンクを開けることを確認したら、演習は完了です。条件分岐や部品状態を調べたい場合はXD機能索引、画面作成を復習する場合は基本操作ガイドに進んでください。