UIトレースは意味がない?効率的なUIトレースの方法

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

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

UIトレースの目的

UIトレースの本来の目的は以下2点です。

・良いUIデザインが「具体的にどう良いのかを知る」
・良いUIデザインを取り入れる

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

初心者のためにUXデザイン原則と手法を5分で解説する