ボクココ

サービス開発を成功させるまでの歩み

Bootstrap テンプレートは使うべきではないと思う

最近のはてぶITカテゴリーにしょっちゅう出てくるデザイナー向けBootstrap テンプレート。ペラ1のサイトのコードとDEMOが付随しているので文言を変えるだけで簡単にクールなwebサイトを作ることができる。例えばこんなまとめサイト。

商用も無料!Bootstrapをベースに最近のトレンドを取り入れた新作テンプレートのまとめ | コリス

読んだ人はきっと、「今後作るときはこういうのですぐ作れればいっか!」みたいな感じではてぶ登録するんだろうけど、実際にやってみた身としては逆に効率が悪くなった。なのでこういうのは使うべきではないと思っている。

その唯一の理由。

ちょっと変えるのが大変

最も大きな理由はこれ。自分でCSSを組み立ててないのでどんなCSS設計になっているかを理解するのに時間がかかり、逆に時間が取られるというオチ。 数ページ分くらいなら自分で一から組み立てていったほうが早かったという結論になりやすい。

DEMOページくいらいのCSSを組み立てられないような段階でテンプレートを選ぶようなら、まずはCSSを学び直したほうがいい。

「レスポンシブにデフォルトでなっている」というのはBootstrap テンプレートの一つの魅力だろう。ただ実際レスポンシブにするやり方を学んで見ればわかるけど、レスポンシブなページは思ったより単純で簡単に作ることができる。ただ手間が増えるだけのような感覚で作ることができる。 そのためあらゆる点において、これは1から作ったほうが早いしカスタマイズしやすくなる。

おすすめCSSフレームワーク

CSSフレームワークは積極的に使うべきだと思っている。定型的なCSSの記述は必ずあるもので、それらをまとめてくれているCSSフレームワークの存在は開発効率をあげる手助けになる。

特にレスポンシブ対応のCSSフレームワークは大変便利なので積極的に使いたいところだ。自分の場合はデザイナーありとデザイナーなしとでCSSフレームワークの選定を変えている。

デザイナーあり

Kube — CSS & JS Framework

Kubeはとてもシンプルで最低限のCSSをまとめたフレームワーク。レスポンシブ対応だし、大変シンプルなCSS構成のためレイアウトを変えやすい。Twitter Bootstrap のボタンやフォームは特徴的で変えるのが割と大変だけど、Kubeならその労力が少なくて済む。

ということでデザイナーありのWebサイト制作の場合はこちらを利用している。

デザイナーなし

Bootflat

こちらはフラットデザインも兼ね揃えたCSSフレームワーク。自分でデザインもやっちゃうときはこっちを使うことが多い。色合いも良い感じだし何も考えなくても小綺麗なサイトを作ることができる。

この場合は機能性を重視し、ある程度型にはまったサイトでもいいと割り切って作ると開発効率がだいぶ上がる。

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ

Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ