Claude CodeでWebサイトやアプリを作る11のポイント
整理日: 2026-03-16
基本情報
- 種類: 記事（Xポスト/note）
- ソース: https://x.com/kajikent/status/2031523295145898394
要約・感想
Claude Codeだけで会社サイトをリニューアルした筆者によるAI駆動開発の基本11ポイント。
11のポイント
- AIの「記憶喪失」を前提にメモリシステムを構築する：セッションごとに前回の会話を忘れる前提で設計
- PLAN.mdで仕様と進捗をドキュメント化する：「記憶喪失の天才が毎朝読む引き継ぎメモ」。ゴール定義、技術スタック、開発項目、進捗を記録
- Plan Modeで「まず計画、それから実装」を徹底する：Plan Mode→PLAN.md作成→レビュー→実装の流れ
- プロンプトは具体的に、タスクは小さく分割する：スクリーンショットやデザイン用語を活用。LEGOブロックのようにコンポーネント単位で
- 音声入力でコンテキストを注入する：Typlessessなどを使い、タイピングでは省略しがちな背景情報を自然に補足
- エラーが出たらエラーメッセージの全文を渡す：要約せず全文コピペ
- 機能が動いたらGitでコミットする：「ゲームのセーブ機能」として活用
- 「車輪の再発明」をしない：認証はSupabase Auth/Clerk、決済はStripe等の既存サービスを活用
- APIキーは環境変数で管理する：.envファイルに機密情報を隔離
- 定期的にリファクタリングさせる：放置するとAIがコードベースを正しく理解できなくなる
- 意思決定のログを残す：「今回この意思決定をした理由をPLAN.mdに追記して」と指示
参考リンク
構造図
flowchart TD
A["AIの「記憶喪失」を前提にメモリシステムを構築する"]
A --> B["エラーが出たらエラーメッセージの全文を渡す"]
B --> C["意思決定のログを残す"]
C --> D["車輪の再発明"]
D --> E["機能が動いたらGitでコミットする：「ゲームのセーブ機能.."]
E --> F["参考リンク"]
style F fill:#c05746,color:#fff,stroke:none