導入：Cursor + Claudeでプロダクトの「魂」を設計する

🌟 Cursor + Claudeを活用した高速アプリ開発ワークフロー

基本的な考え方

完璧を目指すのではなく、「作る → 見る → 直す」を素早く繰り返す開発スタイルです。 Cursor + Claudeに実装を任せて、あなたは「何を作りたいか」を考えることに集中しましょう。

コードを書くのはClaudeに任せられても、「何を作り、誰に届けるか」を決めるのはビルダーであるあなたにしかできない仕事です。このセクションは、そのための章です。

📁 Step 0: プロジェクトの準備

やること：

1. Flutterプロジェクトを作成：

flutter create my_app
cd my_app

2. Cursorでプロジェクトを開く：

cursor .

3. CursorでClaude Opus 4.5をメインモデルに設定

（CursorのAIモデル設定から選択。簡易タスクにはSonnet 4.5も活用）

🎨 Step 1: デザインの方向性を決める

1-A. サンプルデータや画面のサンプルを用意する

例：カフェ検索アプリなら

{
  "name": "Blue Mountain Coffee",
  "rating": 4.5,
  "address": "東京都渋谷区..."
}

1-B. Cursorでデザインコンセプトを相談する

Cursorのチャット機能で以下をリクエスト：

あなたは優秀なUI/UXデザイナーです。

「カフェ検索アプリ」を作る予定です。
このアプリは、地図と連動してお気に入りのカフェを探し、レビューを読めるシンプルなアプリです。

このアプリのデザインコンセプトについて、次の観点から3つ提案してください：
- ユーザーに与える感情（例：安心感、ワクワク、洗練された印象）
- それに合った配色・フォント・UIスタイル
- それぞれにキャッチコピーも添えてください。

1-C. Cursorでデザインをコードに変換する

Cursorで以下をリクエスト：

以下のデザインコンセプトに基づいて、Flutterのテーマ設定コードを作成してください。

- 落ち着いた雰囲気
- アースカラー中心（茶色・緑）
- フォントはシステムフォント
- アイコンはシンプル

lib/theme/app_theme.dartファイルを作成して、
MaterialAppで使えるthemeプロパティを実装してください。

→ Cursorが自動でファイルを作成して、main.dartへの組み込み方も教えてくれます。

⚡ Step 2: 機能を1つずつ作る

実例：商品リスト画面を作る

2-A. 機能のゴールを決める

「アプリを開いたら商品リストが表示される」

2-B. CursorでUI＋機能の実装を依頼する

Cursorで以下をリクエスト：

Flutterで、以下の要件を満たす商品リスト画面を作ってください：

- 商品名、価格、画像を表示
- 検索ボックス付き
- StatefulWidgetで状態管理
- レスポンシブ対応（スマホでも見やすく）

必要なファイル（home_screen.dart, product_model.dartなど）を作成してください。

2-C. 気に入らない部分を修正依頼

🛠️ プロンプト例：

さきほどの画面デザインについて、次のように修正してください：

- 商品カードの余白をもう少し広く
- 商品名の文字サイズを大きく（16 → 20）
- ボタンの色を緑に変更

必要な部分だけコードを出力してください。

→ 修正コードを上書きして flutter run で確認

🔄 Step 3: 次の機能を追加する

機能追加の例とプロンプト

✅ お気に入り機能の追加

「お気に入り」ボタンをリストアイテムに追加し、タップでお気に入り状態を切り替えられるようにしてください。
StatefulWidgetで状態管理してください。

✅ 商品詳細ページの追加

リストアイテムをタップすると、詳細画面に遷移して以下を表示できるようにしてください：

- 商品画像（大きめ）
- 名前・価格・説明文
- 「戻る」ボタン

詳細画面とナビゲーションのコードを含めてください。

✅ 設定画面の追加

設定画面（SettingsPage）を作ってください。
内容は以下です：
- 通知オン/オフ（スイッチ）
- テーマの切り替え（ライト/ダーク）
- バージョン情報表示

ドロワーメニューから遷移できるようにしてください。

📌 成功のコツ

やるべきこと

• 🎯 小さな機能から始める
• 🔄 こまめに動作確認
• 💬 AIへの指示は「やってほしいこと＋どんな見た目にしたいか」を具体的に伝える

やらなくていいこと

• ❌ コードを完全に理解する
• ❌ 最初から完璧を目指す
• ❌ 全体設計を先に固める

📆 実践例：タイマーアプリを作るなら（Cursor + Claude使用）

Cursor + Claudeを使えば、基本的なアプリは2〜3時間で完成します！

従来なら数日かかっていた作業が、AIの進化により、数時間で実現できる時代になりました。

とはいえ、実際に自分の力で、スムーズに、そして価値のある成果物を生み出すレベルで使いこなすには、一朝一夕にはいかない、地道な「練習」が必要です。

「良い指示（プロンプト）」を出すための練習から始めましょう AIに何を、どのように頼めば、自分の意図通りのアウトプットが出てくるのか。 これは、試行錯誤を通じてしか学べません。

「なぜAIはこのコードを出してきたんだろう？」 「もっと良い結果を引き出すには、どう質問を変えればいいか？」 — こうした問いを持ちながら、AIの思考を推測し、対話の質を高めていく訓練が求められます。

成功よりもむしろ、「うまくいかなかった構造」を振り返ることで理解が深まるのです。

✅ 結論

Cursor + Claudeは、学習と開発の「速度」を劇的に加速させてくれます。

かつて1年かかっていたことが、今は1〜2ヶ月で到達できるかもしれません。 数日かかっていたアプリが、今は数時間で完成します。

しかし、AIは学習そのものを「不要」にしてくれるわけではありません。

やるべきことは変わらない。ただし、学ぶスピードと開発スピードがまるで違う。

それが「Cursor + Claudeと共に歩む開発者」の新しい学習スタイルであり、開発スタイルなのです。