【バナトレ】トレースするバナーの選び方

Web design

今回は、「トレースするバナーの選び方」についてです。

バナートレースを行う上での工程としては

  • 探す
  • 選ぶ

  • 制作
  • 試行錯誤、思考

となってきますが

今回は【探す】・【選ぶ】について書いていきます。

10個20個30個の振り返りの記事を読んでくださった方にとっては

内容が重複していると感じてしまうかもしれませんが

視点の切り口はまた違ってくると思います。

「#番号」 や「 ~のバナー」、「難易度」といった表現が出てきますが

30個達成時に作成したコチラのまとめノートから引用しています。

https://twitter.com/snowflake0123_/status/1288305323011268608?s=20

DLしていただいても問題ないです。

もちろん、わざわざ見なくても問題なくお読みいただけます。

この記事を見に来てくださった方それぞれが、

何かちょっとでも役にったたり、ひらめきのきっかけになる

ノウハウがお伝えできればいいなって思います。

そもそも、なんでバナトレするの?

webデザインを勉強中の方は、

初めの頃に知ることになるであろう ”バナートレース”。

webデザイン=Webサイトというイメージかと思いますが

Webサイトは普段、見慣れてない方にとっては情報量が多く挫折しやすい。

そこで、バナートレースを最初におこなうことで

  • 小さいキャンバスの中で多くの学びを得ることができる
  • 初期段階でデザインソフトの操作に慣れることができる

という理由からオススメされています。

これらに慣れていくと、

  • ワイヤーフレームやデザインカンプのトレース
  • オリジナルサイトの制作

へと繋がっていくわけです。

ワイヤーフレームとデザインカンプを絡めて記録した記事もあります。

参考としてよろしければ ▽

【番外編】Udemy講座 / 架空LPの完成までに私がやったこと。
Udemyに関する記事を3部構成にしてお届けしています。前編 ▶︎ 購入した講座の感想。後編 ▷ Udemy(動画)で学習するメリット・デメリット。番外編 ▶︎ Udemy講座 / 架空LPの完成までに私がやった...

ちなみに、トレースと模写の違い

トレース:見本の上に重ねて作っていく。

模写:隣に見本を置いて感覚的に自分で配置していく。

トレース で OKです。

その分、考察の時間が必要になってくる可能性はありますが

私の場合は、ほぼ問題なくバナーのオリジナル制作できています。

探す編

バナーまとめサイトから探す。

私が現時点で知っているバナーのまとめサイトを5つを

メリット・デメリットを添えて紹介します。

  • BANNER MATOME (21,300本 / 最終更新日:2018年9月26日)

メリット:バナーの掲載本数が多い。

デメリット:更新が止まっているためか、古っぽっさを感じるデザインが多い。


メリット:新しめでお洒落なバナーが多い。

デメリット;掲載数が少ない。


メリット:アプリがあるため、スマホでも気軽に見ることができる。

     検索機能、関連表示 機能、保存機能がある。

デメリット:バナーだけではないので、目的から外れやすい。

私のオススメの使い方は ”Pinterest だけ で OK !” です!

上記で紹介した まとめサイトが仲介になっているので

結局は、Pinterestのどこかでは出会います。

メリットでも書いたように、多くのバナーを気軽に見ることができる上に、

検索機能も、関連機能、保存機能もあるので管理が楽々です。

ただ、

  • 色んな用途に使いすぎている方
  • Pinterest苦手な方

は自分のお気に入りのまとめサイトと出会っておくのが良いかもしれないですね。

上記に挙げた、まとめサイトだと BANNER LIBRARY がオススメです。

おそらく現状で更新が続いているの唯一のサイトだと思われます。

選ぶ編

私自身は10個ずつが区切りだったので

  • Level 1(1~10個目)
  • Level2(11~20個目)
  • Level3(21~30個目)

の3レベルの構成で書いていきます。

Level 1(1~10個目)

目的

  • ソフトに慣れること。
  • バナーは自分でも完成できるものと知ること。

選び方ポイント

  • 文字のみ” の バナーを選んでみる。
  • キャラクター” の入ったバナーを選んでみる。
  • 探しやすい ”写真” の入ったバナーを選んでみる。

難易度としては

文字のみ → 文字+イラスト → 文字+写真

の順になってきます。

 

”文字のみ” の バナーを選んでみる。

セール告知バナー』が最も優しくて手軽です。

私が1番最初に行ったのが セール告知バナー(難易度1)でした。

https://twitter.com/snowflake0123_/status/1275800883067080704?s=20

どう選んだらいいかもわからなかったので、

企業やジャンルとかは全く気にせずに

とりあえず自分でもできそうなもの」を選んでいます。

「バナーは自分でも完成できるもの」ということを掴むことができました!

”キャラクター” の入ったバナーを選んでみる。

文字に加えて、イラスト が入ってきます。

https://twitter.com/snowflake0123_/status/1276396851004977153?s=20

#4 のバナー(難易度4)は、

サウスパークに出てくるキャラクター4体分を全てトレースしています。

この頃は、操作方法がチンプンカンプンだったのでめちゃくちゃ時間がかかってます。

しかし、キャラクターをトレースすることは

最も楽しみながらソフトの操作に慣れていける方法だと思いました。

#11 の時には、

LINEのキャラクターのブラウンさんでも行っています。(難易度2)

https://twitter.com/snowflake0123_/status/1278641600403345408?s=20

探しやすい ”写真” の入ったバナーを選んでみる。

バナーといえば、やはり写真が使われているものが多いです。

バナトレで最も時間がかかってしまったり挫折する原因は、写真の選択かと思います。

私が初めて、写真の入ったものが 和菓子屋さんのバナーでした。(難易度3)

https://twitter.com/snowflake0123_/status/1275992982978588672?s=20

当時の記録にも「写真選びに時間がかかった」って書いてますね。😅

今も尚な問題なので、一生つきものぽいです。()

切り抜きの作業を行なっているので

ここで初めてAffinity Photo(≒ Photoshop)を使用しています。

切り抜きや加工なしでも写真が含まれているバナーだと旅行系が多いです。

あとは、図形を用意して写真を取り込むタイプのバナーが比較的簡単です。(難易度2)

https://twitter.com/snowflake0123_/status/1279204893333417985?s=20

Level2(11~20個目)

目的

  • バナーを触ることを楽しむこと。
  • 色んなジャンルのバナーを触ってみること。

選び方のポイント

  • 直感的に気になるバナーを選んでみる。
  • 大手・有名企業のバナーを選んでみる。

10個目とかになってくるとソフトの操作方法に

慣れているはずですし、楽しくなくなってきます。←

ちなみに、楽しくないため、バナトレを休んでまで

オリジナルを制作に挑戦したのも11〜20個目の頃でした。

詳しくは20個目の達成の記事にて。

直感的に気になるものを選んでみる。

ネタが無くなってくると勝手に、

この思考になってくるかと思うので直感的に選んでしまいましょう。

例えば、

  • 自分の好きなジャンル / 配色のバナー
  • 構造がどうなっているか気になるバナー

私の場合、好きな配色の例だと

#19 の バレンタインのバナー(難易度3)

がお気に入りで、すぐさま決めました。笑

https://twitter.com/snowflake0123_/status/1281909772619362306?s=20

この時は、右上のフォンダンショコラを白い箱にすることで

バレンタイン感を増させたりと完全に楽しんでますね。笑

チョコレートが溢れ出ている写真を選んでいるのも遊び心です。

構造がどうなっているのかの例だと、

#14 の ウェディングのバナー(難易度4)

https://twitter.com/snowflake0123_/status/1279680988851826688?s=20

「文字のエフェクト、白のモヤモヤやったことなかったな〜」

「どうやってやるんだろ〜」と選びました。

花柄の背景と同じ向きのウェディングドレスの女性を

見つけることができたのでなんとかなりました。

ここで初めて、バナトレについて「良いですね」

とのコメントをいただいたので印象強く覚えています。

大手・有名企業のバナーを選んでみる。

「有名である」ということは「広告戦略が上手い」ということでもあります。

私が実践したバナーの中で有名・大手企業だと

  • マクドナルド(難易度6)
  • スターバックス(難易度5)
  • ビオレ(難易度4.5)←トヨタより難しかったので
  • トヨタ(難易度4)

例として1つだけ。

https://twitter.com/snowflake0123_/status/1282307030007463936?s=20

投稿すること自体を躊躇いました。

前提として、写真のクオリティもあると思いますが、

簡単そうに見えて簡単ではありません。かなり再現が難しいです。。

しかし、挑戦することで

「まだまだ未知の世界が存在する…」※今も尚

と実感し、自分自身の苦手を気づくこともできます。

余裕が出てきている頃なので、

  • このバナーが伝えたいことは何?
  • シチュエーション・設置場所 は?
  • ターゲットは誰だろう?

直感的に 判断・イメージできるバナー が ”良いバナー”

と気づいてくるかと思います。

このイメージが有名企業だと、広告が上手いので容易に想像しやすいです。

逆に、企業名が入っていなかったり、知らない企業さんである場合は

考えるほど、そのバナーの伝えたいことが「???」となりやすいです。

私が実践した中だと、#10 インテリアショップ と #24 カラコンのバナーは

いまいちしっくりこなかったなぁ…との印象です。

しかし、バナートレースなので選んでしまったとしても全く問題ないです。

  • 自分自身で実際にバナーに触ってみること
  • アリかナシか自分自身で見極めること

がバナトレの意義だと私は感じているので、

「自分ならこういうバナーは作らないな〜」とストックにもなります。

少しでも自分が気になるバナーならば、

今日は「これをやってみるか…!」と、気軽に選んでみましょう。

もし可能ならば、改善を提案・実践してみても良いかもしれないですね。

Level3(21~30個目)

目的

  • フリー選択

トレースをするためにバナーを ”選ぶ” となると、目的が無くなってきます。

カスタマイズ、リサイズといった制作にチカラを入れられるようになるためです。

模写でも比較的、楽になってきます。

もし、絶対的に進むと考えている 業界 × webデザイン

があるのならば、特化した商材で取り組めば良いかと思います。

同じ業界でもターゲット層は広いですしね。

20個目達成時の反省点を挙げた上で

私が21〜30個目に行なった選び方としては

  • 誘導ボタンがあるものから選んでみる。
  • 苦手なターゲット / イメージ から選んでみる。
  • 季節やイベントから選んでみる。

でした。

1つずつ、実際に選んだバナーと共に解説していきます。

誘導ボタンがあるものから選んでみる。

#21のバナーだと「数量限定!今すぐ購入!▶︎」が 誘導ボタンにあたります。

https://twitter.com/snowflake0123_/status/1284151414114017280?s=20

バナー特有の要素が「誘導ボタン」といっても、

画像全体をクリックするので、実際としては意味はなしていないですが

心理的には、誘導ボタンを置くことで

”クリックしてみたくなる” といったところなんですかね。

冒頭で紹介した、更新率が高い『BUNNER LIBRARY』のバナーを見てみると

誘導ボタンというのは かなり少ないですし、『>』だけだったり、

目立たないほどにシンプルなものが多いことが見て受け取れます。

ぜひ、ご自身の好み・良いと感じたバナーを選んでみてください。☺️

苦手なターゲット / イメージ から選んでみる。

  • ターゲット 性別:女性、男性 / 年齢:子ども、若い、大人
  • イメージ:かっこいい ↔︎ かわいい、新しい ↔︎ 古い

といった感じで、

1つのピンポイントで選んでいく方法です。

これまで選んできたバナーについて

  • 何が苦手と感じたのか
  • どんなジャンルや配色のバナーを選んできたのか

を振り返ること(私は10個単位でブログに書いていました)で

自分が選ばないタイプのテイストやターゲット層

を意識してバナーを選ぶことができました。

「ただ量をこなす。」のではなく、

一度ずつに意味合いを持って取り組んだことで、

苦手であるだけ疲れやすいですが、とても充実したバナトレになりました。

私が選んだ #22 のバナーについては

https://twitter.com/snowflake0123_/status/1284531423710294017?s=20

ターゲット:男性(予想) → ファミリー (事実)

イメージ:かっこいい(予想) → 高級(事実)

という大外れなこともあったので、とりあえず気になるならトレースしてみて

詳しくない場合は考察兼ねて検索してみるのもありです。

季節やイベントから選んでみる。

私自身は意外と見落としがちだった季節やイベントをモチーフにしたバナー。

  • 季節(春・夏・秋・冬)

#26 だと、秋・冬服の先行予約のバナー

https://twitter.com/snowflake0123_/status/1286322588373803008?s=20
  • イベント

#30 はお正月(年賀状)のバナー

https://twitter.com/snowflake0123_/status/1288084053128749056?s=20

#30 のバナーは30個目だから「面白いこと、やりがいのあることがしたい」

と選んでいるので、グラフィク寄りで時間もかかるのでオススメはあまりしないですが…

お正月だと、新春セール告知の『文字のみ』のバナー

和風系のイラストが難しそうですが、『イラスト+文字』のバナー

が見受けられました。

他にも

クリスマス、ハロウィン、ブラックフライデー、地元のイベント、講演会

など が考えられますね。

まとめ

Level 1

  • 文字のみのバナーをを選んでみる
  • 文字+イラスト のバナーをを選んでみる
  • 写真+文字のみのバナーをを選んでみる

Level 2

  • 直感的に気になるものを選んでみる。
  • 大手・有名企業のバナーを選んでみる。

Level 3

  • 誘導ボタンがあるものから選んでみる。
  • 苦手なターゲット / イメージ から選んでみる。
  • 季節やイベントから選んでみる。

個人的には Level2 で挙げた2点がバナトレの醍醐味だと感じました。

現在は、デザインのドリルに移って、

グラフィックデザインも含んだ内容トレースや模写を行っていますが

これからまた、すぐさま再開するなら何をするかと言われたら

(制作ぽい話になってしまいますが)

  • BUNNER LIBRARY で最新のバナーに触れる
  • リサイズを行う
  • 配置換えカスタマイズをする

が考えられます。

早い段階から、他の方の意見を取り入れて

リサイズや配置換えカスタマイズをおこなっている方が

沢山いらしゃって、凄すぎ…と思いつつ、焦りを感じてしまっているのが本音です。。

私は、自分の世界の中にいる時間が多いので

気付いたり、導入が遅く、遠回りになってしまっていることが否めないです。

それだからこそ書ける記事でもあると思うので

「やってみようかな〜」って思うことが1つでもあれば

ぜひ取り入れてみてください。

7/31の投稿で告知したにも関わらず、8/10になってしまいました。😅

最後まで読んでいただきありがとうございました!

コメント

タイトルとURLをコピーしました