今最も人気のあるCSSフロントエンドライブラリトップ10

こちらの記事は、Indrek Lasn 氏により2019年 8月に公開された『 Here’s a List of the Top CSS Front-End Libraries 』の和訳です。
本記事は原著者から許可を得た上で記事を公開しています。
著者Twitter https://twitter.com/lasnindrek

なぜ自前でCSSで書くよりもCSSライブラリを使った方が良いのでしょうか？簡単に言えば時間というリソースは限られているからです。スタイルよりも機能の構築に時間をかけるべきです。CSSをゼロから作成することで、パフォーマンスやビジュアルの利点はあるでしょうか？もちろん！あります。しかし、CSSの経験が豊富でビジュアルのクリエイティビティが高い人でない限り、アウトソーシングした方が効率的でしょう。

また、フレームワークを使用すれば、動作して人に見せられるアプリケーションを素早くプロトタイプすることがより簡単になります。

フレームワークの高い人気のおかげで、今では様々なフロントエンドフレームワークが使えるようになりました。今回、私は最も人気で多くの製品に使用されているフレームワークを一覧にまとめてみました。特にこれ以上説明することもないので、早速以下のCSSフロントエンドライブラリの一覧をご覧ください。

Ant Design

紹介文: 「Ant Designを使うと、UIデザインとプロトタイピングが、全てのプロジェクトメンバーにとってシンプルで簡単になります。バックグラウンドアプリケーションと製品の開発効率の向上に役立ちます。」— Ant Designのウェブページより

Ant DesignはバックグラウンドアプリケーションのUIデザイン言語で、Ant UEDチームによって改良が行われています。Ant Designは内部バックグラウンドプロジェクトのユーザインタフェース仕様を統一することで、デザインの違いや実装での不要なコストを削減し、従来UIデザインとフロントエンド開発に費やされていたリソースを解放することを目的としています。

特徴

• エンタープライズクラスのWebアプリケーション用UIデザイン言語
• 高品質なReactコンポーネントセットがすぐに利用可能
• 完全な型定義を持つTypeScriptで開発
• 開発や設計に役立つ様々なリソースとツール

対応環境

• 全てのモダンブラウザとInternet Explorer 9以上(polyfill適用)
• サーバーサイドレンダリング
• Electron

Foundation

紹介文: 「Foundationは高い応答性を持つ先進的なフロントエンドフレームワークの集合体です。(中略) プロトタイプから製品環境へと素早く移行し、あらゆる種類のデバイスで動作するサイトやアプリを構築できます。(中略) Foundationでは強力にカスタマイズ可能なレスポンシブグリッドが使用できます。Sass Mixinの強力なライブラリ、一般的なJavaScriptプラグイン、アクセシビリティ機能にも対応しています。」— Foundationのウェブページより

特徴

• a11yフレンドリー
• シンプルさを重視したスタイリング
• フレキシブルなSass
• ZURBスターターテンプレート

Bulma

紹介文: Bulmaは純粋なCSSのフレームワークで、bulma.cssというCSSファイルをただ一つだけ出力します。

このbulma.cssをそのまま使用することも、Sassのソースファイルをダウンロードして変数をカスタマイズして使用することもできます。

このフレームワークにはJavaScriptは一切含まれていません。大抵の場合、開発者は独自のJS実装(通常すでにあるはずです)と組み合わせて使うことを望みます。Bulmaは環境への依存がないと考えてください。つまり、既存のロジックに重ねて使うスタイルレイヤーとして使用できます。

特徴

• Flexboxなど最新のCSS3機能を使用し、CSS変数やCSSグリッドの使用も予定されています。 - Bulmaはブラウザ技術の最先端を追っています。
• シンプルなグリッドシステム: 一つの.columnsコンテナに複数の.column要素を必要なだけ格0. 納するだけでBulmaグリッドを作成できます。
• 習得しやすい構文: 読みやすいクラス名(例: .buttonや.titleなど)と、簡単で分かりやすい修飾子(例: .is-primaryや.is-largeなど)により、Bulmaの要素を数分もしないうちに簡単に見つけることができます。
• 100以上の有用なCSSヘルパー
• その他の機能はこちら

Spectre.css

紹介文: 「Spectre.cssは、軽量で応答性の高いモダンCSSフレームワークで、迅速で拡張性の高い開発を可能にします。Spectreでは、タイポグラフィと要素の基本スタイルや、Flexboxベースのレスポンシブレイアウトシステム、ピュアCSSコンポーネントとユーティリティが利用できます」— Spectre.cssのウェブサイトより

特徴

• 軽量 (gzip圧縮で10KB以下)
• 見た目に美しいコンポーネントとカラーパレット
• 直感的な構文
• 高い柔軟性: JavaScript不要

Tailwind CSS

紹介文: 「Tailwind CSSは、高度にカスタマイズ可能な低レベルのCSSフレームワークです。オーダーメイドのデザインを構築できる様々なビルディングブロックを、煩わしいブラウザ独自のスタイルをオーバーライドすることなく使用できます。」— Tailwind CSSのウェブページより

特徴

• レスポンシブ
• コンポーネントフレンドリー
• 高いカスタマイズ性

Shoelace

紹介文:「Shoelace.cssは、将来のCSS構文を使用して開発された軽量で先進的なCSSライブラリです。使いやすく、高度なカスタマイズが可能です。Bootstrapのユーザーにとってはなじみ深いながらも、新鮮な使い勝手に感じるでしょう。Shoelaceはほぼ全てのブラウザで利用できます。CDNバージョンはプロトタイプの作成には最適ですが、すべての機能を利用するには、Shoelaceをソースからビルドする必要があります。」— Shoelaceのウェブページより

特徴

• 69kB以下と軽量
• ネイティブなCSS変数やその他将来のCSS機能を使用
• 使いやすく、高度なカスタマイズが可能

Semantic UI

紹介文:「Semantic UIは、単語やクラスを交換可能な概念として扱います。クラスは、名詞/修飾子の関係、語順、複数形などの自然言語の構文を使用して、概念と名称を直感的に結びつけます。BEMまたはSMACSSなどと同じような利点が得られながらも、退屈な作業を必要としません。」— Semantic UIのウェブページより

特徴

• 単語とクラスを交換して使える簡潔なHTML

  ```
  <div class="ui three buttons">
   　<button class="ui active button">One</button>
   　<button class="ui button">Two</button>
   　<button class="ui button">Three</button>
  

  　

• 単純化されたデバッグ
  

• テーマ

Skeleton

説明文:「Skeletonは、いくつかの標準的なHTML要素のスタイルを設定し、グリッドを提供するだけですが、多くの場合はそれだけでも、始めるには十分だったりするものです。小規模なプロジェクトに着手する場合や、大規模なフレームワークのすべての機能が必要だとは感じない場合は、Skeletonを使用するべきでしょう。」— Skeletonのウェブページより

特徴

• コードはわずか約400行と羽のように軽量
• モバイルを念頭においた設計
• UIフレームワークではなく、開発の開始点となるように設計されたスタイル
• コンパイルやインストールが不要で、すぐに利用可能

Skeletonは開発をスピードアップしてくれ、セットアップも簡単なので個人的にとても気に入っています。

Tachyons

紹介文:「Tachyonsは、CSSと開発を機能的にするためのUIデザインシステムです。CSSを一切書かなくても、新しいUIをすばやく構築・デザインできます。」— TachyonsのGitHubページより

「(組織や製品の)規模が拡大すればするほど、新しいコンポーネントと、コンポーネントのバリエーションを開発していく事になるため、UIデザインシステムはどんどん崩壊していきます。これらのバリエーションはしばしば(「頻繁に」と読んでください)ドキュメント化されず、再びそのコンポーネントやバリエーションが必要になった時(または新たに作成された時)に、コンポーネントが重複して作成されてしまうことになります。仮にコンポーネントがドキュメント化されていたとしても、効果的なドキュメントは、すべての状態・バリエーションを取得するために数十〜数百ものインスタンスが必要になることがよくあります。Tachyonsなどのシステムではこれをドキュメント化する代わりに、コンポーネントのプロパティを制限することでこの問題に対処しています。(私はこれを「サブアトミック」デザインと呼んでいます)

そして、次にサブアトミックコンポーネント(プロパティ)を構成してコンポーネントを作成します。コンポーネントとそのバリエーションを作成するのではなく、代わりに「材料」としてのサブアトミックコンポーネントの包括的なリストを作成するだけで済みます。これらのサブアトミックコンポーネントを何千通りもの方法で組み合わせることで、何百ものコンポーネントを作成できるようになります。コンポーネントのプロパティの数は多くなりますが、いくつかの許容値(サブアトミックコンポーネント)の集合に拘束されます。— Daniel Eden、Facebookデザイナー

特徴

• モバイルファーストなCSSアーキテクチャ
• 490通りもの色の組み合わせ
• 複数のデバッグユーティリティを使用し、レイアウトの問題を軽減
• 軽量(14KB以下)
• オープンソースのコンポーネントライブラリ
• プレーンHTML、React、Ember、Angular、Railsなどとの高い親和性
• 無限にネストできるレスポンシブグリッドシステム
• PostCSSで開発

Material Design

紹介文:「Googleによって開発・デザインされたMaterial Designは、成功するデザインの古典的な原則に、革新と技術を組み合わせたUIデザイン言語です。Googleの目標は、あらゆるプラットフォーム上のすべての製品で統一されたユーザー体験を可能にするデザインシステムを開発することだ。」-Material Designのウェブページより

特徴

• 幅広いサポート
• スターターテンプレート
• サードパーティー対応

あなたのCSSライブラリをシェアしたいですか？私がまちがっていたり、すごいライブラリを見落としていましたか？その場合は是非教えてください！

読んでくれてありがとう！がんばって！

翻訳協力

　
Original Author: Indrek Lasn
Thank you for letting us share your knowledge!

この記事は以下の方々のご協力により公開する事が出来ました。
改めて感謝致します。
選定担当: yumika tomita
翻訳担当: siho1
監査担当: @nyorochan
公開担当: asuma yamada