小画面で表示されるデザインは、大画面レイアウトを縮小したように見えてはなりません。同様に、大画面で表示されるデザインは、小画面レイアウトを拡大したように見えてはなりません。代わりに、すべての画面サイズに対応できる柔軟なデザインにする必要があります。レスポンシブ デザインが成功すると、あらゆるフォーム ファクタを最大限に活用できます。
つまり、インターフェース要素は、表示されるコンテキストに応じて大きく異なる外観になる可能性があります。さまざまな画面サイズを最大限に活用するには、同じ HTML コードベースにまったく異なる CSS を適用する必要があるかもしれません。これは設計上の大きな課題となります。
ここでは、直面する可能性のある一般的な課題をいくつかご紹介します。
ナビゲーション
大画面では、ナビゲーション リンクのリストを簡単に表示できます。これらのリンクを収容するのに十分なスペースがあります。
小さな画面では、スペースが貴重です。このような状況を想定して設計する場合、ナビゲーションをボタンの背後に隠したくなるかもしれません。この解決策の問題は、ユーザーがメニューを開いてオプションを選択するという 2 つの手順を踏まなければならないことです。メニューが開くまで、ユーザーは「どこに行けばいいんだろう？」と疑問に思うことになります。
ナビゲーションを非表示にしない戦略を検討してください。アイテムの数が比較的少ない場合は、小画面でも見栄えがよくなるようにナビゲーションのスタイルを設定できます。
ナビゲーションに多数のリンクがある場合、このパターンはスケーリングされません。リンクが小さな画面で 2 行または 3 行に折り返されると、ナビゲーションがごちゃごちゃした印象になります。
解決策の 1 つとして、リンクを 1 行に収め、画面の端でリストを切り詰めることが考えられます。ユーザーは横にスワイプして、すぐに表示されないリンクを表示できます。これがオーバーフロー パターンです。
この手法の利点は、任意のデバイス幅と任意の数のリンクに対応できることです。デメリットは、最初に表示されないリンクを見逃す可能性があることです。メイン ナビゲーションにこの手法を使用する場合は、最初の数個のリンクが最も重要なリンクであることを確認し、リストにさらに項目があることを視覚的に示してください。前の例では、この指標にグラデーションを使用しています。
最後の手段として、ナビゲーションをデフォルトで非表示にし、ユーザーがコンテンツを表示 / 非表示にするための切り替えメカニズムを提供することもできます。これはプログレッシブ ディスクロージャーと呼ばれます。
ナビゲーションの表示を切り替えるボタンにラベルが付いていることを確認します。アイコンだけで意味が伝わると考えないでください。
ラベルのないアイコンは「ミステリー ミート」ナビゲーションです。ユーザーは、実際に使ってみるまで何が入っているかわかりません。ボタンで何が表示されるかをユーザーに知らせるテキストラベルを提供します。
カルーセル
ナビゲーションに当てはまることは、他のコンテンツにも当てはまります。いずれにしても、何も隠さないようにしてください。カルーセルは、コンテンツを隠す一般的な方法です。見た目はすっきりしますが、ユーザーが隠されたコンテンツを見つけることはまずありません。カルーセルは、ユーザーに役立つというよりも、ホームページにどのようなコンテンツを掲載すべきかといった組織的な問題を解決するのに適しています。
ただし、スペースが限られている場合は、カルーセルを使用することで、ページが長くなりすぎたり、ごちゃごちゃしたりするのを防ぐことができます。ハイブリッド アプローチを採用することもできます。小さな画面ではコンテンツをカルーセルで表示し、大きな画面では同じコンテンツをグリッドで表示します。
画面が狭い場合は、flexbox を使用してアイテムを 1 行で表示します。アイテムの行が画面の端を超えて表示されます。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 などのメディア機能はほんの始まりにすぎません。次に、他のメディア機能について説明します。