こんにちは、デザイナーのタキです。最近は韓国ドラマ「涙の女王」が面白すぎて、いつか韓国のロケ地に行こうと心に強く決めています。

 

それはさておき、6月にX(旧Twitter)にて密かに「＃イロコトバナー添削」と打ち出しまして、添削して欲しいバナーを皆さまから募集しておりました...！

 

実を言うと「応募してくれる方いないのでは...？」と考えていたので、私的には大歓喜でした。応募していただいた方、本当にありがとうございます！

 

私もデザインを始めた頃は「誰かにデザインを見られるのが恥ずかしい...」と思うことが多かったので、Xでこうして自分で制作したデザインを載せるということだけでも本当にすごいことだと思います...！

 

私もできる限り分かりやすく解説していければと思いますので、最後までご覧いただけると嬉しいです！

 

 

今回添削させていただくバナーのご紹介

今回は「ちゅう乃 webデザイン」さんのバナーを添削させていただきます。

こちらタロットの絵もご自身で描かれているということで、度肝を抜かれました...！

 

 

バナー作成時のデザインコンセプトは下記でいただいております。

◉バナー作成時のデザインコンセプト

• 300*250サイズ想定
  ➡︎文字数は最小限に抑え、商品を全面的に出す
• 商品に興味を持ってバナーを見てもらうことが目的
• 落ち着いた色合いで、高級感と歴史的な雰囲気作りを心がけました。
  ➡︎文字にグラデーションをつけ高級感を出す
  ➡︎和風な飾りと背景を使う

 

 

バナーの添削ポイントについて

ちゅう乃さんのバナーの全体的な雰囲気はコンセプトに合い、ユーザーがパッと見た時に「和風な何か」ということが伝わるようになっていると思います。

 

その上で「ユーザーが商品を予約するためには何を見せるべきなのか」という情報の整理をしてあげると、もう一段階ステップアップしたバナーになるのではないかと思います！

 

またデザインでは、和風な雰囲気を出すための装飾が逆に文字を読みにくくしている箇所がありますので、装飾を足すだけではなく、時には装飾を少なくしてみることも重要です。

 

 

バナーデザインの添削

①情報整理

まずバナーデザインにおいて重要なのが「情報整理」。このバナーから遷移先でユーザーに行動をさせるための情報の見せ方の優先度を確認します。

 

今回のバナーでは下記のように情報を整理しました。

◉最終目的

タロットカードの予約をしてもらうこと

 

◉情報整理（ユーザーに何を伝えたいか？）
1. 太平記とタロットカードが組み合わされた商品であること
2. タロットの絵柄が太平記に合わせられていること（＝ビジュアルを見せる）

3.予約受付中であること

 

上記のように情報を整理したのち、私の場合は一旦手書きでワイヤーフレームを作成してから、実際のアートボードへと要素を入れ込んでいきます。

ここで意識したのは、

• まず「どんな商品なのか？」がパッと見た時に視線に入ってくること
• 「太平記×タロット」を商品と同じ程度のサイズにすることで、商品がすぐに理解できるように
• 予約サイトへの導線の作成（「予約サイトを見る」箇所）

の大きく3点です。

 

特に今回のバナーデザインにおいては、商品を予約させることを目的としていますので「このバナーを押したらどこに遷移するのか？」を記載することも重要です。

 

 

②デザインの調整

情報整理が完了したら、次はデザインに入っていきます。今回はデザイン箇所を「どう調整したのか」をデザイン箇所ごとに解説していきます。

 

1.「太平記×タロット」箇所

こちらは元々「太平記」の箇所に和柄を入れたり、枠線、光の装飾をつけることで目立たせようとしているかと思います。ただ、そもそもの文字サイズが小さいことがあり、中の和柄の装飾が逆に文字を読みにくくなっています。

 

ですので添削させていただくとしますと、まず文字を大きくしてパッと目に入るようにし、「何の商品のバナーなのか？」を分かりやすくしました。また文字の色は金のグラデーションをかけることで高級感を演出するとともに、フォントを太めの筆記体にすることで和風さをさらに演出しました。

 

2.タロット画像箇所

Beforeでは、バナーの中心部分にタロットカードを全て見える形で配置されています。こちら全てのタロットカードを見せることができて良いのですが、バナーは少ない領域でどのように情報を入れ込むのかが重要となります。

 

ですのでAfterでは、タロットカードは1つのカードを大きく見せつつ、他の絵柄箇所は背景に使用することで様々なタロットカードがあることを表現しています。こうしてひとつの塊で見せることでユーザーの目線を散らばらせることなく、タロットカードの絵柄を見せることができるかと思います！

 

3.「遊んで学べるカードゲーム」箇所

こちらの箇所では元々のデザインですと文字をそのまま打っただけに見えてしまうので、文字ごとに見せ方のデザインを変えることで見やすく、分かりやすいデザインにすることができます。

 

今回は「遊んで」「学べる」を同じデザインにすることで情報要素としてまとめつつ、漢字を大きくしてそれ以外の文字を小さくする文字組みにすることで「このタロットで何ができるのか」を分かりやすくしています。

4.バナー下部の予約導線周り

Beforeのデザインで気になるのは、発売の日付の上下の余白です。予約受付中の文字を大きくさせていることによって、日付の上下が意図せず「空いてしまっている」ように見えています。

 

ですので、Afterのデザインでは発売の日付は帯に入れず、単体で帯を敷くことで予約受付中よりも目立たせないが、情報としては見えやすくデザインを整えました。また「予約受付中」の文字のグラデーションが少し読みづらくしてしまっているので、ここは白で見えやすく、かつ予約サイトへの導線箇所を引き立てられるようなデザインにしています。

 

 

添削後のバナーデザインはこちら！

情報整理からデザイン調整まで行ったバナーデザインとなります！見せる情報はしっかりと見せつつ、パッと目に入りやすいバナーとなっているかと思います！

 

 

添削前と後の比較

 

まとめ

今回の添削で覚えて帰っていただきたいのは2つです！

・デザインは足しすぎず、時には引いてみることも大事！

・バナーはとにかく情報整理！配置を確認してからデザインに入る！

 

私もイロコトに入った時にバナーデザインをした際に、情報整理をしっかりと行わずにデザインに入ってしまったことで余計に制作時間がかかるということもありました...

 

あとデザインの上達方法は「とにかく量を作る」ことも重要かと思いますので、作って、考えて、フィードバックをもらって、また作ってを繰り返せるととても良いかと思います！

 

それではまた別のブログでお会いしましょう〜！^^