「バナートレース」って言葉は知ってるけど、実際どうやったらいいの？正直、もう時間がない！ でもデザインスキルは絶対に上げたい！ってモヤモヤしてるあなた、いませんか？
大丈夫！ その気持ち、めちゃくちゃ分かる！ 私もね、デザインの勉強始めた頃は、仕事や家事に追われながら、どうやったら効率的にスキルアップできるんだ！？って焦りまくってたよ。
バナートレースは、デザインスキルを爆速で向上させるための最強の時短術なんだ。でも、ただやみくもに真似するだけじゃダメ！ ポイントを押さえてやらないと、時間だけが過ぎて「あれ、私、何してるんだろ…」ってなっちゃう。
この記事では、時間がなくてもサクッとできて、しかも劇的に効果が出るバナートレースのやり方を、アゲアゲなテンションで徹底的に解説しちゃいます！ さあ、一緒にデザインの扉を開けにいこう！
もう時間がない！急いでバナートレースを学びたいあなたへ
ねえ、聞いて！ 毎日クタクタで、まとまった学習時間なんてとても取れない。でも、デザインのスキルを身につけて、憧れのWebデザイナーになりたい！とか、もっと自分のデザインに自信を持ちたい！って強く思ってるあなた。
私も昔はそうだったよ。仕事から帰ってきて、ご飯作って、明日の準備して…気がついたらもう日付が変わってる！「あー、今日もデザインの勉強できなかった…」って、ベッドの中でため息ついてた日々。
そんな中でも、「なんとかしてデザイン力を上げたい！」「センスってどうやって磨くの！？」って、毎日アンテナ張りまくってたんだよね。デザインの基礎を学んで、いざ自分で作ってみようと思っても、「あれ？なんかダサい…」「どこから手をつけていいか分からない！」って、壁にぶち当たること、あるあるだよね！
バナートレースはね、そんなあなたの悩みを一気に解決してくれる、まるで魔法のツールなんだ！ 短時間でも集中して取り組めば、デザインの「なぜ？」がどんどん見えてくる。まるで、プロのデザイナーの脳みそを覗き見してるみたいな感覚だよ。
だから安心して！ あなたが抱えている「時間がない」という悩みも、「デザインが上手くならない」というモヤモヤも、バナートレースで解決できるって約束するから！
バナートレースをしているのに上手くいかない理由
「え、バナートレース、やってるよ？でも全然上達しないんだけど…」って思ったあなた！それ、あるあるなんです！ 実はね、ただ見たままを写すだけじゃ、なかなか効果は実感できないの。
まるで、美味しい料理のレシピ本を見て、ただ文字を書き写してるだけなのに「あれ？私、料理上手になったかな？」って思ってるようなもの！肝心なのは、「なぜそのデザインが素晴らしいのか？」を深掘りすること。
上手くいかない人の多くが陥りがちな落とし穴は、次のポイントなんだ。
-
目的意識がないまま、ただ模写しているだけ
「なんとなく流行りのバナーだから」って理由で選んでない？ 「何を学びたいのか」が明確じゃないと、ただの作業になっちゃうよ。 -
細かい部分にこだわりすぎて時間がかかりすぎている
完璧主義は素晴らしいけど、トレースは「分析」がメイン！ 1px単位のズレとか、フォントの種類が微妙に違うとか、最初からそこまで気にする必要はないんだ。 -
完成したら「はい、終わり！」ってなってる
作ったバナーを見て「できたー！」で満足してない？ そこからがめちゃくちゃ重要なフェーズなんだ！ -
デザインの要素を分解して見ていない
全体の雰囲気だけで模写しちゃってない？ 色は？ フォントは？ レイアウトは？ 写真の選び方は？ もっと細かく分解して見てごらん。 -
自分の言葉で分析・言語化していない
「なんかいい感じ」で終わってない？ なぜ「いい感じ」なのかを、ちゃんとロジックで説明できるかな？ これができないと、次に活かせないんだよ。
どう？ どれか当てはまったかな？ でもね、大丈夫！ これを知れただけでも、あなたはもう一歩、成長の階段を上ったも同然だから！ 次からは、この落とし穴を避けて、爆速でスキルアップできる秘訣を教えちゃうよ！
効果的なバナートレースのステップを徹底解説
さあ、ここからが本番！ 効率的で、しかも効果バツグンなバナートレースの具体的なステップを、一緒に見ていこう！ これさえやれば、あなたのデザインセンスはグングン伸びること間違いなし！
ステップ1：学ぶテーマを明確にする！
まずは、「今日、このバナーから何を学ぶか」を決めるんだ！
- 「ターゲット層に合わせた配色を学びたい！」
- 「読みやすいフォントの組み合わせ方を研究したい！」
- 「目を引くキャッチコピーの配置ってどうなってるの？」
- 「情報が多いのにスッキリ見えるレイアウトを真似したい！」
みたいに、一つでもいいからテーマを決めてみて。テーマが決まると、見る視点が変わって、ただの模写じゃなくなるから！
ステップ2：バナーを徹底的に観察＆分解する！
選んだバナーをよーく見てごらん！ 最初は全体をざっくり見て、次に虫眼鏡で見るように、細部まで分解していくんだ。
- 配色：メインカラーは？ アクセントカラーは？ なぜその色が使われているんだろう？
- フォント：何のフォントが使われてる？ サイズは？ 太さは？ 行間や字間はどうなってる？
- レイアウト：文字や写真、ボタンはどこに配置されてる？ どんなバランス？
- 写真・イラスト：どんな写真が使われてる？ 明るさ、色合いは？
- キャッチコピー：どんな言葉が使われてる？ どこに配置されてる？
脳内で、まるでパズルを分解するように細かく見ていくのがポイントだよ！
ステップ3：パーツごとにトレースしていく！
分解した要素を、一つずつ丁寧に再現していくんだ。
- まずはベースとなる背景や写真。
- 次に、見出しや本文のテキストボックス。
- そして、ボタンやアイコンなど。
いきなり完璧を目指さなくて大丈夫！ 大事なのは、「なぜこの大きさ？」「なぜこの位置？」って考えながら手を動かすこと。もしフォントが特定できなくても、似たような雰囲気のフォントでOK！ 完璧なコピーじゃなくて、学びが大事なんだからね！
ステップ4：自分の言葉で分析・言語化する！
ここが、ただの模写とプロへの道の分かれ目！ トレースが終わったら、元ネタと自分の作品を並べてみて、気付いたことをガンガン書き出してみて！
- 「このバナーは、メインのコピーを大きく配置することで、最初に伝えたいことがハッキリ分かるようになってるな！」
- 「背景色と文字色のコントラストが強いから、視認性が抜群なんだ！」
- 「ボタンの色が、全体のトーンとは違う差し色になってるから、自然と目線が誘導されるんだな！」
こんな感じで、「なぜ？」を深掘りして、自分の言葉で説明できるようにするのが、めちゃくちゃ重要！ これがね、あなたのデザインの引き出しになるんだから！
ステップ5：学びをストック＆アウトプットする！
分析した内容は、メモに残したり、ファイル名に付け加えたりして、後で見返せるようにしておこう。そして、可能ならSNSやブログでアウトプットするのもおすすめ！ 誰かに伝えることで、学びがさらに深まるし、自分の成長を実感できるから！
この5ステップを意識してバナートレースを続けてみて！ 短時間でも、驚くほど効果を実感できるはずだよ！
今すぐ試したい！簡単にできるバナートレースの実践法
さあ、ステップはわかったけど、「よし、やるぞ！」って気持ちになってるかな？ ここからは、もっと手軽に、今すぐ始められる実践法を紹介しちゃうよ！
【手軽さ重視！】1日1バナー、好きなデザインをサクッとトレース
まずは肩の力を抜いて！ 毎日完璧なバナーを作る必要はないよ。通勤電車の中で、休憩時間に、寝る前の5分でもいい。スマホで素敵なバナーを見つけたら、それを題材にしよう！
- PinterestやBehanceで「Web Banner」とか「Ad Design」で検索！
- 好きなブランドやサイトの広告バナーをスクショ！
- SNSのタイムラインに流れてきた、「おっ！」って思ったバナーをキャプチャ！
それを、PCでデザインソフト（Photoshop、Illustrator、Figma、Canvaなど、普段使ってるものでOK！）に読み込んで、まずは一番気になった部分だけトレースしてみるんだ。例えば、キャッチコピーのフォントや配置だけでもいいし、ボタンのデザインだけでもOK！
「今日はこのバナーの配色のトーンだけ見るぞ！」
「明日は、このバナーのメインコピーの大きさだけ真似してみよう！」
って感じで、焦点を絞ってやると、時間がなくてもサクサク進むよ！
【時短テク！】ワイヤーフレームだけのトレースも超有効！
もし「要素全部トレースする時間ない！」ってなったら、ワイヤーフレームだけをトレースするのもアリ！
文字や画像の内容は無視して、それぞれの要素がどんな大きさで、どこに配置されているか、四角や線で描いていくんだ。そうすると、レイアウトの黄金比や情報の優先順位の付け方が、パッと頭に入ってくるようになるよ！ これ、まじで目からウロコだから試してみて！
【モチベーション維持！】記録して「見える化」しよう！
トレースしたバナーは、日付と一緒にフォルダに保存しておこう。そして、学んだことや気づいたことを短いメモで添えておくんだ。
「〇月〇日：〇〇（サイト名）のバナー。この青色は信頼感を表現してるな！」
「〇月〇日：〇〇（サイト名）のバナー。余白を多く取ることで高級感を出してる！」
って感じでね。これ、後から見返すと、「私、こんなに成長したんだ！」って感動するから！ 自分のデザインの引き出しが、どんどん増えていくのが見える化されると、モチベーションも爆上がりだよ！
さあ、どうだったかな？ バナートレースって、ただの真似っこじゃないんだ。プロのデザイナーの思考を盗み見して、自分のスキルにする、最強のトレーニング方法なんだ！
時間がないあなたも、きっとできる！ 諦めずに、まずは今日からたった1つ、素敵なバナーを見つけて、トレースを始めてみよう！ あなたのデザインの扉は、もうすぐそこだよ！ 頑張って、そして楽しんでいこうね！
▼ このテーマについてもっと深く知る
「知識ゼロからの学習ロードマップ」の記事一覧へ