プロトタイプデバイスと開始点の設定
プレゼンテーションビューでは、プロトタイプのプレビューと操作が可能です。プロトタイプ設定を使用して、Figmaがプロトタイプを表示する方法を選択できます。
プロトタイプ設定
キャンバス内の選択をクリアして、右側のサイドバーにある[プロトタイプ]パネルのプロトタイプ設定にアクセスして調整します。
- [デバイス]と[モデル]を選択する
- プロトタイプの[プレビュー]を表示する
- [背景色]を選択する
- [フロー]を確認および表示する
ヒント: コネクションの編集時に[プロトタイプ設定を表示]ボタンをクリックして、これらの設定にアクセスすることもできます。
デバイス
[デバイス]設定を使用して、プレゼンテーションビューでのプロトタイプの表示方法を制御します。
デバイス
Figmaには、人気のデバイスプリセットが多数あります。プロトタイプのフレームの寸法によって、利用可能なオプションが決まります。
- フレームプリセット: フレームプリセットを使用すると、そのプリセットに適したデバイスが選択されます。必要に応じて、別のデバイスを選択できます。たとえば、iPhone 11 Pro Maxフレームプリセットを使用した場合、デバイスとしてiPhoneが選択されます。
- カスタムサイズ(フィット): プロトタイプを表示する画面内に収まるように、デザインが自動的に拡大縮小されます。
- プレゼンテーションサイズ(フル): プロトタイプ全体が画面に表示できるサイズで表示されます。
デバイスの向き
プレゼンテーションビューでのデバイスの向きを制御します。オプションは次の通りです。
- ポートレート(縦)
- ランドスケープ(横)
メモ: プロトタイプ内で向きを切り替えることはできません。プロトタイプに縦横両方のフレームがある場合はご注意ください。
モデル
一部のデバイスではモデルにバリエーションがあります。例: iPhone 11 Pro Maxには4つの異なるカラーがあります。使用したい配色を選択できます。
選択したデバイスに応じて、特定の[モデル]を指定できます。
プレビュー
プレゼンテーションビューでデバイスがどのように表示されるかを[プレビュー]で表示します。
背景色
プロトタイピング画面の[背景色]を設定します。選択したデバイスの背後にこの色が表示されます。
ニュートラルカラーに設定するか、ブランドカラーでカスタマイズしてさらに洗練させます。
出発点
Figmaのプロトタイピングでは、1つのページでプロトタイプに複数のフローを作成し、そのデザインを通してユーザーの完全なジャーニーとエクスペリエンスをプレビューできます。フローとは、プロトタイプを構成する接続されたフレームのネットワークをユーザーが進んでいく際の経路です。たとえば、アカウント作成のフロー、商品閲覧のフロー、チェックアウトプロセスのフローなどをすべて1つのページに含めたショッピングアプリのプロトタイプを作成できます。
プロトタイプに既存のコネクションがない場合に、2つのフレーム間にコネクションを追加すると、フローの開始点が作成されます。異なるフロー開始点を追加することで、接続されたフレームの同じネットワークを使用して複数のフローを作成できます。
メモ: ファイル内のフレーム間にプロトタイプコネクションがない場合、キャンバス内のフレームは行(左から右)、列(上から下)順に並べられます。
フローの開始点をプロトタイプに追加する方法はいくつかあります。
- 開始フレームを選択し、右側のサイドバーにある[フローの開始点]セクションのをクリックする
- 開始フレームを選択して右クリックし、[開始点を追加]をクリックする
- 既存のリンクまたは開始点を持たない2つのフレーム間にコネクションを追加する
- 既存の開始点を使用してフレームを複製する
フロー名の編集
作成したフローは、デフォルトで「Flow 1」と名付けられます。追加のフローは「Flow 2」、「Flow 3」などになります。ユーザーはいつでもフローの名前を変更し、説明を追加できます。
フロー名を変更する方法はいくつかあります。
- キャンバス上の開始点フラグをダブルクリックして編集する
- 開始フレームを選択し、右側のサイドバーの[フローの開始点]セクションで[名前]フィールドを編集する
名前を変更すると、フロー名がフレームの開始点フラグとプレゼンテーションビューの左側のサイドバーに表示されます。[プロトタイプ]タブまたは右側のサイドバーで選択を解除すると、プロトタイプのすべての開始点が表示されます。
フローの説明の追加
プレゼンテーションビューでは、フローの名前と説明が左側のサイドバーに表示されます。説明は、太字のテキスト、番号付きリストまたは箇条書きリスト、ハイパーリンクで書式設定できます。説明を使用して、ユーザビリティテストの参加者にプロンプトを提供したり、チームに追加のコンテキストやドキュメントを提供したりできます。
フローの説明を追加するには、次の手順に従います。
- フローの開始点のあるフレームを選択します。
- [プロトタイプ]タブにある[フローの開始点]セクションでをクリックします。
- リッチテキストの説明を追加します。
- をクリックして説明を保存します。
説明を追加すると、プレゼンテーションビューの左側のサイドバーに説明が表示されます。フローのサイドバーと説明はいつでも非表示にすることができます。
開始点の移動
デフォルトでは、作成した最初のコネクションがフローの開始点として使用されます。開始点は別のフレームに移動できます。これを行うには、現在の開始フレームの横にある青い開始ポイントフラグをクリックしたままにし、アイコンを新しい開始フレームにドラッグします。これはトップレベルのフレーム、つまり別のレイヤーまたはフレーム内にネストされていないフレームである必要があります。
メモ: 何も選択せずにプレゼンテーションビューを表示すると、プロトタイプは設定された開始フレームから開始されます。プレゼンテーションの前にエディターで別のフレームを選択すると、プロトタイプは選択したフレームから開始されます。プレゼンテーション後に別のフレームを選択しても、プレゼンテーションビューでの表示には影響しません。
フローリンクのコピー
特定の開始点のフローリンクをユーザビリティテスターやコラボレーターと共有する方法はいくつかあります。
右側のサイドバーにある[プロトタイプ]タブから、次のようにします。
- Escを押すかキャンバス上の空きスペースをクリックして、選択範囲をクリアします。
- フロー名にカーソルを合わせ、をクリックしてリンクをコピーします。
プレゼンテーションビューから 、次の手順に従います。
- 左側のサイドバーから、共有するフローを選択します。
- ツールバーの[プロトタイプを共有]をクリックします。
- [リンクをコピー]をクリックします。