レスポンシブのブレークポイントをコンテンツから決める方法

レスポンシブデザインのブレークポイントは、コンテンツの並べ方を変える必要が生じる幅に設定します。まず内容を無理なく使える最小のレイアウトを作り、幅を広げながら、列を追加したり、サイドバーを表示したり、ナビゲーションを展開したりするタイミングを探します。スマートフォン、タブレット、デスクトップの3枚の画面は結果を示す例であり、その中間の幅でどう動くかを決めるものではありません。

講座一覧であれば、講座カードと絞り込み条件を一緒に読みやすく表示できるかが判断の軸になります。PixsoのWebデザイン機能で配置を比較し、各レイアウトをつなぐ幅のルールを開発者に伝えます。よく使われる端末サイズの一覧を先に採用するのではなく、実際に載せる内容から確認しましょう。

ブレークポイントはルール、フレーム幅は表示例

ブレークポイントは、レイアウトの動作が切り替わる条件です。デザイン上のフレームは、その動作の一例を示します。2列のレイアウトを600pxから適用する場合、768pxのフレームで見た目を確認することはできますが、それだけで768pxがブレークポイントになるわけではありません。

ブレークポイントを使わず、連続的に変えられる性質もあります。コンテンツ領域は最大幅まで広がり、画像は縦横比を保ったままその領域に収まります。一方、絞り込み用のサイドバーを一覧の上へ移す、カードの列数を増やす、ナビゲーションをコンパクトにする、といった変更は段階的な切り替えです。

この2種類の動作を分けて記述します。「検索結果の領域は残りの幅を使う」はサイズのルールです。「読みやすいカード2列を横に置ける場合にだけ絞り込みサイドバーを表示する」は、構造を切り替える条件です。

Googleのレスポンシブデザインの解説（英語）でも、よく使われる端末ではなくコンテンツを基準にブレークポイントを選ぶことを勧めています。既存のフレームワークの値を使ってはいけないという意味ではありません。その値で、このページの内容が適切に表示できるかを確かめるということです。

内容を無理なく使える最小幅を求める

ここでは、絞り込み領域と講座カードを持つ一覧を例にします。カードにはサムネイル、講座名、短い説明、「講座を見る」という操作を配置します。「アクセシブルなインターフェースデザイン入門」のような長い講座名も入れてから、どこまでカードを狭くできるかを決めます。

内容を比較した結果、このカードの最小幅を264pxとしたと仮定します。これは今回のカードに対する設計上の判断であり、すべてのカードに共通する最小幅ではありません。価格やバッジが多い商品カードならもっと幅が必要かもしれませんし、短い情報だけのメディアタイルなら狭くできる場合もあります。

この例では、絞り込みサイドバーを224px、サイドバーと一覧の間隔を24px、カード間を24px、ページの左右の余白をそれぞれ24pxにします。この条件から、各レイアウトが収まる幅を計算できます。

計算には、実際に使えるコンテナの幅を用います。アプリケーション内のページでは、固定のナビゲーションや別のパネルがある場合もあります。ブラウザの表示領域が広くても、それらが占める分だけコンテンツに使える幅は減ります。

レイアウトを切り替える幅を計算する

サイドバーがない場合、264pxのカード2枚に、間隔24pxと左右の余白48pxが必要です。したがって切り替え幅の候補は、264 + 264 + 24 + 48 = 600pxになります。600px未満は1列、600px以上は、今の条件なら2列を配置できます。

2列の横にサイドバーを置くには、サイドバーの224pxと、一覧までの間隔24pxを加えます。600 + 224 + 24 = 848pxです。848px未満ではカードを最小幅より狭くするのではなく、一覧の上から絞り込み条件を開けるようにします。

カードをもう1列増やすなら、カード1枚と間隔を追加し、848 + 264 + 24 = 1136pxになります。3列表示を用意する場合は、1136pxが次の候補です。ただし、画面が広がるたびに列数を増やす必要はありません。コンテンツの最大幅を決めた方が、読みやすい場合もあります。

この計算で得られるのは、確認すべき候補です。計算が合っただけでページが完成したとはいえません。枠線、スクロールバー、実際のフォント、周囲のアプリケーション領域によって、使える幅は変わります。デザイナーと開発者は、計算だけで判断せず、境界付近の実装画面を確認する必要があります。

絞り込みと読む順序を一貫させる

サイドバーを隠しても、絞り込み機能は見つけられるようにします。講座一覧の上に意味の分かるラベルを持つ操作を置き、条件が適用されているかを示し、解除する方法も残します。部品の位置が変わったことを理由に、利用者が選んだ条件を消してはいけません。

コンパクトな絞り込み画面は、描く前に動作を決めます。条件が多ければパネルやシートが適する場合もありますが、適用する方法、閉じる方法、一覧との関係が明確でなければなりません。レイアウトの切り替えに伴って、説明なしに絞り込みの仕組みまで変わらないようにします。

読む順序は、ページタイトル、検索や絞り込み、検索結果の情報、講座一覧というように、自然な流れを保ちます。デスクトップでの見た目だけを優先し、文書の順序と食い違う配置にしないようにします。CSSでは要素を文書順と離れた場所に置けるため、キーボード操作やスクリーンリーダーでの読み上げ順は実装で確認します。

狭い画面にカードを多く並べるためだけに、必要な説明や操作を削らないようにします。先に見直すべきなのは、列数と情報の優先順位です。講座の違いが見えない小さなカードを2列にするより、選択に必要な情報をそろえた1列の方が目的に合うことがあります。

Pixsoで境界の前後を設計する

比較用に390px、768px、1024pxのフレームを作ります。今回のルールでは、それぞれ1列、サイドバーなしの2列、サイドバー付きの2列です。講座の内容を共通にし、文章や画像の違いではなく配置の違いを比較できるようにします。

Auto Layoutと再利用できるコンポーネントを使い、幅を変えてもカード内部の構成をそろえます。タイトルや説明文は内容に応じて伸びるようにし、どの要素が利用可能な幅を使うかを指定します。各レイアウトの横には、切り替え幅とその理由を記録します。

次に、599pxと600px、847pxと848px、1135pxと1136pxを確認します。余裕のある幅の画面よりも、切り替え直前の画面で問題が見つかることがあります。見出しの不自然な折り返し、操作と他の内容の重なり、カードが使いにくいほど狭くなる箇所を確認します。

デザインファイルには、これらの状態を記録し、チームで確認できます。ただし、本番サイトのメディアクエリの動作まで自動的に決まるわけではありません。開発者が3枚の画面から推測する必要がないよう、意図したルールも引き継ぎます。

ページ全体と部品のどちらを基準にするかを決める

表示領域の幅を基準にしたブレークポイントは、一覧の横に絞り込みを置くといった、ページ全体の変更に適しています。一方、再利用するカードは、実際に割り当てられた領域に合わせる必要があります。同じカードでも、狭いページの横幅いっぱいに置く場合と、広い画面の小さなパネル内に置く場合があります。

「スマートフォンではモバイル版のカードを使う」ではなく、「コンテナに横並びの内容が収まらない場合は、コンパクトなカードにする」と記述します。開発者はその要件を基に、対応ブラウザやコンポーネントの構造に適したコンテナクエリ、柔軟なレイアウトなどの実装方法を選べます。

理由もなく、すべての部品に個別の切り替え幅を設ける必要はありません。ページ全体では少数の共通ルールを使い、実際に異なる領域へ配置される部品には局所的な調整を加えます。両方を組み合わせることは可能です。

言語と文字サイズを変えて確認する

長い講座名、翻訳したラベル、大きな文字、エラーやステータスの表示を入れ、もう一度境界付近を確認します。ラベルが1つ長くなっただけで新しいブレークポイントが必要になるなら、細かな例外を追加する前に、折り返し、グループ分け、操作部品の配置を見直します。

ブラウザのズームではレイアウトに使える領域が変わり、文字だけの拡大では別の問題が見つかることもあります。静止した3枚のフレームで成立していても、拡大時に横スクロールが必要になったり、操作が隠れたりする可能性があります。W3Cのリフローの解説（英語）では、アクセシビリティ上の要件と、本質的に二次元の配置が必要な内容に対する例外を説明しています。

引き継ぐ際は、内容を無理なく使える最小幅、切り替え幅の候補、各境界で変える配置、その間で連続的に変わるサイズのルールをまとめます。この講座一覧で目指すのは、発表用に選んだ画面幅だけでなく、どの幅でも講座を読み、絞り込みを使える状態です。