ピックアップコラム
-
Pickup!
プラグインなし!オリジナルSNSシェアボタンの作り方ガイド
-
Pickup!
カラー別にみてみる!WEBサイトにおける配色パターン
-
Pickup!
サイドバーとは?サイドバーを設置するメリットと書き方
-
Pickup!
ワードプレスのプラグインで画像の圧縮・最適化をしてみた
バナーデザインの考案は、Webデザイナーにとって必須のスキルです。しかし、デザインに凝れば凝るほど時間と手間がかかるのが難点。そこで今回は、高品質バナーを効率的に作成するテクニックについてご紹介します。
目次
どんなにデザイン性に優れていても、下記の2点が明確でなければバナー本来の役割、つまりユーザーにクリックを促すことはできません。
▼バナーの必須要素
バナーには5つの基本ルールがあり、これを守ることで「一番伝えたいことが特定のペルソナに伝わる高品質バナー」が完成するのです。
▼バナーの基本ルール
「高品質バナーの作成には時間がかかるモノ!」と思っていませんか?
実は、たった2つのコツを押えるだけで、「デザイン性」と「訴求性」を兼ね備えた高品質バナーを短時間で制作することができるのです。
バナーを制作する際、デザイナーの作業は主に「レイアウト」と「配色」の2種類です。
確かに、バナーデザインはレイアウトと配色のセットで成り立っていますが、同時に作業を進めるのは非効率。
「レイアウトを変更すると元の配色が不自然になる」「配色を変更するとレイアウトの余白が目立って物足りない」といったイタチごっこを繰り返し、なかなか完成しません。
そこで2つの工程を切り離し、まずレイアウトを決めてから配色に取り掛かることで、バナーの制作スピードが格段に短縮できるのです。
レイアウトの工程を小分けし、ステップごとに方向性を決定しながら進めることで、修正点が最小限に抑えられます。
▼レイアウトのステップ
では実際に、バナーを制作する際の工程を6つのプロセスに分けて見ていましょう。
この段階で重要なのは、「デザインはほぼ完成したのに必要な要素が漏れていた!」というミスを予防すること。
見た目のデザインにこだわる必要は全くなく、同じフォントサイズでバナーに入れたいテキストを並べるだけでOKです。
続いて、ピックアップした構成要素に優先順位を付けます。
サイズに限りがあるバナーだからこそ、最も伝えたいメッセージが一番目立つようにデザインしなければなりません。
▼構成要素の優先順位
ステップ3で写真を選ぶ目的は、配置する際のサイズを見定めるため。
つまり、この段階でバナーに入れる写真を決定する必要はなく、ある程度のサイズ感や横長・縦長などの基本フォルムさえ決まっていればOKです。
バナー向けのレイアウトを大きく分類すると、「分割レイアウト」と「全面レイアウト」の2種類に分けられます。
どの要素をメインにするかによって選ぶと良いでしょう。
▼レイアウトの選び方
「テキストエリア」と「画像エリア」がくっきりと分かれているのが、分割レイアウトの特徴です。
▼横分割レイアウト
▼縦分割レイアウト
エリアを独立させることで、テキストと画像の両方がスッキリと見やすくなります。
▼縦分割レイアウトで作ったサンプルバナー
「自社商品をメインにしたい」「写真の美しさを活かしたい」といった場合におすすめなのが全面レイアウト。
ただし、下記のサンプルバナーのように背景写真とテキストのコントラストを強くすることで、テキストを際立たせる使い方も可能です。
▼全面レイアウトで作ったサンプルバナー
ベースとなるレイアウトが決まったら、とりあえず盛り込みたいテキストメッセージと写真を使ってデザインを組んでみましょう。
この段階では、まだモノクロのままでも構いません。
何をどこに配置するかが決まったら、下記の手順でデザインを仕上げていきます。
修正と配色を同時進行で行うことで、「どうしたら最も重要なメッセージが伝わるのか」が具体的に見えてくるのです。
上記レイアウト例のように文字テキストと写真がきっちり分かれているデザインも、バナーとして悪くはありません。
しかし、下記の問題点は「クリスマスケーキコレクション」用のバナーとして致命的です。
▼問題点
そこで下記の解決策を講じることで、ケーキの写真を大きくしてもメッセージがしっかり伝わるようになりました。
▼解決方法
文字色やテキストエリアの背景色は、デザインのバランスを整えながら行うのがコツです。
▼問題点と解決方法
バナーのデザインに遊び心をプラスするのは、Webデザイナーの腕の見せ所。
今回は、下記の工夫を加えて仕上げてみました。
▼解決方法
もう一つ、縦分割レイアウトで作成したバナーの問題点と解決策についてご紹介します。
▼問題点
▼解決方法とデザインの工夫
最後に、横分割レイアウトのデザイン事例をご紹介します。
▼問題点
▼解決方法とデザインの工夫
▼解決方法とデザインの工夫
▼解決方法
デザインすること自体が楽しいというWebデザイナーは多いでしょう。しかし、仕事である以上は費用対効果を無視するわけにもいきません。そもそも、時間をかけたからといって優れたバナーが仕上がるという訳ではないのです。まずは、バナー本来の役目と基本ルールを守るのが大前提。そのうえで小分けにしたプロセスごとに小さな決定を積み重ねていくことで、余計な迷いや手戻りが防げるのです。
受付時間:平日10:00~19:00(土・日・祝日を除く)