Bootstrapっぽさをなくす3つの方法
個人的なメモも兼ねて、「Bootstrap 臭」を消す方法を。
前置き
手軽に使えることで普及した感じのある「Bootstrap」だけれど、ここ最近は「Bootstrap 臭」という言葉とともに『似たようなサイトになる』など dis りが散見される。
個人的に Bootstrap は、 Framework であって単に HTML テンプレートではないと思っている。
そのまま使ったら、どれも『似たようなサイト』になるので、カスタマイズして使って欲しい。
また、公式の Bootstrap Expo にも目を通しておくと、色々とインスピレーションが生まれてくると思う。
カスタマイズが面倒な人には、以下をお勧めする。
他にも Bootstrap ベースのフレームワークも数多く存在するので、用途に応じて使い分けると良い。
自分色を出さなくて良いなら、これらのテンプレートを使うのが手っ取り早いと思う。
方法
Bootstrap をビルドする方法は色々とあると思うけれど、公式サイトの「Customize and download」を使えばスーパー初心者でも難しいことを考えなくてもできるので、おすすめしておく。
そこから徐々に、「Less（CSS 拡張メタ言語）」や「Grunt (タスクランナー)」に興味を持っていけばいいと思う。使っていくうちに自然とこの辺もカバーできるのではないか。
簡単に解説する。
フォントを変更する
海外製の Bootstrap は、日本語に最適化されていないので、日本語環境に合わせたfont-familyを指定する必要がある。
@font-family-sans-serifを見てみるとfont-familyは以下のフォントが設定されている。
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
詳しい解説は割愛するが、Windows 8.1 と OS X Mavericks には「游ゴシック」が標準搭載されているので、日本語フォントにはそれを優先的に指定するといいだろう。
例としては、以下のような感じで指定する。
font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic",
YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
英字フォントに関しては「Google Fonts」を採用してもいいと思う。"Open Sans"など色々とあるので、日本語のフォントのウェイトに合うものを指定するといい感じになる。
また、line-heightもそれに合わせるといい。
角丸を変更する
Bootstrap では、標準で input 要素や各コンポーネントなどで角丸が使用されている。この角丸の指定を少し変えるだけでも印象が違ってくる。
初期値は以下のような設定である。
$border-radius: 0.25rem !default;
$border-radius-lg: 0.3rem !default;
$border-radius-sm: 0.2rem !default;
「Material Design」を参考にしてみる。
Material Design では角丸はやや控えめになっている。
Material Design Liteを見てみるとボタンのborder-radiusは2px のようだ。
Bootstrap は最小でも0.2remになっているので（以前のバージョンはもう少し大きい）、Material Design Lite を参考に2pxと同等の0.125remを当ててもよさそう。
色を変更する
Bootstrap の初期の色は、誰もが Bootstrap だと知っている「Bootstrap 感」のある色である。
色に関して、初期値は以下のような指定がされている。
@gray-base: #000;
@brand-primary: darken(#428bca, 6.5%); // #337ab7
@brand-success: #5cb85c;
@brand-info: #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger: #d9534f;
class 名と対応してるので、どこに反映されるかは各自で確認して欲しい。
色の指定は悩みどころではあるが、配色に自信のない人は以下のサイトから色を決めるのが良いと思う。
Material Design のカラースタイルを参考にするのも良いかもしれない。
初期の色とは全く違うテーマカラーを決めて設定すると「Bootstrap 感」は一掃できると思う。
おわり
以上は、非デザイナーの戯言なので本職の方は振り上げた拳を下ろして頂ければ幸いです。