Blog スタッフブログ

WEB制作 デザイン

【バナーデザイン】キャンペーンやメニューに使える!秋のお月見バナーデザインコツと手順

こんにちは、Webデザイナーのそいです。

秋の風物詩といえる「お月見」にちなんだフードやキャンペーンで盛り上がる9月とこの10月…!

今回はそんなキャンペーンの販促物やバナーで使えるデザインのコツと手順を紹介していきたいと思います。なかなかデザインに起こすには難しい!という方もチャレンジしてもらえるようにわかりやすく手順を紹介していますのでぜひご覧ください。

STEP1.アタリをつける

お月見といえば「月」「夜空」今回はこの2つのモチーフを背景に、限定メニューのバナーを作っていきたいと思います。商品画像やメニュー情報、キャッチコピーとサブキャッチと置きたい内容をアタリをつけるように配置していきます。

文字のサイズ感も決めておくと後から迷わずにデザインできるのである程度配置を固めておきましょう。

STEP2.商品画像の配置と色決め

あしらいやフォントなど、細かい部分から決めてしまうとデザインで迷ってしまいますので全体感→細部の順で作り込むことが重要です。

まずは商品画像と全体の色味を決めていきます。茶色い帯の部分は木のテクスチャを使って表現、月見フェアの円はお月様の画像を使って表現したいと思います。画像を入れる前にまずはモチーフの色味にあわせて着色し、バランス感を見ていきます。

また、この時点であしらいを置くスペースを確保しておくと後から画面を固めやすいです。ある程度余白を作っておくことをおすすめします。

STEP3.色合いの作り込み

帯部分の木のテクスチャ、夜空、商品画像の皿の影の3つのモチーフのベースを固めていきます。このフローでは、画面全体を占める部分が整えることが大事です。

STEP4.背景の作り込み

星のテクスチャ・月の画像とメインのモチーフを配置、フォント(フォントの種類・ベースの色)を決めていきます。このフローであしらいの雰囲気を構想しながらメインモチーフ(月や星のテクスチャ)の画像を決めておくと後からすすめやすいです。

STEP5.あしらいを配置・文字の色を確定

空いたスペースをあしらいで埋めていきます。秋やお月見らしさを感じる「紅葉」「月見だんご」「うさぎ」を置いてみました。赤の入ったモチーフ「紅葉」を入れると画が華やかになります。

全体の色味が決まった時点でフォントまわりの色を決定します。「9月・10月期間限定」の帯は質感のある紺のグラデーション、「月見フェア」は茶色のグラデーションを採用しています。

STEP6.目立たせたいところの存在感を演出

「月見フェア」の部分をより目立たせたいので背景に敷いている「月」を目立たせる演出・加工を施します。

月は光が照らされるように明るいシャドウを、和風の雲のモチーフとリアルな雲と、毛色の違う雲を組み合わせて質感を出しました。

STEP7.文字の微調整・完成

最後に文字が背景に溶け込まないよう、光や陰影をつけて際立たせるように加工しました。

これで完成です。

まとめ

いかがでしょうか。

今回はこの時期「お月見」のキャンペーンにちなんだバナーデザインの手順を紹介しました。一見複雑に見えるバナーデザインでも、手順を整理すると迷わない・質の良いデザインに仕上げられますのでぜひ参考にしてみてくださいね。今回もご一読いただきありがとうございました。