brand-dna

ブランド DNA — ブランドアイデンティティ抽出ツール

ウェブサイトからブランドアイデンティティを抽出し、ほかのスキルがブランドに一貫した出力を作成するために利用できる、構造化された brand-profile.json を生成します。

インストール

git clone https://github.com/thatrebeccarae/claude-marketing.git && cp -r claude-marketing/skills/brand-dna ~/.claude/skills/

クイックリファレンス

コマンド	内容
"Extract brand DNA from https://example.com"	完全な抽出 → brand-profile.json
"Quick brand profile for https://example.com"	ホームページのみの抽出（高速ですが、確度は低くなります）

依存関係なし

このスキルは WebFetch ツールのみを使用します。Python スクリプト、Playwright、外部 API は必要ありません。Claude Code を実行できる環境であれば、どこでも動作します。

抽出プロセス

ステップ 1：URL の収集

ユーザーから URL が提供されていない場合は、次のように尋ねます。

「分析するウェブサイトの URL を教えてください。（例：https://yoursite.com）」

ステップ 2：ページの取得

WebFetch ツールを使って、ページの内容を取得します。各 URL について、次の情報を要求します。

• 表示されるすべてのテキストコンテンツ
• <style> ブロックの全内容
• インラインの style= 属性
• <meta> タグ（特に og:image、description）
• Google Fonts の @import URL
• 外部スタイルシートを参照する <link> タグ

取得順序：

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

クイックモード： ユーザーが簡易抽出を希望する場合は、ホームページのみを取得し、ページ 2 と 3 は省略します。

追加ページが 404 を返すか、ホームページにリダイレクトされる場合は、ページ数を減らして続行し、確度が低下することを記録します。

ステップ 3：ブランド要素の抽出

色

• プライマリカラー： CSS の .hero、.btn-primary、header における background-color、または og:image の主要な色から、最も目立つブランドカラーを特定します
• セカンダリカラー： CTA、アクセント、ボーダーから補助的なパレットを特定します
• 背景／テキスト： body の background-color と color
• 推測禁止： ブランドのポジショニング（特定できる場合は競合他社の色など）から推測しないでください
• ダークモードの検出： body の背景色が #333 またはそれより暗い場合は、背景色とテキスト色を入れ替えます

CSS の対象： body、header、.hero、.btn、.cta、h1、h2 の background-color、color、border-color

タイポグラフィ

• Google Fonts： @import url(https://fonts.googleapis.com/css2?family=...) から抽出し、URL からフォント名を解析します
• CSS の font-family： h1、h2、body、.headline の宣言を確認します
• フォールバック： Google Fonts が検出されない場合は、heading_font を null に、body_font を "system-ui" に設定します

文体（各軸を 1〜10 で評価）

ヒーローの見出し、副見出し、会社概要ページの導入文、CTA ボタンのテキストを分析します。

シグナル	軸	方向
「you／your」を頻繁に使用する	formal_casual	カジュアル寄りに +2
専門用語、業界用語	expert_accessible	専門家寄りに -2
短く力強い文（8 語以下）	bold_subtle	大胆寄りに +2
ヒーローにデータ、統計、パーセンテージがある	rational_emotional	理性的寄りに -2
「Transform」「revolutionize」「disrupt」	traditional_innovative	革新的寄りに +2
顧客の推薦文を前面に出している	rational_emotional	感情的寄りに +2
「Trusted by X companies」、受賞歴	traditional_innovative	伝統的寄りに -1
ユーモア、言葉遊び、くだけた言い回し	playful_serious	遊び心寄りに +2
形式的な言葉遣い、三人称	playful_serious	真面目寄りに -2

各軸を 5（中立）から始め、見つかったシグナルに基づいて調整します。

特徴語： 文体全体のトーンを表す形容詞を 3〜5 個選びます。数値スコアを補足するものとし、同じ内容を繰り返さないようにします。

画像

• スタイル： プロフェッショナルな写真、イラスト、フラットデザイン、3D レンダリング、または混合
• 被写体： ヒーロー画像や製品写真に何が写っているか（人物、製品、抽象的なもの、データ）
• 構図： すっきり／ミニマル、情報量が多い／エディトリアル、暗い／ドラマチック、明るい／開放的
• 避けるべき要素： 業界から推測します（医療 → 資格のない医療主張を連想させる画像は避ける、B2B → 安っぽいストックフォトは避ける）

美的要素

• ムードのキーワード： ビジュアルの印象を表す形容詞を3つ（例：「信頼感のある」「モダンな」「高級感のある」）
• 質感： ミニマル、テクスチャあり、または混合
• 余白： 広め、標準、または密

ブランド価値

About ページ、ミッションステートメント、またはフッターから抽出します。繰り返し登場するテーマを探します。中核となる価値を3～5個選びます。

ターゲットオーディエンス

コピー、価格設定の傾向、ポジショニングから推測します。

• 年齢層： ビジュアルデザイン、言葉の複雑さ、製品の種類から推定します
• 職業： 製品／サービスの対象者
• 課題： ブランドが解決する問題（ヒーローコピーや機能の説明から判断）
• 願望： オーディエンスが達成したいこと（メリットを重視したコピーから判断）

ステップ4：brand-profile.json を作成する

REFERENCE.md のスキーマに厳密に従って JSON を作成します。確信を持って抽出できないフィールドには null を使用し、決して推測しないでください。

ステップ5：書き込みと確認

brand-profile.json を現在の作業ディレクトリに書き込みます。

次の概要を表示します。

Brand DNA extracted → brand-profile.json

  Brand: [brand_name]
  Voice: [descriptor 1], [descriptor 2], [descriptor 3]
  Primary Color: [hex]
  Typography: [heading_font] / [body_font]
  Audience: [age_range], [profession]

This profile can be consumed by:
  - seo-content-writer (voice matching)
  - email-composer (tone calibration)
  - frontend-design (visual identity)
  - pro-deck-builder (brand colors/fonts)
  - cross-platform-audit (brand consistency checks)

制限事項

• 情報が少ないサイト： 本文が200語未満の場合、プロファイルの信頼度は低くなります。その旨を出力に記載してください。
• SPA／React サイト： JavaScript でレンダリングされたコンテンツが WebFetch で完全に取得できない場合があります。検出した場合は、その旨を記載してください。
• 複数ブランドを展開する企業： URL ごとに1つのプロファイルを作成します。ブランドごとに個別に実行してください。
• CSS-in-JS： モダンな React／Next.js サイトでは、抽出可能な CSS がない場合があります。代替手段として og:image の分析を使用してください。

このスキルの使い方

次のように質問できます。

• 「https://example.com からブランドの DNA を抽出してください」
• 「クライアントのウェブサイトのブランドプロファイルを作成してください」
• 「https://competitor.com のブランドボイスとカラーを分析してください」
• 「https://example.com のホームページだけを対象に、簡易ブランドプロファイルを作成してください」
• 「このウェブサイトのブランドアイデンティティは何ですか？」