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

Other

デザイナーが他のデザイナーのバナーをブラッシュアップする「バナーデザインくるくる会」をやりました

@misumi_takuma さんがTwitterで「よくあるデザインのBefore/Afterは、最初からBeforeのクオリティが低く感じる、デザイナーが作ったものをBeforeにするとどうなるのか」という話をしていて、デザイナーが作ったものを交換してデザインをブラッシュアップしていく「バナーデザインくるくる会」というのをやりました。

Pocket

制作のお題準備

サイトのワイヤー

今回作成するバナーは、よくあるサイトのトップページに大きく表示されるバナーです。バナーは「この先の情報を読んでほしい」という目的がはっきりしているので、こういったお題には向いています。しかしこの情報とバナーの作成要件だけではデザインはできません。そこで各お題には「トーン&マナーの参考サイト」を1サイトずつ用意しました。ターゲット層と、色やフォントを選ぶ際の参考にします。

制作手順

  • お題と使用する写真は当日配布
  • 制作はPhotoshopで統一(事前アンケート済み)
  • 初回制作(60分)→制作意図テキストとpsdをDropboxにアップ(15分)→デザインを他の人が引き継ぎブラッシュアップ(45分)
  • フォントは各々持っているものを自由に使用
  • 写真やイラスト素材の追加は可
  • 懇親会は餃子を皮から作ります

ノートPC・制作環境はそれぞれが準備、男性向け・女性向けでテーマが偏らないように「エステ・車・ホテル・カード」という4つのお題を用意しました。また、デザインを引き継いだ人が「どういう方向性で作っていたのか」というのがわかるように、テキストも添えることとしました。

反省点

先に反省点を書いておくと、やっぱり60分でトンマナを理解してバナーデザインというのはちょっと難しかったです。初回のデザインは完成!からブラッシュアップしたかったのですが、制作半ばで引き継いで、ブラッシュアップしながら完成を目指す、という感じになってしまいました。

お題「エステ」

制作結果

初回(左):@mellowchanter さん → ブラッシュアップ(右):@Ashy_1994さん

@mellowchanterさん@ixkaitoさん

初回(左):@ixkaitoさん → ブラッシュアップ(右):@marcofabrikaさん

a_banner2nd_a_kosoba

「10%」を強調する、「お友達紹介」を強調するという違いが出ましたね。些細なことですが、画像の配置が左右に分かれたのもおもしろいなと思いました。参考サイトの淡いオレンジや、アクセントのブラウンカラーが効果的に使われています。

お題「車」

制作結果

初回(左):@Ashy_1994さん → ブラッシュアップ(右):@96usa_koi さん

compdesign

初回(左):@marcofabrikaさん → ブラッシュアップ(右):@spicagraph(わたし)

1st_b_kosoba2st_b_sumida

車の全景を入れるかどうかが各々分かれたのがおもしろいなと思いました。フォントの選び方にセオリーを感じます(特に金利のところ)。

お題「ホテル」

制作結果

初回(左):@96usa_koi さん → ブラッシュアップ(右):@potato4d  さん

%e3%83%8f%e3%82%99%e3%83%8a%e3%83%bc%e3%83%8f%e3%82%99%e3%83%8a%e3%83%bc

初回(左):@spicagraph(わたし) → ブラッシュアップ(右):@witch_doktor さん

%e3%83%9b%e3%83%86%e3%83%ab%e3%83%9b%e3%83%86%e3%83%ab

このお題だけ写真が2枚でした。どう配置するか、優先順位をつけるかで差が出ているのがおもしろいところ。イラスト素材なども追加されて華やかになりました。作り込まれたものを一つ入れるとだいぶデザインが締まります。

お題「カード」

adobestock_23577122

制作結果

初回(左):@witch_doktor さん → ブラッシュアップ(右):@ixkaitoさん

design-kuru2-d_03d_banner

初回(左):@misumi_takuma さん → ブラッシュアップ(右):@mellowchanter さん

kurukurukurukuru

カードを1枚で見せるか、3枚見せるのか、その見せ方にバリエーションが見られておもしろいです。利用シーンをうっすら感じさせる方向性と、新生活を色で表現する方向に大きく分かれました。

まとめ

制作途中のデザインを引き継いで、というのはあまりないので「なるほどそういう意図ね、こういう表現方法はどうかな」という、一人では感じられない発想の方法がありました。また、1つのお題に2人が取り組むので、「そうきたか・・・」という発見もありました。最初の「Before/After論」はちょっとどこかへ行ってしまったのですが・・・デザインの発想を増やす練習の一つとして、「他人のデザインをブラッシュアップ」は結構おもしろいと思いました。

また、他人の作ったデータの中身を見られるというのも楽しかったです。ファイル名のつけ方、レイヤーの整理方法に性格が出るなあと思いました(わたしは反省が多い・・・)。

告知

今回の企画はノートPCを持ち寄ってやるので、それが参加条件になってしまいました。次回はデジタルハリウッド大阪校さんのPCルームをお借りして、ノートPCをお持ちでない方も参加できる「バナーデザインくるくる会 vol.2」を開催します。

  • 2017年1月下旬
  • 参加費:1000円
  • 対象:Photoshopで画像の補正やテキストの配置などができる方

こちらで用意した、デザインされたバナーをブラッシュアップしていただき、最後はその意図などを発表していただきます。デザイナー志望の方、他の方のデザインを見てみたい現役デザイナーの方、デザイナーではないがバナー制作の機会がある方、などぜひご参加ください。イベントページは追ってお知らせします。

Pocket

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

ページのトップへ戻る