AIデザインツール「Claude Design」を実案件で試してみた ── ワイヤーフレームから仕様ドキュメントまで自動生成

はじめに

こんにちは。and factory フロントエンドエンジニアの坂内です。

ワイヤーフレームを作るとなればFigmaが候補に挙がりますが、普段はデザイン確認専用に使っていました。いざ自分で作るとなると使い方を調べながら進める必要があり、「もっと手軽に作れないか」と思っていました。ちょうど機能追加でディレクターへ共有するためのモックが必要になったタイミングで、AnthropicのAIデザインツール「Claude Design」を見つけ、試してみました。

あくまでワイヤーやモック用途での活用として、「ディレクターやデザイナーと連携するフロントエンドエンジニアにとって、どう使えるか」という観点で使いみちを探りました。

注意： Claude Designはリサーチプレビュー段階のツールです。UIや機能仕様は今後変更される可能性があります。本記事の内容は2026年6月時点の情報に基づいており、最新の状況と異なる場合があります。

結論

先に持ち帰ってほしいポイントを3つに絞ります。

• スクリーンショット＋テキスト指示だけでデザイントーンに合ったワイヤーが生成できる（既存画面のピンク×サイドバー構成を再現）
• バリデーション・APIペイロードまで自発的に実装してくれるため、エンジニアへの引き継ぎ資料が副産物として得られる
• 「Claudeチャットで仕様を固めてからDesignに渡す」2段階フローが現実的。Claude Designは細かい修正の往復には向かない

Claude Designとは

Claude Designは2026年4月17日にAnthropicがリリースしたAIデザインツールです（Anthropic Labs製・リサーチプレビュー）。

claude.ai 内の専用ワークスペースとして動作し、左ペインのチャットで指示すると、右ペインのライブキャンバスへリアルタイムに反映される2画面構成が特徴です。なお、これは今回試したUIに基づく観察です。公式発表ではインラインコメント・直接編集・調整ノブなどのインタラクションが紹介されています。

アクセス方法

claude.ai にログイン後、左サイドバーの「Design」から起動できます。Pro / Max / Team / Enterpriseプランが対象です。

Notionコネクタを使う場合は事前設定が必要です。Settings → IntegrationsからNotionを接続しておくと、Design内でNotionのURLをそのまま渡して仕様ページを直接読み込めます。

実践：管理画面のワイヤーを作る

概要が掴めたところで、実際に試した内容を紹介します。

最初に渡したプロンプト

今回は自社サービスの管理画面に「施策管理ページ」を追加する想定でワイヤーを作成しました。最初のプロンプトはシンプルにしました。

1
2
3
4
5
6
7

XXXXXという管理画面の施策管理ページを作りたい。
- PC向け管理画面
- ピンク（#E91E8C）のヘッダー＋左サイドバー構成
- 施策一覧テーブル（ID・施策名・開始日・終了日・URL・ステータス）
- 詳細ボタン → モーダルで編集
- モーダル内はアコーディオンで項目を折りたたむ
- ステータスは「下書き / 公開 / 非公開」の3種

これだけでClaude Designから10問のヒアリングが返ってきて、設計が始まりました。

インプットとして渡したもの

1. Notionの仕様ページ（管理画面UIワイヤー案）→ Claudeチャット経由で要約してからDesignに渡した
2. 既存管理画面のスクリーンショット（ピンク×サイドバー構成）→ デザイントーンの参照に使用
3. ヒアリング10問への回答 → Claude Design側からの設計前の質問に回答した

今回はNotionの仕様を一度Claudeチャットで要約してからDesignに渡しました。しかし作業後に、NotionコネクタをDesignに接続しておけばURLを渡すだけで直接読み込めると分かりました。最初から連携しておけば、コピペのひと手間を省けました。

Notionとの連携方法の違い

後からDesignで直接読み込めることに気づいたので、次回からはコネクタを先に設定する方が効率的です。

生成された一覧画面

Claude Designが既存の管理画面デザイン（ピンクヘッダー・左サイドバー）に合わせた形で一覧画面を生成しました。

自動で実装された要素：

• ピンク（#E91E8C）ヘッダー + 左サイドバー（11メニュー）
• 施策一覧テーブル（ID・施策名・公開開始日時・公開終了日時・遷移先URL・ステータスの6列）
• ステータスバッジ（公開=緑 / 下書き=グレー / 非公開=赤）
• 施策名テキスト検索 + ステータスセグメントフィルタ
• ページネーション（Rows per page切替・件数表示）

生成された詳細編集モーダル

詳細ボタンクリックで開く大型モーダルでは、指示していない要素までClaude Designが自発的に実装しました。

自動で実装された要素：

• 共通項目（施策名・ステータス・公開期間・URL）
• 5つのアコーディオン（メニュー/表示制御・ポイント付与・プレキャン・無料鑑定・運用メモ）
• バリデーション全網羅（必須・形式・期間整合・数値範囲・文字数 / blur時＋保存時）
• エラー時にアコーディオンが自動展開して該当箇所を表示
• APIペイロードプレビューパネル（POST /api/admin/campaigns/{id} + 整形JSON + コピーボタン）

APIペイロードの例はこのような形で生成されました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{
  "id": 101,
  "name": "サンプル施策A・春のキャンペーン",
  "status": "公開",
  "publishStart": "2026/03/01 00:00",
  "publishEnd": "2026/05/31 23:59",
  "redirectUrl": "/sample/campaign/a-001",
  "point": { "amount": 200, "condition": "purchase" },
  "preAnnouncement": { "enabled": true, "startAt": "2026/02/15 12:00" },
  "freeReading": { "enabled": true }
}

エンジニアへの引き継ぎ時に「このペイロード構造でAPIを作って」と渡せる状態になっているのが実用的でした。

通常Claudeチャットとの使い分け

2つを使い比べてみて、使い分けの感覚が掴めてきました。

実務フローへの組み込み方

今回の実践から見えてきた、現実的な使い方はこのフローです。

1
2
3
4
5
6
7

① Claudeチャット（Notion連携）
   └ 仕様のすり合わせ・細かい修正の反映・ディレクターとの合意取り
          ↓ 仕様が固まったら
② Claude Design
   └ 本格的な実装・ドキュメント自動生成・HTML書き出し
          ↓ 成果物をそのまま
③ Figmaで清書 または エンジニアへ直接渡す

ポイントは、Claudeチャットで先に仕様を固めてからDesignに渡すことです。今回この流れで進めたことで、Claude Design側の10問ヒアリングにすぐ答えられ、最初の生成からほぼ意図通りのアウトプットが得られました。

共有方法の選択肢

Claude Designでは以下の方法で生成物を共有できます。

良かった点・課題

良かった点

• 既存スクリーンショットを渡すだけでデザイントーンをほぼ合わせてくれた
• バリデーションやAPIペイロードまで「言えばやってくれる」のが想定以上
• ドキュメントが自動生成される（意思決定ログ・次のステップ付き）ので、エンジニアへの引き継ぎ資料がほぼできあがる
• HTMLとして書き出せるので、Slackで共有してブラウザで動かして確認してもらえる
• ディレクター・デザイナーへの共有の反応がとても良かった。モック形式なのでボタンやフィルターの動きも見せられ、実装イメージを掴んでもらいやすかった
• 約3回のやり取りで完成しました。①要件の提示 → ②Claude Designからの質問への回答 → ③実際に触ってみて気になった点の微調整、という流れでラリーが長引かず、満足度の高い体験でした

課題・注意点

• Notionコネクタの事前設定が必要（接続済みであれば直接読み込み可。今回は当初知らずにClaudeチャット経由で対処したが、設定すれば解消できた）
• Claude Opus 4.7使用でトークン消費が多め（今回1プロジェクトで専用枠の約39%を消費）
• 通常チャットより1回あたりの生成に時間がかかるため、細かい修正の往復はやや重い
• 生成コードはレビュー必須（本番投入レベルではない）
• 簡易的なワイヤーや仕様確認レベルであれば、通常Claudeチャットで十分なケースもある

おわりに

Claude Designは「動くワイヤーをすぐ作って関係者に共有する」という用途でとても実用的なツールでした。特にAPIペイロードまで自動生成してくれる点は、フロントエンドとバックエンドの連携を早める可能性があります。

一方でトークン消費や重さを考えると、すべての場面で使うのではなく、仕様が固まったタイミングで使うツールという位置づけが適切です。

次はStitchも試してみる予定です。最終的なツール比較は別途まとめますが、引き続き実践しながら使い分けを整理していきます。

参考リンク

• Claude Design公式発表（Anthropic）
• Claude Design（claude.ai）
• TechCrunch：Anthropic launches Claude Design