バレンタインはトリュフチョコを量産して、そのうち一つにキムチを混入。
部活仲間に同時に食べてもらう「ロシアンルーレットチョコ」を作っていました、きりんたんです。
いろいろと工夫をして自分だけはどれがキムチトリュフか見分けられるようにするんですよ。結構大変ですが楽しいのでおすすめです。
あと、トリュフチョコはココアをまぶしてもおいしいですが、ミロをまぶすのもおいしくておすすめです。シャリシャリ。
さてさて、きりんたんはイラストレーター兼デザイナーという肩書きで現在お仕事をしています。
とはいえまだまだ実践が足りていない状況。
お勉強のため、先月「モモンガオンラインサロン」というサロンに参加させていただきました。
【新規募集開始！！】
私が運営している #駆け出しデザイナー #フリーランスデザイナー 向け
オンラインサロンの新規募集開始しました🙆♂️・今回の募集は定員50名までです👏
・YouTubeでも内容確認できます。#モモンガオンラインサロン▼参加URLhttps://t.co/fTzftpVhRO pic.twitter.com/DT7T4z5GYC
— ほーりー@ﾓﾓﾝｶﾞｵﾝﾗｲﾝｻﾛﾝ運営 (@YHorikami) January 4, 2020
その中でバナー制作の先生として参加してくださっている佐藤葦汰さんから「バレンタインバナー広告」の課題が出ていました。
バレンタインは作りやすくてよいわ#バナー #ポートフォリオ pic.twitter.com/rDi3JXZQL8
— 佐藤 葦汰 (@ashita_93) January 16, 2020
ずっとやってみたいな～と思っていたバナー制作。
バナー模写とかサイズ展開練習とかするのが一般的な流れらしいのですが、ダメ人間なので模写にはなかなかテンションが上がらず着手できていなかったんですよね。
いい機会だし、一発当たって砕けるか～！！
目次
依頼内容を整理
今回はバレンタインデーにあわせ、チョコの売り上げを伸ばしたい。男性の購入者も増やしたい！というご希望の依頼主さん（仮）のようです。
対象者は10～30代男性（ピンポイントの年代でも可）、バナーの遷移先は男性ターゲットのチョコレート販売特設サイト。
ロゴマークが用意されているので、それをどこかに配置してほしいとのこと。
サイズは600×500pxです。これを踏まえて考えていきます。
ペルソナを設定する
こういったデザインをするときは「ペルソナ」を設定するのが大切なのだそう。これは何かで読んで知ってた。
ペルソナとは、企業や商品の典型的なターゲットとなる顧客像のことです。ペルソナで定められる顧客像には、氏名や年齢、居住地、職業、年齢、価値観やライフスタイル、身体的特徴までのかなり細かい情報が盛り込まれます。
（ferret）
できる限り詳細に設定した方が良いと聞いたので、きりんたんはこんな感じで設定しました。
10代の男子高校生
少しおとなしい方ではあるが、学校では男女ともそれなりに仲良くしている普通の男子
少女漫画含めそこそこ漫画読む
鬼滅の刃とか好き～って感じのちょいミーハー（きりんたん鬼滅の刃知らんけど…）
とりあえず流行乗っとけタイプ
同じクラスの女子のことが好きだが、その女子もそこそこ人付き合いが良いため漠然と「誰かが先に告白してしまうかも」という不安を感じている
あと一歩告白する勇気が足りない
というわけで「青春真っ只中の男子に逆チョコを勧める」方向で行きたいと思います。
バナーに入れる情報をピックアップ
まずは、何を画面に入れるのかピックアップします。
絶対に外せないのが
- 「ここを押せばチョコ探せるよ！」という文字または記号
- チョコをあげようと思わせるキャッチコピー
- チョコの写真
- 指定ロゴ
あたりでしょうか…。
めっちゃ個人的な考えではありますが、文字ってどうしても頭を使って処理する情報になってしまうので「気軽に押してほしい」という（きりんたんの）希望を考えると「バレンタイン」などの文字は入れずに必要最小限の文字数でいきたいな…と考えました。
キャッチコピーを考える
コピーライトはあまり勉強できていないのでめっちゃ焦ったところです。
ぱっと頭に浮かんだのは「逆チョコで差をつけろ」ですね。
ペルソナが他の男に先を越されたらどうしようと悩んでいるものですから…差をつけさせようかと…
でもこの高圧的な言葉尻ってどうなのかな～なんて思ったり。
「キミからのチョコ、待ってるかも。」とかも青春ぽくていいかなとか。でもインパクトないよな～
結局インパクト重視で「逆チョコで差をつけろ！」にしました。
レイアウトする
紙の上で作業していきます。
デザインは、構想段階は紙の上で作業した方がいいって言いますよね～
何でなのかよく分からないですがきりんたんも体感としてそう思います。すごくアイデアも出しやすくてやりやすい。
今回はこの時点でだいぶ「こうしたいな～」というイメージが固まっていたので1パターンしか描いていないですが、提案時はいくつか描けないといけないですね。練習あるのみ。
文字はぱっと目に入るように、インパクトも与えられるようにと大きく見切れさせます。
「逆」が大事かな～と思いちょっと斜めらせてアクセントに。
また、「差」の下の棒を伸ばしてハートを射止めさせます。
親しみやすさの演出や、漫画をそこそこ読むペルソナにあわせて、女の子は写真ではなくイラストにしようと考えました。
チョコの写真は、背景に少し包装紙を剥いた板チョコを配置してバナー全体が板チョコに見えるようにしたいな～と考えていました。ラフに描いてないけど。
絵を描く
手持ちの絵の中にこれに合うような絵はなかったので、描き下ろします。
使用ツールはCLIP STUDIO PAINT PRO 
。
いつも通り描いても良かったんですが、2年に1回くらい来る「ミュシャ的な髪の毛描きたい欲」が来ていたのでそんな感じで描きました。
いつも通りだとアニメ調・萌え絵調になってしまうのもあって、オタクではない男子高校生に訴求するにはちょっと違うかな～と思ったというのも理由の一つです。ミュシャならみんな好きでしょ。
色塗り楽になるかな～と思ったんですけどこれだけ線画が大変だと何の意味もないですね。
Illustratorで配置する
お待ちかね（かどうかは知らないけど）Illustratorでの作業です。
どうやらバナー制作は画像処理の工程が多いのでPhotoshopベースで作る人が多いと聞いたのですが、きりんたんはどうしてもIllustratorの文字タッチツールその他諸々が好きなのでIllustratorベースでいきます。
とりあえずイメージ通りイラストとキャッチコピー、ロゴ、誘導文・ボタンマークを配置。
さて「差」でハート打ち抜くぞ～～
…と思ったのですが、普通にそんなスペースない。女の子の顔にかぶってるわ。
やめました。そんなに重要な表現でもないですしね。「女の子が喜んでいる顔」は個人的に必須だと思っていたので外せませんでした。
ちなみに「距離が縮まる」という意味も込めて女の子は見切れるほど大きく配置しています。
で、背景に板チョコもしいたのですがこちらも普通にうるさかったのでやめました。
挿入する写真はPhotoshopで加工
使用するチョコの写真はフリー写真を取り扱っているPixabayからお借りしました。
で、これをチョコだけ切り取ります。
この作業はPhotoshopに移動して行います。
奥が明るくてちょっと使いづらかったので、茶色のグラデーション（乗算）をかけました。
色味の調整
文字で「バレンタイン」を入れなかったので、色などの感覚的なところからバレンタインを感じさせたいところです。
まあバレンタイン関係なくチョコ買ってくれたらそれはそれでいいんですが、今回は逆チョコを勧めるバナーにしていきたいのでバレンタインを感じられるようにしたいと思います。
バレンタインの色と言えば、「茶色」「ピンク」「赤」かな～と思います。
バレンタインの広告を見ると、高確率でこの3色がメインカラーになっているのではないでしょうか。
最終的には、恋の始まり、わくわく感を目指してピンク背景にしました。
「差をつけろ！」という闘志をあおるキャッチコピーがあるので赤背景もいいかなと思ったのですが、ちょっとイラストとチョコが目に入りづらくなるかなと感じたのでやめました。
下段の帯は、まとまり重視にすると茶色が良かったのですが…画面が暗い感じというか、まとまり感から来る落ち着いた雰囲気が前に出てしまったように感じたので、最終的に金（のように見えなくもない）色にして「明るくは感じるが軽く感じすぎない」ラインを目指しました。
「チョコ」の文字はチョコの写真とリンクさせるため、チョコの写真の一部から抽出した色で着色していきます。
完成
そんなこんなで完成です。
本当はあまりベタ塗りの背景が好きじゃなくて、う～～～～～～っすらグラデーションをかけたりするのですが、今回は画面内にあるモチーフがひしめき合っていてうるさかったので断念したり。
イラストの色味や効果の度合いを調整したり。そんなこともしております。
とりあえず初めてやってみた感想は、めっちゃ難しい。
小さい画面に伝えたい情報を効果的に配置するってめちゃくちゃ難しいんですね…。
今回はイラストの圧ですべてねじ伏せた感も否めないので、また改めて別のお題にも挑戦したいです。
あと今回のバナーのサイズ展開もしたい！やること盛りだくさん！
もしアドバイスなどありましたらこのブログのコメントやTwitterでもいいので教えてください。喜びます。
ではでは！
