ads-dna

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

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

クイックリファレンス

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

プロセス

ステップ 1：URL を収集する

ユーザーが URL を指定していない場合は、次のように尋ねます。

「ブランド DNA の分析対象となるウェブサイトの URL を教えてください。（例：https://yoursite.com）」

ステップ 2：ページを取得する

WebFetch toolを使用して各ページを取得します。URL ごとに、次の取得プロンプトを使用します。

「このページにあるすべての表示テキスト、<style>ブロックの全内容、インラインの style=属性、<meta>タグ、Google Fonts の@import URL、見つかったすべてのog:image の値を返してください。」

次の順序で取得します。

1. ホームページ（<url>）
2. About ページ：<url>/about、次に<url>/about-us、次に<url>/our-storyを試します
3. 製品／サービスページ：<url>/product、次に<url>/products、次に<url>/servicesを試します

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

2 次ページが 404 またはリダイレクトエラーを返した場合は、ページ数を減らして処理を続け、次のように記録します。 「2 次ページを利用できません。ホームページのみを基に抽出しました。信頼度が低い場合があります。」

ステップ 2b：ブランドのスクリーンショットを撮影する

ページの取得後、ブランドを包括的に位置づけるために 3 枚のスクリーンショットを撮影します。 これらは/ads generateでビジュアルスタイルの参照として使われます。Pomelli が広告画像を実際のブランドの美的スタイルに合わせる際に使用する方法と同じです。

次のスクリーンショットを撮影します。

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 がインストールされていない、ネットワークエラー、タイムアウトする JavaScript を多用した SPA）：

• 次のメッセージを記録します："Screenshot capture skipped; run: python3 -m playwright install chromium"
• スクリーンショットなしで続行します
• brand-profile.json にscreenshotsフィールドを設定しないでください

ステップ 3：ブランド要素を抽出する

取得した HTML から、次の要素を抽出します。

色：

• og:imageメタタグ → 支配的な色を分析します（目立つ 16 進カラー値を 2～3 個記録）
• body、header、.hero、.btn-primaryの CSS background-color
• h1、h2、.btnの CSS color
• .cta、.buttonの CSS border-colorまたはbackground
• プライマリ（最も目立つブランドカラー）、セカンダリ（補助色）、背景色、テキスト色を特定します

タイポグラフィ：

• @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 と、表示されているヒーロー画像の説明から判断）：

• 写真か、イラストか、フラットデザインか
• 被写体（人物、製品、抽象的なもの、データ）
• 構図のスタイル（すっきり／ミニマルか、情報量が多い／エディトリアルか）

避けるべき要素（ブランドのポジショニングから推定）：

• エンタープライズ／B2B ブランド → 「安っぽいストックフォト」、「消費者向けライフスタイル画像」を追加
• 医療・ヘルスケア → 「資格のない人による医療的主張」、「使用前後の画像」を追加
• 金融 → 「一攫千金を連想させる画像」、「非現実的な富の誇示」を追加
• 消費者向けブランド → 通常、避けるべき要素はありません

ステップ 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 を書き込む

現在の作業ディレクトリ（ユーザーが Claude Code を実行している場所）にある ./brand-profile.json に 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 との連携

Visual Designer エージェントは、banana を使用して画像を生成する際、コンセプトごとに最も関連性の高いスクリーンショットをスタイルの参考として使用します。たとえば、製品に焦点を当てたコンセプトでは製品ページのスクリーンショットを参照し、ブランド認知度を高めるコンセプトではホームページまたは会社概要ページのスクリーンショットを参照します。

制限事項

• コンテンツが少ない場合：本文が200語未満のサイトでは、信頼度の低いプロフィールが生成されます。 注：「抽出の信頼度が低く、分析に利用できるコンテンツが限られています。」
• 動的サイト：JavaScript で描画されるコンテンツは取得できない場合があります。Playwright はデフォルトでは使用されません。サイトが SPA／React で、静的 HTML がないように見える場合は、その旨を記載してください。
• 複数ブランドを持つ企業：このツールでは URL ごとに1つのプロフィールを作成します。ブランドまたは製品ラインごとに個別に実行してください。
• ダークモードのサイト：本文の背景色が #333 以下の場合は、背景色とテキストの値を入れ替えてください。
• 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"]
  }
}