この記事は2016年11月14日に更新しました。

客先でプレゼンする際に、イメージ画像を入れるだけでは魅力が伝わりにくいと感じるときはないでしょうか?

例えば、アプリやWeb制作の場合なら、完成形に近いビジュアルを見てもらう方が見栄えがいいですし、イメージしやすくなります。

そんな時に活用したいのが、完成形に近いイメージ像を簡単に作成してくれるモックアップ作成ツールです。

今回は、オススメしたいモックアップ作成ツール10種をご紹介します。とにかく簡単に使うことができますので、お客様や社内のメンバーに完成イメージを伝える必要がある際は、活用してみましょう。

モックアップとは

モックアップとは、本物に似せた模型のことです。

例えば、携帯ショップに行くとよく製品の大きさやデザインの確認をするためのプラスチック製の実際には使えない模型を見かけます。それがモックアップです。

一般的に、工業製品のプロダクトデザインにおいて外観の試作、検討レベルで作られる模型のことを指します。実際にはモックアップとはそのようなサンプル模型だけでなくソフトウェアやWebサイト、印刷物のデザインを確認するための試作品等も含まれます。

実際の製品を作らなくても仮の予想図を作ることで取引先にデザインを提示することでその取引の価値を高めるだけでなく、わかりやすくイメージをさせることでスムーズな取引にもつながります。それだけでなく、飛行機や航空機などの精密さを求められている工業製品を製造する際にもモックアップは必要不可欠です。

また、デザインの進捗によってモックアップは違う名称で呼ばれたりもします。初期段階はスタディー・モデル、外観のモデルが検討されたときはワーキング・モデル、プロトタイプ・モデルなどと呼ばれます。

かつて素材は木製で作られることが多かったのですが、現在はCAD、CAMによっての製図デザインから自動切削加工でのプラスチック樹脂製がスタンダートです。

モックアップを簡単に作成出来る便利ツール

1.MockUPhone

MockUPhone
http://mockuphone.com/
スマートフォン、タブレットといったあらゆるデバイスのはめ込み画像を作成するツールです。
任意の画像をアップロードすると、自動的に複数の角度のはめ込み画像4パターンを生成します。
生成した画像は画面上でイメージを確認することができ、問題なければ指定したメールアドレス宛に送信することが可能です。

主要なデバイスを広範囲でカバーしており、カラー違いも含めて現在34種が揃っています。(2015年7月24日現在)

便利なポイントは背景が透過してある点で、不要箇所を切り抜いたりする必要なくそのまま使うことができます。
プレゼン資料用のモックアップをサクッと作りたいと思った時に重宝します。

2.ShirtMockup

ShirtMockup
http://www.shirtmockup.com/

好きな画像をアップロードし、Tシャツのモックアップを作成することができるツールです。
Tシャツのデザインを作成、提案する時に活躍します。
最低限必要な機能をフルに備えながらも、誰でも使える画面設計が魅力的です。

画像はjpeg、gifオンリーで最大300kbまでアップロードすることが可能です。
アップロードした画像は自動的にTシャツにはめ込まれます。また、位置変更・回転・拡大縮小ができます。

Tシャツのタイプは標準的で使いやすいstandardと、ユーズド感がお洒落なdistressedの2種から選択することができます。
リアルな影をデザインしてあるのでまるで本物のようです。
でき上がった画像は任意のメールアドレスに送信することができます。

3.Dunnnk

Dunnnk
http://dunnnk.com/
こだわりを感じるクオリティの高いモックアップを作成することができるツールです。
デバイスにただはめ込んだだけの画像ではなく、見せ方にこだわりがあるのが特徴です。

カフェでの作業デスク上や、お洒落な手持ちアイテムと並べたもの他、なんともかっこいい雰囲気のあるテンプレートが50種以上揃います。
好きなテンプレートのサムネイルをクリックすると自動的にアップロードの画面となり、簡単なステップではめ込み画像を作成することが可能です。

iPhone、Android、Macbook、ipad、imacの5カテゴリを用意しています。

4.iPhone Screenshot Maker

iPhone Screenshot Maker
http://iphone-screenshot.com/
シンプルな各種デバイスのモックアップを作成することができるツールです。
サービス名には「iPhone」とありますが、iPad 、iPadmini、Nexus S、Mac、ゲームボーイにも対応しています。
iPhoneは4Sから最新の6Sまでが揃います。

オプション設定が特徴的で、デバイスの画面にあるステータスバーの有無、ステータスバーのみの上書き、反射エフェクト有無、鏡面反射の有無とかなり充実しています。
ステータスバーの文字まで編集が出来るので、かなりこだわってモックアップを作りたい方にオススメしたいツールです。

出力画像のサイズも設定することができ、カスタムサイズも可能です。

5.placeit

placeit
https://placeit.net/
使用中のシチュエーションを多数収録した、実用性の高いモックアップ作成ツールです。
デバイスのみのシンプルなものではなく、背景画像ありのものが欲しい場合にはこちらがオススメです。

対応デバイスが多いことも魅力的で、Amazon kindle、MS Surface、Windows phoneなどのあまり他のツールでは見ないデバイスにも対応しています。

画像は手持ちのものをアップロード出来るだけでなく、URLを入力するだけでもはめ込みが可能です。
作成した画像はSMALL・HIGH・SUPER HIGHの3サイズから好みのものを選択しダウンロードできます。

6.Businesscardstar

Businesscardstar
http://businesscardstar.com/
100以上ものデザインテンプレートを収録した名刺モックアップ作成ツールです。
ポストカードも作ることができます。

テンプレートはCorporate、Elegant、Geometricを含む7カテゴリに分かれており、好みにぴったりのものを探すことが可能です。
モックアップ用とはいえ、本格的なデザインばかりです。
カラー変更、テキスト追加をすることでオリジナル感を出すこともできます。

名刺作成用ツールはあまり見かけませんので、知っておくといざという時に便利です。

7.Frame

Frame
http://frame.lab25.co.uk/
スマホ・PCといったデバイスに任意の画像を差し込むことができるツールです。
フレームは全部で36種類です。(2015年7月24日現在)
デバイスを白背景で撮ったもの、様々なシチュエーションで撮ったもの、どちらも用意してあります。
画像はアップロードのほか、特定のURLからキャプチャしたものを利用することも可能です。

面倒な設定いらずで誰でもすぐにモックアップが作れてしまうので、手頃なツールを探しているという方に特にオススメです。

8.Magic Mockups

Magic Mockups
http://magicmockups.com/
加工したようなオシャレな写真に、任意の画像をはめ込むことができるモックアップツールです。
PC、スマートフォン、ポスターフレームに対応しています。

現在のシチュエーションの数は18個です。(2015年7月24日現在)
他のサービスに比べると作成できるデザインのパターンは少ないものの、どれもとっても素敵なデザインです。
見た目のクオリティを求める場合に一度試してみる価値があります。

9.MakeScreenshots

MakeScreenshots
http://www.makescreenshots.com/
iPhoneアプリのモックアップが手軽に作成できるツールです。
作成したアプリの画面画像をアップロードすると、自動ではめ込んでくれます。
背景色、キャプションを設定するだけでモックアップの完成です。
キャプションは好きなフォント、文字色を選択することができます。

登録、ログインも一切不要で、画面も分かりやすいので、簡単にモックアップを作りたいという方にオススメです。

10.mockDrop

mockDrop
http://mockdrop.io/
Apple Watchにも対応しているモックアップ作成ツールです。
スマートフォン、PC、タブレットにも対応しています。
実際使っているような様々なシチュエーションを用意しており、全体的に落ち着いた雰囲気のものが揃うのが特徴です。

モックアップ作成時に、ちょっとかっこいいものをお探しの際に便利です。

まとめ

以上、今回は簡単にモックアップが作成できるツール10種類をご紹介しました。
いかがでしたでしょうか。

製品のプレゼンテーションをおこなう上で、プレゼン資料は必要不可欠な存在であるものの、文章での説明だけでは伝わらない部分を視覚的に表現することで、ぐっと訴求力を上げてくれます。

モックアップ作成ツールには様々なものが存在しており、スマートフォン対応のものが大半ですが、PC、Tシャツ、名刺といった製品にも対応しているものもあります。

単に画像をはめ込んでくれるだけでなく、色々な角度から表現できたり、雰囲気の良いシチュエーションが用意してあったりと、カスタマイズして好みのものを作成することが可能なため、目的にそって活用してみましょう。

このニュースを読んだあなたにおすすめ

いくらでも持っておきたい無料のパターン素材60選
【2015年版】商用無料の人気フリーフォント35選
Photoshop初心者必見!Photoshopを使いこなすために知っておくべき情報まとめ

このニュースに関連するカリキュラム

LPOに関するカリキュラム

LPOに関するカリキュラム

LPOに関して、カリキュラム形式で学びましょう