超詳しいバナートレースの方法｜WEBデザイナーの成長目標【2024年4Q実例】

みなさんこんにちは！
GMOインターネット株式会社でWEBデザイナーをしている、かいみーです。

今回は、WEBデザイナーの「成長目標」の設定についてと、それを通して私が実践した、バナートレースのやり方（手順付き）を詳しくご紹介します！

• GMOインターネット株式会社ではパートナーがどのように目標を設定してスキルアップをしているのか知りたい
• バナートレースの練習方法が知りたい
• Photoshopを使ってデザイン力を上げたい
• 初心者におすすめのデザイン勉強法って？

そんな疑問を持っている方に向けて、参考になれば嬉しいです！

今回はWEBデザイナーの「成長目標」の設定について、2024年4Qで実施したバナートレースについて紹介し、次回は2025年1Qで行ったスキルアップ法を書きたいと思いますのでお楽しみに！

「成長目標」とは

目標設定までの手順

「成長目標」の設定は、まず年間目標を設定し、それを達成するために四半期ごとに小さな目標を立てるという仕組みになっています。

目標は上長との面談を通じて一緒に設計し、実行・振り返りまで伴走してもらえるため、日々の業務に組み込みながら着実にスキルアップが図れるのが特徴です。

このように、GMOインターネット株式会社では、パートナーの成長を支援する体制があり、自分の成長を実感しながら取り組むことができます。

私の年間目標と2024年4Q目標

実際に私は入社後１ヶ月の研修を終えて以下のように目標を設定しました。

初めての目標設定だったので、研修中の様子を見ていただいたり、相談していたことをもとに上長に目標を設定していただきました。

このように年間目標を四半期ごとの具体的なアクションに落とし込み、「やること」「いつまでに」「どれくらい」を明確にすることで、日々の学びがより確実な成果につながるしくみになっています。

バナートレース(模写)とは？初心者にもおすすめのデザイン練習法

ここでは実際に私が目標で行ったバナートレースについてのお話をします。

バナートレース(模写)とは大まかにいうと、お手本のバナーを見ながらそれと全く同じものを作成するものです。

と正直最初は半信半疑でしたが、効果を感じることができたので、実際にやった方法を手順に沿ってお話しします！

【手順解説】バナートレースのやり方・進め方

いざ「バナートレースをやろう！」と思っても、「バナートレースってどうやるの？」「どう進めれば効果的？」と迷うこともありますよね。

私も最初はわからなかったので、社内の先輩デザイナーに聞いたり、Webで調べたりして方法を探りました。

ここでは、私が実践していたやり方をご紹介します。これは一例なので、自分なりにやりやすい方法を見つけていってくださいね！

• Step 1：参考バナーを選ぶ
• Step 2：Photoshopでバナートレースの準備
• Step 3：素材を集めてレイアウトを再現
• Step 4：装飾・文字詰め・レイヤー整理

Step 1：参考バナーを選ぶ

まずはトレースするバナーを探します。私はPinterestやバナーのギャラリーサイトからバナーを選んでいました。

Pinterest
バナーだけではなく、さまざまなデザインが検索できるサイトです。「バナー」と調べるだけで無限にどんどんデザインが出てきますし、気になったデザインは保存することができます。

BANNER LIBRARY
良質で参考になるバナーデザインを集めたギャラリーサイト。バナーのサイズ、カラー、テイストなどで絞り込みができ、クリックすると配色や雰囲気などの情報も確認できます。

バナー広場
業種や人気ランキングなどから検索でき、同系統のデザインも自動で表示されるため、比較・分析がしやすく便利です。

と最初戸惑いましたが、以下の点に注意して選んでいました。

• はじめは難易度の高い(複雑な文字効果、テキスト・画像・イラストなど要素が多い)バナーは避ける。徐々にあしらいや文字装飾のあるバナーにチャレンジ！
• 情報が視覚的に整理されている
• フォントが適切で、文字サイズや行間が読みやすい、メリハリがある
• 時には自分が好きなバナーを選ぶ(継続のためのモチベーション維持！楽しむことが大切です！)

お手本のバナー選びに迷ったら上長や先輩デザイナーに選んでもらいました。
また、自分が「なんとなく好き」と思ったデザインも、気分転換に模写し、モチベーションの維持をするようにしていました。

Step 2：Photoshopでバナートレースの準備をしよう

次に、実際にPhotoshopでバナートレースを行うための準備をしていきます。

まずは、Step 1で選んだバナーと同じサイズのアートボードを2つ、Photoshop上で作成します。

そのうちの1つに見本バナーを配置し、アートボード名を「見本」とし、自分が作業するアートボードを「トレース」とすれば後で見分けやすくなります。
これでトレースの準備は完了です！

Step 3：制限時間は30分！素材を集めてレイアウトを再現

いよいよ30分のタイマーをセットして、バナートレースの実践に入ります！

時間が限られているため、できるだけショートカットキーを活用しましょう。

見本を見ながら作業を進めていくと、画像やイラストも必要になってきますよね。

私は練習も兼ねて、Photoshopの切り抜きツールを使い、見本から画像素材を使用することもありました。また、Adobe Stockで似た画像を探し、色味やサイズを調整して見本に近づけるよう加工する練習も行いました。

• ※見本画像を使用したバナーは、公開・シェアせず個人の練習用途のみに留めてください。

このプロセスで、「素材を素早く見つける練習」や「Photoshopツールの使い方に慣れる」ことができ、トレース練習の中でも特に学びが多いステップだと感じています。

Step 4：装飾・文字詰め

レイアウトがある程度完成したら、仕上げに以下の調整を行います。

• テキストに装飾や影を追加
• 文字詰め（カーニング）を丁寧に調整

例えばテキストに斜体をつけたり、ドロップシャドウやベベルとエンボスを使って装飾を加えます。

最初は「これはただのベタ打ちテキストかな？」と思っていましたが、実際には”墨だまり”や細かな効果が使われているバナーも多く、注意深く観察することで気づきがたくさんありました。
「この効果や装飾はどうやっているんだろう？」と悩んだときは、その都度調べてみることも大切です。 Photoshopのチュートリアルやデザイン解説記事などを活用しながら、少しずつ引き出しを増やしていきましょう。

また、文字詰めも重要なポイントです。フォントや数字、アルファベットにはそれぞれ特有のクセがあります。そのクセを把握して調整することで、実務での修正依頼もぐっと減らせると感じました。

デザインは、細かい調整が仕上がりを左右するため、この工程も丁寧に行うことを意識しましょう。

Step 5：制限時間終了・振り返り

制限時間の30分がきたら終了です。
ここで続きをしたい衝動を抑えていったん作業をやめます。

自分が30分でトレースしたバナーと見本のバナーを見比べながら、今後の課題、反省点を洗い出します。
例えば、「この部分に一番時間がかかったから苦手なんだな」とか「この装飾は調べている途中だったから、後で続きをやろう」「ここのカーニング、もう少し詰めればよかったかも」など小さなことでも大丈夫です。

この振り返りを活かすことで、翌日バナーを選ぶときに「昨日カーニングが甘かったから、今日はカーニングの練習ができそうなバナーにしよう」など、目的を持って取り組めるようになります。

反省を積み重ねることで、少しずつでも確実にスキルアップしていけるはずです！

まとめ

このバナートレースを3ヶ月間毎日やってみて思ったのは、まさに「継続は力なり」ということです。1日30分という短い時間でも、続けることでしっかりと成長を実感できました。

もう一つ気づいたことは、実際に自分の手で再現してみると、定着度が段違いに高くなるということです。
今まではPinterestでいいなと思ったデザインをストックすることをしていましたが、手を動かしたことで、業務でも「あのときの表現を使ってみよう」と自然に引き出しからアイデアを取り出せるようになったのは大きな収穫です。

入社して初めての目標設定での取り組みは、デザインの習慣化やスキルアップの方法を学べただけでなく、自己管理や継続力の大切さも実感する良い機会となりました。やって本当によかったと思っています。

今回はWEBデザイナーの「成長目標」の立て方と私が行ったバナートレースの方法をご紹介しました。次回は、さらにステップアップした「サイトトレースのやり方」をご紹介する予定です。次回の記事もぜひ読んでいただけたら嬉しいです！