TOM CREATIVE(トム クリエイティブ)

MENU

ARTICLE

SCHOOL

何も考えずのUIトレース、WEBトレースは無意味だと思う話。


こんにちはトミオカです。

最近色々なとこでみる、WEBやUIデザインの勉強方法「WEBトレース」や「UIトレース」。

果たしてこれが勉強になるのか自分なりに考えてみました!

個人的には、完全にやり方によると思ってます。
勉強している気になって、何も考えずにトレースするのはもはや時間の無駄です。

それはIllustratorやPhotoshopのツールの勉強なだけで、
WEBデザインの勉強ではないと思っています。

じゃあ実際何を考えてトレースするべきなのか、僕個人の意見をご紹介できればと思います。

サイト選びは慎重に。

まずサイト選びが一番重要だと思います!

ただかっこいいから!とか、お洒落だから!とかではなく、
実際自分でサイトを触ってみて、使いやすいサイトを選んだほうが良いと思います。

WEBサイトに関しては色んな技術や表現方法があります。

例えばブラウザ枠の大きさによってコンテンツ(ボタンなど)の大きさが可変するものや、
コンテンツ幅が決まっていて、コンテンツの大きさは固定のもの。

なので一番最初は、使い勝手がよく、あまり独特な表現をしていない
無難なWEBサイトを選ぶことをおすすめします。

少し難しいとは思いますが、昔からよく見るコンテンツ幅が固定のWEBサイトなどです。

あくまでも例となります!↓

一般的なサイトはしっかりとコンテンツ幅が固定されており、
それを基準として下層ページを組むことが多いです。

可変しない=デザインされた時のままのサイズ感
を確認することができるからです!

UIを意識しながらサイズ感を身につける。

実際に使いやすいサイトを見つけたら、
そのサイトのボタンなど
ユーザーが実際に触る部分の大きさを把握することが大切だと思います。

PC版ではマウスでのクリック部分。(タップできるPC版もある)
SP(スマートフォン)版では指でのタップ部分。

最近はスマフォでサイトを閲覧する方が多いので
SP版は特に重要だと思います。(スマフォファーストとよく言われます。)

この部分をトレースする際どのくらいの大きさで作っているのかしっかりと気にします。
これがわからないだけで、この人はWEBデザインができないと一発でわかってしまいます。

色はスポイトで吸い取るのではなく、自分でつくる。

スポイトで色をとることほど無駄なことはありません。
WEBのカラーモードは「RGB」で配色します。
グラフィックから入った方はここが一番難しいと思います。

思い通りのきれいな色にならず、くすんだ色になったり、蛍光色が強い色になったり。
僕自身もすごい苦労しました。。(泣)

RGBに慣れるためにも、自分自身でカラーパレットをいじって、サイトの色味に近づけてみましょう。

サイトの改善点を考え、自分でリニューアルしてみる。

サイズ感や配色に慣れてきたら、
そのサイトの改善点を考え、自分でリニューアルをしてみましょう。(もはやトレースじゃないですけどw)

前項でご説明したのは、あくまでもサイズ感や色味の話です。

テキストや画像などはサイトからもってきてしまい、
より良いサイトになるよう構成から考えます。

どうしたらファーストビューで思いを伝えられるのか、
このサイトのゴールへユーザーを誘導するにはどういう導線でいくべきか。

おそらくここを考えるのが一番大事ではないかと僕は思います。

構成はWEBディレクターが書くことが多いですが、
それを渡された時、自分なりにもっとよくなる方法を考える力が大切です。

まず最初にサイトの内容を理解しないといけません(テキストなどをしっかり読んでみる)。
そうすると自ずとどうすればよくなるか見えてくると思います。

サイトの内容も理解せず、ただ構成通りに作るのはただの清書屋ですよね?

ただそれがしっかりとした理由で、自分なりに意図がしっかりしていれば
WEBディレクターも納得してくれるはずです。

まとめ

いかがだったでしょうか。

今回のポイントをまとめます。

  • サイト選びは慎重に。
  • UIを意識しながらサイズ感を身につける。
  • 色はスポイトで吸い取るのではなく、自分でつくる。
  • サイトの改善点を考え、自分でリニューアルしてみる。

僕の個人的な意見なので、
勉強法は各々で見つけることが大事だと思います。

ただあまりにも無意味なことをしてしまうと、
時間だけが過ぎ中々身につきませんよね。

基本何をするにも、考えてやることは大切だと思います。

上司の戻し待ちとか、クライアントからの連絡待ちとか、
あらゆるとこで時間は生まれます。

そのちょっとした時間に、頭を使って少し勉強するだけで
周りとの差は極端に開きます。

自分でできるところからWEBの勉強をしてみてはいかがでしょうか!

少しでも参考になれば幸いです!