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も同じになっているというルールを見つけることができました。

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

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



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

サポートお待ちしております〜!

ありがとうございます〜
149

Masaki Haruta

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
13つのマガジンに含まれています
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。