blog

AIブログ

Claudeでデザイン｜デザインシステム・スキル・プロンプト【2026年版】

Claudeをデザインプロセスのどこにどれだけ使うか

「ClaudeはAIチャットツール」という認識で使い始めると、活用が単発の文章生成で終わりがちだ。実務で価値が出るのは、デザインプロセスの特定フェーズに意図的に組み込んだときだ。ClaudeはHaiku 4.5・Sonnet 4.6・Opus 4.8というラインナップを持つが、モデルの詳細スペックやベンチマーク比較はClaudeのモデル比較に譲り、本記事では「どのフェーズで・何を・どんなプロンプトで依頼するか」という実務的な使い方に絞って解説する。

当社ではコンテンツ制作・UIコピー設計・バーチャルヒューマンのシナリオ構築などにClaudeを常用している。その経験から言えるのは、Claudeをデザインに使う際の最大の強みは「長い文脈を保持したまま論理的に構造化する能力」と「批判的視点を求めたときの正直な指摘」の2点だ。この2つの特性を活かす場面を意識的に作るだけで、ワークフローの質は明確に変わる。

デザインプロセス4フェーズとClaudeの役割分担

デザインプロジェクトは「調査・定義→発散→収束→検証」という流れを基本とする。Claudeはすべてのフェーズで使えるが、得意・不得意がある。まず全体像を整理しておく。

フェーズ	Claudeが担える役割	適したモデル	Claudeの限界
① 調査・定義	インタビュー逐語録の構造化、ペインポイントの抽出・分類、HMW（How Might We）問いの生成	Sonnet 4.6 / Opus 4.8	実際のユーザー感情の読み取りは人間の判断が必須
② 発散	コンセプト多案生成、コピーバリエーション、UI構造の代替案提示	Sonnet 4.6（量）/ Haiku 4.5（大量一括）	視覚的なビジュアル案は出力不可（テキスト記述のみ）
③ 収束	複数案の評価軸比較、意思決定の構造化、選定理由の言語化	Opus 4.8	最終的な判断はチームと文脈を持つ人間が行う
④ 検証	ペルソナ視点レビュー、アクセシビリティ言語チェック、コピーの文体評価	Sonnet 4.6 / Opus 4.8	視覚要素（コントラスト比・ピクセル精度）は専用ツール必須

フェーズ別・実務で機能するプロンプトパターン

① 調査・定義：インタビュー逐語録の構造化

ユーザーインタビューの文字起こしをそのまま貼り付けて「まとめて」と依頼するのは精度が低い。分析軸を事前に指定することで、次のデザイン作業に直結するアウトプットになる。

▼ 実務で使えるプロンプト例（調査フェーズ）

以下のインタビュー逐語録を分析してください。

【分類軸】
①現状の課題・摩擦（Pains）
②達成したいこと・動機（Gains）
③現在の解決行動（Current Workarounds）
④潜在的なニーズ（本人が言語化していないもの）

各発言を上記4軸に分類し、「発言の引用→分類→解釈コメント」の3点セットで整理してください。

—逐語録ここから—
（テキストを貼り付け）

ポイント：「KJ法的に」などの曖昧な指示より、軸を明示するほうが次のワークショップで使いやすいアウトプットになる。

当社では、このアウトプットをそのままFigmaのFigJam上の付箋として貼り直すテンプレートを用意しており、インタビューからアフィニティマップ作成までの時間を大幅に短縮できている。

② 発散：コンセプトの多様な案出し

「10案出して」という指示は表面的に似た案が並びやすい。「まったく異なる方向性」を構造的に担保するプロンプトが有効だ。

▼ 実務で使えるプロンプト例（発散フェーズ）

以下の製品コンセプトについて、まったく異なる方向性で5案を提案してください。

各案は必ず以下のセットで出力してください：
【コンセプト名】（3〜5文字）
【一言ポジショニング】（20字以内）
【コアターゲット】
【他の案との差別化ポイント】
【このコンセプトの最大のリスク】

制約：
・「シンプル・直感的」系の訴求は除外
・既存の類似サービス名を連想させるネーミングは避ける
・各案の方向性が重複しないように

製品概要：（ここに貼り付け）

ポイント：「最大のリスク」を必須項目にすることで、Claudeが無難な案だけを出すのを防げる。収束フェーズの議論材料として使いやすい形式になる。

③ 収束：複数案の比較評価表

発散で出た案を評価する際、Claudeを「構造化する道具」として使うのが有効だ。自分の案への思い入れに引っ張られず、評価軸を揃えた議論の土台を作れる。

▼ 実務で使えるプロンプト例（収束フェーズ）

以下の3つのUIコンセプト案を、指定した評価軸で比較表にまとめてください。

【評価軸】（各軸を5段階で評価し、その理由を1〜2文で）
・ターゲットユーザーとの親和性
・開発・運用コストの現実性
・ブランドトーンとの一貫性
・3ヶ月後に差別化できているか（競合模倣難易度）

表の後に、あなた自身の推薦案と、その根拠を100字以内で添えてください。

【案A】…　【案B】…　【案C】…

ポイント：Claudeに「推薦」を求めることで、モデルの論理的な優先順位が見える。それを叩き台として人間が議論すると、会議の質が上がる。

④ 検証：ペルソナ視点レビュー

ユーザーテストの代替にはならないが、プロトタイプ前の言語的なチェックとしてClaudeのペルソナ指定レビューは実用度が高い。

▼ 実務で使えるプロンプト例（検証フェーズ）

あなたは以下のペルソナとして、このUIの画面コピーを読んでください。

【ペルソナ】35歳・会社員・育児中・ITリテラシー中程度・時間的余裕が少なく「とにかく早く終わらせたい」と思っている。新しいサービスには懐疑的で、最初の画面で「面倒そう」と感じたら離脱する。

以下の視点で指摘してください：
①このペルソナが「意味がわからない」と思うコピー
②「なぜこれが必要なのか」と感じる画面要素
③「面倒そう」と感じるフロー上の摩擦
④このペルソナが離脱するとしたらどの時点か

【UIコピー・フロー説明】（ここに貼り付け）

ポイント：ペルソナの「内面の声」（懐疑的・時間がない）まで書き込むほど、指摘の具体性が上がる。「ユーザーから見て」という曖昧な指定とは精度が別物になる。

UI設計の上流でClaudeが特に機能する4つの用途

1. 情報アーキテクチャ（IA）の整理

サイトマップやアプリのナビゲーション構造を言語レベルで整理する作業はClaudeが得意とする領域だ。ページ一覧や機能リストをテキストで渡し、「ユーザーの行動フローに沿って並べ直し、階層構造として提案してください」と指示するだけで、ファーストドラフトのIA案が返ってくる。

さらに踏み込んで使うなら、以下のように条件を重ねると精度が上がる。

IA整理での追加指示例：
「初回訪問ユーザーが目的達成するまでのタップ数が最小になるよう優先順位をつけて」
「モバイルボトムナビに収めるとしたら5項目に絞るとどうなるか」
「現在の構造と提案構造の差分と、変更の根拠を並べて示して」

2. マイクロコピーの生成と評価

ボタンラベル・エラーメッセージ・空の状態（Empty State）のコピー・ツールチップといったマイクロコピーは、Claudeとの相性が特に良い。量が多く、トーン一貫性が必要で、バリエーションを素早く出す必要がある——という条件がClaudeの得意パターンと合致するからだ。

エラーメッセージの依頼例

「パスワードが間違っている」という状況のエラーメッセージを3パターン。条件：ユーザーを責めない・次のアクションを必ず示す・20字以内・カタカナ英語は避ける

Empty Stateコピーの依頼例

「まだデータがない状態」の画面コピー（見出し+説明文+CTAボタンラベルのセット）を3パターン。最初の利用なので不安を感じさせず、最初の一歩を踏み出させるトーンで

ツールチップ評価の依頼例

以下のツールチップ文を「わかりやすさ・必要性・文字数の適切さ」の3軸で評価し、改善案を添えて（各ツールチップの貼り付けリストを添付）

3. ブランドトーン＆ボイスの言語化

「このブランドが人だとしたら、どんな話し方をするか」という問いからブランドトーンを言語化するプロセスは、Claudeが最も得意とする上流設計の一つだ。当社でもバーチャルヒューマンのキャラクター定義にこのアプローチを使っており、ゼロからのトーン&ボイスガイド初稿をClaudeとの対話で作り上げている。

▼ ブランドトーン定義の進め方（3ステップ）

Step 1（探索）：「このブランドのキーワード：〇〇・△△・□□。このブランドが人格を持つとしたら、どんな職業・年代・話し方・価値観の人か。形容詞10個で表現して」

Step 2（対比）：「Step 1の人物が『言いそうなこと』と『絶対に言わないこと』をそれぞれ5例ずつ挙げて。実際の商品名や状況は関係なく、話し方・言葉選びの観点で」

Step 3（文書化）：「上記の議論をもとに、以下の要素を含むトーン＆ボイスガイドの初稿を作成して：①ブランドボイスを表す3つの形容詞（各30字の解説付き）②NGワードリスト ③良い例文・悪い例文の対比（各5ペア）」

このアプローチの強みは、3つのステップを連鎖させることで、最初の1ターンでは出てこない深い言語定義が得られる点だ。Claudeは会話の文脈を保持するため、Step 1の結果を踏まえてStep 2・3が精度を高めていく。

4. アクセシビリティの言語チェック

視覚的なコントラスト比やキーボード操作対応はClaudeでは確認できないが、言語レイヤーのアクセシビリティはチェックできる。画面上のすべてのテキストをコピーして貼り付け、以下のような依頼が実用的だ。

「以下のUIコピーを、次の観点でレビューしてください：
①認知負荷が高い専門用語・業界用語（中学生が読んでわからない言葉）
②インクルーシブではない表現（特定の属性・状況を前提にしている表現）
③受動態や二重否定など、読解難易度が上がっている構文
各指摘に対して、改善案を必ず1案添えてください」

画像入力を使ったデザインレビューの実務的な使い方

現行のClaudeモデルは画像入力に対応している。「視覚的な構造と意図の読み取り」を言語化させるツールとして使うのが現実的な活用法だ。ピクセル精度の評価や細かいフォント判別は苦手なので、そこは専用ツールと組み合わせる前提で考える。

画像入力でのデザインレビュー：機能する依頼パターン

ワイヤーフレーム → 視線誘導の分析：
「このワイヤーフレームを初見のユーザーが見たとき、視線がどの順序で動くか推測してください。その順序がビジネスゴール（〇〇）に合っているか評価して」

競合LPのキャプチャ → CTA戦略の分析：
「このLPのCTA（行動喚起）設計を分析してください。CTAの数・配置・文言の特徴と、改善余地があるとしたらどこか、根拠とともに」

改善前後のスクリーンショット → 差分評価：
「この2つのデザイン（改善前・後）を比較し、ユーザー体験として何が改善され、何がトレードオフになっているか整理してください」

カラーパレット画像 → 心理的印象の評価：
「このカラーパレットが与える心理的印象（安心感・活発さ・高級感など）と、ターゲット（30代女性・健康意識高め）との相性を評価してください」

これらの依頼に共通するのは、「見て何かを判断して」ではなく「見た上で特定の観点について言語化して」という構造だ。判断の軸（ビジネスゴール・ターゲット・評価観点）を指定することで、Claudeの回答が実務で使える形になる。

資料・プレゼンテーション制作へのClaude活用

デザイン業務はビジュアル制作だけではない。提案資料・UXリサーチレポート・デザイン仕様書など「説明するための文書」を作る時間は、プロジェクトの中で無視できない比率を占める。この領域でClaudeは特に効率化に貢献できる。

デザイン提案書の構成設計

「プレゼンの構成を作って」ではなく、「聞き手の意思決定をゴールに逆算した構成を設計して」という依頼にするとアウトプットが変わる。

プロンプト例：
「以下の条件でデザイン提案プレゼンの構成を設計してください。
・聴衆：マーケティング部長（デザインに詳しくない・ROIで考える）
・目的：リデザイン予算の承認を得る
・持ち時間：15分（質疑含む）
・使えるデータ：（調査結果の概要を貼り付け）

各スライドのタイトル・伝える内容・なぜそこで伝えるかの理由をセットで。最後に『この順序で進める理由』を100字でまとめて」

UXリサーチレポートの初稿生成

ユーザーインタビューや使用性テストの記録を渡し、「報告書の初稿」を生成させるのは時間対効果が高い使い方だ。重要なのは、Claudeが生成した初稿を「出発点」として扱い、人間が解釈・判断を加えることだ。AIが出した分析をそのまま報告書に使うのはリスクがある。

実務での推奨フロー：
① 逐語録・観察メモをClaudeで構造化（フェーズ①のパターンを使用）
② 構造化データをもとにClaudeでレポート初稿を生成
③ デザイナーが「解釈の妥当性」と「ビジネス文脈との整合性」を人力で確認・修正
④ 修正箇所を踏まえてClaudeで文章を整える（文体の統一・表現の改善）

仕様書・スタイルガイドの文書化

Figmaで作ったデザインをエンジニアに渡す際の仕様書作成にもClaudeが使える。コンポーネントの説明・インタラクションの条件分岐・使用ガイドラインなど、「ルールを文章にする」作業は時間がかかるが、Claudeに構造を渡して初稿を作らせることで大幅に短縮できる。

プロンプト設計：デザイン用途で「効く」原則5つ

デザイン業務でClaudeを使う際に知っておくべき、プロンプト設計の実務的な原則をまとめる。

原則1：制約を前に置く

「〇〇字以内・カタカナ禁止・動詞で終わる」などの制約は、役割説明より先に書く。Claudeは長い指示を処理する際に前半の条件をより確実に反映する傾向がある。重要な条件が末尾に来ると見落としが増える。

原則2：出力フォーマットをラベルで指定する

「箇条書きで」より「【案名】【一行コンセプト】【ターゲット】【強み】【懸念点】のセットで」のようにラベルまで指定する。後工程（Figmaへの貼り付け・スプレッドシートへの転記）での扱いが格段に楽になる。

原則3：「批判的視点」を明示する

「問題点を教えて」だけでは表面的な指摘にとどまりやすい。「最大のリスクを3つ、辛口で」「競合と比較したときの弱点を正直に」と明示すると深い洞察が返る。デザインコンセプトの壁打ちでは必ずこの書き方を使う。

原則4：文脈は惜しまず渡す

ブランドガイドライン・競合分析・会議メモなどを丸ごと貼り付けてから指示を出す。情報が多すぎることを心配して削るより、渡しすぎて余分なものを無視させるほうが結果がいいケースが多い。Claudeのコンテキスト処理能力はこの使い方に合っている。

原則5：連鎖で深掘りする

一回のプロンプトですべてを解決しようとせず、「その中の②をさらに詳しく」「③をターゲット別に分岐させて」と連鎖的に深掘りする。Claudeは会話の文脈を正確に保持するため、この使い方が特に機能しやすい。

よくある失敗パターンと対処法

デザイン業務でClaudeを使い始めたときにぶつかりやすい失敗と、その対処を整理する。

失敗パターン	原因	対処法
毎回似た案が返る	方向性の制約が多すぎる	「これまでの案とは異なるアプローチで」「正反対の方向性で」と明示する
表面的な回答しか返らない	文脈情報が不足している	背景・目的・ターゲット・制約を先に渡す。関連資料は丸ごと貼り付ける
フォーマットがバラバラ	出力形式の指定がない	ラベル付きのフォーマット例を1つ提示して「この形式で」と指定する
ブランドトーンから外れる	トーン定義が抽象的すぎる	「既存の良いコピー例」を複数貼り付けてトーンを例示で渡す
後半の条件が守られない	重要条件が末尾に集中している	「絶対に守ること：」セクションを冒頭に置き、重要条件を前出しする
画像レビューが曖昧になる	判断の軸を指定していない	「〇〇の観点で・ターゲットは△△として・ゴールは□□」と軸を明示する

まとめ：Claudeをデザインの「構造化パートナー」として使う

Claudeをデザインに活用するうえで押さえておきたい実務のポイントを整理する。

フェーズごとに役割を明確に：調査フェーズの構造化・発散フェーズの多案生成・収束フェーズの評価表・検証フェーズのペルソナレビューと、使い方を局面ごとに変える
IA・マイクロコピー・トーン定義が最も効果的：視覚デザインそのものは出力できないが、言語化と構造設計ではClaudeは強力なパートナーになる
画像入力は「言語化」目的で使う：「見て何かを判断して」ではなく「見た上で特定の観点を言語化して」という依頼構造にする
資料・仕様書の初稿生成も時間対効果が高い：提案書の構成・リサーチレポートの初稿・スタイルガイドの文書化。ただしClaudeの出力は必ず人間がレビューして解釈を加える
プロンプトの原則5つを実践する：制約の前出し・ラベル指定のフォーマット・批判的視点の明示・文脈を惜しまず渡す・連鎖で深掘りする
失敗パターンを知っておく：似た案が出続ける・表面的な回答・フォーマットのブレ——これらはいずれもプロンプト側の問題で解決できる

Claudeはデザインの「創造」をするのではなく、「考えを構造化して見えやすくする」のが得意なツールだ。デザイナーの思考を整理し、チームとの議論を前に進め、判断の質を高める——その役割として使いこなすことが、実務での価値最大化につながる。

監修

河合継（クリスタルメソッド株式会社代表取締役）

AI・ディープラーニングに関する特許16件の発明者。過去、国立がん研究センターとの共同研究や、テレビ番組でのAI解説実績を持つAI研究者として、AIの研究開発を主導している。
運営会社について｜編集方針

Study about AI

AIについて学ぶ

SakuraSpeech（サクラスピーチ）｜日本語特化のAI音声合成 – ブラウザ・API・完全オフライン対応【2026年版】

SakuraSpeech（サクラスピーチ）は、入力したテキストを自然で表情ゆたかな日本語音声に変換する、日本語特化のAI音声合成（TTS：Text-to-Spe...
GPT-5.5 Claude エージェントベンチマーク選定——日本企業が問い直すべき評価軸

GPT-5.5がClaude Fable 5を上回った——「Agents’ Last Exam」とは何か 2026年6月、AIエージェント評価の文脈...
米上院金融AI 規制公聴会——日本の銀行・証券への実務的示唆

上院金融AI 規制公聴会の要点——何が、なぜ今議題に上ったか 2026年6月11日午前10時（米東部夏時間）、米上院銀行・住宅・都市問題委員会（U.S. S...