ITエンジニア/デザイナ向けにオープンソースを毎日紹介

Twitterが開発したHTML5テンプレートBootstrapをMOONGIFTで紹介したのは2011年9月1日です。今ではバージョン3系となってさらなる進化を遂げていますが、それでもコンセプトは初期の頃から大きく変化はしていません。Bootstrapを使った、または一緒に使うソフトウェアも数多くリリースされており、それだけで開発者およびデザイナーの注目を集めたというのが容易にうかがい知れます。

Bootstrapといえばこんな感じですよね

MOONGIFTは2011年末に現在のデザインに変更しましたが、これはBootstrapをベースにしています。今でこそBootstrapベースのWebサイトは増えていますが、当時としてはかなり早い段階でBootstrapをカスタマイズして導入していたと思われます。そこでBootstrapベースにデザインを組む場合の利点、欠点を紹介します。

利点1:追加要件に容易に対応できる

Webデザインは一度決めたらそれ以後まったく機能追加をしない訳ではありません。むしろ運用していく中で新しい要件が出てくるものだと考えています。そのためスクラッチで組んでいると要件以上のデザインがなく、常に追加修正が発生してしまいます。それに対してBootstrapをベースにしておくと、ある程度まではBootstrapオリジナルのスタイルで対応が可能になります。

利点2:全体のバランスが崩れない

アイコンが特にそうですが、色々なところから拾ってきた素材を貼付けていると全体のバランスが崩れてしまいます。あるところには赤系、あるところは黄色系、そして別な場所はポップなデザイン…などとその時々に気分的に行っているとどんどんちぐはぐな印象になってしまうでしょう。Bootstrapを使っていて、その作法に則って進めている限りは全体のバランスは崩れづらいのが利点です。もし足りないアイコンがあるならばFont Awesomeのような代替アイコン集を使うのが良いでしょう。

利点3:レスポンシブに正しく対応している

レスポンシブサイトを組む際に最も大事なのがグリッドです。デスクトップ、タブレット、スマートフォンといった3種類に対応しておけば良いと思われがちなレスポンシブWebデザインですが、実際にはそうではありません。幅指定に範囲があるように、どの幅に対しても適切な対応が求められます。シンプルな例でいうとスマートフォンを横向きにした時にデザインが崩れる、または適切な表示とは言いがたい状態になるサイトを見かけることがあります。

Bootstrapは適切に計算されたグリッドレイアウトが実装されていますので、その部分だけでも使う価値があると感じています。

欠点1:Bootstrap臭がある

Bootstrapのデザインは我が強く、Bootstrapを使っているなとすぐに感じられてしまいます。これを嫌うデザイナーはとても多いです。個人的にもそれは致し方ないと思っていたのですが、最近【難しく考えすぎ!?】bootstrap臭のしないお洒落なレスポンシブWEBデザインの作り方 | WEBデザイナーの憂鬱という記事を読み、グリッドだけ採用するというのはやはりありなのだと気付かされました。

欠点2:本家の進化が速い

MOONGIFTではBootstrap 1.x系を使っているのですが、すでに本家は3.x系です。しかも後方互換性はあまり考慮されていません…。多少なりともカスタマイズして導入している場合、単純な入れ替えは失敗するでしょう。しかし古いものを使い続けると参考情報が減っていき、カスタマイズも容易ではなくなります。これはオープンソース・ソフトウェア全般に言えることですが、人気のあるソフトウェアは開発が活発で進化も速く、その結果使っているプログラマーはバージョンアップと互換性維持に大きなコストを払うようになるのです。

そうは言いつつもBootstrapは良いフレームワークです。特に海外ではBootstrapテーマの販売を行っていたり、関連ライブラリの開発も活発に行われています。Bootstrapという共通の枠組みの中であれば日本人であってもデザイン力、開発力で勝負できるのではないでしょうか。

Bootstrap

次はMOONGIFTの情報収集法について。本当に良く聞かれるこの話、こっそり教えちゃいます!


10周年記念特集!「オープンソース×10年」

 

MOONGIFTの関連記事

コメント

  • MOONGIFTプレミアム
  • Mobile Touch