Shibajukuバナー 制作とブラッシュアップ CodeHero編
![](https://shibajuku.net/wp/wp-content/uploads/2022/08/img_thumbnail_oda1.png)
- Period
- 4時間
- Role
- Soft
![](https://shibajuku.net/wp/wp-content/uploads/2022/08/img_top.png)
こんにちは!10期生の小田です。
Shibajukuに期間限定で掲載するバナーをデザインしました!
こちらの6案です。
ブログを3回に分けて、制作の過程やブラッシュアップについて書いていきます。
どこに掲載するの?
今回制作したのは、Shibajukuサイトのフッターにある、
Shibajukuが運営するサービスや、Shibajuku自体の案内へ遷移するバナーです。
![](https://shibajuku.net/wp/wp-content/uploads/2022/08/img_footer_banner-5.png)
掲載の目的
Web制作に興味をもってShibajukuのサイトを訪れた方を対象に、
「関連するサービスの紹介と誘導」が目的になっています。
遷移先のサービスの利点・面白さを伝えるバナーとして制作し、
認知度向上、興味を持ってもらえるような制作を心がけました。
CodeHeroのバナーを作る
まずは、CodeHeroというサービスのバナーを制作しました。
こちらは、サロンメンバーさんが更新するタグ辞典サイトです。
バナー制作を始める前に、
まずはデザインラフとして、アイディアを紙に書き出しました。
![](https://shibajuku.net/wp/wp-content/uploads/2022/08/img_rough-4-1024x497.png)
そこからイメージをふくらませて、更にラフを描いたり作ったりして
デザインができたので、提出しました。
![](https://shibajuku.net/wp/wp-content/uploads/2022/08/img_submit.png)
バナーデザインでやった事
![](https://shibajuku.net/wp/wp-content/uploads/2022/08/2a53fc86caa788de5cb44237aec22591.png)
「先輩学習者が書くブログが読める」という利点を推しだしました。
HTML学習中の人にとって、コンテンツの更新を行うサロンメンバーは未来の姿かもしれませんよね。いわば、先輩のような存在かもしれません。そんな「先輩の知見がつまったノート(ブログ)が読み放題」ってとてもラッキーな状況ではないですか。
それをバナーにしてみました。
![](https://shibajuku.net/wp/wp-content/uploads/2022/08/a3e0110277fea8c440eedaf378351757.png)
こちらの案も、
先輩学習者の勉強結果が見られるという利点を出しました。
親しみやすい女性画像は、サイトを更新しているサロンメンバーさんをイメージしています。タグ辞典の画面も掲載してクリックのハードルが下がるよう工夫しました。
ブラッシュアップ
サロンオーナーのしばさんに添削していただき、ブラッシュアップを加えました。
![](https://shibajuku.net/wp/wp-content/uploads/2022/08/img_brushup_b.png)
![](https://shibajuku.net/wp/wp-content/uploads/2022/08/img_brushup_a.png)
![](https://shibajuku.net/wp/wp-content/uploads/2022/08/img_after01.png)
「先輩のブログ」というキャッチコピーがタグ辞典と結びつきにくかった為、「ブログ→説明」に変更し、さらに先輩のイラストも入れて視覚的に解りやすくしました。
![](https://shibajuku.net/wp/wp-content/uploads/2022/08/img_after02.png)
目線が散らばってしまう為、ロゴを取ったり要素を絞りました。
そんな感じで、完成しました~!
![](https://shibajuku.net/wp/wp-content/uploads/2022/08/img_thumbnail_oda1.png)
バナー制作、どうだった?
バナー云々ではなく、すごく学びにつながりました。
ユーザーの目に留まり、行動を起こしてもらうにはどうするのか。
どうすれば相手が理解しやすいか?
頭の中で想像するのと制作するのでは大きく違って、色々な事を考えバランスをとる必要がありました。その分勉強になったなと実感できたのでよかったです。
また挑戦してみたいです。