XDでUIトレース！初心者向けにおすすめ・NGなやり方【5分でわかる】

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

Adobe XDでUIトレースするのがオススメな人
Adobe XDでUIトレースする方法
Adobe XDでおすすめしないUIトレースの方法
UIトレースのおすすめ方法をまとめ

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トレースする方法

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

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

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

LPデザインで1番重視すべきは、センスあるデザインにすることではなく、
CV率の上がるデザインにすること。

それを含めて色、画像、配置など考えるべきで無駄な情報は捨てましょう

Pinterestはデザインの参考になりますが、CV率の低そうなのもあるので、参考にしすぎるのは良くないと自重してます

— ふる (@guutenx) 2018年8月24日

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

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

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

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

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

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

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

Adobe XDの基本的な使い方

実際に見本のUIをトレースして真似しましょう。

Adobe XDの基本的な使い方は、以下の動画で7分で紹介しています。

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

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

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

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

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

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

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

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

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

【LP模写制作で必須の検証機能の使い方】

1⃣Chrome開きサイト上で右クリック→検証クリック
2⃣CSSの適用状態を調べたい要素をクリック→右欄でCSS確認(見本サイトの中身を知りたければここまで)
3⃣Chrome上でCSS等を変更してみる(制作中サイトのCSSが上手く適応されない原因を知る場合) pic.twitter.com/eLztDGfeGr

— ふる (@guutenx) August 14, 2018