前回の「バナー制作フロー＃01」では、目的とターゲット設定の大切さについてまとめました。
今回は実際に、喫茶店のオープニングスタッフ募集バナーを題材にして、色と構図の違いで印象がどう変わるかを比較していきます。
前回の記事はこちらから！
- 3人子育て中のママ
- 元飲食店勤務
- 未経験からwebデザインスクールを受講
- 卒業後はブログ運営とデザインの学びをコツコツ継続
- 末っ子が幼稚園に行ったら本格始動
- モチベーションの維持と時間術が得意です！
バナーデザイン練習！自主制作のためのお題を確認しよう
今回はバナーデザインお題の喫茶店のスタッフ募集お題を使ってチャレンジ。
| 概要 | バナー設置場所：求人広告サイト ターゲット：20〜30代の学生・主婦・フリーター 目的：新規店舗オープンに伴うアルバイト募集 イメージ：落ち着いた雰囲気と、明るいスタッフイメージ バナーサイズ：336px×280px |
| テキスト | メインコピー：「オープニングスタッフ大募集！」 サブ：「未経験OK・週2日〜・シフト制」 その他：応募期間：10月末まで CTA：「応募はこちら」 店舗名：喫茶キャロケ |
| 与えたい印象 | お洒落な喫茶店。スタッフ同士助け合える環境がある。 |
| 画像 | 店舗と、スタッフ |
| 色指定 | 指定なし |
お題を解釈して方向性を決める
今回のバナーは、設置場所が求人広告サイトです。
数ある求人広告の中から、まずは見つけてほしい！とクライアントは考えているはず。
そして、ターゲットは20～30代の学生・フリーター・主婦なので、層が広いです。
新店舗のオープンに合わせての募集なので、より多くの応募があると嬉しいですよね。
私が解釈したポイントは4つ。
- まずは応募しようと思える安心感
- 未経験でもOK！なフランク感
- 明るい雰囲気で働く楽しさを想像してもらう
- どんな求人かぱっと見で判断できることが大切！
以上のポイントを踏まえて、制作を進めていきます。
情報の優先順位を整理する
小さなバナー広告の中で、必要な情報をわかりやすく伝えるためにグルーピングをして優先順位を付けます。情報をグルーピングしながら要素を書き出して、優先順位が高いものほど大きく配置してみました。
「オープニングスタッフの募集」→「応募はこちら」という視線の流れの中にその他の要素を配置して、迷いなく情報を取得してもらいましょう。
バナーデザイン制作フロー実践編
今回もCanvaで制作します。
操作が直感的で初心者でもサクサク作業できるので、デザインを学びアウトプットするという目的のためには、とても優れているツールです！
前回の特訓記事はこちらです👇
レイアウトラフ案
まずは書き出した要素をどのようにレイアウトするか構図を考えます。
ラフ案は紙に書くことでアイデアを出しやすくなります。
紙に書いたラフをもとにざっくり配置しました。
パターン①要素を右にまとめる
情報が迷いなく視界に入ってくる構図です。
少し業務連絡感が出てしまうので、親しみ感を出すのに工夫が必要だと感じました。
パターン②要素を上から下に視線が流れるように配置する
王道スタイルかなと感じます。
この構図はあらゆるバナーで応用が利きそうです。
パターン③要素を真ん中に縦並びにする
パターン②と似ていますが、クラシカル寄りのレイアウトです。
上から下に視線が流れますが、途中の要素の印象が薄くならないように工夫が必要だと感じます。
また、視線が散らないように、写真も奥行があったり人物を減らすなどの工夫が必要だと感じます。
レイアウトを決めて要素を配置する
今回は王道スタイルのパターン②を採用します。
文字の視認性を保つことと、目に留まるデザインにするために上下に帯を敷き、額縁効果を狙います。
仕事の条件部分はアイコン化。まとめて情報が得られる工夫をしました。
応募のハードルを下げる目的で人物に合わせて吹き出しを配置し、手書き文字で語り掛けます。
色のイメージは温かみと落ち着きを意識してこんな方向性で行こうかと！
フォントを決める
読みやすさと親しみのある柔らかさを併せ持つ丸ゴシックがいいなと感じました。
メインのコピーやCTAには少し力強さが欲しいので堅苦しくないゴシック体をチョイス。
- Zen Maru Gothic
- ZEN角ゴシックNEW
この組み合わせは親和性が高いと感じます。
吹き出し部分は手書き風文字の「ふい字」を採用。
全て課金せずにCanvaで使えるフォントです。
カラーを決める
カラーは、少しくすんだカラーが落ち着きがあっていいなと感じました。
明るい雰囲気を保つために、明度は高めに設定します。
明るめのベージュやアイボリーをベースに、暖色のくすみレッド～オレンジをサブ、濃いめのブラウンで引き締める作戦です。
- メイン⇒オレンジ系のくすみベージュ(#D0BFB3)
- サブ⇒くすみレッド(#C85F51)
- アクセント⇒ダークブラウン(#756B61)
調整し、デザインの完成
全体のバランスを見ながら調節したのがこちら。
「オープニングスタッフ募集中！」
にパッと視線が誘導されます。
「大募集！」→「募集中！」にすることで、より柔らかい表現に◎
上下の帯で額縁効果＋写真の笑顔と吹き出しで視線を中央へ誘導し、条件ラベルを読んでもらい、そのままCTAへ！CTAの帯はじんわりとしたグラデーションを敷いてそっと背中を押すデザインに。
今回使用した写真の店舗イメージ👇
- 温かく庶民的
- 人とのつながりを重視
- 地域交流・福祉的役割
店舗イメージに合わせて、視覚的にも働く環境や魅力を伝えるデザインになったと思います。
主婦層がメインターゲットでる想定です。
使用したフォント＆カラーまとめ
別パターン
バナー制作の学びを深めるために、別のカラーや構図によってどのように印象が変わるのか比較してみます。
カラーによる印象の違い
完成したバナーの配色を、緑系に変更してみます。
フォントやベースカラー等は変えずに、サブのカラーをくすみグリーン(#5b8454)にしました。
写真の女性のエプロンと同系色なので、なじみがいいです。
誠実さや、落ち着き感が増しますね。
また、アクセントカラーがより際立つようになったのも◎。
構図による印象の違い
次は別の構図で作成してみます。
右から階段状にリズムよく要素を配置し、「スタッフ大募集！」から「応募はこちら」までストレスなく視線が流れるようデザインしています。
写真は奥行き感のあるものに差し替え、人物を控えめにすることで文字情報を取得しやすくしました。
また、CTA部分にピントの合ったケーキが配置されていることで、自然に目が行く構図になっています。
洗練されたスタイリッシュな店舗イメージで作成。
ライフスタイルを大切にする男女・カフェ好きな応募者をメインターゲットに。
CTAの装飾をクラシカル寄りにすることで、品の良さを添えています。
フォント＆カラーまとめ
- BIZ UDGothic
- スマートフォンUI
- BIZ UDPGothic
キャロットカラー👇
- くすみグリーン#2a6871
- キャロットオレンジ#eb8336
まとめ⌇アイデアに詰まったら？
デザインにはある程度のルールはありますが正解はありません。
アイデアに詰まったら、思い切った構図にしてみる、使ったことのない色やフォントを使ってみる、はみ出してみる、など恐れず大胆にやってみると、迷路を抜けるヒントが見つかるかもしれません。
並盛のXアカウントでも、バナーお題から作成したデザインを投稿しています。
よろしければ皆様も「#並盛デザインお題」のハッシュタグをつけて投稿してみてくださいね！
（うれしくて飛んでいきます）
コメント