Bootstrap 4 alpha版が公開され、じわじわとBootstrap 4への期待が高まっている秋のこのごろ、皆さんはいかがお過ごしでしょうか？
Bootstrap 4 alpha・Bootstrap Blog
BootstrapがWeb制作に与えた影響は計り知れず、あまりHTMLやCSSに詳しくなくとも見た目の良いサイトが作れるようになった。
……と、これはある程度開発が出来る人の話。
本当の初学者や、あるいはサイト制作の知識はないけど自分のサイトを作りたいといった人にはまだまだ敷居は高い。
だから、Non Codingを謳うJimdoo, Strikingly, Wixなどのサイト制作サービスの人気が高まっているのだろう。
ただ、制作の自由度やテーマの豊富さで言えば自分で作る以上のものはない。だから、ドラッグアンドドロップでBootstrapページが作れればどんなに素敵かと思っていた。
そういった類のサービスはこれまでにいくつかあったけれど、ページの本当に枠の部分までしか作れなかったり、使い勝手がイマイチだったりともうあと一歩だった。
その点、今回紹介する Bootstrap Studio はほとんど完成に近いところまで作れるし、かゆいところに手が届く使い勝手を実現している。Studioと名前が付いているだけのことはある。
Contents
コーディングなしである程度まで作れてしまう凄さ
Bootstrap StudioはWindows、OS X、それからLinuxで動くデスクトップ・アプリケーション。
サイト制作ウィンドウで一番大きな欄を占めているのが、サイトの見栄えの部分となり、HTMLやCSSのウィンドウは隅に追いやられている。
これがBootstrap Studioのアーキテクチャを如実にあらわしていて、キーボードをポチポチせずともある程度まで作れるし、カスタマイズが必要な場合はちゃんといじれるようになっている。
もちろん、自分で用意したBootstrapテーマや写真、Google Fontをインポートすることも簡単にできるから、開発によってはこいつだけで完結してしまう。ヒュー！
完成したサイトは自動でHTML+CSSが作られるから、Bootstrap的に間違いのないコードが吐かれる。80%のところまでBootstrap Studioで作り、どうしても自分で作らないといけないところだけ、出力されたコードを基にして作るといった方法がいいだろう。
サイトに必要な部品もBootstrap Studioから
WebサービスやアプリなんかのランディングページでiPhoneの画面を写していたり、ログインフォームがあったりと、サイトあるあるは多い。
Bootstrap Studioの公式サイトでは、そんなあるあるを解決するための部品を Component Library で提供している。MacBookやiPhoneのモックアップをはじめ、写真、ログインやカード決済のフォーム、果てはMaterial Designのカードなんてのもある。
もちろんそれらのパーツはカスタマイズ可能だから、自分好みに調整する余地も残されている。
DEMOページでざっくり試してみる
これだけ未来を感じるBootstrap Studioだけれど、その値段である50ドル（2015年11月現在は50%OFFの25ドル）は少し尻込みしてしまう値段なことは確か。
ブラウザー上で試せるDEMOがあるから、まずはこっちを使ってみよう。DEMOページは、公式サイトの最下部あたりにある Try it out in your browser. というラベルから飛べる。
DEMOでは写真のインポートやプロジェクトの保存など試せない機能もあるけれど、ざっくり試してみる分には十分かと思う。
Bootstrap Studioが解決するもの
ちょっとしたランディングページやポートフォリオページなど、動的にページを構築する必要のないものについてはHTML + CSS + ちょっとしたJavaScript オンリーで作れる。
だからといって制作もすぐ終わるかというとそうではなくて、AtomやSublimeTextなどのテキストエディターでポチポチしてブラウザで見た目確認するみたいな制作方法でやっている場合もある。
常々このスタイルには疑問を感じてきた。というのも、見た目に関わる部分は見た目を直接いじりながらやったほうが一番イイに決まっているから。
Bootstrap Studioのように、カスタマイズしなくてもオールインワンでそこら辺を良きに計らってくれるソフトは、そんな当たり前なことを当たり前にやらせてくれるところがイイ。
Bootstrap Studioを購入するには？
Bootstrap Studioは50ドルで購入できるが、今は半額セール中で25ドルとなっている。
Visual Studioなんかのデスクトップアプリケーションに比べると安いほうだから、この機会にゲットしておきたい。
購入は、公式サイトの下の方にある購入ボタンから。
初心者のためのBootstrapガイドはこちら
最近人気の記事
モバイルWebはチョッパヤへ。Googleが推進するAccelerated Mobile Pages(AMP)とは？
