AIと会話するだけでセンスのいいデザインができる「Claude Design」

• 

  Claude Designがあれば誰でもデザイン性の高いクリエイティブができます

AnthropicがLabsから送り出す新コンセプト

Claude Designを一言でいえば「コードを書くためのClaude」ではなく、「見せるものを作るためのClaude」です。Claude Codeは、コードベースを読み取り、複数ファイルを編集し、コマンドを実行しながら開発を進めるツールです。

一方のClaude Designは、その発想をデザイン側に広げたもの。ウェブサイトのモックやスライド、ワンページャー、各種ビジュアルといった成果物を、会話しながら形にすることができます。Anthropic自身もClaude DesignをAnthropic Labs発の新製品として位置づけており、Claudeの先端的な能力を新しい体験に落とし込む実験の1つとしています。

Anthropicの説明では、プロのデザイナーが探索の幅を広げる用途に加え、アイデアはあるのにデザインの訓練を受けていない人でも、まず形にして共有できることが狙いだと述べています。Claude Codeが「自然言語で開発作業を進める入口」だとすれば、Claude Designは「自然言語でデザイン作業を始める入口」と考えるとわかりやすいでしょう。バイブ・コーディングならぬ、バイブ・デザインが体験できるというわけです。

• 

  4月17日、デザインAI機能「Claude Design」がリリースされました

その土台になっているAIは、その前日に発表された最新AIモデルの「Claude Opus 4.7」です。Anthropicによれば、Opus 4.7はコーディングや複雑な長時間タスクだけでなく、視覚理解も強化されており、高解像度の画像をより正確に扱えるようになりました。

Claude Designは、この視覚性能を使ってレイアウトや画像、文字組みを含む「見た目の仕事」を会話ベースで進めることができます。文章を返して終わるのではなく、完成イメージに近いかたちで成果物を出してくるのが、通常のチャットとの大きな違いです。

使い方もシンプルです。テキストで要望を伝えるだけで作れますし、その後も会話で修正を重ねられます。さらに、特定の要素にコメントを付けたり、文字を直接直す、余白や色、レイアウトを細かく調整するといった操作にも対応しています。文章の指示だけでなく、画像やDOCX、PPTX、XLSX、自社サイトのキャプチャ、コードベースなどを取り込めます。

つまりClaude Designは、ただ画像を作るためのAIではなく、資料作成やデザイン検討、プロトタイピングまでを対話ベースでまとめて進められる制作環境だと考えるとわかりやすいでしょう。

スライド作成は「整った初稿+PPTX書き出し」が効く

早速、Claude Designを使ってみましょう。まずはスライドを作成します。Claudeのメニューから「Design」をクリックすると、画面が切り替わります。右ペインに表示されるのではなく、全画面がClaude Designになります。

• 

  Claude Designのメイン画面です

左側の領域には、「Prototype」「Slide deck」「From Template」「Other」タブがあります。Prototype(プロトタイプ)では、WebサイトやUIのワイヤーフレーム・モックアップを生成できます。

Slide deck(スライドデッキ)はプレゼン用のスライドをテキストベースで作成できます。From Template(テンプレートから)では、Claudeが作成したテンプレートや、以前作成したデザインを流用して新しいプロジェクトを作成できます。Other(その他のプロジェクト)は、「Prototype」でも「Slide deck」でもない、汎用的なデザインプロジェクト用の空のモードとなります。

まずは「Slide deck」タブを開き、スライドタイトルを入力します。ここでは、「黒柴犬の魅力」というスライドを作ってみます。作成のためのチャットが開きますが、まずは「デザインシステム」を選択します。自分で作ったものでもいいですし、用意されたスキルを選択してもOKです。今回は「Export as PPTX(editable)」で、PowerPointに持っていけるようにしました。

• 

  今回は用意されていた「Export as PPTX(editable)」を利用します

チャットUIが開いたら、用意しておいたテキスト構成案を貼り付けます。今回は、6枚構成にしました。すると、右側に、いくつか質問が表示されます。発表時間やトーンなどを選択肢からクリックするだけでOKです。スピーカーノートがない場合は、作成してもらうこともできます。判断が面倒であれば「Decide for me」でAIに任せられます。

• 

  プロンプトを入力し、質問に回答します

すると、作業が開始され、ゴリゴリとデザインを進めてくれます。当初は写真を入れていませんでしたが、後からドラッグ&ドロップすると自動ではめ込んでくれました。一部の写真の縦横比がプレースホルダーに合わせて変わってしまったのですが、そんな時も日本語で修正指示を出すだけで対応してくれます。

• 

  しばらく待つとデザインされたスライドが表示されました

「TWEAKS」パネルで、ダーク/ライトモードを切り替えたり、アクセントカラーを切り替えて確認できます。問題なければ「Share」ボタンから出力できます。ここでは「Export as PPTX」で出力しました。もちろん、PowerPointで編集を続行することができ、写真を差し替えたりできます。

Claude Designに作らせて、最後の調整は人間がPowerPointで仕上げる、というフローはとても効率的。社内テンプレートが事前にデザインシステムとして登録されていれば、フォントやコーポレートカラーが勝手に外れることもなく、いきなり提案資料として通用する水準のものが返ってきます。

• 

  ダウンロードしたファイルはPowerPointで閲覧・編集できます

PowerPointで修正せずに、せっかくなのだからClaude Designで会話しながら完成させればいいのでは、と思った方もいるでしょう。筆者も最初はそう思っていろいろと注文を付けました。

Claude Designは、チャットとは別の利用枠が用意されており、すごい勢いで消費されていきました。デザインを再考するため、それまでの会話を引き継いで対応しているからです。今回も途中で制限にかかってしまいました。チャットであれば5時間で制限が解除されますが、なんとClaude Designの利用枠がリセットされる間隔は7日間でした。

仕方がないので、追加使用量(クレジット)を購入して制限を解除し、作業を続行しています。しかし、それでも今回の3デザインを終えるころ、追加の20ドルも消費してしまいました。

そこでおすすめなのが、あまり細かい内容を詰めたり、文字修正などをせず、Claude Designではデザインを作ることだけに集中することです。いい感じの成果物ができたら、そのあとは別のツールで細かい部分を詰めるようにすると、利用枠を効率的に活用できます。

• 

  Claude Designの利用枠は限られているので、効率的に活用しましょう

ポスター作成はCanva連携で店内掲出まで一直線

次は、ポスター作成にチャレンジしてみましょう。今回は、デザインシステムやスキルを利用せず、プロンプトで要望を細かく伝えてみます。なるべく具体的に指示したつもりですが、それでもいくつもの質問が返ってきました。回答して「Continue」をクリックするとデザインが始まります。

• プロンプト
  

  バーの店内に貼る、A4サイズの「今週のウイスキー」ポスターを作ってください。お店のスタッフがおすすめしている、Staff Pickの一枚です。明るくポップな感じではなく、むしろ少し渋め。紙の質感や、インクがにじんだような手仕事のぬくもりがあると、ぐっときます。ボトルを主役にしっかり見せたくて、銘柄名は店の奥からでも読めるくらい堂々と。蒸溜所や産地、熟成年数など、わかる人がニヤッとする情報も品よく添えたいです。香り・味わい・余韻のようなテイスティングノートを書く場所と、スタッフのひとことコメントを書く場所もほしいです。下のほうには値段と、ボトルかグラスかという提供形態も載せたいです。毎週銘柄を入れ替えるので、写真とテキストを差し替えるだけで使い回せる作りにしてください。「STAFF PICK」と「今週のウイスキー」という見出しは固定で、それ以外が毎週変わるイメージです。
  

• 

  今回は2案を提示してもらいました。「Share」メニューからCanvaに引き渡せます

質問で、サンプル表示するウイスキーを聞かれたので「トゥールビヨン 10年」と答えたところ、ネットを検索して詳細データを調べ、デザインに反映しました。それはよかったのですが、テイスティングコメントが長すぎて、デザインが少し崩れているのはもったいないところでした。

とはいえ、これをClaude Designで直すのは効率が悪いので、この続きは他のツールに渡しましょう。実は、Claude Designは人気のオンライングラフィックツール「Canva」に対応しており、直接送ることもできるのです。週替わりの修正はCanvaで行えるので、この後はClaude Designの利用枠を消費することはありません。

• 

  雰囲気や紙の表現、ボトルの写真の扱いなど、専門的な質問が提示されました

WebサイトはClaude Codeへハンドオフして実装に持ち込む

WebサイトのデザインこそClaude Designの真骨頂と言えます。見た目のモックだけでなく、画面遷移を含むインタラクティブなプロトタイプまで作れます。

ここでは、架空の小説投稿サイトを考えてもらいました。ナビゲーションメニューからダッシュボードまで、一発でそれらしい画面が生成されたのは驚きです。文学を意識したのか、書籍のイメージに仕上がっていました。

• プロンプト
  

  小説投稿サイトの作者用ダッシュボードを設計してください。左側に『作品一覧』『アクセス解析』『設定』を含むサイドバーを配置してください。メインコンテンツには、執筆中の作品をカード型で表示し、各カードには『最新のPV数』『コメント数』『エピソード追加ボタン』を含めてください。上部には『新規作品を作成』という目立つアクションボタンを配置してください。
  

• 

  小説投稿サイトを作成してみました

気に入った設計ができたら、Claude Codeに渡せる「ハンドオフバンドル」がワンクリックで生成され、デザインの意図、コンポーネントの構造、デザインシステム情報をひとまとめにして、開発側がそのまま実装に取りかかれる形に整えてくれます。

「Handoff to Claude Code」をクリックして生成されたコードをClaude Codeに貼り付けるだけで、作業を引き継げるのは手軽です。

• 

  「Handoff to Claude Code」から受け渡し用のコードをコピーできます

このようにWebサイトをゼロから作ることもできるのですが、GitHubのソースコードと連携させることもできます。

自社のウェブサイトのソースコードが保管されている「GitHubリポジトリ」を設定し、AIが「会社が指定しているブランドカラー」や「使っているフォント」「標準的なボタンの形」などのルールを自動で抽出し、デザインシステム化してくれるのです。

そして、ブラッシュアップしたデザインをClaude Codeに引き継ぎ、GitHubにリニューアルしたWebサイトのソースコードをアップロードできます。デザインやコーディングの知識のない筆者でも、既存のウェブサイトをお洒落なデザインに修正でき、感動しました。

以上のように、デザインの知識やセンスのまったくない筆者でも、簡単にいい感じの成果物を作ることができます。ただ、デザイナーになれる!とは感じませんでした。

これまで見てきたように、Claude Designはデザインの知識があまりない人でも、短時間で見栄えのするたたき台を作れるのが大きな強みです。社内プレゼンの資料、店内掲示やイベント告知のポスター、サービス案内の1ページ資料などを、ゼロから悩まず形にできる価値は小さくありません。

一方で、出てきた初稿をそのまま完成版として使えるかというと、そこは別の話です。フォントの組み方や余白、視線の誘導、写真とコピーのバランス、ブランドの世界観との整合といった部分では、やはり人の判断がものをいいます。一定水準までは素早く到達できますが、最終的な仕上がりには目利きの差が出ます。

現実的な使い方としては、Claude Designでまず方向性のよい案を作り、細かな調整や最終仕上げはPowerPointやCanva、あるいはデザインに慣れた担当者が担う、という分業が向いているでしょう。Webサイトでも、モックやプロトタイプを素早く作って検討を進め、その後にClaude Codeや開発側へ引き渡す流れが実用的です。

誰もがこれだけでプロのデザイナーになれるわけではありませんが、デザイン作業の最初のハードルを大きく下げてくれるツールであることは確かです。特に、たたき台を早く作りたいビジネスパーソンにとっては、十分に実用的な選択肢になるでしょう。