Photoshop不要!おしゃれなプロダクトモックアップをサクッと作れるツール5選

2017/09/22

Alex Walker

60

Articles in this issue reproduced from SitePoint
Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2017, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

スマホアプリやWebサービスのランディングページでよく見かける、プロダクトモックアップ。どうやって作っていますか? Photoshopで自分で作ってもいいけど、実はとても簡単におしゃれに作れるツールがたくさんあります。

「モックアップ」は、再現度が低い(low-fiderity)サイトやアプリのレイアウトを模擬的に示したものを指しますが、今回は「プロダクトモックアップ」のお話です。プロダクトモックアップはアプリやサイトが使われている場面を見せるために作るモックアップです。Webサイト、モバイルアプリ、テンプレート、テーマを、ラップトップやデスクトップ、スマートフォン、タブレット、スマートウォッチの画像の画面上にはめ込みます。プロダクトモックアップはデモですが、半分は願望でもあります。

PhotoshopのアクションやSketchの拡張機能で初期画像の上のレイヤーに作品を重ねてゼロから作ることも可能です。

しかし、複数作るうちに、パターンが欲しくなるでしょう。未来の作品用に5つの使えるモックアップ作成専用ツールを紹介します。

SmartMockups

SmartMockups

SmartMockupsはOS XとWindows 7以上で動作する、スタンドアロンのアプリです。料金は1回払いで49ドルです。買い切りなのでiPhone 6のモックアップが2年後に役に立つのか疑問でしたが、SmartMockupsは購入者への永久無料アップデートを約束しています。

もちろん、アプリそのものが終了したらどうにもなりませんが。

SmartMockupsは、機能が豊富で優秀なアプリケーションとして競合と比べても多くのユーザーの支持を得ています(2017年8月版 最新のデザインツールとリソース15選にも掲載されました)。デジタルデバイスのテンプレートはもちろん、屋外広告、チラシ、名刺、アパレル用のテンプレートデザインまで用意しています。万能のツールだと言えるでしょう。

Mockuuups Studio

Mockuuups

Mockuuups StudioはWidows 7以上とOS Xに対応するデスクトップアプリで、独自のベース画像を多数用意しています。

一度立ち上げれば、どんなJPG、PSD、Sketchファイルもドラッグ操作で、260種を超える製品画像のアプリウィンドウに表示できます。PCのほかにスマートフォンやタブレット、スマートウォッチも含まれ、縦画面も横画面も用意されています。よくあるアップル製品だけではなくGoogle、HTC、Samsung、Dellなどのデバイスも用意されています。

デバイスの型や画面の向き、さらにはデバイスを手に取っている人の性別までも指定して画像を絞り込みできます。

無料で24種類の無料製品画像をダウンロードでき、月々5ドル(執筆時点では3.5ドルに値下げされています)で、ほかの243種類の画像をウォーターマーク(透かし)無しで使用できます。

  • Link: https://mockuuups.studio/
  • OS:ブラウザー上で動作するので全OSに対応
  • 価格:プレミアム画像を使うには1カ月あたり5米ドル(無料版あり)

Dunnnk

Duuunk

Dunnnkも超シンプルなオンラインのモックアップ制作ツールで、現在「iPhone、Android、MacBook、iPad、iMac、Apple Watch」の6カテゴリーから、約60種のベーステンプレートが選べます。

画像はすべてオリジナルなのか、ほかでは見かけないもので、一貫性のあるデザインになっています。ベース画像と同じ視点距離になるように、アップロードした画面スクリーンショットをぼかすほど凝っています。また、異様なほど多くのApple Watchの画像テンプレートを提供しています(必要な人は少ないかもしれませんが)。

ページ上に生成した画像は、高品質のまま無料でダウンロードできます。いくつかのテンプレートは、レイヤー化されたPSD形式のファイルとして5〜10ドルで購入できます。

  • Link: http://dunnnk.com/
  • OS:ブラウザー上で動作するので全OSに対応
  • 価格:無料、レイヤー化された再利用可能なPSD形式ファイルを使うには5~10米ドル

Dimmy.Club

DImmy. CLub

Webベースの選択肢としては、Dimmy.Clubもあります。12種類のデバイスしか用意されていませんが、デバイスの色を選べるのは紹介する中ではこのツールだけです。ややアップルに偏っていますが、Google PixelやNokiaも用意されています。

余計なものを取り除いた飾りのない製品画像を求めるなら、どれよりも潰しが利きます。それでももっとシンプルなものがほしければ、製品画像をイラスト化した「vector blueprint」も用意されています。

Dimmy.Clubは完全無料です。

  • Link: https://dimmy.club/
  • OS:ブラウザー上で動作するので全OSに対応
  • 価格:無料

Magic Mockups

Magic Mockups

Magic MockupsはシンプルなWebベースの製品モックアップ製作ツールで、ラップトップ、スマートフォン、タブレット、iMacの画像を提供しています。

現在、約25種類のベース画像が用意されています。無料画像サイトUnsplashとLayerformから収集したと思われ、よく目にする画像です。画像は独自のものではありませんが、無料で使い方が簡単です。

判定

最優秀アプリ

紹介したどのアプリも優れた側面がありますが、個人的にはMockuuups Studioから始めるのが良いと思います。インストール不要で、無料版でも十分優れています。さらに機能を使いたければ比較的安価な有料版があります。

低予算の場合

価格が決め手で、PSD形式の対応が不要なら、無料で多くの選択肢があるDunnnkが良いでしょう。

(原文:5 Fast Tools For Generating Polished Product Mockups

[翻訳:西尾 健史/編集:Livit

Copyright © 2017, Alex Walker All Rights Reserved.

Alex Walker

Alex Walker

sitepoint.comのデザイン・フロントエンド開発者で、SitepointのデザインとUX編集も担当しています。

Loading...