はじめてのプログラミング学習ロードマップ

これから始める人向けに、最短で“作れる人”になるための流れを一本化。VS Code導入 → Progate → ドットインストール → 模写コーディング（Codejump） → 自作LP/サイト（AI活用で課題出し）→ 就職/転職 の順に、“何を・どのくらい・どう評価するか”まで具体化します。

学びの順番を決めるだけで、迷いが激減します。

このロードマップで得られること

学習を順番化し、迷いを0にする
“見て終わり”を防ぎ、必ず手が動く状態にする
ポートフォリオ（面接で見せられる成果物）が手元に残る

Step 0：VS Code を導入（最短10分）

まずは道具を整えます。VS Code は無料・軽量・拡張が豊富。初心者向け VS Code の入れ方を見ながら、日本語化・おすすめ拡張・保存時フォーマットまで終わらせましょう。

最低限の拡張：Japanese Language Pack / Prettier / GitLens
Git も同時に使えるとベスト：Git超入門

Step 1：Progateで基礎固め（概念を一気に掴む）

Progate は図解＋スライドで概念を素早く掴むのに最適。HTML/CSS/JavaScript（もしくはPython/Java）など、やりたい分野の道筋を一気に俯瞰しましょう。

狙い：用語・全体像・代表的な文法を“覚える”ではなく見渡す
目安：1〜2週間で2コース以上（メモ取り推奨）
アウトプット：重要語の1行定義をノート化（例：DOM＝HTMLをツリーとして扱う仕組み）

ダウンロードはここから

Step 2：ドットインストールで“手”を育てる（短時間×反復）

ドットインストールは3分動画で“手を動かす習慣”がつきます。毎日2〜3本ずつでOK。止めて真似して打つ→詰まったら10秒戻す、を繰り返します。

狙い：タイピングで迷わない指を作る（コピペでは伸びません）
目安：1〜2週間、毎日30〜45分
アウトプット：やったことをそのままGitでコミット（学習ログが職歴の代わりになります）

ダウンロードはここから

Step 3：模写コーディング（Codejump推奨）

模写は設計目線を育てます。Codejump は学習向けに作例が整理されていて難易度調整しやすいのが利点。

作例を1つ選ぶ → まず完成イメージのスクショを保存
骨組み（HTML）→ 見た目（CSS）→ 動き（必要ならJS）の順で作る
Figma/DevToolsで余白・フォント・色を計測して合わせる
できたらBefore/Afterの画像をREADMEに並べる

コツ：スマホ幅→PC幅のモバイルファーストで作ると崩れにくい。

　　ここからいけるよ！

Step 4：自作LP/ホームページを作る（AIで課題を出してもらう）

いきなり“完全オリジナル”はハード。まずはテーマを1つ決める（例：カフェLP、ポートフォリオ、架空サービス）。AIに要件定義を手伝ってもらい、短いスプリントで小さく作って小刻みに改善します。

AIへの依頼テンプレ（コピペOK）

あなたはウェブ制作の講師です。初心者向けに、1週間で完成できるランディングページ課題を出してください。
制約：HTML/CSS/プレーンJSのみ。長いアニメは禁止。スマホファースト。
出力：
1) ペルソナとサイト目的
2) 必要セクション（見出しと要素）
3) ワイヤーフレームのテキスト説明
4) 色・フォントの提案（Google Fonts）
5) 完成チェックリスト（アクセシビリティ/表示速度含む）

完成させるためのチェックリスト

目的（1行）が冒頭に書ける
CTA（お問い合わせ/申込）が目立つ
スマホ幅（375px）で崩れない
Lighthouse で Performance 80+ / A11y 90+
READMEに機能・スクショ・学びを記載
無料ホスティング（Vercel/Netlify等）にデプロイ済み

Step 5：作品を“職歴”に変える（就職/転職）

面接は作品×説明力で戦えます。3点セットを用意しましょう。

GitHubリンク（コミット履歴で継続を示す）
デプロイURL（スマホで開ける実物）
README（目的/工夫/大変だった点/今後の改善）

READMEの雛形（コピペOK）

# プロジェクト名
- 目的（1行）: 例）カフェの来店予約を増やすLP
- 役割: デザイン/コーディング/テスト
- 期間: 7日
- 技術: HTML/CSS/JS, Git, Lighthouse

## スクリーンショット
- Before（模写元/参考）: 画像URL
- After（完成）: 画像URL

## こだわり・工夫
- 例）ファーストビューのLCPを2.0s以下に最適化（画像の遅延読み込み）

## 難しかった点と解決
- 例）ヘッダー固定によるレイアウトずれ → sticky + padding-top で解決

## 今後の改善
- 例）フォームのバリデーション強化、アクセシビリティ改善

面接では「作り直すなら何を変えるか」を話せると評価が上がります。

学習スケジュール例（8週間）

Week 1

VS Code導入・日本語化・拡張
Git初回設定・学習ログ用リポジトリ作成

Week 2–3

Progateで基礎2コース
用語の1行定義ノート

Week 4–5

ドットインストール毎日30–45分
学習ログを毎日コミット

Week 6

Codejumpで模写1本完走
Before/AfterでREADME作成

Week 7–8

AIで課題をもらい自作LP完成
デプロイ→応募開始

よくあるつまずきと回避策

動画を見て満足 → 毎回完了コミットを1つ残す（ログ＝資産）
完璧主義 → 小さく出す。LPは1週間で“良い未完成”を公開
環境で迷子 → VS Code記事をブックマークして戻る / つまずきはREADMEに記録

FAQ

Progateとドットインストールは両方必要？

役割が違います。Progate＝概念の俯瞰、ドットインストール＝手を動かす練習。両方やると定着が早いです。

模写は何本やればいい？

最低1本完走。余裕があれば2本目で難易度を少し上げ、最後に自作LPへ進みます。

バックエンドをしたい場合は？

このロードマップの後に、Node.js/Python/Javaの基礎→簡単なAPI→フォーム送信のバックエンド化へ進むと良いです。