instagram-carousel

Instagram カルーセル生成ツール

各スライドを Instagram 用の 1080×1350px PNG として個別にエクスポートできる、完全に自己完結したスワイプ可能な HTML カルーセルを生成します。

---

ステップ 1：ブランドの詳細を確認する

生成する前に、まだ提供されていない場合は、ユーザーに以下の情報を尋ねます。

1. ブランド名 — 最初と最後のスライドに表示します
2. Instagram のハンドル名 — Instagram フレームのヘッダーに表示します
3. ブランドのメインカラー — hex コード、または色の説明を伝えてもらい、Claude が選びます
4. ロゴ — SVG パス、ブランドの頭文字、または省略
5. フォントの好み — 下記のタイポグラフィ表、または特定の Google Fonts を参照してください
6. トーン — プロフェッショナル、カジュアル、遊び心のある、力強い、ミニマルなど
7. 画像 — プロフィール写真、スクリーンショット、商品画像など
8. スライドの言語 — デフォルト：特に指定がない場合はポルトガル語（ブラジル）
9. カルーセルの形式 — 標準（7 スライド）または別の構成（シーケンスのセクションを参照）

ユーザーがウェブサイトの URL またはブランドアセットを提供した場合は、そこから色とスタイルを導き出します。

ユーザーがブランドの詳細を伝えずに「X についてのカルーセルを作って」と依頼した場合は、生成する前に確認します。デフォルトを想定しないでください。

---

ユーザー提供画像の処理

このセクションは、エクスポート時だけでなく、最初の HTML 生成時から適用されます。

ユーザーが画像ファイルのパス（例：/home/user/gestante.png、/mnt/user-data/uploads/foto.jpg）を提供した場合：

⚠️ 重要なルール

1. 相対パスは絶対に使用しないでください（gestante.png）— HTML が置かれたフォルダーと同じ場所でない限り、どのブラウザー環境でも動作しません。
2. background: url(filepath) は絶対に使用しないでください — 1.5MB 以上の base64 インライン文字列が生成され、ブラウザーのパーサーがクラッシュします。
3. 必ず base64 の data: URI として埋め込んでください — プレビュー、エクスポート、あらゆる環境で動作します。
4. 必ず Python の Path.write_text() で HTML を生成してください — シェルのヒアドキュメントは $ とバッククォートを展開し、base64 文字列を破損させます。

手順：画像を埋め込む

# 1. Check the actual file format (extension may lie)
file /path/to/image.png

import base64
from pathlib import Path

# 2. Read and encode
img_path = Path("/path/to/image.png")
# Use "image/jpeg" if `file` command says JPEG, else "image/png"
mime = "image/jpeg"  # or "image/png"
b64 = base64.b64encode(img_path.read_bytes()).decode()
data_uri = f"data:{mime};base64,{b64}"

# 3. Inject into HTML template as a Python variable — never via shell
html = f"""
<div style="position:relative;width:100%;height:100%;">
  <img src="{data_uri}"
       style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;">
  <div style="position:absolute;inset:0;background:rgba(255,255,255,0.35);z-index:1;"></div>
  
</div>
"""

Path("/home/claude/carousel.html").write_text(html, encoding="utf-8")

スライドの背景として画像を使用する場合（最も一般的な用途）

<img src="{data_uri}"
     style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;">

<div style="position:absolute;inset:0;background:rgba(255,255,255,0.35);z-index:1;"></div>

暗いスライドでは、代わりにオーバーレイとして rgba(0,0,0,0.45) を使用します。

避けるべき画像に関するよくある間違い

間違い	問題点	修正方法
<img src="gestante.png">	画像が表示されません — 相対パスは HTML と画像が同じフォルダーにある場合にのみ動作します	必ず base64 の data: URI を使用してください
1.5MB の base64 をインラインで指定した background: url('data:...')	ブラウザーのパーサーがクラッシュし、コンテキストが 1.3M トークンになります	object-fit:cover を指定した <img> タグを使用してください
シェルの echo またはヒアドキュメントで HTML を生成する	base64 内の $ とバッククォートが展開され、文字列が破損します	必ず Python の Path.write_text() を使用してください
.png 拡張子だけを見て PNG 形式だと思い込む	実際は JPEG の場合があります。MIME タイプが間違っていると描画されません	file コマンドを実行して実際の形式を確認してください

---

ステップ 2：カラーシステム全体を導き出す

ユーザーが指定したブランドのメインカラー 1 色から、6 トークンのパレット全体を生成します。

BRAND_PRIMARY   = {user's color}                    // Main accent — progress bar, icons, tags
BRAND_LIGHT     = {primary lightened ~20%}           // Secondary accent — tags on dark, pills
BRAND_DARK      = {primary darkened ~30%}            // CTA text, gradient anchor
LIGHT_BG        = {warm or cool off-white}           // Light slide background (never pure #fff)
LIGHT_BORDER    = {slightly darker than LIGHT_BG}    // Dividers on light slides
DARK_BG         = {near-black with brand tint}       // Dark slide background

色を導き出すルール：

• LIGHT_BG：メインカラーを引き立てる色味を加えたオフホワイト（暖色系 → 温かみのあるクリーム色、寒色系 → クールなグレーがかった白）
• DARK_BG：ブランドカラーの色味をほのかに加えた、ほぼ黒に近い色（暖色系 → #1A1918、寒色系 → #0F172A）
• LIGHT_BORDER：常に LIGHT_BG より約 1 段階濃い色
• ブランドのグラデーション：linear-gradient(165deg, BRAND_DARK 0%, BRAND_PRIMARY 50%, BRAND_LIGHT 100%)

---

ステップ 3：タイポグラフィを設定する

ユーザーのフォントの好みに合わせて、Google Fonts から見出しフォントと本文フォントを選びます。

スタイル	見出しフォント	本文フォント
エディトリアル／プレミアム	Playfair Display	DM Sans
モダン／クリーン	Plus Jakarta Sans (700)	Plus Jakarta Sans (400)
温かみのある／親しみやすい	Lora	Nunito Sans
テクニカル／シャープ	Space Grotesk	Space Grotesk
大胆／表現豊か	Fraunces	Outfit
クラシック／信頼感のある	Libre Baskerville	Work Sans
丸みのある／親しみやすい	Bricolage Grotesque	Bricolage Grotesque

フォントサイズのスケール（すべてのブランドで固定）：

• 見出し：28–34px、ウェイト 600、文字間隔 -0.3～-0.5px、行の高さ 1.1–1.15
• 本文：14px、ウェイト 400、行の高さ 1.5–1.55
• タグ／ラベル：10px、ウェイト 600、文字間隔 2px、大文字
• ステップ番号：見出しフォント、26px、ウェイト 300
• 小さいテキスト：11–12px

すべてのスライドで、CSS クラス .serif（見出しフォント）と .sans（本文フォント）を適用します。

---

スライド 1 — フックのルール

最初のスライドは、1 秒以内にスクロールを止める必要があります。次の形式を優先してください。

フックの形式	例
Afirmação polêmica	"Você está usando IA errado"
Número + benefício	"7 ferramentas que substituem seu designer"
Pergunta que dói	"Por que seus carrosséis têm 0 salvamentos?"
Resultado concreto	"Esse post gerou 4.200 seguidores em 3 dias"
Inversão de expectativa	"Mais esforço no design = menos alcance"

ルール：

• 見出しをブランド名で始めないでください
• 可能な限りスライド 1 に視覚的な証拠（スクリーンショット、結果、実際の数値）を含めます
• フックでは、後続のスライドで提供する価値を約束します

---

スライドの構成

標準（7 枚 — デフォルト）

#	種類	背景	目的
1	ヒーロー	LIGHT_BG	フック — 大胆なメッセージ、ロゴロックアップ、任意のウォーターマーク
2	問題	DARK_BG	ペインポイント — 何が壊れているか、苛立たしいか、時代遅れか
3	解決策	ブランドのグラデーション	答え — 解決するもの、任意の引用／プロンプトボックス
4	特徴	LIGHT_BG	得られるもの — アイコン付きの特徴一覧
5	詳細	DARK_BG	詳細 — カスタマイズ、仕様、差別化要素
6	方法	LIGHT_BG	手順 — 番号付きのワークフローまたはプロセス
7	CTA	ブランドのグラデーション	行動喚起 — ロゴ、タグライン、CTA ボタン。矢印なし。プログレスバーは全体表示。

リスト形式（5～10 枚）

#	種類	背景
1	ヒーロー	LIGHT_BG
2–N	アイテム N	LIGHT/DARK を交互に使用
最後	CTA	ブランドのグラデーション

用途：「X ferramentas」、「X erros」、「X dicas」

チュートリアル（7 枚）

#	種類	背景
1	ヒーロー	LIGHT_BG
2	Contexto / Por quê	DARK_BG
3–5	Passo 1, 2, 3	交互に使用
6	Resultado esperado	DARK_BG
7	CTA	ブランドのグラデーション

比較（5 枚）

#	種類	背景
1	ヒーロー（比較するもの）	LIGHT_BG
2	Opção A	LIGHT_BG
3	Opção B	DARK_BG
4	Veredicto	ブランドのグラデーション
5	CTA	DARK_BG

すべての構成に共通するルール：

• フックから始めます — 最初のスライドでスクロールを止める必要があります
• CTA はブランドのグラデーションで締めくくります — スワイプ矢印なし、プログレスバーは 100%
• 視覚的なリズムを生むため、明るい背景と暗い背景を交互に使用します
• トピックに合わせて構成を調整します — すべてのカルーセルに全スライドが必要とは限りません

---

スライドの構成要素

形式

• アスペクト比：4:5（Instagram カルーセルの標準）
• 各スライドは独立しており、すべての UI 要素が画像に組み込まれています
• 視覚的なリズムを生むため、LIGHT_BG と DARK_BG を交互に使用します

すべてのスライドに必要な要素

1. 進捗バー（すべてのスライドの下部）

カルーセル内の位置を表示します。ユーザーがスワイプすると進みます。

• 位置：絶対配置で下部、全幅、水平方向のパディングは28px、下部のパディングは20px
• トラック：高さ3px、角を丸くする
• 塗りつぶし幅：((slideIndex + 1) / totalSlides) * 100%
• 明るいスライド：トラックはrgba(0,0,0,0.08)、塗りつぶしはBRAND_PRIMARY、カウンターはrgba(0,0,0,0.3)
• 暗いスライド：トラックはrgba(255,255,255,0.12)、塗りつぶしは#fff、カウンターはrgba(255,255,255,0.4)
• バーの横に置くカウンターラベル：「1/7」形式、11px、ウェイト500

function progressBar(index, total, isLightSlide) {
  const pct = ((index + 1) / total) * 100;
  const trackColor = isLightSlide ? 'rgba(0,0,0,0.08)' : 'rgba(255,255,255,0.12)';
  const fillColor = isLightSlide ? BRAND_PRIMARY : '#fff'; // use actual BRAND_PRIMARY value
  const labelColor = isLightSlide ? 'rgba(0,0,0,0.3)' : 'rgba(255,255,255,0.4)';
  return `<div style="position:absolute;bottom:0;left:0;right:0;padding:16px 28px 20px;z-index:10;display:flex;align-items:center;gap:10px;">
    <div style="flex:1;height:3px;background:${trackColor};border-radius:2px;overflow:hidden;">
      <div style="height:100%;width:${pct}%;background:${fillColor};border-radius:2px;"></div>
    </div>
    <span style="font-size:11px;color:${labelColor};font-weight:500;">${index + 1}/${total}</span>
  </div>`;
}

⚠️ 重要： 描画する前に、必ずBRAND_PRIMARYを実際の16進数カラー値に置き換えてください。HTML出力に変数名のまま残さないでください。

2. スワイプ矢印（右端 — 最後以外のすべてのスライド）

ユーザーにスワイプを促す、控えめな山形アイコンです。最後のスライドでは表示しません。

• 位置：絶対配置で右端、全高、幅48px
• 背景：透明から控えめな色合いへと変化するグラデーション
• 山形：24×24のSVG、角丸の線
• 明るいスライド：背景はrgba(0,0,0,0.06)、線はrgba(0,0,0,0.25)
• 暗いスライド：背景はrgba(255,255,255,0.08)、線はrgba(255,255,255,0.35)

function swipeArrow(isLightSlide) {
  const bg = isLightSlide ? 'rgba(0,0,0,0.06)' : 'rgba(255,255,255,0.08)';
  const stroke = isLightSlide ? 'rgba(0,0,0,0.25)' : 'rgba(255,255,255,0.35)';
  return `<div style="position:absolute;right:0;top:0;bottom:0;width:48px;z-index:9;display:flex;align-items:center;justify-content:center;background:linear-gradient(to right,transparent,${bg});">
    <svg width="24" height="24" viewBox="0 0 24 24" fill="none">
      <path d="M9 6l6 6-6 6" stroke="${stroke}" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
  </div>`;
}

---

再利用可能なコンポーネント

取り消し線付きピル

<span style="font-size:11px;padding:5px 12px;border:1px solid rgba(255,255,255,0.1);border-radius:20px;color:#6B6560;text-decoration:line-through;">{Old tool}</span>

タグピル

<span style="font-size:11px;padding:5px 12px;background:rgba(255,255,255,0.06);border-radius:20px;color:{BRAND_LIGHT};">{Label}</span>

プロンプト／引用ボックス

<div style="padding:16px;background:rgba(0,0,0,0.15);border-radius:12px;border:1px solid rgba(255,255,255,0.08);">
  <p class="sans" style="font-size:13px;color:rgba(255,255,255,0.5);margin-bottom:6px;">{Label}</p>
  <p class="serif" style="font-size:15px;color:#fff;font-style:italic;line-height:1.4;">"{Quote text}"</p>
</div>

特徴リスト

<div style="display:flex;align-items:flex-start;gap:14px;padding:10px 0;border-bottom:1px solid {LIGHT_BORDER};">
  <span style="color:{BRAND_PRIMARY};font-size:15px;width:18px;text-align:center;">{icon}</span>
  <div>
    <span class="sans" style="font-size:14px;font-weight:600;color:{DARK_BG};">{Label}</span>
    <span class="sans" style="font-size:12px;color:#8A8580;">{Description}</span>
  </div>
</div>

番号付き手順

<div style="display:flex;align-items:flex-start;gap:16px;padding:14px 0;border-bottom:1px solid {LIGHT_BORDER};">
  <span class="serif" style="font-size:26px;font-weight:300;color:{BRAND_PRIMARY};min-width:34px;line-height:1;">01</span>
  <div>
    <span class="sans" style="font-size:14px;font-weight:600;color:{DARK_BG};">{Step title}</span>
    <span class="sans" style="font-size:12px;color:#8A8580;">{Step description}</span>
  </div>
</div>

カラースウォッチ

<div style="width:32px;height:32px;border-radius:8px;background:{color};border:1px solid rgba(255,255,255,0.08);"></div>

CTAボタン（最後のスライドのみ）

<div style="display:inline-flex;align-items:center;gap:8px;padding:12px 28px;background:{LIGHT_BG};color:{BRAND_DARK};font-family:'{BODY_FONT}',sans-serif;font-weight:600;font-size:14px;border-radius:28px;">
  {CTA text}
</div>

タグ／カテゴリラベル

<span class="sans" style="display:inline-block;font-size:10px;font-weight:600;letter-spacing:2px;color:{color};margin-bottom:16px;">{TAG TEXT}</span>

• 明るいスライド：BRAND_PRIMARY
• 暗いスライド：BRAND_LIGHT
• ブランドのグラデーションスライド：rgba(255,255,255,0.6)

ロゴロックアップ（最初と最後のスライド）

• ロゴアイコンの場合：直径40pxの円（背景はBRAND_PRIMARY）＋中央にアイコン＋横にブランド名
• イニシャルの場合：直径40pxの円に最初の文字を白で表示
• ブランド名：13px、ウェイト600、文字間隔0.5px

---

レイアウトルール

• コンテンツのパディング：標準は0 36px
• 進捗バーがある下揃えのスライド：バーに重ならないように0 36px 52px
• ヒーロー／CTAスライド： justify-content: center
• コンテンツが多いスライド： justify-content: flex-end
• コンテンツを進捗バーに絶対に重ねないでください — padding-bottom: 52pxを使用します

---

Instagramフレーム（プレビュー用ラッパー）

チャット内で表示する場合は、Instagram風のフレームで囲みます。

• ヘッダー： アバター（BRAND_PRIMARYの円＋ロゴ）＋ハンドル＋サブタイトル
• ビューポート： アスペクト比4:5、すべてのスライドを含むスワイプ／ドラッグ可能なトラック
• ドット： ビューポートの下に小さなドット状のインジケーターを表示
• アクション： ハート、コメント、シェア、ブックマークのSVGアイコン
• キャプション： ハンドル＋短い説明＋「2 HOURS AGO」のタイムスタンプ

プレビューにはポインター操作によるスワイプ／ドラッグ機能を含めます。スライドは引き続き、単体でエクスポートできる画像です。

重要： .ig-frameの幅は必ず420pxにしてください。カルーセルのビューポートは420×525pxです。この幅は変更しないでください — エクスポートに影響します。

---

レビューフロー

必ずこのフローに従ってください。承認を得る前にエクスポートへ進まないでください。

1. まずHTMLプレビューを生成します — 直接エクスポートに進まないでください
2. プレビューを表示し、次のように尋ねます：「エクスポートする前に、どのスライドを調整しますか？」
3. 指摘されたスライドのみを修正します — 方向性が根本的に変わらない限り、カルーセル全体を再生成しないでください
4. ユーザーが明示的に承認を確認した場合（例：「エクスポートして」「承認しました」「OK」）にのみ、エクスポートへ進みます

---

スライドをInstagram用PNGとしてエクスポートする

ユーザーがカルーセルのプレビューを承認した後、各スライドを個別の1080×1350pxのPNGとしてエクスポートします。

エクスポートに関する重要なルール

1. HTMLの生成にはPythonを使用します — 変数の展開を伴うシェルスクリプトは使用しないでください。必ずPath.write_text()またはopen().write()を使用します。

2. 画像はbase64として埋め込みます — ユーザーがアップロードしたすべての画像をbase64エンコードし、data:image/jpeg;base64,... URIとして埋め込んでください。fileコマンドで実際のファイル形式を確認します — .pngという拡張子でも、中身がJPEGの場合があります。

3. レイアウト幅420pxを維持します — レイアウトのビューポートを変更せずに出力を1080pxに拡大するには、Playwrightのdevice_scale_factorを使用します。

Playwright のインストール（必要な場合のみ）

エクスポートスクリプトを実行する前に、インストールされていない場合のみ確認してインストールします。

python3 -c "import playwright" 2>/dev/null || pip3 install playwright
python3 -c "from playwright.sync_api import sync_playwright; sync_playwright().__enter__().chromium" 2>/dev/null || python3 -m playwright install chromium

エクスポートスクリプト

import asyncio
from pathlib import Path
from playwright.async_api import async_playwright

INPUT_HTML = Path("/path/to/carousel.html")
OUTPUT_DIR = Path("/path/to/output/slides")
OUTPUT_DIR.mkdir(exist_ok=True)

TOTAL_SLIDES = 7  # Update to match your carousel

VIEW_W = 420
VIEW_H = 525
SCALE = 1080 / 420  # = 2.5714...

async def export_slides():
    async with async_playwright() as p:
        browser = await p.chromium.launch()
        page = await browser.new_page(
            viewport={"width": VIEW_W, "height": VIEW_H},
            device_scale_factor=SCALE,
        )

        html_content = INPUT_HTML.read_text(encoding="utf-8")
        await page.set_content(html_content, wait_until="networkidle")
        await page.wait_for_timeout(3000)  # Wait for Google Fonts to load

        # Hide IG frame chrome, show only the slide viewport
        await page.evaluate("""() => {
            document.querySelectorAll('.ig-header,.ig-dots,.ig-actions,.ig-caption')
                .forEach(el => el.style.display='none');

            const frame = document.querySelector('.ig-frame');
            frame.style.cssText = 'width:420px;height:525px;max-width:none;border-radius:0;box-shadow:none;overflow:hidden;margin:0;';

            const viewport = document.querySelector('.carousel-viewport');
            viewport.style.cssText = 'width:420px;height:525px;aspect-ratio:unset;overflow:hidden;cursor:default;';

            document.body.style.cssText = 'padding:0;margin:0;display:block;overflow:hidden;';
        }""")
        await page.wait_for_timeout(500)

        for i in range(TOTAL_SLIDES):
            await page.evaluate("""(idx) => {
                const track = document.querySelector('.carousel-track');
                track.style.transition = 'none';
                track.style.transform = 'translateX(' + (-idx * 420) + 'px)';
            }""", i)
            await page.wait_for_timeout(400)

            await page.screenshot(
                path=str(OUTPUT_DIR / f"slide_{i+1}.png"),
                clip={"x": 0, "y": 0, "width": VIEW_W, "height": VIEW_H}
            )
            print(f"Exported slide {i+1}/{TOTAL_SLIDES}")

        await browser.close()

asyncio.run(export_slides())

これでうまくいく理由

• device_scale_factor=2.5714 は高 DPI でレンダリングします。420px の要素は出力時に 1080px になります。レイアウトは 420px のままです。
• clip はブラウザーの枠ではなく、カルーセルのビューポートのみをキャプチャします。
• wait_for_timeout(3000) により、Google Fonts の読み込み時間を確保します。
• track.style.transition = 'none' はスワイプアニメーションを無効にし、スライドが瞬時に切り替わるようにします。

避けるべきよくあるエクスポートのミス

ミス	問題点	修正方法
ビューポートを 1080×1350 に設定する	レイアウトが再配置され、フォントが小さくなり、間隔が崩れます	ビューポートは 420×525 のままにし、device_scale_factor を使用します
シェルスクリプトを使って HTML を生成する	$ 記号やバッククォートが展開されます	HTML の生成には必ず Python を使用します
フォントの読み込みを待たない	見出しがフォールバックのシステムフォントで表示されます	ページ読み込み後に wait_for_timeout(3000) を実行します
IG フレームの枠を非表示にしない	エクスポートにヘッダー、ドット、キャプションが含まれます	.ig-header,.ig-dots,.ig-actions,.ig-caption を非表示にします
.ig-frame の幅を変更する	レイアウト全体がずれます	必ず幅を正確に 420px に保ちます
CSS で BRAND_PRIMARY を変数名のままにする	色が無効になり、表示されなくなります	HTML には必ず実際の 16 進数の値を埋め込みます

---

デザイン原則

1. すべてのスライドをエクスポート可能な状態にする — 矢印と進捗バーはスライド画像の一部です
2. 明るい色と暗い色を交互に使う — スワイプ全体に視覚的なリズムを生み出します
3. 見出しと本文のフォントを組み合わせる — インパクトを与える見出し用フォントと、読みやすさを重視した本文用フォントを使います
4. ブランドに由来するカラーパレットを使う — すべての色を 1 つのメインカラーから派生させ、全体に統一感を持たせます
5. 段階的に情報を提示する — 進捗バーが伸び、矢印が次へ進むよう促します
6. 最後のスライドには特別なデザインを施す — 矢印をなくし、進捗バーを最後まで表示して、明確な CTA を配置します
7. コンポーネントに一貫性を持たせる — すべてのスライドで同じタグのスタイル、リストのスタイル、間隔を使います
8. コンテンツの余白を確保して UI と重ならないようにする — 本文が進捗バーや矢印に重ならないようにします
9. 最初にフックとなるコピーを置く — スライド 1 の目的はスクロールを止めることであり、ブランドの紹介ではありません
10. 素早く反復する — プレビューを表示し、該当するスライドを修正して、最初から作り直さないようにします