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

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

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

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

参考例:Appleウェブサイトのタイポグラフィ。letter-spacingが小数点以下の単位で調整されている。

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

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

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

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

参考例:Dropbox Paperのフォントカラー。真っ白な背景でコンテンツであるテキストを主役にしつつも、ブルーグレーにすることで落ち着いて文章を作成することにフォーカスできるようにデザインされている。

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

まとめ

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

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

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

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

こいにーかぶしきがいしゃのでざいなーです。

こいにーかぶしきがいしゃのでざいなーです。