＼ バナーの模写ってどうやんねん！ ／
突然ですが、デザイン力のスキルアップって難しいですよね。
カンプ
Web製作会社に入ったばかりでデザイン力がほとんど無かった僕は、デザイン力を上げるやり方さっぱり分かりませんでした。
そんな時、会社のWebデザイナーの人がWebデザイナー未経験の人にオススメなデザイン力を上げるトレーニング法を教えてもらいました。
それは…
とにかくたくさんのバナーを
模写（トレース）する事です
ここからバナー模写のやり方を説明していきます。
この記事の目次
トレーニング！バナー模写（トレース）の仕方
新米のデザイナーがサイト全体のデザインをするのは難しい話です。
そもそもデザインの意味すらもキチンと理解している人は少ないでしょう。
関連記事 『デザインの意味』が分かればあなたのデザイン力が見違える様にアップする
なのでまずはバナーや細かいパーツ部分のデザインを極める事がデザイナーとしての最初の関門。
しかし、バナーだからといって侮ってはいけません。
バナー模写でデザインのあしらいを鍛える
枠や線の1pxのあしらい、グラデーション、フォントの字詰め行間など実際に作ってみると細かくデザインされているものばかりです。
バナーぐらいのサイズならそこまで時間をかけずに模写できるので僕は1日1個以上はバナーを模写し、デザイン力のトレーニングをしていました。
バナー模写の仕方とルール
- 見本となるバナーを探す
- そのバナーとそっくりのバナーを作る
- 30分〜1時間で作る
模写のポイントは重ねて模写するのでは無く、並べて模写し最後に本物バナーの上に重ねて違っていないかチェックします。
作る時は製作時間も意識するのが大事。
バナーなら30分〜1時間で作れるので毎日続けやすいです。
慣れてきたら目標時間を20分〜10分と縮めていきましょう。
【サンプル】模写に最適のバナーデザイン見本ギャラリーサイト
バナーはギャラリーサイトなどから自分が良いと思ったバナーを選びます。
⇒ ブブンデザイン
関連記事 Webデザインの参考・素敵なサイトを集めたWebデザインギャラリーサイト11選
カンプ
上記サイトだけでなく、自分が普段見てるサイトで良いバナーを見つけたらとりあえず保存しておきましょう！
実際に模写（トレース）したバナーを紹介
実際に僕が模写していたバナーです
（左（上）が本物バナーで右（下）が僕が模写したバナー）
改めてみるとしっかり模写できていないバナーも多いなぁ…
写真やアイコンなど模写するのが難しいものはそのまま使うか空けておいてもOK
フォントはまるっきり同じフォントが無ければできるだけ近いものを選ぶ事。
ただそのデザインをマネするのでは無く、元となるバナーを細かく見て、どのようなあしらいや細部にこだわっているかをチェックしてデザインをマネする事が大事。
模写するバナーのサイズ
- 300×300
- 300×100
- 728×100
さまざまなサイズのバナーを模写しましょう
バナーの模写でデザインのスキルアップ
実際に模写するとデザインの細部のこだわり、あしらいなどが強く感覚でわかってくると思います。
- 枠でもただ線が1本あるだけじゃなくその内側に1px薄い線が引かれている
- フォントに見えるか見えないかぐらいにドロップシャドウがかかっている
カンプ
Webデザインの鍛え方にも書いてますが、全てのデザインには意味があります。
カンプ
ここにドロップシャドウを薄くいれているのは文字がより一層際立てて読みやすくなる
カンプ
女性向けのWebサイトだからベースカラーはピンクにして優しい色合いがいいかな
など自分なりにデザインとしての理由もしっかり見つけだしましょう。
最終的には、自分が作った全てのデザインに対しての意図・理由を明確に話せるレベルに持っていく事。
自然とデザインの事を考えれるようになればデザイン力が上がった証拠です。
模写したバナーは保存して自分のデザインの引き出しにする
バナーを模写して終わりにするのは勿体ないです。
せっかく模写したバナーは必ず保存しておくこと。
バナーで培ったスキルを仕事でバンバン使っていきましょう。
模写したバナーを丸々使うのではなく、自分が気に入ったバナーのデザインの一部を新しく作るバナーに使ったり上手く応用していきましょう。
カンプ
自分はFireworksのソフトを使うので、作ったバナーをLibraryファイルにまとめて仕事で使う時はデザインをコピペですぐ使えれるようにしておきます。
こんな感じで
デザインの引き出しを増やすことで、仕事の効率化にもなります。
仕事ができるWebデザイナーはこのように自分だけのデザインの引き出しを持っているんです。
デザインを上げたいのであれば、まずはバナーを模写しよう
WEB制作会社に入社が決まってから毎日バナーの模写をしていましたが、模写をしていたのとしていなかったのではスタートラインが全然違っていたと思います。
バナー模写から次のステップ
ある程度続けてきてワンランクアップ上にいくなら次は今まで模写してきたバナーの経験を生かして1からオリジナルバナーを作成したり、絶対にデザイン力が上がるWebデザインの鍛え方でも解説してるサイト全体の模写を始めてみても良いかもしれません。
実際に僕が行っていた手順と期間は
- バナーの模写（1ヶ月）
- オリジナルバナー作成（640×240ぐらい）（2ヶ月）
- サイトの模写orオリジナルバナー作成（9ヶ月）
カンプ
これからWebデザイナーを目指す人やデザイン会社に入社する前にデザイン力を上げておきたいが何からすれば良いか分からない人は手軽にできるバナーの模写をやってみてはどうでしょうか？
以上、Webデザイナーが教えるバナー模写（トレース）のやり方…でした
プロが教える！Webデザインスクール選びの決定版
デザインスクール選びで困っていませんか？ | gifmagazine.net
- illustrator、photoshop
- HTML・CSS
- JavaScript
これを見て、「全部できる」人は学校に行く必要はありません。
独学でWebデザイナーになれるイメージが 面接や書類選考で必要になるポートフォリオを作成して、就職活動を始めてください。
逆に、「全然イメージが沸かない！」人は学校に行くことをお勧めします。デザインスクールは時間とお金はかかりますが、この先に好きなことを仕事にするわけですから、先行投資は当然必要で、それも将来取り返すことができるものです。
このサイトでは「WebCamp」がおすすめです。
他にもプロが厳選したおすすめのWebデザインスクールを紹介しているので、ぜひチェックしてみて下さい。
詳細はこちら
↓ ↓ ↓
