TokyoFacebookTwitterHatenaPocketスマホアプリやWebサービスのランディングページでよく見かける、プロダクトモックアップ。Photoshopで自分で作ってもいいけど、実はとても簡単におしゃれに作れるツールがたくさんあります。「モックアップ」は、再現度が低い(low-fiderity)サイトやアプリのレイアウトを模擬的に示したものを指しますが、今回は「プロダクトモックアップ」のお話です。プロダクトモックアップはアプリやサイトが使われている場面を見せるために作るモックアップです。Webサイト、モバイルアプリ、テンプレート、テーマを、ラップトップやデスクトップ、スマートフォン、タブレット、スマートウォッチの画像の画面上にはめ込みます。プロダクトモックアップはデモですが、半分は願望でもあります。PhotoshopのアクションやSketchの拡張機能で初期画像の上のレイヤーに作品を重ねてゼロから作ることも可能です。複数作るうちに、パターンが欲しくなるでしょう。未来の作品用に5つの使えるモックアップ作成専用ツールを紹介します。7以上で動作する、スタンドアロンのアプリです。料金は1回払いで49ドルです。6のモックアップが2年後に役に立つのか疑問でしたが、SmartMockupsは購入者への永久無料アップデートを約束しています。アプリそのものが終了したらどうにもなりませんが。最新のデザインツールとリソース15選にも掲載されました)。デジタルデバイスのテンプレートはもちろん、屋外広告、チラシ、名刺、アパレル用のテンプレートデザインまで用意しています。万能のツールだと言えるでしょう。Xに対応するデスクトップアプリで、独自のベース画像を多数用意しています。一度立ち上げれば、どんなJPG、PSD、Sketchファイルもドラッグ操作で、260種を超える製品画像のアプリウィンドウに表示できます。PCのほかにスマートフォンやタブレット、スマートウォッチも含まれ、縦画面も横画面も用意されています。あるアップル製品だけではなくGoogle、HTC、Samsung、Dellなどのデバイスも用意されています。デバイスの型や画面の向き、さらにはデバイスを手に取っている人の性別までも指定して画像を絞り込みできます。無料で24種類の無料製品画像をダウンロードでき、月々5ドル(執筆時点では3.5ドルに値下げされています)で、ほかの243種類の画像をウォーターマーク(透かし)無しで使用できます。Watch」の6カテゴリーから、約60種のベーステンプレートが選べます。画像はすべてオリジナルなのか、ほかでは見かけないもので、一貫性のあるデザインになっています。ベース画像と同じ視点距離になるように、アップロードした画面スクリーンショットをぼかすほど凝っています。Watchの画像テンプレートを提供しています(必要な人は少ないかもしれませんが)。ページ上に生成した画像は、高品質のまま無料でダウンロードできます。いくつかのテンプレートは、レイヤー化されたPSD形式のファイルとして5〜10ドルで購入できます。価格:無料、レイヤー化された再利用可能なPSD形式ファイルを使うには5~10米ドルDimmy.ClubWebベースの選択肢としては、Dimmy.Clubもあります。12種類のデバイスしか用意されていませんが、デバイスの色を選べるのは紹介する中ではこのツールだけです。PixelやNokiaも用意されています。余計なものを取り除いた飾りのない製品画像を求めるなら、どれよりも潰しが利きます。blueprint」も用意されています。Dimmy.Clubは完全無料です。MockupsはシンプルなWebベースの製品モックアップ製作ツールで、ラップトップ、スマートフォン、タブレット、iMacの画像を提供しています。現在、約25種類のベース画像が用意されています。無料画像サイトUnsplashとLayerformから収集したと思われ、よく目にする画像です。画像は独自のものではありませんが、無料で使い方が簡単です。Studioから始めるのが良いと思います。インストール不要で、無料版でも十分優れています。機能を使いたければ比較的安価な有料版があります。価格が決め手で、PSD形式の対応が不要なら、無料で多くの選択肢があるDunnnkが良いでしょう。Walkersitepoint.comのデザイン・フロントエンド開発者で、SitepointのデザインとUX編集も担当しています。