メルマガ向けAI画像: ヘッダー、区切り線、フッターを一つのスタイルで
AIでメルマガのヘッダー、区切り線、フッターを作る方法。メールアプリが受け付ける幅、文字を画像に入れないこと、配色の統一、軽いファイルまで。
メールは、画像にとって最も条件の厳しい場所です。幅を決めるのは読み手のメールアプリで、タップするまで画像をブロックすることもあれば、ダークモードで色を反転させることも、指定したフォントを表示しないこともあります。だからメルマガ用のAI画像は、こうした制約から逆算して計画する必要があります。ここでは、ヘッダー、区切り線、フッター画像の3点を、一人の手で作ったように揃えるためのチェックリストを紹介します。
画像ではなくカラムから始める
多くのメルマガは幅600ピクセルほどの中央寄せの1カラムで、設計するのはそのカラムだけで足ります。スマホでは縮み、パソコンのアプリでは余白の中央に置かれるだけです。先にカラム幅を決め、そこから3つのフレームを割り出します。
- ヘッダー: カラム幅いっぱいで、横長で低め。比率の選択で横長のフレームを頼み、高さはエディタで切り詰めます。
- 区切り線: 幅いっぱいで、極めて細く。そこまで細い帯を直接描けるモデルはありません。横長のフレームを生成し、最も穏やかな部分から細い帯を切り出します。
- フッター画像: ヘッダーと同じ幅で、区切り線より少し高め。メールが法的な注意書きではなく、ひとつの形で終わるようにします。
カラム幅の約2倍で生成し、エディタで縮小すると、高密度のスマホ画面でも鮮明です。スタジオは最大2Kの画像を作れるので、カラムには十分すぎます。後で切り抜く正方形より横長のフレームが良い理由は、縦横比のガイドで説明しています。
文字はすべて画像の外に出す
これだけで多くのメルマガが救われる決まりです。見出しをヘッダー画像に焼き込むと、画像をブロックするアプリでは空の枠が出て、スクリーンリーダーは何も読まず、誤字があれば再生成になります。タイトル、日付、ボタンは本物のテキストにして、画像は背景としてだけ使ってください。
ヘッダーに文字を載せやすくするには、画像にあらかじめ静かな領域があるのが一番です。文字用の余白の記事のように、プロンプトでその領域を指定し、被写体は反対側に置きます。画像の代替テキストも付けましょう。読み手によってはそれだけが見えます。短く平易な1文で十分で、書き方は代替テキストの記事にあります。
A wide, low panoramic strip: a calm dark plum gradient wall on the left two thirds, completely smooth and empty, and on the right a small cluster of paper lanterns glowing soft violet and warm sand, shallow depth of field, gentle haze, no letters or symbols anywhere一つの配色を3つのプロンプトすべてに書く
固定しないと、3回の生成はバラバラになります。2色か3色を選び、どのプロンプトにも名前を書き、同じ種類の被写体と同じ光を保ちます。上の例ではプラム、バイオレット、サンドに、柔らかなランタンの光です。モデルが色を取り違えない書き方は、配色の指定ガイドで紹介しています。
次に、最初に承認したヘッダーを区切り線とフッターの参照画像にし、残すもの(配色と光)と変えるもの(被写体)を伝えます。詳しくは参照画像の記事にあります。3点とも同じモデルを使いましょう。Stillは1回€0.40からの無難な標準で、Still Liteは€0.30からと、仕上げ前の構図試しには十分です。
画像をメールの背景になじませる
先にメールの背景色を決め、すべての画像の縁をそこへなじませます。白いページに対して硬い線で終わるヘッダーは、貼り付けた長方形に見えます。対策の一つは、下の縁でページとまったく同じ色へ溶け込ませること。もう一つは、ページの色をプロンプトに入れて柔らかなビネットを頼むことです。結果はスタジオだけでなく、使っているメール配信ツールでも確認してください。
ダークモードが二つ目のテストです。明るい背景を反転させるアプリもあり、縁が淡い画像だと醜い光の輪が出ることがあります。縁が暗い色か中間色の画像なら、どちらのモードでも崩れにくく、配色を暗めに寄せる理由になります。
ファイル: フラットで小さく、ありふれた形式で
メールアプリはブラウザよりずっと保守的です。各パーツはJPEGで保存し、フラットな色ならPNGにします。対応がまちまちな新しい形式は避けてください。電波の悪いモバイル回線でもすぐ読み込める小さなファイルを目指しましょう。穏やかで描き込みの少ない画像は、ごちゃごちゃした画像よりずっとよく圧縮でき、タイトル用に空けた静かな領域もここで効いてきます。圧縮後は、最初に帯状の段差が出やすい滑らかな暗いグラデーションを等倍で確認します。
スタジオにできないこと
スタジオが作るのはラスター画像で、メールそのものは作りません。HTML、スライス、カラム幅へのリサイズ、メールアプリ向けの圧縮はどれもありません。それらはエディタかメルマガ配信ツールでの作業です。髪の毛ほど細い区切り線を直接描くこともできないので、広い画像から切り出します。透過出力は一部のモデルにしかなく、メールではおすすめしません。ダークモードでの透過ファイルの扱いはアプリごとに予測できないためで、絵を単色の上にフラット化してください。また、3回の生成がぴったり一致するとは約束できません。配色と参照画像で近づけられますが、ブランドが厳密な色を求めるなら、エディタでセット全体を調整してください。
スタジオを開き、まずヘッダーを作って承認し、それを元に区切り線とフッターを作ってください。スタイルが合わなければ、モデル一覧で画像モデルを比べましょう。同じ技術をウェブページ向けに扱ったブログのヘッダー画像の記事もあります。そちらは決まりがもっと緩やかです。
よくある質問
メールのヘッダー用AI画像のサイズはどのくらいにすべきですか。
幅600ピクセルほどの1カラムを想定し、画像は横長で生成して、その約2倍の幅に縮小すると高密度の画面でも鮮明です。高さはエディタで切り詰めます。
メルマガのタイトルをAI画像に含めるべきですか。
いいえ。画像には静かな領域を残し、タイトルは本物のテキストで載せてください。画像がブロックされても表示され、再生成なしで編集もできます。
メールで透過画像は使えますか。
使わないほうが無難です。メールアプリは、特にダークモードで透過ファイルを予測できない形で扱います。メールの背景色に合う単色の上に絵をフラット化してください。
ヘッダー、区切り線、フッターを一つのスタイルに保つには。
同じ2、3色と同じ光を3つのプロンプトすべてに書き、最初に承認したヘッダーを参照画像にして、セット全体で同じモデルを使います。
