おすすめ情報

おすすめ情報

2016年8月30日

Webデザインを上達させる第一歩「トレース」

trace-to-improve-webdesign

これまでWebデザイナーについての仕事内容や
Webデザイナーとはなんたるものか、など
いくつも記事が書かれてきましたが、
Webデザイナーとして仕事をしていくにあたり、
実務経験以外に
どうやってスキルアップを図っていくのか?
まずはどこから勉強していけばいいのか?
デザインを上達させるために、
デザイナーは大体通るであろう、
「トレース」について今回は書きたいと思います。

トレースとは?

「トレース」とは、その名の通り模写することを指します。

Webデザイナーに限らず、デザイナーたるもの、
日々いろいろなデザインに触れ、
自分の引き出しを増やしていくことは
当然のことです。
ただそれだけなら、デザイナーだけでなく
どんな方でもできることかと思いますが、
そこから
「良いデザインがなぜ良く見えるのか?」
ということを細部までしっかりと
見て、考えることがまず第一歩です。

そこから先に「トレース」という
良いデザインの完全コピーを作っていくことで
自分の手を動かし、
隅々までしっかりと見ていくことで
自分の経験として蓄積されていくようになります。

トレースはあくまで勉強として

もちろんおわかりだとは思いますが、
いいデザインをトレース、つまり完全コピーをするのは
勉強として、です。
これをそのまま業務で提出することは
ご存知の通り絶対にしてはいけないことですので、
そちらはご注意ください。

まずはいろいろなWebデザインを見て目を肥やす

デザインでもWebとグラフィックではまた
全く違うものといっても過言ではありません。
もちろんデザイン全体で言うなれば
印刷物(チラシやDM、POPなどなど)を
より多く見ることも大切ではありますが、
WebデザインならばまずはWebデザインを
多く見ていくことが必要です。
最近ではPinterestのように
いろいろなデザインを見ることができるツールも
増えてきているので、
ぜひそういったものを活用して
その中から自分がいいなと思ったものを
細部まで見ていくといいと思います。
実際にWebサイト制作をしていると、
参考サイトで挙げられたものと同じような配色、
同じようなテイストで作成しても
なぜかうまくまとまらず、いまいち・・・
という場合が多々あります。
そういった場合も、
なぜこのデザインがよく見えるのか、
効果や余白、フォントの大きさなど
ちょっとしたものでも細かく見ていくことで
どういう風に全体のバランスを取っているのかが
見えてくると思います。

トレース方法

いいデザインのWebサイトを見つけて、
トレースをするには、
まずそのサイトのスクリーンショットをとりましょう。
ページ全体をスクショするには
Chromeの拡張機能(おすすめ拡張機能はこちら)を
使うと便利です。
スクショしたものを、
自分が使うソフト(PhotoshopやIllustrator)に貼り付け、
作業をしていきます。
まずは最初に必要なガイドをひいて、
サイトの構成・サイズをズレなくしていきましょう。
最初は
見本が下にある状態で作業をしていくので、
完全コピーしやすいですが、
細かいところまでしっかりと気をつけて
細部までコピーしていくのが大事です。
手を動かしながらよくそのWebデザインを見ていくことで、
見ているだけでは気づかなかったことや
細かなこだわりまで気付くことができます。
また、
1pxのズレすら許さない、完全なコピーを作ることを
心がけていくと、
きっとそのサイトのデザイナーさんが
どういった意図で、
そのデザインを作成していったかが
少しは理解できるようになるかと思います。

トレースすることで学べるもの

こちらは実経験が元になりますが、
私が実際にトレースをして学べたものを挙げたいと思います。

余白の取り方

Webデザインにおいて、余白は
重要な要素となります。
余白の取り方ひとつで
全体のイメージがガラっと変わります。
ただ、サイトのデザインを多く見ているだけでは
細部の余白まではしっかりと見きれないので、
実際にトレースすることで
これくらいの余白は最低限守った方がいい、
これくらい余白をあけるとこんなイメージになる、
といった大体の感覚を
身につけることができると思います。
また多くのサイトをトレースしていくと
自分の好みの余白の取り方が
きっと自分でわかってくるかと思います。
感覚的なものにはなってしまいますが、
デザイナーにとってそういった面を
スキルアップしていくことは
とても重要なことではないでしょうか。

見出しのデザイン

最近はシンプルで見やすいデザインが主流となっているので、
見出しも下線がひいてあるものや、
フォントの色と大きさが違うだけのものなど、
シンプルなものも多いですが、
実際にトレースするとそういったものも
きちんと計算されて見やすいように作られていることが
よくわかると思います。
フォントサイズひとつにしても、
サイト全体を通して、バラバラのサイズを指定していることは
少ないかと思います。
本文なら◯px、h2なら◯px、h3なら◯px、など
それぞれ統一されていることが多いので、
そちらを気をつけながら、
またどのフォントサイズなら見やすいと感じるのか
などそういった面を気をつけて見ていくといいでしょう。
他にも、アイコンを使用する場合、
アイコンからテキストまでの余白や、
アイコンの大きさと文字の大きさの規則性、
そういったものも
実際にトレースすることで
感覚として身につけることが期待できます。

配色

サイト内の色の使用数や使用色の割合、
差し色もとても勉強になります。
そのサイトがどういうサイトでどういう印象を目指しているのか、
ターゲット層は誰か、などによっても色合いが変わってきますし、
トレースの数をこなすことによって、ちょっとした配色の違いで
印象が変わってくることもわかってきます。

デザインツールの使い方

PhotoshopやIllustratorといった
Webデザイナーが必ず必要とするデザインツールを
実際に使ってトレースするので、
数をこなしていくことで、
効率よく使えるようになってきます。
こんな効果をつけるためにはどうすればいいのか?
こんな図形を作るためにはどうすればいいのか?
自分では思いつかなかったものを作ることで、
新しい方法を学ぶことができます。
また、コーディングのことも考えて
作っていくと上達も早くなります。
これはデザインのスキルアップの中では
感覚的なものではなく、
技術的なものにはなりますが、
効率よく動かせるようになることで
業務のスピードアップにもつながりますし、
何より作りながら覚えていくことで
身につくものも多いと思います。

さらにデザインの上達を目指すなら

ある程度トレースの数をこなしていった後は、
そこから更に上達を目指していくために、
スクショをとった見本の上からデザインしていくのではなく、
見本を横に置きながらしていくことで、
更に上達を見込めます。
またトレースしたものを
自分なりに改善を加えていって
よりよいものを作っていったり、
デザインだけではなくコーディングまで行うのも
いい勉強になると思います。
コーディングまで行うなら、
見本としたサイトのソースは一切見ずに、
実際のWebサイト構築の手順と同じように
デザインを見ながら、
寸法の狂いもなくコーディングしていく。
完成したら見本としたサイトと見比べて
ソースも見比べていくようにすると
同じデザインでも違う構築方法があることが
学べると思います。

Webデザインを上達させる方法いろいろ

Webサイト制作において、
Webデザインを上達させるため
今回は第一歩として「トレースの仕方」について
書かせていただきましたが、
その他にも身に付けたいスキルや
方法もたくさんあります。
理論的なものでいくならば、
色やレイアウト、写真補正など
基礎的な理論を理解していくことも大事です。
トレースをいくつもこなした後は、
実際に自主制作してみるのも
スキルアップにつながります。
コピーや真似ではなく、
完全に1からWebデザインを作成していくことで、
トレースとは違った上達が見込めます。
また、実務ではなく自主制作ということで、
自分が作りたいものを作ることができるので、
考える力も身につくと思います。
何にせよ、Webデザインを上達させたい、と
思うならば、
そのための時間を確保し、
地道に行っていくしか方法はありません。
理論と実践を繰り返し行うことで
デザインスキルがあがっていくので、
自分に合った勉強法を見つけ、
毎日コツコツと積み上げていきましょう。

このエントリーをはてなブックマークに追加
メルマガ登録