レイアウトのやり方/文字/画像【情報量が極端に少ない場合】

レイアウトのやり方/文字/画像【情報量が極端に少ない場合】

Pocket

バナー画像などを作成する状況で、組み込む情報量が少なくレイアウトに困ることがあります。

  • メイン訴求のビジュアル素材がない
  • 文章量が少ない
  • 公式ではない画像要素の追加が難しい

ビジュアル素材がそもそもない状況はさすがに稀ですが、
文章量が少ない状況は多く、また、確定したテキスト情報は変更できないため、なかなか苦しい作業になりがちです。

今回はさっくりと確認できる記事で紹介します。
まずはテキストレイアウトについて確認していきます。

ビジュアルとテキストを均等に配置(1)

文字情報量が極端に少ない画像レイアウトのやり方
均等に配置しているので大きな問題はないですが、平均的すぎます。


ビジュアルとテキストを均等に配置(2)

文字情報量が極端に少ない画像レイアウトのやり方
均等間隔で配置されているのでビジュアルを見た後の目線の誘導に不安が残り、文言の優先度もまだまだ設定できます。


文言の優先度と目線の誘導を設定(1)

文字情報量が極端に少ない画像レイアウトのやり方
左のメインビジュアルを見た後の目線移動を自然にするために、文言の上部余白(A)を下部余白(D)よりも、やや広めにとっています※今回はサンプルとして広めに確保してます

文言の優先度順は下記。

  1. 曲名 50px
  2. アーティスト名 36px
  3. 詳細情報 20px

文言の優先度と目線の誘導を設定(2)

文字情報量が極端に少ない画像レイアウトのやり方
適応させてみました。
上部余白を少々広くとってますが、
「曲名」を中心に優先度のメリハリを付けたので、注目するポイントが定まり目線の移動が安定しました。


「カタカナ」と「漢字」のバランス調整

文字情報量が極端に少ない画像レイアウトのやり方
カタカナ/ひらがな/英字については、文字自体の情報量が漢字と比較してシンプルなため、少々小さくすることで文字のチープ加減を軽減させることができます。


カタカナの場合

文字情報量が極端に少ない画像レイアウトのやり方

英字の場合

文字情報量が極端に少ない画像レイアウトのやり方
また、英字にすることで文字の意味合いが薄れ、純粋にビジュアル的なシルエットとして見ることもできます。

それでは、本題である文字情報量が極端に少ない画像を見てみます↓


文字情報量が極端に少ない画像

文字情報量が極端に少ない画像レイアウトのやり方
この状態は非常にシンプルで、レイアウトのバランスとりも非常に難しくなります。

したがって、
このまま進めるよりも、文字情報量を増やす試みが適切です。


ビジュアル的要素に置き換える

文字情報量が極端に少ない画像レイアウトのやり方
ロゴ画像などのビジュアル要素は、画を華やかに変化させてくれます。


詳細情報を追加する

文字情報量が極端に少ない画像レイアウトのやり方
詳細情報を追加で貰うことが何よりも改善できます。


さらに詳細情報を追加する

文字情報量が極端に少ない画像レイアウトのやり方
さらに画像の説得力を演出するために、権利者表記などを追加することも有効です。


さいごに

文字情報入りの画像を制作する場合は、優先度(文字サイズ)が異なるメリハリある文言で訴求することが望ましく、可能であれば豊富な文字情報から有効な情報だけを残す調整/精査ができると、なお効果的です。

次回も情報設計に関係した話題をお届け致します。
デジマースのネモトでした。

Pocket