Claudeに「デザイン」を起こさせる ─ UI/UXが会話から立ち上がる

2026年6月4日2026年6月5日

サイトや資料のデザイン、毎回考えるのが大変…。AIに「こんな雰囲気」って伝えたら、画面ごと作ってくれないかな？

ClaudeなどのAIに何かを作ってもらうとき、文章やコードは出してもらえても、「画面そのもの」を作ってもらうのは難しい…と思っていませんか？　LPやWebサイトのデザインって、頭の中のイメージを言葉にして、構造を考えて、配色や余白を決めて……と、相応の技術力が必要になります。

これに対する答えのひとつが、Claude Designという機能です。会話で「こんなサイトを作りたい」と伝えると、画面のデザインがそのまま立ち上がる。アーティファクトの一歩先、UI/UXに特化した世界です。サブスクリプションのPro／Maxプランで使える機能になります。

以前の記事では、Claudeのアーティファクト機能で、文書やWebページの「成果物」を会話から立ち上げる話を取り上げました。今回はそのデザイン特化版を見ていきます。

Claudeの「Design」とは

Claude Design（claude.ai/design）は、ClaudeにUI/UXデザインを生成させるための専用の場所です。通常のClaudeやアーティファクトと別の入り口になっていて、最初からデザインを作るための機能が整っています。

特徴を表で整理すると、こんな具合です。

アーティファクトが「成果物の万能エリア」だとすると、Claude Designは「画面デザインの専用工房」です。

Claude Designで作れるものたくさんありますが、主な例は…

ランディングページのデザイン
商品やサービスのLP。ファーストビュー、ベネフィット、お問い合わせまで、ひと通りの構成がそのまま出てくる
既存サイトのリデザイン提案
既存サイトのURLを渡すと、別の世界観で作り直す案を出してくれる
デザインシステムの生成
カラー、タイポグラフィ、コンポーネント雛形のセット。サイトの「決まりごと」が一式作られる
HTMLハンドオフ
完成したデザインをHTMLとしてエクスポート。Claude Codeに直接渡す「Handoff to Claude Code」もある
ロゴ制作
会社のロゴデザインやお店のロゴデザインなど。複数のフォントタイプを並べて提案してくれます。

たたき台を作るスピードは特に強力です。文章で「こんなLPを作りたい」と伝えるだけで、数分後には画面の形が立ち上がります。

「一発で完成形を狙う」より、「2-3案を出して、その中から育てる」が向いています。

私たちが実際に使ってきた中で見えてきた、Claude Designの強みと限界を整理します。

そのまま完成品にする: AIっぽい癖（テンプレ的なフィーチャーグリッド、左に色付きのアクセントライン、教科書的なコピー）が残りやすい。仕上げで世界観を立て直す必要がある
コピー（文字）の独自性: 提示される文章は「ありがちなブランド文学」になりがち。世界観のあるコピーは別途書き直す前提で
精密な調整: 1pxレベルのレイアウト調整や、複雑なアクセシビリティ対応はClaude Code側の領域

Claude Designは「下書きを爆速で出す」ところがピーク。完成までは持っていかず、Claude Codeとの併用で仕上げる流れが現実的です。「探索はClaude Design、磨きはClaude Code＋人間」と役割を分けると、それぞれの強みが活きます。