Webデザイナーが教えるバナー模写方法！実際のポートフォリオも紹介

実務経験が浅い人や独学でWebデザイナーを目指している人にWebデザインの制作練習としておすすめなのがバナー模写です。

Webデザイナーにおいてデザイン力のスキルアップは必要不可欠です。

この記事にたどり着いたということは、デザイン力が上がらずに悩んでいませんか？

Web製作会社に入ったばかりでデザイン力がほとんど無かった筆者は、デザイン力を上げるやり方さっぱり分かりませんでした。

そんな時、会社のWebデザイナーの人がWebデザイナー未経験の人にオススメなデザイン力を上げるトレーニング法を教えてもらいました。

それは、とにかくたくさんのバナーを模写（トレース）する事です

慣れてくれば1日30分程度で出来るので、習慣化も使えやすく確実にデザイン力を高めることができます。

この記事では、デザイン力を高めるバナー模写のやり方・練習方法を説明していきます。

確実に伸びる正しいバナー模写（トレース）の練習方法

新米のデザイナーがサイト全体のデザインをするのは難しい話です。

そもそもデザインの意味すらもキチンと理解している人は少ないでしょう。

まずはバナーや細かいパーツ部分のデザインを極める事がデザイナーとしての最初の関門。

しかし、バナーだからといって侮ってはいけません。

バナー模写で練習すればデザインのあしらいを鍛える

枠や線の1pxのあしらい、グラデーション、フォントの字詰め行間など実際に作ってみると細かくデザインされているものばかりです。

バナーぐらいのサイズならそこまで時間をかけずに模写できるので筆者は1日1個以上はバナーを模写し、デザイン力のトレーニングをしていました。

バナー模写の練習方法とルール

模写のポイントは重ねて模写するのでは無く、並べて模写し最後に本物バナーの上に重ねて違っていないかチェックします。

作る時は製作時間も意識するのが大事。

バナーなら30分〜1時間で作れるので毎日続けやすいです。

慣れてきたら目標時間を20分〜10分と縮めていきましょう。

バナー模写の見本探しに最適なデザインギャラリーサイト

上記サイトだけでなく、自分が普段見てるサイトで良いバナーを見つけたらとりあえず保存しておきましょう。

模写するバナーの画像サイズ

• 300×300
• 300×100
• 728×100
• 600×600

さまざまなサイズのバナーを模写しましょう。

実際に模写（トレース）したバナーのポートフォリを紹介

Webデザイナーにおいてポートフォリオサイトは非常に重要なものです。

実際に筆者が模写していたバナーのポートフォリオを紹介していきます。

左（上）が本物バナーで右（下）が筆者が模写したバナーです。

改めてみるとしっかり模写できていないバナーも多いなぁ…

写真やアイコンなど模写するのが難しいものはそのまま使うか空けておいてもOK

フォントはまるっきり同じフォントが無ければできるだけ近いものを選ぶ事。

ただそのデザインをマネするのでは無く、元となるバナーを細かく見て、どのようなあしらいや細部にこだわっているかをチェックしてデザインをマネする事が大事。

バナーの模写でデザインのスキルアップ

実際に模写するとデザインの細部のこだわり、あしらいなどが強く感覚でわかってくると思います。

• 枠でもただ線が1本あるだけじゃなくその内側に1px薄い線が引かれている
• フォントに見えるか見えないかぐらいにドロップシャドウがかかっている

プロのデザインとはこんな細かいところまでデザインされているのかと感じるはずです。

ここにドロップシャドウを薄くいれているのは文字がより一層際立てて読みやすくなる

女性向けのWebサイトだからベースカラーはピンクにして優しい色合いがいいかな

など自分なりにデザインとしての理由もしっかり見つけだしましょう。

最終的には、自分が作った全てのデザインに対しての意図・理由を明確に話せるレベルに持っていく事。

自然とデザインの事を考えれるようになればデザイン力が上がった証拠です。

模写したバナーは保存して自分のデザインの引き出しにする

模写したバナーが自分のポートフォリオにもなる

バナーを模写して終わりにするのは勿体ないです。

せっかく模写したバナーは必ず保存しておくこと。

バナーで培ったスキルを仕事でバンバン使っていきましょう。

模写したバナーを丸々使うのではなく、自分が気に入ったバナーのデザインの一部を新しく作るバナーに使ったり上手く応用していきましょう。もちろん丸パクリはデザイナーとしてご法度です。

自分はFireworksのソフトを使うので、作ったバナーをLibraryファイルにまとめて仕事で使う時はデザインをコピペですぐ使えれるようにしておきます。

デザインの引き出しを増やすことで、仕事の効率化にもなります。

仕事ができるWebデザイナーはこのように自分だけのデザインの引き出しを持っています。

デザイン力を上げたいなら毎日欠かさずバナーを模写すること

WEB制作会社に入社が決まってから毎日バナーの模写をしていましたが、模写をしていたのとしていなかったのではスタートラインが全然違っていたと思います。

バナー模写から次のステップ

ある程度続けてきてワンランクアップ上にいくなら次は今まで模写してきたバナーの経験を生かして1からオリジナルバナーを作成したり、独学でWebデザイン力を鍛える練習方法でも解説してるサイト全体の模写を始めてみても良いかもしれません。

実際に筆者が行っていた手順と期間は

上記を勤務時間外にほぼ毎日やっていました

これからWebデザイナーを目指す人やデザイン会社に入社する前にデザイン力を上げておきたいが何からすれば良いか分からない人は手軽にできるバナーの模写をやってみてはどうでしょうか？

デザイン力は人に教えてもらうと上達スピードも早い

デザイン力でつまずいた時、検索で解決できるものではなかったり、自分のやり方が適切なのか、もっといい方法はないのかと悩む事もあるかと思います。

人に教えてもらうと上達スピードも速いので、金銭的に余裕がある人はデザイン専門学校に通い「プロに聞く」のが一番てっとり早いです。

しかし、筆者のようにお金がなく専門学校に通えないから独学で勉強してる人も多いはずです。専門学校の費用は50万〜100万円とかなりの金額になりますよね。

そんな時に利用して欲しいのがオンラインスクールに通うと言う手段もあります。

専門学校に比べると費用もグッと下がりますし、今後転職や独立を考えているならスキルアップは必要不可欠ですし、先行投資と考えるべきです。

無料体験があるので、興味がある人はまず無料体験でも利用してみてはいかがでしょうか。

スクールに興味がある方はWebデザインスクールおすすめ10選！失敗しない未経験からWebデザイナーになる方法も合わせてご覧下さい。