初めてのバナー作成とブラッシュアップ【webデザイン勉強】

4週目が終わりました！

まるっと1ヶ月経ち、継続の難しさをひしひしと感じてます。

4週目は

・バナー作成、修正

・副業雑談会参加

・クラウドワークスコンペ参加

このような動きをしてました（授業も進めつつ）

今回はこの中でも、『バナー作成、修正』についてまとめます。

スクールの課題のバナーを作成し、先生からレビューをいただいた上で修正し、なんとか完成まで持っていきました。

オリジナルバナーからの修正遍歴はこんな感じです。

荒削り状態のバナーを先生からのお言葉でどんどん磨いていく感じが楽しく、そして自分のやりがちなクセみたいなものも見えてきてとても勉強になりました。

それぞれの工夫した点と修正点

【デザイン案1（写真上）】

- 工夫したところ -

・「実践的」を強調している点などから可愛らしいデザインよりスタイリッシュな雰囲気が合うと考え、直線的なデザインに
・「スクール→未来に向かって進む」イメージから、明るい、前向きな印象を与える→黄色やオレンジを使用
・すっきりした印象にしたかったため、左揃えに
・より注目を集めるバナーにするため女性の写真を使用

▶︎オリジナル

▷先生からのレビュー

①女性の写真が小さい、それに対し背景の写真が大きい（葉っぱが大きすぎる）、また女性の写真の机部分がばつっと切れているのでなじませる

②「充実のサポート〜」部分の文字が読みにくい

③上部分のオレンジ枠に対して下部分のオレンジ枠内が詰まっている

▶︎修正1回目

いただいたレビューをふむふむ、、と読み、修正したのがこちらです。

女性の写真を思い切って大きくし、文字にかぶるようにして動きのあるデザインにしました。背景写真も不自然でない写真に差し替えました。

また、②「充実のサポート〜」部分は背景の白の不透明度を上げて背景とのコントラストをつけ、文字の視認性を上げました。

下部は余白を大きくし、文字組みを工夫してメリハリをつけました。

▷先生からのレビュー

・左右の余白を揃える

・上がギュッと詰まっているのでレイアウトを調整する

▶︎修正2回目

さらに修正した最終版がこちらです。

最初のオリジナルと比べるとパッと目につくバナーになったのではないかと思います！

【デザイン案2（写真下）】

- 工夫したところ -

・デザイン要素を強調するために、デザイナーを印象付けるようなイラストを使用
・未経験者も親しみやすい印象にするためかわいらしいイラストで優しさを表現
・説明会予約に進むように、下のボタンのようなデザインのみ色を変え、目立たせた

▶︎オリジナル

▷先生からのレビュー

①「実践的に〜」のドロップシャドウが濃い

②吹き出しが浮いて見える

③下部の余白を調整する

④フォントをカジュアルなものに変える

▶︎修正1回目

「卒業がない〜」の文字をバランスを取るため中央揃えにし、フォントを柔らかい印象に変えました。

①「実践的に〜」のドロップシャドウは外し、文字色を少し濃くしてドロップシャドウがなくても読みやすくしました。

浮いていた吹き出し部分（②）は吹き出しではなく手書きと斜め線でなじませ、

下部はクリエイターズファクトリーのロゴを入れて余白を調整しました。

▷先生からのレビュー

・「卒業がない〜」の囲みは野暮ったくなるので外す、装飾はさりげなく

・手書きの「今からでも〜」部分の傾きを減らす

▶︎修正2回目

いただいたレビューを元に、↑のバナーが完成しました。

＜＜学んだこと＞＞

・作成中は時々等倍にして確認し、文字の読みやすさやバランスを確認する

・写真やイラストは思い切って大きく/小さくする

・全体の余白を調整する、上下左右、コンテンツごとの間隔など

・文字を傾けるときは角度をつけすぎない、少しでも変化が出せる

・安易にドロップシャドウを使わず、背景とのコントラストなどの調整で読みやすさを確保する

2つ作っただけでも、↑のように学びが多く得られました！

改めてインプットばかりではなく、作ったものを人に見て頂き、ブラッシュアップしていくことの大事さを痛感しました。

他の方が受けているレビューなどももちろん参考にしましたが、自分が作成したものへのレビューは学びの浸透度合いが違う感じがします。

せっかくのスクールという機会なので作成とブラッシュアップを重ね、レベルアップしていければと思います！

最後までお読み頂きありがとうございました。