👉 独学で未経験からWebデザイナーになるためにやった全てを公開

Webデザイナーが教えるおすすめバナー模写のやり方

Webデザイナーが教えるバナー模写(トレース)のやり方

 

\ バナーの模写ってどうやんねん! /

 

lsamu

こんにちは

実務経験なしからWebデザイナーになったIsamuです。

このページに辿りついたという事は、デザイン力が上がらずに悩んでいませんか?

デザイン力のスキルアップって難しいですよね。

 

Web製作会社に入ったばかりでデザイン力がほとんど無かった僕は、どうやってデザイン力を上げれば良いか分かりませんでした。

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

 

それは…

とにかくたくさんのバナーを
模写(トレース)する事です

 

ここからバナー模写のやり方を説明していきます。

 

トレーニング!バナー模写(トレース)の仕方

未経験者におすすめ!バナー模写(トレース)の仕方

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

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

関連記事 『デザインの意味』が分かればあなたのデザイン力が見違える様にアップする

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

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

バナー模写でデザインのあしらいを鍛える

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

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

バナー模写の仕方とルール

  • 見本となるバナーを探す
  • そのバナーとそっくりのバナーを作る
  • 30分〜1時間で作る

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

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

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

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

 

【サンプル】模写に最適のバナーデザイン見本ギャラリーサイト

バナーはギャラリーサイトなどから自分が良いと思ったバナーを選びます。

⇒ Retrobanner

⇒ バナーデザインアーカイブ

⇒ バナーデザイン・サンプルデータベース

⇒ Banner Design Gallery

⇒ ブブンデザイン

関連記事 Webデザインの参考・素敵なサイトを集めたWebデザインギャラリーサイト11選

 

lsamu

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

実際に模写(トレース)したバナーを紹介

バナー模写 見本

クリックで拡大して見れます

実際に僕が模写していたバナーです

(左(上)が本物バナーで右(下)が僕が模写したバナー)

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

 

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

 

バナー模写 見本

クリックで拡大して見れます

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

 

バナー模写 見本

クリックで拡大して見れます

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

模写するバナーのサイズ

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

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

 

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

9ed7dd00fc90a3ffc71c9c95b3daeae6

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

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

lsamu

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

Webデザインの鍛え方にも書いてますが、全てのデザインには意味があります。

lsamu

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

lsamu

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

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

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

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

 

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

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

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

 

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

模写したバナーを丸々使うのではなく、自分が気に入ったバナーのデザインの一部を新しく作るバナーに使ったり上手く応用していきましょう。

lsamu

丸パクリはデザイナーとしてご法度

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

 

バナー模写 見本

クリックで拡大して見れます

こんな感じで

 

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

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

 

 

デザインを上げたいのであれば、まずはバナーを模写しよう

91vrbzqgsvexxb03xgrg_patterns

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

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

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

 

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

  • バナーの模写(1ヶ月)
  • オリジナルバナー作成(640×240ぐらい)(2ヶ月)
  • サイトの模写orオリジナルバナー作成(9ヶ月)

lsamu

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

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

 

以上、Webデザイナーが教えるバナー模写(トレース)のやり方…でした

 

プロが教える!Webデザインスクール選びの決定版

webデザインスクールを探す

デザインスクール選びで困っていませんか? | gifmagazine.net

  webデザイナーとして就職するには、次のスキルが必須でしょう。  
  • illustrator、photoshop
  • HTML・CSS
  • JavaScript

これを見て、「全部できる」人は学校に行く必要はありません

独学でWebデザイナーになれるイメージが 面接や書類選考で必要になるポートフォリオを作成して、就職活動を始めてください。

逆に、「全然イメージが沸かない!」人は学校に行くことをお勧めします。

デザインスクールは時間とお金はかかりますが、この先に好きなことを仕事にするわけですから、先行投資は当然必要で、それも将来取り返すことができるものです。

このサイトでは「WebCamp」がおすすめです。

他にもプロが厳選したおすすめのWebデザインスクールを紹介しているので、ぜひチェックしてみて下さい。

詳細はこちら

↓ ↓ ↓

業界のプロが教えるおすすめWebデザインスクール5選  

コメントを残す

メールアドレスが公開されることはありません。