このエントリーをはてなブックマークに追加
こんにちは
先週このサイトをリニューアルしました。今っぽい、動きのあるサイトにしかったのと、マルチデバイスに対応したかったためです。ですが、弊社はWebデザイナー、という職種の人がいないためサイトのリニューアルは大事(おおごと)なんですよね。

今っぽいデザインのそれらしいjQueryのライブラリを寄せ集めたり、特にレスポンシブデザインだと、PC、スマホに対応したcssのデザイン作ったり、とか。一から自前で作ってもいいものが出来なさそうだし、かと言ってデザイン会社さんに高い料金は払えないし、何かいい方法は無いものか・・・。

そこで前から気になったいた、Twitter Bootstrapに目をつけました。デモサイトを眺めてこれはいい、今っぽいデザイン、パーツ、レスポンシブデザイン、すべてが揃ってます。なるほど、機能的にはまったく問題がない(というかこれ以上ないくらい揃っている!)のですが、製品サイトに使うのには若干地味かも・・・。

Twitter Bootstrapとは?

HTML5・CSS3・jQueryで作られたCSSのフレームワークで、名前の通りTwitter社が開発しています。フォームやボタン、エフェクトなどが事前にパートとして用意されているので、それを使って簡単に今っぽいデザインのサイトを作ることができます。レスポンシブデザインにも対応しています。

wrapbootstrap.com -  Bootstrap対応のデザインテンプレート

で、見つけたのが http://wrapbootstrap.com/ というサイト。
Bootsrapをベースにして、いろいろなデザインを施したサイトのテンプレートを販売しているサイトです。企業サイト、ランディングサイト、管理画面など実に豊富。しかも安い。4ドル、高い物でも50ドルしません。人気順や販売数順にみることもできます。
そして、企業サイトのカテゴリーダントツ人気だった このテンプレート を購入。これで$16なり。信じられません・・・。というわけで、今ご覧なっているこのサイトはこのテンプレを使ってCMS化されています。

前置きが長くなりましたが、実際にBootstrapを使ったCMS化についてご説明したいと思います。

パーツ化

Bootstrap使ってサイトをCMS化、という焦点なので、製品に偏った説明にはしたくないのですが、一応「パーツ化ができ、複数のパーツを組み合わせてページを作れるCMS」ということを前提させていただきます。最近のWebデザインはjQueryに代表されるJavaScriptのライブラリを使って、HTML、CSSを細かく制御するというように、非常に緻密に作られているので、運用する人がエディタを使って編集していく、というのは難しいのではないかと思います。逆にいうと、最初に作られたHTML通りに文字情報や画像を流し込んであげれば、期待通りのエフェクト、見せ方をしてくれます。

というわけで、パーツ化です。
必要な文字と画像を入れて、あとはもとのHTMLに流し込んであげるだけで、カルーセルやスライダーが動きます。

Bootstrapのグリッドシステムは本当にすごい

Bootstrapはグリッドシステムというのを採用していて、横幅940px、12カラムに分割されています。ページを作る際にスタイルシートで"row"という指定をすると行になって、その中を12列に分割することができます。この指定がすばらしく空気を読んでくれるもので、この列は3カラム分使う、と指定すると上手い具合に幅を調整してくれます。列の指定に4カラム、4カラム、4カラムとやれば均等3カラムの行ができます。6カラム、3カラム、3カラムとやると、半分とさらにその半分を2分割してきれいにレイアウトしてくれます。文だとわかりにくいので実際にやってみます。

1カラム

1カラムのサンプルです。これはカラムの中の画像とテキストを1:1で表示するように指定しています。テキストテキストテキストテキストテキストテキストテキスト

均等3カラム

3カラムのサンプルです。これはカラムの中の画像の下にテキストを入れるようにしています。テキスト
3カラムのサンプルです。これはカラムの中の画像の下にテキストを入れるようにしています。
3カラムのサンプルです。これはカラムの中の画像の下にテキストを入れるようにしています。

テキスト

ここは6カラム使っています。テキスト
ここは3カラム使っています。
ここも3カラム使っています。

気持ち悪いほど空気を読むBootstrapのグリッドシステム

Webサイトは幅の制御が結構面倒なのですが、Bootstrapのグリッドシステムは本当によく出来ていて、カラムの中にカラムを入れてもその中で12分割のカラムの数を指定することで、その幅の中でうまいこと調整してくれます。冒頭で「横幅940px、12カラム」というお話をしましたが、このページは実はそのうちの8カラムを使うようにすでに区切られています。上のサンプルはこの8カラムの中でさらに12個のカラムの指定により、いい感じにレイアウトされます。

Bootstrapはブロック型のCMSに向いている、と思います

パーツ化したものをグリッドシステムのカラムに中に入れてあげれば、うまいこと表示してくれます。今ご覧になっているサイトも細分化されたパーツをグリッドシステムの中に配置する、という考え方で作っていますが、まるで紙面のようなレイアウトをいとも簡単に実現してくれます。

正直ここまで「パーツ」と「レイアウト」が見事に機能するものは見たことがありません。もう標準にになってほしいくらいです。

気になること

ちょっと気になるのが画像の縮小です。レスポンシブデザインの場合はスマホで見たときにはっきり見えるように大きめの画像を入れます。PCで表示する場合には、スタイル指定で縮小するのですが、元画像の大きさが揃ってないと縮小したときに、ずれるのですよね。

このコンテンツは参考になりましたか?

送信する

デジタルマーケティングに対する
実体調査アンケート実施中

是非、アンケートにぜひご協力ください。

デジタルマーケティングに対する
実体調査アンケート実施中

是非、アンケートにぜひご協力ください。

 アンケートに回答する  ≫

無料eBookのダウンロード

【今からでも遅くない!】
初心者に贈る「インバウンドマーケティング」の始め方

 無料ダウンロードはこちら  ≫

人気の記事

タグ別