HTML
CSS
jQuery
bootstrap
モックアップ

最高のモックアップツールかもしれないBootstrap Studio

1. モックアップツールって何使ってる??

2017年の11月くらいから、毎日コツコツと作っていたWebアプリケーションをなんとか完成しました (色々あってリリースはまだしていません...)。Webアプリケーションを作り始めるときに、はじめに「設計」と「モック」を作りました。

世の中に出ているモックツールのまとめ

色々と調べた結果「Bootstrap Studio」が良さそうだったので、有料版を購入してみましたが、とても良く、Qiitaにもあまり情報共有されていなかったので、使ってみた感想などを、まとめようと思います。

2. Bootstrap Studioについて

スクリーンショット 2018-01-10 22.20.17.png
スクリーンショット 2018-01-10 22.29.44.png

Bootstrap Studio
https://bootstrapstudio.io/

ざっくり概要を...

良い点

  • 25$ → 2,700円くらい
  • bootstrapのcssフレームワークを使ってモックが作れる
  • 基本的にはドラック&ドロップで編集
  • CSSは直接変更可能
  • 変更したモックを即時にブラウザで確認することができる
  • 一生使うことができる(アップデートは1年間無料でできる!)
  • HTMLとCSSとJavascriptが自動で生成される

悪い点

  • HTMLを直接編集できない
  • 日本語入力がペーストでしか入力できない
  • 英語版のみ
  • かゆいとこまでは手が届かない
  • Bootstrapっぽいアプリケーションになる
  • 1ファイルのみ(index.html)しか生成できない。2ファイル作成する場合は別プロジェクト

良い点も悪い点もそれぞれありますが、Bootstrap Studioと他のモックツールと違うとこは、HTML、CSSが自動生成されるとこだと思います。ここが他のモックツールと違うところです。CSSも直接編集できます。編集したものをリアルタイムでブラウザで確認できるため、作業効率は上がりました。

3. Bootstrap studioデモ

【Bootstrap Studio 編集画面】

Qiita投稿用_モック.jpg

Qiita_投稿用.jpg
僕も全ては使いこなせていませんが、基本的に操作は難しくありません。

【エクスポートされた静的ファイル】

スクリーンショット 2018-01-10 23.40.40.png
エクスポートを実行すると、以下の用にHTMLとCSSが生成されます。

4. 実際に作ったもの

【Bootstrap Studioで作った静的画面】

スクリーンショット 2018-01-11 8.13.21.png

スクリーンショット 2018-01-11 8.16.11.png

【JQueryで動的に生成された動的画面(本番)】

スクリーンショット 2018-01-11 7.57.20.png

スクリーンショット 2018-01-11 8.16.50.png

5.Bootstrap Studio最高!!

チームでアプリケーションは組むのであれば、モックアップもデザイナーに発注できると思いますが、非デザイナーがWebアプリケーションをゼロから作るとき、モックを簡単に生成でき、尚且つHTMLとCSSが生成されるBootstrapはとても作業効率が上がる必須ツールだと思います。

 モックさえ出来上がれば、画面側はJavascriptのライブラリなどを使って、DOMを動的に編集する処理を書いていけばOKですね! 2,700円という有料ですが、買い切りで一生使えるツールなので、非デザナーでアプリケーションを作ろうと思っている方にはぜひおすすめです!

また同じようなツールでUIの設計と静的ファイルの生成が同時にできるツール等があれば共有していただきたいです:bow_tone2: よろしくお願いします。

Bootstrap Studio
https://bootstrapstudio.io/