デザイナーのイラストノート

バナーデザインくるくる会vol.2を開催しました

Other

2016年9月に、クローズドな勉強会として開催した「バナーデザインくるくる会」ですが、思いの外好評で、vol.2を開催することができたので結果報告です。

Pocket

バナーデザインくるくる会vol.2概要

会場:デジタルハリウッド大阪校
参加人数:15名(+主催1名)
制作時間:75分(のち合評45分)
参加費:1,000円

前回は各自ノートPC持ち寄りで開催しましたが、今回はデジタルハリウッド大阪校さんにPCルームをお借りできたので、たくさんの方にご参加いただきました、感謝。デザイナー、エンジニア、勤務先のWeb担の方など顔ぶれも様々でした。

今回は300*250の広告バナーの作成です。自社サイトではなく他サイトに表示されるので、どんなデザインの中に表示されるかはわからないところがポイントのひとつです。オープンな勉強会で、当日まで参加者さんの職業やツールの熟練度が見えないため、あらかじめ用意した初案をブラッシュアップする形としました。

お題1:人材派遣

お題

お題概要|Github

支給素材

クライアントから支給されたという設定の素材はこちら。このほかに、AdobeStockの画像、もしくはライセンスが問題のない写真や素材は自由に追加可能という条件です。

バナー初案

今回はデザイン上あまり好ましくない部分をあえて残した、引っ掛け問題になっています。

参加者さんのブラッシュアップ案

このお題のポイントは、訴求したいことが多く、テキストも多いため、取捨選択と情報のメリハリです。女性らしいデザインというオーダーに、モチーフをプラスしたり写真を変更したり、「残業0」をモデルのOKマークに見立てる、など提供素材をうまく使った例が制作されました。桜のモチーフやQUOカードの写真を追加するなど、テキストより理解の早いビジュアルに置き換えるのもひとつの手です。

また、人材派遣という強豪がいる業界のため、あえて用件とは違うアプローチで制作されたものもありました。女性らしい配色でピンク以外の色(青・紫)もありますが、どちらも綺麗なトーンでまとめられています。

お題2:薄毛専門クリニック

お題

お題概要|Github

支給素材

バナー初案

参加者さんのブラッシュアップ案

このお題のポイントは「人に言いにくい悩み」専門クリニックというところです。このバナーを目にする人の心に響くのは、コピーなのか、80年の実績なのか、ドクターの笑顔か、なりたい自分のイメージなのか、それを絞るところから始まります。初案は色の面積が多く重い印象でしたが、面積を減らす、グラデーションをつけるなど、それぞれ工夫されています。薄毛のイメージ写真をあえて外す、イラストに置き換えるなど、印象を和らげる手法も取られています。

「キャッチコピーはふんわりしているが、クライアントの要望であればきちんと入れて手戻りを少なく、取るのであれば別案を作成する」という、制作フローにも気を使った意見も出ました。

私の制作バナー

時間があったので、私も参加者さんに混じって制作しました。薄毛のイメージ写真ではなく、悩みを払拭して自信をつけたら彼女もできちゃいました♪という「なりたい自分」をイメージさせるバナーです。こういった訴求を「ジャンプの裏表紙」と呼んでいます。「彼女と自分」というイメージ作りのため、元の写真のモデルさん二人を近づけ、色が強かったので背景の色を薄く補正しています。

まとめ

制作時間は後ろからみなさんの様子を見ていましたが、どうしても元のバナーから離れなれない様子も見受けられたので、「今回は他のサイトに表示される広告バナーなので、トーン&マナーも大事ですがクリックしたくなるデザインを考えてください」と声をかけました。その後、みなさん発想が伸びたように見受けられました。制作の後は合評として、一人ずつ自己紹介とともにバナーを見ながら「どんなところが工夫されていて良くなったか」ということをお話ししていきました。

バナーくるくる会の今後

別の場所でも、このくるくる会を開いてもらえるように、手法やテーマをGithubにまとめることにしました。まだ発展中ですが、お題など参考にしてもらえたらと思います。特に報告もなく開催いただいて結構です、結果報告のブログやお題をプルリクいただけると、とってもうれしい。

バナーデザインくるくる会Github

感想いただいたブログと最近行われた名古屋版のブログ

Pocket

イラストノート トップページへ戻る

ページのトップへ戻る