carousels

LinkedIn + Instagram カルーセルジェネレーター

1つの優れたソースコンテンツを、スワイプできる画像カルーセルに変換します。4:5 のスライドセット1つで両方のプラットフォームに対応します。Instagram 用には PNG、LinkedIn 用には結合した PDF を用意します。

ブランドは固定で、変更できません。オフホワイト #F5F1E8、インク #0F0F0F、ミュートティール #2A6F6A、Inter 書体、手描きのインフォグラフィックイラストを使用します。毎回、視覚的に同一のものが生成されます。テーマ、色、フォントについてユーザーに尋ねないでください。

スキルファイル（リポジトリルート /Users/craighewitt/Coding/second-brain からの相対パス）：

• output/cowork-context/skills/carousels/assets/carousel.css — ブランドスタイルシート
• output/cowork-context/skills/carousels/references/slide-layouts.md — HTML パターン
• output/cowork-context/skills/carousels/scripts/generate-image.mjs — GPT Image（OpenAI）
• output/cowork-context/skills/carousels/scripts/render.mjs — スライド → PNG + PDF

---

Phase 0 — 事前確認

何よりも先に、以下を確認します。確認に失敗した場合は、修正方法を示して、解決するまで作業を止めてください。環境に問題がある状態で先に進まないでください。

1. Node — node -v（v18 以降が必要です。リポジトリでは v22 を使用しています）。

2. ヘッドレスブラウザー — render.mjs は puppeteer を起動します。puppeteer またはそのブラウザーが見つからない場合、スクリプトがインストールコマンドを表示します。先回りして対応せず、レンダリング手順を実行して、エラーが出た場合に対処してください。

3. OPENAI_API_KEY — カルーセルに画像スライドを含める場合にのみ必要です。[ -n "$OPENAI_API_KEY" ] && echo set || echo missing で確認します。設定されていない場合は、ユーザーに次のように伝えてください。

   GPT Image（OpenAI）には OpenAI API キーが必要です。
   platform.openai.com/api-keys でキーを作成し、課金を有効にしてから、シェルで
   export OPENAI_API_KEY="sk-..." を実行してください（絶対にコミットしないでください）。

   ユーザーが今すぐキーを設定できない場合は、テキストのみのカルーセル（画像スライドなし）を作成する方法を提案してください。このスキルはキーがなくてもすべての機能を利用できます。

---

Phase 1 — 内容の確認

ソースコンテンツを取得します。次のいずれかを受け付けます。

• 貼り付けられたテキスト — メール、スクリプトの一部、メモ。
• ローカルファイルのパス — 例：output/ 内のスクリプト、エッセイの草稿。

URL をスクレイピングしないでください。ユーザーが URL を提示した場合は、コンテンツを貼り付けるよう依頼してください（CLAUDE.md に従います）。

続いて、次のファイルを一度だけ読みます。

• context/brand/02-voice.md — キャプションのトーンを確認します。
• context/brand/03-visual-identity.md — ブランドで使用する配色と書体を確認します。

出力内容に本当に影響することだけ、ユーザーにまとめて短く尋ねます。

• ソースから引き出したい特定の切り口はありますか？（任意）
• 最後のスライドに載せる CTA ワード — どんな言葉をコメントしてほしいですか？（任意。デフォルトでは、トピックに関連する語を選びます）
• 紹介したいリードマグネットはありますか？（任意）

ユーザーがプロンプトですでに希望を伝えている場合は、質問を省略してください。

output/carousels/<source-slug>-<YYYY-MM-DD>/ に実行用フォルダーを作成し、その中に images/ と publish/ サブフォルダーを作成します。carousel.css を実行用フォルダーにコピーします（レンダリング時に slides.html の隣に必要です）。

---

Phase 2 — 編集

ここが最も重要な工程です。カルーセルの成否を決めるのは、レンダリングではなく編集です。

ソースを5〜8個の要点に整理し、1スライドにつき1つのアイデアにします。スライド数はソースに応じて決めます。4つのヒントをまとめた短い記事なら7枚、情報量の多いエッセイなら8枚です。無理に内容を足さないでください。

構成：

• スライド1 — 表紙／フック。 スクロールを止める内容にします。約束、または挑発的な主張を示します。
• スライド2〜N-1 — コンテンツ。 各スライドにつき1つのアイデアにします。1枚で2つのことを説明しないでください。
• スライドN — CTA。 保存／フォロー／指定した言葉をコメント。

各コンテンツスライドについて、テキストのみにするか、画像スライドにするかを決めます。画像スライドは、文章より図で示したほうがわかりやすいアイデアに使います。たとえば、プロセス、関係性、ビフォーアフター、システムなどです。すべてのスライドではなく、2〜4枚を画像スライドにすることを目指します。テキストのみのスライドでは、大きな数値、手順、引用、比較、主張の各レイアウトを使用します。

実行用フォルダーに 01-slide-plan.md を作成します。各スライドについて、番号、役割、レイアウト、1行で表したアイデア、画像／テキストのみの区分を記載します。

---

フェーズ 3 — スライドのコピー

各スライドに表示するコピーを書きます。ルール：

• 見出しは12語以内、本文は30語以内にします。ソーシャルメディアでは注目が長く続きません。
• 1枚につきアイデアは1つだけにします。導入に2文必要な場合は、2枚に分けます。
• Craigの声は、率直で実用的に。誇張した表現や「大成功」「ゲームチェンジャー」は使いません。
• 表紙はスワイプしたくなる内容にし、CTAでは保存とコメントのキーワードを促します。

---

フェーズ 4 — 画像生成

画像を使うスライドのみが対象です。文字だけのカルーセルを作成する場合は、完全に省略してください。

画像を使う各スライドについて、2段落のプロンプトを書きます。

段落1（固定 — ブランドのイラストスタイル。次の文をそのまま貼り付けます）：

手描きのミニマルなインフォグラフィック。無地の温かみのあるオフホワイトの背景（hex #F5F1E8）に黒インクの線画を描き、控えめなティールのアクセントカラー（#2A6F6A）を使います。すっきりとしたホワイトボードのスケッチスタイル、自信のあるペンの筆致、手書き文字、シンプルな幾何学アイコン、余白をたっぷり取ります。

段落2： スライドごとの図解を具体的に説明します。コンセプト、レイアウト、ラベル、流れを含めてください（「横並びの3ステップの流れ：Draft → Review → Publish。それぞれをラベル付きのボックスに入れ、矢印でつなぐ」のように具体的に）。ストック写真のようなリアルさ、グラデーション、人は使わないでください。段落2の末尾には必ず次の文を入れます：「アイコンやラベルを含む図全体が、四辺に十分な余白を設けた状態でフレーム内に収まっています。切り取られる要素はなく、端に触れる要素もありません。」 モデルは指示がないと、図を端から端まで描き、外側のラベルを切り取る傾向があります。

各画像を生成します：

node output/cowork-context/skills/carousels/scripts/generate-image.mjs \
  --prompt-file <run>/images/slide-04-prompt.txt \
  --out <run>/images/slide-04.png

シェルのエスケープ処理による問題を避けるため、まずプロンプトを.txtファイルに書き込みます。生成後、スクリプトが画像の背景を正確に#F5F1E8（--bg-hexのデフォルト値）に正規化するため、イラストが明るい背景のスライドになじみ、パネルの境目が見えなくなります。デフォルトのサイズは1024x1024、品質はmediumです。各PNGには、スライド番号に合わせてslide-NN.pngという名前を付けます。線画が黒なので、画像を使うスライドにはティールの背景ではなく、明るい背景を使う必要があります。（別の背景色の画像スライドが必要な場合は、--bg-hex #RRGGBBを指定して色を合わせてください。）

---

フェーズ 5 — slides.htmlの作成とサンプルの承認

references/slide-layouts.mdのパターンを使って、<run>/slides.htmlを作成します。スライドごとに.slideのdivを1つずつ、順番に並べます（実行フォルダー内の）carousel.cssを読み込みます。イラストはimages/slide-NN.pngとして参照します。

**サンプル承認のチェックポイント：**セット全体をレンダリングする前に、スタイルをユーザーに確認してもらうため、表紙だけをレンダリングします：

node output/cowork-context/skills/carousels/scripts/render.mjs \
  --slides <run>/slides.html --out <run>/publish

ユーザーにpublish/slide-01.pngを表示します。変更（コピーやレイアウト）の希望があれば、slides.htmlを編集して再レンダリングします。表紙の承認を得てから次に進みます。

---

フェーズ 6 — レンダリング

全体をレンダリングします（前述と同じコマンドです。すべての.slideをレンダリングします）：

node output/cowork-context/skills/carousels/scripts/render.mjs \
  --slides <run>/slides.html --out <run>/publish

publish/slide-01.png … slide-NN.png（Instagram用）とpublish/carousel.pdf（LinkedIn用）が生成されます。すべてのPNGのサイズは正確に1080×1350です。

---

フェーズ 7 — キャプション

両プラットフォームで使えるキャプションをpublish/caption.mdに書きます：

• 表紙のスライドに合わせたフックの一文。
• 価値を伝える短い文を2〜4行。カルーセルで何を学べるのか、なぜ重要なのかを説明します。
• CTA：投稿の保存、@thecraighewittのフォロー、CTAのキーワードでのコメントを促します。
• Craigの声で書きます。ハッシュタグを並べ立てず、最後に関連タグを3〜5個まで（任意）。

LinkedIn用とInstagram用に分ける価値がある場合（長さやトーンが異なる場合）は、明確な見出しを付けて両方を書きます。それ以外の場合は、共通のキャプションを1つ書けば十分です。

フェーズ 8 — レビューと納品

レンダリングした PNG を開き、それぞれがブランドガイドラインに沿っているか確認します。

• 使用できる色は #F5F1E8 / #0F0F0F / #2A6F6A のみです（データのコールアウトにはまれに #C75A2C を使用できます）。
• フォントは Inter のみです。スライドの装飾要素にグラデーション、ドロップシャドウ、絵文字は使用しません。
• スライドごとにティール色の要素を 1 つだけ使用します。
• 1 枚につきアイデアは 1 つにし、スマートフォンの画面サイズでも文字が読みやすいようにします。
• 表紙を除くすべてのスライドにフッター（ハンドル名と番号）を入れます。
• フッターのスライド番号を実際の枚数に合わせます（03 / 07）。

仕様に合わないスライドがあれば、slides.html を修正して再レンダリングします。その後、実行フォルダーを報告し、ユーザーに次のように伝えます。PNG をカルーセル投稿として Instagram にアップロードし、carousel.pdf をドキュメント投稿として LinkedIn にアップロードしてください。両方の投稿には caption.md を使用してください。

最終納品物は output/carousels/<slug>-<date>/publish/ に格納します。

• slide-01.png … slide-NN.png
• carousel.pdf
• caption.md