フリーランスが会社員収入を継続して得られないパターン7つ

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

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

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

UIトレースの目的

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

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

 

UIトレースは意味がない?

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

とりあえず良いと思ったところをまとめてみる

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

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

綺麗に時間をかけてまとめる

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

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

一度トレースしたら復習しない

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

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

 

UIトレースの効率的な手法

1.UIデザインを選定する

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

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

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

 

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

 

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

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

  • 配色
  • 配置
  • 余白
  • フォントサイズ
  • フォント

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

3.真似する

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

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

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

 

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