長いページやスライダーを含むデザインをFigmaでプロトタイプ化する際、「スクロールが動かない」「ヘッダーが画面から消える」などのトラブルに遭ったことはありませんか。スクロール設定を正しく理解することで、縦長ページもスマートフォンの画面でも自然に動くプロトタイプを作ることができます。この記事では最新情報に基づいて、Figmaでプロトタイプスクロール設定を完全解説します。短時間で操作をマスターできます。
目次
Figma プロトタイプ スクロール 設定とは何か
Figma プロトタイプ スクロール 設定は、デザインしたフレーム内でユーザーが上下または左右に移動できるようにする設定です。画面全体や部分的な要素でスクロール／オーバーフローを設定することで、実際のアプリやウェブの動きを忠実に再現できます。最新情報によれば、この機能はすべてのプランで使用可能で、編集権限があれば追加設定ができます。プロトタイプタブの「Scroll behavior（スクロール動作）」から、「Overflow（オーバーフロー）」を選び、縦・横・両方向・無効を設定する形が基本です。スクロールを有効にするにはフレーム内の内容がフレーム外にはみ出している必要があります。クリップ設定やオートレイアウト、レイヤー階層など他の要素とも関係してくるため、これらを正しく理解することが成功の鍵となります。最新情報によると、フレーム内のレイヤーのスクロール位置も、スクロールと一緒に動く／固定される／スティッキーになる、という3つの設定が選べ、それぞれ異なるユーザ体験を提供します。
スクロールのオーバーフローとは
オーバーフローとは、フレームの描画領域を超えたコンテンツ部分をどう扱うかを指定する設定です。縦スクロール、横スクロール、両方向スクロール、スクロールなしの4タイプがあります。縦長レイアウトなら縦、カルーセルなど横スクロールが必要な場面には横、画像やマップ表示などでは両方向を選ぶことで自然な動きを実現できます。スクロールなしに設定すると、コンテンツがフレームを超えていても表示されません。最新情報によれば、この機能はプロトタイプタブで簡単に切り替えられます。
スクロール位置のオブジェクト設定
フレーム内の要素（ナビバー・サイドバー・固定ボタンなど）をスクロールとともに動かすか、画面に固定するか、スクロール中にスティッキーになるかを設定できます。スクロールとともに動く設定はコンテンツの一部として扱われ、固定（Fixed）はスクロールしても位置が変わらないようにします。スティッキーは最初はスクロールとともに移動し、特定の位置で固定される動きです。たとえば、ページの上部に到達したときにヘッダーがスティッキーになるのが典型例です。この設定はユーザー体験を向上させるため非常に有効です。
状態管理：スクロール位置の保持とリセット
プロトタイプで複数の画面を遷移する際、スクロール位置を維持した状態で移動するか、毎回リセットするか選べます。最新の仕様ではスクロール位置はデフォルトで保持されるようになっており、同名または共通プレフィックスを持つフレーム間での移動時にその位置が共有されます。逆に移行時にスクロール位置を初期化したい場合は、対象となる遷移のプロトタイプ設定で「リセットスクロール位置」を有効にします。ユーザーが前の状態を見失わずに操作できるよう工夫することが大切です。
具体的な操作手順：縦長ページでスクロールを設定する方法
縦長ページを持つデザインでは、ユーザーが自然にスクロールできるように設定することが重要です。具体的な手順を追って設定すれば、画面の高さを超えるコンテンツでもスムーズに動作します。ここではフレームの準備からスクロールオーバーフローの適用、オブジェクトごとのスクロール位置設定、そしてプレビューでの動作確認までを段階的に解説します。初めて使う方でも順番通りやっていけば確実に習得できます。
フレームの準備：コンテンツのはみ出し確認
まず対象とするフレームを選び、デザインタブでサイズを確認します。縦長ページの場合は高さを長く設定し、中のテキスト・画像・リストがフレームの下端を超えるようにデザインします。デザインタブで「Clip content（コンテンツを切り取る）」を有効にしておくことで、はみ出した部分が見えなくなり、スクロール感がわかりやすくなります。はみ出していないとスクロール設定を適用しても警告が出ます。最新の操作では、このはみ出しがスクロールの必要条件です。
プロトタイプタブでオーバーフローを設定
フレームを選んだ状態で、プロトタイプタブに移動します。スクロール動作（Scroll behavior）のセクションでOverflowドロップダウンを開き、縦（Vertical）を選びます。フレーム全体をスクロール可能にするため、横スクロールや両方向は内容に応じて設定します。縦長ページではVerticalを選ぶのが基本です。Overflowを設定後、プレビュー状態でスクロールが動作するかどうか確認します。
オブジェクトのスクロール位置設定でヘッダーやボタンを固定／スティッキーに
画面上部にナビバーやタイトルバーを表示させたい場合など、要素にスクロール位置の設定を適用します。その要素を選択し、プロトタイプタブ内のScroll behaviorにあるPosition設定でFixedやStickyを選びます。Fixedを選ぶと常に画面上に表示され、Stickyはスクロールが一定位置を越えたときに固定されます。ただしオートレイアウトが設定されているフレーム内ではFixedは使えない制限がありますので、必要なら絶対位置を使うなどの対応が求められます。
困りがちなトラブルとその解決策
プロトタイプスクロール設定をするとき、意図した動作が行われないことがあります。ここではよくある問題と、その原因および対策を説明します。スクロールが効かない、固定要素が意図しない動きをする、オートレイアウトとの干渉など、設計の初歩でつまづきやすいポイントに対して実践的な解決策を紹介します。
スクロールが動かない原因と対処法
コンテンツがフレームの境界を越えていない、またはクリップ設定が無効、オーバーフロー設定が「No scrolling」のままなどが主な原因です。まずはフレーム内で内容がはみ出しているか確認し、デザインタブでClip contentをオンにします。次にプロトタイプタブでスクロール動作をVerticalまたはBoth directionsに設定します。警告マーク（！）が出る場合はこのどれかが不足しています。
固定要素・スティッキー要素が正しく動かない問題
FixedまたはSticky設定をしても挙動が期待した通りでない場合、オートレイアウトが原因のことがあります。Fixedにできるのは絶対位置が指定されているオブジェクトであり、Auto Layout内で要素がレイアウト制約に従っていると固定配置が制限されることがあります。またレイヤーの階層順やCanvas stackingの設定によって、スクロールコンテンツの上や下に表示されてしまうこともあります。
スクロール位置のリセットや保持が効かない場合
複数のフレーム間を移動したとき、スクロール位置が毎回トップに戻る・保持されるのに意図せずリセットされることがあります。最新仕様では、トップレベルフレームの名前が一致するか共通の接頭辞があるかでスクロール位置の保持が自動適用されます。意図的にリセットしたい場合は遷移アクション設定で「Reset scroll position」を有効にします。不一致な名前だと自動保持が働かないので名前付けにも注意が必要です。
応用テクニック：見栄えと使いやすさを高める工夫
スクロール設定をマスターしたら、さらにプロトタイプのクオリティを上げるための応用テクニックがあります。ユーザーの体験を向上させるデザインの細かいこだわりを取り入れることで、クライアントやチームに提供するプロトタイプの印象が大きく違ってきます。
アニメーションを使ったScroll to操作
特定の要素に遷移する際、「Scroll to」アクションを使うことができます。例えばフッターのボタンからページ上部に戻る操作などで使われます。このアクションにはInstantまたはAnimate設定があり、Animateを選べばEase outなどのカーブを指定してより自然な動きにできます。ユーザーに滑らかな体験を提供するためにおすすめです。
キャンバススタッキングを調整して見た目を整える
スクロール時に固定要素の背後にスクロールコンテンツが表示されたり、重なり順がおかしくなったりすることがあります。Auto Layoutフレーム内ではCanvas stackingを「First on top」などに設定でき、固定要素を他の要素よりも前面に表示するよう指示できます。これによりナビバーや固定ボタンなどが常に画面に乗るようになります。
レスポンシブ対応やデバイスプレビューでの確認
スマートフォンやタブレットでの閲覧を想定するなら、デバイス設定やカスタムサイズのプレビューで実際のスクロールの見え方を確認してください。画面の高さが異なるとスクロール量や固定位置の見え方が変わります。選択したデバイスサイズがフレームと合わない場合、スクロールが見切れたり固定が効かない場合があります。デザインの初期段階で複数の画面サイズで試すことが望ましいです。
よくある質問（FAQ）
スクロール設定についてユーザーが頻繁に疑問に思う内容をまとめ、回答します。このセクションを読むことでトラブル解決や設定のヒントが得られます。
オートレイアウト内でFixedやStickyは使えるか
Auto Layoutフレーム内ではFixedスクロール位置を利用できないことがあります。これはオートレイアウトが要素の位置を自動で計算するため、絶対位置が要求されるFixedでは制約により機能しないためです。Stickyに関しては縦スクロールのあるフレームであれば使えますが、親フレームのビューからはみ出すとスクロールに含まれてしまうため注意してください。
スクロールが効かないフレームに警告マークがでる理由
プロトタイプタブでOverflowを設定しようとするときに表示される警告マークは「このフレームでスクロールを作動させるにはコンテンツがフレームより大きくなければなりません」という内容です。これは配置されたテキスト・画像などがフレーム内に収まりきっており、スクロール可能な余白がないことを示しています。はみ出す要素を追加するかフレームサイズを縮小することが対策になります。
スクロール位置の保持を意図せず失う理由
スクロール位置が保持されないのは、対象フレームの名前が他のフレームと一致しないか共通プレフィックスがないことが原因であることが最新仕様で知られています。また、遷移のプロトタイプ設定でReset scroll positionが設定されていると保持されません。これらを確認し、必要なら名前を統一し、設定を見直してください。
まとめ
Figmaで縦長ページを含むプロトタイプを作る際には、「スクロールオーバーフローの適切な設定」「フレームコンテンツのはみ出し確認」「オブジェクトのスクロール位置設定」「スクロール位置の保持／リセット」の4つが要点となります。さらにScroll toアニメーションやキャンバススタッキングなどの応用テクニックも取り入れることで、よりプロフェッショナルで使いやすいプロトタイプを構築できます。最新情報に基づいた操作を実践すれば、縦長ページものびのびとした動きで快適なプレビューが実現できます。
コメント