Webデザイナーのhazuki(@zzz_web_info)です。

今回はなんと二ヶ月も前に作成した架空バナーを修正したのでまとめました。

二ヶ月も経つと粗がよくわかります。

バナートレースをされている方も、架空のバナーでも良いので自分で1つ作ってみるのをオススメしたいです。

自分の実力やバナートレースをした際もこれまでとは違う角度から観察することができますよ。

最初に作成したバナー

５月にバナーを添削してもらうイベントがあったので、そのお題で作成したのがコチラ

デザインの仕様書

ジムのオープニングキャンペーン
30-40代向け
紫や青のようなサイバーなイメージ
サイズは今回の添削イベントのみ300×250

作成過程で考えたこと

…上記に書いた項目の中に、修正した方がいいポイントがいくつかあります！

さて一体どこを修正したら良いのでしょうか？

添削してもらいました

今回添削していただいたのは、同じスクールに通っていた尾川くん(@Rtwopstyle)です！

文字がとっても読みやすくなりましたし、サイバーなイメージがよく伝わりますよね。

いただいたアドバイスを一つずつ書いていきます！

文字は斜めにしすぎない

まず、文字はまっすぐの方が読みやすいです！

スポーツ系のバナーなので『動きを付けた方が良いかな』と、スピード感を出すべく、文字をとにかく斜めにしていました。

ですがあまりにも斜めすぎると逆に目立たなくなりますし、ぱっと見で何が書いているかがわかりません。

実際に文字をまっすぐに修正すると、小さい画面でも何が書いているのかスッと頭に入ってきました。

文字にフチなどをつけない

写真と文字を重ねているので、文字の視認性を高めるためにフチを付けていました。

これもなるべく使わない方が良いそうです。

他にもドロップシャドウもあまり使わない方が良いとのことです。

考えられる点として、小さいバナーなのに情報量が増えてしまうからなのでは？と思いました。

シンプルに余白を作るといったアプローチでも十分文字を読ませることができます。

また、フチやシャドウは簡単にデザインを作った気になって腕が上らなくなるのではないかとも考えられます。

この点はWebデザイナーせんざきさんのnoteで拝見したので、興味のある方はぜひ読んでみてください！

https://note.com/cha_sd/n/n7dfce4517a89

文字と写真は被らせない

先ほどに続きますが、そもそも文字と写真はあまり被らせない方が良いそうです。

確かに画面がゴチャゴチャしてわかりにくいですよね。

奥行きも必要だと思って被せましたが、わざわざ重要な文字に被らせなくても他のアプローチができそうです。

さらに修正しました

上記の添削をいただいてようやく今月に修正作業ができました…

添削通りに修正するのも良いけど、もう少し自分なりに工夫することに。

トンマナを考えるのに時間がかかるので特訓です。

レイアウトは参考に、トンマナを考え直しました

文字のレイアウトは正直添削してもらったのが一番良いのかな、と思ったのでそこは同じように修正しました。

イメージが「サイバーなかっこいい系」だったためよりイメージに近づけられるように配色を変更しました。

背景に黒を使うことで画面がすっきり引き締まりました。

写真をカラーに戻しました

背景に黒を使うことで、写真のモノクロも見にくくなりました。

それに体形はカラーの方が見た方のイメージもしやすそう、興味を持ってもらいやすいのではないかと考えてカラーに戻しました。

写真が背景に隠れると落ち着いた印象だったので、最初にデザインした時同様に写真は前面に持ってきました。

写真も文字同様に斜めにせずまっすぐ配置しています。

サイバーからイメージを膨らませました

あしらいをもう少し工夫

サイバー→ライト・レーザービーム？→ネオン

を連想して「OPENING CAMPAIGN」は光彩でネオン風に。

いつでも無料体験の少し上にサイバー風の線を配置しました。

入会金の左余白が目立つので、ジムらしい力強さのある太めの矢印アイコンを配置し、一番読ませたい「入会金無料」に目が行きやすくなるようにしました。

きっとまだまだ改善の余地ありですが、最初に作成したものが添削を通して見やすいバナーになったと思います！

リサイズを作成しました

300×250のバナーが完成したので、元々の課題にあったリサイズでの作成も行いました。

468×60

300×600

結局トータルで１時間はかかったような…

リサイズはほぼ初めて行いましたが、パズルみたいですごく面白いです

ただレイアウトの引き出しが少ない事にも気づいたので、通勤時間を使って様々なサイズのバナーを観察しています。

まとめ

まだまだデザインに時間がかかる事を痛感しました。

ラフの時点でもっと鮮明に完成イメージを浮かべるのが良いかもしれません。

添削してもらう時はすごく緊張しますが、乗り越えたら勉強になることばかりなのでとても貴重な機会でした。

トレースだけでは自分の引き出しはなかなか増えないので、力試しにぜひ1個でも作る事をオススメします！

• デザイン
• 制作物