UIトレースは意味がない!おすすめの勉強方法を紹介

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

UIトレースはなぜおすすめ?

UIトレースは、優れたUIデザインを真似することです。以下の3点が身につくのでオススメされています。

  • 良いUIデザインが「具体的にどう良いのかを知る」
  • 良いUIデザインを取り入れる
  • デザインツールのスキルをつける

おすすめしないUIトレースの方法

一方、自分がUIトレースする中で、意味のないUIトレースがあると思ったので紹介。

とりあえず良いと思ったUIをまとめる

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

さらに自分が「良い」と思ったUIを他の人が良いと思うわけではないので危険です。

それよりは以下の「CV(コンバージョン)率ををあげるUI」から、真似すべきUIを知る方が断然客観的です。

すでにCV率が上がると立証されているUIなので、そこらへんの適当なUIよりオススメです。

LPデザインでCV(コンバージョン)率を上げるコツ!18項目押さえよう

 

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

色々なUIの余白などを細かく測って保存するだけのやり方です。

例えて言うなら「勉強ではなくノートを綺麗にまとめて満足する」というもの。

大事なのはまとめることよりも「自分のものにすること」です。

「いくらUIトレースに時間をかけたか」と、「実際にUIトレースが身につくか」は別物です。

自己満足にならないようサクッと良いデザインのポイントを押さえましょう。

 

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

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

人間は一度勉強してもすぐに忘れてしまいます。

一度まとめて終わりになるのだけは避けましょう。

 

UIトレースのおすすめの方法

  1. UIトレースするデザインを選定
  2. UIの良いところを知る
  3. UIをトレースして真似する

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

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

具体的には「LPデザインでCV(コンバージョン)率を上げるコツ!18項目押さえよう」を見て欲しいのですが、

めんどくさい場合は、アプリのUIが以下を満たしているか自己判断しましょう。

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

 

2.UIの良いところを知る

選んだデザインから、以下の要素がどうなっているか調べましょう。

以下の要素が、良いデザインの秘訣になっている可能性が高いです。

UIの見るべきところ

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

良いUIをストックする

上記の見るべき点がわかったら、自分でwebデザインをするときのためにストックしましょう

ここで配色や配置、線などを真似して生かすことができます。

 

3.UIをトレースして真似する

最後にUIをトレースして真似しましょう。

無料で簡単なデザインツールで真似する

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

Adobe XDでUIトレースしてみる

Adobe XDはデザイン初心者向け。プラグインなしで効率化する方法を紹介

 

figmaでUIトレースしてみる

Figmaの使い方、5分で3つだけ覚えればOK【初心者向け】画像で説明

 

SNSやブログで発信する

最後にUIトレースが終わったら、SNSやブログで発信しましょう。

制作会社やクライアントから声がかかる可能性もあるので、モチベも湧きます。

フォロワーが少ないなら、ハッシュタグで「#UIトレース」などとつけるのがおすすめ。

 

UIトレースのおすすめ方法をまとめ

UIトレースは非効率な方法でやると意味がありません。

CV率を意識したwebデザインをトレースしましょう。

他にもwebデザインの勉強方法を知りたい人は以下をどうぞ

【無料】webデザインの独学方法!最短でマスターする4ステップを紹介

 

webデザインの基本ルールがわからない場合は以下をどうぞ

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

webデザインの基本ルール!何から始めたらわからない人への基本5つ