UIトレースは意味がないと言われる理由。おすすめの方法は?

最近UIトレースが流行っています。
UIトレースとは、イケてるウェブサイトやアプリの色や配置の特徴を把握し真似して制作してみるというものです。

一方、巷でよく言われているUIトレースの方法は非効率的な部分があると思ったので、効率的にUIトレースを行う方法をシェアします。

UIトレースとは？おすすめされている理由は？

UIトレースは、優れたUIデザインを真似することです。以下の３点が身につくことが目的です。

おすすめしないUIトレースの方法。意味がない方法は時間の無駄です

では意味のないUIトレースとはどのようなものでしょうか?

おすすめしないUIトレース1：とりあえず良いと思ったところをまとめてみる

UIトレースでよくこれを行なっている人がいますが、感覚ベースになってしまうので少し効率が悪くなってしまうのではないかと思います。

それよりは後に紹介する「UIデザインが具体的に「どう良いのか」を知る」ためのチェックリストに沿って、具体的に特徴を掴みましょう。

おすすめしないUIトレース2：綺麗に時間をかけてまとめる

これはまさに「勉強ではなくノートを綺麗にまとめて満足する」というもの。大事なのはまとめることよりも「自分のものにすること」です。

また、いくらUIトレースに時間をかけたかと、実際にUIトレースが身につくかは別物です。自己満足にならないようサクッと良いデザインのポイントを押さえましょう。

おすすめしないUIトレース3：一度トレースしたら復習しない

良いUIデザインを取り入れたいなら、日々復習するか実務でデザインをするときにチェックをしましょう。

人間は一度勉強してもすぐに忘れてしまいます。一度まとめて終わりになるのだけは避けましょう。

おすすめのUIトレースの方法は？効率的にUIの勉強をしよう

1.UIトレースするデザインを選定する

ここでのポイントは、UIが優れているものや、LPの場合は「CV率の高い」デザインを選択すること。

デザインを一目見てCV率が高いか否か判断するのは難しいので、以下を判断基準の参考にしてください。

• 自分がUIを使いやすいと感じるか
• LPの場合は申込みしたくなるか
• 情報がすっと頭に入ってくるか、余計な情報がないか
• 申込みまですんなり進むことができるか

pinterestで「webデザイン」「UIデザイン」などと検索して選んでみましょう。

2.UIトレースするデザインが具体的に「どう良いのか」を知る

以下の要素が、良いデザインの秘訣になっている可能性が高いです。選んだデザインからこれらを要素を調べましょう。

例えば、配置や余白について参考にするなら以下のようなワイアーフレームを作ってみることをオススメします。これで似たようなウェブサイトを制作する場合は、参考にすることができます。

3.UIトレースしたデザインを真似する

良いUIデザインのポイントがわかったら、自分でウェブデザインをするときのためのストックにしましょう。
ここで配色や配置、線などを真似して生かすことができます。

ここでウェブデザイン初心者はデザインツールを使いこなす練習にもなるので、AdobeXD、photoshop、figmaなどを利用し真似してみましょう。

ウェブデザイン初心者でない人は、ウェブデザインをするときにするときに2.で得た知識を使う程度で良いと思います。

UXデザイン原則を5分で解説【初心者向け】