XDでUIトレース！初心者向けにおすすめ・NGなやり方

SHARE

Adobe XDでUIトレースするおすすめの方法・NGなやり方を初心者向けに紹介します。

Adobe XDでUIトレースするのがオススメな人

UIトレースはPhotoshop、sketchなど様々なデザインツールを使って行うことができます。

その中でもAdobe XDでUIトレースをするのがオススメな人を紹介します。

無料でUIトレースをしたい

Photoshopは月額980円、sketchは買いきりで1万円しますが、Adobe XDは永年完全無料で使うことができます。

お金をかけたくない人におすすめです。

 

デザイン初心者が1番簡単にUIトレースしたい

Webデザイン初心者がUIトレースするのに一番簡単なデザインツールがAdobe XDです。

さらにPhotoshopよりも動作が軽いです。

 

デザインツールが指定されていない

社内やクライアント先の決まりでsketchやPhotoshopを使ってデザインをする、などルールが決まっていない場合はAdobe XDが気軽にデザインできるのでオススメです。

 

Adobe XDで今後デザインする

特に今後Adobe XDでWebデザインをする仕事がある人は、デザインツールの使いこなし方がわかるので、おすすめです。

私自身もWebサイトのデザインをすることが多いのですが、Webデザインは基本的にAdobe XDで行なっています。

 

Adobe XDでUIトレースする方法

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

1.UIトレースするデザインを選んで抜きだす

UIトレースするデザインの選び方

考えるのがめんどくさい場合は、以下の観点で選ぶのが効率が良くておすすめです。

  • 難易度が自分のレベルにあっているもの
  • 有名サービスのデザイン（LINEやUberなど）
  • 自分が今後作るデザインに似ているもの

 

UIトレースするデザインの抜き出し方

Google Chromeの拡張機能であるFull Page Screen Captureを使って、サイト全体の画像をダウンロードするのがおすすめ。

ここではUberのサイトをダウンロードしました。

 

2.Adobe XDのアートボードに見本を貼る

Adobe XDのアートボードに貼る

自分が作ったアートボードの隣に見本のUIを貼って、UIトレースするのが分かりやすくておすすめ。

 

3.各要素の数値・色などを抜き出す

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

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

UIトレースで見るべきところ

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

 

Webサイトの検証で抜き出す

実際のサイトをChromeで検証して抜き出すのが、分かりやすくておすすめです。

 

4.実際にUIトレースして真似する

実際にUIトレースして真似してWebデザインをしていきましょう。

以下を意識するのがおすすめです。

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

 

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

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

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

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

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

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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

【無料】Webデザインの独学方法！4ステップだけ

前の記事

なんかダサいデザイン17パターンを初心者向けに解説

次の記事

UIデザインの心理学9つのポイント解説【初心者向け】