SeaXen/og-image-design

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

OG画像デザイン

ソーシャル共有画像（Open Graph）を inference.sh CLI で作成します。

クイックスタート

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\">ビルド時間を80%削減した方法</h1><p style=\"font-size:24px;opacity:0.8;margin-top:20px\">engineering.yourcompany.com</p></div></div>"
}'

プラットフォーム仕様

プラットフォーム	寸法	アスペクト比	ファイルサイズ	形式
Facebook	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
LinkedIn	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\">エンジニアリングブログ</p><h1 style=\"font-size:52px;margin:16px 0 0;line-height:1.2;font-weight:800\">ビルド時間を80%削減した方法</h1><p style=\"font-size:22px;opacity:0.9;margin-top:16px\">CI/CD最適化の詳細な解説</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\">ただいま利用可能</p><h1 style=\"font-size:64px;margin:12px 0;font-weight:900\">DataFlow 2.0</h1><p style=\"font-size:24px;opacity:0.7\">自動レポート。設定不要。</p></div></div>"
}'

チュートリアル/ハウツー

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\">チュートリアル</div><h1 style=\"font-size:48px;margin:0;line-height:1.2\">Node.jsで10分でREST APIを構築する</h1><p style=\"font-size:20px;opacity:0.7;margin-top:16px\">コード例付きステップバイステップガイド</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デバッガー	developers.facebook.com/tools/debug/
Twitterカードバリデーター	cards-dev.twitter.com/validator
LinkedIn投稿インスペクター	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