最初に必要なページを決める

レストランをオープンするとき、最初から50品のフルメニューは必要ありません。「これがうちのお店です」と伝える、最少限のメニューがあればオープンできますよね。あとの料理は、お客さんが来てから増やしていけば大丈夫。

Webアプリも同じです。最初は「ユーザーに最低限見せたいページ」だけを揃えて公開するのが賢いやり方です。このやり方を MVP（Minimum Viable Product ＝ 最初に公開する最小限のバージョン）と呼びます。

このレッスンでは、あなたのプロジェクトに「最初はどのページが必要か」を書き出す力を身につけます。完了すると、3〜5ページのMVPページ一覧メモが手元に残ります。

このレッスンを始める前に、次の準備ができていることを確認してください。

• やりたいことが決まっている — 「どんなWebアプリを作りたいか」がすでに言葉にできている状態です。まだの場合は、先に「プロジェクトの目的を決める」レッスンを済ませてから戻ってきてください。
• AIツールが使える状態になっている — Claude Code、ChatGPT、Cursor のいずれか1つにアクセスできれば大丈夫です。まだ準備していない方は「AIツールをセットアップする」レッスンを先にご覧ください。

Webアプリのページは、大きく3つの役割に分けられます。買い物に出かけるときの行動になぞらえると覚えやすいです。

すべてのページは、この3つのどれかに当てはまります。この分類を知っておくと、あとで「このページは本当に最初から必要？」と判断しやすくなります。

それでは、あなたのプロジェクトで最初に必要なページを書き出してみましょう。

手順に沿って考える

1. 「ユーザーが一番最初にやること」を1つ書く — 例：「アカウントを作る」
2. その前に必要なページを考える — 例：「トップページ（案内）」「登録ページ（行動）」
3. その後に必要なページを考える — 例：「登録完了ページ（結果）」「ダッシュボード（結果）」
4. 書き出したページに「案内・行動・結果」のどれかを付ける
5. 合計が5ページ以内か確認する — 多ければ削る

💡 判断のコツ： 「このページがなかったら、ユーザーは最初の目的を達成できない？」と自問してください。答えが「なくても何とかなる」なら、後回しにして大丈夫です。

良い例と悪い例を見る

✅ 良い例：「ブログを作りたい」場合のMVPページ

合計3ページ。シンプル！

❌ 悪い例：「ブログを作りたい」場合のMVPページ

• トップページ、記事一覧、記事詳細、カテゴリ別一覧、タグ別一覧、検索結果、管理画面、ユーザー登録、プロフィール、設定、お問い合わせ — 合計11ページ。 最初から全部作ろうとすると、完成する前に疲れてしまいます。カテゴリ別ページや検索機能は、記事が増えてからでも追加できます。

ここからが、このレッスンのメインです。AIの力を借りて、あなたのプロジェクト専用のMVPページ一覧を作りましょう。

ステップ1：AIにページ候補を出してもらう

Claude Code（＝AIと会話しながら開発を進めるツール）や ChatGPT、Cursor（＝AIが組み込まれたコードエディタ）を開いて、次のプロンプト（＝AIへの指示文）をコピーして貼り付けてください。[あなたのプロジェクトの目的] の部分だけ書き換えます。

私は「[あなたのプロジェクトの目的]」というWebアプリを作ろうとしています。
MVP（最初に公開する最小限のバージョン）に必要なページを5つ以内で提案してください。
各ページに「案内・行動・結果」のどの役割かも添えて、必要な理由を1文ずつ書いてください。

ステップ2：AIの提案をチェックする

AIからの回答が返ってきたら、次の3つを確認します。

• ✅ ページは 5つ以内 か？
• ✅ それぞれの 役割（案内・行動・結果） が明確か？
• ✅ 「あとで足せるもの」が混ざっていないか？

もし条件を満たしていなかったら、次のように追加で指示してみましょう。

✅ 良い追加指示の例：

ページが多すぎます。この中で、一番なくても困らないページを1つ教えてください。
理由も添えてください。

「設定ページ」は最初から必要ですか？
なくても最初の目的は達成できそうな気がします。判断を助けてください。

❌ 悪い追加指示の例：

もっとページを追加してください。

→ MVPの意味がなくなってしまいます。AIは頼まれれば際限なく増やしてしまうので注意！

ステップ3：AIに一覧表を整形してもらう

ページが決まったら、AIにきれいなメモの形に整形してもらいましょう。

決まったMVPページを、次の形式でまとめてください。

# MVPページ一覧

• ページ名（役割）— 1行説明

![AIで整形したMVPページ一覧](/lesson-assets/atom.web-builder.define-mvp-pages/screen_capture.2.png)

AIが整形してくれた一覧を、メモ帳アプリでも VS Code（＝プログラムを書くためのテキストエディタ）でもよいのでテキストファイルに保存してください。

保存するファイルの形式はこちらです。

# MVPページ一覧

• トップページ（案内）— 最新記事を数件表示する
• 記事詳細ページ（結果）— 記事を全文表示する
• 管理画面（行動）— 記事を書いて公開する

次の3つすべてに「はい」と言えたら、このレッスンは完了です。

保存できたら、スクリーンショット（＝画面の写真）を撮っておきましょう。このレッスンを完了した証明に使います。