田口和裕の「ChatGPTの使い方！」 第49回

AIはデザイナーの代わりになる？　Claude Designを試してわかった実用度

　Anthropicは4月17日、プロトタイプやスライド、ランディングページなどを作れる新ツール「Claude Design」を発表した。

　画像生成機能では、OpenAIも4月21日にChatGPT Images 2.0を発表している。ただしClaude Designが得意とするのは、画像を1枚きれいに作ることではなく、アイデアを画面案や資料として形にし、共有、編集、実装の手前までつなげることだ。公式ギャラリーには、ピッチデッキやワイヤーフレーム、3Dや動画を使ったインタラクティブプロトタイプまで、幅広い活用例が並ぶ。

プロンプト1発でここまでできる

　ここでは一例として、Claude Designで架空のAIイベント「Creative AI Night 2026」の告知ページを作成してみよう。

　Claude DesignはResearch Preview段階であり、現在Claude Pro、Max、Team、Enterpriseの各プランから利用できる。Freeプランは対象外となっている。利用するには左側サイドバーに表示される「デザイン」をクリック。

サイドバーの「デザイン」から起動

　起動するとまずは「Prototype」「Slide deck」「From template」「Other」の4つから種類を選ぶ画面が表示される。今回はイベント告知ページを作るので、「Prototype」を選び、プロジェクト名を入力する。

　その下には「Wireframe」と「High fidelity」の選択肢がある。ラフな構成だけを見たい場合はWireframe、見た目まで含めたページ案を作りたい場合はHigh fidelityを選ぶといいだろう。選択が終わったら「Create」をクリックしよう。

プロジェクトタイトルを入力し、「Create」をクリック

　チャットとキャンバスを組み合わせた作業画面に切り替わるので、通常のClaudeと同じように自然文で作りたいものを指示して「Send」をクリックしよう。

プロンプト：AIイベント「Creative AI Night 2026」の告知ページを作って。対象はAIに興味がある一般ユーザー。明るく読みやすいデザインで、開催概要、登壇者カード、タイムテーブル、申し込みボタンを入れて。

　ここでは細かなレイアウト指定やHTML、CSSといった技術情報は入れていない。イベント名、対象読者、デザインの方向性、入れてほしい要素だけを日本語で伝えている。

プロンプトを入力し「Send」をクリック

　するとClaude Designは計画を立て始め、1分ほど（筆者環境）でプロンプト通りの告知ページを生成した。トップページ、開催概要、登壇者紹介、タイムテーブル、申し込みボタンなど、必要な要素が一通り揃っている。

生成されたページ「トップ」

生成されたページ「About」

生成されたページ「登壇者」

生成されたページ「タイムテーブル」

生成されたページ「申し込み画面」

　修正も通常のClaudeと同じ感覚で進められる。「もっと落ち着いた色にして」「申し込みボタンをページ上部にも出して」「登壇者カードを3人分に減らして」といった指示をチャットで送れば、Claude Designが反映してくれる。

　また、Tweakパネルを使えば、カラーパレットや色相、レイアウトのバリエーションなどを画面上で直接調整できる。

Tweakパネル

　生成したページを静的HTMLとして書き出せば、そのままブラウザで表示できる。Netlify DropやVercelなどの静的サイト公開サービスを使えば、URLを発行して他の人にも共有しやすい。今回は、生成したサンプルページをNetlify Dropで公開した。

【サンプルページの公開URL：https://stalwart-crumble-7d7011.netlify.app/】

　これをそのまま公開物として使うかどうかは別として、関係者に「こういう方向でどうか」と見せる画面案としては、これだけで十分成立するだろう。