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

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

サイトのキャプチャ

Moqups

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

サイトのキャプチャ

Moqupsの特徴

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

Moqupsの使い方

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

サイトのキャプチャ

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

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

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

サイトのキャプチャ

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

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

サイトのキャプチャ

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

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

サイトのキャプチャ

ドキュメントの設定

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

サイトのキャプチャ

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

top of page

©2017 coliss