メインコンテンツへスキップ
レッスン一覧に戻る

atom.web-builder.learning-roadmap-next-steps

卒業後の学習ロードマップ——次に何を学ぶか

卒業後の学習ロードマップ——次に何を学ぶか おめでとうございます!ここまでたどり着いたあなたは、AIを使ってWebアプリを企画・開発・公開できるスキルを身につけました。 でも「トラックが終わった。次は何をすればいい...

learning-roadmaplearning-roadmap「learning roadmap」に関するスキルがこのレッスンで身につきます。
想定時間未設定公開状態: draft
学習メモ

成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc検証: basic_manual_check_v1

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディアメディアレッスン内に出てくる図や動画のスロットです。実際の画面やイメージで理解を補助します。

diagramscreen_capture

レッスン本文

卒業後の学習ロードマップ——次に何を学ぶか

おめでとうございます!ここまでたどり着いたあなたは、AIを使ってWebアプリを企画・開発・公開できるスキルを身につけました。

でも「トラックが終わった。次は何をすればいい?」と迷うのは自然なことです。旅行にたとえると、ガイドツアーが終わって自由行動が始まった瞬間のようなもの。地図さえあれば、ここからが一番楽しいパートです。

このレッスンでは、AIに相談しながら「自分だけの学習ロードマップ」を15分で作り上げるところまでやります。

今のあなたのスキルを確認する

まず「自分は何ができるようになったのか」を振り返りましょう。トラックを通じて、あなたは以下のことができるようになっています。

  • AIへの依頼力: Claude Code や ChatGPT に的確に指示して、コードを生成・修正できる
  • Webアプリ構築: Next.js + Supabase + Vercel でアプリを作って公開できる
  • 基礎知識: フォーム、認証(=ログインの仕組み)、データベース(=情報の保管庫)、デプロイ(=公開)の基本を理解している
  • 問題解決力: エラーが出ても、AIと一緒に原因を突き止めて直せる

これは「AIを使ってものを作れる人」の確かな土台です。自信を持ってください。

スキルマップ

自分の目的を1つ選ぶ

次のステップは、あなたが「何のためにスキルを使いたいか」で大きく変わります。以下の3つの道から、今の自分に一番近いものを1つ選んでください。

良い例: 「まず副業で小さな案件を受けて実績を作りたい」——具体的で、次のアクションが見える

悪い例: 「全部やりたい」——方向が定まらず、結局どれも中途半端になりがち

道A: 副業・フリーランスで受注したい

クライアントからWeb制作の仕事を受けて収入を得たい人向けです。

やること具体的な目安
ポートフォリオを作る作ったアプリを3つ以上公開し、紹介ページを用意する
LP(ランディングページ)制作を練習する1日で1ページ作れるようになる
見積もり〜納品の流れを学ぶ要件ヒアリング→見積もり→制作→納品の4ステップを知る
小さな案件から始めるクラウドソーシングで1〜3万円の案件に挑戦する

AIに聞いてみるプロンプト例:

フリーランスのWeb制作者として最初のポートフォリオサイトを作りたいです。
Next.js + Vercel で、以下を含む構成を提案してください:
- 自己紹介セクション
- 制作実績3つの紹介
- お問い合わせフォーム

道B: 自分のサービス(SaaS)を作りたい

自分のアイデアをWebサービスとして形にしたい人向けです。SaaS(サース)とは、インターネット上で提供するサービスのことです。

やること具体的な目安
決済機能を追加するStripe(=オンライン決済サービス)をテスト→本番に切り替える
ユーザー管理を強化するプラン別の機能制限、管理者画面を作る
マーケティングの基礎を学ぶSEO(=検索で見つけてもらう工夫)、SNS運用を始める
先輩の事例を研究する個人開発者のサービス事例を5つ以上読む

AIに聞いてみるプロンプト例:

月額課金制のWebサービスを作りたいです。
Supabase + Stripe の組み合わせで、以下の機能を実現する方法を教えてください:
- 無料プランと有料プランの切り替え
- 有料プランだけ使える機能の制限方法

道C: チーム開発に参加したい

会社やプロジェクトで他の人と一緒に開発したい人向けです。

やること具体的な目安
Gitのチーム運用を覚えるブランチ(=作業の枝分かれ)→レビュー→マージ(=統合)の流れを体験する
TypeScript を深掘りする型(=データの種類を明示するルール)を使った安全なコードの書き方を学ぶ
テストの基礎を知る自動テスト(=プログラムが正しく動くか自動で確認する仕組み)を1つ書く
OSSに参加してみるOSS(=誰でも参加できる公開プロジェクト)で小さな修正を出す

AIに聞いてみるプロンプト例:

Gitのブランチ運用を練習したいです。
個人プロジェクトで「feature branchを作る → 変更する → Pull Requestを出す → マージする」
の流れを体験できる手順を、初心者向けに教えてください。

AIを使ってロードマップを作る

ここからが本題です。選んだ道に合わせて、AIに「自分だけのロードマップ」を作ってもらいましょう。

ステップ1: AIにロードマップを依頼する

以下のプロンプトをそのままコピーして、Claude Code または ChatGPT に貼り付けてください。【 】 の部分だけ自分の内容に書き換えます。

私は非エンジニアですが、AIを使ってNext.js + Supabase + VercelでWebアプリを作れるようになりました。

次の目標: 【道A/B/Cのうち選んだもの + 具体的にやりたいこと】
使える時間: 【週に○時間くらい】
期間: 【○ヶ月で達成したい】

以下の形式で学習ロードマップを作ってください:
1. 月ごとの目標(最大3ヶ月分)
2. 各月で取り組む具体的なプロジェクト1つ
3. 各プロジェクトで必要な新しいスキル
4. つまずきそうなポイントと対処法

ロードマップ作成画面

ステップ2: ロードマップをMarkdownで保存する

AIが出力したロードマップを、Markdown(マークダウン=文章の書き方ルール)ファイルとして保存しましょう。

  1. AIの出力をコピーする
  2. テキストエディタ(Cursor や VS Code)に貼り付ける
  3. my-roadmap.md というファイル名で保存する

良い例: ロードマップに「1ヶ月目: ポートフォリオサイトを作る。必要スキル: レスポンシブデザイン」と具体的に書かれている

悪い例: 「フロントエンドを勉強する」だけで、何をいつまでにやるか不明

ステップ3: 最初の1週間のアクションを決める

ロードマップが大きすぎると手が止まります。1ヶ月目の目標から、最初の1週間でやることだけを抜き出してください

AIにこう聞いてみましょう:

このロードマップの1ヶ月目を、最初の1週間のタスクに分解してください。
各タスクは2時間以内で終わるサイズにしてください。

学習を続けるコツを知る

「作りたいもの」を常に持つ

教材を順番にこなすより、「これが作りたい!」というプロジェクトがある方が圧倒的に速く学べます。料理にたとえると、レシピ本を最初から読むより「今日はカレーを作りたい」と決めてから必要なページを開く方が効率的ですよね。困ったらAIに聞けば、必要な知識はその都度身につきます。

完璧を目指さない

最初から完璧なものを作る必要はありません。まず動くものを作り、少しずつ改善していく。これはプロの開発者も同じやり方です。

仲間とつながる

一人で学ぶより、仲間がいる方が続きます。Discord の開発者コミュニティ、X(旧Twitter)のプログラミング学習アカウント、地域の勉強会などに参加してみましょう。

つまずきポイントと対処法

よくあるつまずき対処法
「何を作ればいいかわからない」AIに「私のスキルで作れそうなWebアプリのアイデアを5つ出して」と聞く
「ロードマップ通りに進まない」計画は目安。2週間ごとにAIと一緒に振り返って調整すればOK
「新しい技術が難しすぎる」一気に学ばない。1つのプロジェクトで1つの新技術だけ取り入れる
「モチベーションが続かない」小さな成果を毎週SNSに投稿する。反応がもらえると続けやすい

確認する

以下のチェックリストをすべて満たせたら、このレッスンは完了です。

  • 3つの道(副業/SaaS/チーム開発)から、自分の目的を1つ選べた
  • AIを使って、自分だけの学習ロードマップを作成し my-roadmap.md に保存した
  • ロードマップから最初の1週間のタスクを抜き出した
  • 学習を続けるための仕組み(コミュニティ参加・作業時間の確保など)を1つ決めた
成果物成果物このレッスンが終わったとき、あなたの手元に残る具体的な成果物です(例: 公開済みの Web ページ、動作するフォームなど)。

種類: markdown_doc

検証: basic_manual_check_v1

証跡とメディア

証跡証跡成果物が正しく作れたことを確認するためのチェックリストです(例: ブラウザで動作する、フォーム送信で値が保存される)。

screenshot

メディア

diagramscreen_capture
学習完了