AI時代の開発は「書く」から「指示する」へ
Web制作の現場が大きく変わってきています。 従来は「コードを一行ずつ書く」のが当たり前でしたが、 AIツールの登場で「何を作りたいかを伝える」だけで、 高品質なコードが生成される時代になりました。
実際に、私は Claude と Cursor を組み合わせることで、 従来の3倍速でサイトを作れるようになりました。 ここでは、その具体的な方法を公開します。
1. 使っているAIツール
Claude（設計・相談）
サイトの設計、技術選定、アーキテクチャの相談に使用。 「こういう機能を実装したいんだけど、どうすればいい？」と聞くと、 ベストプラクティスを教えてくれます。
実際の使い方
「Next.js 14 でお問い合わせフォームを作りたい。 Resend を使ってメール送信したいんだけど、 セキュアな実装方法を教えて」
→ Claude が設計とコード例を提示してくれる
Cursor（コーディング）
VS Code ベースのAIエディタ。 コードを書きながら、その場で「こういう機能を追加して」と指示できます。
実際の使い方
Cmd + K で AI に指示：
「このボタンにホバーアニメーションを追加して、 Framer Motion を使って実装して」
→ その場でコードが生成される
v0.dev（UIデザイン）
Vercel が提供する AI デザインツール。 「こういうUIが欲しい」と伝えると、React コンポーネントを生成してくれます。
実際の使い方
「料金プランのカードコンポーネント。 3カラムで、ホバー時に少し浮き上がるアニメーション付き」
→ そのまま使える React コンポーネントが生成される
2. 実際の開発フロー
Claude で設計
プロジェクトの要件を Claude に伝えて、全体設計を相談します。
- 技術スタックの選定
- ディレクトリ構成
- 必要なコンポーネント一覧
- データベース設計
この段階で「後戻りできない設計ミス」を防げます。
v0 で UI プロトタイプ
主要なUIコンポーネントを v0 で生成します。
生成されたコードをそのまま使うのではなく、 ベースとして使って、Cursor でカスタマイズしていきます。
Cursor でコーディング
Cursor で実際にコードを書いていきます。
詰まったら、その場で AI に質問。 「このエラーどうやって解決する？」と聞けば、 コンテキストを理解して解決策を提示してくれます。
仮環境で確認
仮ドメインで公開して、クライアントに確認してもらいます。 修正があれば、Cursor でサクッと直して即反映。
この「見せる → 直す → 見せる」のサイクルが超速です。
3. 3倍速になる理由
理由 1: ボイラープレートを書かない
毎回書く定型コード（フォームのバリデーション、API ルート、エラーハンドリングなど）を AI に任せることで、創造的な部分に集中できます。
時間削減の例
従来：フォームのバリデーション実装に2時間 AI活用：「Next.js 14 のフォームバリデーション、Zod使って」→ 5分
削減時間：約2時間
理由 2: デバッグが超速
エラーメッセージをそのまま AI に投げると、 原因と解決策を秒で教えてくれます。 Stack Overflow で検索する時間が激減しました。
理由 3: ベストプラクティスを自動適用
AI は最新のベストプラクティスを知っています。 セキュリティ、パフォーマンス、アクセシビリティなど、 自分で調べる手間が省けます。
4. AI に任せない部分
重要：すべてを AI に任せるわけではない
以下は必ず自分で判断します：
- ビジネスロジックの設計 - クライアントの要望を理解するのは人間
- ユーザー体験の設計 - 使いやすさは感覚が必要
- セキュリティの最終チェック - AI の提案を鵜呑みにしない
- パフォーマンスの最適化 - 実測して調整
- コードレビュー - AI が書いたコードも必ず確認
AI は「アシスタント」であって「代替」ではありません。
5. 実際に感じた変化
開発速度
- LP制作：5日 → 2日
- コーポレートサイト：2週間 → 1週間
- 管理画面：1ヶ月 → 2週間
コード品質
AI が書くコードは、意外と品質が高いです。 むしろ自分で書くより、型安全でバグが少ないことも。
精神的な余裕
「どう書けばいいか分からない」というストレスが激減。 詰まったらすぐ AI に聞けるので、開発が楽しくなりました。
💬 AI開発に興味がある方へ
実際に AI を使った開発を体験してみたい方、 導入を検討している方は、お気軽にご相談ください。
具体的な使い方、導入の進め方など、 実例を交えてお話しできます。