AIツールで最初のホームページを作る

ホームページを作るのは、はじめての料理に似ています。レシピ（＝作り方の手順）を見ながら材料を合わせていけば、誰でも一品は完成します。今回は、AIツール（＝人工知能の力であなたを助ける便利な道具）がレシピを考えてくれるので、あなたは「こんなページがいい」と伝えるだけで大丈夫です。

このレッスンを終えると、あなたは 自分だけのホームページ をブラウザ（＝インターネットを見るアプリ。Chrome や Safari など）で表示できるようになります。所要時間はおよそ15分です。

---

始める前に、次の2つが準備できているか確認しましょう。

1. Next.jsのプロジェクトを作り終えていること 前のレッスン「Next.jsプロジェクトを作る」を完了していれば OK です。まだの方は先にそちらを済ませてください。
2. shadcn/ui（＝見た目を整えるパーツ集）をインストール済みであること 前のレッスン「shadcn/ui をインストールする」を完了していれば OK です。

💡 このレッスンでは Claude Code を例に説明しますが、Cursor や Codex CLI でも伝え方はほぼ同じです。ツールごとの違いは「つまずきポイント」の表にまとめています。

---

前のレッスンで作ったプロジェクトのフォルダー（＝材料をまとめる箱）に移動します。ターミナル（＝パソコンに文字で命令を伝える画面）を開いて、次の1行をコピーして貼り付け、Enter キーを押してください。

cd my-website

何をしているか: cd は「そのフォルダーに移動する」命令です。前のレッスンで作った my-website フォルダーに入ります。

---

ターミナルで次の1行を実行してください。

claude

何をしているか: Claude Code を起動（＝動かし始めること）しています。画面に入力欄が表示されたら準備 OK です。

💡 Cursor を使う場合: Cursor を起動して、左側のファイル一覧で my-website フォルダーを開き、チャット欄（Cmd+L / Ctrl+L）に同じ文章を入力してください。

---

AIが起動したら、あなたの希望を「言葉」で伝えます。次の文をそのままコピーして入力してみましょう。

プロンプト例 1（自己紹介ページ）

shadcn/ui を使って、シンプルな自己紹介ホームページを作って。

条件:
- タイトルは「ようこそ！」
- 自分の名前（例: 山田太郎）と趣味（例: 読書と散歩）を表示する
- ページの上部にナビゲーションバー（＝メニューバー）を置く
- 全体をやさしい色合いにする
- page.tsx に書いてね

完了したら開発サーバーを起動して。

AIがコード（＝パソコンへの指示書）を自動で生成してくれます。30秒〜1分ほど待ちましょう。

プロンプト例 2（お店のページ）

もし自己紹介ではなく、お店やサービスのページを作りたい場合は、こちらを参考にしてください。

shadcn/ui を使って、カフェの紹介ページを作って。

条件:
- 店名は「Coffee & Books」
- 営業時間とメニューのセクションを作る
- おしゃれで読みやすいデザインにする
- page.tsx に書いてね

完了したら開発サーバーを起動して。

良い伝え方と悪い伝え方

---

AIが作業を終えると、「こんなファイルを作りました」「開発サーバーを起動しました」のように報告してくれます。

ここでやること: AIの報告をざっと読んで、エラー（＝失敗）が出ていないことだけ確認してください。

• ✅ 「page.tsx を作成しました」「サーバーを起動しました」→ そのまま次へ
• ❌ 赤い文字でエラーが出ている → エラー文をコピーして「これを直して」とAIに伝える

💡 コードの中身は今の段階では理解しなくて大丈夫です。AIが書いてくれたものをそのまま使います。「コードが読めない＝失敗」ではありません。

---

AIが開発サーバー（＝あなたのパソコン上だけで見られる確認用ページ）を起動してくれた場合は、ブラウザを開いて次のアドレスにアクセスしてください。

http://localhost:3000

もしAIがサーバーを起動してくれなかった場合は、ターミナルで次の1行を実行してください。

pnpm dev

何をしているか: 確認用ページをあなたのパソコン上に立ち上げています。ブラウザのアドレスバー（＝URLを入力する場所）に http://localhost:3000 と入力して開きましょう。

---

ブラウザに「ようこそ！」の文字が表示されていれば成功です！

次のチェックリストで、ひとつずつ確認しましょう。

• ページのタイトル「ようこそ！」（または指定した店名など）が表示されている
• 名前・趣味（または営業時間・メニューなど）の表示エリアが見える
• ナビゲーションバー（メニューバー）がページ上部にある
• 赤いエラーメッセージが出ていない
• 文字が読みやすい大きさで表示されている

全部チェックがついたら、このレッスンは完了です！

---

「もう少し変えたいな」と思ったら、AIに追加で指示を出してみましょう。修正の伝え方の例をいくつか紹介します。

AIに伝えたら、数秒〜数十秒で修正してくれます。気に入るまで何回でも伝え直して大丈夫です。

---

---

このレッスンのゴールは、ブラウザで自分のホームページが表示されること です。

表示が確認できたら、スクリーンショット（＝画面の写真）を撮って保存しましょう。

• Mac: Cmd + Shift + 3（画面全体）または Cmd + Shift + 4（範囲選択）
• Windows: Win + Shift + S（範囲選択）または PrtSc（画面全体）

このスクリーンショットが、あなたの「できた！」の証拠になります。次のレッスンでは、この成果物をさらに発展させていきます。