画面崩れを根本から防ぐ。モダンCSSとFigmaで構築する「絶対に破綻しない」レスポンシブ・レイアウト設計

こんにちは！
UIデザイナーのYunyです。

「PCで綺麗に2行に収まっていたキャッチコピーが、スマホで見ると1文字だけ改行されて崩れてしまい、不格好になってしまった」
「スマホでタップしようとしたら、隣のボタンと近すぎて誤タップしてしまい、毎回イライラする」

デザイナーやコーダーの皆さんなら、レスポンシブ対応の過程でこうしたヒヤッとする瞬間に一度は遭遇したことがあるのではないでしょうか。
画面サイズの異なる多様なデバイスに1つのレイアウトで対応するのは、思っている以上に骨が折れる作業ですよね。

Webデザインにおけるレスポンシブ設計では、あらゆる画面サイズに力技で対応しようと複雑なメディアクエリを重ねるよりも、そもそも「壊れない（破綻しない）シンプルな構造」をあらかじめ仕込んでおくことのほうが、結果的にデザインの品質と保守性を長く保つ秘訣になります。

1. なぜレスポンシブは「崩れやすい」のか？現場で起きる崩れの正体

私たちが日々Webサイトを構築する中で、デバイス間のレイアウト破綻はなぜ起きてしまうのでしょうか。

最も大きな要因は、デスクトップ（PC）用のレイアウトを基準とし、それをメディアクエリ（@media）によって縮小・調整していくという「デスクトップファースト」の考え方にあります。
PC版に配置された複雑な要素や装飾を、スマートフォンの狭い画面に収めるために、不要なものを非表示（display: none）にしたり、無理やり文字や画像を縮小して詰め込むといったアプローチは、コードを複雑化させるだけでなく、特定の画面幅で予期せぬ崩れを引き起こしやすくなります。

現代のWebアクセス、特にBtoC向けのサービスやLP（ランディングページ）、ECサイトにおいては、アクセスの80%以上がスマートフォンから行われています。
こうしたモバイル偏重の環境下では、Googleの「モバイルファーストインデックス（MFI）」への完全移行もあり、スマートフォンでの表示がすべての基準となっています。

モバイルでのユーザー体験（UX）を損なうようなレイアウトの不具合（想定外の横スクロール、タップしにくいほど小さなボタン、画像読み込み時に画面が動く現象など）は、離脱率の上昇を招き、SEO評価にも直接的な悪影響を及ぼします。

したがって、これからのレスポンシブ設計では、あらかじめ要素自体に「自己調整」のルールを持たせ、どのような画面幅になっても崩れにくい頑丈な骨組みを構築することが不可欠です。

2. CSSで防ぐ！レイアウト破綻を回避する4つのコーディング技術

CSSの実装段階で発生しやすいレイアウトのバグは、いくつかのモダンなCSSプロパティや記述ルールを徹底することで、スマートに回避できます。

100vwのスクロールバー罠と width: 100%

画面幅いっぱいに要素を広げたいとき、width: 100vw; と指定することがよくあります。
しかし、WindowsなどのPCブラウザでスクロールバーが表示されている場合、100vw は「スクロールバーを含んだ画面幅」として計算されてしまいます。
その結果、画面幅を超えてしまい、意図しない横スクロールが発生するという問題が起きます。

この現象を根本から防ぐには、width: 100vw; ではなく、親要素の幅を基準とする width: 100%; を使用するのが基本です。
さらに、パディングや枠線の幅によって要素が親要素からはみ出るのを防ぐため、あらかじめすべての要素に box-sizing: border-box; を指定しておくことが、安全なレイアウト計算の前提となります。

画像のアスペクト比崩れとCLS（累積レイアウトシフト）の防止

画像をレスポンシブ対応にする際、max-width: 100%; height: auto; とだけ指定していると、画像が読み込まれる前にブラウザが画像の高さを計算できません。
そのため、画像が読み込まれた瞬間にコンテンツが下へとガクッと押し下げられる現象（CLS: Cumulative Layout Shift）が発生します。
これはユーザーの誤タップを引き起こし、Webパフォーマンス（Core Web Vitals）の測定においても低い評価を受ける要因になります。

これを防ぐためには、HTML側で明示的に width と height 属性を記述するか、CSSの aspect-ratio プロパティを活用して、あらかじめ画像が表示される予定のスペース（アスペクト比）をブラウザに確保させることが重要です。

img {
  aspect-ratio: 16 / 9;
  width: 100%;
  height: auto;
}

この数行の記述により、画像が読み込まれる前でも常に正しいスペースが描画エリアとして確保され、不快なコンテンツのズレを完全に防ぐことができます。

動的ビューポート dvh によるアドレスバー問題の解決

スマートフォンでの閲覧時、画面の天地いっぱいにファーストビューを表示させるために height: 100vh; を使うと、iOS SafariやChromeのアドレスバーが伸縮するたびに、ボタンやコンテンツが隠れてタップできなくなってしまう問題が長くエンジニアを悩ませてきました。

この問題は、最新のCSS仕様である動的ビューポート単位 dvh（Dynamic Viewport Height）を使用することでスマートに解決できます。

• svh（Small Viewport Height）：アドレスバーが展開した、最も可視領域が狭い状態を基準とする
• lvh（Large Viewport Height）：アドレスバーが引っ込んだ、最も可視領域が広い状態を基準とする
• dvh（Dynamic Viewport Height）：アドレスバーの伸縮に合わせて、高さを動的に再計算する

全画面のファーストビューを作りたいときは、height: 100dvh; を指定するだけで、どのようなスマホブラウザでも画面にぴったりと収まる堅牢なレイアウトを実現できます。

メディアクエリ要らず！ clamp() 関数での流動的な文字サイズ

ブレイクポイントごとにメディアクエリを書いてフォントサイズを細かく切り替えるアプローチは、中途半端な画面幅（例えばタブレットとスマホの中間など）で文字のバランスが崩れる原因になります。

そこで役立つのが clamp() 関数です。
clamp(最小値, 推奨値, 最大値) の形で値を指定することで、指定した範囲内で文字サイズや余白が画面幅に応じて滑らかに流動変化する（Fluid Typography）ようになります。

p {
  font-size: clamp(1rem, 0.667rem + 1.667vw, 2rem);
}

この指定を行っておけば、画面幅が小さいときは最小の 1rem を保ち、画面が広がるにつれて推奨値に従って段階的に拡大し、一定の画面幅を超えたら最大の 2rem でストップします。
メディアクエリを大量に書く手間が省け、あらゆるビューポート幅に対して文字が美しく収まります。

3. コンテナクエリで実現する「自己完結型」のコンポーネント設計

これまでのレスポンシブ設計は、ブラウザのウィンドウ全体の幅（ビューポート）を基準にレイアウトを制御してきました。
しかし、コンポーネント指向の開発が進む現代においては、「画面幅」ではなく「そのコンポーネントが配置されている親要素の幅」を基準にスタイルを適応させることが求められます。

同じカード型のUIであっても、それが広いメインエリアに置かれるか、あるいは狭いサイドバーに置かれるかによって、自動的に表示形式（縦並びか横並びか）を切り替えられるのが理想です。
これを実現するのが「コンテナクエリ（Container Queries）」です。

実装は、まず親要素となるコンテナに container-type を指定し、ブラウザに対してこの要素の幅を基準にするよう宣言します。

.card-container {
  container-type: inline-size; /* 横幅を基準とする */
}

そして、その子要素であるカードコンポーネントに対して、メディアクエリ（@media）の代わりに @container を使用してスタイルを記述します。

/* 通常は縦並び */
.card {
  display: block;
}

/* 親要素の幅が500px以上になったら自動で横並びに切り替え */
@container (min-width: 500px) {
  .card {
    display: flex;
  }
}

このアプローチにより、コンポーネント自身が「自分が今どれくらい広い場所に置かれているか」を検知し、自ら最適なレイアウトへと自己調整するようになります。
配置する場所ごとの調整コードが不要になるため、レイアウト破綻を未然に防ぐ上で最も洗練された設計手法の1つです。

また、コンテナの幅を基準とする相対単位 cqw（Container Query Width）と、前述の clamp() 関数を組み合わせることで、親要素の広さに完全に連動する自己完結型の流動タイポグラフィ（例: font-size: clamp(1rem, 5cqw, 1.8rem);）を定義することも可能です。

4. キーワードとしての「スマポンシブ」設計とその特徴

複数デバイスのすべてに対してレイアウトを細かく調整するコストを削減し、最もアクセスの多いスマートフォンでのUXを究極に高めるためのアプローチとして、「スマポンシブ（スマホ特化型レスポンシブ）」という設計手法も知っておくべき選択肢です。

スマポンシブとは、スマートフォンの表示幅（概ね320px〜550px程度）を基準にメインコンテンツの最大幅を物理的に固定し、PCなどの大きなディスプレイで閲覧した際にも、スマートフォンと同様の「1カラム（縦長）のレイアウト」を維持する設計手法です。

すべてのサイトに適用できるものではありませんが、キャンペーンLPやSNSからの直接流入を狙うプロモーションサイト、BtoCのアパレル・コスメサイトなど、スマホ利用者が圧倒的多数を占めるプロジェクトにおいては極めて強力な効果を発揮します。

従来のレスポンシブデザインが「画面の広さに応じて複数カラムへとダイナミックに組み替える」のに対し、スマポンシブは「コンテンツ幅そのものを固定値に縛ることで、レイアウトの破綻を物理的に防ぐ」という割り切った考え方をします。

これにより、PC版の複雑な表示ロジックを組む必要がなくなり、開発コストや保守管理の負荷が劇的に下がります。
PC閲覧時に発生する左右の広い余白（マージン）には、ブランドの世界観を表現する背景ビジュアルや、回遊性を高めるための固定メニュー、あるいはモバイルアプリへの誘導QRコードなどを配置することで、無駄のないUI空間として再定義できます。

このスマポンシブ設計をWordPressで手軽に実現するツールとして、株式会社ベクトルが開発したブロックテーマ「SmaVeksive（スマベクシブ）」が挙げられます。
このテーマでは、専用の「Smaponsive」ブロックを用いることで、中央にモバイル基準のメインコンテンツ（SmaVeksive プレーンなど）を固定し、左右にヘッダーやフッターのカラムを自動配置して余白を有効活用できる仕組みを提供しています。

5. Figmaで仕込む！実装段階で崩れないためのデザイン設定

どれほどCSSの実装を工夫しても、その前段であるデザインデータの段階で「固定された絶対値のキャンバス」しか考慮されていなければ、エンジニアとの間で解釈のズレが生じ、実装時にレイアウトが破綻してしまいます。

Figmaでデザインを作成する初期段階から、実際のCSSの挙動（可変ロジック）をシミュレートした制約を設定しておくことが、手戻りのないスムーズな開発連携に繋がります。

オートレイアウト（Auto Layout）の正確な設定

Figmaのオートレイアウト機能は、CSSのFlexboxに非常に近い概念です。
デザインを作成する際は、単に要素をグループ化するのではなく、要素間の関係性（パディング、余白の詰め方、方向）をオートレイアウトで定義します。
特に、リサイズ設定（Resizing）を以下のように正しく使い分けることが重要です。

• Hug (コンテンツを内包): 中に入るテキストや要素の量に合わせて、自動的にフレームが伸縮する設定。多言語対応やテキストの変更があっても枠からはみ出さない構造を作れます（CSSの fit-content や max-content に相当）。
• Fill (コンテナに合わせて拡大): 親フレームの幅が広がった際に、余白を埋めるように自動で広がる設定。レスポンシブな流動要素に指定します（CSSの width: 100% に相当）。
• Fixed (固定): アイコンや特定のボタンなど、画面サイズが変わっても大きさを変えたくない要素に使用します（CSSの固定px指定に相当）。

Wrap（折り返し）とMin/Max-widthの活用

オートレイアウトの方向設定にある「Wrap（折り返し）」を使用し、個々のアイテムに対して「最小幅（Min-width）」と「最大幅（Max-width）」を事前に設定しておきます。
これにより、画面が狭くなったときに「カードが自動で次の行に落ちる挙動」や「一定幅以下には潰れない挙動」をデザインデータ上で検証できるようになります。

あらかじめデザインデータ上で可変シミュレーションを行い、破綻が起きないことを確認しておくことで、エンジニアも「どの画面幅で要素が折り返されるべきか」を迷わずに実装できます。

デザインシステムやVariables（変数）の設計に配慮しつつ、こうした可変の「制約」をデータに持たせることが重要です。

デザイナーとエンジニアが実装時の共通認識を持つためのアプローチについては、以前紹介した記事『エンジニア連携の手戻りをゼロにする。「状態（States）」考慮漏れを防ぐUI Stackと包括チェックリスト』でも、状態定義の面から詳しく触れています。

エンジニア連携の手戻りをゼロにする。「状態（States）」考慮漏れを防ぐUI Stackと包括チェックリスト

こんにちは！UIデザイナーのYunyです。 「案件を進めていて、デザインデータをエンジニアさんに渡そうとした瞬間に、あ、…

終わりに

レスポンシブ・レイアウトにおいてデバイス間の仕様を破綻させないためのアプローチは、もはや「画面サイズごとに細かくスタイルを継ぎ足していく」という対症療法的な作業ではありません。
モダンな技術とデザインプロセスを上手に組み合わせることで、スマートに解決できます。

今回の記事で紹介した、レスポンシブ設計における重要なポイントは以下の3点です。

• モダンCSSの積極的な活用: 100%幅の設計やdvh、clamp()関数、コンテナクエリなどを活用し、要素自体に自己調整のルールを持たせること。
• Figmaでの上流データの仕込み: オートレイアウトやWrap、Min/Max-widthを活用し、デザインデータ自体に可変の制約を事前に持たせること。
• スマポンシブという戦略的選択: ターゲットユーザーのアクセス傾向に合わせて、スマホ表示幅にコンテンツを固定し、PC表示時は左右の余白（マージン）を有効活用する設計を視野に入れること。

可変性と頑丈さの美しいバランスを探りながら、ぜひ次回のデザインやコーディングで実践してみてくださいね！

それでは、良いデザインライフを！