【誰でも簡単に!】モックアップを作成できるおすすめツール5選

ここではモックアップの作成を簡単な操作で行うことができる便利なツールを紹介していきます。Webデザインの作成時に外観・レイアウト等を確認するためにぜひご利用ください。誰でも簡単に使える便利なツールです。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が1,000以上あります。

モックアップとは、Webデザインの作成時に外観・レイアウト等を確認するためのものです。ここではモックアップの作成を簡単な操作で行うことができる便利なツールを紹介していきます。

 

draw.io

mu5_1

web上で操作するモックアップ作成ツールで、無料で使用可能です。

左のメニューからパーツを選び画面上へ配置し、右のメニューで色やテキストなどを編集します。

ローカルから画像ファイルをドラッグ&ドロップしてアップロードすることも可能です。

チュートリアル動画もあるためいつでも使い方を確認することができます。

作成したxmlファイルはその場でダウンロードできる他、GoogleDrive・OneDrive・Dropboxなどのクラウドストレージに保存可能です。

draw.io

 

Mockingbird

mu5_2

draw.ioと同じくweb上で操作が可能なツールです。

「Add element」メニューから素材を配置し、大きさやテキストを編集することでモックアップを作成します。

ステンシルにGoogleマップやSNSアイコンなど実用的なものが多く、イメージしやすい仕様になっています。

無料会員でも画面内への画像ファイルのインポートや、作成したモックアップのpdf・png形式でのエクスポートが可能です。

Mockingbirdの使い方

 

[PR] スマホアプリの開発で挫折しない学習方法を動画で公開中

gliffy

mu5_3

こちらもweb上で作成可能なモックアップ作成ツールです。

メニューバーのカスタマイズがある程度可能になっており、自分の作業しやすい環境にできるのが特徴です。

ユーザー登録をしている場合は画像のアップロードも可能になっています。

無料版ではgliffy専用のファイル形式でのみファイルのエクスポートができる仕様です。

gliffyの使い方

 

moqups

mu5_4

web上でモックアップの作成が可能なツールで、ステンシルやアイコンが豊富 に用意されています。

ユーザー登録をしている場合は画像ファイルのアップロードも可能です。(無料会員でも可)

作成したファイルをpdf・pngでエクスポートする場合は有料会員登録が必要になっています。

moqups

 

Flinto

mu5_5

スマートフォン向けのモックアップ作成ツールで、ダウンロードして使用します。

macとiOSでの作業が可能で、どちらも有料ですが無料の試用期間があります。

画像をアップロードし、それらを繋げて画面遷移の設定を行うことができます。また、この時ページ遷移時のエフェクトも複数から選べるようになっています。

Dropboxとの連携やシェア機能も充実しているのが特徴です。

Flinto

 

以上、モックアップを作成するツールを紹介しました。

会議やプレゼンでも利用できますし、個人でWebサービスを作る上でも役立つツールなのでぜひ利用してみてください。

[お知らせ]TechAcademyでは初心者でもUI/UXデザインができるようになるUI/UXデザインオンラインブートキャンプを開催しています。現役UI/UXデザイナーのサポートで学びたい場合はご参加ください。