Vol.16 実践編

こんにちは。ワンダースター株式会社の竹内です。

今回はこれまでの総集編ということで、実践編となっております。
実際に当サイトで使用されたTOPページのセミナー告知画像を例に使わせていただき、デザインをより良くするためにどうすれば良いのか、ご説明したいと思います。
以下のバナー画像は、当サイトでTOPページに掲載されていましたので、ご覧いただいた方もいらっしゃるかもしれません。

実際には特別何かが悪いという訳ではありません。
しかし、いくつかのデザイン上の工夫によって、もう少し掲載内容が見やすくなることが可能かと思います。
特にWEBサイトのTOPページのバナーなどでは、訪問者に対して瞬時に情報伝達が必要となりますので、重点的に伝えたい内容を整理して伝わりやすくする必要があります。
この告知バナーの重点的に伝えたい内容としては、

• セミナー開催の告知であること
• 営業の未来というセミナータイトルであること
• 義利合一商道会主催（立ち上げ記念）であること

以上になるかと思います。あとは開催日程なども見やすくする必要があります。
そういう観点で修正を加えたバナーが以下になります。

修正したポイントは、大きく3つです。
１）文字の強調
２）背景画像の調整
３）ブロックの細分化によるレイアウト調整

まずは、文字の強調についてです。上記の重点的に伝えたい内容①、②については、ロゴで使用されている紫色を使用して文字を強調し、全体の統一感を持たせながら、伝えたい情報が瞬時に目に入りやすくなるように修正しました。特に「セミナー情報」の文字については、より強調されるように、背景を紫色に変更して文字色を白色に反転させました。③については、右側に大きくロゴの掲載があるので、強い印象として残りやすいのでそのままとしました。

次に背景画像の調整についてです。修正前のデザインでは、背景画像が原因で、左側に配置されているセミナー詳細内容が記載されたブロックの文字が読みづらくなっていました。画像を少し薄くすることで、文字を読みやすくしました。逆に右側のブロックは背景画像を濃くすることで、画面全体にメリハリを加えています。

最後は、ブロックの細分化によるレイアウト調整です。修正前のデザインでは、左側の告知内容には、開催日、主催者情報、セミナータイトル、サブタイトルの4つの内容が1つのブロックにまとめられていましたが、次にように3つのグループに細分化しました。
①開催日と主催者情報
②セミナータイトル
③サブタイトル
そして、各グループの上下に余白を作ることで、ブロック化し、読みやすくなるように配慮しました。

大きく全体の構成やデザインを変えていませんが、伝えるべき内容を瞬時に伝える必要があるWEBサイトというメディアの特性を意識して、デザインの修正をしました。このように、デザインというのは、少しの配慮で見え方が大きく変わる場合があります。

営業の現場でも選ぶ言葉によって、伝わり方が大きく変わってくることと似ているでしょうか。

これまで、「営業人のためのデザインノウハウ」ということでコラムを書かせていただきました。普段はあまり「デザイン」と関わることがない方も多くいらっしゃるかもしれません。しかし、デザインは身近な生活とも関わりがありますので、ぜひ余裕があるときに、ポスターや看板、電車の広告など、いろいろな身の回りのデザインをじっくり見ていただくのも面白いと思います。

これまで、「営業人のためのデザインノウハウ」ということでコラムを書かせていただきました。普段はあまり「デザイン」と関わることがない方も多くいらっしゃるかもしれません。しかし、デザインは身近な生活とも関わりがありますので、ぜひ余裕があるときに、ポスターや看板、電車の広告など、いろいろな身の回りのデザインをじっくり見ていただくのも面白いと思います。

当コラムが実際に営業や仕事の現場でどのくらい活かせる内容になったかはわかりませんが、少しでも皆様のお役に立てる情報となっていればと思います。

これまでありがとうございました。