スクロールするプロトタイプの作り方：固定ヘッダーと長い画面

スクロールするプロトタイプは、表示領域となるフレームを作り、その範囲を超えるコンテンツを配置して、必要な方向のスクロールを有効にすると作れます。常に見せる必要がある操作だけを固定します。重要なのは、表示領域の高さとコンテンツ全体の高さを分けることです。すべてが収まるほどフレームを縦に伸ばすと、その中でスクロールする余地がなくなります。

例として、コンパクトなヘッダー、写真と概要、行程、レビュー、日付選択の操作を持つ、縦長のアクティビティ予約ページを作ります。Pixsoのインタラクティブなプロトタイプ機能は、コンテンツのスクロールと要素の固定に対応しています。ページを通して確認し、どの操作を画面に残すべきか判断できます。

ページ全体の画像ではなく、表示領域から作る

確認したい画面の寸法でフレームを作成します。この例では390×844のレイアウトを使います。これは作業例の寸法であり、モバイルデザイン全般の必須サイズではありません。プロジェクトに必要なほかのサイズでも確認してください。

フレーム内には、写真、タイトル、基本情報、行程、レビュー、予約情報を読む順序で配置します。コンテンツは表示領域の下まで続くようにします。実際の長さが分かる程度の文章を入れましょう。タイトルと三つの仮の四角形だけでは、行程を無理なく読めるか判断できません。

表示領域のフレームは、想定した画面の高さに保ちます。全セクションが見えるまでフレームを伸ばすと、内容がはみ出す画面ではなく、長いキャンバスになります。プレビューでページ全体が縮小され、期待したスクロールが起きずに文字だけが小さくなることがあります。

見た目の位置だけでなく、レイヤーの構造も確認します。行程やレビューは、スクロールさせるコンテナーに含まれている必要があります。キャンバス上でその下に並んでいるだけでは不十分です。フレームにそろって見えるレイヤーでも、その子要素になっていない場合があります。

正しいフレームにスクロール方向を設定する

表示領域のフレームを選び、Prototypeタブのオーバーフロー動作を縦方向のスクロールに設定します。Pixsoの公式フレームドキュメント（英語）では、横方向、縦方向、両方向、スクロールなしが定義されています。このアクティビティページでは、縦方向から始めるのが適切です。

柔軟に見えるという理由だけで、両方向のスクロールを有効にしないでください。モバイルページが横へずれるなら、レイヤーの位置や、想定外に幅の広いテキストが原因かもしれません。横移動をデザインの一部と判断する前に、コンテンツの右端を確認します。

選択したフローをプレビューし、ページを最後までスクロールします。最初の画面に適切な量の情報があるか、行程が順番に現れるか、末尾の予約情報まで到達できるかを見ます。途中で止まる場合は、すぐに別フレームへのリンクを追加するのではなく、コンテナーの境界と最後のセクションの配置を調べます。

スペースを使う価値がある場合だけヘッダーを固定する

予約ページでは、コンパクトなヘッダーを使えば、読み進めている間も戻る操作とアクティビティ名を残せます。スクロールするフレーム内のヘッダーを選び、スクロール中も位置が固定されるよう設定します。本文はスクロールする領域に残します。大きな親グループを固定すると、意図せずページ全体を動かなくしてしまうことがあります。

固定ヘッダーには適切な背景を付け、背後を移動する内容と文字が重なって読みにくくならないようにします。重なり順も決めます。行程はヘッダーの背後を通り、操作の上に表示されないようにします。ページ冒頭にも空間を確保し、最初のタイトルが初めからヘッダーの下に隠れないようにしましょう。

下部に「日付を選択」の固定バーを置く場合も同じです。次の操作をいつでも使える一方、読むための領域は狭くなります。まずヘッダーだけを固定し、次に上下両方を固定して比較します。中央の表示領域が細い窓のようになるなら、どちらかを外すか簡略化します。

最後のコンテンツの後には、下部の操作バーより上まで内容をスクロールできる空間を設けます。末尾のレビューや予約情報も読める必要があります。バーの背後でページがちょうど終わってしまう問題は、キャンバス全体を眺めるだけでは見つけにくいものです。

固定表示とスティッキー表示は別の動作

固定ヘッダーは、スクロール中も同じ画面位置にとどまります。一方、スティッキーな見出しは通常、文書と一緒に移動し、指定された境界へ達するとコンテナー内のその位置にとどまります。一枚のスクリーンショットでは似ていても、そこへ至る動きが異なります。

Webでの実装については、MDNのpositionリファレンス（英語）がfixedとstickyの違い、包含する要素やスクロールする要素との関係を説明しています。常に表示されるものをすべて「sticky」と呼ぶのではなく、引き継ぎ時に意図する動作を正確に伝えます。

この例で作るのは固定ヘッダーです。ページの途中から見出しをスティッキーにするなら、どこで切り替わるかを示し、その表現方法と実装方法を確認します。プロトタイプの固定要素の設定だけで、CSSのstickyと同じ挙動を確かめられたとは考えないようにしましょう。

内側のスクロールは、別の作業がある場合に使う

縦にスクロールするアクティビティページの中へ、横方向の写真ギャラリーを置くことには意味があります。横移動で写真を見て、縦移動でページを読み進められるためです。ギャラリーの範囲を分かるようにし、次の写真の一部を見せるなどして続きがあることを伝えます。

内側にもう一つ縦スクロールを置く場合は、単純ではありません。レビューを高さの低い縦スクロール枠に入れると、ポインターがどこから動き始めたかによって、同じ操作がレビューかページ全体のどちらかを動かします。独立してレビューを閲覧する必要がなければ、ページと一緒に流れる配置にします。

独立したスクロールが必要なら、コンテナー間の動作のつながりを確認します。内側の末尾に達したらどうなるか、キーボードでそこへ入り、出られるか、どの領域が動いたかが分かるかを検討します。意図する結果を記録して実装で確かめましょう。スクロールバーを描くだけで、入れ子のスクロールが使いやすくなるわけではありません。

期待どおりにスクロールしないときの調べ方

見えている症状から原因を絞ります。複数の設定を一度に変えると、どの変更が問題を解決したのか分かりにくくなります。

編集中のフレームからプレビューが始まっているかも確認します。別のフローに複製した画面があると、正しく変更しても反映されていないように見えることがあります。画面と開始位置には、レビューする人が同じバージョンを開ける名前を付けましょう。

読む作業を通じてスクロールを確認する

レビューする人に、集合場所を探し、レビューを一件読み、日付を選んでもらいます。各セクションの場所は先に教えません。ヘッダーが現在地の把握に役立つか、最後の操作に気付くか、判断に必要な情報を固定要素が覆っていないかを観察します。

アクティビティ名やレビュー文を長くして、もう一度試します。初期の文字サイズでは問題のなかった固定領域も、翻訳や文字拡大によって大きくなる場合があります。モバイルフレームを単に縮尺変更するのではなく、狭い画面と広い画面の両方で比較します。

実装の確認にはキーボード操作も含めます。WCAGのフォーカスが隠れないことに関する最低基準（英語）は、作成者が配置した内容によって、フォーカスされた操作が完全に隠れる問題を扱っています。固定ヘッダーや予約バーのせいで、Tabキーで移動した先が見えなくなってはいけません。

最終的なプロトタイプには、何がスクロールするか、何を固定するか、コンテンツがどこで終わるか、日付選択から戻ったときにどうなるかを短く記録します。開発者に必要なのは、長いフレームの高さだけでなく、こうした動作の判断です。

Pixsoでスクロールするプロトタイプを作成し、最初の画面から最後の操作まで通して確認してみましょう。