こんにちは(*‘ω‘ *)ノ

はじめまして、Shibajukuメンバーのあまのくらげと申します♪

よろしくお願いします^^

突然なのですが、この記事を御覧のそこの貴方！PCからアクセスされていますか？スマホからアクセスされてますか？

もしPCなら右下のバナーにご注目、スマホなら一度一番下までスクロールしてみてください。（スクロールしたら戻ってきてねｗ）

そちらで3月から表示されているバナー、今回私が作らせていただきました^^

（掲載期間は2019年３月～５月の予定です）

今回はこちらのバナー作る際に気を付けたことをまとめていこうと思います^^

新年度も始まりましたし、初めてバナー作成することになった！という方の参考になれば幸いです♪

ちなみに前回のバナーを作成されたアヤトさんの記事がとってもわかりやすくまとまっているので、こちらもぜひ！

そもそもどんなお題？

今回作成したのは「CAMPFIRE」のページ（https://camp-fire.jp/projects/view/96755）に誘導するバナーです。しばお先生からの指定は次のとおりでした。

• サイズ： 336px × 280px
• ターゲット：すでに Shibajukuを認知しているユーザー
• 掲載場所：このブログ

メインターゲットを決めよう！

ターゲットは「すでにShibajukuを認知しているユーザー」との指定がありますが、もっと具体的なイメージを作っていきます。

おそらくこのブログにたどり着いた方は、「Shibajuku」という単語は確実に目にしているはずで、webの知識や仕事に役立つ情報が欲しくて来ているはずなので、（逆に他の理由でたどり着いた方いらっしゃいましたらコメントで報告してくださいｗ気になるｗ）

このブログの訪問者さま全員ターゲット！かなと思うのですが、

今回は、「女性、27歳、社会人歴５年前後」をメインターゲットにすることにしました。

何故かというと、ターゲットの性別が男女問わない場合、女性向けにした方が良いらしいんです。

理由は、「消費の８割を女性が握っているから」「同じ金額を持っていたとして、男性より女性の方が消費に使う傾向が高いから」「女性のいるところに男性は来るから」などなど・・・。

Shibajukuは消費かと言われるとちょっと違うような気もしますが、世の中のwebのスクールのバナーも女性向けだなと思うデザインが多いのですよね。モデルさんも女性の写真を使っていることが多いです。

なので、先人に倣ってみましたｗ

作ってみた！女性バージョン

メインターゲットである女性の写真を使用した、王道な感じのデザインです。

気を付けたこと

メインターゲットに自分とモデルさんを重ねて見て欲しかったので、「もう無理～」と聞こえてきそうな表情の写真を使いました。それは良いのですが、なんか雰囲気楽しくなさそうに見えてきまして・・・

Shibajukuの楽しさもどうにか伝えられないかなと、フォントは手書きでやわらかい、楽しい雰囲気のものを使用しました。

「独学はもう限界かも・・・」の心の声は最も目に入る左上に配置し、色はロゴと反対色のオレンジ系に、「独学」「限界」の文字は大きく強調しました。

とりあえず大きい文字を流し読みで目に入れてもらえれば、心の声は伝わるかなと思いますｗ

ちなみにブラッシュアップ前は・・・

えーと、どこが違うかわかりましたか？ｗ

そうです。バナー下部のロゴとボタンの位置が逆なのです。

一度しばお先生に見てもらった際に、

「人の目線はℤ軸に動くので、ロゴの後にボタンがあった方がスムーズ」

とのアドバイスをいただいたので、その通りに直しました。

Z軸の動きはWebのような大きな範囲だけでなく、バナーのような小さな範囲でも同様なのですね。

もう一つ作ってみた！猫バージョン

こちらの猫バージョンですが、実は当初作るつもりは全くありませんでした。

写真素材を探しているときに、たまたまこちらの猫ちゃんと目が合ってしまい、

「この子使いたい・・・」という気持ちがむくむくと・・・ｗ

そんなわけで、女性バージョンをベースに作ってみたのがこちらになります。

気を付けたこと

女性バージョンで使用していた「オレンジ色の心の気持ち」は、この猫写真にあわせると色が合わなかったので、フォントは黒系で右上に配置しました。

左上では吹き出しの位置として考えると不自然な感じもしましたし、猫の顔に被ってしまったので。

フォントは猫らしく、丸っこいものを選びました。

ブラッシュアップでこちらはかなり変わりました

はい、こちらがブラッシュアップ前なのですが、女性バージョンと同じくボタンとロゴの位置が逆になっています。

猫の気持ちの部分のフォントも変わっています。

ブラッシュアップ前に使用していたものは、「しっかり書いている」感があって、少し力強さがあるような気がしたのです。

採用したものの方が、筆を置いていって書いたような、力の抜けた感じがしませんか？

より猫の気持ちの「もう無理」感が伝わりそうなフォントを選びました。

また、ボタン部分に猫の足あととしっぽを追加してちょっと遊んでます^^

並べてみるとわかりやすいかも？

ロゴの上の吹き出しの文字を変えた理由

「そんなあなたに！」から「ねこでもわかる！？」に変えています。

なぜ変えたかというと、猫の写真になってしまったのでバナーを見た方が自分と重ねて見てくれるか微妙だったからです。

猫を飼ったことがある人は、PC作業中に猫に邪魔されたことを思い出してしまうかもしれないしｗ

なので、猫＝そこのアナタ！が、躓いているところ、わかりやすく教えてくれるいいところがあるよ！と言いたいことが伝わるように、この言葉に変えています。

おわりに

以上が私がバナーを作成するにあたって試行錯誤した結果になります。

Shibajukuブログの訪問者さんがより気になってくれるバナーは果たしてどちらなのでしょうか。

ちなみにメンバーには猫バージョンが好評でした^^

長々と解説？してしまいましたが、初めてバナーを作成してみて、この小さな範囲に伝えたい情報をどのように表現するのか、どれを伝えなければいけないのかを考えるのは、思った以上に難しかったです。

今回はShibajukuの授業のわかりやすさ、楽しさにスポットをあてて考えてみましたが、もっと他の魅力に焦点をあててみても面白いかも・・・？と思ったり、

私もまだまだ色々吸収して、技術的にもブラッシュアップ頑張っていきます！

ではまた～(*‘ω‘ *)ノ