駆け出しWEBデザイナーのためのバナートレースの教科書

今回は、駆け出しWEBデザイナーがデザイン力を磨くための方法の1つ、「バナートレース」について説明していきます。

第１章バナートレースが駆け出しWEBデザイナーにオススメの理由

そもそも、バナートレース自体が
WEBデザイナーにとって
重要なスキルの１つになります。

そっくりそのままトレースするためには
相応の技術と
ツールの使い方の知識が必要だからです。

バナートレースは
ツールの使い方を一番実践的に
学ぶことができると思っています。
そして一番効率的です。
一つバナーを選んで、真似するだけ。

「デザインを考える」工程を抜き、
ひたすらツールの使い方を学んでいくことができます。

バナーはコンパクトなスペース内に
情報を配置する必要がありますよね。
この制約の中で、
フォントの使い方、配色、レイアウトなど、デザインの要素をバランス良く組み合わせなければなりません。

バナートレースは、手を動かしながらツールの使い方の他にデザインの基礎部分も学んでいくことができます。

知識を頭に入れるだけじゃ成長しませんし、何も作れるようになりません。

知識を頭に取り入れたら、手を動かさなければなりません。

その点、バナートレースではあしらいや文字組を知識として頭に入れると同時にアウトプットが行えます。

このような理由で、駆け出しWEBデザイナーにはバナートレースが非常に有効だと思うのです。

Chat GPTに聞いてみた↓
バナートレースはクライアントの要求に応える能力を高めることができます。クライアントから与えられた指示に基づいてバナーを制作する際、デザイナーはクライアントの要求を正確に理解し、ビジュアルに表現する必要があります。バナートレースを通じて、クライアントの要望を具体的なデザインに落とし込むスキルを磨くことができます。

さらに、バナートレースはデザインの効果測定にも役立ちます。バナーのパフォーマンスを評価するためには、クリック率やコンバージョン率などの指標を考慮する必要があります。バナートレースを通じて、どのデザイン要素が効果的であるかを実践的に学び、改善するための知見を得ることができます。

また、バナートレースは実践的なスキルを磨く機会を提供します。実際のプロジェクトやコンテストなどでバナートレースに取り組むことで、デザインの経験を積み、自信を持つことができます。さらに、バナートレースの成果物をポートフォリオに掲載することで、自身のスキルをアピールすることも可能です。

総合すると、バナートレースは初心者のWEBデザイナーにとって非常に有益なスキルです。デザインの基礎を学び、クライアントの要望を具現化し、実践的な経験を積むことができます。バナートレースをマスターすることで、より優れたデザイナーとして成長し、成功する可能性を高めることができます。

第2章　トレースの際に意識してほしいこと

１．デザイン四原則

こちらをしっかり意識しながらトレースしていきましょう。

デザイン四原則はご存知でしょうか。
スクールや講座を受けている方は何度も耳にしているでしょうし、独学の方はなんのこっちゃかもしれません。

そのデザインの基本原則が非常に分かりやすくまとめられているnoteがあるのでシェアしますね✨

広告で学ぶ！デザインの基本原則｜佐々木　康友 (note.com)

初心者必読だと思います！
是非こちらを一読したうえで、トレースを初めて下さい。

２．配置

写真はバナーのどのあたりに配置されているのか
文字は写真の上下左右どの位置に配置されているのか
全体の構成はどうなっているか（対比・対角線・グリッドレイアウトなど）

これらを意識して見て行きます。文字に起こして貯めてみてもいいかもしれません。

配置の部分で駆け出しWEBデザイナーによく多いのは
〇デザインの基本原則がなっていない
〇写真・文字・イラストの場所がバラバラ
です。配置、しっかり意識していきましょう

３．配色

世に出ているプロが作ったバナーは配色に理論が関わっています。
感覚で黄色！ピンク！と決めているのではありません。

明度・彩度、しっかり意識されています。
以前したこのツイート。

https://twitter.com/saya_design_/status/1679425716553916416?s=20

駆け出しWEBデザイナーにありがちな配色の例として
〇背景と文字色のコントラストが低く文字が読みにくい
〇色が使われすぎている
というものが挙げられます。

2つ目の色が使われすぎている、ですが…

大体使う色は２～３色に抑えろ、と言われますよね。
文字色を除いてカウントします。
これは全体の統一感を損なわないようにするためであり、
そのバナーが伝えたい印象の軸をしっかりさせるためなのです。

カラフルでポップな印象を伝えたい時にはその限りではありません（といっても限度はありますが）

配色に関して、よくありがちな勘違いだと思うのが
「赤・少し透明度を下げた赤・ピンク味を入れた赤」などを「１色の赤」とみなしてしまうことです。

これをすると色が散乱します。
以上に挙げた3つの赤、これは１つ１つを「1色」と捉えてください。

色を「赤と青と黄色」の３色で収めてるよ？と言われても透明度を下げた赤・青・黄色が混在していれば
見る側（私）からすれば９色使ってるじゃん？って思います。

これ、意外とやりがちなので頭に入れておいてください。
色に少しでも変化を加えるならそれは「２色目」になります。

もしポップな印象にしたくて色をたくさん使いたい！という場合は必ず色の「透明度・明度・彩度」は揃えてください。

今回はトレースなので難しく考えずに、
（何色使われているかな～）
（背景と文字色の差はどれくらいかな～）
と考えながらしてみてくださいね。

第３章　バナートレース中につまづいたら？

バナートレースをする際には「あしらいの作り方」について悩むことがありますよね。

そんな時は、まずインターネット上で調べることをお勧めします。多くのWEB関連のサイトやブログがあり、そこで様々なテクニックやアイディアを学ぶことができます。

以下に、私が良く参考にしていたWEBサイトを載せておきますので是非ご活用ください。

すぐできる！バナートレース（模写）のやり方【未経験からWebデザイナーへの勉強法】 | nozakichi.com

また、調べてもわからない部分や疑問点がある場合は、誰かに聞くことも大切です。

Twitterで聞いたり、是非私に相談してください。

Twitterには多くのプロWEBデザイナーが、一緒に勉強している仲間が、たくさんいます。

自分が質問することで知識やアドバイスを提供してくれることでしょう。

問題解決能力は、あなたの成長速度に比例するのです。

また、このような質問を投げかけたり交流する場としてdiscordの開設を予定しています。
助け合いや成長の場として価値のある物になると思っています。
ぜひ楽しみにしていてください✨

第４章　終わりに〜継続的なデザイン訓練を〜

WEBデザイナーとして成長するためには、バナートレースをはじめとした知識やスキルの「継続的」な学習が不可欠です。

デザインの世界では常に新しいトレンドやテクニックが生まれています。

そのために、アンテナを貼り、自身のスキルを向上させることが重要なのです。

継続的な学習によって得られるメリットは沢山あります。

まず、新しいテクニックやツールを学ぶことによって、自身のデザインの幅が広がります。

バナートレースを行うことにより、新しいアイディアを取り入れることができます。

さらに、継続的な学びは差別化にも繋がります。

デザイン業界は競争が激しいため、常に新しいスキルや知識を習得することで他のデザイナーとの差別化を図ることができます。

出来ないことを諦めずに、常に学び続け姿勢を持つことが大切です☺️

加えて、デザインは1人で継続するには厳しい所があります。

そのために、デザインのコミュニティやイベント・セミナーに積極的に参加することもおすすめです。

私もデザインコミュニティには2つ程参加しています。

コミュニティでは、他のデザイナーとの交流や情報共有を通じて、新たな知識やアイデアを得ることができます。

また、フィードバックを受けたり、他のデザイナーの作品を見ることで、自身の成長に繋がるのです。

デザインは『継続』が命。

バナートレースはまだ挫折する段階ではありません。

難しいあしらいがあって気持ちが滅入るかもしれませんが、そんな時はぜひ私に声をかけてください。

一緒に助け合いながら、共に成長して行きましょう🔥

WEBデザイナー　さや