UX における Claude Design

このページは、GitLab の UX 業務における Claude Design の活用ベストプラクティスとガイドラインについて説明します。 より広範な UX における AI 利用 ガイダンスを補完するもので、Claude のデザイン関連能力に固有のアドバイスを提供します。

Claude Design とは、UI のコンセプト生成、デザインレビュー、UI テキストの作成、プロトタイプの作成、エンドツーエンドのデザインプロセスのサポートといったデザイン関連タスクに Claude（Anthropic の AI アシスタント）を使うことを指します。

はじめに

Claude Design を使う前に、必ず以下を読んでください。

• UX における AI 利用 — GitLab の UX 業務における一般的な AI ガイダンス
• AI 利用要件と FAQ
• 汎用 AI ツール利用要件

Claude は私たちの 承認済み AI ツール の 1 つです。そこで定義されたデータ分類レベルを必ず尊重してください。

Claude Design をいつ使うか

Claude Design は、デザイン判断やユーザーリサーチの代わりではなく、クリエイティブの加速装置や思考のパートナーとして最もよく機能します。

アイデア出しと探索

• 方向性を決める前に、複数のデザイン方向性を素早く生成して問題空間を探索する。
• 見落としていそうなエッジケース、エラー状態、空の状態についてブレインストーミングする。
• 議論の出発点としてユーザーフローやインタラクションパターンの草案を作る。
• 異なるユーザーコンテキストやペルソナで機能がどう見えるかを探索する。

UI テキストとコンテンツ

• エラーメッセージ、ツールチップ、空の状態、マイクロコピーを書いて改善する。
• GitLab のブランドボイス に合うようトーンを調整する — Claude にコンテンツをより明確に、より短く、より人間的にするよう依頼してください。
• 実験のために UI テキストの A/B テストバリエーションを生成する。
• ドキュメントやハンドオフメモのためにデザインの意図を平易な言葉に変換する。

Claude Design を使うべきでないとき

• ユーザーリサーチを置き換えてはいけません: Claude は実際のユーザーの行動、感情、コンテキストをシミュレートできません。デザインの意思決定は必ず実際のユーザーで検証してください。
• 初期の AI 出力を最終デザインとして使わない: Claude の出力は出発点として扱ってください。ユーザーに届くすべてのデザインは、人間のデザイナーによってレビュー・改善され、責任を持たれる必要があります。
• センシティブまたは重大な意思決定には使わない: セキュリティ、プライバシー、または脆弱なユーザーのアクセシビリティに影響を与えるデザインには、慎重な人間の監督が必要です。
• Pajamas Design System を飛ばさない: Claude は Pajamas に沿わないパターンを提案することがあります。出力が私たちのデザインシステムに合致しているか必ず確認してください。

ベストプラクティス

効果的なデザインプロンプトを書く

Claude の出力品質はプロンプトの品質に大きく依存します。豊富なコンテキストを提供してください。

最初からやり直すのではなく、会話を通じてプロンプトをイテレーションしてください。フォローアップの質問をして出力を洗練させてください。

デザインの品質を維持する

• アウトプットに責任を持つ: Claude が生成したデザインコンテンツを共有する前に、レビュー・編集し、責任を引き受けてください。
• Pajamas との整合性をチェックする: 提案されたコンポーネント、パターン、言葉遣いが Pajamas Design System に合致しているか確認してください。
• 実ユーザーでテストする: AI が生成したデザインは仮説です。ユーザビリティテストや他のリサーチ手法で検証してください。
• アクセシビリティの主張は事実確認する: Claude はアクセシビリティ改善を提案することがありますが、必ず WCAG ガイドライン と照らし合わせ、支援技術でテストしてください。
• テンプレートのような出力を避ける: Claude の出力が一般的すぎると感じる場合は、実際のプロダクトから具体的なコンテキストや例を追加してください。

協働と共有

• レビュアーがプロセスを理解できるよう、Claude を活用したデザインの意思決定を Issue や MR に文書化してください。
• 集合的な知識を構築するために、成功と失敗の両方をチームに共有してください。

透明性を保つ

一般的な AI 利用ガイドの 透明性のベストプラクティス に従ってください。

• 成果物のどの部分で Claude の助けを使ったかを記載する。
• リサーチレポート、デザイン仕様、ユーザー向けの意思決定における AI の関与を開示する。
• AI の使用は価値を加えるために言及し、品質の低さや責任回避の言い訳にしない。

アクセシビリティへの配慮

Claude Design はアクセシビリティの問題の特定には役立ちますが、適切なアクセシビリティテストの代わりにはなりません。

• 一般的なアクセシビリティ問題（色のコントラスト、フォーカス順序、ラベルの明瞭さ）についてデザインをレビューするよう Claude に依頼してください。
• 提案は必ず GitLab のアクセシビリティガイドライン と Pajamas のアクセシビリティドキュメント と照らし合わせて検証してください。
• 実際の支援技術でテストし、可能であれば障害を持つユーザーでテストしてください。
• Claude を、アクセシブルな UI テキストの代替案（alt テキスト、ARIA ラベル、説明的なボタンラベル）の出発点として使い、その後レビューしてください。

推奨事項

ページのソースコードを見る - ページの編集 - please contribute.