eyemovic inc.

Works blog仕事の取り組み・ビジョン

2015.06.17

Bootstrapとテンプレートを使ったサイト構築のポイント

Bootstrapとは?

Bootstrapとは、もともとはTwitter社で作成されたCSSフレームワークです。
12カラムのグリッドシステムを用い、レスポンシブWebデザインのサイトを簡単に構築することができます。

> Bootstrap公式サイト

 

実際に使ってみて便利なところ

実際に使ってみたメリットは下記の通りです。

  • Bootstrapで多数のパターンのコンポーネントが用意されており、CSSを書かなくてもルール(class等)を覚えれば編集できます。
  • Bootstrapは標準でレスポンシブWebデザインに対応しているので、PC向けサイト・タブレット向けサイト・スマホ向けサイトを一気に制作できます。
  • Bootstrapをベースにしたテンプレートが多数配布されており、そういったテンプレートを利用すれば様々なレイアウト、凝った演出、流行のデザインのサイトをすぐに制作することができます。

テンプレートに依りますが、個人的にはアイコンフォントを使えるのも面白かったです。

 

Bootstrapテンプレート 使ってみて思ったこと・カスタマイズのポイント

せっかくかっこいいテンプレートを使っているのに…文章を入れてみたらなんか変

BootstrapはTwitter社が作ったものであり、全世界で利用されています。
また、Bootstrapテンプレートは海外で作られているものも多いです。

海外で作られたテンプレートは半角英数字の単語を表示した時にちょうど良い具合に調整されているせいか、日本語のサイトで使ってみると普段コーディングしているサイトに比べて以下のように感じました。

  • 行間(line-height)が妙に開く。
  • ブロックとブロックの間のmarginやpaddingが開き気味。
  • 文字が全体的に大きい。
     特に表示幅が狭いスマホ向けレイアウトの時に顕著で、文章の長さによっては画面に文字がいっぱいになりレイアウトが崩れることがありました。

文字サイズ、行間、余白については実機での検証・表示チェックのうえ、調整が必要になることがあります。

また、海外で作られたテンプレートの場合、日本語のフォント指定がされていないことがあり、その場合は端末にインストールされているフォントで表示されます。
英字と日本語が混ざった文章等で違和感がある場合は、一般的に利用されている日本語のフォント指定に変更します。

最近、日本語の表示に特化したテンプレートを見つけました。まだ使ったことはないのですが気になっています。

> Honoka – 日本語も美しく表示できるBootstrapテーマ http://honokak.osaka/

IEの対応

Bootstrap(現行はv.3.3.4)はIE8から対応しています。ただし、BootsrapはHTML5・CSS3を利用しているためIE8やIE9については一部未対応があります。
閲覧環境にIE8が含まれる場合はレスポンシブ対応のためのrespond.jsやHTML5に対応のためのhtml5shiv.jsが必要となってきます。

http://getbootstrap.com/getting-started/#support

Internet Explorer 8 and 9

Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, Internet Explorer 8 requires the use of Respond.js to enable media query support.

Feature Internet Explorer 8 Internet Explorer 9
border-radius Not supported Supported
box-shadow Not supported Supported
transform Not supported Supported, with -ms prefix
transition Not supported
placeholder Not supported

 

なお、今後リリースされるBootstrap4ではIE8をサポートしないことがアナウンスされており、閲覧環境にIE8が含まれる場合は注意が必要です。

http://blog.getbootstrap.com/2014/10/29/bootstrap-3-3-0-released/

Onward to Bootstrap 4

Perhaps the best part of releasing v3.3.0 today is that we can start to tell you more about Bootstrap 4! While the first alpha is a couple weeks off, here’s a quick preview of what’s to come:

  • Updated grid system with at least one additional tier for handheld devices.
  • A brand new component to replace panels, thumbnails, and wells.
  • A completely new, simpler navbar.
  • Switch all pixel values over to rems and ems for easier and better type and component sizing.
  • Dropped support for IE8.

 

カスタマイズの必要が出てきたら、配布されているデータは書き換えないのが吉

グローバルナビの増減やjQueryによる演出など、Bootstrapやテンプレートで配布されているデザインから変更しようとすると、テンプレートそのままでは対応できないことが出てきます。
そうなると、コーディングや調整等が必要となったり、利用しているテンプレート自体の仕様把握・調査が発生することもあり、制作工数が増えることがあります。

カスタマイズの基礎的なことですが、配布されているデータを直接編集せず、追加した部分や調整した部分を分けて記述します。
 そうすることでバグがあった時に配布データそのものに原因があるのか、それとも自分がカスタマイズした部分に原因があるのか、問題の切り分けを行なうことができ、スムーズに原因を究明できます。

 

その他、思ったこと

・Bootstrapやテンプレートを使えばデザインデータが無くても(コーダーだけで)見栄えのいいサイトができる!

テンプレートを調整・カスタマイズする場合は、やはりデザインセンスや情報の整理・見せ方などの知識が必要になることがあります。
デザインやコンテンツの見せ方にこだわりが出てきた場合、どこまでテンプレートを活かし、こだわりをやめるのか検討することもありました。

 

・サイト公開後の更新にてコンテンツやメニューが増えることがあるので、運用や拡張がしやすいデザイン・レイアウトを選定しておくと良いです。

 

・Bootstrapやテンプレートを使用したサイトはレスポンシブWebデザインになるため、スマホ表示の時を考慮して表示速度に注意します。

メインビジュアルで使用する画像ファイルサイズを小さくしたり、テンプレートに盛り込まれてるCSSファイル,jsファイルの整頓や圧縮したりといった対策を行ないます。

 

まとめ

Bootstrapによるサイト構築は

  • キャンペーン等のランディングページ
  • シンプルな構成でも問題ないサイト

等に向いていると思いますが、
まずは作りたいサイトと近いBootstrapコンポーネントやテンプレートを探し、なるべく配布されているデータを活かした作りにすることで、ベースのデザインやコーディング作業を短縮しつつ見栄えのするレスポンシブサイトの構築が可能です。

配布されているままじゃ物足りない、という場合は、こだわりとレスポンシブサイトの運用性のバランスを考えながらカスタマイズしていきましょう。

愛媛県松山市でWeb開発一筋15年、700サイト以上の構築実績!

Webサイト制作・システム開発・スマホアプリ開発・組込ソフトウェア開発ならアイムービックにお任せ下さい。