Claude Designとは
2026年7月20日時点ではClaude Designはベータ版であり、機能や利用条件が変更される可能性があります。
ClaudeのAnthropicが2026年4月にClaude Designを公開。名前からは画像生成AIが想像されるが単純に一枚の画像を生成するサービスではなく、Webページ、アプリ画面、プレゼン資料、操作可能なプロトタイプなどを、Claudeとの会話を通して組み立てるためのデザイン環境…らしい。ちょっと前にCoworkのウェビナーに参加するためClaudeを契約したので、この機会にDesignのほうもちょっと試してみる。
この記事ではClaude Designの基本的なユースケースを紹介し、ChatGPT Images等の画像生成サービスや、Lovartなど他社画像系エージェントとの違いを見ていく。
基本知識
Claude Designは、Anthropicの「Anthropic Labs」から公開されたAIデザインツール。公開は2026年4月17日、Claude Pro以降の課金ユーザー向けに提供されている。現在はベータ版で、Web版とデスクトップ版のClaudeから利用できる。（※現在は英語版のみの提供なので、ブラウザの翻訳機能が使えるWeb版がオススメ）
基本画面は左側のチャットと右側のキャンバスに分割されている。
左側で作りたいものを自然言語でClaudeに伝えると右側にデザインが生成される。会話を続けることでレイアウトや色、文章、ボタン、操作内容などが修正可能。
会話と直接編集を往復しながら完成させていくエージェンティックな使い方が可能。
Claude Designの得意分野
Claude Designの得意分野は以下のような構造を持ったビジュアルとのこと。
- Webページ
- アプリの画面
- ダッシュボード
- プレゼン資料
- 企画書
- インタラクティブなUI
見ての通り10数種類のテンプレートが存在する。GPTimageなどの一枚絵を描くAIとの違いは画面や資料を組み立てるAIであること。テキスト、ボタン、グラフといった複数の要素からできている点が大きな違い。
ユースケースとデザインのアプローチ
1. 自然言語で1からWebサイト案を作る
自然言語で要件を伝えるだけでWebサイトのデザインを作成できる。例によってKaniKaigiのサイトを作らせてみる。
開催予定のITイベントのランディングページを作ってください。
必要な要素：
- イベント名 ”KaniKaigi 2027”
- キャッチコピー ”カニを味わい、コードを語る”
- イベント概要 ”越前ガニの季節にソフトウェア開発・ITにおける各分野で最前線で活躍するエキスパートを全国から北陸へ招待し、技術の旬を持ち寄り、講義・ディスカッションを行う勉強会です。 ”
- タイムテーブル（Schedule） 未定。トラック別・時間別のセッション一覧（タブ切り替え）
- スピーカー一覧（Speakers） 未定。登壇者の顔写真、名前、所属、セッションタイトル（クリックで詳細モーダル）
- スポンサー（Sponsors） 未定。グレード別スポンサーロゴ一覧（プラチナ / ゴールド / シルバー）
- 会場アクセス・参加案内（Venue / Access）未定。
- フッター（Footer）未定。FAQ、運営問い合わせ、SNSリンク
未定の部分は仮のものを置いてください。
対象は個人・会社所属を問わないエンジニア全般です。
PCとスマートフォンの両方に対応してください。
以下のような感じでテイストを聞いてくる。青枠が自身で選択した部分である。
第一稿は以下。
これで5時間リミットの12％くらいの消費。リリース当初よりかなりコスパが良くなったとの話だが、全体のテイストを大幅に変える可能性がある場合はまずトップページのみ作成してもらい、テイストが固まってから他の部分も生成してもらうのが効率的かもしれない。
修正
全体を白系基調のカラーリングにしてください。
自然言語で微調整が可能。結果は以下。
カラーリングのは5時間リミットのうち3%の消費。
開催日が隠れているので、表示領域を長めにしたい。画面右上の編集アイコンをクリックすると直接修正が可能。
左画面にWebページの構造が出るのでこれらをいじれば調整可能でトークンも消費しない…のだが、僕のような素人にはちょっと難しかった。手動による微調整はWebが分かってる人向けかもしれない。
右上の「コメント」で変更したい要素をクリックして修正指示もできる。
開催日の枠を長くして、全体を二段にしてもらった。5時間リミットの2%を消費。
出力
右上のshareをクリックすると作成した成果物を様々な形式で書き出せる。
- ZIP
- PPTX
- 単体で動くHTML
- Canva
- Claude Code
このほかAdobeなどの外部サービスへ送るための機能も案内されている。閲覧、コメント、編集といった権限を付けて組織内にリンク共有できる。用途に応じて資料、Webページ、コードへ変換できることがClaudeDesignの強みと言える。
以上のように、素人でも対象や雰囲気を伝えればそれらしい初稿を作ってもらえる。足りないところは聞いてくる。
2. 既存の画像や資料を参考にして名刺を作る
Claude Designには画像や文書、表計算ファイルなどを渡せる。また、既存のWebサイトから要素を取り込んだり、コードを参照させたりもできるらしい。Anthropicの発表では、DOCX、PPTX、XLSX、画像、コードなどからプロジェクトを開始できると説明されている。
既存品を渡してそのテイストで作らせることもできる。今回はチャッピーに描かせた架空の名刺を読み込ませて自分の名刺を作ってみる。
添付した名刺の雰囲気を参考にして私の名刺をデザインして下さい。
色や文字の大きさは近いものにしつつ、情報を以下のように変更してください。
名前：Shohei Minai
職業：AI Engineer
メール：shominai2024@gmail.com
ウェブ：https://x.com/shominai2024
住所：Ishikawa.Japan
結果は以下の通り。
ラスター画像を生成することはできないようで頑張ってベクターで（？）模様っぽいものを描いてくれている。参考資料は色や余白、雰囲気などを伝える材料として使うのがよさそう。
先ほどのWebページの様に編集や、そのままPDFとして出力も可能。
消費量は5時間リミットの2%。
3. デザインシステムを利用してダッシュボードを作る
Claude Designの特徴的な機能にデザインシステムの利用がある。デザインシステムとは、企業などで共通して使用する色やフォント、余白、画面構成などのルールをまとめたもの。
Claude Designは既存のコードやスライド、ブランド資料や配色資料などを読み取り、デザインシステムを生成することができる。一度作ったデザインシステムはもちろん再利用可能。毎回同じことを説明し直さなくても、組織内で共通のルールに合わせたデザインを作れるということである。
左下の「設計システム」→中央の「デザインシステムの作成」
デザインシステムをすでに持っている場合はGitHubのリンクコードやFigmaで使われるfigファイルなどをここで指定できる。それらがない場合は一番下の枠にプロンプトとして入力することになる。
そしてここに入れるデザインのテンプレートを配布しているサイトがある。
getdesign.md
DELLやHP、アップル、任天堂などの企業のデザインのカラーリングやフォントなどをマークダウンファイルで獲得できる。
これを一番下のプロンプトに張り付ける。プロンプトは自然言語でOK。
添付したブランド資料や既存デザインを参考に、再利用可能なデザインシステムを作成してください。
以下を整理してください。
* カラーパレット
* フォントと文字サイズ
* 余白とレイアウト
* ボタン、カード、入力欄などのUI部品
* アイコンや画像の使用ルール
* デザイン全体の基本方針
Webサイトとアプリの両方で使いやすく、統一感のある構成にしてください。
＜ここにDESIGN.mdを貼り付け＞
今回は任天堂風のデザインシステムを用いて、架空のゲーム運営のダッシュボードを作ってみる。プロンプトは以下の通り。
ゲーム運営チーム向けの「ゲームバランス分析ダッシュボード」を作成してください。
対戦型オンラインゲームを想定し、キャラクター、武器、スキル、マップのバランス状況を分析できる内容にしてください。
雰囲気は、シンプルで業務的、見やすく整理された管理画面にしてください。
白や薄いグレーをベースにし、アクセントは青系で、実務向けの落ち着いたUIにしてください。
以下の要素を含めてください。
- 左側のサイドメニュー
- 上部のページタイトルと期間フィルター
- KPIカード
- 使用率ランキング
- 勝率ランキング
- 使用率と勝率の相関
- パッチ前後の勝率変化
- ランク帯別の勝率比較
- マップごとの勝率比較
- キャラクター一覧テーブル
フィルターは、期間、ゲームモード、ランク帯、地域、キャラクター、武器、マップを用意してください。
キャラクター一覧テーブルには以下を含めてください。
- キャラクター名
- 使用率
- 勝率
- 平均与ダメージ
- 平均キル数
- 平均デス数
- 直近パッチでの変化
- 調整優先度
また、「要注意キャラクター」「勝率が高すぎるキャラクター」「パッチ後に急上昇した武器やスキル」などを表示する注目エリアも入れてください。
データは架空でよいですが、実際のゲーム運営で使われそうな自然な内容にしてください。
必要なら「全体概要」「キャラクター分析」「武器分析」「マップ分析」のタブ構成にしてください。
結果は以下。
これが任天堂っぽいかはさておきカラーリング等は指定した通りになっているように見える。消費は5時間リミットの11％ほど。
Claude Codeに渡して実装へ
ClaudeDesignで作成した画面はClaudeCodeへ引き渡すことが可能。デザインの構造や意図を含んだ形で渡すことができる。ClaudeCode側から/design-syncを使ってデザインシステムを取り込む方法や、ClaudeDesign用のMCPサーバーへ接続する方法も用意されている。
アイデア
↓
ClaudeDesignで画面を作ってみる
↓
チーム内で確認・修正
↓
Claude Codeへ引き渡す
↓
実際のコードへ組み込む
デザイン作成だけで終わらずに開発まで同社サービスで繋げられるのが便利。
他社のAI画像・デザインサービスとの違い
Claude Designと他社の画像系AIサービスを比較してみる。GPTimage、Mixboard、Lovart等は過去記事参照。
| サービス | 主な成果物 | 得意な用途 | Claude Designとの大きな違い |
|---|---|---|---|
| Claude Design | UI、Webページ、資料、操作可能なプロトタイプ | 企画、画面設計、資料作成、実装への引き渡し | 構造や操作を持つ成果物を作る |
| GPT ImageやNano banana | 写真、イラスト、ポスター、画像加工 | 一枚絵、広告画像、説明画像 | 画像そのものの生成・編集が中心 |
| Adobe Firefly | 画像、動画、音声、ベクター | クリエイティブ素材の制作と加工 | PhotoshopなどAdobe製品での仕上げ |
| Mixboard | ムードボード、コンセプト案、プレゼン資料 | アイデア出し、方向性の検討、参考画像の整理 | 完成品の設計より、初期段階の視覚的なアイデア出し |
| Lovart | ブランド素材、広告画像、動画、3D、キャンペーン一式 | ブランド制作、広告、商品ビジュアル | 複数種類のクリエイティブ素材をまとめて生成する |
ラスター画像は作れず、構造を持ったデザインが専門。
どのような人向けか
個人開発者
デザイン担当がいなくてもアプリやWebサービスの画面案を作れる。そのまま完成品として使うのは難しいが、一からCSSを書くよりは時短できる。
プロダクトマネージャーや企画担当者
文章の企画書では伝えにくい機能を操作可能な画面として共有できる。相手の想像力に頼らず、実際に触って確認してもらえるのは強み。
エンジニア
コードベースの画面案を作ってClaudeCodeへ引き渡せる。デザインと実装の間に発生する翻訳作業を減らせる。
デザイナー
完成案を一発で作らせるというよりは方向性の模索を大量に短時間で試せる。色やレイアウト、画面構成の候補を広く出し、その中から良いものを選んで人間が仕上げる使い方ができる。
マーケティングや営業担当者
ランディングページ、営業資料、キャンペーン用素材などをブランドルールに合わせて作成できる。それぞれを別々のサービスで作らなくてもよくなる。
まとめ
ClaudeDesignは写真やイラストを一枚生成することが目的ではなく、Webページ、アプリ画面などの構造を持ったデザインを作って共有や実装へつなげるサービスと言える。
トークンの消費はまあまあ激しめ。しかしこれも3ヵ月前よりはかなり改善されているようだ。まだベータ版なので正式リリース時にはさらに改善されることを期待したい。
一枚画像よりこの手の構造デザインを作る事が多い人であれば、3強AIの中でClaudeを選ぶ決め手になりうるサービスかもしれない。