![見出し画像](https://assets.st-note.com/production/uploads/images/80301412/rectangle_large_type_2_a96d75480d0159579979c6e406b5bd75.png?width=1200)
デザイントレーニング編04【バナー作成】
こんにちは。いぬのパグです。
今回はデザイントレーニング編04【バナー作成】です。
01(温泉旅館バナー作成)
今回は「温泉旅館3大特典アピール」をして、予約へ繋げる一押しをするためのバナーを制作。
【掲載情報】
1泊2食付の通常料金:大人一人12,000円〜
(特典)
1.通常料金より10%OFF
2.貸切風呂 利用無料(要予約)
3.美術館ペアチケットプレゼント
----------------------------------
バナー設置場所:旅館公式サイトのTOPページ
対象:Web予約・カップル限定
ターゲット:30〜40代 カップル
バナーサイズ:W500×H500px
このお題も「こばやす @kobayas_s)」さんのお題みたいです。
まずはワイヤーフレームを作成。
![](https://assets.st-note.com/img/1654243738667-RyvHW3xNXp.png?width=1200)
その次にデザイン。
![](https://assets.st-note.com/img/1654243774222-bqeeCgr3on.png?width=1200)
01(上司からのアドバイス)
最初にフィードバックを受けた時にMTGで上司に
「ぱっと見、ウォーターサーバーのバナーかと思いました!!!」
って言われてめちゃくちゃ笑ってしまいましたね。今思い出してもめちゃくちゃ笑えます。15分は笑い続けられる自信ある(絶妙に長い)
なんとなく「水色、温泉っぽい」と思って配色や写真を選んだのですが、「旅館」というイメージがうまくデザインに落とし込めてないことを実感しました!
バナーはパッと見て引き込まれるか、グッとイメージできるかが重要だと思うので、その点を注意したいですね。
●イメージを色・写真に落とし込む。
●一目でわかるデザインに。
●あくまで旅館のバナーをいうことを忘れずに。
●色合わせは写真と似た色を持ってくるとうまくいくことが多い。
その後できたのがこちら。
![](https://assets.st-note.com/img/1655973760286-5e8GKyxaU2.png)
01(苦労したこと・注意すること)
Q1)和風、高級感を出すこと、写真選び(カップル・旅館など)
▼
A1)リッチ、高級、上品などで検索し、いろんなサイトを見てみる。和柄、和紙など模様や素材にも注目してみる。
Q2)いい感じのあしらいがしたい…
▼
A2)細かいあしらいが意外と鍵になる、さりげなくうるさすぎないように。これまたたくさんサイトも見てみるのが一番良い。あしらいの書籍も読んでみると参考になりそう。
この本は上司におすすめしていただき読みましたが、対話形式であしらいのポイントがまとめてあってスイスイ読めちゃいました。みなさんもぜひ読んでみてください。
Q3)親しみやすく、かつ可読性の高いフォント選びがしたい…
▼
A3)いろんなフォントを見てみる。研究するのみ!
●明朝体はキリッと真面目な感じ。コーポレートサイトのMV(メインビジュアル)やキャッチコピーなどにもってこいです。
●ゴシック体は目立つ・可読性が高い・インパクトがあります。
●角丸はかわいい・柔らかな感じなので学校・教育関係のサイトと親和性あり、などなど。
サクッと検索しただけでも上記のようなサイトが出てきました。フォントはデザインの基本とも言えるので、いろいろ覗いてみるのが良さそうです。
01(良かったところ)
Good 1)鶴をあしらったり、金色を配色することで高級感や、旅館の和風っぽさを演出できたと思う。
Good 2)金色の和風っぽい枠を画像切り抜いてつけようと思ったのですが、なぜかうまくいかず図形作成であしらいました。それが逆にシンプルでスッキリ、情報過多になりすぎず良かったかもしれないと思っています。
ちなみに上司がイメージとしてパパッと
作成してくださったバナーがこちらです。↓
![](https://assets.st-note.com/img/1654244378853-DRQ5K5crlx.png?width=1200)
ベタ塗りではなくて、和紙をあしらったり、枠もシンプルかつ和風の雰囲気だしでマッチしています。和紙の色は画像の「カニ」のオレンジ、「水菜」のミドリから取ってきたそうです。
全体的なトーンがまとまっていて、見た時に情報がスッとはいってくる感じがしました。シンプルであっても細部に拘って、まとまりが出てる。すごいなあ。
01(得た知識)
1)イメージを色・写真に落とし込む。
2)色合わせは写真と似た色を持ってくるとうまくいくことが多い。
3)例えば和風なら、枠の装飾やベタ塗りでなく和紙にするなど細部のテイストにこだわる。鶴のあしらいなども良い。
4)情報は詰め込みすぎない。
5)金色はゴージャス・高級感が出る。
6)文字サイズで強弱・インパクトをつける。
7)明朝体はキリッと真面目な感じ、ゴシックは目立つ・可読性が高い、角丸はかわいい感じ、などなど。
02(母の日バナー作成)
挿入するテキストは、自分で考える。
【"SPOONデパート"の母の日キャンペーンバナー制作】
●SPOONデパートの課題
:母の日イベントをきっかけに、ファミリーの来客数を増やしたい。
●ターゲット
:30代、40代のファミリー層
●打ち出すキャンペーン
:5,000円以上購入すると、"SPOONデパート"の全てのお店で使える1,000円OFFクーポンを配布。
●キャンペーン期間:2022年5月8日まで
●バナーサイズ
※同じデザインで、3パターンのサイズのバナーを制作
:H400×W800px
:H600×W600px
:H200×W800px
●キャッチコピーや挿入するテキスト
:※課題やキャンペーン内容から、自由に考えてみる。
このトレーニング09、上司の仕事のスケジュール等の都合で、実はまだフィードバックを受けていないのです。だから、このnoteの記事を読んでくださった皆様に直接コメントにて、アドバイスやレビューをいただけたらいいなと考えています。
まずはワイヤーフレームの作成です。
![](https://assets.st-note.com/img/1654244630070-G0GiZ2jj8G.png?width=1200)
02(苦労した点)
●家族と花、母の日っぽさを写真で表現する点。
●グッとくるキャッチコピーを考えること。
●バナーサイズによってテキストや写真の配置を変えること。
●母の日っぽさは失わず目を惹くような、他のバナーと差別化すること。
●水引きと花束のリボンが被ってしまった点。
![](https://assets.st-note.com/img/1655973804839-ppDGbfpwYX.png?width=1200)
![](https://assets.st-note.com/img/1655973826784-g7gQ6jnRFC.png)
![](https://assets.st-note.com/img/1655973853211-o1seD0wuwP.png?width=1200)
そしてできたのがこちらの3種類のバナーです。
いかがでしょうか?
アドバイス・コメント・レビューどしどしお待ちしております!
次回は
サイトトレースというものをやっていきます。
サイズ感やテキスト、図形の整列で苦労しました…。こ、乞うご期待…!
そのほかの記事はこちら。
この記事が参加している募集
この記事が気に入ったらサポートをしてみませんか?