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

これまで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デザインを上達させたい、と思うならば、そのための時間を確保し、地道に行っていくしか方法はありません。

理論と実践を繰り返し行うことでデザインスキルがあがっていくので、自分に合った勉強法を見つけ、毎日コツコツと積み上げていきましょう。

マーケティングでお悩みでしたら、
Bigmacにお任せください。