動かないモックアップ及びワイヤフレームを描く際に今までは「紙とペン」もしくはBalsamiq Mockupsを使っていましたが、「どうせなら描いたモックがHTMLになればいいのに」と欲を出して、Bootstrapテンプレートをベースにモックアップを作れるツールを探してみました。
手軽な物からリッチな物順にまとめてみています。
Bootsnipp
ざっくり言うと、Bootstrapで作っているサイトのパーツ・レイアウト作る用のサービスです
Bootstrapのパーツをドラッグアンドドロップでレイアウトし、HTMLとして出力することが可能です。
Form Builder, Button Builderなど、いろいろな種類のパーツビルダーからレイアウトが作れます。
また、他のユーザが作成したレイアウト(スニペット)を閲覧、HTMLやCSSを取得することが出来ます。
サービス全体のデザイン用ではなく、パーツを作るのに便利そうです。
利用料は無料です。
http://bootsnipp.com/
layoutit!
ざっくり言うと、Bootstrapのグリッドをサクサク組み立てられるサービスです
Bootstrapのパーツをドラッグアンドドロップでレイアウトし、HTMLとして出力することが可能です。
パーツのサイズなどを細かく設定出来るわけではないので、あくまでグリッドを組み立てるための物という感じです。
利用料は無料です。
http://www.layoutit.com/
CODEPLY
ざっくり言うと、すぐにHTMLを確認出来るコードスニペット集です
Bootstrapのパーツをメニューから選択するとHTMLが出力されて、それがブラウザ上でプレビュー出来ます。もちろんHTMLとして出力することが可能です。
テキストメニューからパーツを選んだりするので、モックアップ作成、というよりは、スニペット集に近いと感じました。
利用料は無料です。
JUSTINMIND
ざっくり言うと、モックアップツールです。Bootstrapはパーツとして使えるだけです
利用料はユーザ当たり月額$19です。
http://www.justinmind.com/
日本の代理店があるようです。こちらから説明については日本語で見られます。
http://www.xlsoft.com/jp/products/justinmind/
jetstrap
ざっくり言うと、Bootstrapのサイトをサクサク組み立てられるサービスです
Bootstrapのパーツをドラッグアンドドロップでレイアウトし、HTMLとして出力することが可能です。
配置した各パーツは必要そうな値はほとんど設定出来るので、マウス操作だけでほぼBootstrapのサイトを丸々組み立てられると思います。
スマホだと見た目がどうなるのかなど、レスポンシブ面もプレビュー出来ます。
実際にBootstrapのサイトを組み立てる時に便利かも知れません。
ウェブ上からデモを使うのは無料ですが、デモ版はHTMLの出力などが出来る要素を見つけられなかったので、おそらく有料が前提のサービスです。
利用料は月額$24です。
https://jetstrap.com/
Bootstraup Studio
ざっくり言うと、Bootstrapのサイトをサクサク組み立てられるサービスです
Bootstrapのパーツをドラッグアンドドロップでレイアウトし、HTMLとして出力することが可能です。
配置した各パーツは必要そうな値はほとんど設定出来るので、マウス操作だけでほぼBootstrapのサイトを丸々組み立てられると思います。
USERが作成したパーツらしきパーツも使えるので、決済ページのモックアップもドラッグアンドドロップで簡単に配置できます。もちろん、決済がそれで出来るようになるわけではありませんが。
Bootstrap専用のエディタアプリケーションという表現が正しいかも知れません。
ウェブ上からデモを使うのは無料です。デモ版ではHTMLの出力などは出来ないように制限が掛かっています。実際のアプリケーションはデスクトップアプリケーションです。
利用料は買い切りで$50です。本日時点ではセールで$25の表記がありました(2016/5/11)
https://bootstrapstudio.io/
終わりに
一通り触ってみましたが、モックアップを創造するときにグリッドやレイアウトまで考慮しながら作るのはデザイン素人には難易度が高そうです。一度自由度の高いツールで書いた後に、現実的なレイアウトにこれらのツールを使って落とし込んでいく方が楽そうかなと思いました。
とはいえ、どれもHTMLでBootstrapを弄っていくよりはだいぶ楽そうなので、調べてみてよかった。