よりプロっぽく見せるためのBootstrap使い方講座

Bootstrapの功罪

便利ですよね、Bootstrap。
ガッチリレスポンシブしてくれてボタンとかフォームとかのパーツも揃っててサクッと高クオリティのWebページが作れるのは本当にすごい。

ただ、誰でもそれなりのものが作れる一方で誰が作っても似たようなデザインに陥りがちです。
処理が見えないバックエンドのプログラムではいくらフレームワークを使ってもぱっと見ではわかりにくいですが（.doみたいなのはありますが）、ユーザーの目に直接触れるフロント側だとこの「ぱっと見」は馬鹿にできません。
要は似たようなサイトでおもんないなあと思われやすくなります。ひいては手抜きと思われても仕方ありません。プロダクトにこだわるのと同じくらい見せ方にもこだわってほしいというのが個人的な主張です。

画像加工や映像制作の分野ではいかにエフェクトをバレずに掛け合わせて美しく見せるかが大事なポイントのひとつです。この考え方に倣って、いかにもBootstrapデフォルトのクラスだけで作ったかのような雰囲気をBootstrap感と定義し、デザインに明るくないエンジニアでもプロっぽいデザインを作るための心得を4つ書いてみます。

前提

CSSレイアウトの知識（padding,margin,displayレベル）が必要です

Bootstrap感をやっつけろ！

何はともあれまずは独自スタイルシートを作って読み込ませてください。

<link href="css/bootstrap.min.css" type="text/css"  rel="stylesheet" />
<link href="css/style.css" type="text/css"  rel="stylesheet"/>

ありがたいことにHTML(JSPも含む)ではCSSを何枚読み込んでもいいことになっています。したがって基本方針としてBootstrapの記述を独自CSSで上書きしていきます。
Bootstrapを書き換えても間違いではないですが、保守性や拡張性を考えると避けるべきだと思います。

<その1> フォントを変える

フォントは大事です。Webページが喋ることができるとしたら、フォントは声です。
フォント自身がユーザーに意思を持って語りかけてくれます。フォントの選定はコミュニケーションなのです。

Bootstrapデフォルトのfont-familyタグはHelveticaというフォントを指定しています。これを変えるだけでもかなり見栄えが違います。
まずはh1タグのfont-familyタグから変えてみましょう。ゴシックか明朝か指定するだけでもいいですし、Googleフォントを使ってもいいでしょう。Googleフォントの使い方はこの辺を参考にしてください。

<その2> 色を変える

カラーコーディネートはWebページにとってファッションです。おしゃれなページはおしゃれなファッションをしていますし、ダサいページはダサいファッションをしています。
私見ですが、Webページにとってのダサいは「単色もしくはビビッドな色だけで構成している」か「配色がセオリーに沿っていない」の2パターンがほとんどではないかと思います。

配色理論は長くなりますので割愛しますが、先人が作り上げてきた鉄板配色パターンみたいなものが多くあります。ここを参考にdivにbackground-colorを乗せていろいろ試してみてください。
まずはデフォルトの背景色は使わず自分で配色を考える癖をつけることが第一歩です。

<その3> margin、paddingを自分で整える

Bootstrapではよきにはからって余白を調整してレイアウトを組んでくれます。私はこれに問題があると思っています。
小説の世界では「行間を読む」とか「余白を読む」といった言葉があります。余白にはリズムを作る重要な役割があるのだと言われています。これに倣えば余白とは呼吸であると考えるべきではないでしょうか。
Webでも同様に余白は軽視されるべきではないと思います。

例えばnavbarタグには自動でmargin-bottomが30pxくらい付加されます。
Bootstrapの都合で呼吸を強いられるのです。これでは息苦しく感じます。この息苦しさがBootstrap感そのものです。
Bootstrap標準のクラスを適用したらブラウザの開発者ツールを使ってmarginとpaddingが適切かどうか必ずチェックを行うべきだと思います。

<その4> 素材のまま使わない

デザインでコピペは致命的です。ニュースになります。まったく同じスタイルでの使いまわしは既視感を強く与えますので避けるべきだと思います。
面積が広いとなんとなく気が引けるところがあると思いますが、小さな部品であればまあそのままでもいいかなと思ってしまうのが人間の性です。具体的にはボタンです。

例えば色を変えてみたり、透過にしてみたり、ちょっと変えるだけで雰囲気はガラリと変わります。100%の使いまわしではなく一部書き換えて70%だけの使いまわしにするだけでもプロっぽさが出ると思います。

最後に

デザインってハードル高そうですが、やってみると意外とするするできてしまって面白いです。
スタイルを自給自足するようになると作ってる感があって楽しくなると思うので、これを機にぜひ！