social-media-carousel

belt CLI スキルをインストール： npx skills add belt-sh/cli

ソーシャルメディアのカルーセル

inference.sh CLI を使って、エンゲージメントの高いカルーセル投稿をデザインします。

クイックスタート

inference.sh CLI（belt）が必要です。インストール手順

belt login

# Generate a carousel slide
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1080px;height:1080px;background:#0f172a;display:flex;align-items:center;justify-content:center;padding:80px;font-family:system-ui;color:white;text-align:center\"><div><p style=\"font-size:24px;color:#818cf8;text-transform:uppercase;letter-spacing:3px\">5 Rules for</p><h1 style=\"font-size:64px;margin:16px 0;font-weight:900;line-height:1.1\">Writing Headlines That Convert</h1><p style=\"font-size:22px;opacity:0.5;margin-top:24px\">Swipe →</p></div></div>"
}'

プラットフォームの仕様

プラットフォーム	サイズ	スライド数	アスペクト比
Instagram	1080 x 1080 px	最大 20 枚	1:1（デフォルト）、4:5、16:9
LinkedIn	1080 x 1080 px または 1080 x 1350	最大 20 枚	1:1、4:5
Twitter/X	1080 x 1080 px	最大 4 枚	1:1、16:9
Facebook	1080 x 1080 px	最大 10 枚	1:1、4:5

Instagram と LinkedIn では 1080 x 1350（4:5） を使いましょう。正方形よりもフィード内で画面の広い範囲を占めます。

カルーセルの構成

7 枚構成のフレームワーク

スライド	目的	内容
1	フック	大胆な主張、質問、または約束で、スクロールを止めます
2	背景	なぜ重要なのかを示し、問題を提示します
3-6	価値	1 枚につき 1 つのポイントを番号付きで紹介します
7	CTA	フォロー、保存、シェア、コメント、リンクへのアクセスを促します

スライド 1：フック

最も重要なスライドです。ここで失敗すると、誰もスワイプしません。

フックの種類	例
大胆な主張	「ランディングページの 90% がこのミスをしています」
質問	「広告がクリックされるのに、なぜコンバージョンにつながらないのでしょうか？」
数字＋約束	「もっと早く知りたかった Python のテクニック 7 選」
逆説的な主張	「ブログ記事を書くのはやめましょう（代わりにこれを）」
ビフォー／アフター	変化を見せます

# Hook slide
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1080px;height:1350px;background:linear-gradient(180deg,#1e1b4b,#312e81);display:flex;align-items:center;justify-content:center;padding:80px;font-family:system-ui;color:white;text-align:center\"><div><h1 style=\"font-size:72px;font-weight:900;line-height:1.15;margin:0\">90% of Landing Pages Make This Mistake</h1><p style=\"font-size:28px;opacity:0.6;margin-top:32px\">Swipe to find out →</p></div></div>"
}'

スライド 2-6：コンテンツスライド

1 枚につき 1 つのポイントにします。複数のアイデアを詰め込まないでください。

# Content slide template
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1080px;height:1350px;background:#1e1b4b;padding:80px;font-family:system-ui;color:white;display:flex;flex-direction:column;justify-content:center\"><div><p style=\"font-size:120px;font-weight:900;color:#818cf8;margin:0;line-height:1\">01</p><h2 style=\"font-size:48px;margin:24px 0 16px;font-weight:800;line-height:1.2\">Your headline is too vague</h2><p style=\"font-size:26px;opacity:0.8;line-height:1.6\">\"Welcome to our platform\" tells the visitor nothing. Lead with the outcome: \"Ship docs in minutes, not days.\"</p></div></div>"
}'

スライド 7：CTA スライド

# CTA slide
belt app run infsh/html-to-image --input '{
  "html": "<div style=\"width:1080px;height:1350px;background:linear-gradient(180deg,#312e81,#1e1b4b);display:flex;align-items:center;justify-content:center;padding:80px;font-family:system-ui;color:white;text-align:center\"><div><h2 style=\"font-size:56px;font-weight:900;margin:0;line-height:1.2\">Found this useful?</h2><p style=\"font-size:32px;opacity:0.8;margin-top:24px;line-height:1.5\">Save this post for later 🔖<br>Follow for more tips</p><p style=\"font-size:24px;opacity:0.4;margin-top:40px\">@yourusername</p></div></div>"
}'

デザインルール

テキストの階層

要素	サイズ（1080px の場合）	ウェイト
スライド番号	96-120px	Black（900）
見出し	48-64px	Bold（700-800）
本文	24-28px	Regular（400）
キャプション／タグ	18-22px	Medium（500）

読みやすさ

ルール	値
1 枚あたりの単語数の上限	30-40
本文の最大行数	4-5
行の高さ	1.5-1.6
フォント	サンセリフ（Inter、Montserrat、Poppins）
テキストのコントラスト比	最低 4.5:1（WCAG AA）

ビジュアルの一貫性

要素	すべてのスライドで統一する項目
背景色／グラデーション	同じ配色にします。多少の変化は問題ありません
フォントファミリー	全体を通して同じフォントを使います
テキストの配置	同じ位置（左または中央）にします
マージン／パディング	間隔を統一します
アクセントカラー	同じハイライトカラーを使います
番号の形式	同じ形式（01、02 または 1.、2.）にします

カルーセルの種類

教育／ヒント

Slide 1: "5 CSS tricks you need to know"
Slide 2: Trick 1 with code example
Slide 3: Trick 2 with code example
...
Slide 6: Trick 5 with code example
Slide 7: "Follow for more dev tips"

ストーリーテリング／事例紹介

Slide 1: "How we grew from 0 to $1M ARR"
Slide 2: The beginning (context)
Slide 3: The challenge
Slide 4: What we tried (failed)
Slide 5: What worked
Slide 6: The result (numbers)
Slide 7: Key takeaway + CTA

ビフォー／アフター

Slide 1: "I redesigned this landing page"
Slide 2: Before screenshot
Slide 3: Problem 1 annotated
Slide 4: After screenshot
Slide 5: Improvement 1 explained
Slide 6: Results (conversion lift)
Slide 7: "Want a review? DM me"

リスト形式／ツール

Slide 1: "10 tools every designer needs in 2025"
Slides 2-6: 2 tools per slide with logo + one-liner
Slide 7: "Save this for later 🔖"

スワイプの心理学

原則	活用方法
好奇心のギャップ	スワイプすると得られる価値をフックで約束します
番号付きの進捗	「3/7」で最後まで見たい気持ちを促します
ビジュアルの連続性	一貫したデザインで「続きがある」と伝えます
価値を高めていく	最後に最高のヒントを置き、最後まで見た人に報います
スワイプの合図	スライド 1 に矢印または「スワイプ →」を表示します

一括生成

# Generate all slides for a carousel
for i in 1 2 3 4 5 6 7; do
  belt app run infsh/html-to-image --input "{
    \"html\": \"<div style='width:1080px;height:1350px;background:#1e1b4b;display:flex;align-items:center;justify-content:center;padding:80px;font-family:system-ui;color:white'><div style='text-align:center'><p style='font-size:28px;opacity:0.5'>Slide $i of 7</p></div></div>\"
  }" --no-wait
done

AI 生成カルーセルビジュアル

# Generate illustrations for each slide
belt app run falai/flux-dev-lora --input '{
  "prompt": "minimal flat illustration, person at desk with laptop, clean modern style, simple shapes, limited color palette purple and blue tones, white background, icon style",
  "width": 1080,
  "height": 1080
}'

よくある間違い

間違い	問題	修正方法
弱いフック（スライド1）	誰もスワイプしません	大胆な主張、質問、または数字と、それによって得られることを示します
1枚のスライドにテキストが多すぎる	圧倒され、読むのをやめてしまいます	1枚あたり最大30～40語にします
ビジュアルに一貫性がない	投稿ごとに別物のように見えます	全体を通して色、フォント、余白を統一します
スワイプの案内がない	続きがあることに気づかれません	スライド1に「スワイプ →」または矢印を追加します
最後のスライドにCTAがない	エンゲージメントの機会を逃します	保存、フォロー、シェア、またはコメントを促します
番号の付け方に一貫性がない	整理されていない印象になります	すべてのコンテンツスライドで同じ番号形式を使います
1枚のスライドに2つ以上のアイデアを詰め込む	理解しにくくなります	常に1枚につき1つのポイントにします
Instagramで正方形のフォーマットを使う	フィードのスペースを無駄にします	視認性を高めるために、1080x1350（4:5）を使います

関連スキル

npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@content-repurposing
npx skills add inference-sh/skills@linkedin-content

すべてのアプリを見る：belt app list