BootstrapStudioの使い方の感想を書いてみました
![BootstrapStudio](https://popo-design.net/wp/wp-content/uploads/2022/04/bs-1024x427.jpg)
ドラッグアンドドロップでちょっとしたペラモノのサイトができる、BootstrapStudioが便利なのでレビューしてみます。
英語なのでちょっと分かりにくいですが、操作は直感的にできるのでHTMLとCSSが分かっている人なら問題ないと思います。
<公式サイト>
https://bootstrapstudio.io/
今回はずっとアップデードしていただけるという「Lifetime」版を購入してみました。
BootstrapStudioの使用感
ダウンロード型アプリなので、インストールして起動します。画面はこのような感じ。
左側の「New Design」からサイトを新規作成します。
![起動したところ](https://popo-design.net/wp/wp-content/uploads/2022/04/bs1-1024x666.jpg)
好きなテンプレートを選んで「Create」を押します。Blankはまっさらなページを作ることもできます。
![テンプレートを選ぶ](https://popo-design.net/wp/wp-content/uploads/2022/04/bs2-1024x680.jpg)
開いたところ。各パーツを選択すると、右側のパネルにマージンやパディングとか、リンクの指定などもできます。
![インターフェース画面](https://popo-design.net/wp/wp-content/uploads/2022/04/bs3-1024x539.jpg)
左側から欲しい各パーツをドラッグして追加します。プレビューでパーツが表示されるものもあります。
![パーツを選ぶ](https://popo-design.net/wp/wp-content/uploads/2022/04/bs4-1024x532.jpg)
追加したところ。画像を選択して差し替えたり、テキストを書き換えたりできます。
![パーツを追加したところ](https://popo-design.net/wp/wp-content/uploads/2022/04/bs5-1024x536.jpg)
一通りカスタマイズが終わったら、右上の「Publish」を押して書き出します。
![書き出し](https://popo-design.net/wp/wp-content/uploads/2022/04/bs6.jpg)
左側の「Export」を押して、「Brose」で保存したい場所の指定をします。ここではデスクトップにしました。
指定したら、右下の「Export」を押して書き出します。
![書き出し](https://popo-design.net/wp/wp-content/uploads/2022/04/bs7.jpg)
ファイルを書き出したところ。ちゃんとHTMLファイルがまとめてエクスポートされています。
これをこのままFTPでサーバーに上げると、ちょっとしたサイトの出来上がりです。
![書き出したファイル](https://popo-design.net/wp/wp-content/uploads/2022/04/bs8.jpg)
WEBサイト制作としての使い道
ペラモノのランディングページとかに使えるかなと購入してみたのですが、デザインを大幅に追加しようとするとBootstrapのクラスを上書きで消してから追記するのでかえってコードのメンテナンスが大変で、今のところ実際の案件ではあまり使っていなかったりします。
というわけで、私は主に本番のサイトを作る前に急遽作成しないといけない準備中ページやデザインのカンプなどを作るのに使用しています。
素早くページを作れるのはメリットがあるので、それほどデザインしなくて良いシンプルなサイトとか、シングルページの案件とかで使用できたらいいなと考えています。
Bootstrapの参考書
Bootstrapを体系的に学びたいときにおすすめの参考書です。
![]() |
Bootstrap 5 入門: 基礎から実演まで Web開発入門 新品価格 |
![](https://www12.a8.net/0.gif?a8mat=2ZCKWD+CBJYGI+249K+BWGDT)
![]() |
Bootstrap5ファーストガイド: Web制作の手間を大幅に削減! 新品価格 |
![](https://www13.a8.net/0.gif?a8mat=2ZCKWD+CBJYGI+249K+BWGDT)
[公開日] 2022年5月16日 / [最終更新日] 2022年10月5日 / カテゴリー:WEBデザイン
同じカテゴリーの記事
-
HTMLテンプレート・テンプレどんプロ版を提供開始しました
ありがたいことに、たくさんの方々にご使用いただいているHTMLテンプレート「テンプレどん」ですが、機能を追加したプロ版を [続きを読む]
-
簡単にホームページが作れる Mobirise(モビライズ)の使い方
いつもお世話になっている西宮流さんから、こんなソフトがあるよ!勧めて頂いたので、試してみました。 Mobirise(モビ [続きを読む]
-
Adobe Character AnimatorでVTuber!頭だけパペットの作り方
Adobe Character Animatorを使って、自分が作ったパペットと呼ばれるキャラクターを身振り手振りに合わ [続きを読む]
-
ホームページ文章の書き方・見せ方のコツ
たくさんの文章を一生懸命書いているのになぜか読んでもらえない、ページからすぐに離脱される、などでお悩みのかたへ。ちょっと [続きを読む]
最新の投稿
2024年07月16日
2024年07月16日
2024年07月10日
2024年06月25日
2024年06月03日
カテゴリー
アーカイブ
![HTML無料テンプレートダウンロードサイト](https://popo-design.net/wp/wp-content/themes/popodesign/img/temp-banner.png)
![LINEスタンプ販売中](https://popo-design.net/wp/wp-content/themes/popodesign/img/line-banner.webp)
![Kindle電子書籍](https://popo-design.net/wp/wp-content/uploads/2022/07/kindle-banner.webp)