atom.web-builder.responsive-layout
スマホ対応のレスポンシブレイアウトを作る
スマホ対応のレスポンシブレイアウトを作る
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。
レッスン本文
スマホ対応のレスポンシブレイアウトを作る
このレッスンでできるようになること
たとえば、レストランのメニューを考えてみてください。お店で食べる人向けの大きなメニューと、テイクアウト用の小さな案内では、紙のサイズやレイアウトが違いますよね。 Webページも同じです。パソコンの大きな画面とスマホの小さな画面、それぞれに合った見せ方が必要です。
この「画面サイズに合わせて見た目を自動で切り替える」仕組みをレスポンシブデザイン（＝画面の大きさに応じてレイアウトが変わる仕組み）と呼びます。
このレッスンでは、AIツール（Claude Code / Codex CLI / Cursor / ChatGPT）に指示を出して、あなたのWebページをスマホ対応させます。 15分で終わるシンプルな手順です。
前提を確認する
始める前に、次の準備ができているか確認しましょう。
- あなたのパソコンに、すでにWebページのファイルがある（HTMLファイルが最低1つある状態）
- AIツール（Claude Code / Codex CLI / Cursor / ChatGPT のいずれか）が使える状態になっている
まだWebページのファイルがない場合は、先に「Webページを作る」レッスンを終えてから戻ってきてくださいね。
レスポンシブ対応の全体像をつかむ
上の図は、これからやることを3つのステップで表したものです。
- 今のページを確認する — スマホで見たときにどう見えるかチェック
- AIに指示を出す — 「スマホ対応して」と具体的に頼む
- 結果を確認する — 実際にスマホサイズで見て、チェックリストで検証
それでは、ひとつずつ進めていきましょう。
今のページをスマホサイズで確認する
まずは、あなたのWebページが今スマホでどう見えるかを確認します。
ブラウザ（＝Chrome や Safari など、インターネットを見るためのアプリ）であなたのページを開きましょう。
Chrome の場合
- キーボードの
F12キーを押す（Mac の場合はCmd+Option+I） - 画面左上にある「スマホとタブレット」のアイコン（小さい端末が2つ並んだマーク）をクリックする
- 上部のバーで「iPhone SE」や「Galaxy S20」などの機種を選ぶ
Safari の場合（Mac）
- メニューバーの「開発」→「レスポンシブデザインモードにする」を選ぶ
- 上部のバーで画面サイズを選ぶ
「開発」メニューが見当たらない場合は、Safari の「設定」→「詳細」→「Webデベロッパ用の機能を表示」にチェックを入れてください。
これで、スマホで見たときの見え方がわかります。
良い例: 文字が画面に収まっていて、ボタンが指で押しやすい大きさ 悪い例: 文字が横にはみ出してスクロールしないと読めない、ボタンが小さすぎて押しにくい
AIに「スマホ対応して」と頼む
それでは、AIツールに指示を出して、実際にコードを書き換えてもらいましょう。 あなたが使っているツールに合わせて、以下のどれかを試してください。
Claude Code / Codex CLI の場合
ターミナル（＝パソコンに文字で命令を伝える画面）で、あなたのプロジェクトのフォルダーを開いている状態で次のように入力します。
このWebページをスマホ対応のレスポンシブデザインにしてください。具体的には以下をお願いします。
1. viewport meta タグが <head> 内にあるか確認し、なければ追加する
2. スマホ画面（横幅375px程度）で文字がはみ出さないようにする
3. ボタンやリンクを指で押しやすい大きさ（最低44px四方）にする
4. 画像が画面幅に収まるようにする（max-width: 100% を使う）
5. 変更したファイルと、何を変えたかを日本語で教えてください
何をしているか: AIに「スマホで見やすいページにして」とお願いしています。具体的に5つのポイントを書くことで、AIが的確に修正してくれます。
Cursor の場合
- Cursor でプロジェクトを開く
Cmd+K（Mac）またはCtrl+K（Windows）でAIチャットを開く- 上と同じ指示文をそのまま貼り付けて送信する
ChatGPT の場合
- ChatGPT を開く
- あなたのHTMLファイルの中身を丸ごとコピーして、チャットに貼り付ける
- 続けて上と同じ指示文を書いて送信する
- ChatGPT が返してくれたコードをコピーして、元のファイルに貼り替える
ChatGPT の場合はファイルを直接書き換えてくれないので、自分でコードをコピー＆ペーストする手順が必要です。
プロンプトのコツ
良い例: 「スマホ画面で文字がはみ出さないようにして、ボタンは指で押せる大きさにして」と具体的に書く 悪い例: 「レスポンシブにして」とだけ書く（AIが何をどう変えればいいか迷ってしまう）
AIが変更を適用したら（または返してくれたコードを貼り替えたら）、次のステップで結果を確認しましょう。
結果をスマホサイズで確認する
AIがコードを書き換えた後、もう一度ブラウザのスマホ表示モードで確認します。
チェックリスト
以下の4つすべてに「はい」と言えたら、スマホ対応は成功です。
- 文字は画面におさまっているか（横スクロールが出ていないか）
- ボタンやリンクは指で押しやすい大きさか（小さすぎて押しにくくないか）
- 画像は画面からはみ出していないか
- メニューやナビゲーションは操作しやすいか
もしうまくいかなかったら
チェックリストで「いいえ」の項目があったら、AIに追加の指示を出しましょう。
スマホ表示を確認したら、まだ以下の問題がありました。修正してください。
- [ここに問題を書く。例: 画像が画面からはみ出している]
何をしているか: 1回で完璧にならなくても大丈夫です。うまくいかなかった部分をAIに伝えて、もう一度直してもらいます。この「指示→確認→修正」の繰り返しがAIツールを使うときの基本です。
つまずきやすいポイントを知っておく
「AIが英語で返してくる」
指示の最後に「日本語で説明してください」と付け足すと、日本語で返してくれます。Codex CLI は英語の方が精度が高いこともあるので、英語で指示を出して結果だけ日本語で説明してもらうのもおすすめです。
「直したのに画面が変わらない」
ブラウザが古い情報を覚えていることがあります（これを「キャッシュ」と呼びます）。次のキー操作で最新の状態を読み込み直せます。
- Windows:
Ctrl+Shift+R - Mac:
Cmd+Shift+R
「スマホで見ると全体がすごく小さくなる」
これはビューポート（＝ブラウザが「この幅で表示してね」と認識する領域）の設定が抜けているのが原因です。HTMLファイルの <head> と </head> の間に、次の1行があるか確認してください。
<meta name="viewport" content="width=device-width, initial-scale=1">
何をしているか: ページに「スマホの画面幅に合わせて表示してね」という指示を書いています。この1行がないと、スマホで見たときにパソコン用の幅がそのまま縮小されて表示されてしまいます。
良い例: <head> の中に上の1行が書かれている
悪い例: <body> の中に書いてしまっている（<head> の中が正しい場所です）
「ChatGPT のコードを貼ったらページが壊れた」
ChatGPT が返すコードは、あなたのファイルの一部分だけを示していることがあります。ファイルを丸ごと置き換えるのか、一部だけ差し替えるのかをよく確認してください。不安な場合は、貼り替える前に元のファイルをコピーして「バックアップ（＝予備のコピー）」を取っておきましょう。
完了を確認する
すべてのチェックリスト項目に「はい」と言えたら、スマホ対応のスクリーンショット（＝画面の写真）を撮っておきましょう。これがあなたの成果物です。
スクリーンショットの撮り方:
- Windows:
Win+Shift+Sを押して範囲を選択 - Mac:
Cmd+Shift+4を押して範囲を選択
おめでとうございます！あなたのWebページがスマホ対応になりました。
種類: code_snippet
検証: basic_manual_check_v1
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディア