レスポンシブデザイン
レスポンシブデザインとは、PC・タブレット・スマホなど、どんな画面サイズでも美しく表示されるデザイン手法です。
なぜレスポンシブが必要？
デバイス別アクセス比率（一般的な傾向）
📱 スマートフォン
60-70%
💻 PC
25-35%
📲 タブレット
5-10%
重要：現在のWebアクセスの半分以上はスマホから。スマホで見にくいサイトは、多くのユーザーを失います。
レスポンシブの実装方法
1. ビューポートの設定
<meta name="viewport" content="width=device-width, initial-scale=1.0">
HTMLのhead内に必須。これがないとスマホで正しく表示されません。
2. メディアクエリ
/* PC（768px以上） */
@media (min-width: 768px) {
.container { max-width: 1200px; }
}
/* スマホ（768px未満） */
@media (max-width: 767px) {
.menu { display: none; }
}3. Tailwind CSSなら簡単
<!-- スマホで1列、PCで3列 -->
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div>カード1</div>
<div>カード2</div>
<div>カード3</div>
</div>
<!-- スマホで非表示、PCで表示 -->
<div class="hidden md:block">PCのみ表示</div>md:プレフィックスで768px以上の場合のスタイルを指定
AIでレスポンシブ対応
プロンプト例：
以下のレイアウトをTailwind CSSでレスポンシブ対応してください。 【PC（768px以上）】 ・ヘッダー：ロゴ左、ナビ右に横並び ・メイン：3カラムグリッド ・フッター：4列のリンク 【スマホ（768px未満）】 ・ヘッダー：ロゴ中央、ハンバーガーメニュー ・メイン：1カラム縦並び ・フッター：2列 モバイルファーストで書いてください。
モバイルファースト：まずスマホ用のスタイルを書き、PCは後から追加する考え方。現代のWeb制作では主流です。
まとめ
- ✓ レスポンシブは現代のWeb制作に必須
- ✓ ビューポート設定を忘れずに
- ✓ Tailwindなら md: プレフィックスで簡単実装
- ✓ モバイルファーストで設計する