最近UIトレースが流行っています。
UIトレースとは、イケてるウェブサイトやアプリの色や配置の特徴を把握し真似して制作してみるというものです。
一方、巷でよく言われているUIトレースの方法は非効率的な部分があると思ったので、効率的にUIトレースを行う方法をシェアします。
目次
UIトレースとは？おすすめされている理由は？
UIトレースは、優れたUIデザインを真似することです。以下の３点が身につくことが目的です。
- 良いUIデザインが「具体的にどう良いのかを知る」
- 良い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率の高い」デザインを選択すること。
デザインを一目見てCV率が高いか否か判断するのは難しいので、以下を判断基準の参考にしてください。
- 自分がUIを使いやすいと感じるか
- 申込みしたくなるか
- 情報がすっと頭に入ってくるか、余計な情報がないか
- 申込みまですんなり進むことができるか
pinterestで「webデザイン」「UIデザイン」などと検索してみて探しましょう。ただ、Pinterestはオシャレなだけで、UI的に微妙なデザインもあります。
ニャンニャン
2.UIトレースするデザインが具体的に「どう良いのか」を知る
以下の要素が、良いデザインの秘訣になっている可能性が高いです。選んだデザインからこれらがどうなっているのかを調べましょう。
- 配色
- 配置
- 線
- 余白
- フォントサイズ
- フォント
- 形
webデザインの基本ルールがわからない場合は以下をどうぞ
3.UIトレースしたデザインを真似する
良いUIデザインのポイントがわかったら、自分でウェブデザインをするときのためのストックにしましょう。
ここで配色や配置、線などを真似して生かすことができます。
ここでウェブデザイン初心者はデザインツールを使いこなす練習にもなるので、AdobeXD、figmaなどを利用し真似してみましょう。
Adobe XDでUIトレースしてみる
figmaでUIトレースしてみる
UIトレースは意味がない！おすすめの勉強方法を紹介まとめ
UIトレースは非効率な方法でやると意味がありません。
CV率を意識したwebデザインをトレースしましょう。
他にもwebデザインの勉強方法を知りたい人は以下をどうぞ
