Blog スタッフブログ

こんにちは、Webデザイナーのそいです。デザイナーには「違和感」や「気づき力」を問われるシーンが多々あります。この2つは案外やっかいで、言語化されづらくモヤモヤが残る方も多いのではないでしょうか。

デザインを提出しても先輩に指摘され続けたり、お客様からフィードバックを何度ももらったり…そんなデザイナーさんと、バナーデザインを焦点に当て「違和感」とは何かを考えていきたいと思います。

NGデザイン①

上の画像はイマイチなデザイン例のひとつです。どこがイマイチなのか見ていきましょう。

デザインでは4原則というものがあり、まず違和感がどこにあるかを探すための指標にもなると私は考えています。

デザインの4原則とは

近接・整列・反復・強弱とデザインを抑えるポイント4つの考え方です。

詳しくはこちらの記事でもまとめています。

近接はこちら

整列はこちら

反復はこちら

強弱はこちら

【近接】

ボタン類をはじめ、情報は左に寄せ、右に図が並ぶような配置になっているためセオリーに沿っているように見えますね。

【反復】

今回のデザインには反復する要素がないため気にしなくて問題ないポイントです。

残りの2つ、整列と強弱はどうでしょう。

【整列】

キャッチコピーは左揃え、説明文は中央揃えになっていることで文字が整頓されて置かれているように見えませんね。

【強弱】

キャッチコピーは目立つように青色に着色されているものの、文章それぞれの文字の大きさや太さは差があまりありません。また、右下の「選ばれてNo.1」のあしらいが目立つようなサイズ・位置におかれておりどの文章を読ませたいのかがわかりづらくなっています。

このデザインの違和感は、整列・強弱がセオリーどおりになっていないことにあります。

NGデザイン②

2つめのデザインは上記のフィードバックをもとに修正したものです。「整列」を再考したレイアウト、また、「選ばれてNo.1」のあしらいの位置が変わっていますね。

一見悪くないのですがこじんまりとまとまりすぎている印象があります。また、「選ばれてNo.1」の位置は収まりを意識しすぎてあしらいの役割が果たせていません。

考えたいポイント

【キャッチコピーと説明文の見せ方】

キャッチコピーと説明文の間には区切り線のように水色の線が入っています。メインビジュアルなど大きな役割を果たすビジュアルには、キャッチコピーをWEBページの見出しのような扱いにするのはおすすめしません。ガツンとユーザーに伝えたい情報をアピールするには文字のサイズや色、太さで強調して説明文との差をつける見せ方にするのがポイントです。

【あしらいの置き方（選ばれてNo.1）】

こういった説得力を増すような装飾の置き方で迷うこともよくあるのではないでしょうか。今回の場合、絵の補足説明となってしまう部分に配置してしまっておりいまいち説得力にかけてしまいます。

文章の補足説明として扱うように文章まわりに配置するなど、そのサービスの補足説明として納得がいくような場所に置いてあげることを第一に考えましょう。

【収まりが良すぎる】

上下に余白が広くとられており、良くも悪くもまとまりが有りすぎて印象に残らないデザインになってしまっています。バランスを崩さずに上下の余白を詰めるか、文字をもう少し強弱をつけてリズミカルな印象に仕上げるとよいでしょう。

【ボタンのデザイン】

アイコンと矢印が混在するデザインはくどい印象になってしまうのでどちらか1つにするのがポイントです。

改善したデザイン

デザインの改善版です。ここでのポイントは

改善したポイント

【キャッチコピー】

説明文と比べて2.5倍くらいの大きいサイズにして変化を加え、その中でも目立たせたい文章は太く・色をつけて見栄えするように工夫しました。

【文字の並び】

キャッチコピー・説明文・ボタンはすべて中央揃えにあわせてバランス感を保っています。

【ボタン】

矢印のアイコンは抜き、それぞれのボタンについて、ボタンと文字の間隔は統一しつつ中央揃えにすることで、上の【文字の並び】のバランスに活きる配置にしています。

【あしらいの置き方（選ばれてNo.1）】

サービスがプラットフォーム、WEBサービス・アプリ・製品などであれば実際のイメージ画像を使うと説得力が増し、あしらいが活きるデザインに変わります。無理に配置するのではなく意図を説明できるようにデザイナーのアイデアを交えると質の良いデザインに仕上がります。

まとめ

いかがでしょうか。今回は、バナーデザインに焦点をあてた、デザイン力を養うための「違和感」をもつヒントや「違和感」を解消させる改善策を紹介しました。言葉では説明してもらえない「モヤモヤ」や、それに気づきたいのに気づけないもどかしさは、デザインのセオリーに当てはまっているかどうか、作ったデザインは説得力のある仕上がりになっているか、説明できるか、など突き詰めていくとどこが悪いのか、どう直したら良いかなどが少しずつ見えてくるのではないかと思います。

「気づき」のポイントやひらめきに、ぜひこの考え方を活用してみてはいかがでしょうか。

今回もご一読いただきありがとうございました。