同じ URL なのに見た目が変わる
パソコンで見ていた Web サイトをスマートフォンで開くと、レイアウトが全然違う。メニューがハンバーガーアイコン (三本線) に変わり、画像のサイズが変わり、文字の大きさも違う。同じ URL なのに、なぜこんなに見た目が変わるのでしょうか。
答えは「レスポンシブデザイン」という技術です。
レスポンシブデザインの仕組み
レスポンシブデザインは、画面の幅に応じてレイアウトを自動的に切り替える技術です。CSS の「メディアクエリ」という機能を使い、「画面幅が 768px 以下ならこのスタイルを適用する」といったルールを設定します。
- パソコン (1024px 以上): 横に 3 列のカラムレイアウト、サイドバーあり、大きな画像
- タブレット (768〜1023px): 2 列レイアウト、サイドバーが下に移動
- スマートフォン (767px 以下): 1 列レイアウト、ハンバーガーメニュー、画像が画面幅に合わせて縮小
重要なのは、HTML (ページの中身) は同じで、CSS (見た目のルール) だけが切り替わるということです。サーバーから送られるデータは同じで、ブラウザが画面サイズに応じて表示を変えています。なお、この画面サイズの情報はブラウザフィンガープリントの要素としても利用されることがあります。
レスポンシブ以前の時代 - 「モバイル版サイト」
レスポンシブデザインが普及する前 (2010 年頃まで)、多くのサイトは「PC 版」と「モバイル版」を別々に作っていました。当時の Web サイトがどのような見た目だったかは、昔の Web サイトがひどく見える理由で詳しく紹介しています。
www.example.com→ PC 版m.example.com→ モバイル版
2 つのサイトを別々にメンテナンスする必要があり、コンテンツの不一致や更新漏れが頻発しました。2012 年に Google が「レスポンシブデザインを推奨する」と発表したことで、1 つの URL で全デバイスに対応する方式が主流になりました。
ハンバーガーメニュー (☰) の由来
スマートフォンでよく見る三本線のメニューアイコン (☰) は「ハンバーガーメニュー」と呼ばれます。三本線がハンバーガーのバンズと具材に見えることが名前の由来です。
このアイコンは実は 1981 年に Xerox Star というコンピュータで初めて使われました。デザイナーのノーム・コックス氏が「メニューの中身を視覚的に表現するアイコン」として考案したもので、40 年以上の歴史があります。
スマートフォンの画面は狭いため、すべてのメニュー項目を常に表示するスペースがありません。ハンバーガーメニューは、タップしたときだけメニューを展開する省スペースな解決策です。
「モバイルファースト」の時代
2026 年時点で、Web サイトへのアクセスの過半はスマートフォンからです。そのため Web デザインでは「モバイルファースト」- まずスマートフォン向けのデザインを作り、それをパソコン向けに拡張する手法が主流です。スマートフォンでの Web 利用が増えるにつれ、モバイル環境でのプライバシー保護も重要性を増しています。
Google の検索エンジンも「モバイルファーストインデックス」を採用しており、スマートフォンでの表示を基準にサイトを評価しています。スマートフォンで見づらいサイトは、検索順位が下がる可能性があります。
IP 確認さんもレスポンシブデザインを採用しており、スマートフォンでもパソコンでも快適に IP アドレスを確認できます。
まとめ
同じ URL なのにスマホとパソコンで見た目が違うのは、CSS のメディアクエリが画面幅に応じてレイアウトを切り替えているからです。ハンバーガーメニューは 1981 年生まれの 40 年選手。2026 年時点では Web アクセスの過半がスマートフォンからで、モバイルファーストが主流です。
この記事の関連用語
よくある質問
なぜスマホと PC で同じサイトの見た目が違うのですか？
レスポンシブデザインという技術で、CSS のメディアクエリが画面幅に応じてレイアウトを自動的に切り替えています。HTML (中身) は同じで、CSS (見た目のルール) だけが変わります。
ハンバーガーメニュー (☰) はいつ生まれましたか？
1981 年に Xerox Star というコンピュータで初めて使われました。デザイナーのノーム・コックス氏が考案した 40 年以上の歴史があるアイコンです。
モバイルファーストとは何ですか？
まずスマートフォン向けのデザインを作り、それを PC 向けに拡張する手法です。2026 年時点で Web アクセスの過半がスマートフォンからのため、Google もモバイルファーストインデックスを採用しています。