UIトレースの学びを振り返る - キレイに真似るから次のステップへ

最近、今年話題になったサービス(CASH・timebank・FOLIO)のLPをトレースをしていました。独学でデザインを始めた当初もwebサイトやアプリのトレースを行なっていましたが、今回のトレースは今までと違うやり方にトライし、学びが多かったのでnoteに書くことにしました。

実際にトレースしたもの

元々、CASHさんのデザインがとても好きだなと思っており、「シンプルだけど、伝えたいメッセージがしっかり伝わる」。このLPの秘密を知りたくて、最初にトレースすることにしました。

トレースして驚いたのがデザインルールの少なさです。利用されている色は3つだけ。フォントの大きさ・太さ・アンダーラインを使い、目立たせたい情報とそうでないものをハッキリわけていました。美しすぎるサイトでトレースしていて楽しくなりました 

次にトレースしたのはtimebankさんのLPです。今までグラデーションに凝ったサービスをデザインする機会がなかったので、この機会に色々盗もうと思いトレースすることにしました。案の定、グラデーションを完コピするのが難しく、良いトレーニングになりました。

最後にFOLIOさんのLPをトレースしました。Tweetにも書いてある通り、テキストに使われている色の数は少ないですが、情報の優先度によってハッキリ分けてデザインされていました。以前、既存アプリのリデザインをしていた際、文字の組み方が弱いというフィードバックをもらっていたので、今回のトレースはかなり勉強になりました。

今回のポイント

以前のトレースでは、アプリの完コピに終わっていたところがありました。たまに「各マージンが○○px」「フォントサイズが14px」等の情報を整理することはありましたが、正確に真似ることに意識が集中し、なぜそのフォントサイズだったのか、なぜその余白なのか？を深く思考することができていなかったと思います。

今回のトレースのポイントは既存サイトの完コピで終わらせず、「色」「余白」「タイポグラフィー」のパターンを整理したことだと思っています。

元々持っていた課題感が「文字や余白の組み方が弱い」だったので、トレースする際も「文字」「余白」に集中して、既存サイトから盗もうとしていました。結果的に各サイトごとに既存の文字・色・余白の3つに関して、サイトのトンマナを崩さないように整理しました。

その結果、例えばCASHさんでは、各Section同士のmarginは30px、Section内では詳細度の高い情報になるほどmarginの間隔が小さくなり、情報の優先度が同じものはmarginも同じになっているというルールを見つけることができました。

独学でデザインを始めた場合、まずは完璧に真似ることを目指し、ツールの使い方を学んで行くのが良いと思います。ある程度、完璧に真似ができるようになったら、今回紹介したようにそのサイトのデザインルールを自分なりに読み解き、なぜそのデザインになったのかを考察していくと学びの幅が一気に広がると思いました。

引き続き、既存のサイトをトレースしたり、リデザインしてみたり、アプリを自分でデザインしてみたりしてスキルを伸ばしていきたいと思います。