うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。

Takamasa Matsumoto

·

Follow

8 min read

·

Oct 14, 2016

--

2

Share

なんか、このサイトBootstrapくさい。そう感じることはありませんか?
その理由はズバリ、欧文ベースでつくられたフレームワークを文字構造の違う日本語で適用した際に不都合が出てしまっているからです。
それらが醸し出す違和感を放っておくと、Bootstrapくささを生み出す大きな原因になってしまいます。
そもそもの問題として、欧文と比較して和文は文字の要素が多く、文字自体のリズムも少ないため、どうしても複雑で単調に見えてしまいます。
しかし、和文だからといってあきらめることはありません。BootstrapのCSSを少しだけ変えるだけでグッと見た目がよくなる隠し味をご紹介します。

1. line-heightで行間にゆとりを。

明朝やゴシックなど、フォントの種類が言葉の印象を表すように、文字の行間は読みやすさ、文章全体の雰囲気を左右します。
欧文をベースに設計されたBootstrapをそのまま和文で置き換えた場合、文字サイズの仮想ボディが正方形で作られているので、欧文と比較して行間を広く持たせないと少し窮屈な印象になってしまいます。
そこで、「line-height」で行間にすこしゆとりをもたせてあげることで可読性が高まり、文章全体を美しく整えることができます。
和文タイポグラフィの原則では、文字サイズの1.5倍ぐらいといわれていますが、Windows, Mac共に使える日本語フォント（メイリオ、ヒラギノ）は大きめに設計されているので1.5倍より少しゆとりをみたせると良いでしょう。

2. letter-specingで文字の美しさを引き立てる。

お皿いっぱいに盛られた料理は賑やかさを演出し、お皿の真ん中に凛と佇む一品料理は高級感を演出してくれるように、タイポグラフィも画面というお皿の余白と文字の関係性を変えるだけで多彩な表情を生み出すことができます。
Boostrapのデフォルトだと字間の設定はされていないため、キャッチコピーなどの見出しは少し字間を空けてあげることで、文字の美しさを余白によって引き立たせることができます。
ワンランク上のタイポグラフィを目指すなら、kernings.jsを使って「、」や「。」などの約物のスペースを調整してあげると一段と見栄えをよくすることができます。

3. text-alignで和文の特性を活かす。

和文は欧文と比較してデメリットであると述べましたが、ちょっと気をつかってあげるだけで、その弱みは強みに変えることができます。
欧文では、語間が一定しない場合に余白がバラついてしまうため、ラギッドスタイルと呼ばれる方式で、段の両端を揃えないような方式をとらざるを得ません。
それに対し、和文の字形は正方形で作られているため、text-alignによって段の両端を揃えることが可能になります。これによってグリッドのラインが見えやすくなることで画面が整然と安定したデザインになり、テキストの可読性を高めることにもつながります。
ただし、欧文が多く含まれる場合だとうまく字間が調整できずに字間が空きすぎてしまう場合があるので、場合によって使い分ける必要があります。

4. font-familyで欧文との統一感を。

Bootstrapのデフォルトの設定で、欧文はHelveticaになっていますが、このフォントは地下鉄などのあらゆる機関で広く使用されており、良くも悪くもニュートラルなデザインになってしまいがちです。
また、スクリーン上でのデザインを前提としていないということもあり、AndroidのRobotoやiOSのSanfranciscoなどと比較して可読性も高くありません。
そこで、font-familyの指定をそれぞれのOSフォントを先頭に追加してあげると、より可読性を高めつつBoostrapくささをなくすことができます。
ちなみに最新版（2016年10月時点）であるv4 alpha.4ではフォント指定がSanfranciscoになっているので、アップデートしてしまうか、ブランドイメージや日本語フォントとの相性も鑑みて最適なフォントに変えてあげるのがベストでしょう。

5. modal-paddingで細部まで美しく。

メイン画面のデザインではBootstrapと分からなくても、modalウィンドウが出てきた瞬間に、Bootstrapバレしてしまうことがあります。
これは、modalウィンドウの余白がデフォルトだと窮屈な設定になってしまっており、要素間のグループが見えづらくなってまとまりの無いレイアウトにしまうことが原因です。
そこで、modalの余白を広げてあげると内容も把握しやすくなり、整頓されたレイアウトになります。
ただ、このCSSを設定した際にモバイルでは余白が空きすぎてしまうのでmedia queryを使って別途コンパクトな余白に設定すると良いでしょう。

6. body-colorを調和のとれたカラーに。

デフォルトの設定だとテキストカラーはブラックになっていますが、白い背景などの際はコントラストが強く、文字自体が主張しすぎて画面全体で見たときにバランスが崩れてしまうことがあります。
その場合、テキストカラーをブルーグレーなどに変えてトーンを少し落としてみると落ち着いて清潔感のあるデザインにすることができます。

7. レスポンシブグリッドで余白を活かす。

Bootstrapのグリッドシステムはレスポンシブデザインを作っていく上でとても強力なシステムです。しかし、そのグリッドにとらわれすぎるあまり、単調なデザインになってしまったりします。
また、モバイルの小さな画面ではちょうど良いレイアウトも、デスクトップなどの大きな画面では、要素のブロックが大きすぎて間延びしてしまうことがあります。
モバイルファーストを意識しつつ、col-*-offset-*のクラスを活用して一行あたりの文字数や余白をコントロールすることで、あらゆるデバイスで整頓されたデザインを実現することができます。

まとめ

つまるところ、すべてはタイポグラフィが重要であることに行き着きます。
オンスクリーンにおけるデザインはタイポグラフィと同義であると言われているように、タイポグラフィを制するものはウェブ・UIデザインを制するといっても過言ではないでしょう。
この視点で見たときにAppleが様々なインターフェイスに特化した独自のフォントであるSanfranciscoをつくったのも、その重要性が理解できるでしょう。

デザインに野暮ったさや素人くささが抜けない、そんなことを感じている方はあらゆるタイポグラフィの本やサイトを見るなどしてまねてみると、より良いデザインへとステップアップできると思います。

また、ウェブで気になるタイポグラフィに遭遇したら、ブラウザでcmd+shift+iを光の速さで押してインスペクタからCSSを徹底解剖するクセを身につけることをオススメします。

巷にはBoostrapのテーマが溢れていますが、そういった大仰なテーマで上書きしなくても十分より良くすることができます。シンプルでクリーンに。見た目もコードも美しいデザインを目指しましょう。

サンプルコードをcodepenにアップしてあります。こちらからどうぞ。