belt CLIスキルのインストール:
npx skills add belt-sh/cli
OG画像デザイン
inference.sh CLI を使用してソーシャルシェア画像（Open Graph）を作成します。
クイックスタート
inference.sh CLI（
belt）が必要です。インストール手順
belt login
# HTML to image でOG画像を生成
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;align-items:center;padding:60px;font-family:system-ui;color:white\"><div><h1 style=\"font-size:56px;margin:0;line-height:1.2\">How We Reduced Build Times by 80%</h1><p style=\"font-size:24px;opacity:0.8;margin-top:20px\">engineering.yourcompany.com</p></div></div>"
}'
プラットフォーム仕様
| プラットフォーム | サイズ | アスペクト比 | ファイルサイズ | 形式 |
|---|---|---|---|---|
| 1200 x 630 px | 1.91:1 | < 8 MB | JPG, PNG | |
| Twitter/X (summary_large_image) | 1200 x 628 px | 1.91:1 | < 5 MB | JPG, PNG, WEBP, GIF |
| Twitter/X (summary) | 800 x 418 px | 1.91:1 | < 5 MB | JPG, PNG |
| 1200 x 627 px | 1.91:1 | < 5 MB | JPG, PNG | |
| Discord | 1200 x 630 px | 1.91:1 | < 8 MB | JPG, PNG |
| Slack | 1200 x 630 px | 1.91:1 | — | JPG, PNG |
| iMessage | 1200 x 630 px | 1.91:1 | — | JPG, PNG |
ユニバーサルな推奨設定: 1200 x 630 px、PNG または JPG、5 MB 未満。
黄金レイアウト
┌──────────────────────────────────────────────────┐
│ │
│ ┌─────────────────────────────────┐ ┌───────┐ │
│ │ │ │ │ │
│ │ タイトルテキスト (最大60文字) │ │ ロゴ/ │ │
│ │ ─────────────────── │ │ ビジュアル│
│ │ サブタイトル (最大100文字) │ │ │ │
│ │ │ │ │ │
│ │ 作成者 / サイト名 │ └───────┘ │
│ └─────────────────────────────────┘ │
│ │
└──────────────────────────────────────────────────┘
1200 x 630 px
デザインルール
テキスト
| ルール | 値 |
|---|---|
| タイトルフォントサイズ | 48-64px |
| サブタイトルフォントサイズ | 20-28px |
| タイトル最大文字数 | 60文字（一部プラットフォームで切り捨て） |
| サブタイトル最大文字数 | 100文字 |
| 行間 | タイトルは1.2-1.3 |
| フォントウェイト | タイトルはBold/Black、サブタイトルはRegular |
| テキストのコントラスト | WCAG AA準拠（4.5:1比率） |
セーフゾーン
┌──────────────────────────────────────────────────┐
│ ┌──────────────────────────────────────────────┐│
│ │ 全辺から40pxのパディング ││
│ │ ││
│ │ コンテンツはここに配置 ││
│ │ ││
│ │ ││
│ └──────────────────────────────────────────────┘│
└──────────────────────────────────────────────────┘
- 全辺から最低40pxのパディング
- 一部プラットフォームは端を切り取ったり角を丸めたりする
- 重要なテキストは外側5%に配置しない
色
| 背景タイプ | 使用時 |
|---|---|
| 単一ブランドカラー | 一貫性のあるシリーズ、コーポレート |
| グラデーション | モダンで目を引く |
| 写真＋オーバーレイ | ブログ記事、エディトリアル |
| 暗い背景 | コントラストが良好、フィードで目立つ |
ソーシャルフィードでは暗い背景が明るい背景より優れています — ほとんどのフィードは白/明るい背景なので、暗いOG画像が際立ちます。
コンテンツタイプ別テンプレート
ブログ記事
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:linear-gradient(135deg,#667eea,#764ba2);display:flex;align-items:center;padding:60px;font-family:system-ui,sans-serif;color:white\"><div style=\"flex:1\"><p style=\"font-size:18px;text-transform:uppercase;letter-spacing:2px;opacity:0.8;margin:0\">Engineering Blog</p><h1 style=\"font-size:52px;margin:16px 0 0;line-height:1.2;font-weight:800\">How We Reduced Build Times by 80%</h1><p style=\"font-size:22px;opacity:0.9;margin-top:16px\">A deep dive into our CI/CD optimization</p></div></div>"
}'
製品発表
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:#0f0f0f;display:flex;align-items:center;justify-content:center;font-family:system-ui;color:white;text-align:center\"><div><p style=\"font-size:20px;color:#22c55e;text-transform:uppercase;letter-spacing:3px\">Now Available</p><h1 style=\"font-size:64px;margin:12px 0;font-weight:900\">DataFlow 2.0</h1><p style=\"font-size:24px;opacity:0.7\">Automated reports. Zero configuration.</p></div></div>"
}'
チュートリアル/How-To
belt app run infsh/html-to-image --input '{
"html": "<div style=\"width:1200px;height:630px;background:linear-gradient(to right,#1a1a2e,#16213e);display:flex;align-items:center;padding:60px;font-family:system-ui;color:white\"><div><div style=\"display:inline-block;background:#e74c3c;color:white;padding:8px 16px;border-radius:4px;font-size:16px;font-weight:bold;margin-bottom:16px\">TUTORIAL</div><h1 style=\"font-size:48px;margin:0;line-height:1.2\">Build a REST API in 10 Minutes with Node.js</h1><p style=\"font-size:20px;opacity:0.7;margin-top:16px\">Step-by-step guide with code examples</p></div></div>"
}'
AI生成ビジュアルOG
# テキストベースではなく印象的なビジュアルが欲しい場合
belt app run falai/flux-dev-lora --input '{
"prompt": "clean professional social sharing card, dark gradient background, abstract geometric shapes, modern tech aesthetic, minimal, no text, 1200x630 equivalent aspect ratio",
"width": 1200,
"height": 630
}'
OGメタタグリファレンス
<!-- 必須 (Facebook, LinkedIn, Discord, Slack) -->
<meta property="og:title" content="タイトル（最大60文字）" />
<meta property="og:description" content="説明文（最大155文字）" />
<meta property="og:image" content="https://yoursite.com/og-image.png" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="article" />
<!-- Twitter/X 固有 -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="タイトル" />
<meta name="twitter:description" content="説明文" />
<meta name="twitter:image" content="https://yoursite.com/og-image.png" />
<!-- 画像サイズ（任意だが推奨） -->
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Twitterカードタイプ
| カードタイプ | 画像サイズ | 使用時 |
|---|---|---|
summary | 800 x 418（サムネイル小） | 短い更新、リンク |
summary_large_image | 1200 x 628（全幅） | ブログ記事、アーティクル、発表 |
特別な理由がない限り常に summary_large_image を使用してください — 大きな画像の方がクリック数が大幅に増加します。
一貫性システム
多数のページを持つブログやサイトの場合、テンプレートシステムを作成します:
| 要素 | 一貫させる | 変更する |
|---|---|---|
| 背景スタイル | 同じグラデーションまたはブランドカラー | — |
| フォントファミリー | 同じフォント | — |
| レイアウト | 同じ配置 | — |
| ロゴ/ブランディング | 同じ配置（コーナー） | — |
| カテゴリバッジ | 同じスタイル | カテゴリごとに色変更 |
| タイトルテキスト | 同じサイズ/ウェイト | コンテンツ変更 |
OG画像のテスト
| ツール | URL |
|---|---|
| Facebook Debugger | developers.facebook.com/tools/debug/ |
| Twitter Card Validator | cards-dev.twitter.com/validator |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ |
| OpenGraph.xyz | opengraph.xyz |
# OGデバッグツールの調査
belt app run tavily/search-assistant --input '{
"query": "open graph image debugger preview tool test og:image"
}'
よくある誤り
| 誤り | 問題 | 修正方法 |
|---|---|---|
| OG画像の欠落 | プラットフォームがランダムなページ要素や何も表示しない | 必ず og:image を設定する |
| テキストが小さすぎる | モバイルプレビューで読めない | 1200px幅でタイトルは最低48px |
| 明るい背景 | 白/明るいフィードに埋もれる | 暗いまたは彩度の高い背景を使用する |
| テキストが多すぎる | ごちゃごちゃして圧倒される | 最大: タイトル + サブタイトル + ブランド |
| 画像が大きすぎる（>5MB） | 一部プラットフォームで読み込まれない | 理想的には1MB以下に最適化する |
| セーフゾーンパディングなし | 一部プラットフォームでテキストが切り取られる | 全辺から40pxのパディング |
| プラットフォームごとに異なる画像 | 共有体験に一貫性がない | すべてに1200x630を使用する |
| HTTP画像URL | 多くのプラットフォームでHTTPSが必要 | OG画像は常にHTTPSで配信する |
| 相対画像パス | 共有時に解決されない | 完全な絶対URLを使用する |
関連スキル
npx skills add inference-sh/skills@ai-image-generation
npx skills add inference-sh/skills@landing-page-design
npx skills add inference-sh/skills@prompt-engineering
すべてのアプリを参照: belt app list