画像やアイコンを正しく配置する

このレッスンでは、あなたが作ったホームページに画像やアイコンを「ちゃんと表示される形」で配置します。料理でいえば、盛り付けの段階です。素材（画像ファイル）を正しい場所に置き、正しい名前で呼び出してあげると、ページにきれいに並びます。

AIツール（Claude Code、Codex CLI、Cursor、ChatGPT など、文章で指示するとコードを書いてくれる道具）に頼みながら、15分以内で終わらせることを目指します。

• 前のレッスンで、ホームページの土台（ファイル一式）が手元にできていること
• 使いたい画像ファイル（写真・ロゴ・アイコン）が1〜3枚、手元にあること
• ファイル名は半角英数字とハイフンだけにしておくと安全です。良い例: hero-photo.jpg、悪い例: トップ画像 (1).JPG（日本語や空白、括弧は表示トラブルの原因になります）

あなたのプロジェクトには public という名前のフォルダがあります。これは「インターネットに公開する棚」だと思ってください。ここに置いたものが、そのままサイトから呼び出せるようになります。

1. プロジェクトフォルダを開く
2. public フォルダの中に images というフォルダを作る
3. 使いたい画像ファイルを public/images/ の中にコピーする

この時点で、例えば public/images/hero-photo.jpg というファイルがある状態にします。

ここからが本番です。エディタ（Cursor や VS Code）で AI チャットを開き、次のようなお願いをします。コピペしてそのまま使えます。

トップページ（app/page.tsx）の見出しの下に、/images/hero-photo.jpg を Next.js の Image コンポーネントで表示してください。幅は画面いっぱい、高さは自動で良いです。alt 属性には「ヒーロー画像」と入れてください。

ポイントは3つです。

• どのファイルを編集するかを必ず書く（例: app/page.tsx）
• どの画像を、どこに入れたいかを書く
• alt 属性（画像が表示できないときに読み上げられる文字）も指定する

良いお願いの例: 「ヘッダーの右端に /images/logo.svg を 40px × 40px で表示して、クリックするとトップに戻るリンクにしてください」

悪いお願いの例: 「画像をいい感じにして」← どのファイル・どこに・何を、が抜けていて AI が迷います

ロゴのような独自画像はファイルを置く必要がありますが、汎用アイコン（メール・メニュー・SNS ロゴなど）は、既製のアイコン集を名前で呼び出すのが楽です。AI にこう頼みます。

lucide-react を使って、メニューアイコン（Menu）をヘッダー右上に 24px で表示してください。必要ならパッケージのインストールコマンドも教えてください。

AI がインストール用の1行コマンドを教えてくれるので、ターミナル（＝文字でパソコンに命令する黒い画面）に貼り付けて実行します。

pnpm add lucide-react

この1行は「アイコン集の道具を追加してね」という意味です。

1. ターミナルで開発サーバーを起動する（pnpm dev の1行。これは「作業中のサイトをブラウザで見られる状態にする」という意味です）
2. ブラウザで http://localhost:3000 を開く
3. 画像とアイコンが意図した位置に出ているか目で確認する
4. ブラウザの表示サイズを狭めて、画像がはみ出したり崩れたりしていないか確認する

画像が表示されない場合、原因のほとんどは次のどれかです。

• ファイルパスのつづりが違う（/image/ と /images/ の s 抜けなど）
• ファイル名の大文字小文字が合っていない（Hero.jpg と hero.jpg は別物扱い）
• public の外に置いてしまった

うまくいかないときは、エラーメッセージをそのまま AI に貼り付けて「これを直してください」と頼むのが一番早いです。

• 画像が巨大で表示が遅い: スマホで撮った写真はそのままだと重すぎます。AI に「この画像を Web 用に 1200px 幅に縮小する方法を教えて」と聞くか、無料の画像圧縮サイトを使います
• Next.js の Image で「width と height が必要」と怒られる: エラー文を AI に渡して「これを fill モードで解決して」と頼めば直してくれます
• アイコンの色が変えられない: SVG アイコン（lucide-react など）は CSS の className で色を指定できます。AI に「このアイコンを青色にして」と頼みましょう

• public/images/ に画像ファイルを置けた
• トップページに画像が1枚以上、正しく表示されている
• アイコンが1個以上、意図した場所に表示されている
• すべての画像に alt 属性が入っている

ここまで揃ったら完了です。スクリーンショットを1枚撮って、作業記録として保存しておきましょう。