atom.web-builder.layout-and-navigation
共通ヘッダー・フッター・ナビゲーションを作る
共通ヘッダー・フッター・ナビゲーションを作る レストランのメニュー表を想像してみてください。表紙にはお店のロゴ、裏表紙には住所と電話番号があって、中身のページだけが次々と変わりますよね。Webサイトもまったく同じ仕...
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。
レッスン本文
共通ヘッダー・フッター・ナビゲーションを作る
レストランのメニュー表を想像してみてください。表紙にはお店のロゴ、裏表紙には住所と電話番号があって、中身のページだけが次々と変わりますよね。Webサイトもまったく同じ仕組みです。すべてのページで共通する「枠組み」をまとめる仕組みをレイアウトと呼びます。
この Atom では、あなたのサイトの全ページに表示される ヘッダー（ページ上部の帯）、フッター（ページ下部の帯）、ナビゲーション（ページを切り替えるリンク集）を AI と一緒に作ります。完了すると「どのページを開いても同じヘッダーとフッターが出る」状態になります。
前提を確認する
この Atom に取り組む前に、次の2つが揃っていることを確認してください。
- Next.js のプロジェクト（＝Webサイトの作業フォルダ一式）が手元にある
- ターミナル（＝コンピュータに命令を入力する画面）で
npm run devと打ち、ブラウザに画面が表示できる
まだの場合は、先に「Next.jsプロジェクトを作る」の Atom を終えてから戻ってきてください。
フォルダの構造を理解する
Next.js では app というフォルダの中にページを置きます。その中にある layout.tsx という特別なファイルが、全ページ共通の枠組みを担当します。
app/
layout.tsx ← ここにヘッダーとフッターを書く（額縁）
page.tsx ← トップページの中身（絵）
about/
page.tsx ← 「概要」ページの中身（別の絵）
たとえ話: layout.tsx は「額縁」、各 page.tsx は「額縁に入れる絵」です。ページを切り替えても額縁はそのまま、絵だけが入れ替わります。
AI にヘッダーとフッターを書いてもらう
ここが一番のメインステップです。AI ツールを使ってレイアウトのコードを生成します。お使いのツールに合わせて、以下のいずれかの方法で進めてください。
方法 A：Claude Code / Codex CLI を使う場合
プロジェクトのフォルダでターミナルを開き、claude または codex と入力して AI を起動します。そこに次のプロンプト（＝AI へのお願い文）を貼り付けてください。
良いプロンプトの例：
app/layout.tsx を次のように書き直してください。
- ヘッダー：左側にサイト名「My Site」、右側に「ホーム」「概要」「お問い合わせ」のナビゲーションリンクを横並びで配置
- フッター：中央に「© 2025 My Site」と著作権表示
- ヘッダーは白背景に薄いグレーの下線、フッターは薄いグレー背景
- リンクにマウスを乗せると青色に変わるようにする
- Next.js の Link コンポーネントを使うこと
ポイント: 「どこに」「何を」「どんな見た目で」を具体的に書くと、AI は的確なコードを返してくれます。
方法 B：Cursor を使う場合
Cursor で app/layout.tsx ファイルを開き、Ctrl+K（Mac は Cmd+K）を押すとインライン編集のプロンプトが出ます。上記と同じお願い文を入力してください。
方法 C：ChatGPT を使う場合
ChatGPT に上記のプロンプトを送り、返ってきたコードを app/layout.tsx にコピー＆ペーストしてください。ファイル全体を丸ごと置き換えて保存します。
悪いプロンプトの例：
レイアウトを作って
→ 何をどう作ればよいか AI に伝わらず、意図と違うコードが返ってきてしまいます。
ブラウザで結果を確認する
AI がコードを書き換えたら、ターミナルで npm run dev が動いていることを確認し、ブラウザをリロード（再読み込み）します。
確認するポイント：
- ヘッダーがページ上部に表示されているか
- フッターがページ下部に表示されているか
- ナビゲーションのリンクが横並びになっているか
ナビゲーションのリンクを確認する
ヘッダーに並んだリンクを1つずつクリックして、動きを確認しましょう。
良い例
- 「ホーム」を押すとトップページに戻る
- 「概要」を押すと 404 エラー（＝「ページが見つかりません」という表示）が出る → まだページを作っていないのでこれが正常です
悪い例
- リンクを押しても URL（画面上部のアドレス）がまったく変わらない
- リンクを押した瞬間に画面が真っ白になる
見た目を整える（任意）
AI が生成したコードの見た目がすでに整っていればスキップして大丈夫です。もし文字が小さすぎたり、リンクが縦に並んでしまっている場合は、AI に追加で修正をお願いしましょう。
修正プロンプトの例：
ヘッダーのナビゲーションリンクを横並びにして、文字のサイズを少し大きくしてください。
フッターを常に画面の一番下に固定してください。
動作を検証する
最後に、以下の3つをブラウザでチェックしてください。すべて OK なら、この Atom は完了です。
| 確認項目 | 期待される結果 |
|---|---|
| トップページを開く | ヘッダーとフッターが表示される |
| URL を変えて別のパスに移動する | ヘッダーとフッターがそのまま残っている |
| ブラウザの幅を狭める（スマホ幅） | 文字がはみ出さず読める |
つまずきポイント
リンクを押してもページが切り替わらない
リンク先の指定（href）が間違っている可能性があります。
- 良い例:
href="/about"（先頭に/がある） - 悪い例:
href="about"（先頭に/がないと意図しない場所に移動してしまう）
AI に「リンクの href を確認して、すべて先頭に / をつけてください」とお願いすると直ります。
ヘッダーが2回表示される
layout.tsx の中に <html> タグが2組入っていることが原因です。AI に次のように聞いてみてください。
layout.tsx の中に <html> タグが重複していないか確認して、1つだけにしてください
フッターが画面の一番下にこない
ページの内容が少ないと、フッターが中途半端な位置に浮いてしまうことがあります。次のプロンプトで直せます。
フッターを常に画面の一番下に表示されるように CSS を修正してください。
min-height: 100vh と flex を使う方法でお願いします。
AI が出したコードでエラーが出る
エラーメッセージ（赤い文字）がターミナルやブラウザに表示された場合は、そのメッセージをそのまま AI に見せてください。
以下のエラーが出ました。修正してください：
（ここにエラーメッセージを貼り付ける）
AI はエラーメッセージを読んで、原因と修正方法を教えてくれます。
種類: code_snippet
検証: basic_manual_check_v1
証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。
メディア