instagram-carousel

Instagramカルーセルデザイナー

あなたのブランドに合わせた、自己完結型のHTMLファイルとしてInstagramカルーセル投稿を生成します。各カルーセルは、Playwright経由でピクセル単位まで正確な1080x1350pxのPNGとして書き出せる、固定サイズのスライド（420x525px）で構成される単一のHTMLファイルです。

このスキルでは、コピーとデザインの両方を扱います。トピックを指定してスタイルを選ぶと、あなたの色、写真、名前を使って、スライドの文章を書き、ビジュアルを作成します。

---

アーキテクチャ

固定サイズ

すべてのスライドは固定サイズの420x525pxのボックスです。レスポンシブではありません。ピクセルサイズは固定です。

Design:  420 x 525px  (what you see in browser)
Export:  1080 x 1350px (what gets uploaded to Instagram)
Scale:   2.5714x (via Playwright device_scale_factor)
Ratio:   4:5 (Instagram carousel standard)

モジュール式の参照ファイル

ファイル	内容
references/design-system.md	サイズ、タイポグラフィ、カラートークン、スライド構成
references/components.md	プロフィールヘッダー、進捗バー、矢印、透かし、CTAスライド、IGフレーム
references/styles.md	4種類すべてのビジュアルスタイルと完全なCSS
references/export-guide.md	Playwrightの書き出しスクリプト、重要なルール、よくある間違い

---

4種類のデザインスタイル

スタイル	名前	最適な用途	雰囲気
1	Bold Impact	番号付きのインサイト、変化、失敗、ヒント	ダーク、大きな文字、アクセントカラー、フィルムグレイン、高級感
2	Tweet Post	挑発的な意見、意見、引用、知恵	ミニマル、すっきり、エフェクトなし、会話調
3	Clean Editorial	フレームワーク、チュートリアル、事例研究、リスト記事	白背景、グリッドオーバーレイ、コーラルのアクセント、教育的
4	Product Showcase	ツールレビュー、比較、厳選リスト	柔らかな暖色のグラデーション、アプリカード、ページネーションドット

スタイルの選択ロジック

1. 明示的なリクエスト — ユーザーが「bold impact」「tweet style」「editorial」「product showcase」と指定する
2. コンテンツから自動判定：
   • 挑発的な意見／意見／会話調／引用 → Tweet Post
   • ツール一覧／製品比較／カテゴリ別の内訳 → Product Showcase
   • フレームワーク／チュートリアル／教育的な内容／ハウツー／事例研究 → Clean Editorial
   • その他すべて（番号付きのインサイト、ヒント、変化、失敗） → Bold Impact（デフォルト）
3. 判断が難しい場合 — 質問は最大1つとし、デフォルトでBold Impactを選択する

---

ワークフロー

以下のフェーズを順番に進めてください。

フェーズ0：ブランド設定（初回のみ）

現在の作業ディレクトリにcarousels/brand-config.jsonが存在するか確認します。

• 存在する場合： 内容を読み取り、すべてのブランド要素にその値を使用します。フェーズ1へ進みます。
• 存在しない場合： ほかの作業を始める前に、以下のブランド設定を行います。

ブランド設定の質問

ユーザーに次の6つの質問をします（まとめて質問してもかまいません）。

Before we build your first carousel, I need to set up your brand. This only runs once.

1. What's your full name? (shown on every slide as the profile name)
2. What's your @handle? (watermark on every slide, e.g. @yourname)
3. What's your subtitle or tagline? (e.g. "Paid Media | Growth Marketing")
4. Path to your profile photo? (e.g. carousels/photo.jpg — or type "skip" to use initials)
5. What's your brand accent color? (paste a hex code like #6EE421, or describe: green / coral / blue / purple / orange)
6. Default style preference? (dark / light / minimal — or type "auto" to let me decide per content)

ブランド設定の保存

回答を集めたら、carousels/brand-config.jsonを保存します。

{
  "name": "User's Full Name",
  "handle": "@userhandle",
  "subtitle": "Their Tagline Here",
  "profile_photo": "carousels/photo.jpg",
  "accent_color": "#HEXCODE",
  "initials": "XX",
  "default_style": "dark",
  "setup_complete": true
}

アクセントカラーのマッピング（ユーザーが16進数ではなく色の説明をした場合）：

説明	Hex
緑	#6EE421
コーラル／オレンジレッド	#e8553d
青	#3b82f6
紫	#8b5cf6
オレンジ	#f97316
ピンク	#ec4899
ティール	#14b8a6
黄色	#eab308

イニシャル： 名前の最初の文字と姓の最初の文字を取り出します。名前が1つだけの場合は、最初の2文字を使用します。

プロフィール写真がない場合： ユーザーが写真を指定しない場合、またはファイルが存在しない場合は、アクセントカラーの円の中にイニシャルを表示します。

carousels/フォルダーの作成

存在しない場合は、carousels/[year]/[month]/の構成も作成します。

---

フェーズ1：調査

1. carousels/を確認して過去のカルーセルを調べ、タイトルやファイル名を見てトピックの重複を避ける
2. スタイルを決定する（上記の選択ロジックを参照）

フェーズ 2：スライドの文案を作成する

次の文案ルールに従います。

トーン：

• 率直で、明確な主張があること。曖昧な表現は避けます
• 経験に裏付けられていること。実例や具体的な詳細を盛り込みます
• 無駄を省くこと。企業的な言い回しや不要な言葉は使いません
• 歯切れよくすること。断片的な表現も可。対比を活用します

使用禁止の単語： "just", "really", "actually", "basically", "simply", "literally"

フックの定型（スライド 1）：

• 逆張り：「あなたの［戦略］は間違っています。」
• 数字で約束：「あなたの［リソース］を浪費する、［トピック］の 5 つの間違い。」
• 挑戦：「あなたは今年も、まだこれをやっていると思います。」
• 大胆な主張：「［物事］が［人々］を破滅させたのではありません。［行動］が［人々］を破滅させたのです。」

スライド数： 5～10 枚（最適なのは 7 枚）。各スライドは 3～4 秒で読めるようにします。

フェーズ 3：HTML を作成する

ブランド設定の値を使って、単一の自己完結型 HTML ファイルを生成します。次の参照ファイルをすべて読み込みます。

• references/design-system.md — 寸法、フォント、色
• references/components.md — 共通コンポーネント
• references/styles.md — 選択したスタイルの CSS とレイアウト

重要な作成ルール：

1. すべてのスライドを width: 420px; height: 525px; に設定します。固定値とし、レスポンシブにはしません
2. すべてのアクセント／ハイライト要素に brand.accent_color を使用します
3. プロフィールヘッダーと透かしには brand.name、brand.handle、brand.subtitle を使用します
4. プロフィール写真：brand.profile_photo ファイルが存在する場合は、base64 エンコードして埋め込みます。存在しない場合は、brand.initials と brand.accent_color を使ったイニシャルの円形アイコンを使用します
5. すべての画像を base64 エンコードしてインラインで埋め込みます（HTML を自己完結型にします）
6. HTML の生成には必ず Python を使います。シェル／bash は使いません（特殊文字が壊れるため）
7. ブラウザー内でプレビューできるよう、IG プレビューフレームでカルーセルを囲みます
8. ナビゲーションには、タッチスワイプ、マウスドラッグ、キーボードの矢印キーを実装します
9. エクスポートボタン：スライドごとの PNG と、全スライドの PDF
10. 次の場所に保存します：carousels/[year]/[month]/carousel-XX-topic.html
11. 必須 — アクセントカラーのサニタイズ： 参照ファイルには、サンプルブランドの例として 16 進カラー値（#6EE421、#85F040、#5BC01C）が含まれています。HTML 全体の文字列を生成した後、ファイルを書き込む前に、Python でグローバル置換を実行します。

# Replace all sample accent colors with the user's brand color
SAMPLE_ACCENTS = ["#6EE421", "#85F040", "#5BC01C", "#6ee421", "#85f040", "#5bc01c"]
for sample in SAMPLE_ACCENTS:
    html = html.replace(sample, brand["accent_color"])

これにより、他の人のカルーセルにあなたのデザインの緑色が表示されることを防げます。

フェーズ 4：プレビューして調整する

カルーセルを表示します。各スライドの概要を順に提示し、変更が必要なスライドがあるか尋ねます。

フェーズ 5：エクスポートする

第一選択（Playwright — ピクセル単位で正確）： references/export-guide.md の Python エクスポートスクリプトを実行します。スライドごとに 1080x1350px の PNG が生成されます。

代替手段（ブラウザー）： HTML ファイルには、html2canvas と jsPDF を使ったエクスポートボタンが含まれています。

フェーズ 6：保存して提案する

1. carousels/[year]/[month]/carousel-XX-topic.html に保存します
2. 関連するハッシュタグを含む Instagram のキャプションを提案します
3. ファイルパスと次の手順を提示します

---

品質チェックリスト

カルーセルを提示する前に、次の項目を確認します。

• ブランド設定を読み込んでいる（値をハードコードしていない）
• Poppins フォントが Google Fonts CDN 経由で読み込まれる
• すべてのスライドが正確に 420x525px である（幅はレスポンシブではない）
• スライド数が 5～10 枚である（理想は 7 枚）
• 各スライドが 3～4 秒で読める
• ヒーロースライドに、スクロールする手を止めさせるフックがある
• すべてのスライドにプロフィールヘッダーがある（写真またはイニシャルの代替表示）
• すべてのスライドにプログレスバーがある
• CTA 以外のすべてのスライドに矢印インジケーターがある
• すべてのスライドにハンドルの透かしがある
• CTA スライドに白またはテクスチャのデザインを使用している
• アクセントカラーが全体で正しく使われている（緑色をハードコードしていない）
• スタイルに応じてテキストサイズが適切に設定されている
• スタイルに応じて視覚効果が正しく適用されている
• ナビゲーションが動作する（タッチ／マウス／キーボード）
• IG プレビューフレームが、幅を正確に 420px にしてカルーセルを囲んでいる
• PNG と PDF のエクスポートボタンがあり、動作する
• 正しいパスにファイルが保存されている
• Instagram のキャプションが提案されている