TL;DR

フロントエンド経験ゼロの開発者として、Claude Codeとの一週間の集中的なペアプログラミングで、Gemini Storybook Galleryを成功に構築しました。本記事では実戦経験、技術詳細、およびAIペアプログラミングのベストプラクティスを共有します。

プロジェクト紹介

最終成果

🌟 オンラインデモ
🎨 レスポンシブデザイン、マルチデバイス対応
🔍 スマート検索とタグフィルタリング機能

コア機能

ストーリーブック表示ギャラリー、分類・タグ対応
レスポンシブカードレイアウト、UX最適化
高度検索機能（年齢層・タグ・キーワード別）
SEO最適化されたページ構造

技術スタック

技術領域	選択した技術	採用理由
フロントエンドフレームワーク	Next.js 15 + App Router	サーバーサイドレンダリング + モダンルーティング
スタイリングソリューション	Tailwind CSS + Shadcn UI	高速プロトタイピング + デザイン一貫性
コンテンツ管理	Sanity CMS	柔軟な構造化コンテンツ管理
デプロイプラットフォーム	Cloudflare Workers	グローバルCDN + エッジコンピューティング
開発ツール	Claude Code	AIペアプログラミング + リアルタイムデバッグ
型安全性	TypeScript	コンパイル時エラーチェック

ゼロから始まる困惑と挑戦

初期状態：技術スタック迷子期

フロントエンド知識ストック: 0%
バックエンドアーキテクチャ理解: あいまい
Next.js経験: 完全空白
Reactコンセプト: 名前を知っているだけ

直面したコア課題

概念理解：フロントエンド/バックエンド境界が不明確
技術選定：どのフレームワークを使うべきかわからない
開発フロー：体系的な開発思考の欠如
コード品質：ベストプラクティスと規範を理解していない

AIペアプログラミングコア戦略

戦略1：三層思考アーキテクチャ誘導

Linus Torvaldsの思考モードに基づく一連のpromptをデザインして、Claudeに深層的思考を促しました：

## 三層認知アーキテクチャ

| 層次 | 説明 | 作業内容 |
|------|------|----------|
| **Bug現象層** | 問題受け入れと最終修正の層 | 症状収集、クイック修正、具体的方案 |
| **アーキテクチャ本質層** | 真の調査と分析の層 | 根本分析、システム診断、パターン認識 |
| **コード哲学層** | 深い思考と昇華の層 | 設計理念、アーキテクチャ美学、本質法則 |

戦略2：単一タスク集中法

# 間違ったやり方：複雑な要求を一度に提出
"完全なストーリーブックサイトを構築して、検索、分類、ユーザーシステムも含めて..."

# 正しいやり方：タスクを分解
1. "まずシンプルなストーリー表示コンポーネントを作成して"
2. "次にベーシックなCSSスタイルを追加"  
3. "それから検索機能を実装"
4. "レスポンシブレイアウトを最適化"

戦略3：協調的設計ディスカッション

Claudeのマルチモーダル能力を活用してデザインレビューを実施：

prompt:

私の新機能、Hero領域について何か提案はありますか？ 
世界トップクラスのインタラクティブデザイン、シンプルで専門的なものを求めています。あなたは私のすべてのコードへの読み取り権限があります。

また、これがオンラインアドレスです ...
playwright mcpを使ってアクセスし、コードと比較して確認できます

5つの異なる方案を提案し、ASCIIで描いて私と議論してください

AI設計同質化の突破実践

問題：デフォルト美的陥阱

AIはしばしば「青紫のグラデーション + 角丸カード」のデフォルトデザインを生成します。

解決策：革新思考の誘導

# 効果的なprompt戦略
❌ "モダンなギャラリーページをデザインして"
✅ "日本の雑誌レイアウト美学を参考にして、温かく面白い児童ストーリー展示ページをデザインし、一般的な青色配色を避けて"

# 結果比較
- デフォルト方案：青色グラデーション + 標準カード
- 最適化方案：暖黄色調 + 本のページめくり効果 + 手描き風ボーダー

ペアプログラミングのベストプラクティス

1. タスク分解原則

## 機能開発チェックリスト
- [ ] ベース页面構造
  - [ ] Headerナビゲーションコンポーネント
  - [ ] Footerコンポーネント  
  - [ ] メインコンテンツエリアレイアウト
- [ ] ストーリー表示機能
  - [ ] StoryCardコンポーネント
  - [ ] グリッドレイアウトシステム
  - [ ] 画像遅延読み込み
- [ ] 検索フィルターシステム
  - [ ] 検索入力ボックス
  - [ ] タグフィルター
  - [ ] 年齢層選別

2. Claude Codeの高効率作業モード

Plan Mode：先企画、後執行

# Plan Mode起動
ショートカット: Shift + Tab 2回

# ワークフロー
1. 私："検索機能のパフォーマンスを最適化して、ultrathink"
2. Claude が深度思考モードに入り、問題を分析
3. 詳細な最適化計画を出力（直接コードを修正しない）
4. 私が計画を確認後、Claudeが実行開始

キー技巧組み合わせ使用

## 実際使用するClaude Code技巧

### 1. コンテキスト管理
- 各機能開始前に `/clear` で履歴対話をクリア
- 単一対話を一つのプロジェクトまたは機能に集中

### 2. 深度思考トリガー
- "think" → ベーシック思考モード
- "think hard" → 拡張思考
- "ultrathink" → 最深度分析（私がよく使う）

### 3. 中断とリダイレクト
- Escapeを押してClaudeの任意操作を中断
- Escapeダブルクリックで履歴に戻り、以前の指示を修正

### 4. テスト駆動開発
- ClaudeにTDD方式の使用を明確に伝える
- 先にテストを書き、後で機能実装
- mock実装を避け、真の機能を確保

実際の対話例

私: "/clear 検索機能最適化開始、ultrathink後に計画制定"

Claude: [Plan Mode] 検索機能を深度分析...
計画：
1. 現在実装のパフォーマンスボトルネックを分析
2. debounceを導入してユーザー入力を最適化
3. 仮想スクロールでDOM操作を削減
4. 検索結果キャッシュメカニズムを追加

私: "計画は良い、第1ステップを実行開始"

Claude: コード分析開始...useEffect依存項設定に問題を発見

3. エラーデバッグ協力

# エラー情報共有
Error: Cannot read property 'map' of undefined
  at StoryGrid (components/StoryGrid.tsx:15:23)

# Claude分析プロセス
1. データ取得ロジックをチェック
2. loading状態処理を確認
3. 防御的プログラミングを追加

コア収穫と技術成長

具体的スキル向上

Next.jsアーキテクチャ理解
- App Router vs Pages Routerの選択ロジック
- サーバーサイドレンダリング vs クライアントサイドレンダリングのシーン判断
- API Routesのベストプラクティス
React開発パターン
- コンポーネント化思考の構築
- Hookの正しい使用パターン
- 状態管理の設計原則
モダンCSSスキル
- Tailwind CSSのコンポーネント化応用
- レスポンシブデザインの体系化方法
- CSS GridとFlexboxのシーン選択

方法論収穫

## "Talk is cheap, show me the code"から"Code is cheap, show me the talk"

### 従来観念
- コードが最終製品
- 実装がデザインより重要
- 動けばOK

### AI時代思考
- 明確な要求表現がコード品質を決定
- アーキテクチャデザインが具体実装より重要
- 保守性と拡張性を優先

総括：AIペアプログラミングの未来

この一週間の経験で「プログラミング能力」を再定義しました：

技術実装はもはや障壁ではなく、問題定義とアーキテクチャ思考がコア
AIとの協力が新時代の基本スキルに
アイデア高速検証の能力が深いフレームワーク知識より重要

他のゼロベース開発者への私のアドバイス：

一つの小機能から始める、欲張らない
AIとの構造化対話を学ぶ、コミュニケーション効率を向上
コード品質を重視、AIに良い習慣の構築を手助けしてもらう
学習熱意を維持、AIはツール、思考がコア

参考リソース