β 版 無料公開中

日本語の OGP 画像を、
もう手で作らない

BudouX の文節境界モデルと JIS X 4051 禁則処理を内蔵した、日本語のためだけの OGP 画像生成 API。
title を渡すだけで、正しく折り返された 1200×630 の PNG が返ってきます。

ogflow で生成した OGP 画像のサンプル(minimal テーマ)
① 文節折返し
BudouX で文節の境界を検出し、意味の途中で改行されません
② 禁則処理
読点が行頭に来ない・括弧が行末で孤立しないなど 28 種の禁則を内蔵
Features

日本語 CMS に特化した OGP エンジン

既存のライブラリでは対応できなかった日本語特有の課題を解決し、開発者の手間を省きます。

折返し

正確な日本語折り返し

Google BudouX の文節分割 + JIS X 4051 禁則処理で、句読点・括弧などが行頭・行末にはみ出しません。

CDN 配信

Cloudflare R2 キャッシュ

同じパラメータの画像は R2 に永続保存。2 回目以降は CDN から直配信されます。egress 課金ゼロ。

CMS 連携

microCMS Webhook 連携

記事公開と同時に OGP を自動生成。SNS シェア時の「画像なし」問題を解消します。

SDK

TypeScript SDK

@ogflow/sdk を npm install するだけで Next.js の generateMetadata に組み込めます。

認証

Signed URL 対応

HMAC-SHA256 署名付き URL でクライアントサイドからも安全に呼び出せます。有効期限付きで使い捨て用途にも対応。

テーマ

8 種類のテーマ

minimal・zenn・dark・gradient・newspaper・tweet・bold・note の 8 種類。theme= パラメータで切り替えるだけです。

Themes

8 種類のテーマ

用途やブランドに合わせてテーマを選択できます。theme= パラメータで切り替えるだけです。

Free プラン 2 テーマ · ogflow ウォーターマーク付き
minimal

白背景 + 左インディゴアクセントライン。どんなサイトにも馴染むスタンダードデザイン。

theme=minimal
zenn

濃紺スレート背景。Zenn ライクなテックブログ向けダークテーマ。アバター画像に対応。

theme=zenn
Hobby プラン以上 全 8 テーマ利用可 · Watermark なし
dark

ダークジンク背景 + シアンアクセント。コード系・テック系ブログに最適。

theme=dark
gradient

インディゴ → バイオレット → ブルーのグラデーション。SNS 映えするビビッドデザイン。

theme=gradient
newspaper

新聞マストヘッド風。ブログ・メディアサイトの記事 OGP に馴染むクラシックレイアウト。

theme=newspaper
tweet

2 カラム構成。左にタイトル、右インディゴパネルでサイト名を強調。Twitter/X 向き。

theme=tweet
bold

中央ど真ん中にタイトルを大きく。インパクト重視のタイポグラフィファーストデザイン。

theme=bold
note

白背景・中央揃え。note.mu ライクなクリーンデザイン。一般ブログ・メディアサイト向き。

theme=note
Try it

実際に試してみる

タイトルを入力するだけで OGP 画像がリアルタイムで生成されます。API キー不要、今すぐ体験できます。

0/120
0/240
0/40
タイトルを入力すると画像が生成されます
リクエストが多すぎます。時間をおいてから再度お試しください。
画像の生成に失敗しました。時間をおいてから再度お試しください。
Quick Start

API キー 1 本で、すぐ使える

Next.js でも microCMS でも、同じ API キーが使えます。既存のコードに追加するだけで導入が完了します。

01

API キーを申し込む

こちらから申し込むと Stripe で安全に登録でき、即座に sk_ogflow_... 形式のキーが発行されます。

02

SDK をインストール

1npm install @ogflow/sdk
03

Next.js で使う

1// app/blog/[slug]/page.tsx
2import { createOG } from '@ogflow/sdk';
3
4const og = createOG({ apiKey: process.env.OG_API_KEY! });
5
6export async function generateMetadata({ params }) {
7 const post = await fetchPost(params.slug);
8 const { url } = await og.generate({ title: post.title, theme: 'minimal' });
9 return { openGraph: { images: [{ url, width: 1200, height: 630 }] } };
10}
04

microCMS Webhook で自動生成(任意)

SDK を使わず、記事公開時に自動で OGP を生成したい場合に設定します。

1# microCMS 管理画面 → API 設定 → Webhook
2URL: https://ogflow.jp/webhooks/microcms
3Header: X-OG-Project-Id: {ダッシュボードで発行したプロジェクト ID}
4シークレット: {ダッシュボードで発行した Webhook シークレット}
Pricing

シンプルな料金体系

β 版期間中は Free プランを無料で提供しています。クレジットカード不要です。

Hobby

¥980 / 月

アクセスが増えてきたブログ・メディア向け

  • 5,000 枚 / 月
  • 全 8 テーマ
  • Watermark なし
  • R2 キャッシュ(無期限)
  • microCMS Webhook 連携
  • TypeScript SDK
  • 稼働率目標(ベストエフォート)
近日公開

Pro

¥2,980 / 月

企業・メディア向け本格運用

  • 30,000 枚 / 月
  • 全 8 テーマ
  • Watermark なし
  • R2 キャッシュ(無期限)
  • microCMS + 主要 CMS Webhook(順次対応)
  • TypeScript SDK
  • 優先サポート(営業日 2 日以内を目標)
  • 稼働率目標(ベストエフォート)
近日公開
Start free · No credit card

タイトルを渡すだけ。その先は、ogflow に。

Free プランは月 200 枚まで無料。API キーは発行 30 秒、SDK の導入も数行で完了します。