WebのUIは自由度が高い分、イチから作るのは手間がかかります。そうした状況だからこそ、Bootstrapのように見栄えの良いUIが作れるフレームワークに人気が集まりました。しかし、Bootstrapの記法に沿ったHTMLの手打ちすら面倒に感じてきます。 そこで使ってみたいのがBootstrap Page Builderです。ドラッグ&ドロップで簡単にUIが作れます。

Bootstrap Page Builderの使い方

メイン画面です。左側に部品が、右側にエディタが表示されています。

メイン画面

グリッド構成も簡単に実現できます。

グリッド

多数のパーツが用意されており、それらをドラッグ&ドロップして画面を作っていきます。

パーツ配置

プレビューです。基本的には同じ見た目が再現されます。

プレビュー

スマートフォンサイズなどレスポンシブな表示確認も簡単です。

プレビュー（スマートフォン）

Bootstrap Page Builderを使えばBootstrapを使った画面設計が簡単にできます。WYSIWYGなツールでUIを作ると込み入ったHTMLが出力されることがままありますが、Bootstrap Page BuilderであればBootstrapがベースなので綺麗で分かりやすいHTMLが出力されるでしょう。

Bootstrap Page BuilderはJavaScript製のオープンソース・ソフトウェア（MIT License）です。

Bootstrap Page Builder Vegetam/BootstrapPageGenerator: Bootstrap Page Generator as layoutit