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

2017.02.07

WEB

Webデザイン

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

INDEX

STEP1：視覚的にアピールしたいものを考える
STEP2：文字要素を考える
STEP3：優先順位を考える
STEP4：実際にレイアウトを考える
さいごに

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

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

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

⇒店内の写真を使用

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

⇒メニューの写真を使用

STEP2：文字要素を考える

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

店名
開店、閉店時間
住所

STEP3：優先順位を考える

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

カフェの写真
店名
開店、閉店時間
住所

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

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

【パターン1】左右対称

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

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

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

【パターン3】箱型

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