快適にさくさく作れる、ワイヤーフレーム・モックアップがブラウザ上で作成できるHTML5アプリ -Moqups

デスクトップ・スマートフォン用のワイヤーフレーム・モックアップ・UIコンセプトが快適にさくさく作成できるHTML5アプリを紹介します。

Moqups

[ad#ad-2]

まずは、一番気になる日本語の対応は、文字化けせずにプレビューも保存もできました。

• Moqupsの特徴
• Moqupsの使い方

Moqupsの特徴

• ドラッグ&ドロップでエレメントを簡単に配置できます。
• 約60種類のUIエレメントを用意。
• PDF, PNGへの書き出し。
• HTTPS対応。
• 自動保存。
• スマートガイド。
• カスタマイズ可能なグリッド。
• オブジェクトはグリッドにスナップ。
• オブジェクトのロックとグループ化。
• 右クリックで、Undo/Redo/Cut/Copy/Pasteなど。
• 上記の操作はキーボードでも可。
• タグ付けと検索機能
• 画像のアップロード
• メールによる共有。

Moqupsの使い方

Moqupsを使うにはとりあえず登録は必要ありませんが、機能が制限されます。
機能の制限はたとえば、書き出しがSVGのみになります。

登録無しは、SVG書き出しのみ

登録は簡単で、右上の「Account」から「Register now!」をクリックし、メールとユーザー名を入力しパスワードを設定するだけです。

登録すると、書き出しでPDFやPNGが可能になります。

登録すると、PDF/PNGの書き出し可

[ad#ad-2]

使い方は簡単で、左のパネルからUIエレメントをドラッグし、右のドキュメントに配置します。
テキストの変更はダブルクリックです。

左からエレメントをドラッグしただけ

各エレメントはグリッドにスナップされ、簡単に綺麗に配置できます。
ドキュメント自体の設定は、上バーの「Setting」から行います。

ドキュメントの設定

デスクトップ用のエレメントだけでなく、スマートフォン用のエレメントも用意されています。

スマートフォン用のワイヤーフレームもOK