ビジネスとIT活用に役立つブログBlog


伝わりやすいバナーをデザインするポイント(レイアウト編)

シリーズ「伝わりやすいバナーをデザインするポイント」、今回は「レイアウト」をご紹介させて頂きます。
レイアウトにはいくつかのセオリーがあり、ある程度パターンが決まっています。そこでレイアウトによってどのような印象になるのかを知ることで、効果的な配置をしていきましょう。

STEP1:視覚的にアピールしたいものを考える

まず、作成するバナーで何を一番アピールしたいのかを考えてみましょう。
アピールしたいものによって、写真の使い方も変わってきます。今回はカフェのバナーを例に解説していきます。
視覚的に下記のA、Bどちらをアピールしたいかによって使う写真が異なってきます。

A.カフェの店内をアピールしたい場合

⇒店内の写真を使用

B.メニューをアピールしたい場合

⇒メニューの写真を使用

STEP2:文字要素を考える

アピールしたいビジュアルが決まったら、次にどのような情報を掲載すべきかを考えます。
今回のバナーは、ユーザーにカフェへ訪れてもらうことが目的であるため以下の3つの情報を掲載することにします。

  • 店名
  • 開店、閉店時間
  • 住所

STEP3:優先順位を考える

実際にレイアウトを行う前に、バナーで何を一番アピールしたいのか考えてみましょう。
今回は下記の優先順位でレイアウトを考えてみたいと思います。

  1. カフェの写真
  2. 店名
  3. 開店、閉店時間
  4. 住所

STEP4:実際にレイアウトを考える

選んだ写真、文字情報を実際に配置していきます。アピールしたいものが伝わるよう、また文字の視認性を損なわないようにしながらどのレイアウトパターンに落とし込めばいいか考えます。
見やすいレイアウトにする上で重要なことは「揃えること」「強弱をつけること」です。
文字の文頭や中心を揃え全体に一体を出し、要素ごとに強弱をつけて読みやすくしましょう。
今回は以下の4つのレイアウトパターンをご紹介します。

【パターン1】左右対称

最も安定感のあるレイアウトでとてもまとめやすいパターンでもあります。
下記のバナーでは写真の上に文字が馴染むように配置しており、文字よりも写真の印象が強くなるように作成しています。

【パターン2】一方向に揃える

文字情報の文頭がすべて揃っているので、すっきりと読みやすい印象になります。
人の視線は左上から右下に遷移するので、文字情報を左揃えにすることで目に留まりやすくなります。

【パターン3】箱型

全ての要素を1つの箱の中にレイアウトします。
すべての要素が一か所にまとまっているので、ユーザーは文字情報を受け取りやすくなります。
注意点としては、異なる要素が隣接しているため、差を出す工夫が必要です。
フォントサイズや行間や字間に注意して要素同士に強弱を付けつつ、文字の端を揃えて全体にまとまりが出るようにしました。

【パターン4】箱型

バナー全体を一定の大きさのグリッド(格子)で区切り、その中に文字や画像等の要素を入れていきます。要素の大きさを変える場合も1つのグリッドの大きさを基準にします。
多くの情報(ビジュアルや文字情報)を効率よく整理することが出来るので、お店の雰囲気をよりユーザーに伝えやすくなります。

さいごに

バナーには画像や文字情報等、載せたいものがたくさんあるかと思います。
あれもこれもと欲張らずに一番見せたいものを絞り、その情報を一番引き立たせるにはどうしたらいいか考えながらレイアウトを考えていきましょう。
少しでも参考になれば幸いです。

The following two tabs change content below.
アーティス

アーティス

創造性を最大限に発揮するとともに、インターネットに代表されるITを活用し、みんなの生活が便利で、豊かで、楽しいものになるようなサービスやコンテンツを考え、創り出し提供しています。
この記事のカテゴリ:

SNSで最新の情報を
受け取ることができます!