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トレースする方法
- 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
4.実際にUIトレースして真似する
実際にUIトレースして真似してwebデザインをしていきましょう。
以下を意識するのがおすすめです。
- 良いUIデザインが「具体的にどう良いのかを知る」
- 良いUIデザインを取り入れる
- デザインツールのスキルをつける
Adobe XDでおすすめしないUIトレースの方法
一方、自分がUIトレースする中で、意味のないUIトレースがあると思ったので紹介。
とりあえず良いと思ったUIをまとめる
UIトレースでよくこれを行なっている人がいますが、感覚ベースになってしまうので効率が悪いです。
さらに自分が「良い」と思ったUIを他の人が良いと思うわけではないので危険です。
それよりは以下の「CV（コンバージョン）率ををあげるUI」から、真似すべきUIを知る方が断然客観的です。
すでにCV率が上がると立証されているUIなので、そこらへんの適当なUIよりオススメです。
綺麗に時間をかけてUIをまとめる
色々なUIの余白などを細かく測って保存するだけのやり方です。
例えて言うなら「勉強ではなくノートを綺麗にまとめて満足する」というもの。
大事なのはまとめることよりも「自分のものにすること」です。
「いくらUIトレースに時間をかけたか」と、「実際にUIトレースが身につくか」は別物です。
自己満足にならないようサクッと良いデザインのポイントを押さえましょう。
一度UIトレースしたら復習しない
良いUIデザインを取り入れたいなら、日々復習するか実務でデザインをするときに実践できているかチェックをしましょう。
人間は一度勉強してもすぐに忘れてしまいます。
一度まとめて終わりになるのだけは避けましょう。
UIトレースのおすすめ方法をまとめ
UIトレースは非効率な方法でやると意味がありません。
CV率を意識したwebデザインをトレースしましょう。
他にもwebデザインの勉強方法を知りたい人は以下をどうぞ
