オンライン上で簡単にワイヤーフレーム作成！テンプレートでサクサク作れるのMockFlow

使い方

■ アカウント登録

Basicプランは無料で利用できます。
その他のプランは後述します。

■ プロジェクトの作成

[Add Project]ボタンよりプロジェクトを作成します。

■ フレームワークの選択

白紙、ブートストラップ、モバイル等から選択できますが、今回はテンプレートを選択します。

■ テンプレートを選択

沢山のテンプレートがあるので、お好みのテンプレートを選んで[Import]ボタンをクリック。

かなりの時短でワイヤーフレームが出来上がります。

■ コンポーネントの編集

既に設置されてコンポーネントを選択すると、右側に編集パレットが表示され、テキストやサイズを変更できます。
（残念ながら日本語は使えないようです。）

右側のコンポーネントから、新しいパーツをドラッグ＆ドロップで配置することもできます。。

■ コンポーネントの種類・ページ

たくさんのコンポーネントがあります。pagesタブでページの追加も可能です。ちょっとfireworksに似てますね。

■ HTMLのダウンロードも可能

プランによってはHTMLのダウンロードも可能です。
（無料のBasicプランではできませんでした）

■ 保存

メニューバーの[Save]ボタンで保存可能。

■ 保存したプロジェクト

保存したプロジェクトは後でも編集可能。
また、他のメンバーと共有も可能。便利です。

利用プラン

Tweet