Web・アプリ開発に使える無料のワイヤーフレームツールまとめ

Pocket

Web制作やアプリ開発では、本格的なデザインに入る前にワイヤーフレーム作ることがよくあります。制作会社によってはPower pointやExcelなどが使われることもありますが、それらはワイヤーフレームに最適化されておらず、やや不便。

以下で紹介するようなツールを使えば、もっと便利で豊富な機能を使うことができます。Excel方眼紙から卒業したい!という方は要チェック。

無料で使えるワイヤーフレームツールまとめ

JUSTINMIND
こちらはワイヤーフレームからデザインまで可能なプロトタイピングツール。PCサイトはもちろん、モバイル向けのサイトやアプリのワイヤーフレームも作れます。Photoshopのような洗練されたUIで、ドラッグ&ドロップでコンテンツを追加することができます。
ワイヤーフレームツールjustinmind

Wireframe CC
こちらは完全フリーで使えるワイヤーフレームツール。Webアプリなのでブラウザ上で編集することができます。簡単なワイヤーフレームならこちらのようなシンプルなツールもおすすめ。
ワイヤーフレームツールwireframe_cc

MockFlow
こちらもブラウザ上でWebサイトやアプリのワイヤーフレームを作ることができます。よく使われるコンポーネントがあらかじめ用意されており、ドラッグ&ドロップだけで簡単に作成可能です。
ワイヤーフレームツールMockFlow

NinjaMock
こちらは完全無料のモックアップ作成ツール。Webサイトだけでなく、モバイルアプリのプロトタイプを作ることができます。しかもニンジャ。
ワイヤーフレームツールNinjaMock

POP
こちらは手書きのラフスケッチをスマホに取り込んで使うちょっとかわったツール。ページ遷移の設定などができるので、ペーパープロトタイピング向けのツールです。
ワイヤーフレームツールPOP

おまけ:手書き派のためのワイヤーフレームツール

ここまでPC上で使用するワイヤーフレームツールを紹介してきましたが、やっぱり手書きのラフスケッチがいい!という方も多いでしょう。そんな手書き派におすすめなのがこちらのようなステンシルキット。

UI Stencil
ui-stencil
多機能定規のようなもののなかに、いろんな形の型が切り抜かれており、ペンでなぞるだけで簡単にラフスケッチを書くことができます。
ui-stencil2
ラフスケッチが綺麗にできたら、先ほど紹介したPOPを使ってスケッチを取り込み、デバイス上でペーパープロトタイピングができたりするのですごく便利!