目次
デザインの「正解」は画面の数だけ存在する
ども。Dadです。
Webサイト制作における「スマホ崩れ」を根本から解決する唯一の方法は、「画面幅によってデザインを切り替える境界線（ブレイクポイント）」を正しく設定し、サイトに柔軟性を持たせることです。
かつてのWeb制作は、PC版とスマホ版で2つの画面を用意し、ジェネレーターというツールで切り分けする仕組みが主流でした。
しかし、現在は違います。iPhone、Android、iPad、ノートPC、そして巨大なデスクトップモニター。読者があなたのサイトを訪れる「窓口」は、驚くほど多様化しています。
「パソコンで見るときはこう表示する」「スマホで見るときはこう配置を変える」という指示を、あらかじめサイトの裏側でCSSに書き込んでおく。この「条件分岐」をする仕組みが主流です。
※Wordpressのデフォルトテーマでは、レスポンシブデザインの仕組が予め設定してあります。
なぜ「固定されたデザイン」では通用しないのか
なぜ、私たちはわざわざ「ブレイクポイント」という面倒な設定をしなければならないのでしょうか。その理由は、デバイスごとに「情報の受け取りやすさ」が根本的に異なるからです。
デバイスによる「閲覧環境」の決定的な違い
例えば、パソコンでサイトを見ている人は、デスクに座り、マウスを使って、比較的広い視野で情報を探しています。この時、画面を3つの列（カラム）に分けて、左にメニュー、中央に記事、右に広告を表示しても、読者は混乱しません。
しかし、スマホで見ている人はどうでしょうか。電車の中で片手で操作していたり、歩きながらサッと確認していたりすることが多いはずです。あの細長い画面で「3カラム」を維持しようとすると、1つ1つの列が極端に細くなり、文字は豆粒のように小さくなってしまいます。これでは「読める」状態とは言えません。
ユーザー体験（UX）を損なう「横揺れ」の恐怖
スマホ崩れの中でも特に読者を不快にさせるのが、画面が左右にグラグラと揺れる「横揺れ」現象です。 これは、画面幅よりも大きな画像やテーブル（表）が無理やり配置されていることで、サイト全体の横幅がスマホの枠を突き抜けてしまうために起こります。
一度でも「読みづらい」「操作しづらい」と感じた読者は、二度とそのサイトを訪れてはくれません。Googleも「モバイルフレンドリー（スマホで見やすいこと）」を検索順位の重要な指標としています。つまり、レスポンシブ対応は単なるオシャレではなく、「読者に届けるための最低限のマナー」なのです。
具体的な「境界線」と「情報の出し分け」の実践
では、具体的にどのようにしてデザインを切り替えるのか。Web制作の現場で標準的に使われている「魔法の数値」と、実際のコードの書き方を見ていきましょう。
覚えておくべき3つの主要な数値
ブレイクポイントに「絶対的な正解」はありませんが、迷った時は以下の数値を基準にするのが最も安全です。
CSSによる「出し分け」の魔法：メディアクエリ
デザインを切り替えるための呪文を、CSSでは「メディアクエリ（@media）」と呼びます。 例えば、以前作成した「テーブル（表）の横スクロール対応」を思い出してみてください。
/* =======================================
スマホ（768px以下）だけに適用する特別なルール
======================================= */
@media screen and (max-width: 768px) {
/* 表が画面からはみ出さないようにする設定 */
.entry-content table {
display: block; /* 表をブロック要素にする */
overflow-x: auto; /* 横方向にスクロールできるようにする */
white-space: nowrap; /* 文字が無理に改行されないようにする */
}
/* 文字サイズも少し読みやすく調整 */
.entry-content table td {
font-size: 0.85rem;
}
}
このコードの意味を分解してみましょう。
@media screen and (max-width: 768px)
「もし画面の横幅が最大でも768px（つまり768px以下）だったら、以下の指示を読みなさい」という条件門です。overflow-x: auto;
「中身がはみ出したら、自動的に横スクロールバーを出しなさい」という指示です。
この指示があるおかげで、パソコンでは画面いっぱいに堂々と表示されていた表が、スマホになった瞬間に「指でスライドして読む、コンパクトな表」へと変身するのです。
他にもある！レスポンシブの工夫
テーブル以外にも、よく使われる「出し分け」の例を挙げておきます。
- ナビゲーションメニュー
PCでは横に並んでいるメニューを、スマホでは「三本線のボタン（ハンバーガーメニュー）」の中に隠します。 - 画像のサイズ
PCでは固定の幅（例えば800px）にしていても、スマホでは「width: 100%;」にして、画面幅にピタッと合わせます。 - 情報の非表示
「スマホでは重要度が低い装飾用の画像」などを、display: none;を使ってスマホの時だけ消して、表示速度を上げることもあります。
「一歩引いた視点」で、しなやかなサイトを目指す
最後にもう一度、大切なポイントをまとめます。 レスポンシブ対応の本質は、すべてのデバイスで「寸分違わぬ同じ見た目」にすることではありません。「それぞれのデバイスを使っている読者にとって、最も心地よい形に姿を変えること」です。
「iPhoneの最新版では綺麗に見えるのに、古いAndroidだと少しズレる……」といった細かい差異が気になってしまうかもしれません。しかし、世界中に存在する数万種類の画面サイズすべてに完璧に合わせることは不可能です。
「768px」という太い境界線を引き、そこを基準にサイトを「しなやか」に動かします。
- パソコンで見ているあなたには、広々とした快適さを。
- スマホで見ているあなたには、片手で読める手軽さを。
現在のWEBサイトではほとんど標準でレスポンシブデザインの設定がされています。知識としてWEBサイトがこういう仕組みになっていると覚えておいていただければと思います。
ではまた。
【無料メルマガ】暮らしとWebを自分の手で整える「自給のヒント」
「ブレイクポイントの概念は分かったけれど、自分のサイトでどう設定すればいいのか不安……」 「専門用語を覚えるよりも、もっと本質的なWebの育て方を知りたい」
そんな方のために、無料のメールマガジンを配信しています。 自然派な暮らしの中で見つけた「心地よいデジタルとの付き合い方」を等身大の言葉でお届けします。
- 初心者でも迷わない、Webサイトを「育てる」ための優しい考え方
- AIを相棒にして、自分の想いを迷わず言語化するコツ
- 業者任せにしない、一生モノの「Web自給スキル」の磨き方
- 季節を感じる暮らしと、デジタルを両立させるバランス術
Webサイトは、あなたの想いを乗せて走る大切な船です。その船を、自分自身でメンテナンスし、自由に操縦できるようになるためのヒントを、一緒に学んでいきませんか？
