生成デザインを人に見せる前のチェックリスト

Claude Designで「いい感じのが出た！」と思って即送信したら、クライアントから「フォントが□□□□になってる」と返ってきたことがある。あれは恥ずかしかった。それ以来、人に見せる前に必ず確認するルーティンを作った。

なぜAI生成デザインには専用チェックが必要か

Figmaや手作業で作ったデザインとは違い、Claude Designの生成物は「見た目はOKでも細部が崩れている」というパターンが起きやすい。特に：

• 日本語テキストのレンダリング問題が出やすい
• 指定したはずのブランドカラーが微妙にズレて生成される
• スクリーンサイズを変えるとレイアウトが破綻する

「なんとなくOK」で送ると、後から修正コストがかかる。5分のチェックが数時間の手戻りを防ぐ。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。※Figma: デザイナーが多く使うUIデザインツール。Claude Designの主要な比較対象。

チェックリスト：7項目

1. 日本語フォント・文字化けの確認

• 豆腐（□□□）が出ていないか
• ひらがな・カタカナ・漢字が混在している箇所で字間がおかしくないか
• 英数字と日本語が混在する行の縦揃えがズレていないか

失敗談：見出しが「ゴシック体」で本文が「明朝体」と指定したら、書き出した時に両方ゴシックになってて見た目が単調になったことがある。エクスポート後に実機で確認が必要。

2. ブランドカラーの確認

• 指定した16進数カラーコードと実際の色を目視比較する（スポイトツールで確認）
• 白や黒に近い薄い色が無視されて白になっていることがある
• グラデーション指定の場合、開始色と終了色の両方を確認

確認コマンド（Figmaに取り込む場合）:
1. エクスポートしたSVGをFigmaにインポート
2. カラーパネルで全使用色をリスト表示
3. ブランドカラー一覧と照合

3. テキストのはみ出し・切れ

• 長い日本語テキストがボックスからはみ出していないか
• ボタンのラベルが「…」で切れていないか
• 縦書き指定をしていないのに縦書きになっていないか（たまに起きる）

4. 余白・スペーシングの整合性

• セクション間の余白が均等か（目視でいい）
• 左右の余白が揃っているか
• 要素が重なっていたり、隙間が空きすぎたりしていないか

ここは画面を50%まで縮小して確認するのが早い。全体のバランスが崩れているとすぐわかる。

5. レスポンシブ・モバイル表示（必要な場合）

• PCで作ったデザインをスマホ幅（375px）で確認する
• テキストが読めない小ささになっていないか
• ナビゲーションがハンバーガーメニューに対応しているか

レスポンシブ指定をしていても、スマホ表示が壊滅的なことがある。「レスポンシブ対応で」と書いただけではなく、ブレークポイントを具体的に指定しないと信用できない。

6. コピー・テキスト内容の確認

• プレースホルダーテキスト（「Lorem Ipsum」「ここにテキスト」）が残っていないか
• 架空の電話番号・住所・メールアドレスが含まれていないか
• 数字（価格、日付）が正しい形式か

よくある失敗：Claude Designが勝手に「03-XXXX-XXXX」とか「info@example.com」を入れてくる。そのまま渡すと「これ本物の番号ですか？」と聞かれる。

7. エクスポート品質の確認

• PNGなら解像度が用途に十分か（Web用: 72dpi以上、印刷用: 300dpi以上）
• SVGの場合、テキストがアウトライン化されているか（フォント環境依存を防ぐ）
• ファイルサイズが想定内か（SNS投稿バナーで5MBはさすがに大きい）

実際のフロー：3分チェック

時間がない時の最低限バージョン：

1. 縮小表示で全体確認（レイアウト崩れを目視）
2. 日本語テキストをスキャン（豆腐・はみ出し）
3. ブランドカラーを1箇所スポイトで確認（色ズレチェック）
4. プレースホルダーを検索（「例」「テキスト」「サンプル」で全文検索）

この4ステップだけで、恥ずかしい失敗の8割は防げる。

チェックを習慣にするコツ

毎回「やばい送っちゃった」を経験するより、テンプレートにチェックリストを埋め込む方が早い。プロンプトの末尾に「エクスポート前に私がチェックすべき点を3つ列挙して」と追加すると、Claude Designがその生成物に特有の注意点を教えてくれることもある。

品質チェックは「完璧を目指す作業」ではなく「恥をかかないための最低限」と割り切ると続けやすい。

※プロンプト: AIへの指示文。Claude Designでは自然言語でデザインを指示する。