この課題のねらい
ここはいよいよ「自分のアプリをちゃんと設計する」フェーズです。
コードを書く前に、仕様・ページ構成・ワイヤーフレームを言葉と簡単な図でまとめられるようになると、
実装が一気にスムーズになります。
ゴールは、「まだコードが1行もなくても、このアプリが何をするものか説明できる状態」です。
例題として作る最終アプリを決める
テーマ例：学習ログ管理アプリ
説明を具体的にするために、ここでは「学習ログ管理アプリ」を例にします。
もちろん、あなたは自分の作りたいテーマ（家計簿、タスク管理、読書ログなど）に置き換えて考えてOKです。
以下の流れを、そのまま自分のテーマに当てはめていくイメージで読んでください。
必須課題① アプリ仕様を文章化する
「誰が・何のために・何ができるか」を書く
仕様を書くときは、いきなり細かい機能から入らずに、まずはこの3つを押さえます。
誰が使うアプリか
何のために使うアプリか
ユーザーはこのアプリで何ができるのか
学習ログアプリの例だと、こんな感じで文章化できます。
このアプリは、プログラミング学習者が毎日の学習内容と時間を記録し、振り返れるようにするための学習ログ管理アプリである。
ユーザーは、日付・学習内容・学習時間を入力してログとして保存できる。
保存されたログは一覧で確認でき、各ログの詳細画面で内容を見返したり、不要なログを削除したりできる。
ここまで書けると、「何を作るのか」がかなりクリアになります。
機能をもう少しだけ具体化する
次に、「ユーザーができること」をもう少しだけ具体的に書きます。
箇条書きでもいいですが、文章でつなげてみましょう。
ユーザーはトップページで、これまでに登録した学習ログの一覧を確認できる。
同じページ上部のフォームから、新しい学習ログ（日付・内容・時間）を追加できる。
各ログには「詳細を見る」ボタンがあり、詳細ページでその日の学習内容をじっくり確認できる。
不要になったログは、一覧または詳細ページから削除できる。
ここまでが「アプリ仕様の文章化」です。
この文章を他の人に見せて、「ああ、こういうアプリね」とイメージしてもらえれば合格です。
必須課題② ページ一覧を作成する
URL とページ名を対応させる
次は、「このアプリにはどんなページがあるか」を一覧にします。
Next.js なので、URL と page.tsx の対応も意識して書いてみましょう。
学習ログアプリの例だと、こんなページ構成が考えられます。
トップページ /
学習ログ詳細ページ /logs/[id]
（余裕があれば）設定ページ /settings
文章で整理すると、こうなります。
/トップページ
学習ログの一覧と、新規追加フォームを表示するメインページ。
/logs/[id]学習ログ詳細ページ
特定の1件の学習ログの詳細（日時・内容・時間・メモなど）を表示するページ。
URL の[id]部分には、ログの ID が入る。
/settings設定ページ（任意）
学習目標時間や、表示に関する簡単な設定を行うページ。
ここで大事なのは、「どの URL を開いたときに、ユーザーは何を期待するか」を言葉にしておくことです。
これが決まっていると、Next.js の app ディレクトリ構成も迷わずに切れます。
挑戦課題 ワイヤーフレームを作成する
ワイヤーフレームとは何か
ワイヤーフレームは、「画面のラフスケッチ」です。
デザインの細かい色やフォントではなく、
どこに何のブロックがあるか
どんな情報が並ぶか
どのボタンがどこにあるか
だけをざっくり決めるための図です。
紙とペンで十分ですし、テキストで表現してもOKです。
トップページのワイヤーフレーム例
学習ログアプリのトップページを、テキストでワイヤーフレームっぽく表現してみます。
[ ヘッダー ]
学習ログアプリ | 今日の記録 | 設定
[ メインコンテンツ ]
[ 学習ログ追加フォーム ]
日付入力フィールド
学習内容テキストエリア
学習時間入力フィールド（分）
[ 追加ボタン ]
[ 学習ログ一覧 ]
┌───────────────────────────────┐
│ 2026-01-14 React 学習 60分 [ 詳細 ] │
├───────────────────────────────┤
│ 2026-01-13 TypeScript 45分 [ 詳細 ] │
└───────────────────────────────┘
ここで意識してほしいのは、
フォームと一覧が縦に並んでいる
各ログは「日付・内容・時間・詳細ボタン」という構成になっている
ヘッダーは全ページ共通で使い回せそう
といった「構造」です。
詳細ページのワイヤーフレーム例
詳細ページも同じように描きます。
[ ヘッダー ]
学習ログアプリ | 今日の記録 | 設定
[ 学習ログ詳細 ]
日付：2026-01-14
学習内容：
React の useEffect を学習。
データ取得とローディング表示の実装。
学習時間：60分
[ 戻る ] [ 削除 ]
このワイヤーフレームがあると、
どのコンポーネントが必要か
どの state がどこに必要か
どのページで何を API から取るか
が、かなりイメージしやすくなります。
ここまでを自分のアプリに落とし込むときのポイント
あなたがこの課題でやるべきことは、次の3ステップです。
自分の作りたいアプリのテーマを決める（できれば一言で言えるもの）
そのアプリの仕様を文章で書く（誰が・何のために・何ができるか）
ページ一覧と、それぞれのページのワイヤーフレームをテキストか紙で描く
ここまでできていれば、もう「最終アプリの設計書」ができたも同然です。
あとはそれを Next.js の app ディレクトリとコンポーネントに落とし込んでいくだけになります。