9月頭より、HTML/CSSを気軽に質問できる初学者向けの新サービスソースコード・ブルー（ソースコードブルー）を始めます！
こちらのサービスは詰まっている点やわからない点などをピンポイントに気軽に聞けるコードレビュー・トラブルシューティングサービスになっていまして、単発はもちろん継続的な質問等もなるべく融通を効かせて受けていきたいと思いますので興味のある方はお楽しみに！
詳細はまた日をあらためて記事にしますので受けてみたい方はそちら参照の上、検討してみてください！
さて今回はそんなソースコードブルーですが、バナーのデザインには大分手間取りました…💦
いかんせんデザインは勉強中の身であり、さらにデザインの心構えも未熟なため先輩方にアドバイスを頂いても正しく意を汲み取れず大分苦労してしまいました。
しかしお陰様でわかりやすくいいバナーができましたのでその経過をせっかくなので公開したいと思います！
あざみ
ソースコードブルーのバナーができるまでの経過を大公開！
せっかくやるのであればできるだけ満足度のあがるいいサービスにしたいと、バナーにも大分時間をかけました。
しかし時間がかかってしまったのは僕の実力不足であり、上達やスピード感は今後の課題でもありますが、その過程が非常に勉強になりましたので誰かのなにかの役に立てれば・また自分への備忘録として記録しておきます。
初期のデザイン案
ここからは一旦経過ごとに画像をバシバシ貼っていきます。
初期案
初期は今見ると正直かなり適当です…
これが初期案。15分ワンコインからのサービスということで作ったのですが明らかにぱっとしませんね…
裏通りの喫茶店か飲み屋への誘導看板のような謎のバナーです。
当時はソースコードブルーという名前も決まっていませんでしたのでワンコインコードレビューということで制作していました。
2案目
こちらな2案目。もともとブラッシュアップ前ではありますがどうにもこれもぱっとしません。
何を伝えたいバナーなのか全然わかりませんね…。
名前の通り「コードブルー」と「コーディングの救出に緊急出動！」みたいな感じをかけておりタイトルからも青さを出したいと悩んで色々試していた時期です。
海っぽくすればいいってもんじゃないぞ！！っと当時に突っ込みたい
3案目以降
ここからはちょっと順不同ですが、いくつかのパターンを考案していましたので紹介します。
いくつかのパターンを考えていたうちのひとつ。
これも案としては出したものの、訴求したいサービス内容と乖離しているのはわかっていたのでテイストの違う練習のため作ってみた感があります。
こちらは多少ブラッシュアップしてみた感じです。
コードブルー的にヘリコプターを入れてみたり、コードレビューサービスであることを示唆するためコーディングの画面を入れてみたり、といった具合です。
以前よりは近づいてきた感じはありますが、目に留まるような出来ではありません。
「よりキャッチーに」ということで親しみやすそうな配色にしたりイラストをいれてみたりしました。目にやさしい配色感はありますがサービスのバナー感は薄い感じですね。
もう少し進んだ案
右側は少しプラッシュアップしてみたバナー、左側が新規に作ってみたものになります。
っぽさは大分でたんですがバナー自体の視線（外を向いてる）やその他の作り込みが甘く、見る側の視線がどこをみたらわからないと突っ込みを多く受けた案になります。
このあたりから根本的な部分をもっと勉強しなくてはと痛感してましたね…
ただこれだけ色々作ってみると弱点が浮き彫りになってきます。
僕の場合はやはりデザインそのものに対する理解度が浅く、テクニックや見た目以前の問題というのがわかってきました。
このあたりは今も学習を重ねているところですが、そういった弱みに気づかせてくれた先輩方にも感謝ですし、色々考えて作ってみても経験値として無駄にならないなって思いました。
結果として遠回りはしていますが・・・！
さらなる改善案
ここまででも大分助けてきてもらいましたが、いよいよ大詰めです。
完成品のバナーのベースができてきました。それがこちらです。
どーん！
いままでとは大分変わってきました！
このバナーなんなの？っていうのが大分見えるようになってきました！あとはブラッシュアップの案をアドバイス等ももらいつつ作っていきました。
ちょっと装飾してみたり
揃え方を変えてみたり、イラストを少し大きくしたりといじってみました。
ただフォントがちょっと癖があったり、HTML,CSSといった要素が目立たない、揃える箇所を調整…
もろもろ1つずつ修正してみてついに…
完成版！
ついに完成です！
初期と比べだいぶ印象が変わったと思います！
以前の課題が大分解消され、見やすくなりました！
まとめ・感想
実はバナーひとつだけでも数週間はかかってしまっています。
サービスに使うバナーなのでこだわったというのもありますが、やはりデザインは難しい・・・！
バナー一つでもかなり自分と戦い、迷走を繰り返し、情けない気持ちもありますがおかげさまで大分勉強になりました。
こんなレベルのデザイン学習者ですがなんとかまだまだ腕を上げれるよう学習を続けていきたいと思います。
