最近UIトレースが流行っていますが、巷でよく言われているUIトレースの方法は非効率的な部分があると思ったので、効率的にUIトレースを行う方法をシェアします。
目次
UIトレースはなぜおすすめ？
UIトレースは、優れたUIデザインを真似することです。以下の３点が身につくのでオススメされています。
- 良いUIデザインが「具体的にどう良いのかを知る」
- 良いUIデザインを取り入れる
- デザインツールのスキルをつける
おすすめしないUIトレースの方法
一方、自分がUIトレースする中で、意味のないUIトレースがあると思ったので紹介。
とりあえず良いと思ったUIをまとめる
UIトレースでよくこれを行なっている人がいますが、感覚ベースになってしまうので効率が悪いです。
さらに自分が「良い」と思ったUIを他の人が良いと思うわけではないので危険です。
それよりは以下の「CV（コンバージョン）率ををあげるUI」から、真似すべきUIを知る方が断然客観的です。
すでにCV率が上がると立証されているUIなので、そこらへんの適当なUIよりオススメです。
綺麗に時間をかけてUIをまとめる
色々なUIの余白などを細かく測って保存するだけのやり方です。
例えて言うなら「勉強ではなくノートを綺麗にまとめて満足する」というもの。
大事なのはまとめることよりも「自分のものにすること」です。
「いくらUIトレースに時間をかけたか」と、「実際にUIトレースが身につくか」は別物です。
自己満足にならないようサクッと良いデザインのポイントを押さえましょう。
一度UIトレースしたら復習しない
良いUIデザインを取り入れたいなら、日々復習するか実務でデザインをするときに実践できているかチェックをしましょう。
人間は一度勉強してもすぐに忘れてしまいます。
一度まとめて終わりになるのだけは避けましょう。
UIトレースのおすすめの方法
- UIトレースするデザインを選定
- UIの良いところを知る
- UIをトレースして真似する
1.UIトレースするデザインを選定
LPデザインで1番重視すべきは、センスあるデザインにすることではなく、
CV率の上がるデザインにすること。それを含めて色、画像、配置など考えるべきで無駄な情報は捨てましょう
Pinterestはデザインの参考になりますが、CV率の低そうなのもあるので、参考にしすぎるのは良くないと自重してます
— ふる (@guutenx) 2018年8月24日
ここでのポイントは、UIが優れているものや、LPの場合は「CV率の高い」デザインを選択すること。
具体的には「LPデザインでCV(コンバージョン)率を上げるコツ！18項目押さえよう」を見て欲しいのですが、
めんどくさい場合は、アプリのUIが以下を満たしているか自己判断しましょう。
- 自分がUIを使いやすいと感じるか
- 申込みしたくなるか
- 情報がすっと頭に入ってくるか
- 申込みまですんなり進むことができるか
2.UIの良いところを知る
選んだデザインから、以下の要素がどうなっているか調べましょう。
以下の要素が、良いデザインの秘訣になっている可能性が高いです。
UIの見るべきところ
- 配色
- 配置
- 線
- 余白
- フォントサイズ
- フォント
- 形
良いUIをストックする
上記の見るべき点がわかったら、自分でwebデザインをするときのためにストックしましょう。
ここで配色や配置、線などを真似して生かすことができます。
3.UIをトレースして真似する
最後にUIをトレースして真似しましょう。
無料で簡単なデザインツールで真似する
ここでウェブデザイン初心者はデザインツールを使いこなす練習にもなるので、AdobeXD、figmaなどを利用し真似してみましょう。
Adobe XDでUIトレースしてみる
figmaでUIトレースしてみる
SNSやブログで発信する
最後にUIトレースが終わったら、SNSやブログで発信しましょう。
制作会社やクライアントから声がかかる可能性もあるので、モチベも湧きます。
フォロワーが少ないなら、ハッシュタグで「#UIトレース」などとつけるのがおすすめ。
UIトレースのおすすめ方法をまとめ
UIトレースは非効率な方法でやると意味がありません。
CV率を意識したwebデザインをトレースしましょう。
他にもwebデザインの勉強方法を知りたい人は以下をどうぞ
webデザインの基本ルールがわからない場合は以下をどうぞ
