Guide
OGP画像メーカーの使い方
トップページで背景を選び、設定パネルで表示内容と装飾を調整し、 生成された URL を記事やページの og:image に設定します。
Editor
編集画面の使い方
編集画面で利用したい背景とカラーリングなどを選び、URLをコピーできます。
設定パネルで見た目を詰める
設定パネルでテキストの配置やカラー、背景効果などを切り替えると、選択中のカードに即時反映されます。ダミーコンテンツ付きのプレビュー表示で仕上がりを確認します。
URL をコピーして og:image に貼る
設定パネル下部ある「URLをコピー」ボタンで、API URL をコピーします。YOUR_TITLE_HERE/HEAD_META/FOOT_METAを実テキストに置き換えて、記事ページのog:imageに指定してください。
もしくは、背景画像だけをダウンロードすることもできます。自身のプロダクトでsatoriなどを使っている場合に、その背景としてダウンロードした画像を利用していただくことも可能です。
API
画像生成 API
OGP画像生成用のエンドポイントは /ogimg-maker/apiです。クエリを読み取って画像を生成し、1200×630 の JPEG を返します。 生成済み画像は一定期間キャッシュされ、302 リダイレクトになります。
URL の例
「タイトル: OGP画像メーカーの使い方」「背景: 2-2」 「pattern: 1-4」「layout: center」 「head: How to use」「foot: lism.app」 を組み合わせると、次の URL で OG 画像が取得できます。
https://lism.app/ogimg-maker/api?type=2-2&pattern=1-4&layout=center&head=How%20to%20use&foot=lism.app&title=OGP%E7%94%BB%E5%83%8F%E3%83%A1%E3%83%BC%E3%82%AB%E3%83%BC%E3%81%AE%E4%BD%BF%E3%81%84%E6%96%B9パラメータ
文字とレイアウト
| パラメータ | 既定値 | 説明 |
|---|---|---|
title | — | 本文タイトル。120 文字まで。空の場合は出力されません。 |
head | — | タイトル上の小さなメタテキスト。40 文字まで。空の場合は出力されません。 |
foot | — | 左下 (center では中央) のフッター補助テキスト。40 文字まで。空の場合は出力されません。 |
layout | left | left / center / top-left。 |
背景の種類
| パラメータ | 既定値 | 説明 |
|---|---|---|
type | 3-6 | 背景バリエーション ID (下の type 一覧から)。 |
bg | — | glass (= 半透明のガラス背景) / fill (= ベタ塗り背景) |
frame | — | 1 のとき内側フレームを重ねます。 |
pattern | — | 2-N の Geometry 背景にだけ、1-N の Pattern背景を重ねることができます。 |
カラー調整
| パラメータ | 既定値 | 説明 |
|---|---|---|
mode | light | light / dark。 |
h | 240 | 0–360 の整数。キー色の OKLCH H 軸（色相）。 |
c | 12 / 16 | 0–40 の整数。キー色の OKLCH C 軸（彩度）。既定値は mode 別 (light:12 / dark:16)。 |
l | 72 / 56 | 0–100 の整数。キー色の OKLCH L 軸（明度）。既定値は mode 別 (light:72 / dark:56)。 |
文字パラメータ (title / head / foot / site) は NFC 正規化と前後空白削除のうえ、文字数上限で切り詰められます。
type 一覧
type パラメータに渡す ID。グループごとに方向性が違います。 実際の見た目は 編集画面 のカード一覧で確認できます。
Pattern
罫線・点描で組むパターン背景
1-11-21-31-41-51-61-7Geometry
図形主体の背景タイプ。h/c/l でカラーリングを調整可能
2-12-22-32-42-52-62-72-82-92-102-11Gradient
グラデーション系の背景タイプ。h/c/lでカラーリングを調整可能
3-13-23-33-43-53-63-73-8