お役立ちサイト

無料!web・アプリ制作に使えるモックアップ作成ツールまとめ5選

2016年4月29日

モックアーップ。いぇーい、モックアップしてるか~い?

…さて、モックアップって知ってますか?

本来の意味は「実物とほぼ同様に似せて作られた模型」を指すのですが、ウェブサイト・アプリ等を実際に各端末・デバイス(iPhoneとか)で見たときのイメージ画像…みたいなものを指す用語として猛威(?)を振るっています。厳密な定義はともかく、完成イメージ画像がモックアップで、更にそれを実際に動かせるものをワイヤーフレームと呼んだりもします。

制作中のウェブサイトやアプリのイメージを掴むためや、ウェブサイト・アプリの宣伝用画像なんかに使えることと思います。

 

そして、そんなサンプル的な用途のモックアップを作るのにいちいち時間をかけるのはもったいない! ということで、無料でウェブ上でサクッとモックアップを作成できるジェネレーターをまとめました。

今回はその中でもスマホやパソコンのモックアップに特化したサイトを紹介します。

 


Web上でモックアップを作れる素材サイトまとめ

まとめりゃいいんだろ!??! ということで、まとめていきます。

豊富な高品質素材!「Place it」

キャプチャ

Place it

高品質なモックアップ素材が揃っているサイト。使いやすいし素材のパターンも多いしで使いやすいです。色々なデバイスにも対応しているようで総合的にみていい感じです。

どれにはめ込むか選ぶと、こんな感じの画面になります。画像のURLを入れてはめ込むこともできます。

キャプチャ

試しにはめ込むと…

placeit

こんな感じになります。

ただ、無料だと400×300のサイズ小しかダウンロードできないようです。

 

ちょいとオシャレに「Dunnnk」

キャプチャ

Dunnnk

ただはめ込むというよりは、ちょっとかっこよくはめ込む感じのモックアップ。斜めアングルのモックアップ素材が多く、オシャレな感じに仕上がる。

人間もモックアップも斜め45度は鉄板なのかも知れません。

斜め45度の一例。

SAMSUNG CAMERA PICTURES

シャレオツですね! ついでにもう一つ。

SAMSUNG CAMERA PICTURES

うーむ。

 

シンプルイズベスト「Mock UPhone!」

キャプチャ

Mock UPhone

完全にシンプルです。アイフォンやアイパッドにはめ込んだらどうなる?

というのを確認するためだけって感じですね。そして、画像のアスペクト比(縦横比率)をしっかり合わせないとうまく機能しません。

キャプチャ

こんな感じで無理やりはめ込んだ感じになります。

 

すっきりして使いやすい!「Frame」

キャプチャ

Frame

ちょっと工夫されたオシャレ系モックアップとシンプルなモックアップとその中間みたいな感じで、複数パターンのはめ込み画像が用意されています。キャプチャ

シンプルなのはこんな感じ。

16e6fdfe-d1dc-4758-8f9b-6e8cddfb5bd3

ちょい凝ってるのだとこんな感じ。

f3fee315-39cd-43bf-b24c-0cd646947a9c

同じ画像を使ってもはめ込み方で結構印象が違いますよね。上は商品紹介的で、下は日常に溶け込んだ感じです。

 

何故かゲームボーイも「iPhone Screenshot Maker」

キャプチャ

iPhone Screenshot Maker

名前の通りiPhoneに特化したモックアップジェネレーターのサイト…

かと思いきや、そうでもありません。タブレットもあればデスクトップPCもあります。サイトの作りはかなりシンプルでわかりやすいです。

踏み切りサムネB

更には特別枠で何故かゲームボーイまでありました。懐かしすぎる。なんとなくドンキーコングのゲームを思い出しました。

踏み切りサムネB (1)

そしてここまで海外製のサイトばかり紹介してきましたが、このサイトだけが日本製ですね。大和魂にこだわる方はここを利用しましょう。

影の有無、鏡面反射オプションなど、細かいところに手が届くのが日本らしい。

 

まとめ

以上、モックアップ作成ツールでした。

ウェブ上で無料でしかもサクッとモックアップを作れるサイトをまとめたので、非常にお手軽に使えると思います。意味もなくモックアップを作りまくって遊ぶのも面白いと思います。実際、この記事に挿入する画像を作ってて楽しかったです。

それでは最後に現在当ブログで制作中のショートムービのモックアップ画像を貼って終わります。

新作ムービーを楽しそうに見る女性

新作ムービーを楽しそうに見る女性

 

ストリートファイターみたいで面白そ~~~!

 

ー完ー