ユーザー インターフェース パターン

小さい画面で表示されるデザインが、大画面のレイアウトを縮小したように見えるようにしないでください。同様に、大画面に表示されるデザインは、小画面のレイアウトを拡張したように見えるものであってはなりません。あらゆる画面サイズに対応できる柔軟性を備えたデザインにする必要があります。あらゆるフォーム ファクタを最大限に活用してレスポンシブ デザインを実現するには、

そのため、一部のインターフェース要素は、表示されるコンテキストに応じてまったく異なる表示が必要になる場合があります。さまざまな画面サイズを最大限に活用するには、同じ HTML コードベースにまったく異なる CSS を適用する必要があるかもしれません。これは設計上のかなりの課題になる可能性があります。

ここでは、直面する可能性のある一般的な課題をいくつか紹介します。

ナビゲーション

ナビゲーション リンクのリストは、大画面で非常に簡単に表示できます。これらのリンクを表示するのに十分なスペースがあります。

小画面にとってスペースは重要です。このような状況を想定した設計では、ボタンの後ろにナビゲーションが隠されがちです。このソリューションの問題は、ユーザーが任意の場所に移動するには 2 つの手順、つまりメニューを開いてオプションを選択する必要があることです。メニューが開くまで、ユーザーは「どこに行けばいいのか」と疑問に思っています。

ナビゲーションが隠れないようにする方法を探してください。アイテム数が比較的少ない場合は、小さな画面でも適切に表示されるようにナビゲーションのスタイルを設定できます。

ナビゲーションに多数のリンクがある場合、このパターンはスケーリングされません。小さな画面でリンクが 2 行または 3 行で折り返されると、ナビゲーションが雑然と見えます。

考えられる解決策の一つは、リンクを 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 のようなメディア機能はほんの始まりにすぎません。次に、他にもさまざまなメディア機能を見ていきます。