agency-socials

AGENCY コミュニティのソーシャルアセット生成ツール

確立されたデザインシステムを使って、AGENCY コミュニティのイベント向けのカバー画像やビジュアルアセットを生成します。

デザインシステム

色

• 背景：#0f0f0f
• フレーム／境界線：#2a2a2a
• アクセント（オレンジ）：#e85d04
• メインテキスト：#f0f0f0
• サブテキスト：#999
• 控えめなテキスト：#555 / #444
• グリッド線：rgba(42,42,42,0.12)

タイポグラフィ

• タイトル／ヘッダー：Geist Bold（700）— 大きく、インパクトのある見出し
• メタデータ（トップバー、ボトムバー）：JetBrains Mono — 等幅フォント、大文字、文字間隔を広く
• 登壇者／人物名：EB Garamond — 上品なセリフ体
• ハンドル／技術ラベル：JetBrains Mono — 等幅フォント、オレンジのアクセント

フォントの読み込み

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=JetBrains+Mono:wght@300;400;500&display=swap&subset=cyrillic" rel="stylesheet">
<link rel="preload" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-sans/Geist-Bold.woff2" as="font" type="font/woff2" crossorigin>

@font-face {
  font-family: 'Geist';
  src: url('https://cdn.jsdelivr.net/npm/[email protected]/dist/fonts/geist-sans/Geist-Bold.woff2') format('woff2');
  font-weight: 700;
}

レイアウトの原則

• フレーム：端から12px内側に配置する、#2a2a2a の1px実線の境界線
• トップバー：JetBrains Mono、左にラベル、右に日付／時刻（オレンジ）
• ボトムバー：JetBrains Mono、左右にメタデータ、大文字
• 背景グリッド：控えめな40px間隔のグリッド線
• アクセントライン：タイトルの下に3pxのオレンジ色のバー
• 写真：グリッドからずらして配置し、端（左、下、上）から背景へフェードさせ、わずかな走査線効果を加え、彩度を完全に落とす grayscale(1) contrast(1.1) brightness(0.95)
• テキスト：左揃えにし、写真と少し重ねても構いません。サムネイルサイズでも大きく読みやすくします

最小フォントサイズ（サムネイルで読めること）

• トップ／ボトムバー：13～15px
• 登壇者名：28px以上
• ハンドル：20px以上
• タイトル：62px以上（正方形）、76px以上（YouTube 16:9）

アセットサイズ

lu.ma イベントカバー（正方形）

• 寸法：800×800px
• ビューポート：--viewport-size="800,800"

YouTube サムネイル（16:9）

• 寸法：1280×720px
• ビューポート：--viewport-size="1280,720"
• スタイルの参照先：youtube-uploader の lab-meeting.html テンプレートに合わせます
• 同じデザイントークンを使い、より横長のレイアウトにします

Telegram 投稿画像

• 寸法：1080×1080px または 1280×720px

生成手順

1. ~/Desktop/agency-{type}-cover.html に HTML ファイルを作成します
2. 登壇者の写真を HTML ファイルの隣（同じディレクトリ）に配置します
3. 登壇者の写真がクリップボードにある場合は、次のコマンドで保存します：osascript -e 'set theFile to POSIX file "/path/to/photo.png"' -e 'set theImage to the clipboard as «class PNGf»' -e 'set fileRef to open for access theFile with write permission' -e 'write theImage to fileRef' -e 'close access fileRef'
4. Node.js スクリプトを使って、鮮明なテキストを得るため2倍のスケールでレンダリングします：

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const context = await browser.newContext({
    viewport: { width: W, height: H },
    deviceScaleFactor: 2
  });
  const page = await context.newPage();
  await page.goto('file:///path/to/html');
  await page.waitForTimeout(3000);
  await page.screenshot({ path: '/output/path.png', fullPage: true });
  await browser.close();
})();

5. 出力を確認し、レイアウトを調整します

テンプレート構成

<body>
  <div class="bg-grid"></div>
  <div class="frame"></div>
  <div class="top-bar">
    <span class="top-left">{event type}</span>
    <span class="top-right">{date · time}</span>
  </div>
  <div class="photo-area"></div>
  <div class="content">
    <div class="title">{headline with .highlight spans}</div>
    <div class="accent-line"></div>
    <div class="speaker"><strong>{name}</strong> <span class="handle">@{handle}</span></div>
  </div>
  <div class="bottom-bar">
    <span>{format · price}</span>
    <span>agency · community</span>
  </div>
</body>

写真の効果

• 左端からフェード：linear-gradient(to right, #0f0f0f, transparent)、幅200px
• 下からフェード：linear-gradient(to top, #0f0f0f, transparent)、高さ250px
• 上からフェード：linear-gradient(to bottom, #0f0f0f, transparent)、高さ80px
• 走査線：repeating-linear-gradient(transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px)
• 左端のオレンジ色のアクセント境界線：linear-gradient(transparent, #e85d04, transparent)、不透明度0.4
• 写真フィルター：grayscale(1) contrast(1.1) brightness(0.95)（完全な白黒）
• 写真はグリッドからずらして配置し、右端から一部はみ出させます

使用例

• 「ブラウザー自動化についてVladと話すAGENCYミートアップのカバーを作成して」
• 「今夜のミートアップの録画用にYouTubeサムネイルを生成して」
• 「次回のコミュニティイベント告知用のTelegram画像を作成して」