収入・働き方別プログラミング言語の選び方

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

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

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

UIトレースとは?おすすめされている理由は?

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

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

 

意味ないUIトレースの方法。時間の無駄です

意味のないUIトレースとはどのようなものでしょうか?時間の無駄は言い過ぎですが、非効率な勉強になってしまいます。

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

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

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

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

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

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

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

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

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

 

UIトレースのおすすめの方法は?効率的にUIの勉強をしよう

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

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

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

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

pinterestで「webデザイン」「UIデザイン」などと検索してみて探しましょう。ただ、Pinterestはオシャレなだけで、UI的に微妙なデザインもあります。

cv率の高いデザインは以下を参考にしてね

ニャンニャン

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

 

 

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

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

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

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

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

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

 

3.UIトレースしたデザインを真似する

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

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

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

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

 

figmaでUIトレースしてみる

figmaの使い方を5分で説明!重要なことだけ超初心者向けに解説

 

 

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

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

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

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

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