Webデザイナー3人のバナー作成プロセスを大公開！美容バナーのデザインとブラッシュアップ

はじめまして。
私たちは、横浜にあるWeb制作会社で、Webデザイナーとして日々の仕事に取り組んでいます。

その名も「はやかわデザ部」！

3人のWebデザイナーと1人のWebプロデューサーで構成。
自社サイトのデザイン業務に加え、大企業からの仕事の依頼、中小企業や医療機関のWebサイト・LP・バナー制作など、デザインに関する様々な業務に取り組んでいます。

このnoteは、そんな私たちの日々のデザイン活動を発信していくために立ち上げました。
Webデザイナーを目指す方のための情報はもちろん、Webデザイナーとしてさらにスキルアップしていきたいと考えている方のために、様々なお役立ち情報を発信していきます。

是非定期的にチェック（フォロー）していただけると嬉しいです！

さて、早速ですがみなさんに1点質問があります。
Webデザイナーが成長していく上で一番重要なものは何でしょうか？

経験を積んだWebデザイナーであれば、きっと

「手を動かす事！そして経験のある先輩Webデザイナーからフィードバック（アドバイス）をしっかり受ける事」

と回答するのではないでしょうか？

経験豊富なプロのWebデザイナーに作品を見てもらい、フィードバックをしてもらうことができれば、デザイン力は間違いなくアップします。

ちなみにデザインフィードバックは、自分のデザインはもちろん、他のWebデザイナーがどう考えてデザインし、どういうフィードバックを受け、どう修正しているのかを知る事にも大きな意味があります。

なぜなら、デザイン力をアップさせるためには引き出しを増やす必要があり、自分自身の視野を広げるためには、他者の考えを理解することが非常に重要だからです。

ただ現在Webデザイナーを目指し、勉強に取り組んでいる方や、雑用やルーチンワーク中心の駆け出しのWebデザイナー、担当者が自分だけという社内Webデザイナー他、現在の環境ではフィードバックをもらうのが難しいというケースも少なくありません。
（※他のWebデザイナーのデザインへの取り組み方となると、さらにハードルが上がります）

そこで本記事では「はやかわデザ部」のWebデザイナー３人のバナー作成プロセスとそのフィードバックの様子、フィードバックを受けてバナーがどう修正され完成したのか、その過程を全て公開！

デザイン力をもっとアップさせたい！
他のWebデザイナーのデザイン過程を知りたい！
と考えて居る方は、是非本記事の購入をご検討ください！

◆◇◆ Thema #02 公開中！ ◆◇◆

“現役Webデザイナー3人のデザインプロセス”第2弾として「Youtubeサムネイル」のデザインプロセス記事を公開中です！

はやかわデザ部のWebデザイナー紹介

まずはじめにはやかわデザ部のWebデザイナー３名の自己紹介から。全員がWebデザイナーとして一定の経験を積んでいますが、その経歴もデザインスタイルも異なります。
（※はやかわデザ部には、未経験からWebデザイナーを目指している方にとって、勇気をもらえる経歴の人間が揃っています。）

是非ご自身の経歴や経験、デザインスタイルと比較してください！

経歴：
美大最高峰の大学を目指し、3年ほど勉強しつつ飲食店でアルバイト生活を送る。
美大の夢は破れたが新しい目標を「webサイトを作る仕事」に定める。当初はWebとプログラミングの違いもよくわからず、民間のプログラミング研修を受講し、javaを習う。始めて3日で「ワイがやりたいのはこれじゃないんや・・・」と気付き、その後独学でデザインを勉強。
紆余曲折を経て、美大を目指した3年間の努力と根性を高く評価してくれたはやかわデザ部にWebデザイナーとして雇ってもらえることに。

得意なデザイン、苦手なデザイン：
バナーのデザインは比較的得意。
アイキャッチなど、ビジュアルを作るのがどうにも苦手。

趣味：
・ゲーム
・異世界転生系の漫画で現実逃避すること

過去作品：

経歴：
趣味のWebサイト制作経験を活かし、事務職から人材派遣業向けコンサルティング会社のWEBデザイナーに転職するも、その会社は倒産。
その後スマホアプリ制作のベンチャー企業（超絶ブラック！）、アニメ・ゲーム関連グッズ販売の会社のWebデザイナーを経て、はやかわデザ部へ。
Webザイナーとして最も長い経験を持ち、修羅場をくぐってきている猛者。

得意なデザイン、苦手なデザイン：
アニメ・ゲーム系のデザイン（可愛い女の子のキャラがいるとなお嬉しい）、昔ながらのごちゃっとしたデザインの方が得意です。
センスが光るオシャレなデザインは苦手……。

趣味：
・ライブ参戦
・ゲーム
・筋トレ（を頑張りたいです）

過去作品：

経歴：
高校、大学と工業デザインを専攻。グラフィックデザインに関心を持ち、新卒で現在の会社に入社しWEBデザイナーとして勤務。
メキメキと頭角を現し、はやかわデザ部の中心人物に。
そのデザイン力は大企業からも高い評価を獲得。別格の腕を持つ敏腕Webデザイナーとして部を引っ張っている。

得意なデザイン、苦手なデザイン：
情報の多いものを整理したり、比較的シンプルなデザインの方が得意です。
苦手なのは、Youtubeのサムネイルのようなパワフルでキャッチ力の強いものでしょうか。

趣味：
・ゲーム
・イラスト制作
（忙しさにかまけて最近はだいぶ無趣味の人と化しています…）

過去作品：

制作課題＆完成バナー

今回バナーを制作にあたり、設定した課題は以下の通りです。

【化粧水通販の広告バナー】
◇メインキャッチ：乾燥に負けない肌へ。本格エイジングケア
◇その他文言：
・美容成分92%配合
・着色料・合成香料 無添加
◇バナーサイズ：300x250px
◇ファイル形式：PNGまたはJPEG
◇素材について：
　提供画像は商品イメージ（ダミー）のみです。※使用は任意です。
　その他に必要な素材については各自素材サイト等から探してください。
◇要望：「価格帯に合わせ、高級感のあるデザインを希望します」
◇制作時間：2～3時間前後

そしてこちらが完成版のバナーです！

▽みねたろの完成バナー

▽あめぞうの完成バナー

▽吉田リーダーの完成バナー

300×250pxというベーシックなバナーサイズということもあり、似た感じになるのでは？と思っていましたが、心配する必要はありませんでした。

実際に出てきたバナーデザインを見ると、それぞれ個性が出ていて
同じ課題でもデザイナーによって捉え方が全く異なる事が一目瞭然です。

それでは、はやかわデザ部によるバナー作成プロセス、フィードバックの様子を是非ご覧ください。

1-1.みねたろのバナー作成プロセス

①意気込み

みねたろです。みなさんのお役に立てるよう頑張ります！

②デザインを始める前に

今回は「アンチエイジング効果のある化粧品のPRバナー」「価格帯に合わせた高級感のあるデザイン」以外の情報がないので、こちらでターゲットユーザーを想定し、デザインを作ります。

私はそもそもアンチエイジングの知識があまりなかったので、まずはアンチエイジングとは何か？を調べるところからスタートしました。

調べながら「早い人は20代から使い始めるのか・・・なかなか年齢層が広そうだな」「ほうほう保湿が大事なのか・・・じゃあ潤いをアピールしよう」などと情報を整理し、自分なりにデザインの方向性を決めていきます。

今回は下記のような感じでいこうと方向性を決定！
・女性向け。人物の写真を採用する場合は、30代~40代の女性を採用。
・高級感を出すため、グラデーションや重めの配色。シルクっぽいツヤ感があると良いかも。
・商品が白（透明）なので、透明な商品の扱いの参考になるデザインを探す
・うるおい感も出す

③ベンチマーク調査

Pintarestで参考になりそうなデザインをサクサク集めていきます。

今回は、「高級感のあるデザイン」
「深い赤と金色を使った高級感のあるデザイン」
「潤いの表現」
「透明ボトルの扱い」
「化粧品のデザイン」
など、条件を満たすものをピックアップし、イラレにペタペタ貼っていきます。

④文字組の作成

思いつく文字組のパターンをいくつかざっくり作ります。

一番目のデザインは商品が小さくなってしまうのが気になったので没。

三番目は人物メインなのですが、一般の人だとちょっと弱い。。。（ごめんなさい！）

今回は二番目の案で一番しっくりきたので採用！
二番目の案で文字組をもう少し整えます。

⑤装飾・仕上げ

文字組みをもとにデザインをつけていきます。
高級感と潤いを意識して作りました。

大体できたら、一度保存して、他のバナー（参考にした画像など）と見比べてみます。

ちょっと華やかさとまとまりが弱いかな？と感じたので、文字色を変更したり、装飾も少し増やしたりと全体を調整しました。

⑥完成

ひとまずできたのでこれで提出します！

1-2.みねたろのバナープレゼン＆フィードバック

みねたろのプレゼン：
エイジングケアとはなんぞや？と思い調べたのですが、とにかく保湿だ！と書いてあったので水の表現を取り入れました。
SK-IIのイメージでエイジングケアは赤のイメージでした。
いつも文字をばーんと大きく入れるのですが、おしゃれ感を出したくて要素の大きさを控えめにしています。

メンバーからのフィードバック

吉田リーダー：
グラデーションで光沢感のある赤は高級感があっていいですね！
逆に、ここまで高級感を出すのであれば、「今すぐチェック！」は無くていいかも？ロゴを入れるくらいのほうが違和感無かったかもしれません。
要素としてのブランディングみたいなものはとても良いものになっているなと思いました。
ただ、平坦な配置になっているので、少しリズムをくずすような部分が合っても良かったかもしれません。ここまでクオリティがでているので、一か所”はずす”ような部分があればさらにかっこよくなりそうです。
あと、細かい部分ですが、バナーサイズの割に水のエフェクトが少し細かい感じがします。

あめぞう：
ぱっと見、すごくクオリティ高くてかっこいいバナーだなって印象でした。
この構成で私は上手くいかなかったので、こんなに美しくなっているのがびっくりです。
赤は意外でしたが潤い感、高級感の両方が出ているのがすごいなって思いました。
でも「本格エイジングケア」の文字がちょっと小さい？気がするんですが、あんまり大きくしても安っぽくなってしまいそうですし、このバランスでとても上手くまとまっているのでどうなんでしょう・・・？う～ん・・・判断が難しいですね。

修正・完成版（Designed by みねたろ）

動きがある部分があっても良いとのことでしたので、メインキャッチ部分に少しリズムをつけました。

また、「今すぐチェック！」の部分をロゴに変更しました。

背景の水泡が細かすぎるのではとのご指摘があったので、そこも微調整。ついでに自分で気になった部分も調整しました。

フィードバックを受ける前はドキドキしますが、自分で気付かなかった部分に気付けるので、フィードバックをもらうことは大事だなと常々思います。

――― Attention! ―――

以下では、あめぞう・吉田リーダーのバナー作成プロセス＆フィードバックを紹介しています。デザイナーごとに異なるデザインへのアプローチ方法をぜひチェックして頂ければ嬉しいです！

また、はやデザではココナラでもデザインのフィードバックサービスを行っております。

こちらではバナー・アイキャッチ画像・Webサイト・LPの添削を承ります。
現在、期間限定価格となっておりますので是非チェックしてみてください。