Bootstrapっぽさをなくす3つの方法

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

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

また、ブログのCSSの影響で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は以下のフォントが設定されている。

"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”など色々とあるので、日本語のフォントのウェイトに合うものを指定するといい感じになる。

Before:
Bootstrapは、web上で反応する、モバイルファーストのプロジェクトを開発するための最も人気のあるHTML、CSS、およびJSのフレームワークです。

After:
Bootstrapは、web上で反応する、モバイルファーストのプロジェクトを開発するための最も人気のあるHTML、CSS、およびJSのフレームワークです。


後者はGoogle Fontsから”Open Sans”を読み込み指定している。

閲覧環境のフォントによって変わってくるので留意してほしい。


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

#角丸を変更する

Bootstrap では、ボタンやモーダルウィンドウなどで角丸が使用されている。
そのため角丸を変えるだけでも印象が違ってくる。

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


@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;

参考例として、「Material Design」を見てみたいと思う。
Material Designでは角丸はやや控えめになっていることが分かる。

material design button
Material Design – Buttons – Components – Google design guidelinesより

もちろん、参考元の角丸が小さいからといって、そのサイズを採用するのは良くない。
全体的なバランスを考えて調整した方が良い。(あくまでも一例として見て欲しい)


ちなみに私は初期値の半分を設定している。

@border-radius-base: 2px;
@border-radius-large: 3px;
@border-radius-small: 1px;

#色を変更する

初期の色も「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感」は一掃できると思う。


Before:

After:

#おわり

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

twitterfacebookhatenafacebook