1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Adobe XD - アプリ系モックアップ制作時メモ

Last updated at Posted at 2016-09-07

Adobe XDでアプリ系モックアップを作っていると
クライアントを交えたプレビューの時にこうするとクオリティ上がるかも?
的なノウハウを自分が忘れないようにメモ書き。

#背景色を白で作らない

login_sample.png

ケースバイケースなので、必ずしも白がダメというお話ではないのですが、
どうしてもモックを作っているから感があるのか、
白のアートボードままでオブジェクトを配置していってしまうことを、
ついついやってしまいます。私もすごいやる。
勇気を出して背景色を新しく実装された線上グラデーションや、
黒バックに白文字などなど、
画面の大部分を占める背景色に色をつけてあげると
ワイヤーフレーム以上アプリ未満のモックに仕上がる気がします。たぶん。

#一コマ足す

flow.png

例えば項目を選択して次へボタンを押すケース。
いきなりすべてがアクティブになっているものを作って、
口頭でここを選択すると、
ボタンがクリックできるんですよーを説明するよりも、
アートボードを複製してクリック前とクリック後を作り、
プロトタイプモードでリンクをつなぐとより動作がイメージつきやすくなります。
作っている側はイメージ出来ても
説明される側のクライアントはその一コマで助けられるケースが多いので
ちょいたししてあげるとみんな幸せ。私も幸せ。

#まとめ
より実装を意識したモックアップがXDで作れるので、
プレビュー時に、すでにお客様の中でデザインを意識してしまうケースが、
体感ですが多い気がします。
リピートグリッドなどで爆速でモックアップを作れますが、
楽するだけでなく、色使いやコマ足しなど、
もうひと手間加えるだけで
さらにクオリティが上がりクライアントエクスペリエンス(CX)の高い
モックアップが作れると思いますよ!よ!

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?