モックアップとは、直訳すると、模型という意味です。社内やクライアントに、制作物の完成時のイメージをより、出来上がりに近い形で伝えるために用いられます。モックアップは、あるに越したことは無いですが、モックアップを１から作成して時間を取られてしまっていては得策とは言えません。そこで、今回は、便利なモックアップを簡単に作れるツールをご紹介します。
MockUPhone
web制作で重要になる、実際にデバイスやマシンでページを閲覧した時に、どのような感じで表示されるかがわかるモックアップが簡単に制作できます。Macbookやimac、iphone、ipadだけでなく、androidやSurface、さらにはテレビといったマシンのモックアップを、画像をアップロードするだけで簡単に制作できます。
また、背景は透過になっており、資料などに配置する際に面倒な切り抜きを行う必要もありません。
実際に作成してみた画像のスクリーンショットです。とてもシンプルでわかりやすいですね。
fluid
スマホのアプリ画面のモックアップ作成に特化したツールです。検索窓やボタン等の様々なパーツ素材が用意されているため、画像をアップロードするだけで、自由にカスタマイズされたモックアップを作成することができます。
Adobe Edge Reflow CC
Adobeが提供しているサービスの一つで、レスポンシブデザインを作成すると同時に、正確なモックアップを作成することができます。CreativeCloudを利用していて他のソフトでデザインをしている場合は、こちらのソフトでレスポンシブ化してそのままモックアップを生成してしまうのが良いでしょう。
Free iPhone Mockup Generator & App Demo Videos by Placeit
より実際に使用しているイメージが伝わるようなモックアップを簡単に作成できるツールです。好きな画像を画面上にドロップするだけで、画像内の画面に、自動で画像を埋め込むことが可能です。拡大縮小して、実際に切り抜かれる大きさでの設定ができるので、不自然な印象を与えません。
実際に作成してみた画像です。とてもお洒落な仕上がりですね。背景が透過してあるものもあるので、背景を変えたい方も便利に使えると思います。
Cacoo
Cacooでは、ワイヤーフレームやモックアップを簡単にweb上で制作することができます。さらに、共有することで編集を複数人で行うことができるので、アプリケーションを立ち上げて、作成保存、アップロードしてメールで送信。なんていう手間を省くことが可能となります。モックアップ作成以外にも様々な用途で使えるので、使い方を知っておくと大変便利だと思います。
