小さな画面で表示されるデザインが、大画面のレイアウトの縮小バージョンのように見えることはありません。同様に、大画面に表示されるデザインが、小画面レイアウトの大量に表示されるような見た目になってはいけません。あらゆる画面サイズに対応できる柔軟性が必要です。レスポンシブ デザインを成功させるには、あらゆるフォーム ファクタを最大限に活用する必要があります。
つまり、一部のインターフェース要素は、表示されるコンテキストに応じてまったく異なる外観にする必要があります。さまざまな画面サイズを最大限に活用するには、同じ HTML コードベースにまったく異なる CSS を適用しなければならない場合があります。これは、設計上のかなりの課題になり得ます。
ここでは、よく直面する可能性のある課題をいくつか紹介します。
ナビゲーション
大画面では、ナビゲーション リンクのリストを簡単に表示できます。これらのリンクを表示するための十分なスペースがあります。
小さな画面ではスペースが貴重です。このような状況を考慮して設計する場合、ボタンの背後にナビゲーションを隠したくなるかもしれません。このソリューションの問題点は、ユーザーがどこへでも移動するには、メニューを開いてオプションを選択するという 2 つのステップを踏む必要があることです。メニューが開くまで、ユーザーは「どこに行けばいいのか？」と思われてしまいます。
ナビゲーションが隠れないような方法を探しましょう。アイテム数が比較的少ない場合は、小さな画面でも見栄えがよいナビゲーションのスタイルを設定できます。
ナビゲーションに多数のリンクがある場合、このパターンはスケーリングされません。小さい画面でリンクが 2、3 行に折り返すと、ナビゲーションが雑然とします。
考えられる解決策の 1 つは、リンクを 1 行にまとめて、画面の端でリストを切り捨てることです。横にスワイプすると、すぐには見えないリンクを表示できます。これがオーバーフロー パターンです。
この手法の利点は、任意のデバイスの幅と任意のリンク数にスケーリングできることです。デメリットは、最初は表示されないリンクをユーザーが見落とす可能性があることです。この方法をメイン ナビゲーションに使用する場合は、最初の数個のリンクが最も重要であることを確認し、リスト内にさらに多くのアイテムがあることを視覚的に示してください。前の例では、このインジケーターにグラデーションを使用しています。
最後の手段として、ナビゲーションをデフォルトで非表示にし、ユーザーがコンテンツの表示と非表示を切り替える切り替えメカニズムを用意することもできます。これは「段階的開示」と呼ばれます。
ナビゲーションの表示を切り替えるボタンにラベルが付いていることを確認します。アイコンに頼って判断しないでください。
ラベルのないアイコンは「ミステリー ミート」ナビゲーションです。ユーザーは、その中に何が入っているかわからないからです。ボタンによって何が表示されるかをユーザーに伝えるテキストラベルを提供します。
カルーセル
ナビゲーションは他のコンテンツにも当てはまります。とにかく何も隠さないようにします。カルーセルは、コンテンツを非表示にする一般的な方法です。見た目はきれいに見えますが、隠しコンテンツには気づかない可能性も大いにあります。カルーセルは、ユーザーにサービスを提供するよりも、ホームページに表示するコンテンツなどの組織的な問題の解決に適しています。
とは言え、スペースがプレミアムな場合は、カルーセルを使用することで、ページが長くなりすぎないようにすることができます。小さな画面ではコンテンツをカルーセルで表示し、大画面では同じコンテンツをグリッド表示するというハイブリッド アプローチを採用することもできます。
幅の狭い画面では、Flexbox を使用してアイテムを行に表示します。アイテムの行が画面の端から外れて表示されます。水平方向のスワイプを許可するには、overflow-x: auto を使用します。
@media (max-width: 50em) {
.cards {
display: flex;
flex-direction: row;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.cards .card {
flex-shrink: 0;
flex-basis: 15em;
scroll-snap-align: start;
}
}
scroll-snap プロパティを使用すると、アイテムをスムーズにスワイプできます。scroll-snap-type: inline mandatory のおかげで、アイテムは所定の位置に固定されます。
画面が十分に大きい（この場合は 50em より広い）場合は、グリッドに切り替えて、何も隠さずに行と列でアイテムを表示します。
@media (min-width: 50em) {
.cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));
}
}
重要な点として、カルーセル ビューのアイテムは全幅を占めません。もしそうだとすると、ビューポートの端を越えて利用できるコンテンツがあるということはわかりません。
オーバーフロー パターンの使用例としては、カルーセルもあります。閲覧できるアイテムが多数ある場合は、テレビなどの大画面でもオーバーフロー パターンを使い続けることができます。このメディア スクローラーは、複数のカルーセルを使用して多数のオプションを管理します。
ここでも、scroll-snap プロパティを使用すると、操作がスムーズになります。また、カルーセルの画像に loading="lazy" が適用されていることにも注意してください。この場合、画像はスクロールしなければ見えない位置ではなく、端の外側にありますが、同じ原則が適用されます。ユーザーが対象アイテムまでスワイプしないと、画像はダウンロードされないため、帯域幅を節約できます。
JavaScript を追加することで、カルーセルにインタラクティブなコントロールを追加できます。アイテムを自動的に循環させることもできます。ただし、その前にじっくりと考えてください。カルーセルがページ上の唯一のコンテンツである場合は自動再生がうまくいくかもしれませんが、誰かが他のコンテンツを操作（テキストを読むなど）しようとしている場合は、自動再生カルーセルは非常に煩わしくなります。詳しくは、カルーセルのベスト プラクティスをご覧ください。
データテーブル
table 要素は、表形式のデータ（関連情報の行と列）の構造に最適です。ただし、テーブルが大きすぎると、小画面のレイアウトが壊れる可能性があります。
オーバーフロー パターンはテーブルに適用できます。この例では、テーブルはクラスが table-container の div でラップされています。
.table-container {
max-inline-size: 100%;
overflow-x: auto;
scroll-snap-type: inline mandatory;
scroll-behavior: smooth;
}
.table-container th,
.table-container td {
scroll-snap-align: start;
padding: var(--metric-box-spacing);
}
ガイドライン
オーバーフローのパターンは、小さな画面では妥協点として適していますが、画面外のコンテンツにアクセスできることが明確であることを確認してください。コンテンツが切り捨てられる領域に、シャドウやグラデーションを配置することをご検討ください。
段階的な開示はスペースを節約する有効な方法ですが、非常に重要なコンテンツでの使用には注意が必要です。サブアクションに適しています。開示をトリガーするインターフェース要素は、明確にラベル付けしてください。アイコンだけに頼らないようにします。
最初に小さい画面向けに設計する。その逆よりも、小さい画面のデザインを大きい画面に適応させるほうが簡単です。最初に大画面向けに設計すると、小さな画面向けのデザインが後付けになってしまうという危険があります。
レイアウトと UI 要素のパターンについて詳しくは、web.dev のパターンのセクションをご覧ください。
インターフェース要素をさまざまな画面サイズに適応させる場合、メディアクエリはデバイスの寸法を把握するうえで非常に便利です。ただし、min-width や min-height などのメディア機能はほんの始まりにすぎません。次に、他のさまざまなメディア機能を紹介します。