読者です 読者をやめる 読者になる 読者になる

ファイヤードブログ

ディジタル・パブリッシングという観点から、Webサイト制作、電子書籍制作などを。※ブログリニューアル中

Bootstrapの弱点〜あるいはCSSフレームワークを用いてサイトをデザインするにあたって考慮すること〜

Bootstrap WebDev

 海外のWeb Developmentのサイトを見ていると、n advantages / disadvantages of X みたいな記事をよく見かける −−内容皆無なのが多いのだけれど、英語で書かれているとなぜか信ぴょう性を帯びるんよねえ。これは日本語話者としての悲しき性かな。これについて、なるべく内容ある形で今回は乗っかって書きたいと思う。Bootstrapについてのそれを率直に。
 Bootstrapの弱点の一つは、あるコンポーネントがサイトのデザインの方向性に合わないと思ったら、なんだかんだで一から自分で書かなければいけないことにある。問題は、デザインの方向性にまで関わってくるコンポーネントとそうでないものがあるので、使う側はこれを峻別しないといけない。
 私は、だいたいに3つに分かれると考えている。(1)そのままで問題ないもの、(2)Sassカスタマイズで対処可能なもの、最後に、(3)デザインの方向性によっては全く一からかかなければならないもの、以上の3つだ。
 例えば、グリッドはデザインにほとんど関与しないので、デザインの問題として浮上しないので、(1)に分類される。他には、Bootstrapの用意するグローバルナビゲーションも、そのまま使ってもほとんどデザインの問題としては現れないし、Sassカスタマイズによってデザインの統一を図ることができるので、(1)と(2)の中間に位置する*1
 言わずもがな、厄介なのは、(3)に属するコンポーネント群だ。私が最近出くわした困難なコンポーネントは、List groupだった。どういう状況だったかというと、BootstrapのList groupをブログのサイドバーで使われる、アーカイブへのリンクで使おうとした時だった (「月別」で、2014/11、2014/10、2014/9……と縦に並べるような)。
 これらのサイドバー要素にぴったりな、Bootstrapのコンポーネントは、List groupなのだが、List groupでは、borderで囲まれてしまうし、paddingが少し広いきがするし、文字左寄せだし*2、ヘッダータイトル部分の装飾はpanelと兼用だし、ということもあって、どうしてもこれが自分が作成していたサイトの方向性と合わないことが判明した。となると、Sassカスタマイズで対処することになるのだが、元のファイルを読みとって、必要なスタイルとそうでないスタイルを選別して削除したり、値を変えたりするのが非常に労力のいることがわかった。結果、結局1から書いた方が早いな、となっていまは中断してしまっている。

暫定的結論

 というわけで、今のところ出た結論として*3CSSフレームワークを使うにあたっての注意点に代えて述べたい。

  • Bootstrapを使う際は、どこまでBootstrapを使うか(具体的にどのコンポーネントを使用するか)ということを決めてから作業にかからないといけない。これはデザインの問題としてある。
  • 上で述べた1,2,3を厳密に区別するためにも、CSSフレームワークそれ自体をSassないしLESSのファイルの状態から理解しておく必要がある。安易に手を出していいのは、そのフレームワークのデザインをそのまま採用すると開き直ったときだけである。
  • デザインに大きく反映されない段階のCSSだけをまとめたCSSフレームワークもあるので、場合によってはそれを使用することも考える(あるいは、最低限のコンポーネントだけをまとめたオリジナルのBootstrapの雛形を作っておく)。
  • タイトルの「Bootstrapの弱点」という点に関しては、「フレームワークのデザインに乗っかるか乗っからないかを決めないといけない。乗っかれば、ありふれたものになってしまうし、乗っからないと決めれば、結局自作することになる。もちろんこれらは二者択一ではないが、選別するのにも大きな労力を要する」とまとめておく。

想定される批判

雑念

 一番いいのは、それぞれのWebデザイナーがオリジナルなCSSフレームワークを持つことなのだろうな……。

*1:例えば、border-radiusが要らないと思えば、値を0にしたり、引数から除外すればいい

*2:ヘルパークラスのtext-center使えばいいという対処は考えられるが

*3:もちろん、いまから述べるところの「Bootstrap」の箇所は、Foundationなどの他のCSSフレームワークでも置き換え可能