用語集 › 🕸️ Web › レスポンシブデザイン
【れすぽんしぶでざいん】

レスポンシブデザイン とは？

💡 画面サイズに合わせて「自動調整」するデザイン
📌 このページのポイント
レスポンシブデザイン PC（3カラム） ヘッダー メイン サブ1 サイドバー フッター タブレット（2カラム） ヘッダー メイン サブ1 サイドバー（下へ移動） スマホ（1カラム） ヘッダー メイン サブ1 サイドバー 1024px 以上 768px〜1023px 767px 以下 @media (max-width: 768px) { /* レイアウト変更 */ } 画面幅に応じてレイアウトを自動的に最適化する設計手法
画面サイズに応じてカラム数が変化するレスポンシブレイアウト
ひよこ ひよこ

なんでレスポンシブが必要なの？

ペンギン先生 ペンギン先生

世界のWebトラフィックの60%以上がスマートフォンからだよ。PC用サイトをスマホで見ると文字が小さくて読めない、ボタンが押せない。別々にPC版とスマホ版を作ると開発コストが2倍。レスポンシブなら1つのHTMLで全デバイスに対応できるんだ

ひよこ ひよこ

ブレークポイントって何？

ペンギン先生 ペンギン先生

レイアウトが切り替わる画面幅のことだよ。一般的には640px（スマホ）、768px（タブレット）、1024px（PC）あたりで切り替える。Tailwind CSSなら「sm:」「md:」「lg:」プレフィックスで簡単に指定できる。デバイスの種類ではなく「コンテンツが読みやすい幅」で決めるのがポイントだよ

ひよこ ひよこ

モバイルファーストって？

ペンギン先生 ペンギン先生

まずスマホ向けのデザインを作り、画面が広くなるにつれて要素を追加・拡張する設計手法だよ。CSSではまずモバイル用のスタイルを書き、@media (min-width: 768px)でタブレット以上の追加スタイルを書く。コンテンツの優先順位が明確になり、パフォーマンスも向上するんだ

ひよこ ひよこ

レスポンシブのテスト方法は？

ペンギン先生 ペンギン先生

①ブラウザのDevTools（F12→デバイスツールバー）でスマホ表示をシミュレーション、②実機テスト（iPhone、Android、タブレット）、③BrowserStackやLambdaTestで多デバイス一括テスト。DevToolsのシミュレーションだけでは不十分で、実機で「指でタップできるか」「スクロールが自然か」を確認するのも大事だよ

ペンギン
まとめ：ざっくりこれだけ覚えればOK！
「レスポンシブデザイン」って出てきたら「画面サイズに自動対応するWebデザイン」と思えればだいたいOK！
📖 おまけ：英語の意味
「Responsive Web Design」 ＝ レスポンシブWebデザイン
💬 Responsive（反応する）＝画面サイズに「反応」してレイアウトが変わるデザインだよ
🔗 あわせて読みたい
← 用語集にもどる