WEB時短ツールは、Webのお仕事を快適にする便利なオンラインツール・素材へのリンク集。今日も少し早くお家に帰れますように。

現在の登録数:439サイト

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

2014/08/11

MockFlow

サイト名: MockFlow [ http://www.mockflow.com/ ]

カテゴリ: ワイヤーフレーム

タグ:

概要:

Web用、モバイル用のワイヤーフレームがオンライン上でサクサク作れるワイヤーフレームツールです。ワイヤーはテンプレートを選択してカスタマイズすることができるので時短にもなります。Bootstrap用のコンポーネントも完備です。利用には会員登録必須。

使い方

■ アカウント登録

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

■ プロジェクトの作成

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

■ フレームワークの選択

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

■ テンプレートを選択

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

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

■ コンポーネントの編集

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

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

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

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

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

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

■ 保存

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

■ 保存したプロジェクト

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

利用プラン

thum_01_09_013