OGP画像をPython Pillowで作っている話
📌 記事の取り扱いについて（公開当時の内容を含みます — タップで詳細）
本記事は公開当時の体験・気づきをまとめたものです。現在のツール数・プラン数・対象年齢・記事数・仕様とは異なる場合があります。最新の内容は各ツールページをご確認ください。ツールや外部サービスの仕様・料金は変更されることがあるため、利用前には各公式情報も併せてご確認ください。記載に誤りを見つけられた場合はお問い合わせフォームよりご連絡いただけると助かります。
SNSにツール工房のURLを貼ると、横長の大きな画像が表示されます。これは OGP画像と呼ばれるもので、サイトごとに用意しておけば、リンクが目に留まりやすくなります。
結論を先に書くと、Python の Pillow という画像処理ライブラリでスクリプトを書き、1コマンドで必要なぶんをまとめて生成する仕組みにしました。いまのところこの仕組みで作っているのは子連れスポットのサイトのぶんですが、手作業で画像編集ソフトを開いて、毎回テキストを差し替えて……という工程をなくしたかったのが動機です。
派手な技術ではありませんが、運用負担をかなり下げてくれました。
始める前は何をしていたか
最初の頃は、画像編集ソフトでテンプレートを作って、テキストだけ差し替えて書き出していました。
これが結構な手間で、画像を作り直すたびに同じ差し替え作業を繰り返すことになります。さらに、後から「全部のフォントを変えたい」「配置を揃え直したい」と思っても、ファイル一個ずつ開いて修正する羽目になります。
子連れスポットのサイトで作る画像が増えてきた段階で、これは限界だと感じてスクリプト化に踏み切りました。
なぜ Pillow か
OGP画像の生成には他にも選択肢があります。ブラウザ上でHTMLを描画してスクリーンショットを撮るライブラリ、Node.js 系のキャンバスライブラリなどです。
それでも Pillow を選んだのは、三つの理由でした。
ひとつめは、インストールが軽いこと。pip でひと言で入りますし、ブラウザ自動操作系のように追加のランタイムを別途用意する必要がありません。
ふたつめは、まとめて生成し直しやすいこと。一覧に載せた画像なら、一度の実行で作り直せます。
みっつめは、この子連れスポットのデータまわりには、すでに Python で動く処理がいくつもあったことです。同じ道具立てに乗せておけば、扱いが揃います。コード自体は、例によってAIに手伝ってもらいました。
フォント選びで詰まったこと
スクリプト自体は早めに動いたのですが、フォント選びで一番時間を使いました。
フォントは、Mac に入っているヒラギノ系のフォントを指定しました。実は絵文字も画像に入れようとしたのですが、絵文字フォントの扱いで画像生成がエラーになってしまい、そちらは断念。文字と丸い飾りだけの構成に落ち着いています。
最終的に、Mac に最初から入っているフォントを使う方針に落ち着きました。OSに付属するフォントは普段から見慣れていて、選定の負担が減ります。ただし、フォントの利用条件はフォントごとに確認が必要なので、「画像に文字として使うだけで、フォントファイル自体は配布しない」形にしました。
配置の試行錯誤
OGP画像は、1200×630 ピクセルの横長画像を基準にしています。レイアウトは、左側にサイト名・タイトル・サブタイトル・URLを寄せて置き、右側に丸い飾りを配置する形です。SNSでは画像全体が小さく表示されるので、タイトルの文字は大きめにして、まわりに余白を取っています。
色は、サイトのテーマカラーに合わせて統一しました。色調を揃えておくと、SNSのタイムラインで見たときにどのサイトの記事か分かりやすくなると感じました。
運用での楽さ
スクリプトで生成するようにしてから、運用が大きく楽になりました。
新しい画像を足すときは、一覧に1行追加して、スクリプトを一度実行するだけです。共通の見た目を変えたくなった日にも、一覧に載っているぶんはまとめて再生成できます。
もうひとつ大きいのが、保存先が機械的に決まることです。手作業だと「完成版」「最終版」のような迷子ファイルを生みがちですが、いまはページごとのフォルダに同じ ogp.png という名前で保存され、どこに置くかはスクリプトがページの短い名前から決めてくれます。
ハマった細かい点
最後に、運用中に詰まった細かい点を二つ書いておきます。
ひとつは、文字の折り返しです。タイトルが長い場合、そのままだと枠からはみ出します。Pillow に自動折り返し機能は無いので、「タイトルが一定の文字数を超えていて、区切りの記号があれば、そこで2行に分ける」という簡単な処理を入れました。厳密に幅を測っているわけではない、素朴な仕掛けです。
もうひとつは、縮小表示での読みやすさです。SNSのタイムラインでは画像がかなり小さく表示されるので、Macの画面でちょうどよく見える文字サイズでは細かすぎます。タイトルを大きめに、要素を少なめに、が基本だと思います。
派手な見せ場のあるスクリプトではありませんが、画像を追加・変更するたびに効いてきます。OGP画像のように「毎回作るのが面倒だが無いと見栄えが落ちる」要素は、自動生成と相性がいい題材です。
← 他の制作記を見る ｜ トップ ｜ お問い合わせ