og-image-design

Name: og-image-design
Author: magentosh

github.com/magentoshデザイン・UI443 回インストール12 週間前に更新

リポジトリ

og-image-design について

inference.sh で Open Graph のシェア画像を作成する belt CLI スキルです。コンテンツ制作者やサイトチーム向けに、各プラットフォームのサイズ、レイアウト、生成手順を案内します。

主な機能

01HTML-to-image による画像生成
02プラットフォーム別サイズの参照
03文字・コントラスト・セーフゾーンの指針
04内容別画像テンプレートの作成
05複数ページでの画像スタイル統一

活用シーン

01ブログ記事のシェアカード作成
02製品発表用画像のデザイン
03チュートリアルのプレビュー画像作成

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/magentosh/superpowers --skill og-image-design

インストール後、Claude Code で/og-image-designを入力して読み込まれたか確認します。

詳細

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

OG 画像のデザイン

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

クイックスタート

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

belt login

# Generate an OG image with HTML-to-image
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>"
}'

プラットフォームごとの仕様

プラットフォーム	寸法	アスペクト比	ファイルサイズ	形式
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 未満。

基本のレイアウト

┌──────────────────────────────────────────────────┐
│                                                  │
│  ┌─────────────────────────────────┐  ┌───────┐  │
│  │                                 │  │       │  │
│  │  Title Text (max 60 chars)      │  │ Logo/ │  │
│  │  ───────────────────            │  │ Visual│  │
│  │  Subtitle (max 100 chars)       │  │       │  │
│  │                                 │  │       │  │
│  │  author / site name             │  └───────┘  │
│  └─────────────────────────────────┘             │
│                                                  │
└──────────────────────────────────────────────────┘
  1200 x 630 px

デザインのルール

テキスト

ルール	値
タイトルのフォントサイズ	48-64px
サブタイトルのフォントサイズ	20-28px
タイトルの最大文字数	60 文字（一部のプラットフォームでは切り詰められます）
サブタイトルの最大文字数	100 文字
行の高さ	タイトルは 1.2-1.3
フォントの太さ	タイトルは Bold/Black、サブタイトルは Regular
テキストのコントラスト	WCAG AA の最低基準（比率 4.5:1）

セーフゾーン

┌──────────────────────────────────────────────────┐
│  ┌──────────────────────────────────────────────┐│
│  │ 40px padding from all edges                  ││
│  │                                              ││
│  │  Content lives here                          ││
│  │                                              ││
│  │                                              ││
│  └──────────────────────────────────────────────┘│
└──────────────────────────────────────────────────┘

すべての端から最低 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>"
}'

チュートリアル・手順ガイド

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

# When you want a striking visual instead of text-based
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 メタタグのリファレンス


<meta property="og:title" content="Title here (60 chars max)" />
<meta property="og:description" content="Description (155 chars max)" />
<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" />


<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Title here" />
<meta name="twitter:description" content="Description" />
<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

# Research OG debugging tools
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 を使います

基本情報

作者: magentosh
リポジトリ: magentosh/superpowers
カテゴリ: デザイン・UI
インストール数: 43
GitHub スター: 4

問題を報告