Ads DNA: ブランド DNA 抽出ツール

ウェブサイトからブランド・アイデンティティを抽出し、brand-profile.json として保存します。 これは /ads create、/ads generate、/ads photoshoot で使用されます。

クイック リファレンス

コマンド	動作
/ads dna <url>	完全なブランド抽出 → brand-profile.json
/ads dna https://acme.com --quick	高速抽出（ホームページのみ）

プロセス

ステップ 1: URL を取得

ユーザーが URL を提供していない場合、以下のように質問します:

"What website URL should I analyze for brand DNA? (e.g. https://yoursite.com)"

ステップ 2: ページを取得

WebFetch ツールを使用して各ページを取得します。各 URL に対して、以下の取得プロンプトを使用します:

"Return all visible text content, the full contents of any <style> blocks, inline style= attributes, <meta> tags, Google Fonts @import URLs, and any og:image values found on this page."

以下の順序で取得します:

1. ホームページ (<url>)
2. About ページ: <url>/about を試す、その次に <url>/about-us、その次に <url>/our-story
3. 商品／サービス ページ: <url>/product を試す、その次に <url>/products、その次に <url>/services

--quick フラグが指定された場合: ホームページのみを取得します。ステップ 2 と 3 をスキップします。

セカンダリ ページが 404 またはリダイレクト エラーを返す場合は、ページ数を減らして続行し、以下のように記録します: "Secondary pages unavailable; extraction based on homepage only. Confidence may be lower."

ステップ 2b: ブランド スクリーンショットをキャプチャ

ページを取得した後、包括的なブランド アンカリングのために 3 つのスクリーンショットをキャプチャします。 これらは /ads generate 中のビジュアル スタイル リファレンスとして機能します。Pomelli が ad イメージを実際のブランド美学にアンカリングするために使用するのと同じアプローチです。

以下をキャプチャします:

1. ホームページ ヒーロー セクション (折り目上部):

python ~/.claude/skills/ads/scripts/capture_screenshot.py [url]

保存先: ./brand-screenshots/{domain}_homepage.png

2. 商品またはサービス ページ:

python ~/.claude/skills/ads/scripts/capture_screenshot.py [url]/products

保存先: ./brand-screenshots/{domain}_product.png

3. About ページ (ブランド パーソナリティ):

python ~/.claude/skills/ads/scripts/capture_screenshot.py [url]/about

保存先: ./brand-screenshots/{domain}_about.png

ページが見つからないか、エラーが返された場合は、そのページをスキップして残りのページを続行します。

--quick フラグが指定された場合: スクリーンショット キャプチャを完全にスキップします。

キャプチャに失敗した場合 (Playwright がインストールされていない、ネットワーク エラー、JS が多い SPA がタイムアウトする場合):

• ログに記録: "Screenshot capture skipped; run: python3 -m playwright install chromium"
• スクリーンショットなしで続行
• brand-profile.json の screenshots フィールドを設定しない

ステップ 3: ブランド要素を抽出

取得した HTML から以下を抽出します:

カラー:

• og:image メタ タグ → 支配的な色を分析（2～3 つの prominent hex 値を記録）
• body、header、.hero、.btn-primary の CSS background-color
• h1、h2、.btn の CSS color
• .cta、.button の CSS border-color または background
• 識別: primary（最も prominent なブランド色）、secondary（サポート色）、background、text

タイポグラフィ:

• @import url(https://fonts.googleapis.com/...) → URL パスからフォント名を抽出
• h1、h2、body、.headline の CSS font-family
• Google Fonts URL が family=Inter:wght@... を含む場合、heading_font = "Inter"

ボイス: ヒーロー ヘッドライン、サブヘッドライン、About ページのイントロ、CTA ボタン テキストを分析します。 これらのヒューリスティクスを使用して、各軸を 1～10 でスコア付けします:

シグナル	スコア方向
「you/your」を頻繁に使用	formal_casual → casual (+2)
技術用語を使用	expert_accessible → expert (-2)
短いキャッチーな文（≤8 語）	bold_subtle → bold (+2)
ヒーローのデータ／統計	rational_emotional → rational (-2)
「Transform」「revolutionize」「disrupt」	traditional_innovative → innovative (+2)
顧客の推奨文をリード	rational_emotional → emotional (+2)
業界賞、「trusted by X」	traditional_innovative → traditional (-1)

信頼度スコアリング

各ボイス軸は、シグナル数に基づいて信頼度評価を取得します:

• 高 (3 以上のシグナル): 軸位置の強力な証拠
• 中 (2 個のシグナル): 中程度の証拠、検証が必要な場合がある
• 低 (1 個のシグナル): 弱い証拠、推定値として扱う

利用可能な場合は、構造化データも抽出します: schema.org マークアップ、Open Graph タグ (og:title、og:description、og:image)、Twitter Card メタデータ。

イメージ スタイル (og:image と表示されるヒーロー イメージの説明から):

• 写真対イラスト対フラット デザイン
• 主題（人、商品、抽象、データ）
• 構成スタイル（clean/minimal 対 busy/editorial）

禁止要素 (ブランド ポジショニングから推測):

• エンタープライズ／B2B ブランド → 「cheesy stock photos」「consumer lifestyle imagery」を追加
• ヘルスケア → 「unqualified medical claims」「before/after imagery」を追加
• ファイナンス → 「get rich quick imagery」「unrealistic wealth displays」を追加
• コンシューマー ブランド → 通常、禁止要素なし

ステップ 4: brand-profile.json をビルド

正確なスキーマについて ~/.claude/skills/ads/references/brand-dna-template.md を参照してください。

スキーマに厳密に従って JSON オブジェクトを構築します。確信を持って抽出できないフィールドについては null を使用してください。推測しないでください。

低信頼度フィールドの例:

"typography": {
  "heading_font": null,
  "body_font": "system-ui",
  "pairing_descriptor": "system default (Google Fonts not detected)"
}

ステップ 5: brand-profile.json を書き込む

JSON を現在の作業ディレクトリ（ユーザーが Claude Code を実行している場所）の ./brand-profile.json に書き込みます。

スクリーンショットがステップ 2b で正常にキャプチャされた場合、screenshots フィールドを含めます:

"screenshots": {
  "homepage": "./brand-screenshots/{domain}_homepage.png",
  "product": "./brand-screenshots/{domain}_product.png",
  "about": "./brand-screenshots/{domain}_about.png"
}

正常にキャプチャされたスクリーンショットのみを含めます。ページが見つからないか、エラーが発生した場合は、そのキーを省略します。ステップ 2b がスキップされた場合、またはすべてのキャプチャが失敗した場合は、screenshots フィールド全体を省略します。

ステップ 6: 確認と要約

ユーザーに表示:

✓ brand-profile.json saved to ./brand-profile.json

Brand DNA Summary:
  Brand: [brand_name]
  Voice: [descriptor 1], [descriptor 2], [descriptor 3]
  Primary Color: [hex]
  Typography: [heading_font] / [body_font]
  Target: [age_range] [profession]
  Screenshots: [N captured (homepage, product, about) in ./brand-screenshots/] OR [skipped]

Run `/ads create` to generate campaign concepts from this profile.

ビジュアル デザイナー統合

visual-designer エージェントは、banana を使用してイメージを生成するときに、コンセプトごとに最も関連性の高いスクリーンショットをスタイル リファレンスとして使用します。たとえば、製品フォーカスのコンセプトは製品ページのスクリーンショットを参照し、ブランド認知コンセプトはホームページまたは about ページのスクリーンショットを参照します。

制限事項

• スパース コンテンツ: テキスト コンテンツが 200 語未満のサイトは、低信頼度プロファイルを生成します。 記録: "Low confidence extraction; limited content available for analysis."
• 動的サイト: JavaScript でレンダリングされたコンテンツはキャプチャされない場合があります。Playwright はデフォルトでは使用されません。サイトが static HTML がない SPA/React のように見える場合は、この点に注記してください。
• マルチ ブランド エンタープライズ: このツールは、URL ごとに 1 つのプロファイルを作成します。各ブランド／製品ラインについて個別に実行してください。
• ダーク モード サイト: body background が #333 以上暗い場合は、background/text 値を交換します。
• CSS-in-JS: モダン React サイトは、抽出可能な CSS を持たない場合があります。og:image の色をフォールバックとして使用します。

brand-profile.json スキーマ

{
  "schema_version": "1.0",
  "brand_name": "string",
  "website_url": "string",
  "extracted_at": "ISO-8601",
  "voice": {
    "formal_casual": 1-10,
    "rational_emotional": 1-10,
    "playful_serious": 1-10,
    "bold_subtle": 1-10,
    "traditional_innovative": 1-10,
    "expert_accessible": 1-10,
    "descriptors": ["adjective1", "adjective2", "adjective3"]
  },
  "colors": {
    "primary": "#hexcode or null",
    "secondary": ["#hex1", "#hex2"],
    "forbidden": ["#hex or color name"],
    "background": "#hexcode",
    "text": "#hexcode"
  },
  "typography": {
    "heading_font": "Font Name or null",
    "body_font": "Font Name or system-ui",
    "pairing_descriptor": "brief description"
  },
  "imagery": {
    "style": "professional photography | illustration | flat design | mixed",
    "subjects": ["subject1", "subject2"],
    "composition": "brief description",
    "forbidden": ["element1", "element2"]
  },
  "aesthetic": {
    "mood_keywords": ["keyword1", "keyword2", "keyword3"],
    "texture": "minimal | textured | mixed",
    "negative_space": "generous | moderate | dense"
  },
  "brand_values": ["value1", "value2", "value3"],
  "target_audience": {
    "age_range": "e.g. 25-45",
    "profession": "brief description",
    "pain_points": ["pain1", "pain2"],
    "aspirations": ["aspiration1", "aspiration2"]
  }
}