2014
05/07

グラフィックツール自主トレ会(制作お題:父の日バナー)に参加してきました【全員分感想書いたよ】

デザもくの様子

ブログ書くのがすっかり遅くなりましたが、4/26土曜日に、「デザイナーのグラフィックツール自主トレ会」通称デザもくに行ってきました。場所は京都のコワーキングスペースcotoさんです。初coto!広いしとっても居心地よかったです(*´∀`*)
この勉強会、たくさんのデザイナーさんが集まり事前に作ったバナーを見せ合うということで、いろんな意味でものすごくヤバい勉強会なので本当にドキドキしました…。

お題は父の日バナー。COTOMALLというショッピングモールがクライアント。提供された素材を使用し、Adsenseバナー2つ(w300×h250、w160×h600)を作ることが課題でした。
お題の定義について詳しくはこちらからご覧ください。

参加者や勉強会の進行について

みんなの使用ツール統計

参加者のみなさんはほぼデザイナーでしたが、中には普段はデザインしませんーという方もチラホラ。
デザイナーがどういうふうに制作しているか、気持ちに寄り添うための参加でしょうか。みなさん勉強家…。
そしてデザイナーさんたちはそれはもうベテラン揃いで、自分のバナーを発表するまで本当に怖かったです(*_*;

ですが学ぶところが多かったのは言うまでもありません。のちほどまとめますね。

勉強会の進行はくじで発表の順番を決め、バナーをスクリーンに写し、自分の制作のポイントやどうしてここはこうなったかなど、思い思いに発表しました。

制作ツールは何を使ったかという統計もとりました。Ps、Ai、Fw、意外にわりとバラけましたね。Aiを使っていた方はPsとの両方使いがほとんどでした。主に写真の加工の部分ですね。Fwも写真の加工はPsという方が多かったかな。

学んだところ

・バナーは単価が安い。制作時間の短縮は必須。
・制作時間の短縮のために、よく使うパーツはストックしておく。(リボンなどのあしらい素材など)
・自分のバナーだけでデザインを考えるのでなく、どこに掲載されるかを考えて作る。
・素材をうまく使う。(キャッチコピーをのせる、大小でメリハリをつける、イラスト化してしまうなど)

他にも細かく言えばたくさんあるんですが、のちほど全員のバナーに感想書かせていただきます!

自分の制作したバナーについて

クライアントはどんなクライアント?ターゲットは?

まず制作する前に、今回クライアントについての詳しい定義はなかったので、お題のクライアントがどんなクライアントかを決めることから始めました。

提供された素材やCOTOMALLのロゴの雰囲気から、様々なモノを取り扱うショッピングモールではあるけれど、洗練された、少しカッコイイ、大阪弁で言うとシュッとしたw そんなイメージを持ちました。アパレルECサイトのZOZOTOWNみたいな雰囲気です。
クライアントのイメージが決まれば、今度はこのバナーを目にするターゲット像を考える番!

・Adsenseのバナーなので、表示されるっていうことは一度COTOMALLの閲覧経験はあるのではないか
・なので20~30代の働く男女
・働き出して数年経ち、離れた親にそろそろ親孝行とか考えだす時期

とまぁすごく妄想なんですがこんなターゲットになりました。

実際に制作していく

バナーのイメージは頭のなかに浮かんできたので、レイアウトやキャッチコピーを具体的に考えようとしますが、なんせ少ない引き出し。時短のためにも下記サイトを見てイメージをふくらませることに!ありがとうございますm(_ _)m

バナーデザインアーカイブ
Retrobanner

頭にあるイメージを手書きで書きます。ラフで人に見せられるようなもんではないですが、これでだいたい整理します。

できたバナーがこちら。クリックすると拡大します。一応ポイントを解説させていただきますと…。

アカリのバナー

・父の日は母の日に比べ意識が低いので、わかりやすく日本語で「父の日」と書く。
・同じ理由で日付を入れる。(ですがすいません日付間違ってます15日です…。)
・色は初夏の新緑をイメージした爽やかなグリーンで。
・リボンをあしらいギフト感を出す。
・数字や送料無料などはやはり目を引くので入れる。
・ショッピングモールの特集ページなので、素材そのものは主張しない感じに。
1pxの枠線は必ず。クリックできる対象であることを表す。
他人事を自分事へ。ターゲットの心に響くキャッチを書く。ストーリーを作る。
・LPに沿うようなバナーに。LPは様々な店舗が集まっている特集ページということを忘れない。

ズラズラと並べましたがバナー広告は潜在層に働きかける広告です。一瞬で自分に関係のあることだ、興味のあることだと思わせないといけません。そこを一応考えた…つもりです…。(偉そうに言えず小さくなっていく声w)

バナー広告についての良記事がありますのでついでに紹介です。

ディレクターなら知っておきたい「バナー広告制作の基礎知識」 – LINE Corporation ディレクターブログ

他の参加者さんのバナーご紹介!

本当に素晴らしかった他の参加者さんのバナーをご紹介します(順不同)。残念ながら使用許可のない素材を使っているものはご紹介できませんが…。ほんとに残念(>_<)

メモもとらず聞いていたので、時間も経っていてちょっと忘れている部分もありまして…。発表されていた内容は覚えている部分だけ書き出しますね。違う!ってのがあれば教えてください参加者さん…(;´∀`)

8823noriさんのバナー

『8823noriさん』

女性がターゲットとのこと。なので女性が好むお花やストライプを使う。青と黄色の父の日定番色で期待を裏切らない。「コトモールで贈る」とわかりやすくカタカナでアピール。

わかりやすいですねー。大胆にいろんな素材が配置されているけどスッキリ見えます。あと父の日ギフトのバナーであることがすぐにわかるところもいいなー。

akiyumさんのバナー

『akiyumさん』

時短のため確か切り抜きをしていないとおっしゃってたかと思います。Aiで乗算を使ったとか…。(Ai詳しくないのでわからないんですが)
新規会員取得の狙いもあるCOTOMALLということで、会員になるといいことあるよアピールがされています。

普段デザインはしないということだったと思うんですが、まとまっててそんなふうに見えないですね。縦長バナーの方、白い背景に置くと同化しちゃうので枠線があるといいかなと思いました!

brenさんのバナー

『brenさん』

エンジニアのbrenさん。COTOMALLのロゴのフォントを探すのに時間を使ったそうでw 画像からフォントを探すサービスがあるそうです(何か忘れたからぐぐったらいっぱい出てきてどれのことかわからないんですが、そういうサービスはいっぱいあるようですw)。
文章の最後のマルが赤いのはデザイン手法として「1文字だけ色を変える」というのを聞いたことがあったのでやってみたそう。その文字の選択がマルって斬新。

chimiochimioさんのバナー1 chimiochimioさんのバナー2

『chimiochimioさん』

まさかの素材全部イラスト化!スタイリッシュな素材もイラストにするとやわらかなイメージに。黄色のバラやリボンも上品でかわいいですね。
イラストが全部本当に細かく描写されていて…。すごいですw

chisato-tさんのバナー

『chisato-tさん』

大きくビールの素材を使ってその上にキャッチコピーを配置。「お父さんを笑顔にする…」の文章は青に下線を引くことで、リンクっぽいイメージになってクリックしてくれるかなーという狙いがあるそう。

ひとつの素材を大きく使ってキャッチコピーをのせるっていうのはなるほどなーと思いました!インパクトありますねー!

Ishizuka-Yurikoさんのバナー1 Ishizuka-Yurikoさんのバナー2 Ishizuka-Yurikoさんのバナー3

『Ishizuka Yurikoさん』

3つも作ってこられたことだけでも驚き!1つ目は楽天やYahooなどのショッピングモールのバナーのような定番のもの、2つ目は普段あまりつくらないけど作ってみたかったテイストのものだそう。3つ目はこれまたインパクトのある人物写真素材を使って一度作ってみたかったそうですw

デザイン一本でお仕事されているデザイナーさんなだけあって、さすが。素材の大小でメリハリをつけたり、キラキラをつけて華やかさを出したり。
普段やらないテイストとおっしゃってた方のバナーもヒゲのモチーフがあったりすごくかわいいですね。3つ目のバナーも気になってクリックしちゃいそうw

kana_laboさんのバナー

『kana_laboさん』

青と黄色で父の日のイメージをいだきやすく。丸い部分から商品をチラ見せしてもっと見てみたい意欲をそそる。数字や送料無料で女性の気持ちをつかむ。

フラットな感じのものが作りたかったとおっしゃってましたが、余計な装飾がないのでスッキリ見やすいですね。数字とか送料無料はやっぱりポイントですよね。あえて見せないっていうのは私にはない発想でおどろきでした!

MACHIKO-IKEDAさんのバナー

『MACHIKO IKEDAさん』

子ども向けのかわいいものを毎日目にしている主婦がターゲット。なのでクレヨンで書かれたような字や枠でかわいらしく。

なるほど。あえて子どもっぽいかわいらしさで主婦の目を引くんですねー。かわいい。素材も1点だけですね。シンプルだけどお父さんのイメージは伝わります。

maki_fujimotoさんのバナー

『maki_fujimoto』さん

様々な色のチェック柄にもかかわらず、彩度が低め?なのでうるさくないですね。個人的に白枠で中が透過のこのタイトル文字はどこかで使わせてもらいたいなーと思いましたw

ネクタイの上にキャッチコピー。商品の上にキャッチコピーの技はさっきも出てきましたが、勉強になりました。

mayurinさんのバナー

『mayurinさん』

シックでエレガントなイメージ!リボンのサテンの感じもこだわったそうです。

私にはできない系のデザインなのでほー!っと思って見ていました。大人の雰囲気のバナーですねー。あえて赤なのが目を引きそう。

motolevelさんのバナー

『motolevelさん』

色で分けられたグリッド。スタイリッシュで洗練されたイメージ。

いかにもイケメンが作ったっぽい!カッコイイですね。確か若い方がターゲットとおっしゃってたかと。オシャレな若者はクリックしたくなりますねきっと。にじみ出るイケメン臭。(しつこい)

nayo74さんのバナー1 nayo74さんのバナー2 nayo74さんのバナー3

『nayo74さん』

3つともテイストの違うバナー。1つ目は楽天などのショッピングモールの定番っぽいもの。これは華やかに、背景に放射線をひいたりキラキラさせたり。2つ目はCUTEな感じ。背景好き!3つ目はイラストも使用してこちらも子どものいる主婦向けな感じ。パステルカラーでかわいらしい。

背景のこだわり大事ですね…。3つ目のバナーの透過の枠が重なってるのも私かなり好きですw

pictronさんのバナー

『pictronさん』

バナーはサイドなどに配置されたりするので、バナーそのものだけを考えずにあえてアシンメトリーにする部分を作ったとのこと。素材に手を加えてグッと魅力的に。

Fwだけで作成されたそうですが、美しい…。素材がハイライトなどの効果によってすごく購買意欲をそそる魅力的なものになっていますねー。

sim_onさんのバナー

『sim_onさん』

星のモチーフを使って、レビューによく使われる☆をイメージ。5つ星で良い物がある感じを出している。

レビューの☆をイメージするというのはいい発想ですねー。クリックした後の特集ページにも☆を使うといいなーという飛び先の話もされていました。LPとの親和性大事ですよね。

spicagraphさんのバナー

『spicagraphさん』

主催者のspicagraphさん。情報はまとまりを作って見やすくされています。

父のところの顔がかわいすぎる…!上のところにある大きな点線?もアクセントになってて素敵だなーと思いました。商品もひとまとまりに重ねて置いてあるのも、ありなんだなぁと勉強になりました。

taz_さんのバナー

『taz_さん』

こちらもさわやかなブルー。ストライプはやっぱり人気なんですね。素材に白い枠がついてるのもかわいさが増しますねー。

小さい方のバナーの、下のところ、斜めになってるのはクリック意欲そそる気がする!

zoo_mさんのバナー

『zoo_mさん』

企画書的なものをちゃんとご用意されていたのに感心。すばらしい…。普段マークアップのお仕事をされてるそうですが、センスいいですよね…。みんなすごい…。

送料やラッピング無料、早い対応ができることなどアピールされてるのも良いと思いますー。

おもち。さんのバナー

『おもち。さん』

新規会員取得の狙いがあるとのことで、そちらを強調した内容に。

たくさんの商品がありそうだなーって思えるバナーですねー。モール感があります。数字効果的に使ってらっしゃいますね。

にしほさんのバナー

『にしほさん』

フォントが特徴があってかわいいですね。

「何でもそろう」っていう文章と丸くなってるところもいい感じだなーと思いました!

みやちゃけさんのバナー

『みやちゃけさん』

青と黄色のパキッとしたデザインなんですがキツくなくてキレイですよね。

細かく文章も工夫されていて、押せる感のあるボタンもいいなぁと思いました。トップバッターお疲れ様でしたw

同じ素材、同じテーマで25人ものデザインを見ることができ、解説が聞け、また生データをいただけるなんてことそうそうありません。
とても貴重な勉強会に参加することができ、本当によかったです(*´∀`*)
主催者のspicagraphさん、ありがとうございました!!

他にもこの勉強会の様子をブログにまとめている方がいらっしゃるのでご紹介します!
taz_さんのブログ
みやちゃけさんのブログ
kana_laboさんのブログ

ちょっと宣伝させてください

5月より、バイトもやめて完全フリーの道を進んでおります。

仕事はほぼないです(;´Д`)

とりあえず猫の手も借りたい方…ぜひお声がけくださいませ!w

コメント

この記事にコメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です