Claude Code レベルアップ — ポートフォリオサイト実践
約5分
対象読者: Claude Code の各レベルを個人開発の題材で順番に実践したい方
前提知識: Claude Code レベル の全体像を把握していること
my-portfolio（Next.js 14 + TypeScript の個人ポートフォリオサイト）を題材に、Claude Code を Level 0 から Level 10 まで段階的に使いこなすチュートリアルです。
各レベルは前のレベルと繋がっており、最終的には「寝ている間も自動でメンテナンスされるポートフォリオサイト」が完成します。
概念・仕組みを先に理解したい方は → Claude Code レベル を先に読んでください。
チュートリアルの読み方
Section titled “チュートリアルの読み方”各レベルは以下の構成で進みます。
- 完成イメージ — そのレベルで何が出来上がるかを最初に確認する
- Step N: [動詞 + 目的語] — 1ステップずつ手を動かす
- ✅ 確認 — 各ステップ後に「うまくいっているか」を確認する
- 💡 何が起きたか — 操作と概念をつなぐ補足説明（重要ステップのみ）
コマンドはコピペで動く形で記載しています。詰まったら ✅ 確認の条件と照合してください。
チュートリアルの流れ
Section titled “チュートリアルの流れ”| レベル | ポートフォリオでやること | 完成するもの |
|---|---|---|
| Level 0 | Claude Code を起動して詰まる体験をする | ファイルは変わらない（詰まる体験が目的） |
| Level 1 | CLAUDE.md を作って About ページを生成する | CLAUDE.md + About.tsx |
| Level 2 | GitHub Issues を読んで Skills コンポーネントを実装する | GitHub MCP 設定 + Skills.tsx |
| Level 3 | /blog コマンドで記事を量産する | .claude/commands/blog.md + MDX 記事 |
| Level 4 | 文体ルールをメモリに書いて品質を統一する | 3層 CLAUDE.md 構造 |
| Level 5（準備中） | Issue → 実装 → テスト → PR を 1 プロンプトで完結させる | 自動 PR 作成フロー |
| Level 6 | PR が来るたびに自動でレビューが走る仕組みを作る | GitHub Actions 自動レビュー |
| Level 7 | トレンドからブログネタを自動収集する | トレンド収集〜記事生成スクリプト |
| Level 8 | 3機能を Git worktree で並列実装する | 3ブランチ並列実装 + 3つの PR |
| Level 9 | 週次記事生成・脆弱性監視を 24/7 自動化する | 週次・日次 GitHub Actions |
| Level 10 | 次のプロダクトのエージェント群を Claude に設計させる | 新プロダクトの設計書 |
Level 0 から始める か、自分の現在地のレベルから読んでください。
このページの外部仕様・背景情報は、参考文献を参照してください。[1][2]
- Anthropic, Claude Code documentation
- Anthropic, Claude API documentation