belt CLIスキルをインストール: npx skills add belt-sh/cli
ソーシャルメディアカルーセル
inference.sh CLIを使ってエンゲージメントの高いカルーセル投稿をデザインします。
クイックスタート
inference.sh CLI（belt）が必要です。インストール手順
belt login
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つのルール</p><h1 style=\"font-size:64px;margin:16px 0;font-weight:900;line-height:1.1\">コンバージョンする見出しの書き方</h1><p style=\"font-size:22px;opacity:0.5;margin-top:24px\">スワイプ →</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つのポイント、番号付き |
| 7 | CTA | フォロー、保存、シェア、コメント、リンクへ |
スライド1：フック
最も重要なスライド。これが失敗すると、誰もスワイプしません。
| フックのタイプ | 例 |
|---|
| 大胆な主張 | 「ランディングページの90%がこの間違いを犯している」 |
| 質問 | 「広告はクリックされるのにコンバージョンしないのはなぜ？」 |
| 数字＋約束 | 「もっと早く知りたかったPythonの7つのテクニック」 |
| 逆説 | 「ブログ記事を書くのはやめよう（代わりにこれを）」 |
| ビフォー/アフター | 変革を示す |
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%がこの間違いを犯している</h1><p style=\"font-size:28px;opacity:0.6;margin-top:32px\">スワイプして確認 →</p></div></div>"
}'
スライド2-6：コンテンツスライド
スライドごとに1つのポイント。複数のアイデアを詰め込まない。
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\">見出しが曖昧すぎる</h2><p style=\"font-size:26px;opacity:0.8;line-height:1.6\">「私たちのプラットフォームへようこそ」では訪問者に何も伝わらない。「数分でドキュメントを公開、数日ではなく」のように、成果を先に伝えよう。</p></div></div>"
}'
スライド7：CTAスライド
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\">役に立ちましたか？</h2><p style=\"font-size:32px;opacity:0.8;margin-top:24px;line-height:1.5\">後で見返すために保存 🔖<br>フォローしてもっとヒントを</p><p style=\"font-size:24px;opacity:0.4;margin-top:40px\">@あなたのユーザー名</p></div></div>"
}'
デザインルール
テキスト階層
| 要素 | サイズ（1080px時） | ウェイト |
|---|
| スライド番号 | 96-120px | ブラック（900） |
| 見出し | 48-64px | ボールド（700-800） |
| 本文 | 24-28px | レギュラー（400） |
| キャプション/タグ | 18-22px | ミディアム（500） |
可読性
| ルール | 値 |
|---|
| スライドあたりの最大単語数 | 30-40 |
| 本文の最大行数 | 4-5 |
| 行間 | 1.5-1.6 |
| フォント | サンセリフ（Inter、Montserrat、Poppins） |
| テキストコントラスト | 最小4.5:1（WCAG AA） |
視覚的一貫性
| 要素 | 全スライドで一貫させる |
|---|
| 背景色/グラデーション | 同じパレット、微妙なバリエーションはOK |
| フォントファミリー | 全体で同じフォント |
| テキスト配置 | 同じ位置（左または中央） |
| マージン/パディング | 同じ間隔 |
| アクセントカラー | 同じハイライト色 |
| ナンバリングスタイル | 同じ形式（01、02 または 1.、2.） |
カルーセルの種類
教育／ヒント
スライド1：「知っておくべきCSSの5つのテクニック」
スライド2：コード例付きテクニック1
スライド3：コード例付きテクニック2
...
スライド6：コード例付きテクニック5
スライド7：「開発ヒントをもっと見るにはフォロー」
ストーリーテリング／ケーススタディ
スライド1：「0から100万ドルARRに成長した方法」
スライド2：始まり（コンテキスト）
スライド3：課題
スライド4：試したこと（失敗）
スライド5：うまくいったこと
スライド6：結果（数字）
スライド7：重要な教訓 + CTA
ビフォー／アフター
スライド1：「このランディングページをリデザインしました」
スライド2：ビフォーのスクリーンショット
スライド3：問題1の注釈
スライド4：アフターのスクリーンショット
スライド5：改善点1の説明
スライド6：結果（コンバージョン率向上）
スライド7：「レビューが欲しい？DMください」
リスト／ツール
スライド1：「2025年にデザイナーに必要な10のツール」
スライド2-6：スライドあたり2ツール（ロゴ＋一言）
スライド7：「後で保存 🔖」
スワイプ心理学
| 原理 | 応用 |
|---|
| 好奇心ギャップ | フックがスワイプを必要とする価値を約束する |
| 数字による進捗 | 「3/7」が完了へのドライブを生む |
| 視覚的連続性 | 一貫したデザインが「まだある」ことを示す |
| 価値の増加 | 最後に最高のヒント — 完了への報酬 |
| スワイプキュー | スライド1に矢印または「スワイプ→」 |
バッチ生成
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'>スライド $i / 7</p></div></div>\"
}" --no-wait
done
AI生成カルーセルビジュアル
belt app run falai/flux-dev-lora --input '{
"prompt": "ミニマルなフラットイラスト、デスクに座る人物とノートパソコン、クリーンなモダンスタイル、シンプルな形状、紫と青の限られたカラーパレット、白い背景、アイコンスタイル",
"width": 1080,
"height": 1080
}'
よくある間違い
| 間違い | 問題 | 修正 |
|---|
| 弱いフック（スライド1） | 誰もスワイプしない | 大胆な主張、質問、または数字＋約束 |
| スライドあたりのテキストが多い | 圧倒され、読むのをやめる | スライドあたり最大30-40単語 |
| 視覚的一貫性がない | 別の投稿のように見える | 全体で同じ色、フォント、マージン |
| スワイプ表示がない | 人がまだあることに気づかない | スライド1に「スワイプ→」または矢印を追加 |
| 最後のスライドにCTAがない | エンゲージメントの機会損失 | 保存、フォロー、シェア、コメントを依頼 |
| ナンバリングの不一致 | まとまりがない印象 | すべてのコンテンツスライドで同じ番号形式 |
| 1つのスライドに2つ以上のアイデアを詰め込む | 消化しにくい | 常にスライドごとに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