画像

AIでブログのヘッダー画像を作る:比率、タイトル用の余白、統一感のある見た目、軽いファイル

スタジオでブログのヘッダー画像を作る方法。横長の比率を選び、タイトルの余白を残し、見た目を揃え、切り抜きを確認し、ファイルを軽く保ちます。

読了目安1分
磨かれた黒いテーブルの右側に置かれた暗いカメラレンズ。やわらかなもやの中で紫に照らされ、フレームの左半分は静かでほとんど空いている

ブログのヘッダーの仕事は小さなものです。読者に、ここがどんな場所なのかを半秒で伝えること。そのあとカード、SNSのプレビュー、スマホの画面で切り抜かれ、上にはタイトルが載ります。出来の悪いヘッダーの多くは醜いのではなく、そうしたことを考えずに作られているだけです。ここでは、フレームからファイルまで、私が進める順番を紹介します。

1. 必要になる最も広いフレームから始める

多くのブログテーマはヘッダーを16:9かそれに近い比率で表示するので、最初の生成の前にスタジオの比率ピッカーでそれを選びます。料金はフレームではなくモデルと品質で決まるため、小さめに見積もっても節約にはなりません。横長で生成してあとで切り抜くのは機能しますが、正方形で生成して引き伸ばすのは機能しません。足りない両側は存在しないからです。テーマが特殊な場合は、アスペクト比ガイドでほかのフレームも確認できます。

シーンも横長の形に合わせて書きましょう。海岸線、デスク、並んだ物など、横に広がるものが向いています。横長のフレームに背の高い被写体がひとつだけだと、左右が大きく空きます。それがちょうど欲しいこともあれば、もったいないこともあります。

2. タイトルの場所を残す

テーマがタイトルを画像の上に重ねるなら、画像には静かな領域が必要です。タイトルが画像の下に来るなら、この手順は飛ばしてフレーム全体を使えます。どちらでも、プロンプトを書く前に決めましょう。長い解説はテキスト用の余白の記事にあります。短く言えば、空白の領域とその素材を名指しし、被写体を反対側に置くことです。

プロンプト
暗いウォールナットのデスクの上に置かれた真鍮のデスクランプがひとつ、フレームの右3分の1、暖かい光が左へ落ちる、フレームの左半分は物のない滑らかで暗く均一に照らされた壁、浅い被写界深度、やわらかなもや、16:9
被写体は片側に、静かな領域をはっきり書き、最後にフレームを明記します。

暗くて静かな領域は文字を載せやすいです。暗い背景の明るい文字は、画像に多少のテクスチャがあっても読めます。明るい領域も使えますが、余計な形があると暗い文字の後ろですぐ目立ちます。

3. ブログ全体で見た目をひとつに保つ

ブログの一覧はヘッダーを並べて見るグリッドで、統一感のなさが痛いほど目立つのはそこです。小さなレシピを決めて、一言一句そのまま使い回しましょう。同じ種類の被写体(ひとつの物、ひとつの場面)、同じ光、2色のパレット、同じカメラ距離。レシピはテキストファイルに保存し、記事ごとに被写体の行だけを変えます。

  • 被写体のルール:ヘッダーごとにひとつの物。群衆は使わない。
  • 光:名前のある光源ひとつと名前のある色ひとつ。たとえば低い位置の暖かいランプ。
  • パレット:2色を、毎回のプロンプトに書く。
  • フレーミング:被写体はいつも同じ側、タイトル用の空白もいつも同じ側。

最初の数枚は、お気に入りの一枚を参照として添付し、次の生成にその雰囲気を引き継がせます。参照がどれだけ強く効き、どこで効かなくなるかは参照画像の記事で説明しています。ブログ全体で同じモデルを使うことも大切です。モデルが違えば同じ言葉でも読み取り方が変わり、その差はグリッドで見えます。Stillは無難な標準で、1回€0.40から。Still Liteは€0.30からで、最終版にお金をかける前の構図の試行には十分です。

4. 公開前に切り抜きを確認する

ひとつのヘッダーはいくつもの形になります。横長のメイン、しばしば正方形に近いカードのサムネイル、SNSのプレビュー。最も厳しい形で試しましょう。完成画像を中央から正方形に切り抜き、被写体が残るか確かめます。被写体が右端にあると正方形で切れるので、中央の3分の2に収めるか、カード用にもっと正方形に近いフレームで2回目を生成する計画を立てます。

5. ファイルの重さを適切に保つ

スタジオは最大2Kの画像を返しますが、ページのヘッダーには通常それ以上のサイズは要りません。本文の幅で表示されるヘッダーは原寸で配信する必要はなく、表示幅の2倍ほどに縮小すれば高密度の画面でも鮮明です。そのあと、ご自分のエディタで適度な品質のモダンなWeb形式で保存します。暗い紫の壁のようななめらかなグラデーションは、圧縮しすぎるとまず縞として見える場所なので、圧縮後に暗い領域を原寸で確認してください。

静かでディテールの少ないヘッダーは、ごちゃごちゃしたものより通信量も軽くなります。保存すべきディテールが少ないからです。タイトルに良い画像は、ページの速度にも良い画像です。逆に、すでに気に入った生成の大きいバージョンが必要なら、アップスケーラーの記事が使いどころを説明しています。

ここでスタジオにできないこと

切り抜き、リサイズ、圧縮は代わりにやってくれませんし、画像の上にタイトルを載せるテンプレートもありません。それはご自分のツールで行います。静かな領域が空いたままになる保証もないので、やり直しが必要な生成もあります。10週間かけて作った10枚のヘッダーが完全に揃う約束もできません。書き出したレシピと参照で近づけることはできても、同一にはなりません。ブランドが正確な色を必要とするなら、エディタでセット全体を調整してください。

スタジオを開き、同じレシピで3枚のヘッダーを生成して、決める前に並べてみましょう。別のスタイルが欲しいときは、モデルページで画像モデルを見てください。小さなプレビュー画像という近い作業はサムネイルとカバーアートの記事で扱っています。

よくある質問

ブログのヘッダー画像はどの比率にすべきですか?

多くのテーマはヘッダーを16:9かそれに近い比率で表示するので、最初の生成の前に比率ピッカーでそれを選びます。横長で生成してあとで切り抜くほうが、その逆より安全です。

記事をまたいでヘッダーの統一感を保つには?

同じ種類の被写体、光、パレット、フレーミングで短いレシピを書き、一言一句そのまま使い回します。お気に入りのヘッダーを参照として添付し、ブログ全体で同じモデルを使います。

スタジオは画像にタイトルを入れられますか?

いいえ。構図に静かな領域を残し、タイトルはご自分のエディタかテーマで載せてください。鮮明なまま、簡単に変更できます。

#画像#ブログ#構図

続けて読む

すべての記事 →