【新卒2年目】トレースより効果的な私的ウェブデザイン勉強法
お久しぶりです。ウェブデザイナーのかほです。前回の記事から１ヶ月ほど経ってしまいました。5月頭から新しい会社に入社し、新しい環境で仕事を始めてから、丁度１ヶ月が経ちました。ちなみに私は、コロナウィルスの影響でまだリモートワークです。
なので、入社１ヶ月経ったにも関わらず社員の方々と直接お会いしたことがありません・・・笑
それ故の気づきもあります。案外リモートワークでやっていけるんだな、と感じました。ディレクターさんや、先輩方に直接あってコミュニケーションが取れないことで、認識のズレが発生したりフィードバックがうまく伝わらなかったりなどが起こらないか、不安でいっぱいだったのですが、全然大丈夫でしたね。笑 むしろこれを機に、テレワークという働き方が、お子さんを持つ主婦の方たちだけでなく、一般的に広がればいいなと思っています。
そんなことはどうでもよくて、、笑
今日は
「私がサイトトレースをして気づいたより、効果的なデザインの勉強法」を共有したいと思います！
※もちろん、人によってトレースの方が身につくという方もいらっしゃると思うので、その点はご了承ください。
-01.サイトトレースとは
サイトトレースって何？そんなの知らない。という方がいらっしゃると思いますので、軽くご説明いたします。
サイトトレースとは、参考サイト集やなどで優れたサイトや自分のお気に入りのサイトを探して、全体キャプチャを撮影しそのjpgデータをPhotoshopやXdなどで、上からトレースしていくというその名の通りの学習方法です。（jpgは一番下のレイヤーにし、不透明度を下げ、ロックした状態で始めます。）
ただ単に写せばいいというわけでなく、サイトトレースの目的をしっかりと抑えてトレースする様にしましょう。下記にその一例を記載しますね。
・サイト全体のフォントサイズ・・・本文のフォントサイズ（一般的なサイトは13~14pxが主流）、h２、h３、h４、h５、footer、headerの中のフォントサイズ。またそのサイトに見出しの種類（h2~）がいくつあるかを知ることで、そのサイトに掲載されている情報の優先度の細かさが分かります。（優先度の話は、最近聞いてなるほど・・・！と思いました。笑）
・セクションごとのmargin・・・ウェディングサイトや、アパレルブランドのサイトなど、シンプル綺麗目なサイトや、レイアウトが大胆なサイトは、この間隔がすごく空いていますよね。一方、一般的なコーポレートサイトの中には、つまりすぎで見にくいのでは？というくらい詰まっているものもあります。
・サイトの流れ（ユーザーの目線の動き方を意識する）・・・サイトは川の様に流れるレイアウトを組むことが大切と言われています。ウルトラエルという会社でCEOをされているデザイナーのハラヒロシさんは、デザインしたサイトを印刷して、矢印を書き込むことで、導線を明らかにされていました。（この方のツイートかなり勉強になるので、ぜひフォローしてください。）
ちゃんと視線誘導できているかは、自分のデザインに矢印を描きこんでみるとよいです。
— ハラヒロシ / ウルトラエル デザイナー (@harahiroshi) May 20, 2020
矢印に迷いがあれば、誘導が上手くいっていないといえます。 pic.twitter.com/PpqW5l3YHP
・サイト全体の色は何色使用されているか・・・ベースカラーやメインカラー、アクセントカラーには何色使われているか、また何色をどの様な比率で使用されているかを分析しましょう。実際にXdやIllustratorなどで、分析結果をまとめる際に、色の帯グラフをカラーコード付きで制作してみると良いかと思います。
・ボタンの大きさ・・・ボタンの大きさは用途によってかなり変わります。例えば、TOPページから中面ページに移動する際の「View more」ボタンはそんなに大きくなくて良いですよね。その一方、「お問い合わせ」に値するもっとも重要なボタンはコンバージョンを踏まえ、大きくする必要があります。
他にも分析する点はたくさんあるかと思いますが、一例をここに記載しました。参考になれば幸いです！
ここでやっと本題ですが、このトレースより効果的だと色々試してみていて感じた方法があります。それが以下になります。
-02.サイトの模写をする
一緒じゃない？って感じたかと思いますが、私的には全然違いました。笑
これはトレースより時間がかかりますが、すごく勉強になりました。
具体的にどうすれば良いかというと、
①優れたサイト・トレースしたいサイトの全体キャプチャを撮影。（ここまでは同じ）
②XdやPhotoshopで、アートボード（width:1440px※このサイズはいつも私がデザインデータを作るときのサイズですので、人によって違います。）を2つ用意する。（左にキャプチャ画像を1440pxの横幅に調整し、できるだけ近くに隣接で配置する）
③右のアートボードに一から自分で作っていきます。（GoogleChromeの検証ツールを用いて、フォントサイズやマージン、パディング、コンテンツ幅、カラーコード等必要な情報を見ながら、全く同じになるように自分の手でサイトを制作します。）
▽こんな感じで進めます。
▽分析はこんな感じ（※違うサイトですみません。最新の分析です！）
私は普段からデザインをXdでしているので、分析もそのままXdのアートボードに書き込めて、便利です＾＾（LPのような合成やグラフィック要素が必要なものはPhotoshopでデザインしています。）
トレースより、何が効果的だったかというと、
「甘えられない」という点です。笑
トレースで段々めんどくさくなってくると、サイズ等をいちいち数値で確認することなく上からキャプチャと同じサイズで作っていけば良いという甘えが生じてしまいませんか・・・？（真面目な方はそんなことないと思いますが。笑）こうなると全くトレースをする意味がありません。。。
先ほどご紹介した方法であれば、コンテンツ幅や、マージン、フォントサイズを自分で調べて、具体的な数値をデザイン上に入力することで、覚えることができ、感覚も身につきます＾＾
フォントサイズとか、検証ツールで確認するとか手間過ぎ。。。という方にオススメなのが「WhatFont」というGoogleの拡張機能です。
これを使えばブラウザ上で簡単にフォントの種類や詳細情報をみることができます。
その他、マージンを確認できる便利ツールもありますがそれは少し微妙な感じなので今回はご紹介しません。
-03.ある程度、模写・トレースに慣れてきたら・・・
既存のサイトのリニューアルデザインをしてみましょう！いろんな分野のサイトに挑戦することが大切です。（ワイヤーフレームやサイトマップから作れたら最高ですね！）
私は、ほぼ毎週その課題に取り組んでいます。
ただ、毎週となると結構きついです。通常業務ではTOPページを長さにもよりますが、ブラッシュアップの時間も入れて1.5日くらいかけて制作しているので週末が遊べなくなります。なので、時間がないときは、模写にしたり、バナー制作に変えて、できるだけ毎週末何かしらスキルアップできるようにしています！実は最近、平日の終業後と始業前に毎日jsの勉強を本格的に始めました。（自分の時間が増えるので、リモートワーク万歳すぎます！笑）
今はまだ思いっきり遊べる期間ではないので、この時間を自分磨きの時間にするのはいかがでしょうか？＾＾
最後まで読んでくださり、ありがとうございました〜！
また今度、勉強法についてもっとご紹介できたらなと思います＾＾
気になることや、ご質問、アドバイス等がありましたら
コメントか、メールにていただけますと幸いです〜！
この記事が気に入ったらサポートをしてみませんか？