デザインの基本ルールは４つ！

ネットショップ運営に欠かせないバナー作り。毎回頭を悩ませてはいませんか？
バナーはお客様の気を引く、大事な要素です。購入動機になるバナー作りが出来ると最高ですね！

バナーだけでなく、サイト全体にも言えることですが、デザインする上で考慮すべき基本的なルールという物があります。よく言われるのが、以下の４つ。

「対照・対比(Contrast)」
「反復（Repetition）」
「整列（Alignment）」
「近接（Proximity）」

そこで、今回は「バナー作成」を例にとり、「コントラスト(対照・対比)」に焦点を当てたいと思います。

コントラストと一口に言っても、暗い部分をより暗く、明るい部分をより明るくするという事だけではありません。ある部分を他の部分と色分けする事で目立たせたり、何かと何かを並べた時に、「差」をつける事によって見栄え良くデザインすることも含みます。

そこで、コントラストを取る方法をひとつずつ見て行きましょう。
今回はいちごのセールを知らせるバナーを作成してみます。まず、デザインを入れる前のバナーはこちら。

フォントサイズ

言いたい事、伝えたい事を大きくします。コントラストが出来る事によって、目が行く場所の順序が決められます。それは逆にいうと、「迷わない」という事に繋がり、スムーズに意思を伝える事ができます。

フォントの種類

フォントはそのものの形から、自身でイメージを伝える力を持っています。
明朝体は高級、ゴシックはカジュアル・・といった具合です。ここでは「いちご」から連想される「赤くて可愛い」イメージから丸いゴシック体、激安特価という「お得感」を表現するために良く使われる勘亭流というフォントを使ってみました。

次のページは、視覚に訴える「色」や「画像」についてです。

色

色はコントラストを与える一番の要素となります。
全体を支配する色を決めて、コントラストを付けるため、他の色を考えます。他の色は、あまり多くならない様、1～3色に抑え、3割程度に抑えます。

ここではいちごの赤をテーマカラーとして、画像も含めて70％程度占めるようにしました。コントラストを付けるために、白を3割という考え方です。赤と白の組み合わせは、はっきりした対比を生み、軽快で活発なイメージを与えます。

画像

画像は直接「バナーが持つ意味」をイメージしやすく、テキスト文章を補足する意味でも重要です。今回は、文章だけのバナーとの対比という意味で、コントラストとしました。

立体感

線の太さ、矩形のグラデーション、ドロップシャドウなどでリアル感を出します。フラットな印象を与えがちのバナーに、立体感をつけ、文章だけのバナーとの対比とします。

これをグリッドで整列させると、完成です！
コントラストをつける方法は、他にもたくさん考えられます。色々と試してみて下さい。