visual-brand-extractor

ビジュアルブランド抽出ツール

クライアントのウェブサイトからビジュアルアイデンティティを抽出し、スライドやコンテンツアセット用に再利用可能なスタイルプリセットを生成します。これはエージェントが実行するスキルです。AI が WebFetch を介してページを読み取り、直接分析します。

クイックスタート

Extract visual branding from https://vapi.ai for the Vapi client.

入力

入力	必須	説明
ウェブサイト URL	はい	クライアントのホームページまたはランディングページの URL
クライアント名	はい	出力ファイルの命名に使用します
追加ページ	いいえ	製品ページ、ドキュメントページなど。抽出内容を充実させるために使用します

出力

clients/<client-name>/brand/visual-identity.md に 2 つのファイルが保存されます。

1. スライドプリセット — skills/create-html-slides/STYLE_PRESETS.md の形式に合わせた CSS カスタムプロパティ、タイポグラフィ、特徴的な要素
2. ブランド設定 JSON — skills/content-asset-creator の形式に合わせたシンプルな色・フォント設定

---

プロセス

フェーズ 1：対象ページを取得する

ブランドを代表するサンプルを得るため、2〜3 ページを取得します。

1. ホームページ（必須）— ブランドを最もよく表現するページ
2. 製品／機能ページ（利用可能な場合）— 色やレイアウトの使い方を詳しく確認します
3. ブログまたは概要ページ（任意）— 二次的なデザインの文脈を確認します

各 URL に対して、次のようなプロンプトで WebFetch を使用します。

「このページのコンテンツをすべて抽出してください。必要な情報は、すべての色の値（hex、rgb、hsl）、フォントファミリー名、CSS クラス名（特に Tailwind ユーティリティクラス）、CSS カスタムプロパティ／変数、メタタグ、ページレイアウトの全体的な構造です。正確なカラーコードとフォント名を保持してください。」

フェーズ 2：カラーパレットを抽出する

取得したコンテンツを分析し、カラーパレットを特定します。次の情報源を優先順位の高い順に確認します。

2.1 CSS カスタムプロパティ

色の変数を含む :root、html、または body ブロックを探します。

--color-primary, --primary, --brand, --accent
--bg-*, --background-*
--text-*, --foreground-*

2.2 メタタグ

次を確認します。

• <meta name="theme-color" content="#..."> — 多くの場合、ブランドのプライマリーカラーです
• <meta name="msapplication-TileColor" content="#...">

2.3 明示的な CSS カラー宣言

次のプロパティ内で色の値を検索します。

• background-color、background（グラデーションを含む）
• color（テキストの色）
• border-color、border
• box-shadow（アクセント／グローの色）
• fill、stroke（SVG ロゴの色）

2.4 Tailwind ユーティリティクラス

サイトで Tailwind CSS が使用されている場合は、以下の参照表を使ってユーティリティクラスを hex 値に対応付けます。

2.5 色を役割に分類する

役割	見分け方
bg-primary	body、html、または最も外側のコンテナに設定された background-color。最もよく使われる背景色です。
bg-secondary	カード、セクション、または二次コンテナの背景色。プライマリーとは少し異なります。
text-primary	body の color、または最もよく使われるテキストの色です。
text-secondary	控えめなテキストの色。サブタイトル、説明、.text-gray-* 要素に使われます。
accent	背景色でもテキスト色でもない、最も目立つ色です。ボタン、リンク、CTA、強調表示に使われます。<meta name="theme-color"> も確認してください。
accent-secondary	2 番目のアクセントカラー、またはグラデーションの組み合わせ色です。二次ボタンやホバー状態に使われます。
card-bg	カード、モーダル、または浮き上がった面の背景色（bg-primary と異なる場合）。

2.6 テーマの種類を判定する

bg-primary の輝度を確認します。

• ダークテーマ： 明るいテキストに対して、暗い背景（黒、ネイビー、チャコール）
• ライトテーマ： 暗いテキストに対して、白またはクリーム色の背景
• 混合： サイトで両方が使われている場合は、その旨を記録します（例：ダークなヒーローセクション＋ライトなコンテンツセクション）

---

フェーズ 3：タイポグラフィを抽出する

3.1 フォントの読み込み元を特定する

次の順序でフォントの読み込みを確認します。

1. Google Fonts の <link> タグ — フォント名は URL に含まれています。

   fonts.googleapis.com/css2?family=Inter:wght@400;700
   

   → フォント：Inter、ウェイト：400、700

2. Fontshare の <link> タグ — 同様の URL パターンです。

   api.fontshare.com/v2/css?f[]=clash-display@400,700
   

   → フォント：Clash Display

3. @font-face 宣言 — font-family の値を抽出します

4. font-family CSS プロパティ — 要素に直接指定された宣言を確認します

3.2 ディスプレイ用フォントと本文用フォントに分類する

役割	識別方法
ディスプレイ用フォント	h1、h2、.title、.heading、.hero-title、または最も大きい／太いテキストに適用されているフォントです。
本文用フォント	body、p、または一般的なコンテンツ要素に適用されているフォントです。

両方が同じフォントファミリーを使用している場合、単一ファミリーの組み合わせです（「Manrope + Manrope」のようなものです）。ディスプレイ用（700〜900）と本文用（400〜500）で使用されるウェイトの違いに注意してください。

3.3 プロプライエタリフォントに対応する

サイトでGoogle FontsまたはFontshareから入手できないフォントが使用されている場合は、以下のフォント代替表を使って、最も近い入手可能なフォントに置き換えます。

---

フェーズ4：ビジュアルパターンを分析する

CSSとページ構造を調べ、次のような美的特徴を確認します。

特徴	確認する項目	美的な意味合い
角丸	border-radius の値 — 大きい（12px以上、9999px）か、小さい（2〜4px）か、なし	角丸＝親しみやすく、モダンです。鋭角＝企業的で、大胆です。
グラデーション	背景での linear-gradient、radial-gradient の使用	グラデーション中心＝モダンなSaaSの美学です。
シャドウ	box-shadow の使用頻度と強さ	強いシャドウ＝奥行き／浮き上がりを表現します。なし＝フラット／ミニマルです。
余白	パディング／マージンのサイズ — ゆったり（4rem以上）か、詰まっている（1rem）か	余白が広い＝上質でミニマルです。密度が高い＝情報量が豊富です。
アニメーション	@keyframes、transition、transform の有無	動きが多い＝エネルギッシュです。最小限＝落ち着きがあり、プロフェッショナルです。
グリッドパターン	背景のグリッド／ドットパターン、装飾的なオーバーレイ	技術的／開発者向けの美学です。
グラデーションオーブ	位置指定された疑似要素での radial-gradient	モダンで、雰囲気のある美学です。
アクセントとしてのボーダー	セクションの色付き border-left または border-top	エディトリアルで、整理された美学です。

雰囲気をまとめる

上記の特徴をもとに、次の内容をまとめます。

1. 雰囲気： 形容詞を2〜4個（例：「クリーン、技術的、開発者向け、モダン」）
2. レイアウトの説明： 1文（例：「全幅のダークセクションに、中央揃えのコンテンツとゆったりとした余白を配置」）
3. 特徴的な要素： サイトで再現できるCSSパターンを3〜4個

---

フェーズ5：出力を生成する

両方の出力形式を含むファイル clients/<client-name>/brand/visual-identity.md を作成します。

出力テンプレート

# Visual Brand Identity: [Company Name]

**Extracted from:** [URL(s)]
**Date:** [YYYY-MM-DD]

---

## Slide Preset

**Vibe:** [2-4 adjectives]

**Layout:** [1 sentence describing dominant layout pattern]

**Typography:**
- Display: `[Font Name]` ([weight, e.g., 700/800])
- Body: `[Font Name]` ([weight, e.g., 400/500])

**Colors:**
```css
:root {
    --bg-primary: [hex];
    --bg-secondary: [hex];
    --text-primary: [hex];
    --text-secondary: [hex];
    --accent: [hex];
    --accent-secondary: [hex];
}
```

**Signature Elements:**
- [Element 1, e.g., "Subtle gradient orbs as background decoration"]
- [Element 2, e.g., "Rounded cards with 12px border-radius and light shadow"]
- [Element 3, e.g., "Accent-colored left border on feature blocks"]
- [Element 4, e.g., "Grid dot pattern overlay on hero sections"]

**Font Loading:**
```html
<link href="https://fonts.googleapis.com/css2?family=[Font1]:wght@[weights]&family=[Font2]:wght@[weights]&display=swap" rel="stylesheet">
```

---

## Brand Config (JSON)

For use with `content-asset-creator` and other skills:

```json
{
  "name": "[Company]",
  "primary_color": "[accent hex]",
  "secondary_color": "[accent-secondary hex]",
  "accent_color": "[accent hex]",
  "background": "[bg-primary hex]",
  "text_color": "[text-primary hex]",
  "font_heading": "[Display Font]",
  "font_body": "[Body Font]",
  "logo_url": "[if discovered, otherwise omit]"
}
```

---

## Extraction Notes

[Any notes about the extraction — proprietary fonts that were mapped, multiple themes detected, sparse CSS from JS-rendered sites, etc.]

---

フォント代替表

サイトでGoogle FontsまたはFontshareから入手できないプロプライエタリフォントが使用されている場合は、この対応表を使って最も近い代替フォントを探します。

フォントのカテゴリ	プロプライエタリフォントの例	Google Fontsの代替フォント	Fontshareの代替フォント
ジオメトリックサンセリフ	Circular、Roobert、Graphik、Product Sans	Plus Jakarta Sans、Outfit、Manrope	General Sans、Satoshi
ヒューマニストサンセリフ	Proxima Nova、Calibri、Gill Sans	Source Sans 3、DM Sans、Work Sans	—
ネオ・グロテスク	Akkurat、Aktiv Grotesk、Suisse Int'l	Space Grotesk、Archivo、Albert Sans	Switzer
モダンセリフ	Tiempos、Canela、GT Sectra	Fraunces、Cormorant、Playfair Display	Zodiak、Sentient
スラブセリフ	Sentinel、Clarendon、Rockwell	Zilla Slab、Roboto Slab	—
クラシックセリフ	Mercury、Chronicle、Minion	Source Serif 4、Lora、Libre Baskerville	Bespoke Serif
等幅	SF Mono、Berkeley Mono、Dank Mono	JetBrains Mono、Fira Code、Space Mono	Jet Brains Mono
ディスプレイ／装飾	GT Walsheim、Recoleta、Campton	Syne、Archivo Black、Bricolage Grotesque	Clash Display、Cabinet Grotesk

判断の目安： フォントのカテゴリがわからない場合は、次の特徴を確認します。

• 丸いドットと幾何学的な「o」→ ジオメトリックサンセリフ
• 線幅に変化があり、温かみがある → ヒューマニストサンセリフ
• 線幅が均一で、中立的 → ネオ・グロテスク
• コントラストの強いセリフ → モダンセリフ

---

Tailwind CSS カラーリファレンス

サイトでTailwindのユーティリティクラスが使用されている場合は、16進数値に対応付けます。

グレー

クラス	16進数	クラス	16進数
gray-50	#F9FAFB	gray-500	#6B7280
gray-100	#F3F4F6	gray-600	#4B5563
gray-200	#E5E7EB	gray-700	#374151
gray-300	#D1D5DB	gray-800	#1F2937
gray-400	#9CA3AF	gray-900	#111827
		gray-950	#030712

スレート（ダークテーマでよく使用）

クラス	16進数	クラス	16進数
slate-50	#F8FAFC	slate-500	#64748B
slate-100	#F1F5F9	slate-600	#475569
slate-200	#E2E8F0	slate-700	#334155
slate-300	#CBD5E1	slate-800	#1E293B
slate-400	#94A3B8	slate-900	#0F172A
		slate-950	#020617

ブルー

クラス	16進数	クラス	16進数
blue-400	#60A5FA	blue-700	#1D4ED8
blue-500	#3B82F6	blue-800	#1E40AF
blue-600	#2563EB	blue-900	#1E3A8A

グリーン

クラス	16進数	クラス	16進数
green-400	#4ADE80	green-600	#16A34A
green-500	#22C55E	green-700	#15803D

よく使われるアクセントカラー

クラス	16進数	クラス	16進数
indigo-500	#6366F1	purple-500	#A855F7
indigo-600	#4F46E5	violet-500	#8B5CF6
emerald-500	#10B981	amber-500	#F59E0B
teal-500	#14B8A6	rose-500	#F43F5E
cyan-500	#06B6D4	orange-500	#F97316

注： Tailwind クラスは bg-blue-600、text-gray-900、border-indigo-500 などの形式です。プロパティの接頭辞（bg-、text-、border-）を取り除くと、色トークンが得られます。その後、上記で16進数値を確認してください。

カスタム Tailwind テーマ（例：bg-brand、text-brand-light）の場合は、ページの <script> タグを確認し、カスタムカラーを定義する tailwind.config オブジェクトを探してください。

---

例外的なケース

JavaScript でレンダリングされるサイト（CSS が少ない）

多くの最新サイト（Next.js、React）は、JavaScript 経由でスタイルを挿入します。WebFetch で返されるインライン CSS が最小限の場合があります。この場合：

• class 属性内の Tailwind ユーティリティクラスに注目します
• <script> タグ内の埋め込み設定オブジェクトを確認します
• CSS-in-JS の出力を含む <style> タグを探します
• それでも情報が少ない場合は、ユーザーに「このサイトは動的なスタイルを使用しているようです。スクリーンショットを共有するか、ブランドガイドラインを直接提供していただけますか？」と尋ねます

複数の配色（ライト／ダークモード）

サイトによっては、prefers-color-scheme を使ってライトテーマとダークテーマの両方を定義しています。デフォルト（メディアクエリ外）のテーマを抽出します。ダークモードのバリエーションが検出された場合は、抽出メモのセクションに記載します。

色が多すぎる場合

エンタープライズ向けのサイトでは、数十色が使われている場合があります。次に注目してください：

• 主要なパレットについては、ヒーロー／ファーストビューのセクション
• アクセントカラーの特定については、ボタン／CTA の色
• 頻度分析：上位5～7色でブランドを定義します

使用可能なフォント情報がない場合

フォントの検出に完全に失敗した場合：

1. CSS コメントや設定にフォント名が記載されているか確認します
2. 全体的なデザインを見て、既存のスライドプリセットから合う組み合わせを選びます
3. 雰囲気に合わせて、安全で個性的な組み合わせを選びます。高級感を出すにはセリフ体の見出しフォント＋サンセリフ体の本文フォント、モダンなテック系には幾何学的なサンセリフ体を使います

---

例

https://vapi.ai でこのスキルを実行すると、次のような結果が得られる場合があります：

# Visual Brand Identity: Vapi

**Extracted from:** https://vapi.ai, https://docs.vapi.ai
**Date:** 2026-02-26

---

## Slide Preset

**Vibe:** Technical, developer-focused, clean, modern

**Layout:** Dark full-width sections with centered content, card-based feature grids, generous spacing

**Typography:**
- Display: `Inter` (700/800)
- Body: `Inter` (400/500)

**Colors:**
\```css
:root {
    --bg-primary: #0F172A;
    --bg-secondary: #1E293B;
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --accent: #22C55E;
    --accent-secondary: #3B82F6;
}
\```

**Signature Elements:**
- Subtle gradient orbs in background (green-to-blue radial gradients)
- Rounded cards with slate-800 background and subtle border
- Code-style monospace accents for technical terms
- Green accent on CTAs and interactive elements

**Font Loading:**
\```html
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800&display=swap" rel="stylesheet">
\```

(これは説明用の例です。実際の抽出結果は、ライブサイトの状態によって異なります。)

---

ヒント

• 通常はホームページだけで十分です。 ホームページでブランドを明確に確認できる場合は、追加のページは必要ありません。ホームページの情報が少ない場合や、サイトの他の部分と美的な雰囲気が異なる場合にのみ、2ページ目を取得してください。
• ボタンからアクセントカラーがわかります。 メインのアクセントカラーを特定する最も確実な方法は、ボタンやCTAの背景色を確認することです。
• ファビコンやロゴを確認してください。 SVGロゴには、fill の値としてブランドカラーがそのまま含まれていることがよくあります。
• 抽出しすぎないでください。 目安は、色が5～7色、フォントが1～2種類、特徴的な要素が3～4個です。それ以上は有用な情報ではなく、ノイズになります。
• 迷ったらシンプルにしてください。 3色のカラーパレット（背景色＋テキスト色＋アクセントカラー）と、2つのウェイトで使う1種類のフォントファミリーがあれば、すっきりと使いやすいプリセットになります。

依存関係

• Webページを読み取るためのWeb取得機能
• APIキーや有料ツールは不要です