気になるプロダクト

MOCKUUUPS STUDIOでユーザーの利用シーンを想像しながらデザインしてみる

2016-11-23


自分がデザインしたプロダクトを、実際にユーザーが手のひらに広げてみたらどのように見えるんだろう…?
そんなときはこのアプリが役立ちそうです。先日リリースされたばかりのMOCKUUUPS STUDIOを紹介します。

ドラッグ&ドロップするだけでモックアップが簡単に作れる!

まずはSketchやPhotoshopなどでモックアップに適用したい画像を用意します。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-23-10-27-27

有料だとSketchとMOCKUUUPSを連動させることが出来るのですが、今のところ無料で使っているので一旦PNG形式で書き出します。

MOCKUUUPSを起動します。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-23-10-29-44

使いたいシーンを選びます。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-23-10-30-15

先程書き出したPNG画像をドラッグ・アンド・ドロップしてくると、こんな風に。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-23-10-34-11

一覧ページでもこんな感じに。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-23-10-34-21

デバイスの種類、手の種類、デバイスの方向を指定できます。
%e3%82%b9%e3%82%af%e3%83%aa%e3%83%bc%e3%83%b3%e3%82%b7%e3%83%a7%e3%83%83%e3%83%88-2016-11-23-10-34-56

めちゃくちゃシンプルで使いやすいですね!
無料でもほとんどの機能が利用可能ですが、有料版はSketch・Photoshopとの連動や新しいシーンの追加が行われるようです。ぜひお試しください。

書き手:小島 芳樹
Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。
Twitter: @yoshikikoji