これがあればWebアプリケーションのデザインがすいすいできる「Bootstrap」
Bootstrapは今風のWebアプリケーションを開発するのに最適なデザインパーツを提供するCSSテンプレート。
BootstrapはCSS製のオープンソース・ソフトウェア。ITエンジニアが苦手にするのがWebデザインだ。作るのは良いが、それを奇麗に配置していくのがとても難しい。Webサービスが流行るか否かに技術が及ぼす影響は良くて半分だろう。残りの半分以上は見た目にかかっている。
グリッド
それもあって奇麗な画像を生成したり、何かのサービスを模したデザインに人気が集まったりする。Appleの作るデザインのような、今風なWebサイトを作る際にはBootstrapが便利そうだ。
BootstrapはTwitterの開発チームが作成したWebデザインテンプレートだ。単なるHTMLのみならず、色々な機能がおり混ざっている。複数カラムのグリッド、高さの揃った複数カラムのレイアウト、基本的なHTMLタグに対する見栄えのいい装飾設定、行ごとの色替えや並び替えにも対応したテーブル、フォーム、メッセージ、ボタンなどなど使い勝手の良いコンポーネントが多数ある。
レイアウト
実践で揉まれて作られているだけあって、ページネーションやエラーメッセージ、モーダルウィンドウ、ツールチップ、入力フィールドへのデフォルト値表示など実に細かい点にまで気を配られている。そのまま使っても良いし、Bootstrapをベースとしてさらに色をカスタマイズしても良いだろう。デスクトップはもちろん、タブレットにも似合うデザインのサイトが作れそうだ。
[s2If current_user_can(access_s2member_level1)]
装飾（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
リスト（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
表組（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
フォーム（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
ボタン（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
タブ（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
アラート（プレミアム限定）
[/s2If]
[s2If current_user_can(access_s2member_level1)]
モーダルウィンドウ（プレミアム限定）
[/s2If]
MOONGIFTはこう見る
HTMLは非常に表現力が高く、そのために構成力がないとどう配置したら良いか頭を悩ませることになる。スマートフォンくらいの限られた表示領域であれば、パーツを配置していく感覚でどんどん作成していける。Bootstrapはデスクトップでもある程度のパーツ化を実現している。
後はパーツをうまく配置していくことができれば、見栄えのいいWebサービスが開発できるようになる。それなりのデザインが手軽にできると、開発するモチベーションがあがるはずだ。なおテンプレートを使うと同じようなサイトしかできないので、Bootstrapを調べて自分なりのカスタマイズをしたほうが良いだろう。