こんにちは！
「デザインのセンスがない」「プロトタイプを作るのに Figma を開くのが面倒」——UI を考えるとき、そう感じたことはありませんか。
テキストからUIを生成するツールは珍しくありません。しかし Claude Design は、生成したプロトタイプを Claude Code に引き継ぎ、そのまま実装まで進められる点が大きな特徴です。
この記事では、家計簿アプリの UI プロトタイプを Claude Design で生成 → Claude Code で Flutter 実装するまでの流れを実際に試した体験をご紹介します。
この記事の前提（環境・対象）
- 情報の基準日: 2026年7月23日時点（※プラン条件・利用制限は変更される可能性があります。最新情報は公式ヘルプをご確認ください）
- 利用条件: Pro / Max / Team / Enterprise のいずれか
- Claude Code バージョン: v2.1.185（動作確認時点）
- 実装言語: Flutter
- 対象: Claude Design に興味はあるけどまだ触ったことがない方
Claude Design は現在 Beta です。利用量は Claude のチャット、Claude Code、Cowork と共通の利用枠にカウントされます。
また、Claude Design は Figma のような自由編集型のデザインツールというより、AI に指示を出しながら UI を生成・調整するプロトタイピングツールに近い印象です。Figma や Canva の完全な代替というよりは、補完する位置づけです。
機密情報・生成物の取り扱いについて
Claude Design ではコードベースやデザイン資料を取り込めますが、API キー、パスワード、個人情報、顧客情報、未公開コードなどは、そのまま入力・アップロードしないようにしてください。所属組織の生成 AI 利用ルールも事前に確認しましょう。
データの利用条件はプランによって異なります。Pro / Max ではプライバシー設定によって会話やコーディングセッションがモデル改善に利用される場合があります。Team / Enterprise の入力・出力はデフォルトではモデル学習に利用されませんが、明示的に送信したフィードバックなどは例外です。
Anthropic の案内では、Claude の生成物は利用者が所有します。ただし、これは生成物に必ず著作権が発生することや、第三者の著作権・商標権などを侵害しないことを保証するものではありません。公開・商用利用する場合は、既存の UI、画像、ロゴ、アイコンなどと似ていないかを確認し、プロンプトや修正履歴も残しておくと安心です。
Claude Design を開く
Claude Design には claude.ai の左メニューバーからアクセスできます。claude.ai/design に直接アクセスしても OK です。また、Claude Desktop のサイドバーからも利用できます。
執筆時点では以下のテンプレートが利用できました。
| テンプレート | 用途 |
|---|---|
| Start with a file | ファイルをアップしてデザインに変換 |
| Slides | プレゼン・ピッチデック |
| Product prototype | インタラクティブなアプリモックアップ |
| Product wireframe | Lo-fi のワイヤーフレーム |
| Document | 履歴書・PDF など |
| Animation | モーショングラフィックス |
今回は 「Product prototype」 を選択します。
プロトタイプを作る
要望を送ったら質問が来た
「家計簿アプリの UI プロトタイプ生成して」と送ると、いきなりデザインが生成されるのではなく、Claude から逆質問が来ました。
- どのプラットフォーム向けか
- 主なユーザーは誰か
- 作りたい画面はどれか
- 目指す雰囲気は
- メインカラーの好みは
- インタラクティビティの方針（インタラクティブ or 静的モック）
- バリエーション数（複数案 or 1案で作り込む）
- 通貨・言語
今回の回答はこんな感じです。
| 質問 | 回答 |
|---|---|
| プラットフォーム | スマホアプリ（iOS/Android風） |
| ユーザー | 若い世代（節約志向） |
| 画面 | お任せで一通り |
| 雰囲気 | お任せ |
| カラー | お任せ |
| インタラクティビティ | 見た目重視の静的モックでOK |
| バリエーション | 1案でしっかり作り込む |
| 通貨・言語 | 日本円・日本語 |
曖昧な要望でも自動で整理してくれるので、デザインの経験がなくても迷わず進められます。回答後に「Continue」を押すとデザイン生成が始まります。
デザインが完成！
約1〜2分待つと、5画面のプロトタイプが完成しました。1回の生成でほぼ理想に近い UI が出てきたのは正直驚きました。
自動で決まったデザインシステムはこんな感じです。
- フォント: Zen Kaku Gothic New（本文）+ Space Grotesk（金額）
- 配色: クリーム地（#F7F4EE）／インク（#211F1B）、アクセントにグリーン
- 画面: ホーム / 支出入力 / 履歴 / 分析 / 予算 の5画面
ツールバーで調整する
生成後は画面上部のツールバーで細かく調整できます。
| ボタン | できること |
|---|---|
| Mark up | キャンバス上に注釈を書き込み、デザインに対するフィードバックを追加 |
| Comments | 特定の要素にコメントを付けてピンポイントで修正依頼 |
| Edit | テキストやスタイルなどを直接編集 |
| + Tweaks | Claude が生成したスライダーやトグルでデザインを調整 |
| Present | プロトタイプをプレビュー |
| Share | プロジェクトを共有し、閲覧・コメント・編集権限を設定 |
| Export | ZIP・PDF・PPTX・HTML などへの書き出しや、Claude Code への引き継ぎ |
いくつか画面イメージを紹介します。
Edit
+ Tweaks（このデザインでは accentTheme・surfaceMood・heroStyle の3項目が自動生成されていました）
Claude Code で Flutter 実装する
事前準備：MCP サーバーを追加して認証
Claude Code から Claude Design に接続する場合、公式手順では最初に Claude Design の MCP サーバーを追加します。
claude mcp add --scope user --transport http claude-design https://api.anthropic.com/v1/design/mcp
追加後、Claude Code を起動して /design-login を実行します。
/design-login
既存のコードベースにあるデザインシステムを Claude Design と同期したい場合は、Claude Code の /design-sync も利用できます。
本記事では Claude Code v2.1.185 で動作を確認しました。コマンドが利用できない場合は claude --version でバージョンを確認し、必要に応じて claude update を実行してください。
Claude Design から Claude Code に送る
現在は、画面右上の Export から Handoff to Claude Code を選択します。引き継ぎ先として、ローカルの Claude Code に送る Send to local coding agent と、ブラウザ版に送る Send to Claude Code Web が用意されています。
本記事の動作確認時点では、Share →「Send to...」→ Claude Code →「Copy prompt」という流れでした。以下のスクリーンショットは当時の画面です。
共有リンクやプロジェクト URL は公開範囲に注意してください
実装完了
約15分で Flutter アプリとして実装が完了しました。
Claude Code が生成したファイル構成はこんな感じです。
lib/
main.dart # アプリエントリ・ボトムナビ
app_colors.dart # カラー定数・カテゴリ定義
screens/
home_screen.dart
history_screen.dart
analytics_screen.dart
budget_screen.dart
widgets/
add_expense_sheet.dart # 支出入力モーダル
category_icon.dart
transaction_tile.dart
確認済みの画面と実装状態は以下の通りです。
| 画面 | 状態 |
|---|---|
| ホーム | ✅ グリーンヒーローカード・カテゴリ・最近の取引 |
| 履歴 | ✅ 月ナビ・フィルターチップ・日付グループ |
| 予算 | ✅ 全体予算ダークカード・カテゴリ別進捗バー・警告表示 |
| 分析 | ✅ ドーナツチャート・凡例・推移バーチャート |
| 支出入力 | ✅ カテゴリ選択・電卓UI・保存ボタン |
生成されたアプリを確認
Flutter で動かしてみました。カードの余白や情報量のバランスがよく、実際の家計簿アプリとしても違和感のない仕上がりです。
ホーム画面: 今月使えるお金・収入・支出のサマリー、よく使うカテゴリ、最近の取引が一目でわかるレイアウト。
履歴画面: 日付別のリストにカテゴリフィルター付き。日毎の支出がわかりやすいデザインに仕上がっている。
分析画面: カテゴリ別の割合・金額一覧付きで家計簿アプリとして成立した仕上がり。月 / 週 / 年で切り替えられる。
予算画面: カテゴリ別の予算進捗バー。娯楽が予算オーバー間近で警告が出ているなど、細かい状態表現まで作られている。
Claude Design のデザインをかなり正確に再現してくれました。画面構成やスタイルの大部分はそのまま使えるレベルです。
まとめ・所感
よかった点
- 曖昧な要望でも逆質問で整理してくれるので、デザイン経験がなくてもスムーズに進められる
- Claude Design → Claude Code の連携が非常に簡単
- 約15分でFlutterアプリの雛形ができあがるのは純粋にすごい
注意点
- 現在は Beta。利用量はチャット・Claude Code・Cowork と共通の利用枠にカウントされる
- Claude Code から接続する場合は、MCP サーバーの追加と
/design-loginによる認証が必要 - 生成された Claude Code へのプロンプトには URL が含まれるため公開に注意
こんな方におすすめ
- UI のプロトタイプをサクッと作りたいエンジニア
- デザインツールを使ったことがないが、アイデアを見える形にしたい方
- Claude Code ユーザーでデザイン → 実装の流れをシームレスにしたい方
個人的には「ゼロから UI を考える時間」を大幅に削減できる点が最も魅力でした。特に個人開発や PoC の段階では、Figma で作り込む前に Claude Design で方向性を固めるという使い方がかなり有効だと感じています。
まずは claude.ai/design を開いて、1つプロトタイプを作ってみるところから始めてみてください。