「自分の名前が、画像の中で消えている……。」
WordPressの人気テーマ「Cocoon」に搭載されている、あの便利なアイキャッチ自動生成機能。 多くのブロガーに愛されるこの機能を、SWELLやArkheといった他テーマでも自由に使いたい。 そんな純粋な「遊び心」から、私の開発は始まりました。
しかし、そこで直面したのは、デザイン重視のフォントが生む「文字欠け」という冷酷な現実でした。 「爲」や「國」といった旧字体や難読漢字が含まれるお名前の方は、自分のアイデンティティが「□」や空白に置き換わる絶望を味わったことがあるはずです。
「名前の文字化けは、絶対に許さない。」
この強い想いを胸に、私はCocoonのロジックをベースにしつつ、現代のWeb環境に合わせてゼロから再構築・拡張し『Universal OGP Generator – Hybrid Font Edition』を書き上げました。
タイトルにはデザインを、著者名には正確性を。 二つの異なるフォントを同時に操る「ハイブリッド・フォント・エンジン」を搭載し、さらにWebP最適化や高精度アバター描画まで盛り込んだ、こだわりの開発秘話をここに綴ります。
「この記事のアイキャッチもこのプラグインで作っています。」
開発の動機:Cocoonの「あの便利さ」を、すべてのテーマへ
きっかけは「他テーマでもあのアイキャッチが欲しい!」という、わいひら氏への多大なるリスペクトからでした。しかし、既存のプラグインでは自分の理想に届かない。「無いなら作る」というバイブコーディングの精神で、移植・拡張プロジェクトが動き出しました。
直面した「アイデンティティ」の危機:文字欠けの絶望

開発中、最大の壁となったのが「フォントの限界」です。おしゃれなデザインフォントを使えば使うほど、私の名前「爲國(ためくに)」の漢字が消えてしまうのです。
「収録文字数(グリフ)」特に手書き風やデザインフォントは、JIS第1水準漢字までしか対応していないことが多く、難しい漢字や旧字体が抜けてしまうことがよくあります。
名前は自分自身の象徴。ここを妥協することは、開発者として、一人の人間としてできませんでした。
解決策:世界初(?)の「ハイブリッド・フォント・エンジン」
そこで編み出したのが、「ハイブリッド・フォント・エンジン」です。
- タイトル: デザイン重視の外部フォントを適用。
- 著者名: JIS第4水準まで網羅した「Noto Sans JP」を強制適用。
この二系統の描画ロジックを一つの画像内で共存させることで、デザインの美しさと、名前の正確性を100%両立させることに成功しました。
2026年仕様へのアップデート:妥協なき機能拡張
単なる移植では終わりません。今のWeb環境に最適な機能を盛り込みました。
- 最新のWebP最適化: 生成画像を自動でWebPへ変換・圧縮。SEOとサーバー容量に貢献します。
- 高精度円形アバター: 1px単位のアンチエイリアス処理を施した、滑らかなアイコン描画。
- リフレッシュ・セーフティ: Cocoonテーマを検知すると自動停止し、機能の競合を防ぐ優しさ設計です。
結び:GitHubで公開中。あなたの名前を、誇らしく。
本プラグインはGitHubにて、オープンソース(GPL-2.0)で公開しています。 名前にこだわりを持つすべての人へ。あなたのアイデンティティを、もう「□」で終わらせないでください。
▼ 公式ページ(github.io)
https://marisachi426.github.io/universal-ogp-generator/
▼ GitHubリポジトリ

コメント