ASB Post Thumbnail
記事タイトルから、SNSで映えるアイキャッチを自動作成。
ASB Post Thumbnailは、記事タイトルやカテゴリーなどを使って、アイキャッチ画像を自動生成するプラグインです。デザイン作業を毎回くり返さなくても、統一感のあるOGP画像を記事公開時に用意できます。
導入前の悩み
記事を公開するたびにアイキャッチを作る時間が取れず、画像なしで公開してしまう。担当者ごとにデザインが違い、SNSや記事一覧がばらついて見える。そんな悩みを、投稿の流れの中で解決します。
ASB Post Thumbnailは、記事ごとにデザイナーが手を動かさなくても、タイトルから一定品質のアイキャッチを作るための仕組みです。毎日の情報発信を続けながら、見た目の印象を整えられます。
設定画面で、仕上がりを見ながらデザイン
背景、文字色、文字位置、表示する項目を決めると、その場で完成イメージを確認できます。記事タイトル、抜粋、カテゴリー、著者名、日付、自由入力の文字を組み合わせて、サイトらしいアイキャッチを作れます。
一度ベースデザインを作れば、投稿者は普段どおり記事を書くことに集中できます。ロゴカラー、見出しの雰囲気、カテゴリー名などを画像へ反映し、記事が増えてもブランドの統一感を保ちます。
- ライブプレビューで確認
- 上・中・下の3レイヤーで配置
- 日本語フォントを標準搭載
記事を書く流れのまま、アイキャッチまで完成
ブロックエディターのサイドバーから、生成前の画像を確認してワンクリックで作成できます。記事を保存した時の自動生成にも対応するため、公開作業を増やさずにSNS共有用の画像を整えられます。
すでに手作業で選んだアイキャッチがある投稿は、その画像を残す設定にできます。すべてを自動化するのではなく、重要な記事だけは個別に調整する、といった柔軟な運用ができます。
- ワンクリック生成
- Gutenbergの編集画面に統合
- OGPに適した1200×630pxを標準設定
記事が増えても、見た目はいつも統一
長いタイトルは日本語の禁則処理を考慮して自動改行。ImageMagickが使える環境では、輪郭のなめらかな高品質な文字で出力します。手作業の画像作成を減らしながら、記事一覧やSNSでの印象を揃えます。
- タイトルに合わせて自動レイアウト
- 日本語の自然な改行に対応
- 記事ごとに統一感のある画像
日本語のタイトルで、破綻しない
アイキャッチ自動生成プラグインの多くは英語圏で作られています。日本語のタイトルを流し込むと、句読点が行頭に来る、文字が枠から溢れる、そもそもフォントが無くて豆腐（□）になる——という現実にぶつかります。ASB Post Thumbnailは、そこを出発点にしています。
日本語フォントが最初から入っている
Noto Sans JP（Regular・Bold）を同梱しているので、インストールした直後から日本語のタイトルがきれいに出ます。フォントを探して入れる作業は要りません。（無料版に標準搭載）
禁則処理に沿って自動で折り返す
長いタイトルは、句読点や閉じ括弧が行頭に来ないように改行します。日本語として不自然な折り返しになりません。改行位置を自分で決めたいときは、タイトルに -br- と書くだけ。この目印はサイト上のタイトル表示からは自動で取り除かれるので、記事タイトル自体は汚れません。
サーバーを選ばず、きれいに出す
ImageMagickが入っていれば輪郭のなめらかな高品質な文字で、無い環境では自動でGDに切り替えて出力します。どのサーバーでも動きます。書き出しは1200×630px＝X（旧Twitter）・FacebookのOGPに最適なサイズです。
自動化しても、大事な記事は守られる
手で選んだアイキャッチは、絶対に上書きしない
「アイキャッチが既に設定されている場合は生成をスキップ」が最初から有効なので、手動で用意した画像が自動生成に潰されることはありません。全部を自動化するのではなく、勝負記事だけ個別に作り込む——という運用が普通にできます。以前この機能で自動生成した画像だけは、新しく作り直したときに整理されます（手動の画像には触れません）。
記事の種類ごとに、デザインを出し分ける（Pro）
カテゴリー別・タグ別・投稿別にルールを決めて、別デザインを当てる／そもそも生成しない、を指定できます。「お知らせは明るい背景」「導入事例は写真背景」「採用記事はロゴを大きく」を先に決めておけば、投稿者はデザインを判断しなくて済みます。判断を人から仕組みへ移すのが、統一感を保つ一番確実な方法です。
PRO 機能
デザインの幅も、記事ごとの出し分けも、Proで
Pro版では、ロゴなどの画像レイヤー、複数背景の切り替え、文字の縁取り、追加フォント、カテゴリーごとのデザインルールなどを使えます。ブランドの世界観を保ちながら、記事の種類に合う画像を自動で出し分けられます。
たとえば、お知らせは明るい背景、導入事例は写真背景、採用記事はロゴを大きく表示するといったルールをあらかじめ設定できます。投稿者がデザインを判断しなくても、記事の種類に合う画像を自動で選べます。
- ロゴなどの画像レイヤー・オーバーレイ
- 複数背景のローテーション
- 文字縁取り・行間・積み重ねレイアウト
- カテゴリー・タグ・投稿別のデザインルール
Free で始める、Pro で広げる
| 機能 | Free | Pro |
|---|---|---|
| アイキャッチの自動生成 | ○ | ○ |
| ライブプレビュー・Gutenberg連携 | ○ | ○ |
| 3レイヤー文字配置・日本語フォント | ○ | ○ |
| カスタムフォント・追加日本語フォント | — | ○ |
| ロゴなどの画像レイヤー・オーバーレイ | — | ○ |
| 複数背景のローテーション | — | ○ |
| 文字縁取り・行間・積み重ねレイアウト | — | ○ |
| カテゴリー・タグ・投稿別のデザインルール | — | ○ |
| カスタム投稿タイプ・投稿別上書き | — | ○ |
活用イメージ
オウンドメディア
記事の公開速度を落とさず、SNS画像を揃える。
複数人で更新するサイト
投稿者ごとのデザイン差を減らす。
店舗・地域情報サイト
毎日のお知らせを統一した見た目で発信する。