Bootstrap
前にDjangoでウェブサイトを作る際、デザインはBootstrapを使用するといいと紹介しました。
![](https://3pysci.com/wp-content/uploads/2021/04/bootstrap1-6-300x202.png)
で、自分なりに色々といじってみたのですが、なかなか綺麗なサイトを作るには難しいと感じました。
もちろん私にはデザインの能力がないということも大きな問題なのです。
ですが、BootstrapをHTML上にコーディングしていると、デザインとコードを合わせることがなかなかできず(ここら辺は経験なのでしょうが)、ちょっとしたフラストレーションになって、適当なデザインしかやる気が起きませんでした。
ということで、それなら画面を表示しながら、直感的にウェブサイトのデザインができないだろうかと考えて、調べてみたところ、発見したのが「Bootstrap Studio」というソフトウェアでした。
![](https://bootstrapstudio.io/assets/img/shot.jpg)
この「Bootstrap Studio」はパーツをドラッグ&ドロップし、Bootstrapに対応、つまりは複数のデバイスでの表示に対応したレスポンシブデザインを構築できるソフトウェアです。
これならもう少しかっこいいデザインを作ることができるのでは無いかと思い、今回導入してみました。
またテンプレートデザインもいくつか保存されていますので、そちらを利用することでかなり手間は省いて、クールなデザインのウェブサイトを作れるんじゃないかという期待もあります。
ちなみにこの「Bootstrap Studio」は、Windows、Mac、Linuxに対応していますので、ほとんど方が使えることでしょう。
それではまずは購入&ダウンロードしていきましょう。
購入&ダウンロード
まずは「Bootstrap Studio」のウェブサイトにアクセスします。
![](https://bootstrapstudio.io/assets/img/shot.jpg)
右上の「Purchase」をクリックします。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-1-1024x508.png)
購入画面に移動します。
StandardとLifetimeという二つの購入形態がありますが、どちらもソフトウェア自体は買い切りで、同じソフトウェアとコンポーネントです。
ただしStandardではソフトウェアのアップグレードが1年間無料なのに対し、Lifetimeではソフトウェアのアップグレードは一生涯無料になっています。
値段がStandard$29に対し、Lifetime$59です。
Lifetimeにしても1万円かからず購入できてしまうので、今回私はLifetimeを選択しました。
ということで「Buy Lifetime」をクリック。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-2-1024x908.png)
購入手続きに進みます。
まずはメールアドレスの入力。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-3-1024x492.png)
居住国の入力。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-4-1024x493.png)
支払い方法の入力。
Apple payとクレジットカード、PayPal、電信送金が使用できるようです。
私はクレジットカードを選択しました。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-5-1024x491.png)
クレジットカード情報を入力し、「今すぐ支払う」をクリック。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-6-1024x496.png)
すると「Thank you for your purchase!」という画面に移動し、画面中央に「Download Bootstrap Studio」というボタンがありますので、ここをクリックします。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-7-1024x493.png)
ダウンロード画面に移動しますので、自分のOSを選択し、Downloadをクリックします。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-8-1024x492.png)
Macの場合、ダウンロード確認のウインドウが出てきますので、「許可」をクリック。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-9-1024x492.png)
これでダウンロードが完了するまでの間、メールを確認します。
先ほど購入の際に入力したメールアドレスにこんな感じの領収書が届きます。
必要な方はちゃんと保存しておきましょう。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-10-1024x900.png)
そしてもう一つ。
別のメールでBootstrap Studioのライセンスキーが届きます。
メール本文の真ん中辺りにライセンスキーが記載されていますので、無くさないように保存しておきます。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-11-1024x621.png)
インストール
ダウンロードが完了したら、インストールしていきます。
Macの場合、「Bootstrap Studio.dmg」というファイルがダウンロードされているので、こちらをダブルクリックします。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-12-1024x620.png)
するとインストール画面が出てきますので、左側のソフトウェアのアイコンを、右側のアプリケーションフォルダのアイコンにドラッグ&ドロップします。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-13-1024x773.png)
インストールが完了すると、Lunchpadにこのような「Bootstrap Studio」のアイコンが追加されます。
とりあえずクリックして開いてみましょう。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-14.png)
Macの場合、インターネットからダウンロードしたソフトウェアを開く際、確認のウインドウが開くことがありますので、開いた場合は「開く」をクリックします。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-15.png)
初めて「Bootstrap Studio」を開いた場合、ライセンスキー、パソコン名の入力が求められます。
先ほどのメールに記載されていたライセンスキーを入力し、パソコン名は適当に入力。
そして「I AGREE WITH THE LICENSE AGREEMENT」のチェックボックスにチェックを入れ、「PROCEED」をクリックします。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-16-1024x636.png)
ちなみに1ライセンスで3台までインストール可能(2021年8月現在)で、PC間でのライセンスの移動も可能です。
なかなか嬉しいライセンスですね。
ライセンスの認証が終わるとこの画面に移ります。
ライセンス認証は初めて起動した時だけなので、次回からは起動したらこの画面になります。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio1-17-1024x599.png)
これでBootstrap Studioの購入、ダウンロード、インストールが完了しました。
次回からとりあえず何となく使っていってみましょう。
![](https://3pysci.com/wp-content/uploads/2021/08/bootstrapstudio2-1-300x176.png)
ではでは今回はこんな感じで。
コメント