create-html-carousel

非推奨： このスキルは goose-graphics に置き換えられました。skills/composites/goose-graphics/ を参照してください（npx goose-skills install goose-graphics でインストールできます）。カルーセル形式は新しいスキルに含まれる7つの形式の1つで、36種類のスタイルプリセットに加え、画像のソース指定とPNGへのエクスポートに対応しています。このスキルは、削除までの1リリースサイクルの間、引き続き利用できます。

LinkedIn カルーセル作成ツール

PNG画像で魅力的なLinkedInカルーセル投稿を作成します。このスキルは、正方形（1080×1080px）形式に最適化されたスタイル付きHTMLスライドを生成し、各スライドを自動的にスクリーンショットにして、LinkedInに直接アップロードできる状態にします。

基本理念

1. LinkedInを最優先したデザイン — モバイルフィードでの閲覧に最適化された正方形形式（1080×1080px）
2. 情報性の高いコンテンツ — ヒント、ワークフロー、リスト、フレームワーク（プレゼンテーションではありません）
3. 一貫したスタイル — frontend-slidesの実績あるデザインシステムを再利用
4. 自動エクスポート — HTMLを生成 → スクリーンショットを撮影 → LinkedInですぐに使えるPNGファイルを作成
5. ビューポートにぴったり収める — すべてのスライドをスクロールなしで正確に1080×1080pxに収める必要があります

---

LinkedInカルーセルの仕様

形式： 正方形（1080×1080px）

• アスペクト比： 1:1
• ファイル形式： PNG（推奨）またはJPG
• ファイルサイズ： 画像1枚あたり10MB未満
• 最大スライド数： カルーセル1つにつき画像10枚
• 理想的なスライド数： 5～8枚（エンゲージメントが最も高い）

コンテンツ構成：

1. 表紙スライド — フック + タイトル + ブランド
2. コンテンツスライド — 1枚につき重要なポイントを1つ（3～6枚）
3. 締めくくりスライド — CTA / まとめ / フォローの呼びかけ

---

このスキルを使用する場面

次のようなLinkedInカルーセル投稿に使用します。

• 「活用すべきAI GTMワークフロー5選」
• 「Xの作り方：ステップごとのガイド」
• 「創業者がYで犯しがちな7つの間違い」
• 「Zの完全なフレームワーク」
• 「ビフォー・アフター：指標を10倍にした方法」

次の用途には使用しないでください：

• 長尺のプレゼンテーション（frontend-slidesを使用）
• 動画コンテンツ
• 画像1枚だけの投稿

---

ワークフローの概要

1. Content Input → User provides topic/outline
2. Style Selection → Choose visual style (or preview options)
3. HTML Generation → Create 1080×1080px HTML slides
4. Screenshot → Auto-capture each slide as PNG
5. Delivery → Folder of PNG files ready for LinkedIn upload

---

フェーズ1：コンテンツの確認

ステップ1.1：トピックと構成を決める

ユーザーに次の質問をします。

質問1：トピック

• ヘッダー：「トピック」
• 質問：「このカルーセルのメインテーマは何ですか？」
• （自由記述）

質問2：コンテンツの種類

• ヘッダー：「形式」
• 質問：「どのような種類の投稿ですか？」
• 選択肢：
  • 「番号付きリスト」 — 「〇〇する5つの方法」「〇〇での7つの間違い」「〇〇する3つのステップ」
  • 「ハウツーガイド」 — ステップごとのチュートリアルまたは手順
  • 「フレームワーク」 — 構成を示しながら概念を説明
  • 「ビフォー・アフター」 — 変化または事例研究
  • 「知見・ヒント」 — アドバイスや学びのまとめ

質問3：スライド数

• ヘッダー：「長さ」
• 質問：「スライドは何枚にしますか？」
• 選択肢：
  • 「短め（5～6枚）」 — 手短で歯切れのよい内容（モバイルでのスクロールに最適）
  • 「標準（7～8枚）」 — 標準的なカルーセルの長さ
  • 「長め（9～10枚）」 — LinkedInの上限まで

質問4：ブランド表記

• ヘッダー：「ブランド」
• 質問：「各スライドに表示するハンドル名または名前は何ですか？」
• （自由記述。例：「@yourhandle」「Acme Inc」、または空欄で表示なし）

質問5：コンテンツの準備状況

• ヘッダー：「コンテンツ」
• 質問：「コンテンツはすでに作成されていますか？」
• 選択肢：
  • 「はい、すべて作成済みです」 — 貼り付けてもらう
  • 「箇条書きはあります」 — 軽く整える必要があります
  • 「トピックだけあります」 — 構成を作る支援が必要です

コンテンツがある場合は、共有してもらいます。

LinkedIn向けコンテンツ量のルール

各スライドは、モバイルで2～3秒で読み取れるようにします。

スライドの種類	コンテンツの上限
表紙	タイトル（1行）+ サブタイトル（1行）+ ブランド表記
リスト項目	番号／アイコン + 見出し（最大2行）+ 本文（最大3行）
フレームワーク	図／ビジュアル + ラベル2～4個
引用／統計	大きく表示する統計または引用を1つ + 補足
CTA	1つのアクション + ビジュアル要素

コンテンツが上限を超える場合： 複数のスライドに分けるか、簡潔にします。

---

フェーズ2：スタイルの選択

ユーザーは2つの方法でスタイルを選択できます。

オプション A：直接選択（より高速）

プリセット選択画面を表示します。

質問：スタイルを選んでください

• ヘッダー：「スタイル」
• 質問：「コンテンツに最も合うビジュアルスタイルはどれですか？」
• 選択肢：
  • 「Bold Signal」 — 暗い背景に高コントラストのカードを配置した、自信に満ちたスタイル
  • 「Dark Botanical」 — 柔らかな抽象形状をあしらった、エレガントなダークスタイル
  • 「Notebook Tabs」 — カラフルなタブをあしらった、エディトリアルなクリーム色の紙のスタイル
  • 「Pastel Geometry」 — 装飾的なピルをあしらった、親しみやすいパステルスタイル
  • 「Neon Cyber」 — 未来的なテック系の美学
  • 「Split Pastel」 — 遊び心のあるツートーンの分割デザイン

（各スタイルの詳細はSTYLE_PRESETS.mdをご覧ください）

オプション B：ガイド付き選択

ユーザーが迷っている場合は、次のように尋ねます。

質問：オーディエンスとトーン

• ヘッダー：「雰囲気」
• 質問：「オーディエンスは誰で、どのようなトーンにしますか？」
• 選択肢：
  • 「プロフェッショナル／企業向け」 → おすすめ：Bold Signal、Dark Botanical
  • 「クリエイティブ／遊び心のあるスタイル」 → おすすめ：Split Pastel、Pastel Geometry
  • 「テクニカル／開発者向け」 → おすすめ：Neon Cyber、Terminal Green
  • 「エレガント／プレミアム」 → おすすめ：Dark Botanical、Paper & Ink

次に、プレビュー用のスライドを2～3枚生成し、ユーザーに選んでもらいます。

---

フェーズ 3：HTML カルーセルの生成

ファイル構成

すべてのカルーセルファイル（HTML ソースと PNG エクスポート）は、共有アセットディレクトリに保存します。

[carousel-name]/
├── index.html              # Full carousel (all slides)
├── slides/
│   ├── slide-01.html       # Individual slide pages
│   ├── slide-02.html
│   └── ...
└── exports/
    ├── slide-01.png        # Screenshots (generated in Phase 4)
    ├── slide-02.png
    └── ...

1080×1080px 向け HTML アーキテクチャ

重要：LinkedIn カルーセルのスライドは正方形（1:1 比率）であり、ワイドスクリーンではありません。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Slide 01</title>

    
    <link rel="stylesheet" href="https://api.fontshare.com/v2/css?f[]=..." />

    <style>
      /* ===========================================
           LINKEDIN CAROUSEL: SQUARE FORMAT
           Fixed 1080×1080px for screenshot
           =========================================== */
      :root {
        /* Fixed size for LinkedIn */
        --slide-width: 1080px;
        --slide-height: 1080px;

        /* Colors (from chosen preset) */
        --bg-primary: #0a0f1c;
        --text-primary: #ffffff;
        --accent: #00ffcc;

        /* Typography - scaled for square format */
        --title-size: 72px;
        --subtitle-size: 36px;
        --body-size: 28px;
        --small-size: 20px;

        /* Spacing */
        --slide-padding: 80px;
        --content-gap: 40px;

        /* Animation */
        --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
      }

      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      html,
      body {
        width: var(--slide-width);
        height: var(--slide-height);
        overflow: hidden;
      }

      body {
        font-family: var(--font-body);
        background: var(--bg-primary);
        color: var(--text-primary);
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: var(--slide-padding);
      }

      /* Content container */
      .slide-content {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: column;
        gap: var(--content-gap);
      }

      /* Typography hierarchy */
      h1 {
        font-size: var(--title-size);
        font-weight: 800;
        line-height: 1.1;
        margin-bottom: 20px;
      }

      h2 {
        font-size: var(--subtitle-size);
        font-weight: 700;
        line-height: 1.2;
      }

      p,
      li {
        font-size: var(--body-size);
        line-height: 1.4;
      }

      /* List styling */
      ul {
        list-style: none;
      }

      li {
        padding-left: 40px;
        position: relative;
        margin-bottom: 20px;
      }

      li::before {
        content: "→";
        position: absolute;
        left: 0;
        color: var(--accent);
        font-weight: bold;
      }

      /* Number badge (for list items) */
      .number {
        font-size: 120px;
        font-weight: 900;
        color: var(--accent);
        opacity: 0.15;
        position: absolute;
        top: -40px;
        left: -20px;
        z-index: 0;
      }

      /* Branding footer */
      .brand {
        position: absolute;
        bottom: var(--slide-padding);
        right: var(--slide-padding);
        font-size: var(--small-size);
        opacity: 0.7;
      }

      /* ===========================================
           STYLE-SPECIFIC OVERRIDES
           Inject preset styles here
           =========================================== */
      /* ... preset-specific CSS ... */
    </style>
  </head>
  <body>
    <div class="slide-content">
      
      <h1>Your Title Here</h1>
      <p>Your content here</p>
    </div>

    <div class="brand">@yourbrand</div>
  </body>
</html>

コンテンツスライドのテンプレート

表紙スライド：

<div class="slide-content">
  <h1>5 AI GTM Workflows<br />You Should Be Using</h1>
  <p>Scale your outbound without scaling your team</p>
</div>
<div class="brand">@yourhandle</div>

番号付き項目（例：スライド 2/6）：

<div class="slide-content">
  <div class="number">01</div>
  <h2>Signal-Based Outbound</h2>
  <p>
    Monitor job postings, funding announcements, and tech stack changes to find
    companies actively solving your problem.
  </p>
</div>
<div class="brand">@yourhandle • 1/5</div>

フレームワークスライド：

<div class="slide-content">
  <h2>The GTM Engineering Stack</h2>
  <div class="framework-grid">
    <div class="box">Research</div>
    <div class="box">Personalization</div>
    <div class="box">Outreach</div>
    <div class="box">Tracking</div>
  </div>
</div>
<div class="brand">@yourhandle • 3/5</div>

CTA スライド：

<div class="slide-content">
  <h2>Want more like this?</h2>
  <p>Follow me for more tips and workflows.</p>
  <div class="cta">Hit that follow button →</div>
</div>
<div class="brand">@yourhandle</div>

---

フェーズ 4：スクリーンショットの生成

HTML の生成後、スクリーンショットを自動的にキャプチャします。

Playwright の使用（推奨）

各スライドのスクリーンショットを撮影する Node.js スクリプトを作成します。

// screenshot-slides.js
const { chromium } = require("playwright");
const path = require("path");
const fs = require("fs");

async function screenshotSlides(slidesDir, outputDir) {
  const browser = await chromium.launch();
  const page = await browser.newPage();

  // Set viewport to LinkedIn carousel size
  await page.setViewportSize({ width: 1080, height: 1080 });

  // Ensure output directory exists
  if (!fs.existsSync(outputDir)) {
    fs.mkdirSync(outputDir, { recursive: true });
  }

  // Find all HTML files in slides directory
  const slideFiles = fs
    .readdirSync(slidesDir)
    .filter((f) => f.endsWith(".html"))
    .sort();

  console.log(`Found ${slideFiles.length} slides to screenshot`);

  for (const slideFile of slideFiles) {
    const slidePath = path.join(slidesDir, slideFile);
    const outputName = slideFile.replace(".html", ".png");
    const outputPath = path.join(outputDir, outputName);

    console.log(`Capturing ${slideFile}...`);

    await page.goto(`file://${path.resolve(slidePath)}`);

    // Wait for fonts and animations
    await page.waitForTimeout(500);

    // Take screenshot
    await page.screenshot({
      path: outputPath,
      type: "png",
      fullPage: false,
    });

    console.log(`✓ Saved ${outputName}`);
  }

  await browser.close();
  console.log("\n✨ All slides captured!");
}

// Usage
const carouselName = process.argv[2];
if (!carouselName) {
  console.error("Usage: node screenshot-slides.js <carousel-name>");
  process.exit(1);
}

const slidesDir = path.join(__dirname, carouselName, "slides");
const outputDir = path.join(__dirname, carouselName, "exports");

screenshotSlides(slidesDir, outputDir);

インストール

スキルディレクトリには、次の依存関係が必要です。

{
  "name": "linkedin-carousel-screenshots",
  "version": "1.0.0",
  "private": true,
  "dependencies": {
    "playwright": "^1.40.0"
  }
}

初回セットアップ：

cd /path/to/skills/create-html-carousel
npm install

スクリーンショットスクリプトの実行

HTML スライドを生成した後：

node screenshot-slides.js carousel-name

これにより、次の処理が行われます。

1. 各スライドの HTML をヘッドレスブラウザーで開く
2. ビューポートを1080×1080pxに設定する
3. フォントやアニメーションの読み込みを待つ
4. PNG スクリーンショットをキャプチャする
5. [carousel-name]/exports/ に保存する

---

フェーズ 5：納品

スクリーンショットの生成後、ユーザーに提示します。

✨ Your LinkedIn carousel is ready!

📁 Location: /assets/carousel-name/

**Slides:**
- 6 HTML slides in slides/ folder
- 6 PNG images in exports/ folder (1080×1080px)

**Preview:**
Open index.html to see all slides with navigation.

**Upload to LinkedIn:**
1. Create new post on LinkedIn
2. Click "Add media"
3. Upload all PNGs from exports/ folder in order
4. Add your post copy
5. Publish!

**File sizes:**
- slide-01.png: 234 KB ✓
- slide-02.png: 198 KB ✓
- slide-03.png: 256 KB ✓
(All under 10MB limit)

Want to make any changes to the slides?

---

正方形フォーマットに合わせたスタイル調整

frontend-slides のすべてのスタイルはカルーセルで使えますが、次の調整が必要です。

タイポグラフィのスケーリング

正方形フォーマットでは横幅が狭いため、フォントサイズを調整します。

要素	プレゼンテーション（16:9）	カルーセル（1:1）
タイトル	clamp(2rem, 6vw, 5rem)	72px（固定）
サブタイトル	clamp(1.25rem, 3vw, 2.5rem)	36px（固定）
本文	clamp(0.875rem, 1.5vw, 1.125rem)	28px（固定）
小さい文字	clamp(0.75rem, 1vw, 0.875rem)	20px（固定）

なぜ固定サイズなのか？ レスポンシブなウェブ表示ではなく、単一のエクスポートサイズ（1080×1080px）を対象としているためです。

レイアウトの調整

縦方向のスペースは貴重です。

• 上下のパディングを小さくします（4rem ではなく80px）
• 行の高さを詰めます（1.5～1.6ではなく1.2～1.4）
• 1枚あたりのリスト項目を減らします（最大3～4項目）
• 装飾要素を小さくします

モバイルファーストの考え方：

• LinkedIn ユーザーの多くはスマートフォンで閲覧します
• サムネイルサイズでもテキストが読みやすい必要があります
• 高いコントラストが重要です
• 複雑なデザインより、大胆でシンプルなレイアウトが効果的です

---

コンテンツ作成のベストプラクティス

フックの公式（表紙スライド）

LinkedIn カルーセルで効果的なフック：

• 数字＋約束：「アウトバウンドを10倍にした5つのワークフロー」
• 逆説：「X をやめてください。代わりにこれをしましょう。」
• ビフォー／アフター：「30日で X から Y へ変化した方法」
• 質問：「なぜこれを実践している創業者はわずか3%なのでしょうか？」
• 好奇心のギャップ：「誰も語らない GTM 戦略」

本文スライド（項目2～9）

各スライドでは、次の点を守ります。

1. 明確な要点を1つにする — 複数の概念を詰め込まないでください
2. 視覚的な階層をつける — 大きな数字／アイコン＋見出し＋本文
3. 抽象的ではなく具体的にする — 「シグナルを活用する」ではなく「求人情報を使って購買意図を見つける」
4. ざっと読めるようにする — 読了時間は最大2～3秒

クロージングスライド

必ず CTA を含めます。

• 「[topic] に関する情報をもっと見るにはフォローしてください」
• 「役に立ったらリポストしてください」
• 「最も参考になった点をコメントしてください」
• 「プレイブック全体が必要な方は DM してください」

避けること：

• 「コメントにリンクを掲載」（埋もれてしまうことがよくあります）
• 「私のウェブサイトをご覧ください」（売り込みのように感じられます）
• CTA を入れない（機会を無駄にします）

---

トラブルシューティング

スクリーンショットでフォントが読み込まれない

症状： スクリーンショットにデフォルトのシステムフォントが表示されます

解決策：

1. ウェブセーフフォント（Arial、Georgia）を使用するか、または
2. スクリーンショットを撮る前に await page.waitForLoadState('networkidle') を追加します
3. 待機時間を延ばします：await page.waitForTimeout(1000)

スクリーンショットがぼやける

症状： テキストがぼやけていたり、解像度が低く見えたりします

解決策：

1. Playwright でデバイスのスケール係数を設定します：

   await page.setViewportSize({
     width: 1080,
     height: 1080,
     deviceScaleFactor: 2, // Retina-quality
   });
   

スライドからコンテンツがはみ出す

症状： スクリーンショットでテキストや要素が切れています

解決策：

1. フォントサイズを小さくします
2. パディングを減らします
3. 複数のスライドに分けます
4. コンテンツを簡潔にします（箇条書きを減らし、テキストを短くします）

エクスポート後に色が異なって見える

症状： PNG の色が HTML プレビューと一致しません

解決策：

• ブラウザーのカラープロファイルが sRGB と一致していることを確認します
• 16 進数カラーを使用し、レンダリング結果が異なる可能性のある CSS フィルターは避けます
• すべてのスライドを生成する前に、スクリーンショットスクリプトをテストします

---

プリセット早見表

プリセット	最適な用途	雰囲気
Bold Signal	自信に満ちた、インパクトの強い	プロフェッショナル
Dark Botanical	エレガントで高級感のある	洗練された
Notebook Tabs	エディトリアルで整理された	親しみやすいプロフェッショナル
Pastel Geometry	親しみやすく、近寄りやすい	遊び心のある
Neon Cyber	テクノロジー、イノベーション	未来的
Split Pastel	クリエイティブで楽しい	エネルギッシュ

スタイルの詳細については、STYLE_PRESETS.md をご覧ください。

---

関連スキル

• frontend-slides — カルーセルではなく、プレゼンテーション全体を作成する場合
• personalized-email — LinkedIn 投稿と組み合わせるアウトリーチコンテンツを作成する場合
• deep-web-research — カルーセルコンテンツ用のトピックや統計を調査する場合

---

セッションの流れの例

1. ユーザー：「AI GTM ワークフロー 5 つを紹介する LinkedIn カルーセルを作成して」
2. スキルが質問します：コンテンツの種類、スライド数、コンテンツは用意できているか
3. ユーザーが 5 つのワークフローの箇条書きを提供します
4. スキルが質問します：希望するスタイル
5. ユーザーが「Bold Signal」を選びます
6. スキルが HTML スライドを 7 枚生成します（表紙＋5 つのワークフロー＋CTA）
7. スキルがスクリーンショットスクリプトを自動的に実行します
8. スキルが HTML と PNG のエクスポートを含むフォルダーを提供します
9. ユーザーが PNG を LinkedIn にアップロードして公開します

所要時間：アイデアから公開可能なカルーセルの完成まで 5～10 分。