実践的なデザインワークフロー
デザイナーがClaudeを使う方法:ブリーフ、UIコピー、レビュー、引き渡しドキュメント
デザイン業務のうち、ピクセルではなく言葉で成り立っている部分こそ、Claudeが役に立つところです。
デザイナーがClaudeを使う方法は、デザインツールの外側にある5つの作業に集約されます。
回答をすべて読む
デザインブリーフの作成と整理、UIコピーの方向性の検討、モックのスクリーンショットに対するレビュー、エンジニア向けの引き渡し資料の作成、そしてアクセシビリティの初回チェックです。Claudeはアップロードされた画像を読み取り、そこに写っているものを平易な言葉で説明できますが、Figmaファイルを開いたり、本番用のUIを生成したり、ユーザーやブランドを理解している他のデザイナーによるレビューの代わりになったりすることはありません。
公開日 · 最終確認日
要点まとめ
- Claudeはアップロードされたスクリーンショットやモックを読み取り、階層構造、わかりやすさ、一貫性についての具体的な質問に答えられますが、Figmaファイルを開いたりコンポーネント構造を見たりすることはできません。
- デザインブリーフ、UIコピー、引き渡し資料は、視覚的な作業そのものではなく、それを取り囲む文章作成タスクであるため、最も効果の高い使い方です。
- Claudeによるアクセシビリティチェックは、コントラスト、alt属性、フォーカス順序に関する手早い初回チェックであり、コンプライアンス審査や支援技術によるテストではありません。
- Claudeはチームメイトからのデザインレビューを受ける前に自分の考えを整理する助けになりますが、実際のレビューが持つセンス、ユーザー調査、チームの経緯までは備えていません。
- 出力の質は入力の質に比例します。実際の打ち合わせメモ、実際のブランドボイス資料、実際のスクリーンショットは、一行だけのプロンプトよりも常に優れた結果を生みます。
コピーして使える
今日から使えるプロンプト
散らばったメモを構造化されたブリーフに変換する
[プロジェクト名]に関する打ち合わせの生メモとSlackのやり取りをそのまま貼り付けます。以下の内容をすべて読み、明確な課題設定、これまで話し合った制約条件、成功基準、そしてステークホルダーとまだ解決すべき未解決の質問リストを含む、構造化されたデザインブリーフにまとめてください:[ここにメモを貼り付け]。
要約ではなく、実際のメモをそのまま貼り付けてください。ブリーフは渡した内容しか反映できません。
UIコピーの方向性を検討する
[画面や状態、例:「ユーザーがまだ何も追加していない時の空の状態」]用のコピーを8パターン書いてください。トーンは[親しみやすく少し遊びのある/落ち着いていて安心感のある]ものとし、各パターンは[文字数制限]文字以内に収め、どのパターンも「[避けたい単語]」という単語を繰り返さないようにしてください。リストの後に、それぞれのパターンがどんな切り口を取っているかを短く説明してください。
文字数制限や既存のコピーパターンなど、実際の制約条件を与えてください。
モックのスクリーンショットに対するレビューを受ける
これは[フローや画面、例:「購入完了確認画面」]のスクリーンショットです。この画面のプライマリアクションに特に注目してください。初めて使うユーザーが次に何をクリックすべきかが明確か、視覚的な階層構造がそれを支えているか、そして[プロダクト内の似た画面]が同じパターンをどう扱っているかと比べて不整合な点がないかを教えてください。回答はこの一画面に絞ってください。
「このフロー全体をレビューして」よりも、一画面・一つの具体的な質問の方が、より的確な回答が得られます。
画面を順に説明しながら注釈付きの引き渡し資料を作成する
これから[機能名]のフローを説明しながら、各画面のスクリーンショットを順番に貼り付けていきます。画面ごとに、対応すべき状態(デフォルト、読み込み中、エラー、空の状態)、エンジニアが実装する際に必要となるインタラクションの注記、そして実際に表示すべきコピーを、エンジニアが私に追加で質問しなくても作業できる仕様書の形式で書き出してください。
フロー全体を一度に貼り付けるのではなく、画面を一つずつ順に説明していってください。
アクセシビリティの初回チェックを行う
この[画面名]のスクリーンショットを見て、基本的なアクセシビリティチェックで問題になりそうな点を指摘してください。テキストと背景のコントラストが低い箇所、操作可能だと分かりにくい要素、フォーカス順序が不明確な箇所、alt属性が必要な画像やアイコンなどです。これは初回チェックであり、完全な審査ではないことを明記し、専用のツールがまだ必要な部分が分かるようにしてください。
ガイド全文
各セクションをタップすると開きます。
このガイドについて
デザインソフトは今もピクセルそのものを扱う領域を担っています。AnthropicのClaudeが役立つのは、その周りにあるすべての作業です。プロジェクトの起点となるブリーフ、モックに入れるUIコピー、それを磨くためのレビュー、そしてエンジニアに引き渡すための資料です。このページでは、デザインブリーフの書き方、UIコピーの検討、レビューの受け方、アクセシビリティの初回チェック、そしてエンジニアが実際に作業に使える引き渡し資料の作り方まで、Claudeがどこで役立つのかを解説します。
デザインワークフローの中でClaudeが役立つ場所
| タスク | Claudeが行うこと | デザインツールが今も必要な部分 |
|---|---|---|
| デザインブリーフ | メモやステークホルダーとの会話を課題設定、制約条件、成功基準として整理する | 最終承認とステークホルダー間の合意形成 |
| UIコピー | ボタン、空の状態、ツールチップ、エラーメッセージについてトーンや長さの異なる選択肢を生成する | そのコピーを実際のレイアウトに配置してテストする |
| デザインレビュー | スクリーンショットを読み取り、わかりにくい階層構造、不整合、混乱を招くフローを指摘する | センス、ブランドに基づく判断、実際のユーザー調査に基づくフィードバック |
| 引き渡し資料 | 状態定義、インタラクションの注記、画面ごとのコピーを作成する | 正確な寸法、赤入れ指示、書き出し可能なアセット |
| アクセシビリティ | 説明や画像から、コントラスト、alt属性、フォーカス順序に関わりそうな問題を指摘する | 支援技術を使った完全な審査とテスト |
活用できる場面デザイナーがClaudeを使う5つの場面
どれもデザインツールの代わりになるものではありません。その周りにある文章作成や思考整理の作業を代わりに担うものです。
デザインブリーフ
散らばったステークホルダーとの会話を、課題設定・制約条件・成功基準・未解決の質問を含む構造化されたブリーフに変換します。
UIコピーの検討
ボタン、空の状態、エラーメッセージについて、トーンや長さの異なる複数のパターンを生成し、白紙の状態から書き始める代わりに絞り込んでいきます。
デザインレビューの相手
モックのスクリーンショットをアップロードし、わかりにくい点、不整合な点、初めて使うユーザーがつまずきそうな点を尋ねます。Claudeは画像を直接読み取ります。
注釈付きの引き渡し資料
フローを説明したりモックを貼り付けたりすると、エンジニアが作業に使える状態・インタラクションの注記・コピーを記載した仕様書が得られます。
アクセシビリティの初回チェック
完全なアクセシビリティ審査を行う前の出発点として、カラーコントラスト、alt属性の欠落、不明確なフォーカス状態について質問します。
画像認識の実際モックを「読み取る」とは実際どういうことか
Claudeは画像を受け取れるので、Figmaのフレームやワイヤーフレーム、公開済みの画面のスクリーンショットを渡して、直接質問できます。この階層構造は理にかなっているか、プライマリアクションは明確か、前の画面で使われているパターンと一致しているか、といった具合です。
これは、Figmaファイルのレイヤー構造やコンポーネントのプロパティを解析しているのではなく、人がスクリーンショットをざっと見るのと同じようにピクセルを読み取っているに過ぎません。デザイントークンやコンポーネントライブラリ、どのフレームが「本物」なのかは、こちらから伝えない限りわかりません。デザインシステムを理解したレビュアーとしてではなく、手早い二度目の確認として扱ってください。
最も役に立つ使い方は範囲を絞ることです。一画面、一つの具体的な質問です。「ここのエラー状態は明確か」という問いは「このフロー全体をレビューして」よりも的確な答えを引き出せます。チームメイトにファイル全体を渡すのではなく、具体的なことを尋ねたときにより良い答えが返ってくるのと同じです。
実例で見るまとまりのないキックオフの会話を使えるブリーフに変える
多くのプロジェクトがそうであるように、プロダクトマネージャーとのSlackのやり取り、うろ覚えの立ち話、そして互いに完全には一致しないチケットの数行から始まるとします。白紙のブリーフテンプレートを前に悩む代わりに、それらすべてを生の素材としてClaudeに貼り付け、ノイズの中から必要な情報を整理してもらいます。
ブリーフに必要な要素を直接尋ねます。実際に解決すべき課題は何か、すでに挙がっている制約は何か(締め切り、プラットフォームの制限、ブランドのルールなど)、何を成功と見なすか、そしてまだ未解決の点は何かです。Claudeは、スレッドの初めに一度だけ触れられて後で見落とされた制約のように、自分では気づかなかった矛盾を浮かび上がらせてくれることがよくあります。
出てきた結果は最終版ではありません。白紙ではなく、すでに整理された状態の初稿です。つまり、その後に行う編集作業は、構造をゼロから作り出すのではなく、実際の内容を磨く作業になります。これが本当の時間の節約です。文章を書くこと自体ではなく、白紙の段階を省略できることにあります。
ここから始めるこれを習慣にするためのスタートパス
こうしたワークフローについて読むことと、実際にそれを実行することは別のスキルです。以下のスタートパスは、3つの短いレッスンでそのギャップを埋められるように、この順番で構成されています。
まずは「3つの使い方」コースの「Claudeの3つの使い方」から始めましょう。これは5分のレッスンで、手早いチャット、やり取りを重ねる長めの共同作業セッション、Claude Codeの違いを扱います。レビューの質問、コピーの推敲、ブリーフ作成など、デザイン業務の大半は最初の2つのモードに当てはまるため、このレッスンはたまたま開いているタブに頼るのではなく、適切なモードを選ぶ助けになります。
次に、「戦略的プロンプティング」コースの「コンテキストがすべて」に進みます。こちらも5分です。このレッスンは、一般的なブリーフを実際のプロジェクトを反映したものに変える方法を扱います。何を貼り付けるべきか(実際のメモ、ブランドボイス、具体的な画面)を学ぶことで、Claudeが与えられていないコンテキストを推測することがなくなります。
最後は「基本を身につける」コースの「反復のループ」です。6分のレッスンで、Claudeの最初の回答を結論ではなく草案として扱う方法を学びます。デザイナーにとっては、最初に出てきたUIコピーの候補をそのまま受け入れるのと、数回のやり取りを通じて8つの候補を実際に2つまで絞り込むのとの違いです。
役に立つ出力を得るためにデザイナーの仕事に本当に必要なコンテキストをClaudeに与える
一般的な答えと役に立つ答えの差は、ほとんどの場合与えたコンテキストの差です。デザイン業務について具体的に言えば、頭の中やファイルの中にはあるものの短いプロンプトには入らない情報を貼り付けることを意味します。記憶ではなく実際の打ち合わせメモ、文書化されているならブランドボイスのガイドライン、画面の説明ではなく具体的なスクリーンショットです。
範囲を具体的にすることも重要です。「このフローをレビューして」では、ぼんやりとした散漫な答えしか返ってきません。「確認画面を見て、セカンダリアクションがプライマリアクションと競合していないか教えて」であれば、役に立つ答えが返ってきます。質問が狭く絞られているほど、尋ねる価値があります。
新しい画面ごとに同じアクセシビリティチェックをする、UIコピーごとに同じトーンの指針を使うなど、同じ種類の質問を繰り返す場合は、毎回の会話でブランドボイスを説明し直すのではなく、そのコンテキストを一度書いておいて再利用する価値があります。
限界Claudeがしないこと、そして責任が残る部分
Claudeは本番用のUIを生成したり、Figmaファイルを操作したりしません。また、貼り付けない限りブランドガイドラインを記憶していることもありません。さらに、訓練された目のように視覚的な完成度を評価することもできません。画像に見えている構造、階層、わかりやすさについては推論できますが、ピクセル単位で何かがしっくりくるかどうかは判断できません。
アクセシビリティについては、そのチェックを承認ではなく初回チェックとして扱ってください。実際のアクセシビリティ対応にはコントラスト確認ツール、スクリーンリーダーでのテスト、そして多くの場合専門家によるレビューが必要です。特に広い対象に公開するものはそうです。Claudeがスクリーンショットを見たからといって、デザインがアクセシビリティチェック済みだとステークホルダーやコンプライアンス担当者に伝えないでください。
クライアント、顧客、チームメイトに何かを渡す前にも同じ注意が必要です。送る前に、Claudeが作成した内容を必ず読んでください。自信満々に間違ったインタラクションの注記が書かれた引き渡し資料は、資料がない方がましです。エンジニアはそれをもとに実装してしまうからです。
結果の質は与えた情報次第でもあります。2行のプロンプトから書かれたブリーフは一般的な内容になりますが、実際の会話の記録や実際のメモから書かれたブリーフは、プロジェクトの実情をきちんと反映します。
無料で始める
短いレッスンを重ねて習慣にする
この3つのレッスンで、デザイナーはときどきClaudeを試す段階から、ブリーフ・コピー・レビュー・引き渡し業務の一部として当たり前に使う段階へ進めます。
デザインプロセスの一部としてClaudeの使い方を学ぶ
こうしたワークフローについて読むことと、実際にそれを実行することは別の話です。Nightschool AIのカリキュラムは、最初のレッスンから実践的な無料レッスンで始まるため、ただ可能性を知るだけでなく、ブリーフ・レビュー・引き渡し資料にClaudeを使う習慣を実際に身につけられます。
よくある質問
ClaudeはFigmaのデザインを見られますか?
Figmaの中を直接見ることはできません。フレームを書き出すかスクリーンショットを撮ってClaudeに画像をアップロードすれば、その画像に写っているものを読み取って説明します。Figmaファイルに接続したり、レイヤーやコンポーネント、デザインシステムを見たりすることはできません。テキストで説明しない限りです。
Claudeは自分のプロダクトのUIコピーを書けますか?
はい。コンテキスト、ユーザーが置かれている状態、希望するトーンを説明すれば、Claudeはボタン、空の状態、ツールチップ、エラーメッセージについて複数の候補を生成できます。文字数制限や既存のコピーパターンといった実際の制約条件を与えた方が、オープンエンドな依頼よりも良い結果になります。
Claudeは他のデザイナーからのレビューの代わりになりますか?
いいえ。チームレビューに持ち込む前に明らかなわかりやすさや一貫性の問題を見つける初回チェックとしては役に立ちますが、ユーザーやブランド、チームがすでに議論を重ねてきたトレードオフによって磨かれたセンスは持っていません。レビューを置き換えるのではなく、レビューの前に自分の考えを整理するために使ってください。
Claudeはデザインのアクセシビリティをチェックできますか?
インターフェースを説明したりスクリーンショットを共有したりすれば、低いカラーコントラスト、あいまいなフォーカス状態、alt属性の欠落といった点を指摘する初回レビューができます。これは出発点であり、完全な審査ではありません。広く公開するものについては、専用のアクセシビリティツールと、可能であれば支援技術によるテストを組み合わせてください。
Claudeを使って良いデザインブリーフを書くには?
打ち合わせメモ、ざっくりした課題設定、ステークホルダーとの会話の記録など、実際の素材を与えてください。それを課題設定・制約条件・成功基準を含む構造化されたブリーフにまとめるよう依頼し、そこから編集していきます。空のプロンプトから作ったブリーフは一般的な内容になりますが、実際の入力から作ったブリーフは本当のプロジェクトを反映します。
Claudeはエンジニアが必要とする引き渡しドキュメントを作成できますか?
状態定義、インタラクションの注記、エッジケース、画面ごとのコピーといった記述的な部分は書けます。特にスクリーンショットをアップロードしてフローを説明すればなおよいです。正確なピクセル単位の寸法やアセットの書き出しは生成できないため、視覚的な赤入れ指示にはやはりデザインツールが必要です。
Claudeは自分のブランドボイスやデザインシステムを知っていますか?
会話の中で伝えた内容だけです。Claudeはブランドガイドラインやコンポーネントライブラリを記憶していません。最初にブランドボイスの資料、過去のコピー例、デザイントークンの説明を貼り付けておけば、その後の会話でそのコンテキストを使います。
本当に役立つレビューを得る最善の方法は?
フロー全体の一般的なレビューを依頼するのではなく、一画面について狭く具体的な質問をしてください。「この画面でプライマリアクションは明確か」は、「このデザインをどう思うか」よりも的確で行動につながる答えを引き出します。