chouchou

未経験からWEBデザイナーを目指すfuyu_naのブログ

#バナーお題 Vol.2 に挑戦してみた

 

f:id:ne-ochi:20181112001138p:image 

10月末に挑戦した「 #バナーお題 」
第2回目の課題発表があったので、前回に引き続き挑戦してみました。 
 

「#バナーお題」とは?

twitter上でこばやす📙独学Webデザイナー (@kobayas_s)さんがバナーのお題を出してくれて、そのお題に沿って各々がバナーを作って発表する企画です。
 

#バナーお題 に参加するメリット

#バナーお題 のタグをつけて自分の作品を公開すると、他の方々からの感想やアドバイスが頂けるので、個人的にとっても好きな企画です。

また他の方が作ったバナーも見れるので、同じ課題でもそれぞれ個性が出ていて面白いですし、かなり参考になります。
 

参加資格

参加資格は特になし。デザイナーを目指して勉強している人や、現役のデザイナーの方などいろんな方が参加されてます。
 

第2回目となる今回の課題

情報量が前回より多く難易度が高くなっています。

f:id:ne-ochi:20181112001133p:image

 

今回作ったバナーについて

以下、今回私が作ったバナーについて説明していきます。

f:id:ne-ochi:20181112001114p:image

Time:おそらく3時間ぐらい
  (何日かの隙間時間でちょこちょこやってたので詳細不明)
Tool:Photoshop
 

コンセプト

私のまわりの30−40代の方々って結構若いイメージがあって、彼女が「温泉行こうよ!」って彼氏さんを誘うことも珍しくないと思うんですね。だから全体的に女性向けのかわいらしいデザインにして、明るいイメージだけど子供っぽくなり過ぎないような配色やフォント、余白の使い方を心がけました。
 

まずは写真選びから

最初から「明るいイメージ」にすることがなんとなく決まっていたので、イメージに合う写真探しから始めました。「絶景」とか写真映えする場所はターゲットの年齢層にも人気があると思ったので、まずは富士山らしき山の写真をGET。(加工前はおひとり様がお風呂に入ってます)
 

f:id:ne-ochi:20181112001123j:image

 
続いてカップル向けのバナーというお題だったので、男女2人が仲良さげに温泉に入っている画像をGET。
 

f:id:ne-ochi:20181112001119j:image

 
しかし、このままでは2人が富士山に背中を向けた形になってしまうので、画像を反転させてサイズや色味も調整、最初に温泉に入っていた人を消しました。
 

f:id:ne-ochi:20181112001127p:image

 
こんな感じで先ほどの絶景が見える温泉へ2人に入ってもらいました。よくみるとここはかなり手抜き加工なことがバレちゃうのでお恥ずかしいです。
これだけじゃ寂しいので、「絶景」のワードを入れた文字を入れました。文字の可読性を良くするためにはドロップシャドウを使用。
 
「バナー作成のコツ」についてネットで検索すると、写真より文字を組んで、その後モノクロでレイアウトして…っていう手順で紹介されていることが多いのですが、私は紙にラフを描いて全体のイメージを最初に作ってからPC作業に取り掛かるので、PCでは配色や印象を大きく左右する写真探しから始めてます。
 

配色について

配色は女性向けにするためにピンクや黄色のかわいらしい色を使いつつ、派手になったり子供っぽくなったりし過ぎないよう、あたたかみを含んだトーンの暗い青やグレーを使いました。いきなり新しい色を入れると浮いてしまうので、色は写真の中からスポイトツールで抽出しました。
 
ピンクは「WEB」関連の強調したい部分に使用。また全体の中で最も目立つピンク色の部分を視線で追っていくとバナーの左上から右下へと視線誘導できるよう工夫しました。
 
黄色は3大特典の「3」を強調するのに使ったので、各特典の番号を示すアイコンも黄色で統一しました。黄色の色は背景の青と合うように、青を抽出した山の写真から同様にスポイトツールで抽出しました。 
 

「3大特典」の枠の中は和紙のテクスチャを使用

今回悩んだ部分の一つ、各特典の枠の中の色です。白にするとなんとなくぼてっとしたつまらない印象になって、だからと言って他の色を使うとごちゃごちゃしてまとまりが無くなってしまう。そこで活躍してくれたのが、金箔入りの和紙のテクスチャでした。温泉旅館の和風のイメージも取り入れつつ、主張しすぎずに背景とメリハリがついたので、これで落ち着きました。
 

「1泊2食…12,000円〜」の部分

ここも悩みました。まずお値段はそんなに強調しなくても良いかなと思ったので、文字は小さめに。全て白文字だと単調になるので、「1泊2食付」は白で背景にしてみました。そして上端のラインですが、これは直線にすると全体的に「線」が多いデザインになってしまいそうだったので、点線にして柔らかさを出しました。文字の色も同じですが、不透明度100%の白にするとコントラストが強過ぎたので、不透明度90%にすると良い感じに馴染んでくれました。
 

今回の感想

今回の第2弾はお題が出ているのに気づくのが遅かったため、オリジナルのものを作る前に他の方が作ったバナーを見てしまいました。他の方々の作品は和風で大人っぽくて、とても素敵なものが多かったです。ただ私が思う30〜40代のイメージとは少し違っていたので、人によってターゲットのイメージも違うということを学びました。 
また和風の素敵なバナーを見れば見るほど、無性に「全く違うものを作りたい!」という気持ちが強くなることにも気づきました。
 
前回よりも情報量が多く、レイアウトやメリハリのつけ方に悩みましたが、結果的に70%ぐらいは納得のいくものになりました。まだまだ直したいところはありますが、今回はこれで完成とし、反省点はまた次に活かしていきたいと思います!
 

最後に

今回は #バナーお題 vol.2 で作ったバナーのデザインについて紹介しました。
実際に1から作ってみると考えることがたくさんあって、とても勉強になります。
さらにアドバイスも頂けて、自分の実力の確認もできる本当に素晴らしい企画だと思うので、今後も新しいお題が出たら挑戦していきたいと思います。
 

▽第1回バナーお題の記事