Mockup Designerはローカルストレージを使ったWebベースのモックアップ開発ツールです。

Webサイトを作ったり、iOSアプリを開発したりする際にまず作っておきたいのがモックアップ(ワイヤーフレーム)です。


シンプルで飽きのこないデザインです。


配置はドラッグアンドドロップでできます。


色の変更や配置順の変更も可能です。


ウィンドウサイズも変えられます。


エクスポートは画像になります。

Mockup Designerはそれほど構成要素は多くなく、フォームや文字、テーブル、円と四角といった形状くらいになります。しかし表現自体は十分にできそうです。今後コミュニティベースでパーツが増えていけば、面白いツールに仕上がりそうです。データはローカルストレージに保存され、画像としてエクスポートできます。

Mockup DesignerはHTML5製のソフトウェア(ソースコードは公開されていますがライセンスは明記されていません)です。

MOONGIFTはこう見る

ワイヤーフレームを作る際のコツとして、作りすぎてはいけないというのがあります。精密に作れるツールを目の前にすると、人はどうしてもきちんと作り込もうとしてしまうのです。その結果、大きな時間ロスと修正時のコスト増につながります。

ワイヤーレベルではとにかく手書き風に乱雑に作れるものの方が喜ばれます。Mockup Designerのデザインも線が太めてカジュアルなデザインに仕上がります。後は色々なパーツができることで、より複雑なWebサイトも表現できるようになるでしょう。

Mockup Designer

fatiherikli/mockup-designer