カルーセルUIのデザイン：見たいスライドへ迷わず移動できる設計

カルーセルは、限られた領域に関連する項目を表示し、切り替えながら見られるようにするUIです。何が並んでいるかを把握でき、目的の項目へ移動でき、必要なだけその項目を見続けられることが重要です。前後の矢印だけでなく、選択中の項目、全体の中での位置、周囲の説明も分かりやすく保つ必要があります。

Pixsoのプロトタイピング機能を使えば、閲覧の流れを通してこれらの判断を比較できます。まず考えるのは見せたいアニメーションではなく、利用者が確認したいコンテンツです。

そもそも一部を隠す構成が適しているか考える

グリッドならまとめて見せられる項目も、カルーセルでは利用者が操作して表示する必要があります。画像を大きく見せたい小規模なギャラリーなら、その交換条件は合理的です。一方、複数の選択肢を同時に比較したい場合や、後半のスライドにしか重要な情報がない場合は、適しているとは限りません。

例として、デザイナーのポートフォリオ「Oak Studio」を考えます。4つのUI制作事例があり、それぞれの構成を読み取れる大きさで見せたい状況です。選択した作品を大きく表示し、残りの作品をサムネイルで示すギャラリーが使えます。スタジオの紹介文と問い合わせへの導線は、切り替わる領域の外に置きます。

では、依頼を検討する人が4つの概要を比べてから詳しい事例を選びたい場合はどうでしょうか。その目的にはグリッドの方が合うことがあります。カルーセルだから洗練されるわけではなく、大切なメッセージをすべて入れても、すべて見てもらえるとは限りません。

1枚のスライドが表す内容をそろえる

コンテンツの単位を一定にします。Oak Studioでは、1項目を1つの作品プレビューとし、タイトルと詳細事例へのリンクを添えます。ある項目は作品全体、次は推薦コメント、その次は問い合わせフォームというように、役割の異なる内容を同じ選択肢として並べないようにします。

2番目の作品はBooking flow（予約フロー）です。これを選んだとき、プレビュー、タイトル、サムネイルの選択表示、位置の表示が一致している必要があります。「全4件中2件目」で位置が分かり、タイトルで内容が分かります。切り替え中も、画像だけ先に変わったり、タイトルだけが別の作品を示したりしないようにします。

短い説明は、情報量の多いUI画像に重ねるより、横や下に置くと読みやすくなります。詳細事例へのリンクも、選択中の作品と結び付けます。リンク先だけがひそかに変わる「詳しく見る」より、「予約フローの制作事例を見る」の方が行き先を理解しやすくなります。

順番に見る操作と、直接選ぶ操作を用意する

「前へ」「次へ」は順番に見るための操作です。一方、サムネイルは、見覚えのある作品を選んだり、一度見た作品へ戻ったりするために役立ちます。Oak Studioは項目数が少なく、各作品の見た目も異なるため、両方を用意する意味があります。

操作ボタンは、作品内の重要な部分と重ならない場所に置きます。明るいUIボタンの上に矢印を重ねると、矢印が見えにくくなったり、表示中の作品に含まれるボタンだと誤解されたりします。各操作の位置をそろえ、分かる名前を付け、無理なく操作できる余白を確保します。

この例では、点だけのインジケーターは情報が不足しがちです。位置は表せても、選ぶとどの作品が表示されるかは伝わりません。サムネイルを置く余裕がなければ、操作ボタンと現在のタイトルを明確にし、意図して移動できるようにします。小さな点だけを項目への唯一の移動手段にしないことが大切です。

最初と最後での動きを決める

最後の項目で「次へ」を押したときに止まるのか、最初へ戻るのかを決めます。どちらも理解しやすく設計できますが、操作部と表示はその決定に合わせる必要があります。プロトタイプでは一周するのに、実装では「次へ」が無効になるといった食い違いを避けます。

Oak Studioでは両端で止めます。作品数が少なく順序も明確で、サムネイルから直接選ぶこともできるためです。最初の作品では「前へ」、最後の作品では「次へ」が使えないことを見た目で伝えます。ただし位置は変えず、端に到達した途端に別のボタンがポインターの下へ動いてこないようにします。

循環させる場合は、その動きから意味が伝わる必要があります。4番目から1番目への移動を、5番目の項目が追加されたかのように見せないことが重要です。初めて見る人にも試してもらい、どこへ移動したかが分かるか確かめます。動きの効果は、その理解を助ける場合に役立ちます。

フォーカスと選択状態を区別する

サムネイルの選択表示は、現在表示している作品を示します。キーボードフォーカスは、次に実行される操作の対象を示します。この2つは同時に別の場所にあって構いません。予約フローを表示したまま、「次へ」にフォーカスを移せるということです。

通常の操作ボタンをTabキーで移動しているだけで、スライドを切り替えないようにします。この手動ギャラリーでは、「次へ」を実行するとプレビューが変わり、フォーカスは同じボタンに残るため、続けて次の作品へ進めます。サムネイルを実行した場合は作品を選択し、意図せず詳細事例のページまで開かないようにします。

W3Cのカルーセルチュートリアル（英語）は、キーボード操作、動きの制御、変更の伝達を扱っています。実際に使う操作パターンは開発担当者と決めます。実装には、操作の意味が分かるアクセシブルな名前と、現在の項目を識別できる仕組みが必要です。デザイン上でサムネイルを枠線で囲むだけでは、その情報は伝わりません。

画像の役割を説明するために必要なら、キャプションや適切な代替テキストを付けます。ただし、各サムネイルの読み上げ名に、画面にある作品説明をすべて繰り返す必要はありません。ナビゲーションとしてのサムネイルは行き先を識別できる名前にし、大きなプレビューにはその画像に合う説明を用意します。

まず手動で切り替える構成を考える

Oak Studioのプレビューには、細かなUIの情報が含まれます。利用者はレイアウトを確認したり、説明を読んだり、自分の依頼に関係するか考えたりします。手動切り替えなら、一時停止ボタンを探さなくても、自分に必要な時間をかけて読めます。

自動切り替えでは、開こうとしていた作品が消え、戻る操作が必要になることもあります。操作部を使っている最中に先へ進むカルーセルは、その操作自体を妨げかねません。このポートフォリオでは、自動で動かしても判断に加わる価値が小さいため、採用しません。

別の製品で自動切り替えが必要なら、WAI-ARIAのカルーセルパターン（英語）で、自動切り替えの操作と、キーボードフォーカスやポインターのホバーによる停止の扱いを確認できます。フォーカスが入って停止した後は、利用者が明示的に再開を求めるまで動かしません。単にスライド間の待ち時間を設定するのではなく、これらの動作を決めておきます。

画像だけでなくギャラリー全体を狭い画面に合わせる

狭い画面でも、プレビュー、タイトル、操作部の関係を保ちます。画像を小さくしても、ナビゲーションが長いキャプションのはるか下に移動したり、折り返したタイトルに矢印が重なったりしては使いにくくなります。

Oak Studioなら、プレビューの下に「前へ」、位置表示、「次へ」を1行で配置できます。すべての項目に到達できるなら、サムネイルはコンパクトな横並びにもできます。スワイプを追加の操作として使うことはできますが、それだけを移動手段にしないようにします。3番目の作品を見るために、利用者がジェスチャーを推測する必要はありません。

可能な範囲でプレビュー領域の大きさをそろえ、画像を切り替えたときに操作部が動かないようにします。作品で説明したい部分を残せる表示方法も必要です。UIプレビューのナビゲーションを切り落としてしまうと、利用者が見たい部分そのものが失われることがあります。切り抜きのルールを決める前に、縦長と横長の作品の両方で試します。

Pixsoで具体的なギャラリーを組み立てる

PixsoのファイルにOak Studioの4つの作品プレビューを配置し、同じギャラリー構造で各選択状態を作ります。予約フローは、プレビュー、サムネイル、位置表示のすべてで2番目にそろえます。前後への移動と、別の作品を直接選ぶ操作をつなぎ、レビューで実際にたどれるようにします。

レビューでは、予約フローを開き、別の作品を見てから予約フローに戻ってもらいます。どの操作を選ぶか、サムネイルを数え直さずに現在の作品が分かるかを見ます。狭い画面と、長い作品名でも同じ流れを試します。

両端での動き、フォーカスの扱い、画像の収め方をフレームのそばに記録し、開発へ引き継ぎます。そのうえで、実装したギャラリーでも確認します。優れたカルーセルに必要なのは派手な切り替えではなく、次の項目を見つけやすく、今の項目を十分に見られることです。

Pixsoで使いやすいギャラリーを試作する