AI画像のサムネイルに商品名まで焼いたら、更新のたびに作り直しになる。文字を分ける仮の販売ページ
販売ページを試すとき、サムネイルへ「読書記録Notionテンプレート」「PDFガイド付き」と入れたくなります。見た目は早く整います。でも、その2行を画像に焼くと、価格や対象者を変えるときに限らず、説明を1語直すだけでも画像まで作り直すことになります。
今回は、架空の「読書記録Notionテンプレート」を売る想定です。販売実績や実在する商品は使っていません。AI画像を背景として使い、商品名、対象者、同梱物はHTMLの文字として置きます。
画像の中に3つの約束を置いた
最初の案には、机の上に開いたノート、マグカップ、読書メモのイラストを置きました。そこへ、次の3つも画像の中に入れる想定でした。
| 画像に入れた文字 | 変更が起きる場面 |
|---|---|
| 読書記録Notionテンプレート | 商品名を変えるとき |
| 読んだ本を整理 | 対象者や訴求を見直すとき |
| PDFガイド付き | 同梱物を増減するとき |
ここで困るのは、画像が古くなることだけではありません。販売ページの本文を「スマホでも読めるPDFガイド」に直したあと、サムネイルだけが「PDFガイド付き」のまま残ると、どちらを正とするかを自分で調べ直す必要が出ます。
直したいのは1語でも、確認する場所は本文と画像の2つになります。私は、画像の出来がよいほど、そこに載った文字を見落としやすいと感じます。文章の修正は原稿の検索で追えますが、画像の中の短い文字は検索に出ません。売り文句を直した日ほど、画像を確認する作業が後回しになります。
変えないものと、変わるものを分ける
ページを分ける先は3つです。
背景画像
└─ 本、ノート、机の色、余白
販売ページの文字
└─ 商品名、対象者、同梱物、価格への案内
商品仕様のメモ
└─ 実際に含まれるもの、使える環境、更新条件背景画像には、商品を連想できる物だけを置きます。ここでの読書メモや本棚は、商品の雰囲気を伝えるための要素です。利用条件や効果の約束は、本文側に置きます。
商品名と同梱物は、販売ページの文字にします。直す場所が原稿に集まるので、更新履歴と照合しやすくなります。価格のように頻繁に変わり得る情報は、画像に置かない方が安全です。
仕様のメモは購入者にそのまま見せる文章ではありません。それでも、販売文を書く前に「テンプレート本体」「記入例」「PDFガイド」のように事実を分けておくと、AIに説明文の下書きを頼むときも、渡していない機能を足されにくくなります。このメモは販売ページを書く前の準備です。
文字を焼かないことは、読みやすさにもつながる
W3CのWCAG 2.2は、同じ見た目を実現できるなら、画像ではなくテキストで情報を伝えるよう示しています。画像に入った文字は、読む人が文字サイズ、行間、色を調整できないからです。
この基準を満たすためだけに、画像を無機質にする必要はありません。商品を思わせる写真やイラストを背景にして、商品名と説明をページ上の文字で重ねればよいです。視覚的な印象と、選択できる文字を両方残せます。
画像の代替テキストは「木の机の上にある開いたノートと読書メモ」にします。ここへ「初心者向け」「PDF付き」とは書きません。それらは画像の事実ではなく、商品についての販売情報だからです。代替テキストは、画像の説明だけにします。
AI画像は作り直せる前提で扱う
Gemini APIの画像生成の公式ドキュメントは、16:9を含む複数のアスペクト比を案内しています。横長の販売ページ用サムネイルにも合わせられます。
ただし、生成を頼めば毎回同じものが返るわけではありません。Google Cloudの責任あるAIの説明では、プロンプトや生成結果が安全フィルタでブロックされる場合があるとされています。発売日直前に画像の中の文字だけを修正したい場合、生成をやり直す前提の設計は不安定です。
だから、画像生成への指示は背景の範囲に絞ります。「横長。木の机、開いたノート、読書メモ、やわらかい自然光。人名、ロゴ、文字、数字は入れない」です。商品名も価格も入れないので、画像が1回で決まらなくても、販売情報の更新は止まりません。画像の役割は背景までです。
先に決めたい、画像へ入れてよいもの
画像に残すものと、本文へ逃がすものを混ぜないために、私は次の線引きを使います。
- 画像に残す: 商品の用途を連想させる物、色、空気感
- 画像に残さない: 商品名、価格、割引、対象者、同梱物、期限
- 迷ったら本文へ置く: 購入前に確認してほしい情報
「初心者向け」は短いので画像に入れたくなります。でも、誰を初心者と呼ぶかは商品ごとに変わります。「Notionを使ったことがない人向け」へ直す可能性があるなら、最初から本文の文字にした方が修正の範囲を小さくできます。
この形にはまだ弱点があります。背景画像だけで、どの商品なのかが伝わるかは確認していません。文字を分ければ更新は楽になりますが、商品らしさまで自動で強くなるわけではありません。実際に販売ページを出すなら、画像なしの状態でも商品名と最初の説明だけで内容が分かるかを先に見ます。そのうえで、背景画像が理解を邪魔していないかを確かめます。
出典
