個人的なメモも兼ねて、「Bootsrap臭」を消す方法を。

以下の内容は、Bootstrap3を元に書いたものであり、それ以降のバージョンとは内容が異なる可能性があります。
また、Bootstrap4ではLESSからSCSSへの以降も決定しているため、少し齟齬が生じる箇所もありますが、あくまで方向性の参考にして頂ければと思います。

前置き

手軽に使えることで普及した感じのある「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は以下のフォントが設定されている。

"Helvetica Neue", Helvetica, Arial, sans-serif

詳しい解説は割愛するが、Windows 8.1 と OS X Mavericks には「游ゴシック」が標準搭載されているので、日本語フォントにはそれを優先的に指定するといいだろう。

例としては、以下のような感じで指定する。

"Helvetica Neue", Helvetica, Arial, "游ゴシック体", "Yu Gothic", YuGothic, "Hiragino Kaku Gothic ProN", Meiryo, sans-serif

英字フォントに関しては「Google Fonts」を採用してもいいと思う。”Open Sans”など色々とあるので、日本語のフォントのウェイトに合うものを指定するといい感じになる。


また、line-heightもそれに合わせるといい。

角丸を変更する

Bootstrap では、標準でinput要素や各コンポーネントなどで角丸が使用されている。この角丸の指定を少し変えるだけでも印象が違ってくる。

初期値は以下のような設定である。

$border-radius:     .25rem !default;
$border-radius-lg:  .3rem !default;
$border-radius-sm:  .2rem !default;

Material Design」を参考にしてみる。

Material Designでは角丸はやや控えめになっている。
Material Design Liteを見てみるとボタンのborder-radius2pxのようだ。

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感」は一掃できると思う。


おわり

以上は、非デザイナーの戯言なので本職の方は振り上げた拳を下ろして頂ければ幸いです。