UIデザイナーにとって、もはや欠かせない存在であるFigmaのプロトタイプ機能。アイデアを検討する段階から、チームでのブレスト、さらにはユーザーテストまで、様々な場面で活躍してくれます。
でも、慣れてくると「この動きはFigmaプロトタイプでは再現できないのか…」と困ってしまうことも増えてきませんか？
実は、既存の機能を組み合わせて複雑な動きを再現できることもあるんです。この記事ではそのひとつ、Webサイトの「スクロールすると固定ヘッダーの見た目が変化する」動きをFigmaプロトタイプで再現する方法についてご紹介します。
目次
Webサイトでよく見る、スクロールするとヘッダーが変化する表現
まずは作成したプロトタイプをご覧ください。
このように、ナビゲーションのメニューが多く固定ヘッダーの縦幅が大きい場合、スクロールするとヘッダーがコンパクトになるWebサイトをたまに見かけますよね。
実際にこのヘッダーの表現を取り入れている例：キーエンス株式会社のWebサイト
スクロールするとヘッダーが小さくなることのメリットとしては、以下の相反する利点を両立できることです。
- 何度もサイトを訪れている人は、ヘッダーにさまざまなメニューが表示されることで、すぐに目的のページに遷移できる
- 初めてサイトを訪れた人など、サイトトップのコンテンツを詳しく見たい人（＝サイトトップでスクロールをする人）は、スクロールするとヘッダーが小さくなることで、より表示されているコンテンツに集中できる
また、「スクロールするとヘッダーが大きくなる（主張が強くなる）」という逆パターンの表現を取り入れているWebサイトも見られます。
実際にこのヘッダーの表現を取り入れている例：GREEN SPOONのWebサイト
スクロールするとヘッダーが現れる（主張が強くなる）表現のメリットは、ファーストビューではブランドの世界観を象徴するキービジュアルへの没入感を出しつつ、スクロール後はサイトの機能を強調できることです。
スクロールでヘッダーが変化する表現をFigmaプロトタイプで再現する方法
スクロールするとヘッダーの見た目が変化する動きは、Figmaの機能そのものとしては用意されていません。そのため、いくつかの機能を組み合わせて再現することになります。
この記事では、2つの方法をそれぞれメリット・デメリットと合わせてご紹介します。あくまでプロトタイプのため、実装後の動きを完全に再現できるわけではありませんが、チームメンバーやクライアントにアイデアを共有するには十分なクオリティだといえそうです。
前提として、Figmaプロトタイプの基本的な機能であるScroll behavior（Scroll with parent/Fixed/Stickyなどのポジション）、Variantsを使用します。それぞれの機能の詳細については、Figma公式サイトや他の解説記事等をご覧ください。
方法1. 別画面に遷移させる
1つ目は、スクロール前とスクロール後で画面を2つ用意し遷移させる方法です。
こちらのデザインを例に解説していきます。
（※今回ご紹介する方法は、いずれもヘッダーが画面幅いっぱいのサイズであることを想定しています。）
上記の画面を複製します。複製前の画面を「画面A」、複製した新たな画面を「画面B」と呼びます。
変化させた後の見た目のヘッダーを作成し、画面Bに配置します。
（※説明のため、上記の画像ではそれぞれフレーム名を「画面A」「画面B」に変えていますが、実際はフレーム名を変えないようにしてください。フレーム名が変わるとSmart Animateが適用されません）
画面Bのヘッダーは、Scroll Positionを「Sticky」に設定してください。
画面Aのキービジュアルに、「mouse leave」をトリガーとして「navigate to」で画面Bに遷移する動きをつけます。
同様に、画面Bのキービジュアルには「mouse enter」をトリガーとして画面Aに「navigate to」で遷移する動きをつけてください。
これにより、画面の上部まで再びスクロールして戻ると、変化する前のヘッダーのみが表示されるようになります。
以上の設定でヘッダーの変化を擬似的に再現することができます。
仕組みをあらためて解説すると、「画面をスクロールする→カーソルがキービジュアルの外に出る（ファーストビューの範囲を超える）→ヘッダーが変化した別画面に遷移する」と言う流れです。
今回はキービジュアルの画像に「mouse leave」をトリガーとする動きをつけましたが、ファーストビューより下側に置くコンテンツに「mouse enter」をトリガーとする動きをつけても構いません。その場合、コンテンツに必ずカーソルが触れるよう、横幅を画面幅いっぱいにしてください。
この方法はシンプルで使いやすいのですが、画面を2つ用意する必要があるため、ページ数が多く遷移が複雑なプロトタイプだと扱いづらい点がデメリットです。
方法2. Variantsを利用する（変化後のヘッダーが目立たないデザインの場合）
2つ目は、Variantsを利用する方法です。この方法は、変化した後のヘッダーがアイコンのみになるなど、目立たないデザインである場合に有効です。
まず、変化させた後の見た目のヘッダーを、Variantsとしてopacity100%と0%の2種類用意します。
上がopacity100%、下がopacity0％です。
プロトタイプで、opacity0%のvariantに対し、「mouse enter」をトリガーにopacity100%に変化するようにします。
また、opacity0%のvariantはScroll Positionを「Sticky」にしておきます。
ここまで完了したら、キービジュアルのすぐ下にopacity0%のvariantを置いてください。
キービジュアルがない場合も、スクロールする際に必ずマウス（カーソル）が通過する場所に置くのがポイントです。
以上の設定でヘッダーの変化を擬似的に再現することができます。
仕組みをあらためて解説すると、「画面をスクロールする→カーソルがopacity0%のヘッダーに触れる→ヘッダーがopacity100%のvariantsにchange toする」という流れです。
この方法のメリットは、この画面だけで再現が完結するため、遷移先の画面が複数あるプロトタイプでも遷移が複雑にならない点です。
一方で、ページの途中でヘッダーが変化するため、変化後のヘッダーの存在感が強い場合は違和感が生じてしまうというデメリットがあります。また、ヘッダーが変化した後、再びページトップまで戻ると元のヘッダーと2つとも表示されてしまうという懸念点もあります。
まとめ
以上、スクロールするとヘッダーが変化する動きをFigmaのプロトタイプで再現する方法を2つご紹介しました。
1つの画面内での再現度やクオリティにこだわりたいのであれば方法1がおすすめです。下層ページなども含めた複雑なプロトタイプの場合は、ヘッダーがシンプルなデザインであることが前提ですが、方法2を使って簡略に動きを再現すると良いでしょう。
プロトタイプは、作りたいプロダクトのイメージを共有する上で非常に重要な役割を果たします。Figmaプロトタイプの機能を存分に活用して、プロダクトの解像度を上げていきましょう！
i3DESIGNでは、アプリやWebサービスなどのデザイン支援を行っております。新しいプロダクトやサービスの立ち上げ、改善に関するご相談やUIレビューのご依頼は、ぜひこちらからお気軽にお問い合わせください。
