お役立ちサイト

無料!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)

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

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

 

まとめ

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

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

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

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

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

 

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

 

ー完ー


 



読者登録お願いします

なんとついに最初の目標だった10人登録を達成しました! 非常にうれしい。(ただ、その内の2は自分)

しかし、それ以降ずっと一人も増えません。ブログの道は険しい。 …と書いてたら一人増えてくれました、ブログの道は嬉しい。


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

▼この記事を書いた人
”紅葉葉 秀秀逸”というイマイチな名前を名乗る管理人です。
作曲・自主映画・ゲーム制作と節操なくやる創作好き。働きながらやってます。
座右の銘:「ラー油の上」 年齢:鳥

真面目なプロフィール・お問い合わせ
こんなことやってきました


この記事が気に入ったら
いいね!で最新記事をチェック

新着記事を配信中

Twitterで回転オトエフミを

更新情報のプッシュ通知を受け取る



シェアする

-お役立ちサイト   -


おすすめ記事

1
ドラクエ5パパスの「ぬわーーっっ!!」がリメイク版でしれっと激しくなってた件を徹底考察

「ぬわー」 これを聞けば全日本人の70%は一瞬でなんのことかわかるだろう。 &n ...

2
グルメチェーン店レビュー超まとめ!【寿司、とんかつ、ラーメン…】

腹減ってますか? 減ってない方、これから減りますよ。私は減りました。 &nbsp ...

3
自主制作映画の作り方&体験談総まとめ!【無料素材・編集ソフト・ロケ地…】

上の中二病的な画像は、私が撮っている自主映画のワンシーンです。低予算、少人数でプ ...