生成AI関連
Claude Designとは？対話しながらデザイン・プロトタイプを仕上げるAIツール
これまでの記事では、AnthropicのAIデザインツール「Claude Design」の基本的な使い方と、Claude CodeへつなぐHandoff機能を取り上げました。
Claude Designは、「このようなアプリを作りたい」という概要説明やスクリーンショットなどのコンテキストを渡し、チャットで対話しながらUIデザインやプロトタイプを作成できるツールです。前回までの記事では、お小遣い帳アプリの概要を文章で伝えてプロトタイプを作成し、そのデザインを既存Reactアプリへ反映する流れを紹介しました。
今回は、その続編としてClaude Designの「Design System」に注目します。
生成AIを使うと、アプリ画面、Webページ、紹介スライドなど、さまざまな形式の成果物を短時間で作成できます。一方で、成果物ごとにデザインの方向性が少しずつ変わり、同じサービスとしての統一感が薄れることがあります。特に、既存アプリに合わせて新しい画面を追加したい場合や、同じサービスのランディングページ、営業資料、社内説明資料を作りたい場合は、デザインの一貫性が重要になります。
本記事では、Design Systemを使うことで、既存アプリのデザインの方向性を複数の成果物へどのように展開できるのかを確認していきます。
なお、Claude DesignはAnthropic Labsのリサーチプレビューとして提供されている機能であり、仕様や利用条件は今後変わる可能性があります。本記事では、2026年6月2日時点で確認できる範囲をもとに、検証の流れと活用可能性を整理します。
Design Systemは、プロダクトやサービスのデザインを一貫させるためのルールや部品をまとめたものです。単に色やボタンの見た目を集めた資料ではなく、プロダクトらしさを保ちながら画面を増やしていくための共通基盤です。
Design Systemに含まれる要素は、プロダクトの規模や組織によって変わります。代表的には、次のような情報を整理します。
| 要素 | 内容 |
|---|---|
| デザイン原則 | どのような印象、使いやすさ、優先順位を大事にするか |
| デザイントークン | 色、フォントサイズ、余白、角丸、影などの基本値 |
| UIコンポーネント | ボタン、カード、フォーム、ナビゲーションなどの部品 |
| レイアウトパターン | 画面構成、情報の並べ方、レスポンシブ時の振る舞い |
| 文言やトーン | 見出し、ラベル、説明文の書き方やサービスらしい言葉遣い |
| 利用ルール | どの場面でどの部品を使うか、避けるべき使い方は何か |
たとえば、同じサービス内で画面ごとにボタンの色や角丸、余白、見出しの大きさがばらばらだと、利用者にとっては別のサービスのように見えてしまいます。Design Systemがあると、画面や機能が増えても、同じルールにもとづいてUIを設計しやすくなります。
開発側にとっても、Design Systemは再利用できる判断基準になります。新しい画面を作るたびに色や余白を決め直すのではなく、既存のルールやコンポーネントを参照できるため、実装のばらつきを抑えやすくなります。レビュー時にも「好み」ではなく「定義済みのルールに合っているか」という観点で確認しやすくなります。
生成AIにデザインを依頼する場合も、この考え方は重要です。「既存アプリに合わせてください」「やわらかい雰囲気にしてください」といった指示だけでは、AIの解釈に幅が出ます。一方で、Design Systemとして色、余白、コンポーネント、トーンを整理しておけば、AIが参照できる前提情報が増えます。
つまりDesign Systemは、人間のデザイナーやエンジニアのための共通言語であると同時に、生成AIに対して「どのようなデザインで作るべきか」を伝えるためのコンテキストにもなります。
Claude DesignにおけるDesign Systemは、生成する画面や資料に対して「どのような見た目に寄せるか」を伝えるための参照情報です。通常のチャット指示だけでも「既存アプリに合わせてください」と依頼できますが、その場合は、何をもって既存アプリらしいと判断するかが曖昧になります。Design Systemを作成しておくと、配色、余白、角丸、文字の雰囲気、カードやボタンの使い方などを、Claude Design側が参照しやすい形で保持できます。
Claude Supportでも、Claude DesignのDesign Systemは、コードベースやスライドデック、ブランドガイドラインなどから、コンポーネント、色、タイポグラフィ、パターンを抽出するものとして説明されています（Claude Designでデザインシステムをセットアップする）。
作成画面では、Design Systemの名前や説明を入力したうえで、次のような情報を任意で追加できます。
補足メモでは、コードや画像だけでは伝わりにくい意図も補えます。たとえば、「子どもでも使いやすい印象にしたい」といった背景を書いておくと、Claude DesignがDesign Systemを作成する際の判断材料になります。
このように作成したDesign Systemは、その後の生成作業に使う前提条件として扱います。ただし、生成された色名、コンポーネント分類、文言のトーン、アクセシビリティ上の妥当性は、人間が確認する必要があります。本記事では、既存アプリの方向性を保ったまま、Webページ、紹介スライド、別題材のWebアプリへ展開できるかを確認します。
ここからは、これまでの記事でも扱ってきたお小遣いアプリを題材に、Claude DesignでDesign Systemを作成し、そのDesign Systemを使って別形式の成果物へ展開する流れを見ていきます。
Design Systemは「見た目を整えるための設定」ではなく、AIに渡すデザイン上の前提条件として扱います。既存アプリの雰囲気を保ちながら、Webページ、紹介スライド、別題材のWebアプリへ展開できるかを確認します。
今回Design Systemの元にするのは、以前Claude Designで作成した「お小遣いアプリ」です。子ども・家庭向け、または個人の月ごとのお小遣い管理を想定したモバイルアプリで、ログイン画面、月一覧画面、月ごとの詳細画面などを持っています。
このアプリの特徴は、クリーム系の背景色とグリーンを中心としたアクセントカラーです。お金の管理アプリではありますが硬い印象はなく、日常的に使いやすいやさしい雰囲気を重視しています。
画面全体を見ると、丸みのあるカード、やわらかい影、ゆったりした余白が多く使われています。ボタンや下部ナビゲーションにも同じトーンが反映されており、画面ごとの部品に一定の共通性があります。また、タイトルや見出しには手書き風、または親しみやすい雰囲気の表現が使われており、子どもや家庭向けのサービスとして受け入れやすい印象になっています。
今回は、この既存アプリを「Design Systemの元になるアプリ」として扱います。
作成画面では、GitHubリポジトリ、ローカルのコード、Figmaファイル、フォント、ロゴ、画像素材、補足メモなどをDesign System作成のコンテキストとして利用できます。Anthropicの公式ブログでも、Claude Designがコードベースやデザインファイルを読み取り、チーム向けのDesign Systemを構築することが説明されています（Introducing Claude Design by Anthropic Labs）。
今回の検証では、既存アプリのソースコードを渡します。大規模なコードベースを丸ごと渡すよりも、まずはフロントエンドに関係する部分を中心に渡す方が、確認したいポイントを絞りやすくなります。具体的には、画面コンポーネント、共通UI部品、スタイル定義、設定ファイルなどが対象になります。
セットアップ画面には、Company name and blurbのような入力欄があります。これは会社名だけを書く欄ではなく、「どのようなブランド、またはプロダクトのDesign Systemなのか」をClaude Designに伝える欄として扱うのが自然です。
今回は、既存のお小遣いアプリの特徴を日本語の説明文として補足しています。既存のソースコードを渡すだけでも一定の情報は伝わりますが、文章でも意図を補うことで、Claude Designに期待する方向性を伝えやすくなります。
Design Systemが作成されたら、まず内容を確認します。確認する観点は、カラー、タイポグラフィ、ボタン、カード、フォーム、アイコン、余白、全体のトーンです。
作成されたDesign Systemを見ると、既存アプリに見られたクリーム系の背景、グリーンのアクセント、丸みのあるカード、ゆとりのある余白などが反映されていることが確認できます。実際の画面によって表現の強弱は変わる可能性がありますが、初期案としては既存アプリの方向性を整理する材料になります。
ここで重要なのは、Design Systemが「完成した正解」ではないという点です。生成された色やコンポーネント定義は、そのまま完成版として扱うのではなく、人間が確認し、必要に応じて修正していく必要があります。たとえば、アクセシビリティ上のコントラスト、ブランドカラーとしての妥当性などは、別途確認が必要です。
次に、同じDesign Systemを使って、お小遣いアプリのランディングページを作成する想定で検証します。アプリ画面とは異なり、Webページではファーストビュー、アプリの特徴、使い方、利用メリット、スマートフォン画面のモックなどが必要になります。
Claude Designでは、作成画面の「Start with context」から利用するDesign Systemを選択できます。ここで先ほど作成したDesign Systemを指定しておけば、プロンプト側では「既存アプリと同じ色にしてください」のような細かい見た目の指定は入れず、作りたいものを簡潔に伝えられます。
指示例は次の通りです。
お小遣いアプリのランディングページを作成してください。
主な機能、利用メリット、使い方が分かる構成にしてください。
作成されたランディングページを見ると、既存アプリのクリーム系の背景、グリーンのアクセント、丸みのあるカードといった特徴が反映されています。アプリとは形式が異なりますが、同じサービスの紹介ページとして見える初期案になりました。
続いて、同じDesign Systemを使って、お小遣いアプリの紹介スライドを作成する想定で検証します。スライドでは、課題、解決策、主な機能、利用イメージ、まとめといった構成が考えられます。
Claude Designへの指示例は次の通りです。
お小遣いアプリの紹介スライドを5枚程度で作成してください。
内容は、課題、解決策、主な機能が伝わる構成にしてください。
作成されたスライドでは、課題、解決策、主な機能を説明する流れが、既存アプリのトーンに合わせて整理されています。画面設計だけでなく、サービス紹介用の資料にもDesign Systemを適用できることが確認できました。
最後に、同じDesign Systemを使って、お小遣いアプリとは別のWebアプリを作成します。題材はTODOアプリです。タスク一覧、完了状態、追加フォーム、優先度、期限など、画面上で確認しやすい要素が多いため、デザインの方向性が引き継がれているかを見やすい題材です。
Claude Designへの指示例は次の通りです。
シンプルなTODOアプリのWebアプリ画面を作成してください。
タスクの追加、未完了タスク、完了済みタスク、期限、優先度が分かるようにしてください。
作成されたTODOアプリを見ると、題材がお小遣い管理から離れても、背景色、カード、ボタンの雰囲気にDesign Systemの特徴が残っています。単一の画面だけでなく、別アプリの初期案にも展開できることを確認できました。
今回のように、Design Systemを前提として渡すことで、ランディングページ、紹介スライド、別題材のWebアプリでも、ある程度統一されたデザインの初期案を作成できました。
実務で利用する場合は、いくつかの注意点があります。
Claude Support > Get started with Claude Design
今回は、既存のお小遣いアプリのソースコードをもとに、Claude DesignでDesign Systemを作成する流れを検証しました。作成したDesign Systemを使ってランディングページ、紹介スライド、TODOアプリを作成したところ、用途が異なる成果物でも、色や余白、カードの使い方に共通したトーンが残ることを確認できました。
この結果を見ると、Claude DesignのDesign Systemは、単に見た目を整えるための設定というより、生成AIに対して「このプロダクトらしさ」を伝えるための前提情報として機能していると考えられます。プロンプトで毎回細かく色や雰囲気を指定しなくても、参照するDesign Systemを選ぶことで、既存プロダクトの方向性を保った初期案を作りやすくなります。
もちろん、出力結果をそのまま最終成果物として使えるわけではありません。ブランドルール、実装可能性、アクセシビリティ、文言、細かなレイアウトは人間が確認する必要があります。それでも、既存アプリのコードや画面をDesign Systemとして整理しておくことは、生成AIによるデザイン作成の出力品質を安定させるうえで有効なアプローチだと考えられます。
Tech Funでは、お客様のフェーズに合わせ、生成AI活用に向けた支援を3つのパックでご提供しています。
生成AIに限らず、Web・業務システム開発やインフラ設計など、技術領域を問わずご相談を承っています。「何から始めれば良いか分からない」という段階でも構いませんので、ぜひお気軽にお問い合わせください。
