思考を妨げずに、モックアップをさくさく作成できるオンラインツール -Mockup Designer

ブラウザのローカルストレージを使用して、直観的なインターフェイスでモックアップを簡単にさくさく作れるオンラインツールを紹介します。

Mockup Designer

気になるのは日本語の文字化けですが、Chrome, Firefoxで試したところ、どちらも文字化けせずに利用できました。

文字化けのテスト

書き出し機能はPNG画像を生成し、そちらも平気でした。

Exportしたモックアップ

使い方は、非常に簡単です。
左のパネルから、エレメントをキャンバスにドラッグして配置します。

エレメントを左からドラッグ

「Typography」の「h1」を編集してみます。
見出しを選択すると下部のパネルに編集項目が表示されるので、文字・サイズ・カラーを変更できます。エレメントの削除もこのパネルで行います。

見出しの編集

続いて、矩形の編集。
ドラッグ&ドロップで移動やサイズ変更ができ、パネルからもサイズ変更・カラー・ボーダーが変更できます。

エレメントを左からドラッグ

エレメントは12種類と厳選されて少ないですが、思考を妨げることがないので、これくらいシンプルな方がいいかもしれません。