こんにちは、走るとり（@hashirutori00）といいます。
TwitterでSAYOさん（@345_lps）が公開していた『#デザインお題』にチャレンジしてみました。
前回作成したこばやすさん（@kobayas_s）の『#バナーお題』の記事を踏襲して、今回も実務でバナー制作が来たことを想定して作成してみました。
Contents
ディレクターからのバナー制作依頼（茶番）
ディレクター（デ）「とりくんさ、ちょっとバナー作ってもらってもいいかな？」
走るとり（鳥）「はい、大丈夫ですよ。どんなバナーですか？」
デ「今回はオンラインで受講できるヨガスタジオのバナーだね」
鳥「最近流行ってますよね」
デ「お、とりくんもオンラインでヨガとかやってるの？」
鳥「いえ、綺麗な女性をYouTubeで見ているだけです」
デ「・・・」
鳥「・・・」
デザインお題の概要
【必要情報】
◇店舗名：ヨガスタジオ「Liliy」（リリー）
◇文言：
①オンラインレッスン受付中！
②入会金 手数料0円
（※意味が伝われば 言い回しは変えてもOK）
◇サイズ：1080×1080px
◇ターゲット：正月太りが気になる社会人女性
◇デザインテイスト：女性らしく華やかなイメージで
日付やターゲットに刺さるような訴求文など、ご自身で考えた情報を追加してもOK
デ「バナーの概要はこれね。真面目に作ってね」
鳥「（急に当たりが強…）承知しました。」
バナー作成前の事前準備
バナーが設置される場所を確認する
今回は1080 × 1080pxというサイズから、Facebook広告のサイズだと想定して作成します。
（同じサイズの広告ではTwitterやInstagramもあります。各SNSでターゲットが変わると思うので注意が必要です。）
また今回のヨガ教室のバナーを作るとき、一番意識をしたのは
どうやったら受講したくなるか
です。この視点でさらにターゲットなどを深堀りしていきます。
ターゲットを明確にする
この辺りは直接ディレクターかクライアントから聞きたいところですが、今回は自問自答をしてターゲットを明確にしていきます。
デザインお題のターゲットやデザインテイストを見て、このバナーはどんな人に届けなければいけないのかを考えます。（下記はあくまで仮定です）
正月太りを解消したい人とは
・普段運動をしていない人（だから正月に太る）
・今までヨガをやったことがない人
・ヨガに憧れがある人
・やったことがあるが挫折した人
ヨガをやらない人の理由とは
・ヨガ用品の用意が面倒、お金がかかる
・ウェアなどおしゃれなものを用意しないと周囲の人にダサいと思われてしまう
・通っていた教室がハードすぎて挫折してしまった
・なんとなくハードルが高い
オンラインでヨガを受けるメリットとは
・教室にわざわざ通う必要がない
・ライブで講師と繋がれる手軽さがある
・ライブでも録画でも授業が受けられる（と想定）
・ライブ授業でなければスッピンのままでも受けられる
・必要以上に身なりに気をつけなくていい
上記内容を踏まえてバナーに入れる要素とは
・初心者でもとっつきやすく
・オフラインよりオンラインでのメリットを打ち出す
・難易度の高くないヨガポーズで初心者に訴求
・ユーザーの悩みを打ち消すキーワードを入れる
・私にもできるかもと思ってもらいたい
競合サイト
などといった内容を、僕はざっくりメモ帳に入れて試行錯誤しています。（ブログでは清書しています）
また今回は完全に無視していますが、過去にはFacebookのバナールールがあったりもしました。（バナー内のテキストが20%以上を占めているとペナルティが課されてしまうルール）
現在では撤廃されたとささやかれていますが、バナー内のテキストの割合はなるべく減らすことをFacebookは推奨しているようです。
参考：【最新アップデート】Facebook広告の20％ルールがついに撤廃!?
Webで画像収集
ピンタレストやGoogle画像検索を使ってイメージを固めていきます。
Google検索
検索キーワードのサジェストもチェック
検索上位のサイトは複数タブでガンガン開く
画像もサイトも思いつくかぎりのキーワードで検索してみます。
「ヨガ オンライン」
「ヨガ オンライン バナー」
「Facebook広告」
「Facebook バナー」
「正月太り 運動」
などなど、検索して画像をひたすら見続けることで、脳内のインスピレーションを沸かせます。
実践編：バナーを作成していく
ある程度の事前準備を済ませたら、いよいよPhotoshopを起動してバナーを作成していきます。
アートボードを用意して、要素をアートボード外に貼り付ける。
画面を行ったり来たりするのが面倒なので、重くならない程度にアートボード外に要素を貼っていきます。
写真素材の用意
先方からの画像提供がなければO-DAN、写真ACなどから
「ヨガ 部屋」
「ヨガ オンライン」
で検索します。
有料素材の購入が可能（先方に請求が出せる）のであれば、PIXTAやShutterstockから検索します。
PIXTA: 写真素材・ストックフォト | 日本最大級の画像素材サイト
Shutterstock: 画像・写真・ベクター画像・動画・音楽素材
いいなと思った画像をアートボード外にどんどん貼り付けていきます。
ちなみにこの段階ではまだダウンロードはせず、画面上のコピペだけに留めています。
こうすることでダウンロードをする時間を短縮できるし、何より写真ACって無料ユーザーはダウンロード制限あるじゃないすか…
その中から今回のテーマに合っていそうな写真を選び、アートボードに設置。
さらに文字も配置していきます。
今回ディレクターから文言指定もなく、半ばデザイナーに丸投げし信頼を置いてまかせてくれたと想定して、キャッチコピーも考えながら配置していきます。
SNS広告なので、#をつけたハッシュタグにしてみようとしています。
〜小話〜
最後に写真ACからダウンロードしようとしたところ、まさかのSサイズまでが無料、Mサイズ以上が有料だ、と…。
完成間近でSサイズだとサイズが足りず、Mサイズだと有料ということが判明しました。
「とりあえず購入してもらえるかもしれないし、Sサイズを少し引き伸ばして一案作ろう」
ということで作成してみました。事前準備ホントウ二ダイジデス。
バナー完成
第1案
画像サイズが足りていないので、ほかの画像を使って作成してみました。
第2案
色味は写真に合わせて、華やかさは失わないように。
ただしこのポーズだと、「ヨガっぽさ」があまり伝わらないので、さらにもう一案作成。
第3案
綺麗にまとまった感があります。ポーズが若干、中級者用の画像になってしまったのが懸念点です。
第4案
ちなみにFacebook広告の20%ルールで作ってと言われたらこんな感じになります。
10×10マスのうち、20マス（20%）がテキストが打てる部分になりますね。
今回のはギリギリセーフかと思います。
Facebookにかかわらず、テキストルールがあるなしで文字数がぐんっと変わるので、この点は作る前に確認しておいたほうがいいでしょう。
意図して制作した点
・写真は社会人女性（20〜30代）で選定
・女性は理想像を描いて商品を購入するので、「可愛い」と「きれい目」の両方で提案
・リモート時代なので「おうちで」をキーワードにキャッチコピーも選定
・ヨガの華やかさとは、「目立つ」「強調」ではないと考え、緑や紫などの落ち着いた色を選定
・競合調査からボタニカルで路線を選定
精一杯日本語を選びましたが、言語化はすごく難しいです。
フィードバックがきそうなところ
・「ヨガ体験」のフォントが固いのではないか
・「スッピン」という単語に違和感がないか
・イラストを入れて華やかさが欲しい
このあたりは一人で悩んでいてもしょうがないので、ディレクターか先方にフィードバックをもらうか。
あとは運用していく上で、ABテストか何かで改善していく必要があると思います。
まとめ
Facebook広告になると、バナーの下に広告文が設定されるので、その内容も加味してバナーを作る必要もあります。
あとは業界調査とか、先方の持ってるサイトを踏襲する必要の有無で、もうやることなすことは無限に広がっていきます。
なのでデザインに正解はなく、運用して成果が出ることを正解としたい気持ちもあります。
所用時間は事前準備も含めると2時間程度。ものすごくいろいろなことを考えた時間でした。
デザインの言語化が苦手なので、とても有意義な時間になりました。
（ブログ執筆時間は3時間はかかってます…）
それではまた！
