Bootstrapだけじゃない!2017年のCSSフレームワークベスト5

2017/06/14

Ivaylo Gerchev

85

Articles in this issue reproduced from SitePoint
Copyright © 2017, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2017, KADOKAWA CorporationJapanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

WebサービスのUIやサイト制作のベースに使えるCSSフレームワーク。Bootstrapが代表的ですが、ほかにも人気のフレームワークをピックアップして紹介します。

CSSのフロントエンドフレームワークは百花繚乱です。しかし本当に優れたものだけに絞り込むことは可能です。

この記事では、私が考える「現在のフレームワークのベスト5」を比較します。強みと弱み、向いている分野があるので、プロジェクトで求めるものに応じて使い分けてください。プロジェクトが単純なら、複雑なフレームワークは不要です。また大半はモジュールベースですから、必要なコンポーネントを選んで使うか、別々のフレームワークのコンポーネントを併用することもできます。

紹介するフレームワークはGitHubの評価を基にしているので、最初に紹介するのは、もちろん一番人気のBootstrapです。

注:紹介する情報の一部は翌週ないし翌月には古くなっています。例:GitHubスターの数やバージョンなど。時間がたっている場合は最新の情報を参照してください。またフレームワークのサイズは必要なCSSとJavaScriptを含む最小限のサイズです。

1.Bootstrap

Bootstrapは昨今のフレームワークのなかでは文句なく一番人気です。増え続ける人気を見ると、選んでおけば、優れたWebサイトを作成できるし、作成途中に途方に暮れることもないでしょう。

Bootstrap

  • 開発者:Mark OttoJacob Thornton
  • リリース:2011年
  • 現行バージョン:3.3.7
  • 人気度:GitHubスター111,000個
  • 説明:「BootstrapはレスポンシブかつモバイルファーストなWebプロジェクトのための、一番人気のHTML、CSS、JavaScriptフレームワークです」
  • コンセプト・原則:レスポンシブWebデザイン(以下RWD)、モバイルファースト
  • サイズ:154KB
  • プリプロセッサー:LessSass
  • レスポンシブデザイン:あり
  • モジュール化:あり
  • 初期テンプレート:あり
  • アイコンセット:Glyphicons Halfling
  • 拡張・アドオン:バンドルされていないものの多数のサードパーティ製プラグインあり
  • 特徴的なコンポーネント:Jumbotron
  • ドキュメント類:良好
  • カスタマイズ:基本的GUIカスタムあり。残念ながらカラーピッカーは無く、自分で色の値入力が必要
  • ブラウザー対応:Firefox、Chrome、Safari、IE8以上(IE8にはRespond.jsが必要)
  • ライセンス形態:MIT

Bootstrapについて

Bootstrapの最大の強みはその幅広い人気でしょう。紹介するほかのフレームワークと比べて必ずしも優れているわけではありませんが、リソース(記事、チュートリアル、プラグイン、拡張機能、テーマなど)に関してはほかの4つを足し合わせたもの以上に充実しています。Bootstrapはそこら中で使われています。これこそが、選ばれ続ける理由なのです。

注:ここで言う「特徴的なコンポーネント」とは、本リストのなかのフレームワーク特有のものを指しています。

2.Foundation (by ZURB)

今回の比較では、Foundationを2番手に挙げました。ZURBという、しっかりした会社が後ろ盾となっているため、その名のとおり強固な基礎があります。結果、FoundationはFacebook、Mozilla、Ebay、Yahoo!、National Geographicなど、多くの大型プロジェクトで使用されています。

ZURB Foundation

  • 開発者:ZURB
  • リリース:2011年
  • 現行バージョン:6.3.1
  • 人気度:GitHubスター254,000個
  • 説明:「世界でもっとも進んだフロントエンドのレスポンシブフレームワーク」
  • コンセプト・原則:RWD、モバイルファースト、セマンティック
  • サイズ:197.5KB
  • プリプロセッサー:Sass
  • レスポンシブデザイン:あり
  • モジュール化:あり
  • 初期テンプレート:あり
  • アイコンセット:Foundation Icon Fonts
  • 拡張・アドオン:あり
  • 特徴的なコンポーネント:Icon Bar、Clearing Lightbox、Flex Video、Keystrokes、Joyride、Pricing Tables
  • ドキュメント類:良好。公式以外の参考リソースも多数あり
  • カスタマイズ:Bootstrapのものに似た基本的なGUIカスタムツール
  • ブラウザー対応:Chrome、Firefox、Safari、IE9以上、iOS、Android、 Windows Phone 7以上
  • ライセンス形態:MIT

Foundationについて

Foundationはビジネス向けへの対応、トレーニング、コンサルティングを提供しています。まさにプロご用達のフレームワークです。迅速かつ容易に学んで使用できるように、多くの資料を提供しています。

3.Semantic UI

Semantic UIは、Webサイトをもっとセマンティック(主にコンピュータが意味を解釈できるようにすることを指す)に作成するための、現在進行中のプロジェクトです。自然言語の法則を利用することで、コードはより読みやすく分かりやすいものになります。

Semantic UI

  • 開発者:Jack Lukic
  • リリース:2013年
  • 現行バージョン:2.2
  • 人気度:GitHubスター34,762個
  • 説明:「自然言語の法則にもとづいたUIコンポーネントフレームワーク」
  • コンセプト・原則:セマンティック、使用するHTMLタグの自由さ、レスポンシブ
  • サイズ:806KB
  • プリプロセッサー:Less
  • レスポンシブデザイン:あり
  • モジュール化:あり
  • 初期テンプレート:あり、基本的なものは提供
  • アイコンセット:Font Awesome
  • 拡張・アドオン:なし
  • 特徴的なコンポーネント:Divider、Flag、Rail、Reveal、Step、Advertisement、Card、Feed、Item、Statistic、Dimmer、Rating, Shape
  • ドキュメント類:非常に良い。整理された公式ドキュメントに加え、専用Webサイトで開始の手引き、カスタマイズ、テーマの作成を解説している
  • カスタマイズ:GUIカスタムツールなし、自力で変更するのみ
  • ブラウザー対応:Firefox、Chrome、Safari、IE10以上(IE9はプレフィックスが必要)、Android 4以上、Blackberry 10
  • ライセンス形態:MIT

Semantic UIについて

Semanticは今回取り挙げた中では、革新的で機能が豊富なフレームワークです。全体の構成や名称の規則は、クラスのロジックや意味付けからも、ほかのフレームワークに勝っています。

4.Pure (by Yahoo!)

Pureは純粋なCSSで書かれた、軽量なモジュールベースのフレームワークです。単独と組み合わせを必要に応じて使用できるコンポーネント群を提供しています。

Pure by Yahoo!

  • 開発者:Yahoo
  • リリース:2013年
  • 現行バージョン:0.6.2
  • 人気度:GitHubスター16,637個
  • 説明:「どんなWebプロジェクトでも使える軽量でレスポンシブなCSSモジュール」
  • コンセプト・原則:SMACSS、ミニマリズム
  • サイズ:16KB
  • プリプロセッサー:なし
  • レスポンシブデザイン:あり
  • モジュール化:あり
  • 初期テンプレート:あり
  • アイコンセット:なし。代わりにFont Awesomeを使用可
  • 拡張・アドオン:なし
  • 特徴的なコンポーネント:なし
  • ドキュメント類:良好
  • カスタマイズ:基本的なGUIスキン作成ツール
  • ブラウザー対応:最新版のFirefox、Chrome、Safari、IE7以上、iOS 6[c].x・7.x、Android 4.x
  • ライセンス形態:Yahoo! Inc. BSD

Pureについて

Pureはプロジェクトを開始するための基本的なスタイルを提供します。機能満載のフレームワークは不要で、特定の限られたコンポーネントを求める開発者には理想的でしょう。

5.UIkit (by YOOtheme)

UIkitは使いやすくてカスタマイズしやすい、気の利いたコンポーネントを集めたフレームワークです。人気は劣りますが、機能と品質はライバルと引けをとりません。

UIkit

  • 開発者:YOOtheme
  • リリース:2013年
  • 現行バージョン:3.0.0
  • 人気度:GitHubスター9,422個
  • 説明:速くてパワフルなWebインターフェイス作成のための、軽量かつモジュール化されたフロントエンドフレームワーク
  • コンセプト・原則:RWD、モバイルファースト
  • サイズ:326.9KB(SVGアイコン関連機能のuikit-icons.min.jsを含めた場合384.4KB)
  • プリプロセッサー:Less、Sass
  • レスポンシブデザイン:あり
  • モジュール化:あり
  • 初期テンプレート:あり
  • アイコンセット:独自のSVGアイコンシステムと、現在数を増やしつつあるアイコンライブラリー
  • 拡張・アドオン:あり
  • 特徴的なコンポーネント:Article、Flex、Cover、HTMLエディター
  • ドキュメント類:良好
  • カスタマイズ:GUIカスタムツールは旧バージョンの2.x用のみ
  • ブラウザー対応:Chrome、Firefox、Safari、IE9以上
  • ライセンス形態:MIT

UIkitについて

UIkitは多くのWordPressテーマで採用されています。柔軟でパワフルなカスタマイズができます(旧バージョンにはさらに進んだGUIカスタムツールがありました)。

最適なフレームワーク

最適なフレームワークを選ぶ際のガイドラインです。

  • フレームワークは普及しているか。人気があれば、それだけ多くの人が採用していて、コミュニティのチュートリアルや記事、実例、採用サイト、サードパーティ製拡張ツールが多い上に、ほかのWeb制作関連ツールとの相性も良い。大きなコミュニティがあるフレームワークは放棄される可能性が低いメリットもある
  • フレームワークは活発に開発されているか。良いフレームワークには、最新のWeb技術(特にモバイル関連)による進化が欠かせない
  • フレームワークは成熟しているか。フレームワークがまだ実戦で使用されて試練をくぐっていない場合に、自由にそれを試してみるのは良いことだが、本番の仕事でそれに頼ることは賢い選択とは言えない
  • フレームワークにドキュメント類がそろっているか。習得を早めるために、良いドキュメントがあることが望ましい
  • フレームワークに専門性があるか。ポイントは、汎用的なフレームワークのほうが、用途に特化したフレームワークよりも扱いやすいということ。多くの場合、スタイルの適用が最小限のフレームワークを選ぶほうが、カスタマイズ性が高くなるので得策といえる。新しくCSSのルールを追加するほうが、既存のものを上書きしたりオーバーライドするよりもずっと便利で効率的。既存のルールの上から新しいものを追加すると使えないルールが出てくるためCSSサイズは無駄に大きくなる

もしまだ決めかねているのなら、「ミックス・アンド・マッチ」(組み合わせる)という考え方があります。特定のフレームワークで満足しないなら、2つ以上のプロジェクトのコンポーネントを混ぜて使います。

あるフレームワークから、軽量なCSSベースのスタイルを、別のフレームワークからは優れたグリッド枠の機能を、3つ目のフレームワークからは複雑なコンポーネントを、といった具合に、モジュール化もすばらしいのでお試しください。

最後に、昨今はFlexboxとGrid Layoutが最新の主要ブラウザーに広く対応しており、複雑なレイアウトが簡単に作れます。今後多くの開発者がフロントエンドフレームワークの助けを借りるのをやめて、レイアウトを1から作り始める誘因になるかもしれません。

本記事は、紹介したフレームワークの最新機能を反映するため2017年5月17日に改訂しました。

(原文:The 5 Most Popular Frontend Frameworks of 2017 Compared

[翻訳:西尾 健史/編集:Livit

Copyright © 2017, Ivaylo Gerchev All Rights Reserved.

Ivaylo Gerchev

Ivaylo Gerchev

独学のWeb開発者兼デザイナーです。HTML、CSS、jQuery、PHP、WordPress、そしてPhotoshopやIllustratorで遊ぶのが大好きで座右の銘は「最小限の努力で最大限の結果を得る」。

Loading...