実装ログ2026-09-03デザイン／画像

画像ソフトを開かずに、Xのヘッダー・OG画像・アイコンをHTMLから作った

HTMLで書いて、Chromeに「この画面を撮って」と命令する（ヘッドレス）。作り直しはHTMLを直して撮り直すだけ。

画像3枚

費用0円

1枚の生成数秒

失敗1回

やったこと

X用ヘッダー（1500×500）、リンクを貼った時に出るOG画像（1200×630）、アイコンの3枚。全部HTMLで書いて、Chromeのヘッドレス機能（画面を出さずに撮影する機能）でPNGにした。

ヘッダーとOG画像をHTMLで作って、Chromeのヘッドレスで撮って。色は生成り・ピッチの緑・笛のオレンジ。フォントはZen Kaku Gothic New。

投稿用の「スクショに枠を付ける」道具を作ったとき、テンプレートの中にCSSの「%」があって、Pythonの文字差し込み（%書式）と衝突して落ちた。1回失敗。

差し込み方を「%書式」から「置換」に変えて解決。Google Fontsもヘッドレスで読み込めた（読み込み待ちの時間を6秒に指定）。作り直しはHTMLを直して撮り直すだけなので、画像ソフトを開く理由が無くなった。