Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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/

Yuta_Fujiwara
SoftwareEngineer / Runner / OH MY GOD, LLC / CEO / 個人開発やフリーランスエンジニアをしています。Webのフロントエンドが得意です。夢はストックオプションでビルを建てること
http://yutafujiwara.hatenablog.com/
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした