OGP画像をPython Pillowで作っている話
📌 記事の取り扱いについて（公開当時の内容を含みます — タップで詳細）
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
SNSにツール工房のURLを貼ると、横長の大きな画像が表示されます。これは OGP画像と呼ばれるもので、サイトごとに用意しておけば、リンクが目に留まりやすくなります。
結論を先に書くと、Python の Pillow という画像処理ライブラリでスクリプトを書き、1コマンドで必要なぶんをまとめて生成する仕組みにしました。いまのところこの仕組みで作っているのは子連れスポットのサイトのぶんですが、手作業で画像編集ソフトを開いて、毎回テキストを差し替えて……という工程をなくしたかったのが動機です。
派手な技術ではありませんが、運用負担をかなり下げてくれました。
始める前は何をしていたか
最初の頃は、画像編集ソフトでテンプレートを作って、テキストだけ差し替えて書き出していました。
これが結構な手間で、画像を作り直すたびに同じ作業を10〜20分繰り返すことになります。さらに、後から「全部のフォントを変えたい」「ロゴ位置を揃え直したい」と思っても、ファイル一個ずつ開いて修正する羽目になります。
子連れスポットのサイトで作る画像が増えてきた段階で、これは限界だと感じてスクリプト化に踏み切りました。
なぜ Pillow か
OGP画像の生成には他にも選択肢があります。ブラウザ上でHTMLを描画してスクリーンショットを撮るライブラリ、Node.js 系のキャンバスライブラリなどです。
それでも Pillow を選んだのは、三つの理由でした。
ひとつめは、インストールが軽いこと。pip でひと言で入りますし、ブラウザ自動操作系のように追加のランタイムを別途用意する必要がありません。
ふたつめは、実行が速いこと。私の環境では、1枚あたり1秒もかからず生成できました。枚数が増えても、まとめて生成し直しやすいのが助かりました。
みっつめは、Python に慣れていたことです。新しい言語の学習コストをかけずに、既存の知識で書けるのは時短になります。
フォント選びで詰まったこと
スクリプト自体は早めに動いたのですが、フォント選びで一番時間を使いました。
最初に試したのは、Pillow にデフォルトで付いてくるフォントです。これは画面表示用には十分ですが、OGP画像のような大きな描画ではアラ（カクつき）が目立ちました。
次に、無料配布されている日本語フォントを試しました。これも候補が多すぎて、しばらく決まりません。文字の太さ、字面の大きさ、ひらがなとカタカナのバランス、英数字との混在時の見え方など、要素が多すぎて選びきれない期間が続きました。
最終的に、Mac に最初から入っているフォントを使う方針に落ち着きました。OSに付属するフォントは普段から見慣れていて、選定の負担が減ります。ただし、フォントの利用条件はフォントごとに確認が必要なので、「画像に文字として使うだけで、フォントファイル自体は配布しない」形にしました。
配置の試行錯誤
OGP画像は、1200×630 ピクセルくらいの横長画像を基準にしています。この中に、サイト名、サブタイトル、ロゴを置きます。
最初は中央揃えで全部並べていたのですが、SNSや表示場所によっては、画像の一部が切り取られて見えることがあります。投稿のサムネイル表示時に、想定より狭い範囲しか見えないことがありました。
そこで、重要な要素（タイトルとロゴ）は中央寄りに、副次的な要素（URLやサブタイトル）も端に寄せすぎない構成に変えました。切り取られても主旨が伝わるレイアウトを目指しています。
色は、サイトのテーマカラーに合わせて統一しました。色調を揃えておくと、SNSのタイムラインで見たときにどのサイトの記事か分かりやすくなると感じました。
運用での楽さ
スクリプトで生成するようにしてから、運用が大きく楽になりました。
新しい画像を足すときは、設定に1行追加して、スクリプトを叩くだけです。私の環境では1枚あたり短時間で生成されるので、ロゴを変えたくなった日にも全部の画像をまとめて再生成しやすくなりました。
もうひとつ大きいのが、画像ファイルの命名が機械的になることです。手作業時代は「new-ogp.png」「ogp-final.png」「ogp-final2.png」のような迷子ファイルが量産されていましたが、いまはスクリプトの決めた規則で一意に決まる名前が使われます。
ハマった細かい点
最後に、運用中に詰まった細かい点を二つ書いておきます。
ひとつは、文字の折り返しです。タイトルが長い場合、自動で折り返さないと枠からはみ出します。Pillow に自動折り返し機能は無いので、自分で「この幅を超えたら改行」という処理を書く必要がありました。
もうひとつは、端末による見え方の差です。Mac で確認するとくっきり見えるフォントが、Android のブラウザで見ると少しぼやけて見えることがありました。これは、文字サイズや余白を調整し、実際にSNS上で縮小表示されたときにも読めるように見直すことで改善しました。
派手な見せ場のあるスクリプトではありませんが、地味に毎週効いてきます。OGP画像のように「毎回作るのが面倒だが無いと見栄えが落ちる」要素は、自動生成と相性がいい題材です。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ