CSSフレームワークのメリット・デメリット

基本的に自分はあまりCSSフレームワークを積極的に使う方ではないのですが、業務上Bootstrapで作られたサイトの改修を行うことがあります。そこで感じているCSSフレームワークのメリット・デメリットをまとめてみました。

CSSフレームワークを使うメリット

沢山メリットはありますが、主に以下の様なメリットがあるため、これだけ使われるようになったのではないかと思います。

見栄えの良いサイトがデザイナーを介さなくても素早く作れる

Bootstrapで作られた綺麗なサイト

あまりデザインに詳しくない方でも、フレームワークを使うことにより整ったサイトを作ることが出来ます。フレームワークでは、タイポグラフィを始め、各パーツにおいても行間や余白などが考えられているため、適当に作ったとしても「要素の余白が無さすぎる」「行間が詰まり過ぎてて文章が読みづらい」などのデザイン上の問題が少ないように思います。

また主にBootstrapの場合、ネット上でデザインテンプレートが豊富に用意されています。クオリティの高いものだと有料のものもありますが、それらを使えば短時間でハイクオリティなデザインのサイトが作れます。

ボタンやフォームなどUI周りのパーツが予め用意されている

用意されたUIパーツ

デザインにも関わる事なのですが、フレームワークにはボタンなどUI周りのパーツが一通り用意されている事が多いです。

特にフォーム周りのパーツはラジオボタン、チェックボックス、セレクトボックスなどの入力フォームの他にも、送信ボタン、エラー時や成功時などのアラートなど、用意しなければいけない要素の種類が多く、それらを全て自分でデザインし、レイアウトを組んでいくとなると結構手間がかかります。フレームワークはそれらのパーツが一通り定義されており、縦並びや横並びのレイアウトも考慮されているためフォームに関連する実装時間はかなり短縮されます。

レスポンシブデザインに対応しやすい

用意されたグリッド

レスポンシブデザインは、画面解像度毎に細かく定義していく必要があります。最近はタブレットなんかも含めるとデバイスの種類が多すぎて、それら全部に対応していくのはかなり面倒です。

フレームワークはレスポンシブ用に各解像度毎にちゃんと定義されており、それに従っていけばどのようなデバイスでもある程度の表示は担保されるという安心感があります。

勉強になる

マテリアルデザイン

これはメリットではなく個人的な観点からですが、フレームワークを使うことにより、デザイン・コーディングの勉強になります。マテリアルデザインがトレンドになっている時は、それを取り入れたフレームワークが沢山出ましたが、実際に使ってみることにより、デザインの考え方やユーザビリティなどの理解が進みます。

また、コーディングの観点からも勉強になるポイントが沢山あります。フレームワークは効率的で綺麗な書き方がされているので、それを取り入れる事によりレベルアップに繋がります。

CSSフレームワークのデメリット

メリットも多いCSSフレームワークですが、デメリットもそれなりに多いと思っています。

ものにもよるが、ファイルサイズが大きい

ファイルサイズが大きいFoundation

Bootstrapや、Foundationなど「重量級フレームワーク」と呼ばれるものは、機能も豊富な代わりにファイルサイズも大きくなっています。(Bootstrap3はCSSが121KB、JSが37KB、Foundation6は、CSSが77KB、JSが108KB(全て圧縮版))
全ての機能を使うことは稀だと思います。また、BootstrapやFoundationの場合、使う機能だけを選択しダウンロードできるので、ファイルサイズを少しでも減らしたい場合に有効です。

学習コストはそれなりにかかる

バージョンアップで変更になったclass類

フレームワークにはそれぞれに「お作法」があるのでそれらを覚える必要があります。覚えてしまえば速く作れますが、それまでの学習コストはそれなりにかかります。

また、バージョンアップによる変更が発生する場合があります。例えばBootstrapの場合、バージョン3がリリースされた時にclass名の大幅な変更があったため、バージョン2からの移行で苦労しました。今度リリースされるBootstrap4では、CSSのソースファイルはLessからSassに変更、単位の指定がpxからemに変更、ファイル構成も全体的に変更されます。
これらをキャッチアップして、4に移行するのか、3のままにしておくのかという判断が必要になります。

デザインが似たようなものになりやすい

Bootstrap

これは仕方ないとは思いますが、デザインが似たようなものになりやすいです。
特にBootstrapはいわゆる「Bootstrap臭」がすると言われ、他と似た感じになりがちです。

クライアントワークの場合、それぞれ必要となるデザインやレイアウトが異なるので、こういったフレームワークが使いづらい場面がありそうです。案件毎にフレームワークを変えるという手もありますが、それこそ学習コストが跳ね上がりますし、管理できないのでは無いかと思います。

細かいデザインやレイアウトにこだわりだすと、逆に面倒になる

フレームワークで用意されているデザインやレイアウトを超えて、こだわったデザインにしようとすると逆に面倒になるケースがあります。元々定義されているclassの指定を追わなければならず、ちょっとだけ変更するつもりが予想外に時間をとられるという場合があります。

更新が止まってしまう場合がある

Pure

特に使っているユーザーが少ない場合、更新が止まってしまう場合があります。 大手と言っても安心できず、Yahoo!が作った「Pure」というCSSフレームワークは、最低限の機能だけを提供する超軽量CSSフレームワークとして話題になりましたが、2015年2月頃を最後に更新が止まっています。
リリース時点では大丈夫でも、新たにバグが見つかる場合もあり、その際にちゃんと製作者が対応してくれるという安心感は重要です。

どういったケースでCSSフレームワークを使うべきか

以上のメリット・デメリットを踏まえて、どういうケースでCSSフレームワークを使うのが良いか考えてみます。

製作時間がない場合

製作期間があまりなく、特殊なデザインではない場合、デザインテンプレートを使えば短時間でクオリティの高いサイトを作ることが出来ます。自社サービスのランディングページを短期間で作りたいような場合など非常に有効です。

モックアップやプロトタイプをサクッと作りたい場合

動きが確認できるプロトタイプなどを作りたい場合、フレームワークを使うと全体的なレイアウト等はサクッと作ることができるので、便利です。

管理画面

自社サービスの管理画面など、CSSフレームワークを使うことにより誰でも整った画面を作ることが可能です。エンジニアも扱えるので、作った機能をデザイナーやコーダーを介さずに実装できるのは強みだと思います。

一部のみ取り入れる

全てフレームワークで作るのではなく、自分で定義するのが面倒なグリッドレイアウトやフォームなどのUIパーツに限ってフレームワークを取り入れるというのは、作業の効率化という点で良いと思います。
「マイクロフレームワーク」と呼ばれる最低限の定義がなされた軽量フレームワークをベースとして使うのも手ですね。

それぞれのケースによってどのCSSフレームワークを使うべきか、それとも使わないほうが良いのかは異なります。
個人的には、マイクロフレームワークのような薄いフレームワークをベースにして、後は自分の好きなように作るという形が好みです。まだまだこれからも沢山出てきそうなCSSフレームワークなので、チェックしていきたいと思っています。

なお、最近のCSSフレームワークはこちらでまとめていますので、よろしければご覧ください。