ロゴをClaude Designに組み込む方法と、できないことの現実

「ロゴを入れてください」が通じないという現実

最初にはっきり言う。Claude Designには、現時点でロゴファイルを直接アップロードして自動認識させる機能がない。SVGをドロップして「これを使え」ができない。PNGをそのまま貼り込む機能もない。

この事実を知らずにプロンプトで「会社ロゴを入れてください」と書くと、Claude Designは自動的にそれっぽいロゴを生成してくる。シンプルな文字だったり、謎のアイコンだったり。当然クライアントには出せない。最初これをやって、「なんか違うロゴが入ってる」と5回作り直した経験がある。

---

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

では何ができるか

この制約の中で実際に使えるアプローチを3つ紹介する。

1. テキストロゴなら完全再現できる

ロゴがシンプルな文字ベース（例：会社名を特定フォントで表示しているタイプ）なら、かなり正確に指定できる。

ロゴ: 「NANAKAZOKU」をHelvetica Neueで表示。
ウェイトはBold。文字間隔を0.2em広げて全大文字。
カラー: #1A1A2E（濃紺）
サイズは24px相当。

これで意図に近いものが出る。重要なのはフォント名・ウェイト・カラーコード・文字間隔の4点を正確に指定することだ。「太めの青いフォント」では毎回違うものが出る。フォント名が分からなければ、Figmaやブランドガイドラインを掘り返して確認する価値がある。

2. ロゴの構造をテキストで翻訳する

自分のロゴを目で見て、言語に変換するトレーニングをする。たとえば：

左側に小さな正三角形（頂点が上、黒塗り）。
その右横5pxに会社名テキスト。
三角形の高さと文字の高さを揃える。

このような「ロゴの構造説明」をプロンプトに組み込む。正確には再現できないが、デザインのプレースホルダーとして使えるレベルには持っていける。複雑なマークのロゴほど再現精度は下がるので、期待値調整が必要だ。

3. ロゴエリアを「ダミー枠」として指示する

実は一番現実的なのがこれ。

左上にロゴ配置用のプレースホルダーを入れてください。
200x60pxの横長エリア、背景白で「[LOGO]」とグレーテキスト。
実際のロゴは後で差し替えます。

このプレースホルダーアプローチを使えば、Claude Designで全体レイアウトを設計して、ロゴだけFigmaやPhotoshopで後乗せするワークフローになる。NANAKAZOKUではこの方法でクライアントワークを進めていることが多い。「まずClaude Designで構成を固める、ロゴは後乗せ」というフローに慣れると、むしろスピードが上がった。

---

※Figma: デザイナーが多く使うUIデザインツール。Claude Designの主要な比較対象。

やってはいけない罠

「ロゴは添付の画像を参照」は効かない

Claude Designのチャットに画像を貼っても、そのロゴを正確にトレースして再現する機能はない。参照にはなるが、似た何かが生成されるだけで、精度はかなり低い。何回やっても「なんか違う」という結果になった。

「ブランドカラーに合わせて」も危ない

ロゴ説明でブランドカラーを伝えていない状態で「ブランドカラーに」と書いても意味がない。必ずHEXコードで明示する。「青っぽいブランドカラー」だと毎回違う青が出てくる。

クライアントに生成ロゴをそのまま見せない

「仮のロゴ」であることを伝えずに提案してしまうと、後で修正が難しくなる。プレースホルダーで作った資料は必ず「ロゴは差し替え予定」と一言入れておく。

---

まとめ

• テキストロゴ: フォント・サイズ・カラー・間隔を全部明示すれば再現精度は高い
• アイコン入りロゴ: 構造をテキストで説明するか、プレースホルダーに留めるのが現実的
• 後工程で合成: Claude Designをレイアウトのプロトタイプとして使い、ロゴは別ツールで乗せる

「ロゴが再現できないからClaude Designは使えない」ではなく、「ロゴエリアをうまく設計してから乗せ替える」ワークフローに切り替えると、実務では十分機能する。

※プロトタイプ: 実際の開発前に作る試作品。Claude Designでは操作可能なUIプロトタイプを生成できる。