【第4・5回】 バナー課題レビュー会 | デザインのWA!

こんにちは！unique box の shima です！

ちょっと仕事が忙しくてnote書くの1週間遅れてしまいました！
本業は講師ではなく、webデザイナー・ディレクターですのでご了承ください。。

「デザインのWA!」は、LINEオープンチャットを使用して、みんなでWEBサイト制作の勉強をしたり、情報を共有し合ったりする仲間作りのコミュニティです！

\\ 第４回 バナー課題レビュー会を、7/31(土)に開催しました //
\\ 第５回 バナー課題レビュー会を、8/7(土)に開催しました //

参加者募集中です！記事の一番下に参加URLを入れてますので興味のある方は是非参加してください〜☆！

４回目のデザインお題は、「オリンピック」「ドラえもんの秘密道具」の
バナーデザインです！

年齢や、職業、ライフスタイルなどなど自由に考えていただきました！
競技や年齢やリテラシーなどいろいろな違いができるので多種多様なバナーができるのでは？と思い課題内容に選定しました。

５回目のデザインお題は、「インビザライン専門店」の広告配信用バナーデザインです！より実践的な課題になり、クライアントの求める課題や、実際に使用する「ユーザーの悩み」など因数分解しながら紐解いていく課題内容となりました。

早速、みなさんのデザインをご覧ください！

1.サッカー日本代表戦NG戦告知バナー

@なつさん

サッカーのかっこよさが表現されてて良いバナーでした！
7/31にバナーレビュー会をしたのですが、タイムリーさがすごくよかったです！

さらによくするのであれば、選手たちを塊でレイアウトし、
まとまりのあるデザインを作りこんでいきましょう！

かっこいいデザインにはDINというフォントをよく使います！
adobefontにあるのでぜひ活用してください。

男性っぽいデザインにしたいときによくする手法としては、テキストに斜体をかけることです。
動きがついて男性っぽさ出るので是非活用してください
さらに文字にぼかし（移動）の効果をかけ躍動感をつけるとなおスポーツの印象が出て良くなります。
↓↓　↓↓　↓↓

2.オリンピックを Twitterで応援しようバナー

@ちゃんあいさん

要件定義
【ターゲット】中学、高校生の男女
【配色】五輪カラー
【目的】テレビ離れしている中高生に興味を持ってもらうこと
【コンセプト】渋谷のスクランブル交差点に掲載されているようインパクトのあるデザイン
【意図】中高生がターゲットだとわかるような写真を使用。「#」を使用し、中高生がつぶやきながらオリンピックを観戦している様子を表現。「自分もオリンピック見ながら、ツイートで参加しよう！」と思ってもらうのが狙い。
【こだわり】五輪カラーは色味が強くごちゃっとした印象になるので、人物写真に色を乗せてまとまりがでるようにした。

こちらもオリンピックバナーです！
５輪カラーと幾何学形状で表現されている面白いデザインでした！
今回もターゲットとコンセプトが非常によかったです！

全体的なデザインとしてはグラフィックデザインのような強い広告バナーになっていたので、オリンピックらしさが出ていて良いデザインでした！

さらによくするとしたら
情報をいっぱい詰め込みすぎると情報がどんどん弱くなってしまいます。人を4人入れてしまったので、情報が混雑し、結果「#届け声援」が小さくなっていました。

「この夏は〜」の文章も位置に迷ってる感がありますね！

修正の1段階目は、現状のまま「#届け声援」のレイアウトを変更して小さくなってしまった人を大きくする
ざっくりこんな感じ。ざっくりです　↓↓↓　ざっくり

2段階目は、
・象徴的な一人だけを大きくして、残り3人は背景にする
・「#届け声援」だけ目立たせる
・情報を整理する
・Twiterらしさを出す

メインの女の子がスマホを持っていたらGoodです！

スクランブル交差点をモチーフにしているのはすごくいい案ですね！ただスクランブル交差点感がないので、どうにかしたらすごくいいグラフィックに変わりそうです！企画を詰めれば、広告賞とかも狙えそうですね！
次回もワクワクさせてくれるデザインを楽しみにしています！

3.ドラえもん秘密道具「ジーンマイク」販売バナー

@chachaさん

ドラえもん秘密道具販売バナーです！「ジーンマイク」のチョイスがいいですよね〜
デザイン面で良いと思ったポイントを言語化していきます！

1「ジーンマイク」の特徴は、感情を揺さぶる秘密道具なので
フォントは明朝体を使用している。

・明朝体がよく使われる場所：新聞や教科書など
・明朝体の持つ印象：硬い・真面目・高級・情緒的
・明朝体は情緒的なシーンで使用されることが非常に多く、30代・40代の女性に向けた商品LPでは80%以上が明朝体を使用されています。

2 優先順位がしっかりつけられている。

商品名＞期間＞補足情報
展示会やプレゼントキャンペーンのようなバナーは「場所」や「期間」が限定されるので「告知」が目的となります。そのため、タイトルの次には「期間」の優先順位が高くなります。
期間の優先順位を下げるとユーザーにとっての緊急性がなくなります。

3 ジーンがあることでバナーの奥行きが出ている

バナーは少ない面積で情報をレイアウトする必要があるので、奥行きを出しにくいです。写真を選定するときは真正面の画像ではなく、斜めから撮影したような写真を選定することで奥行きをつけることができます。
今回のバナーは文字とコマで奥行きがついているので、平面的なデザインにならず、大事なキーワードを立たせることができています。

4. 3.ドラえもん秘密道具「アンキパン」販売バナー

こちらもドラえもん秘密道具販売バナーです！

まず印象としては、漫画風のデザインでかわいい印象でした！
これだけ円周率覚えれたらすごいよね！という会話もあったり！

基本的にいいデザインなので別の考え方をするのであれば、

【ターゲット】
何か覚える必要がある人。
受験や中間・期末テスト、小テストなど学校に関わるシチュエーション
=小学生・中学生・高校生がターゲット

【推察】
国家試験や検定など、大人も必要とするシチュエーションはあるが、分母を考えると学生にターゲットを絞ったほうがクリックされる数が多くなる。
　
【施策】
漫画風デザインをアニメ風デザインにしてコミカルな印象にする。
　→ 今の小中高校生に合わせたデザインにする。
　→ バナーはデジタルなのでデジタルのトンマナにする。

色：パンに合わせた配色にする
線：少し太くして柔らかい印象にする

【細かい修正点】
・パンの中に円周率を入れているのですが、拡大して見ないと円周率だと判別できない。
　→円周率の数を減らして数字を大きくする
　→もしくは、わかりやすい簡単な内容にする。
　→バナーはパッとみてどんな商品なのかわかることが重要です。誰でも簡単にどんな商品か、どんなことができるのかを理解できるかを意識してみてください！

・「購入はこちらから」を左下に配置すると「前のページに戻る」を想起します。
　→ページ誘導する場合は、右下もしくは下中央に配置すると「次のページへ進む」を想起できます。
タイムマシンのような過去に戻る秘密道具をデザインをする場合は左下に配置することでトリッキーなデザインになるかと思います！

5.インビザライン広告配信用バナー

@なつさん

インビザライン（マウスピース）専門店の Facebook、Instagram広告配信用バナーです！
※制作の途中なので、気にしないでください。

まず情報整理からしていきましょう！

１. メインビジュアルを大きくしましょう！
ユーザーがインビザラインをつけた後にどういった未来になるのか？を想像させるようにするためのメインビジュアルなので、女性大きくして目立たせましょう！

2.キーキャッチコピーを目立たせましょう！
メインビジュアルとキーキャッチコピーでひとかたまりとなり、バナーをみた人はここで興味を示すかスルーするかを判断します。
毎回表示されるバナーをじっくり見る人はいません。したがってメインビジュアルとキーキャッチコピーは興味を引く内容でなければいけない（見せ方も）ので、大きく扱うようにしましょう！

３.情報を整理しましょう！
情報をたくさん入れたことにより目立たせる情報が埋もれているので、「キャッチコピー」と「金額」のみに整理。
情報量が多ければ多いほど一度に入ってくる情報が薄くなり、スルーされてしまいます。大事な情報を色々入れたい気持ちもわかりますが、一番大事な情報の優先順位を見極めてリンク先で伝えるようにしましょう！
大事な情報がいっぱいあってどれも伝えたい！という場合は、ABテストでどちらの情報の方が効果的なのかを選別するのもいいかと思います！というのをクライアントに提案しましょう！

4.商品を配置しましょう！
「インビザライン」の広告なのですが、みなさんインビザラインってご存知ですか？？
正解は「マウスピース」の商品名らしいです！
ドメジャーなコカコーラなら商品はいらないかもしれませんが、一般的に認知度の少ない商品は、商品画像をしっかり載せてぱっと見で視覚的にわかるようにしてあげましょう！

5.導線を確保する。
Z型の目線誘導で、変化後のイメージ（女性）→　ベネフィットキャッチコピー → 金額 → 商品の構成にすると論理的にクライアントへ説明できると思います！

第４/ ５回バナーレビュー会は、以上です！
会を重ねるごとに、目的を理解し、レイアウトを論理的にされている印象です！
クライントへ説得しやすいバナーはコンペでも優位に立ちやすいので今回のレビュー会を経てさらにレベルアップを目指していただきたいです！

第６回のお知らせ

「除毛クリーム」のバナーをテーマにします！
こちらは実際にLansarsで公開されているコンペですので、参加者全員でお金を狙いにいきます！（確定申告が大変になるぞ〜〜笑）

来週も是非ご覧ください〜！

参加者募集中！

LINEオープンチャットを使用して、みんなでWEBサイト制作の勉強をしたり、情報を共有し合ったりする仲間作りのコミュニティです（参加無料）！今は感染拡大防止のためzoomオンラインのみ開催しています。

noteでは伝えていない細かいデザイン処理は、いっぱいあります！

学生さん、スキルアップしたい人、転職活動中の人、いろんな方に参加していただきたけると嬉しいです。

参加対象者
・WEBデザイナーを目指している人
・WEBデザイナー
・フロントエンドの方
その他の方は要ご相談ください〜
やってみたい！現役デザイナーの人にアドバイスもらいたい！コミュニティに参加したい！という方は是非お待ちしています✨

✨✨現在満員御礼中ですm(o A o)m✨✨

参加希望の方はコメント欄へお願いいたします！
「WEBデザイン勉強部屋」参加希望者のオープンチャット
https://line.me/ti/g2/3VhhK93QxLnCTNz63cjb1w?utm_source=invitation&utm_medium=link_copy&utm_campaign=default

こっちは、まだまだ空いてます〜！
「もくもく会」 参加希望者のオープンチャット
https://line.me/ti/g2/5KKfk2oZjnJy6w-KaIRS-g?utm_source=invitation&utm_medium=link_copy&utm_campaign=default

過去のレビュー会記録はこちらです！