プロトタイプのスクロールおよびオーバーフロー挙動

プロトタイプでスクロールとパンの動作を設定し、以下のようなユーザーインタラクションを再現します。

• 長いコンテンツページの上下スクロール
• スライダーのさまざまな項目を表示する左右スクロール
• インタラクティブマップのような任意の方向へのパンまたはスクロール
• スクロール時にナビゲーションバーやメニューなどのオブジェクトをページ上の1つの位置に固定
• その位置を過ぎてスクロールした後でもフレームの上部に留まる「追従オブジェクト」の作成

Figmaプロトタイプでスクロールを使用するには、以下の対応が必要です。

1. スクロール用フレームの準備: コンテンツがフレームの寸法の境界を超えるようにします。
2. フレームにスクロールオーバーフローを適用: フレームに、縦スクロール、横スクロール、縦横スクロール、スクロールなしを定義します。
3. フレーム内のオブジェクトにスクロール位置を適用: スクロール移動時のフレーム内オブジェクトの動作を定義します。親フレームとの同時スクロールや、定位置での表示、親フレーム上部での固定が可能です。

スクロールを設定すると、複数のフレーム間の移動時にスクロール位置の保存やリセットもできます。

スクロール用フレームの準備

フレームにスクロール動作を追加するには、フレームの境界を超えるコンテンツがフレームにあることが必要です。

一般的なWebページと同様です。スマートフォンでページを閲覧する場合、画面のサイズに合ったコンテンツしか表示されません。画面に表示されない「隠れた」コンテンツがあり、それはスクロールしなければ見ることができません。

フレームの寸法を超えたコンテンツの拡張

フレームのサイズを変更するには、次の手順に従います。

1. 更新するフレームを選択します。
2. 右サイドバーの[デザイン]パネルを開きます。
3. カーソルが表示されるまで、フレームの端にポインターを合わせます。
4. バウンディングボックスをドラッグして、フレームのサイズを変更します。

選択したフレーム内に各オブジェクトが収まるようにするには、左ナビゲーションパネルの[レイヤー]セクションを確認します。子オブジェクトは、親フレームの下にネストされます。

コンテンツを隠す

[コンテンツを隠す]で、フレームの境界を超えるコンテンツを非表示にできます。

1. 更新するフレームを選択します。
2. 右側のプロパティパネルで[デザイン]タブを開きます。
3. [レイアウト]セクションで[コンテンツを隠す]の横にあるボックスをチェックします。

フレームへのスクロールオーバーフローの適用

スクロールオーバーフローは、フレームの寸法の外に出るコンテンツをユーザーが操作する方法を定義します。

オーバーフロー挙動はフレームにのみ適用できます。これは、キャンバス上の直接のフレーム(最上位フレーム)だけでなく、別のフレームまたはレイヤー内でネストされているフレームにも適用されます。

フレームにスクロールオーバーフローを適用するには、以下の手順に従います。

1. フレームを選択します。
2. 右側のプロパティパネルの[プロトタイプ]タブを開きます。
3. [スクロールの操作]セクションで、[オーバーフロー]ドロップダウンを選択します。次のいずれかを選びます。
   • スクロールなし
   • 水平
   • 垂直
   • 両方向

垂直

縦スクロールでは、スワイプまたは上下にスクロールできます。この挙動を使用して、長いウェブサイトやアプリ内のコンテンツページのスクロールダウンを再現します。

水平

横スクロールでは、縦方向の位置を維持しながら、左右にスワイプまたはスクロールできます。これを利用して、製品、ギャラリー、ライブラリなどのコンテンツのスライダーを作成できます。

スクロールなし

スクロールなしでは、任意の方向にスクロールできません。フレームの境界を超えたコンテンツは表示されません。

両方向

両方向(縦横方向)により、地図や拡大画像の表示のようにあらゆる方向に移動することができます。

フレーム内オブジェクトへのスクロール位置の適用

スクロール位置には、スクロール移動時のフレーム内レイヤーの動作を定義します。各レイヤーに適用できるスクロール位置は1つだけです。

1. オブジェクト、グループ、コンポーネントを選択します。オブジェクトは、スクロールオーバーフローが適用されているフレーム上のものでなければなりません。
2. 右側のプロパティパネルの[プロトタイプ]タブを開きます。
3. [スクロールの操作]セクションで、[位置]ドロップダウンを選択します。次のいずれかを選びます。
   • 親とスクロール
   • 固定
   • 追従

親とスクロール

親と同時にスクロールするオブジェクトは、スクロールに合わせてフレームを上下に移動します。この挙動を利用して、長いコンテンツページを上下にスクロールする動作を再現します。

固定

固定されたオブジェクトは、上下にスクロールしても移動しません。このオプションは、ステータスバーをデバイス上部に固定したり、メニューをフレーム下部に固定するのに使用します。

オブジェクトに絶対位置が適用されている場合を除き、オートレイアウトのフレーム内でオブジェクトに固定スクロール位置を割り当てることはできません。

オブジェクトを固定に設定すると、オブジェクトはフレーム内の他のレイヤーの上に移動し、左ナビゲーションパネルの[レイヤー]セクションで固定というラベルが表示されます。固定レイヤーの上には、スクロールオブジェクトを配置できません。

追従

縦スクロールするフレーム内の任意のオブジェクトに、追従スクロール位置を適用します。

追従オブジェクトは最初はスクロールしますが、オブジェクトの上端が親フレームの最上部に達すると固定されます(再度上にスクロールすると、オブジェクトは親フレームを下に移動します)。

追従オブジェクトがフレーム内の別のレイヤーにネストされている場合、直接の親の境界内にとどまります。つまり、直接の親レイヤーがスクロールして表示外になった場合でも、追従オブジェクトは引き続き親レイヤーと同時にスクロールされます。

左ナビゲーションパネルの[レイヤー]セクションをチェックして、スクロール時に追従オブジェクトがどのようにスタックするかを確認します。追従オブジェクトの下にあるレイヤーはその背面でスクロールし、上にあるレイヤーはその前面でスクロールします。追従スクロールのためにオブジェクトのスタック順序を変更するには[レイヤー]パネルで変更します。

スクロール位置の保存とリセット

プロトタイプに複数のページまたは画面がある場合、スクロール位置の保存やフレーム間のスクロール位置のリセットを選択できます。

• スクロール位置を保存: フレーム間の遷移時にユーザーのスクロール位置を保存します
• スクロール位置のリセット: フレーム間の遷移時にユーザーのスクロール位置をリセットします

プロトタイプでスクロール位置を保存またはリセットする方法の詳細→