BootstrapStudioの使い方の感想を書いてみました

ドラッグアンドドロップでちょっとしたペラモノのサイトができる、BootstrapStudioが便利なのでレビューしてみます。
英語なのでちょっと分かりにくいですが、操作は直感的にできるのでHTMLとCSSが分かっている人なら問題ないと思います。
<公式サイト>
https://bootstrapstudio.io/
今回はずっとアップデードしていただけるという「Lifetime」版を購入してみました。
BootstrapStudioの使用感
ダウンロード型アプリなので、インストールして起動します。画面はこのような感じ。
左側の「New Design」からサイトを新規作成します。

好きなテンプレートを選んで「Create」を押します。Blankはまっさらなページを作ることもできます。

開いたところ。各パーツを選択すると、右側のパネルにマージンやパディングとか、リンクの指定などもできます。

左側から欲しい各パーツをドラッグして追加します。プレビューでパーツが表示されるものもあります。

追加したところ。画像を選択して差し替えたり、テキストを書き換えたりできます。

一通りカスタマイズが終わったら、右上の「Publish」を押して書き出します。

左側の「Export」を押して、「Brose」で保存したい場所の指定をします。ここではデスクトップにしました。
指定したら、右下の「Export」を押して書き出します。

ファイルを書き出したところ。ちゃんとHTMLファイルがまとめてエクスポートされています。
これをこのままFTPでサーバーに上げると、ちょっとしたサイトの出来上がりです。

WEBサイト制作としての使い道
ペラモノのランディングページとかに使えるかなと購入してみたのですが、デザインを大幅に追加しようとするとBootstrapのクラスを上書きで消してから追記するのでかえってコードのメンテナンスが大変で、今のところ実際の案件ではあまり使っていなかったりします。
というわけで、私は主に本番のサイトを作る前に急遽作成しないといけない準備中ページなどを作るのに使用しています。
素早くページを作れるのはメリットがあるので、それほどデザインしなくて良いシンプルなサイトとか、シングルページの案件とかで使用できたらいいなと考えています。
Bootstrapの参考書
Bootstrapを体系的に学びたいときにおすすめの参考書です。
![]() |
Bootstrap 5 入門: 基礎から実演まで Web開発入門 新品価格 |

![]() |
Bootstrap5ファーストガイド: Web制作の手間を大幅に削減! 新品価格 |

[公開日] 2022年5月16日 / [最終更新日] 2022年5月16日 カテゴリー:WEBデザイン
同じカテゴリーの記事
- HTML無料テンプレートを制作しました【商用利用可・著作権表示フリー】
無料で使えるHTMLテンプレートを作りました。 URL:https://popo-design.net/template/ テンプレートをなぜ作ったのか? HTMLの静的なテンプレートはネットで探せばたくさんあるのですが… [続きを読む]
- ロリポップのスタンダードプラン・アップデートの使用感
ロリポップサーバーのスタンダードプランで、アップデートの通知が来ていたので実際の制作案件でも使用してみることにしました。特にWordPressサイトの表示速度がもっさりと遅いのが気になっていましたので。アップデート後のス… [続きを読む]
- CyberduckのブックマークをMac間で移行する方法
Macで(Windowsも)手軽に使えるFTPソフトといえば「Cyberduck」ですが、複数のMacで使用する場合、これまでのブックマークを移行したい時のやり方をメモしておきます。 duckフォルダを探す まずはFin… [続きを読む]
- WEBデザイナーが印刷物制作・入稿に注意すること
WEBデザインの業務と印刷物のグラフィックデザインの仕事を同時進行で制作していると、うっかりミスが出やすいので自戒を込めて印刷物を制作する時の注意点をまとめてみました。 カラーモードはRGBではなくCMYK… [続きを読む]
最新の投稿
2022年06月23日
2022年06月02日
2022年05月16日
2022年05月10日
2022年04月18日
カテゴリー
アーカイブ

このサイトはさくらのレンタルサーバを使用しています。
