• LIGの広告成功事例
WEB

模写して学ぼう!駆け出しデザイナーのためのデザイン上達法

模写して学ぼう!駆け出しデザイナーのためのデザイン上達法

こんにちは。デザイナーの藤田です。

「石の上にも3年」と言いますが、私のWebデザイナーとしてのキャリアもついに2年目が終わり、3年目を迎えようとしております。

日々学ぶ事が多く、とても3年程度で大成するような業種ではないですね(どの業種にも言えることだとは思いますが)。

そんな私がデザイナー1年生だった頃を振り返ると「手っ取り早くデザインが上達しないかなー」なんてよく考えておりました。

そこで今回は、私の経験から最も手っ取り早くデザインが上達する「トレース(模写)」の方法をご紹介いたします。

なぜトレースがデザインの上達につながるのか?

なぜトレースがデザインの上達につながるのか、自分なりに考えてみました。

  • 「デザインは細部に宿る」と言われますが、その細部に気付く
  • 「デザインの引き出しが増える」
  • 「自分の悪い所が解る」←これが一番重要!

などなど、良いことがたくさんあります。

まずはカッコ良いサイトのキャプチャーを撮る

とは言え、なんでもトレースすれば良いという訳ではないので、まずはカッコ良いサイトを探します。

ここで言う「カッコ良い」とは、世間的にカッコ良いものでなければいけません。

以下がデザイナーの間でカッコ良いと言われるデザインをまとめたサイトの1例なので、トレースの題材探しにお使いください。

いけてるサイト ドットコム

blog_2

http://www.ikesai.com/

名前からしていけてますね〜! 親しみやすいデザインを豊富に掲載しております。

ミュージシャンに例えると『サザンオールスターズ』的な立ち位置のまとめサイトではではないでしょうか。

I/O 3000

blog_3

http://io3000.com/

おそらく私が最もアクセスしているサイトだと思います。オーソドックスから尖ったデザインまでバランスよく掲載されております。

MUUUUU.ORG

blog_4

http://muuuuu.org/

センスの良いサイトが多く、ここに掲載されているサイトならどれを題材にしても良いのではないのでしょうか。

キャプチャを撮ってphotoshopでトレース開始!

上記のいけてるサイトをキャプチャしたら、トレースを始める前に以下の事を意識!

これは私がデザインを行う際によくやりがちだった(今でもたまにする)失敗箇所ですが、このような所を意識しながらトレースを行うと、より効果が出るかも知れません。

  • 余白間(マージン)の取り方
  • 見出しやテキストとのジャンプ率の付け方
  • 使用色の割合と使用数、差し色の使い方
  • 要素同士のサイズ感のバランス
  • 際立たせたい箇所の目立たせ方

この5点に注意して、トレースをはじめます。

blog_5

実際に余白(マージン)の数値を計ってみましょう。

blog_6

見出しやテキストの級数を計るのも重要です。

blog_7

アイコンとテキストのサイズ感を意識しましょう。

上記の画像はコロンビアスポーツウェア公式サイトを使用しております。

このように、オーソドックスながら洗練されているデザインは、トレースの題材には打ってつけではないでしょうか。

トレースの方法ですが、上記を意識すれば、はじめは参考サイトの透明度を下げて上からなぞるだけでも良いと思います。

慣れてきたり、時間をかけられるときには、左右に置いてみるなどしてみてください。

時間がないときには、キャプチャを撮って使用されている色をスポイトツールで抽出してみたり、マージンの間隔を計るだけでも、参考になると思います。

blog_1

こちらがコロンビアスポーツウェア公式サイトを実際にトレースしてみたものです。

サイトの世界観ができ上がっているので、完成した後でも自覚的容易にアレンジできます。このようにメインビジュアルを変えたりしても良い練習になると思います。

今回メインビジュアルに使用した画像はこちらからダウンロードできます。

まとめ

努力なくして大成なし! いつか自分が輝ける日を信じて、1週間に1サイトを目標に、コツコツとトレースを行うようにしております。デザイナーのみなさん、一緒に頑張りましょう!

また、この記事をご覧になっている「トレーサー」の方で、「こんな所に意識するといいですよ」なんてアドバイスがありましたらお待ちしております。

この記事を書いた人

藤田
藤田 デザイナー 2013年入社
デザイナーの藤田です。 野球とビールと猫が好きです。 ジョブズの「来る日も来る日もこれが人生最後の日と思って生きるとしよう。」という言葉が好きです。言葉の通り毎日、全力投球で頑張っております。 どうぞ、よろしくお願い致します。

こちらもおすすめ

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

現場のプロが教える WEBデザイン 新・スタンダードテクニック37

  • 著者秋元 英輔,安藤 真衣子,五十嵐 亮太,稲葉 聡,大串 肇,小見 祐介,日下部 忠之,倉持 友喜,小杉 厚太,後藤 寛一,シオミ ユタカ,菅原 のびすけ,清野 奨,高遠 和也,高橋 としゆき,中村 大騎,羽野 めぐみ,肥田 真紀子,松本 奈央,miccweb,宮崎 優太郎,森崎 嘉友
  • 価格¥ 3,024(2015/12/01 16:14時点)
  • 出版日2015/08/18
  • 商品ランキング25,183位
  • 単行本256ページ
  • ISBN-104844365185
  • ISBN-139784844365181
  • 出版社エムディエヌコーポレーション