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

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 フロントエンド開発の教科書

新品価格
¥3,828から
(2022/5/16 14:40時点)

Bootstrap 5 入門: 基礎から実演まで Web開発入門

新品価格
¥980から
(2022/5/16 14:43時点)

Bootstrap5ファーストガイド: Web制作の手間を大幅に削減!

新品価格
¥3,630から
(2022/5/16 14:43時点)

[公開日] 2022年5月16日 / カテゴリー:WEBデザイン


トップ

この記事を書いた人
ポポデザイン

ポポデザイン
西宮市在住のWEBデザイナー・グラフィックデザイナー・マーケター。 ホームページの制作からディレクション、イラスト、SEOなど制作からユーザーのサポートまで幅広く、初心者のかたも分かりやすい対応を心がけております。(プロフィール)
FacebookTwitterInstagram

同じカテゴリーの記事