AIと一緒にアプリの骨組みを作る

マンションを建てるとき、いきなり壁紙やインテリアを選ぶ人はいませんよね。まず「柱」や「壁」の配置を決めて、建物の骨組み（＝構造）を作ります。Webアプリも同じです。見た目の細かいデザインの前に、「どのページがあるか」「画面の上下左右にどんなパーツを置くか」という骨組みを先に決めます。

このレッスンでは、AIに指示を出しながら、あなたのアプリに必要なページとレイアウト（＝ページ全体の配置ルール）を15分以内で作り上げます。終わるころには「AIに聞きながら、自分でアプリの土台を組み立てられた！」という手応えが得られるはずです。

このレッスンに入る前に、次の2つが済んでいることを確認してください。

• Next.jsプロジェクトが作成済み（前のレッスン「Next.jsプロジェクトを作る」を完了している）
• shadcn/ui がインストール済み（前のレッスン「shadcn/uiを導入する」を完了している）

まだの方は、先にそちらのレッスンを終わらせてから戻ってきてください。

これから作るのは、次の3つです。

1. レイアウト — すべてのページに共通する「外枠」。ヘッダー（上部のメニューバー）やフッター（ページ下部の情報欄）がここに入ります
2. トップページ — アプリを開いたときに最初に見えるページ
3. もう1ページ — たとえば「ダッシュボード（＝自分専用の管理画面）」や「設定画面」など、あなたのアプリに合わせて1つ

たった3つですが、この骨組みがあるだけで「ちゃんと動くアプリの土台」になります。

ターミナル（＝キーボードで文字を入力してパソコンに指示を出す画面）を開き、前のレッスンで作ったプロジェクトのフォルダーに移動してから、AIツールを起動します。

Claude Codeの場合:

cd my-app && claude

Codex CLIの場合:

cd my-app && codex

何をしている？ cd my-app でプロジェクトフォルダーの中に入り、その後にAIツールを起動しています。my-app の部分は、あなたが前のレッスンで付けたフォルダー名に置き換えてください。

AIが起動したら、次のように指示を入力します。コピーしてそのまま貼り付けてOKです。

プロンプト（＝AIへの指示文）の例:

Next.jsのApp Routerで、以下のレイアウトを作ってください。

- app/layout.tsx に共通レイアウトを作る
- ヘッダーにアプリ名「My App」とナビゲーションリンク（ホーム、ダッシュボード）を置く
- フッターに「© 2026 My App」と表示する
- shadcn/ui の Button コンポーネントを使ってください
- デザインはシンプルに、背景は白、文字は黒でお願いします

良い例: 上のように「どこに」「何を」「どんな見た目で」を具体的に書く → AIが的確にファイルを作ってくれます

悪い例: 「レイアウトを作って」だけ → AIが推測で勝手にいろいろ作り、期待と違うものができあがります

AIがファイルを作り始めたら、完了するまで待ちましょう。途中で質問されたら答えてOKです。

レイアウトができたら、続けてページを追加してもらいます。

プロンプト例（トップページ）:

app/page.tsx にトップページを作ってください。

- 大きな見出しに「My Appへようこそ」と表示
- その下に短い説明文「AIと一緒に作るあなただけのアプリ」を表示
- ダッシュボードへのリンクボタンを1つ置く
- shadcn/ui の Button を使ってください

プロンプト例（ダッシュボードページ）:

app/dashboard/page.tsx にダッシュボードページを作ってください。

- 見出しに「ダッシュボード」と表示
- 「ここにあなたのデータが表示されます」という仮のテキストを置く
- シンプルなカードレイアウトで、空のカードを2-3個並べてください
- shadcn/ui の Card コンポーネントを使ってください

ポイント: プロンプトは一度に全部伝えず、「レイアウト → トップページ → ダッシュボード」と1つずつ頼むほうが、AIのミスが少なくなります。料理と同じで、「前菜・メイン・デザートを同時に」よりも、1品ずつ頼むほうがシェフも丁寧に仕上げてくれますよね。

ファイルができあがったら、アプリを実際に動かして確認しましょう。

AIツールの中で、以下をそのまま伝えてください。

アプリを開発モードで起動してください（npm run dev）

もしAIツールの外で自分で動かしたい場合は、別のターミナルを開いて次を入力します。

npm run dev

何をしている？ あなたのパソコン上でアプリを試し動き（＝開発モード）させています。インターネットには公開されず、自分だけが見られます。

ブラウザ（ChromeやSafariなど）を開いて、アドレスバーに http://localhost:3000 と入力してEnterキーを押してください。

チェックリスト

以下の3つすべてが確認できたらOKです。

• トップページが表示され、見出しと説明文が見える
• ヘッダーのリンクをクリックすると、ダッシュボードに移動できる
• ダッシュボードページにカードが表示されている

コツ: AIは「何が起きているか」を具体的に伝えるほど、正確に助けてくれます。「動きません」より「リンクをクリックしてもページが変わりません」のほうが、ずっと的確な回答が返ってきます。

おめでとうございます！あなたはAIに指示を出して、以下を自分の手で作り上げました。

• ヘッダーとフッター付きの共通レイアウト
• トップページ（見出し・説明・ボタン）
• ダッシュボードページ（見出し・カード）

これがアプリの「骨組み」です。ここから先は、この骨組みに「肉付け」をしていく作業になります。次のレッスンでは、この土台の上にデータの読み書きなど、実際の機能を追加していきます。