このブログの記事アイキャッチ画像は、CanvaやPhotoshopではなく、HTML+CSSで組んだテンプレートをヘッドレスChromeでスクリーンショットして作っています。デザインツールを使わなかった理由と、実際の作り方をまとめます。
なぜデザインツールを使わなかったのか
- サイトの実際のブランドカラー・フォントをそのままCSSとして流用できる(色コードを転記し直す手間・ズレがない)
- 記事タイトルとカテゴリーを差し替えるだけで量産できる(1枚ずつデザインツールで作り直す必要がない)
- コードとして管理できるので、あとからデザインを一括で調整しやすい
8記事分のアイキャッチを一枚ずつデザインツールで作るのは正直手間がかかりすぎます。「同じテンプレートにテキストを流し込むだけ」の作業であれば、コードで自動化した方が圧倒的に速いと考えました。
もともと検討していた方法
最初は、PythonのPillowライブラリで画像を直接生成する方法も検討しました。座標を指定してテキストや図形を描画していくやり方です。ただ、日本語フォントをきれいに描画するには別途フォントファイルを用意する必要があり、影や角丸などの細かい表現もCSSに比べると圧倒的に手間がかかります。一方、HTML+CSSであれば、普段のコーディング作業と同じ感覚でレイアウトを組めますし、サイト本体のスタイルをほぼそのまま流用できます。最終的に「見た目の再現度」と「実装スピード」の両方でHTML+CSSの方が有利だと判断しました。
実際の作り方
1. HTMLテンプレートを作る
OGP画像の標準サイズである1200×630pxのHTMLファイルを1つ用意します。中身は、カテゴリーバッジ・記事タイトル・ロゴだけのシンプルな構成です。フォントはサイト本体と同じGoogle FontsのNoto Sans JPを@importで読み込み、背景色やアクセントカラーもサイトのSCSS変数と同じ値を直接指定しました。
2. タイトルごとにHTMLを生成する
記事タイトルとカテゴリー名を差し込んだHTMLファイルを、記事の数だけ生成します。今回は簡単なスクリプトで、タイトルの文字数に応じてフォントサイズを自動調整するようにしました。短いタイトルはそのまま大きめの文字で、長いタイトルは少し小さくして3〜4行に収める、という調整です。この一手間をしないと、長いタイトルの記事だけ文字がはみ出したり、逆に短いタイトルの記事だけ余白が間延びしたりしてしまいます。
3. ヘッドレスChromeでスクリーンショットを撮る
MacにインストールされているGoogle Chromeには、画面を開かずに実行できる「ヘッドレスモード」があります。コマンド一つでHTMLファイルを指定サイズでレンダリングし、PNG画像として書き出せます。
google-chrome --headless --disable-gpu
--screenshot=output.png
--window-size=1200,630
file:///path/to/template.htmlブラウザを手動で開いてスクリーンショットを撮る必要がなく、8枚分をまとめて一気に処理できるのが大きなメリットです。
4. WebPに変換して圧縮する
書き出したPNGは1枚あたり50〜60KB程度でしたが、そのままアップロードするのはもったいないので、WebP形式に変換して圧縮しました。文字とシンプルな図形が中心のグラフィックなので圧縮効率がよく、変換後は1枚あたり15〜20KB程度まで小さくなりました。ブログの読み込み速度(Core Web Vitals)にも配慮するなら、この一手間はやっておいて損はないと思います。
量産してみて分かったこと
実際に8記事分をまとめて処理してみると、1枚あたりの生成時間はほんの数秒でした。デザインツールで1枚ずつ書き出す作業と比べると、全体の作業時間は10分の1以下になったと思います。最初のテンプレート作りには多少時間をかけましたが、一度型ができてしまえば、あとは記事が増えるたびに同じ手順を繰り返すだけなので、運用コストがほとんどかからないのも大きなメリットでした。
アイキャッチ以外にも応用できる
この「HTML+ヘッドレスブラウザで画像を量産する」やり方は、アイキャッチ以外にも応用が効きます。例えば、SNSシェア用のOGP画像、バナー広告、サムネイル一覧など、同じフォーマットで大量に作りたい画像全般に使えます。デザインツールでの手作業に比べると自由度は下がりますが、その分「同じルールで統一されたデザインを大量生産する」ことに関しては圧倒的に効率的です。
気をつけた点
- 文字量のばらつきを事前に想定する:一番長いタイトルと一番短いタイトルの両方でレイアウトが崩れないか確認してから量産する
- alt属性を必ず設定する:画像自体はテキスト情報を含んでいますが、スクリーンリーダーには伝わらないため、記事タイトルをalt属性として別途設定しています
- OGP画像としての使い回しを前提に作る:アイキャッチをそのままOGP画像としても使う設計にしておくと、SNSシェア時の見た目まで一括で統一できます
タイトルの長さで文字サイズを変える理由
実際に8記事分をまとめて生成してみると、タイトルの文字数は記事によって20文字台から40文字台までばらつきがありました。すべて同じフォントサイズで固定してしまうと、短いタイトルの画像は間延びして見え、長いタイトルの画像は指定した幅からはみ出してしまいます。今回は文字数のしきい値をいくつか設定し、しきい値を超えたら自動でフォントサイズを一段階小さくする、という単純なルールで対応しました。凝った自動調整ロジックを組まなくても、この程度の粒度で十分実用的な見た目になります。
まとめ
デザインツールを使わずコードでアイキャッチを量産する方法は、web制作のスキルがあるからこそ選べるやり方だと思います。1枚ごとの作り込みは犠牲になりますが、「統一感のあるデザインを、記事数が増えても崩さず維持できる」というメリットは、ブログを継続していく上ではむしろ大きいと感じています。
