第4回〜バナーお題やってみた〜

こんにちは！
webデザイン勉強中のbenicoです🐕
7月は毎週テーマに応じて制作物をし、ポートフォリオをまとめて
デザインのセミナーを受けてと…バタバタしておりました💦
（毎週のテーマに応じ制作したものは、また詳しくnoteにまとめればと思います！！）

さて、本日はTwitterでフォローさせて頂いているこばやすさん（ @kobayas_s）のバナー課題に挑戦したので記録も兼ねてまとめます。

01.今回のお題について

中でも今回私がお題にしたのはこちら👇

「温泉旅館3大特典アピール」バナー制作
今回の目的は、予約へ繋げる一押しをすること。

【特典】
❶通常料金より10%OFF
❷貸切風呂 利用無料(要予約)
❸○×美術館ペアチケットプレゼント
----------------------------------
バナー設置場所：旅館公式サイトのTOPページ（予約の導線に近い所）
対象：Web予約・カップル限定
ターゲット：30〜40代 カップル
1泊2食付の通常料金：大人一人12,000円〜
バナーサイズ：W500×H500px

こちらを参考にさせていただきました。

【気をつけるべき3つのポイント】
①情報量が多いのでレイアウトをしっかり組むこと
②カップル向けのデザイン
③和風の雰囲気をどう表現するか

それではいってみよー！！

02.バナーを作ってみた

使用ソフト：illustrator 
制作時間：4.5h

まず必要な文字を枠内に入れレイアウトをある程度決めてから、素材・配色・フォントを決めていきました。

03.制作過程と工夫した点

◎情報整理、優先順位
必要になる文字選択と優先順位を考え以下のようにまとめました。

1、Web予約・カップル限定　３大得点
2、特典の内容
3、ご予約はコチラ
4、1泊2食付の通常料金：大人一人12,000円〜

◎レイアウト
バナーは情報を載せる範囲がかなり限られているので、目の流れを意識して「Z型」に配置しました。

特典の配置はこちらを参考にしました！

◎配色
ピンタレストで「温泉」「旅館」「パンフレット」「バナー」など関連ワードを検索し、今回のターゲット層とテーマに合うものを選定します。

ターゲットは30−40代のカップルだったので、落ち着いた色合いを選び、和風の雰囲気を出すために装飾をイラストACより探し出しました。

こちらを参考にしました。

◎こだわったポイント
デザインに入る前に以下の4つの原則を意識しました。

①記載分に対して優先順位をつける
②記載分に対してグループ分けをする
③記載分を見て反復項目を予測する
④それらを左揃えで配置してみる

それから全体に対してデザイン４原則ができているか、グループごとに４原則ができているかを繰り返しチェックし、調整していきました。

例えば特典内容において

強弱では「３」「10％OFF」「無料」「ペアチケット」を大きく、または赤で色付けしコントラストを出しました。

反復では特典内容を同じデザインで繰り返しリズムを作りました。

近接では「特典のタイトル」「特典の内容」とをそれぞれグループ化し「特典の内容」同士はタイトルよりも近づけて配置しました。

整列では高さを揃えたり、中央揃え（できれば左揃え）で配置を行いました。

◎反省点
スマートフォンで見た時、文字が小さく見えにくいところもあったので、これからは文字の大きさをより意識すること。
統一感を意識するがあまり、「3大特典」があまり目立たなくなってしまったこと。

04.まとめ

ターゲット層に響くバナーにできたかと言われると、まだまだだと思うので意図をしっかり読み解いて形にする難しさを改めて実感しました。

ただ前回のバナー制作の時より、気にするポイントを意識して、自分ができているのか「制作前・制作中・制作後」で見れるようになりました。（その分めちゃくちゃ時間がかかりましたが、、、😅）

引き続き修行重ねます〜〜〜🙌

もしよろしければデザインのアドバイス・ご感想いただけると有り難いです！