こんにちは、走るとり（@hashirutori00）といいます。
現在、都内でWebデザイナーとして働いています。
今回は、僕がWebデザイナーに成り立てのときにチャレンジしていた「バナーお題」に一年振りに挑戦してみました。
ただバナーを作り直すだけではつまらないと思ったので、頭の中で「実際に仕事を振られたらこんな感じだろう」という妄想を膨らませながら制作してみました。
以下、妄想を展開しながらバナーを制作していきます。
Contents
季節は冬。午後イチ、ディレクターからバナー依頼が来る
ディレクター→デザイナー：依頼編
ディレクター（デ）「とりくんさ、ちょっとバナー作ってもらってもいいかな？」
走るとり（鳥）「はい、大丈夫ですよ。どんなバナーですか？」
デ「チョコレートをメインで売ってる会社の自社ECを今度まかされることになってさ。その中のバナーなんだよね」
鳥「へぇー、チョコレートですか。冬の季節はチョコ売れるんですか」
デ「うん、なんか売れるみたいよ。でね、ざっくりしたバナーのイメージはこんな感じね」
😆ゆる募バナー課題
コンセプト👉冬限定一口チョコ。普段高いが今だけ割引価格
キャッチコピー👉ちょっと一息。贅沢をお裾分け
期間👉11/◯〜12/◯まで
ターゲット👉20〜40代の働く男女
イメージカラー👉白、水色
バナーサイズ👉W300×H280px
誰でも参加OK!#バナーお題 を付けて投稿してね✨
— こばやす🍡現場のWebデザイナー (@kobayas_s) October 28, 2018
鳥「はいはい（どこかで見たような…）」
デザイナー→ディレクターへ：ヒアリング編
デ「なんか聞きたいこととかある？」
鳥「えーと、このバナーってどこに配置されますか？」
デ「そうだね、ECサイトのこのあたりかな」
鳥「なるほど。じゃあ他のバナーとかページのトンマナ合わせていかないとですね」
デ「そうだね、だからあんまりポップな感じだったり装飾とかはそんなに要らないかもね」
鳥「わかりました。商品画像とかは先方からもらってたりしますか？」
デ「いや、それがないんだよね」
鳥「エッッッッ、商品画像ないんですか」
デ「そう、ないんだよ」
鳥「じゃあページ内に使っている商品画像を適当に使ってもよかったりします？」
デ「いやぁそれがセール対象商品か分からないから、なんとも…」
鳥「つまり…」
デ「とりあえずフリー素材でまず作ってみてよ。先方確認入れるからさ」
鳥「それでいいんすかw」
デ「あそこしっかりしてそうに見えて担当かなり適当みたいよw まぁ探り探りだろうね」
鳥「わかりました。Unsplashあたりで良さそうなの探して入れてみます」
デ「他にはなんかある？」
鳥「これってPC用ですかね。あとでサイズ展開は必要ですか？」
デ「いや今回はこのサイズだけでいいよ」
鳥「わかりました。いつ頃までにバナー出来上がってたらいいですか？」
デ「なる早で…16時には欲しいんだよね。先方が今日チェックしたいらしくて」
鳥「めちゃくちゃ急じゃないですか…今が14時だからまぁ大丈夫ですかね（タスク空いててよかった）。15時くらいにはいったん見せますね」
デ「よろしく！」
デザイナーがバナー制作に取り掛かるとき
ここからは一人でもくもくとバナーを作っていきます（妄想しながら）。
情報収集
まずバナーが設置されるページのトンマナを確認しよう。
なんかピエール・エルメのサイトに似てるなぁ。他にもゴディバとか、高級チョコ扱ってそうないくつかサイトを見てみよう。
あと一応、「高級チョコ バナー」とかで検索しておこう。あとで社内共有したいからPinterestでピン立てとこうか。
要素を精査
300×280pxって意外と小さいからあんまり詰め込まないようにしよう。だから「一口チョコ」も「普段高い」っていうのも要素としては入れない。
そもそもチョコは一口で食べるものが多いよなぁ。
「普段高いが今だけ割引」っていわゆるSALEということだよな。「普段高い」ってわざわざうたう必要はないか。
期限とSALEという文字さえあれば、期間限定って分かるよね。
ターゲット
ターゲット指定されているけど、そもそもこのサイトに入ってくる人たちが、サイト内でバナーを踏むわけだから、サイトにトンマナ合わせること自体が必然的にターゲット合わせるってことになりそう。
バナー内にCTAの要素はあえて入れない方が高級感が損なわれないで済みそう。というか普段入れるの面倒なんだよなアレ。
↓こういうの
30分後、俯瞰（ふかん）して見る
できた！
あ、冬の要素がなかった…。
部分的にイラストを入れるか迷う
よ、よし…イラストACから雪の結晶探して入れればそれっぽくなるだろう。
…うーむ、どうにもハマらない。なんか雪の結晶って画数が多いと野暮ったく見えるし、画数少ないと急にポップに見えてくるから取り扱い難しいな。いっそ入れない方がバナー的には無難か。
冬の要素、どこに入れようかな。あ、いっそWinter Saleを表記したらいいか。
まぁそもそも12月にSALEって打ち出されてたら、普通にWinter Saleに変換されるわけだけども。とりあえずディレクターの指示に添いつつ、デザインを調整して…。
完成したバナーをディレクターに送る
鳥「なんだかんだ50分もかかってしまった…よし、ディレクターさんに送ろう」
（チャットで）「バナーを作成しました。ご確認をお願いいたします」
・・・
鳥「いま、バナーを送りました。どんな感じでしょうか？」
デ「うん、いいんじゃないかな」
鳥「なんか思いの外シンプルに作ってしまったような気がするんですが…」
デ「まぁ確かにシンプルだけど、ページのトンマナ見る限りはこんな感じだと思うよ。一回クライアントに提出してみるから、あとで修正入るかもね」
鳥「ですかね、では一旦よろしくお願いします」
デ「はいはい〜」
というわけで完成したバナーがこちら
デザイナー二年目の走るとり君がディレクターに提出したバナーがこちらです。
僕のできうる限りの妄想を繰り広げて作ってみました。EC内のバナーという設定など、現在いろんな方が公開されているバナーお題のテイストとは少し異なる仕上がりになりました。
なんていうか派手さとか装飾は一切ないけど、たしかにこういうバナーはサイト内でよく見かけるなと思います。
今回は「ピエール・エルメ」の特集ページに置かれたらどうかを想像しながら作りました。
そもそも写真ありきなところは強いかもしれませんが、バナーが置かれてそうな雰囲気が出てたらいいなと思います。
ディレクターに見せて完成というわけではなく、先方からのOKが出て初めて完成になるので、持論として「いつも修正は必ず来るもの」と考えは心に秘めています。
もしかしたらここからひっくり返って、「雪の結晶を入れて欲しい」「リボンを足して欲しい」と言われる可能性もあることは覚悟しておきます。
一年前のバナーお題と比較すると
ちなみに一年前のバナーと比較するとこんな感じです。だいぶシンプルになりました。
一年前のバナーを見て、とくに目についたのが
・雪の結晶が模様なのか何なのか視認できない
・チョコの画像が小さくて見づらい
・「贅沢」をぜいたくに使いすぎ
だと思いました。これらはバナーサイズを意識できていなかったからだと思います。
今回のバナーに特別な効果や機能を使ったかといえば、白フチに薄くドロップシャドウをつけたくらいで、むしろ一年前の方がいろいろと試して使っていたような気がします。
あとはやっぱり、一年前はどこに配置されるかは考えてはいませんでした。一年前と一年後の大きなギャップはここだと思います。
バナー制作で学んだこと
一年間で無数のバナーを作ってきました。今回のようなスッキリしたバナーからコッテリしたバナーなど、さまざまです。
どのバナーをつくるときにも、「誰に・何を・どこに・どのように」が重要だよと教えられました。
とくにバナーの配置先はディレクターが指示してくれなかったら聞きにいってねと念を押されたこともあります。
バナー単体で見てグラフィックデザインもめちゃくちゃすごくて、これはもう最高レベルのバナーだ！誰も作れないぞ！と思っていても、ページ全体で見たらめちゃくちゃ浮いてる…なんてことは避けないといけません。
CTAのデザインが、矢印が全部「＞」で統一されているのに、一箇所だけ「▶︎」になっているとか、たまに見ます。全体を見るってとても大事。
Pinterestで出てくるバナーたちはどれも魅力的で、ついつい100%それに近づけたくなるんですが、「現行ページとトンマナあってますか？」っていつも自分に「？」を突き立ててます。
バナーお題のミソ
一年ぶりにバナーお題をやってみて、脳内設定を凝らすことで楽しく取り組むことができました。あらためてバナーお題のミソは、どこに配置されるのかを想像してつくるところかなと思いました。
バナーお題は初学者にとって、自分の作品を世に出すいいきっかけになると思います。僕もそこから始めていたよなと思い出しました。
そして今更ながらバナーお題は、さらに一歩踏み込んで実際にプロにレビューしてもらった方がいいです。
Twitterのリプ欄だと、ほとんどの人がレビューをしたがらないものなので、いっそのことDMを送りつけるほどの強引さがあってもいいと思います。
…って一年前の僕にも言いたい（遠い目）
バナーをTwitterで投稿して、いいねをもらえてうれしい！で終わっていました。ここが本当にもったいなかったなと思います。初学者なのに満足してたらその先がありません。
漠然と今のままではダメだと思っていても、何がダメなのかを自分で分析するのは難しいです。やっぱり知っている人に聞くのが一番早いです。
そんなことを思い返しながら一年ぶりにお題バナーをやってみました。
綺麗さやグラフィックの練習を求めて、いろいろ装飾や効果を使ってみるのも良いかと思いますが、
置く場所によって同じ要素でもバナーデザインはがらりと変わってくるはずなので、「このバナーはどこに置かれるのか？」を意識してお題に挑戦してみてはいかがでしょうか。
それではまた！
