placeit (1)

お役立ちサイト

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

2016/05/07

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

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

本来の意味は「実物とほぼ同様に似せて作られた模型」を指すのですが、ウェブサイト・アプリ等を実際に各端末・デバイス(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)

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

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

 

まとめ

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

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

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

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

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

 

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

 

ー完ー


 

スポンサーリンク

     スポンサーリンク

スポンサーリンク

     スポンサーリンク

この記事がよかったら
いいね!しよう

新着記事を呆然と配信中

呆然としたい人はTwitterで回転オトエフミを…

↓ついでに回転オトエフミ制作の…

紅葉葉 秀秀逸プロフィール

 ●紅葉葉 秀秀逸
 ブログ管理人。90分の自主映画を作り、音楽も全編作曲する程の創作好きです。
 趣味:筆記体を投げ倒す、座右の銘:「ラー油の上」、年齢:鳥


        

真面目なプロフィール・お問い合わせ

ぶっとびアクション映画『抜本-BAPPON-』公開中

【当ブログ制作の”本で戦う”新感覚アクションムービー公開中】
少子化で滅亡の危機に瀕した日本を、本で戦い本で救う、爽快バカアクション!
本編はこちら

-お役立ちサイト
-


おすすめ記事

%e3%82%ad%e3%83%a3%e3%83%97%e3%83%81%e3%83%a3 1
短文強烈堀井節!ドラクエシリーズの全名言を楽しめる「ただのしかばね」のような記事

  ドラクエを愛する人は世に数多く、ドラクエをまあまあ好きな人も数多い ...

img_2629 2
和幸!松乃屋!とんかつチェーン店の違いって?[ランキング付き・随時更新]【三文】

とんかつリミッターが外れている三文享楽です。   なんでか? それはこ ...

soup-672388_640 3
奥深すぎ!? コンソメとは一体…その由来の謎に迫る!【完成されしポタージュ】

  コンソメパンチ。   「ポテトチップはコンソメ味が美味し ...