ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2