スタイルガイドのClaude Designへの渡し方

ガイドをそのまま貼っても何も起きない

最初にやったのは「PDFのスタイルガイドをテキストに変換してまるごと貼り付ける」だった。100行を超えるブランドルールを全部貼ったら、Claude Designはほぼ無視した。全体的に「なんとなくこの雰囲気」みたいな曖昧な出力が返ってきて、カラーコードも合っていなかった。

長すぎるガイドラインは読み飛ばされる。これが最初の教訓。

※Claude Design: Anthropic Labsが開発したAIビジュアルデザインツール。テキストプロンプトからUI・スライド・マーケ資料などを生成する。

3つの要素に絞り込む

今は以下の3点だけを最初に渡すようにしている。

プライマリカラー: #1A2B4C
フォント: 見出しはDM Sans Bold、本文はNoto Sans JP
トーン: 清潔感があり、少し硬め。エモーションより信頼感を重視

これだけで再現性がかなり上がった。全部渡そうとするより、「このデザインを規定する核心」を3つ選ぶ方が効く。余計な情報は削ぎ落として、決定的な要素だけに絞る。

ロゴ・既存デザインをリファレンス画像として渡す

テキストで説明するよりも、実際のデザイン物を画像で渡す方が圧倒的に速い。既存のWebサイトのスクリーンショットや、過去に作ったバナーを一枚渡して「このスタイルを踏襲して」と言うだけで、カラーもトーンもだいたい合ってくる。

ただし注意点がある。参照画像に「引き継ぎたくないデザイン要素」が混じっていると、それも拾われる。古いロゴが入った画像を渡したら、新しいデザインにも古いロゴが入ってきたことがある。渡す画像は「見せたい部分だけ」にトリミングしてから渡すのが正解。

NG集：渡してもうまくいかないもの

• 16ページのPDFブランドブック全文: 長すぎて核心が埋もれる。Claude Designには「今何を作るか」の文脈に絞った情報しか入らない
• 「モダンでクリーン」だけ: 抽象すぎる。どのAIツールに言っても同じ出力になる。「DM Sansを使い、余白多め」など具体語に変換してから渡す
• 禁止事項だけのリスト: 「グラデーションは禁止」より「フラットカラーのみ使用」の方が効く。ネガティブ指示よりポジティブ指示を優先する

再利用できるスニペットを作る

毎回同じブランド説明を書くのは無駄なので、プロジェクトの冒頭に貼るスニペットを作っている。

【ブランド設定】
カラー: メイン #2D4A8A / アクセント #FF6B35
フォント: 見出しNoto Sans JP Bold / 本文16px通常
雰囲気: B2Bスタートアップ。誠実さ重視。派手さより説得力
NG: 角丸多用・グラデーション過多・装飾アニメーション

これをコピペして毎回使うようになってから、アウトプットの一貫性がかなり上がった。初回からブランドに近いものが出るので、修正ラウンドが減る。プロジェクトごとにスニペットを管理しておくと、後から別の人が同じプロジェクトを触るときにも使い回せる。