簡単便利!サクッとモックアップが作れる便利ツール10選
この記事は2016年11月14日に更新しました。
客先でプレゼンする際に、イメージ画像を入れるだけでは魅力が伝わりにくいと感じるときはないでしょうか?
例えば、アプリやWeb制作の場合なら、完成形に近いビジュアルを見てもらう方が見栄えがいいですし、イメージしやすくなります。
そんな時に活用したいのが、完成形に近いイメージ像を簡単に作成してくれるモックアップ作成ツールです。
今回は、オススメしたいモックアップ作成ツール10種をご紹介します。とにかく簡単に使うことができますので、お客様や社内のメンバーに完成イメージを伝える必要がある際は、活用してみましょう。
モックアップとは
モックアップとは、本物に似せた模型のことです。
例えば、携帯ショップに行くとよく製品の大きさやデザインの確認をするためのプラスチック製の実際には使えない模型を見かけます。それがモックアップです。
一般的に、工業製品のプロダクトデザインにおいて外観の試作、検討レベルで作られる模型のことを指します。実際にはモックアップとはそのようなサンプル模型だけでなくソフトウェアやWebサイト、印刷物のデザインを確認するための試作品等も含まれます。
実際の製品を作らなくても仮の予想図を作ることで取引先にデザインを提示することでその取引の価値を高めるだけでなく、わかりやすくイメージをさせることでスムーズな取引にもつながります。それだけでなく、飛行機や航空機などの精密さを求められている工業製品を製造する際にもモックアップは必要不可欠です。
また、デザインの進捗によってモックアップは違う名称で呼ばれたりもします。初期段階はスタディー・モデル、外観のモデルが検討されたときはワーキング・モデル、プロトタイプ・モデルなどと呼ばれます。
かつて素材は木製で作られることが多かったのですが、現在はCAD、CAMによっての製図デザインから自動切削加工でのプラスチック樹脂製がスタンダートです。
モックアップを簡単に作成出来る便利ツール
1.MockUPhone
http://mockuphone.com/
スマートフォン、タブレットといったあらゆるデバイスのはめ込み画像を作成するツールです。
任意の画像をアップロードすると、自動的に複数の角度のはめ込み画像4パターンを生成します。
生成した画像は画面上でイメージを確認することができ、問題なければ指定したメールアドレス宛に送信することが可能です。
主要なデバイスを広範囲でカバーしており、カラー違いも含めて現在34種が揃っています。(2015年7月24日現在)
便利なポイントは背景が透過してある点で、不要箇所を切り抜いたりする必要なくそのまま使うことができます。
プレゼン資料用のモックアップをサクッと作りたいと思った時に重宝します。
2.ShirtMockup
好きな画像をアップロードし、Tシャツのモックアップを作成することができるツールです。
Tシャツのデザインを作成、提案する時に活躍します。
最低限必要な機能をフルに備えながらも、誰でも使える画面設計が魅力的です。
画像はjpeg、gifオンリーで最大300kbまでアップロードすることが可能です。
アップロードした画像は自動的にTシャツにはめ込まれます。また、位置変更・回転・拡大縮小ができます。
Tシャツのタイプは標準的で使いやすいstandardと、ユーズド感がお洒落なdistressedの2種から選択することができます。
リアルな影をデザインしてあるのでまるで本物のようです。
でき上がった画像は任意のメールアドレスに送信することができます。
3.Dunnnk
こだわりを感じるクオリティの高いモックアップを作成することができるツールです。
デバイスにただはめ込んだだけの画像ではなく、見せ方にこだわりがあるのが特徴です。
カフェでの作業デスク上や、お洒落な手持ちアイテムと並べたもの他、なんともかっこいい雰囲気のあるテンプレートが50種以上揃います。
好きなテンプレートのサムネイルをクリックすると自動的にアップロードの画面となり、簡単なステップではめ込み画像を作成することが可能です。
iPhone、Android、Macbook、ipad、imacの5カテゴリを用意しています。
4.iPhone Screenshot Maker
http://iphone-screenshot.com/
シンプルな各種デバイスのモックアップを作成することができるツールです。
サービス名には「iPhone」とありますが、iPad 、iPadmini、Nexus S、Mac、ゲームボーイにも対応しています。
iPhoneは4Sから最新の6Sまでが揃います。
オプション設定が特徴的で、デバイスの画面にあるステータスバーの有無、ステータスバーのみの上書き、反射エフェクト有無、鏡面反射の有無とかなり充実しています。
ステータスバーの文字まで編集が出来るので、かなりこだわってモックアップを作りたい方にオススメしたいツールです。
出力画像のサイズも設定することができ、カスタムサイズも可能です。
5.placeit
https://placeit.net/
使用中のシチュエーションを多数収録した、実用性の高いモックアップ作成ツールです。
デバイスのみのシンプルなものではなく、背景画像ありのものが欲しい場合にはこちらがオススメです。
対応デバイスが多いことも魅力的で、Amazon kindle、MS Surface、Windows phoneなどのあまり他のツールでは見ないデバイスにも対応しています。
画像は手持ちのものをアップロード出来るだけでなく、URLを入力するだけでもはめ込みが可能です。
作成した画像はSMALL・HIGH・SUPER HIGHの3サイズから好みのものを選択しダウンロードできます。
6.Businesscardstar
http://businesscardstar.com/
100以上ものデザインテンプレートを収録した名刺モックアップ作成ツールです。
ポストカードも作ることができます。
テンプレートはCorporate、Elegant、Geometricを含む7カテゴリに分かれており、好みにぴったりのものを探すことが可能です。
モックアップ用とはいえ、本格的なデザインばかりです。
カラー変更、テキスト追加をすることでオリジナル感を出すこともできます。
名刺作成用ツールはあまり見かけませんので、知っておくといざという時に便利です。
7.Frame
スマホ・PCといったデバイスに任意の画像を差し込むことができるツールです。
フレームは全部で36種類です。(2015年7月24日現在)
デバイスを白背景で撮ったもの、様々なシチュエーションで撮ったもの、どちらも用意してあります。
画像はアップロードのほか、特定のURLからキャプチャしたものを利用することも可能です。
面倒な設定いらずで誰でもすぐにモックアップが作れてしまうので、手頃なツールを探しているという方に特にオススメです。
8.Magic Mockups
http://magicmockups.com/
加工したようなオシャレな写真に、任意の画像をはめ込むことができるモックアップツールです。
PC、スマートフォン、ポスターフレームに対応しています。
現在のシチュエーションの数は18個です。(2015年7月24日現在)
他のサービスに比べると作成できるデザインのパターンは少ないものの、どれもとっても素敵なデザインです。
見た目のクオリティを求める場合に一度試してみる価値があります。
9.MakeScreenshots
iPhoneアプリのモックアップが手軽に作成できるツールです。
作成したアプリの画面画像をアップロードすると、自動ではめ込んでくれます。
背景色、キャプションを設定するだけでモックアップの完成です。
キャプションは好きなフォント、文字色を選択することができます。
登録、ログインも一切不要で、画面も分かりやすいので、簡単にモックアップを作りたいという方にオススメです。
10.mockDrop
http://mockdrop.io/
Apple Watchにも対応しているモックアップ作成ツールです。
スマートフォン、PC、タブレットにも対応しています。
実際使っているような様々なシチュエーションを用意しており、全体的に落ち着いた雰囲気のものが揃うのが特徴です。
モックアップ作成時に、ちょっとかっこいいものをお探しの際に便利です。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- Webサイト
- Webサイトとは、インターネットの標準的な情報提供システムであるWWW(ワールドワイドウェブ)で公開される、Webページ(インターネット上にある1ページ1ページ)の集まりのことです。
- タブレット
- タブレットとは、元々「板状のもの」「銘板」といった意味の単語です。パソコンの分野で単にタブレットといえば、「ペンタブレット」や「タブレット型端末」などの板状のデバイス全般を指します。ここでは主にタブレット型端末について説明していきます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- サムネイル
- サムネイルとは、多数の画像や動画など、読み込みに時間のかかる情報の概要をおおまかに把握するために作られた縮小画像のことです。 一般的にはサイズ・画質が落とされた画像が採用され、該当の画像や動画を読み込むかどうかを判断するための「見本」として使われます。 元々は親指の爪(thumb nail)という意味を持つ言葉で「サムネ」と略して呼ばれることもあります。
- Android
- Android OSとはスマートフォン用に開発された基本ソフト(OS)の一種です。米国Google社が中心となり開発されました。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- URL
- URLとは、「Uniform Resource Locator」の略称です。情報がどこにあるのかを示すインターネット上の住所のようなものだと考えるとわかりやすいでしょう。各ページのURLは、インターネットブラウザの上部に文字列として表示されています。日本語では「統一資源位置指定子」という名称がついていますが、実際には日本でもURLという語が使われています。
- キャプチャ
- キャプチャとは、出力されたデータを別の機器で取り込み利用可能な状態にすることを言います。例としては、TV映像をパソコンに取り込み、その映像を保存(キャプチャ)し、パソコンで再生可能にすることなどです。ホームページの分野では、ブラウザなどでホームページのデザインを画像として保存することなどを指すこともあります。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- タブレット
- タブレットとは、元々「板状のもの」「銘板」といった意味の単語です。パソコンの分野で単にタブレットといえば、「ペンタブレット」や「タブレット型端末」などの板状のデバイス全般を指します。ここでは主にタブレット型端末について説明していきます。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング