読者です 読者をやめる 読者になる 読者になる

ボクココ

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

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

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

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

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

その唯一の理由。

ちょっと変えるのが大変

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

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

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

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

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

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

デザイナーあり

Kube Web Framework

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

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

デザイナーなし

Bootflat

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

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

(おまけ) イベント向け

ハッカソンとかで手軽に凝った感のあるサイトを作りたい場合は以下を使ったこともある。

Material UI - Material Design React Components

カッコイイってのと最先端行ってる感があるのがいい。

$.material() みたいなメソッドを呼ぶだけでいいからお手軽に作ることができる。