モックアーップ。いぇーい、モックアップしてるか～い？
…さて、モックアップって知ってますか？
本来の意味は「実物とほぼ同様に似せて作られた模型」を指すのですが、ウェブサイト・アプリ等を実際に各端末・デバイス（iPhoneとか）で見たときのイメージ画像…みたいなものを指す用語として猛威（？）を振るっています。厳密な定義はともかく、完成イメージ画像がモックアップで、更にそれを実際に動かせるものをワイヤーフレームと呼んだりもします。
制作中のウェブサイトやアプリのイメージを掴むためや、ウェブサイト・アプリの宣伝用画像なんかに使えることと思います。
そして、そんなサンプル的な用途のモックアップを作るのにいちいち時間をかけるのはもったいない！ ということで、無料でウェブ上でサクッとモックアップを作成できるジェネレーターをまとめました。
今回はその中でもスマホやパソコンのモックアップに特化したサイトを紹介します。
Web上でモックアップを作れる素材サイトまとめ
まとめりゃいいんだろ！？？！ ということで、まとめていきます。
豊富な高品質素材！「Place it」
高品質なモックアップ素材が揃っているサイト。使いやすいし素材のパターンも多いしで使いやすいです。色々なデバイスにも対応しているようで総合的にみていい感じです。
どれにはめ込むか選ぶと、こんな感じの画面になります。画像のURLを入れてはめ込むこともできます。
試しにはめ込むと…
こんな感じになります。
ただ、無料だと400×300のサイズ小しかダウンロードできないようです。
ちょいとオシャレに「Dunnnk」
ただはめ込むというよりは、ちょっとかっこよくはめ込む感じのモックアップ。斜めアングルのモックアップ素材が多く、オシャレな感じに仕上がる。
人間もモックアップも斜め45度は鉄板なのかも知れません。
斜め45度の一例。
シャレオツですね！ ついでにもう一つ。
うーむ。
シンプルイズベスト「Mock UPhone！」
完全にシンプルです。アイフォンやアイパッドにはめ込んだらどうなる？
というのを確認するためだけって感じですね。そして、画像のアスペクト比（縦横比率）をしっかり合わせないとうまく機能しません。
こんな感じで無理やりはめ込んだ感じになります。
すっきりして使いやすい！「Frame」
Frame
ちょっと工夫されたオシャレ系モックアップとシンプルなモックアップとその中間みたいな感じで、複数パターンのはめ込み画像が用意されています。
シンプルなのはこんな感じ。
ちょい凝ってるのだとこんな感じ。
同じ画像を使ってもはめ込み方で結構印象が違いますよね。上は商品紹介的で、下は日常に溶け込んだ感じです。
何故かゲームボーイも「iPhone Screenshot Maker」
名前の通りiPhoneに特化したモックアップジェネレーターのサイト…
かと思いきや、そうでもありません。タブレットもあればデスクトップPCもあります。サイトの作りはかなりシンプルでわかりやすいです。
更には特別枠で何故かゲームボーイまでありました。懐かしすぎる。なんとなくドンキーコングのゲームを思い出しました。
そしてここまで海外製のサイトばかり紹介してきましたが、このサイトだけが日本製ですね。大和魂にこだわる方はここを利用しましょう。
影の有無、鏡面反射オプションなど、細かいところに手が届くのが日本らしい。
まとめ
以上、モックアップ作成ツールでした。
ウェブ上で無料でしかもサクッとモックアップを作れるサイトをまとめたので、非常にお手軽に使えると思います。意味もなくモックアップを作りまくって遊ぶのも面白いと思います。実際、この記事に挿入する画像を作ってて楽しかったです。
それでは最後に現在当ブログで制作中のショートムービのモックアップ画像を貼って終わります。
新作ムービーを楽しそうに見る女性
ストリートファイターみたいで面白そ～～～！
ー完ー