構図

見出しは読める?文字を載せる前にAI画像で行う6つの簡単テスト

余白のある画像が、見出しを載せられる画像とは限りません。コントラスト、トリミング、縮小表示の6つの確認と、不合格だった画像の直し方を紹介します。

読了目安1分
小さな黒いイーゼルに立てた無地のすりガラスの板。背後から紫に光り、手前には透明なガラスのブロック。フレームの左半分は暗く静かで何もない

文字用の余白を頼んだら、広く落ち着いた領域のある画像が返ってきて、見た目も悪くありません。ところが見出しを載せると文字の半分が雲のような模様に溶けたり、スマホ用のトリミングで空いている側がまるごと切れたりします。画像を眺めることと、画像の上の文字を読むことは別のテストです。余白の頼み方は文字用の余白の記事で紹介しました。こちらはその後半で、デザインに入る前に、その余白が本当に使えるかを数分で確かめる方法です。

以下のテストはどれも数秒で終わり、今お使いの画像ビューアか編集ソフトだけで足り、結果ははっきり合格か不合格に分かれます。手軽なものほど先に落ちるので、この順番で行ってください。

1. 目を細めるテスト

画面から離れるか、目を半分閉じます。細部は溶けて、大きな明暗の塊だけが残ります。文字を置く予定の領域に形や明るい部分や輪郭がまだ見えるなら、見出しはそれと競合します。合格とは、片端が少し明るくても、全体が一つのなめらかなトーンに見える領域です。

2. グレースケールのテスト

編集ソフトで画像をグレースケールにします。色はコントラストの問題を隠します。青緑の壁に載せた珊瑚色の見出しは鮮やかに見えますが、明るさが同じなので色味を抜くとほとんど読めません。グレーの状態で、予定している文字色の無地の見本をその領域に重ねます。見本の縁がはっきり見えないなら、文字色か背景のトーンを変えましょう。暗い領域に明るい文字、明るい領域に暗い文字はどちらも合格で、中間のグレーの領域はどちらにも合格しません。

3. ブロックのテスト

見出しと行間を合わせた大きさの無地の長方形を、実際に置く場所に描きます。そして、その枠を横切るものを確かめます。木の枝、ケーブル、窓枠、明るいハイライトなど、箱を横切るものは文字も横切ります。まず箱を動かしてみてください。少しずらすだけで、きれいな場所が見つかることがよくあります。どの位置でもだめなら、その画像は不合格で、直す方法は見出しを小さくすることではなく、新しく生成し直すことです。

4. トリミングのテスト

1枚の画像は、横長のバナー、正方形のカード、縦長のストーリーなど、複数のフレームで使われるのが普通です。必要なフレームごとに画像をトリミングして、空いた領域がどれでも残るか確認します。被写体が右、余白が左の構図は横長なら問題なくても、正方形の中央トリミングでは余白が丸ごと消えることがあります。プラットフォームが独自のボタンやキャプションで端を覆うことも忘れずに、文字は空いた領域の真ん中に収め、縁から離しましょう。どのフレームがどの配置に向くかはアスペクト比ガイドで紹介しています。必要な中でいちばん広いフレームで生成して切り詰めるほうが、その逆よりも簡単です。

5. サムネイルのテスト

完成したレイアウトを、フィードや検索結果のサムネイルほどの大きさに縮めて、1秒だけ眺めます。見出しが最初に読め、被写体も見分けられるはずです。被写体と文字が同じ強さを奪い合うなら、どちらかが大きすぎるか明るすぎます。動画のサムネイルやリンクのプレビューのように、誰も原寸の画像を見ない場面では、このチェックがいちばん大切です。小さくても耐えるものについては、サムネイルとカバーアートの記事で詳しく紹介しています。

6. スクリムのテスト

ぎりぎりの合格は、スクリムで救えることが多いです。スクリムとは、編集ソフトで画像と文字の間に低い不透明度で重ねる、柔らかな暗いまたは明るいグラデーションのことです。最初ではなく最後の手段として試してください。控えめなスクリムで文字がはっきりし、画像も元の雰囲気を保っていれば完了です。強くかけないと効かず、領域がのっぺりした箱になってしまうなら、その画像は背景が合っていないので、生成し直しましょう。

次の生成を合格させる言葉

画像が不合格のとき、たいていはプロンプトで空き領域が描写されていません。特に効くのは次の表現で、そのままプロンプトに入れられます。

プロンプト
フレームの右側に白いランニングシューズ一足、左半分は物も影もグラデーションの縞もない、滑らかでマットで均一に照らされた暗いグレーのスタジオの壁、ソフトフォーカス、横長16:9のバナー
空ける半分、その素材、トーン、そこに写してはいけないものを書いています。
  • 領域の素材: 無地の壁、開けた空、静かな水面、ぼかした背景。
  • トーン: 均一に暗いか、均一に明るいか。文字色を先に決められます。
  • あってはならないもの: 物なし、模様なし、雲なし、映り込みなし、小道具なし。
  • 被写体の位置: 右三分の一、フレームの中で小さく、フレームの下寄り。

直す、生成し直す、受け入れる

ほかはきれいな領域に余計なものが一つだけあるなら、新しく生成するより編集を試しましょう。それを消して、周りの壁や空で埋めるよう頼みます。言い方は編集プロンプトの記事で紹介しています。領域全体に質感があるなら、生成し直します。広い範囲を編集すると、継ぎ目が見えやすいからです。選択肢を比べるには、Still Liteで1枚€0.30から下書きをいくつか生成してすべて試し、勝った1枚だけをモデルページにあるより強力なモデルで仕上げます。

これらの確認でできないこと

スタジオがこれらのテストを代わりに行うわけではありません。コントラストメーターも、文字のプレビューも、セーフゾーンの重ね表示もないので、ご自身のビューアか編集ソフトで行ってください。また、描写した領域が確実に空いて返ってくる保証はないため、何枚かは生成し直す前提でいてください。最終的な見出しも分からないので、テストが示すのは予定した領域についてで、まだ書いていない文面についてではありません。気に入った1枚は2Kでダウンロードし、デザインツールで本番の文字を組みましょう。

レイアウトが固まったら、シリーズ全体に展開する方法をブログのヘッダー画像の記事で紹介しています。スタジオを開いて、空き領域を書き込んだ最初の下書きを生成しましょう。

よくある質問

AI画像に見出しを置く余裕があるかどうかは、どう見分けますか?

目を細めて見て、次にグレースケールにし、文字を置く場所に文字と同じ大きさの無地の長方形を重ねます。長方形を横切るものがなく、文字色がトーンから際立っていれば、余白は足ります。

落ち着いて見える画像なのに、文字が読めなくなるのはなぜですか?

多くの場合、文字と背景の明るさが同じで、色がそれを隠しているからです。グレースケールで確認し、暗い領域にははっきり明るい文字、明るい領域にははっきり暗い文字を選んでください。

ごちゃついた領域は、スクリムで直すのと生成し直すのと、どちらがいいですか?

わずかな不足なら、柔らかいスクリムを使います。画像が平坦になるほど強くかける必要があるなら、空き領域をより無地に描写して生成し直してください。

#構図#バナー#画像

続けて読む

すべての記事 →