brand-agency

Agency ブランドスタイリング

概要

Agency の公式ブランドアイデンティティとスタイルリソースにアクセスするには、このスキルを使用します。スタイルはネオブルータリズムの美学に基づいており、大胆な色使い、硬いシャドウ、力強いタイポグラフィが特徴です。

ブランドガイドライン

色

メインカラー：

• 背景（ライト）：#ffffff - 明るい背景
• 前景（ダーク）：#000000 - メインのテキストと暗い要素
• ミュート：#e5e5e5 - 控えめな背景、セカンダリ要素

プライマリパレット：

• プライマリ（オレンジ）：#e85d04 - メインのアクセント、CTA、ハイライト
• セカンダリ（イエロー）：#ffd60a - セカンダリのアクセント、警告、注目を集める要素
• アクセント（ブルー）：#3a86ff - リンク、インタラクティブ要素、情報

チャート／拡張カラー：

• チャートグリーン：#38b000 - 成功状態、肯定的な指標
• チャートレッド：#d62828 - エラー状態、破壊的な操作

タイポグラフィ

フォントスタック：

• 見出し：Geist ExtraBold（ウェイト 800）、フォールバック：Arial
• 本文テキスト：EB Garamond、フォールバック：Georgia
• 等幅／コード：Geist Mono、フォールバック：Courier New

Google Fonts のインポート：

@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=Geist:wght@800&family=Geist+Mono:wght@400;500&display=swap');

CSS 変数：

:root {
  --font-body: 'EB Garamond', Georgia, serif;
  --font-heading: 'Geist', Arial, sans-serif;
  --font-mono: 'Geist Mono', 'Courier New', monospace;
}

ネオブルータリズムスタイル

シャドウ：

• ハードシャドウのオフセット：4px 4px 0px 0px #000000
• ぼかしなし（stdDeviation: 0）
• CSS：box-shadow: 4px 4px 0px 0px #000000;
• SVG フィルター：<feDropShadow dx="4" dy="4" stdDeviation="0" flood-color="#000000"/>

ボーダー：

• 幅：3px
• 色：#000000
• スタイル：実線
• 角丸：0（角を丸めない）

主な原則：

• 要素間の高いコントラスト
• 大胆で彩度の高い色
• グラデーションなし（フラットカラーのみ）
• 力強い黒の輪郭線
• オフセットされたハードシャドウ
• 角丸なし

適用ガイドライン

SVG グラフィック

Agency ブランドスタイルで SVG を作成するには：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400">
  <defs>
    <filter id="shadow" x="-20%" y="-20%" width="150%" height="150%">
      <feDropShadow dx="4" dy="4" stdDeviation="0" flood-color="#000000" flood-opacity="1"/>
    </filter>
  </defs>

  <circle cx="200" cy="200" r="80"
    fill="#e85d04"
    stroke="#000000"
    stroke-width="3"
    filter="url(#shadow)"/>
</svg>

プレゼンテーション（Marp／PowerPoint）

種類別のスライド背景：

• タイトルスライド：プライマリオレンジ #e85d04
• コンテンツスライド：ライト #ffffff またはミュート #e5e5e5
• アクセントスライド：セカンダリイエロー #ffd60a、アクセントブルー #3a86ff
• ダークスライド：前景 #000000

テキストの色：

• 明るい背景の場合：#000000
• 暗い背景／色付きの背景の場合：#ffffff

Web／HTML

:root {
  /* Colors */
  --color-background: #ffffff;
  --color-foreground: #000000;
  --color-primary: #e85d04;
  --color-secondary: #ffd60a;
  --color-accent: #3a86ff;
  --color-success: #38b000;
  --color-error: #d62828;
  --color-muted: #e5e5e5;

  /* Typography */
  --font-body: 'EB Garamond', Georgia, serif;
  --font-heading: 'Geist', Arial, sans-serif;
  --font-mono: 'Geist Mono', 'Courier New', monospace;

  /* Shadows */
  --shadow: 4px 4px 0px 0px #000000;
  --shadow-sm: 2px 2px 0px 0px #000000;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 800;
}

/* Body */
body {
  font-family: var(--font-body);
  color: var(--color-foreground);
  background: var(--color-background);
}

/* Buttons */
.btn {
  background: var(--color-primary);
  color: white;
  border: 3px solid var(--color-foreground);
  box-shadow: var(--shadow);
  border-radius: 0;
  font-family: var(--font-heading);
  font-weight: 800;
}

/* Cards */
.card {
  background: var(--color-background);
  border: 3px solid var(--color-foreground);
  box-shadow: var(--shadow);
  border-radius: 0;
}

/* Code */
code, pre {
  font-family: var(--font-mono);
  background: var(--color-foreground);
  color: white;
  border: 3px solid var(--color-foreground);
}

色の使い分け早見表

用途	色	Hex
プライマリアクション	オレンジ	#e85d04
セカンダリアクション	イエロー	#ffd60a
リンク／情報	ブルー	#3a86ff
成功	グリーン	#38b000
エラー／危険	レッド	#d62828
テキスト（明るい背景）	ブラック	#000000
テキスト（暗い背景）	ホワイト	#ffffff
ミュート／無効	グレー	#e5e5e5

アセット

ロゴ： assets/logo.svg - ネオブルータリズムスタイルの Agency ロゴ（コード記号と幾何学図形を配したターミナルウィンドウ）

ソーシャルメディアテンプレート

Geist Mono フォントを使用した、ASCII アートスタイルのソーシャルメディア向け HTML テンプレートです。Playwright を使用して PNG にレンダリングします。

利用可能なテンプレート

テンプレート	サイズ	プラットフォーム
instagram/story-announcement	1080x1920	IG ストーリー
instagram/story-quote	1080x1920	IG ストーリー
instagram/post-title	1080x1350	IG 投稿
instagram/post-tips	1080x1350	IG 投稿
instagram/post-event	1080x1350	IG 投稿
youtube/thumbnail	1280x720	YT サムネイル
youtube/shorts-cover	1080x1920	YT Shorts
social/cover-banner	1584x396	LinkedIn／FB
social/tiktok	1080x1920	TikTok
social/twitter-post	1200x675	X／Twitter
social/pinterest-pin	1000x1500	Pinterest

使用方法

# Render all templates
node scripts/render-templates.js

# Render specific template
node scripts/render-templates.js --template instagram/story-announcement

# Custom output path
node scripts/render-templates.js -t youtube/thumbnail -o my-thumbnail.png

# List available templates
node scripts/render-templates.js --list

ASCII スタイル要素

テンプレートでは、装飾に ASCII の罫線文字を使用します：

Frames:   ┌─────┐  ╔═════╗  ┏━━━━━┓
          │     │  ║     ║  ┃     ┃
          └─────┘  ╚═════╝  ┗━━━━━┛

Lines:    ─ │ ═ ║ ━ ┃

Arrows:   → ← ↑ ↓ ▶ ◀ ▲ ▼

Shapes:   ● ○ ■ □ ▲ △ ★ ☆ ◆ ◇

Blocks:   █ ▓ ▒ ░

テンプレートファイル

保存場所：assets/templates/