UN HAMBUR 06｜プロトタイプを設定しよう

ここまで、TopPage　Menu　Staff　Access　BlogList　BlogPage の6つのページを作成しました。
最後に、それぞれのページをプロトタイプでつなぎ、実際のWebサイトのように画面を移動できるようにします。

今回は動線が多いため、最初にヘッダーナビゲーションの設定方法を確認します。その後は、指定されたリンク先を確認しながら、自分でプロトタイプを設定してみましょう。

1. ヘッダーナビゲーションを設定しよう

まずメインコンポーネントのヘッダーを選択し、右側に配置しているナビメニューにリンクを設定していきます。

ヘッダーはコンポーネントとして作成し、各ページではインスタンスを使用しています。
そのため、メインコンポーネント側でナビゲーションのプロトタイプを設定すると、各ページに配置しているヘッダーのインスタンスでも同じ動線を利用できます。

同様にSTAFF → Staff　ACCESS → Access　BLOG → BlogList　に設定を行います。
確認時は、下図のような青い線が、対象フレームまで続いています。

2.同じページ同士だとフレームが選択できない場合

TopPage のヘッダーにある HOME とロゴは、どちらも TopPage へ戻るためのリンクとして設定します。

ただし、Figmaのプロトタイプでは、現在配置されているフレーム自身を「次に移動」の遷移先として選択することができません。

そのため、動画のようにヘッダーのメインコンポーネントを TopPage フレームの外へ移動します。
コピーではありません。移動することが大事です。外のフレームにメインコンポーネントを置くことで、TopPageへの移動が可能になります。

メインコンポーネントを配置するためのフレームを作成し、フレーム名を header としておきましょう。

TopPage 側には、ヘッダーのインスタンスを配置します。

次に、フレーム外に移動したヘッダーのメインコンポーネントでプロトタイプを設定します。

HOME → TopPage　　UN HAMBURロゴ → TopPage　となるように、それぞれ TopPage フレームへ接続します。

ヘッダーはコンポーネントとして作成しているため、メインコンポーネントに設定したプロトタイプは、各ページに配置したヘッダーのインスタンスでも利用できます。

この方法なら、Menu　Staff　Access　BlogList　BlogPage のどのページからでも、HOME やロゴをクリックして TopPage に戻る動線を共通して設定できます。

共通して使用するナビゲーションは、ページごとに同じプロトタイプを設定するのではなく、メインコンポーネント側に設定しておくと効率的です。

3. トップページ内の動線を設定しよう

ヘッダーナビゲーションの設定方法が確認できたら、次はトップページ内にあるボタンやバナーにもプロトタイプを設定します。

ここからは、これまでの操作を参考にしながら自分で設定してみましょう。

設定する動線をまとめると、

• And More → Menu
• スタッフ募集中 → Staff
• 過去の記事一覧 → BlogList
• フッターのUN HAMBURロゴ → TopPage

となります。すべて設定できたらプレビューを開き、それぞれのボタンやバナーから正しいページへ移動できるか確認しましょう。