先日、Web制作を学んでいる受講生の方から、こんな相談をいただきました。
「トップページのヒーローエリアからチェックリストまでの範囲で、画面幅1440px〜768pxの間のレスポンシブデザインを実装した。1254px、1050px、810pxの3つの幅でデザインが崩れないよう画像サイズなどを調整したが、その間を滑らかに動かしたときにレイアウト崩れや文字の溢れ、不自然な余白が出ないか不安がある」と。
実際にコードを拝見すると、主要な幅ごとにpxサイズを都度書き換えて対応されていました。今回は、この相談への回答をベースに、なぜこのやり方だと崩れやすいのか、どう直せば崩れにくくなるのかを整理します。
相談内容：主要な幅ごとにpxサイズを調整して対応
実装では、1440px用の固定サイズ（px）と絶対配置を基準にして、画面幅が狭くなるタイミングで画像やカードのサイズを個別のpxに書き換えていました。
1254px、1050px、810pxという確認した幅では、たしかにデザインは整っています。ただし、これは同じPCレイアウトの途中で数値を書き換えているだけなので、確認していない幅ではバランスが崩れる可能性が高い状態でした。
原因：固定pxの都度調整は「その幅でしか」整わない
崩れの原因は、次の3つが重なって起きていました。
① 固定サイズ（px）と絶対配置が基準になっている
要素の大きさや位置が「この幅のときは何px」という個別の数値で決まっていると、その数値を確認していない幅では整合性が取れなくなります。
② 写真とカードが、それぞれ別々の位置指定で組まれている
画像とカードを別々の絶対配置で組んでいると、幅が狭くなったときに両者の縮み方がずれ、ブレークポイントの直前・直後で余白の空き方やバランスが変わりやすくなります。
③ テキストの折り返しを禁止している箇所がある
見出しやチェックリストで折り返しを禁止していると、幅が足りなくなったときに文字が溢れます。溢れが出る場合は、まずこの折り返し禁止を疑うのが近道です。
解決策：割合ベースの指定に切り替える
結論としては、1440px〜768pxの間はブレークポイントを増やさず、同じPCレイアウトのまま幅に追従させる書き方に切り替えるのがおすすめです。768px未満は、いまのようにSP用レイアウトへ切り替えて問題ありません。
意識したいポイントは次の3つです。
- 写真とカードを、別々の位置指定で組まない
横並びにする要素はflexやgridでまとめ、「片方が縮んだら、もう片方が残りの幅を使う」という関係にします。 - 大きさは「この幅で何px」ではなく、親の幅に対する割合で決める
%、max-width、必要に応じてclamp()などを使うと、リサイズ中も連続して縮む書き方になります。 - テキストは、幅が足りなくなったら折り返せるようにする
見出しやチェックリストで文字が溢れる場合、多くのケースで折り返し禁止の指定が原因になっています。折り返しを許可するだけで解決することも少なくありません。
まとめ：ブレークポイントは「数値の微調整」に使わない
ブレークポイントは「主要な幅ごとに数値を直す」ために使うものではなく、「PCとSPでレイアウト自体が変わるとき」に使う、と考えると整理しやすくなります。
実装後は、主要な幅だけをピンポイントで確認するのではなく、幅をゆっくり動かしながら連続的にチェックすると、余白の空きや文字溢れに気づきやすくなります。
技術的な実装で詰まっている方、WordPressやGAS・AI連携を使った業務効率化の仕組みづくりをご検討の方は、お気軽にご相談ください。
▶︎ 制作・技術相談はこちら（Smile Creations お問い合わせフォーム）
▶︎ MENTAでのスポット相談はこちら