【作業がぐっと効率的に】フロントエンド向けのUIフレームワーク5選

フロントエンド向けのUIフレームワークは、新しいプロジェクトの土台を作るのにぴったりです。

毎年新たなフレームワークが多数リリースされていますが、今回紹介するのはその中でも多くのユーザーを持つものばかりです。それぞれグリッドやボタン、フォームなど得意なものが違ってきますので、あなたのプロジェクトに最適なものを選んでください。

1.Bootstrap

TwitterがリリースしたBootstrapはきっともうご存知でしょう。2011年にリリースされ、UIフレームワークの中では古参となります。カスタマイズ用のSassライブラリやナビゲーション作成用のJSコンポーネントが付属しています。次期バージョンであるBootstrap 4が開発中で、Twitterがウェブでリーダーシップを取ろうと努力を続けているのが伺えます。

2.Foundation 6

ZurbのFoundationは最近大きく更新され、サイト用とメール用の2つのライブラリに分離されました。サイト向けFoundationは好みのレイアウトが作れるミニマルデザインのUIフレームワークを提供しています。タブやアコーディオン、入力フィールドなども含めたグリッドを自由に操作できます。

3.Petal

Petalはリリースされて間もないフレームワークで、LESSを基盤としたオープンソースのCSS UIライブラリです。バージョン番号がまだ0.6と若いながらも本番環境で使用でき、グリッド、タイポグラフィー、ボタン、モーダルなどの解説が充実しています。

4.Pure CSS

Pure CSSはモジュラーというアプローチでCSSに新しい風を吹き込もうとしています。様々な要素を使用するための小さなライブラリが集まったフレームワークです。どれだけのライブラリを含めるかはあなた次第で、とてもシンプルなサイトからカスタムグリッドを使った複雑なものまで柔軟に対応します。個人的にはBootstrapと並び最高のUIフレームワークだと思います。

5.Semantic UI

私はSemantic UIのクリーンで洗練されたデザインが大好きです。基本的な機能は一通り揃っていますが、一番の特徴は3000個を超える変数を持つカスタムテーマに対応することです。ベースのテーマを選び、そこから好きなようにカスタマイズすることができます。

レイアウトをゼロから構築するのも悪くありませんが、せっかくこうした便利なフレームワークがあるのですからぜひ活用しましょう。時間と労力、ストレスを削減しつつ美しいサイトを作ることができますよ。

※本記事は、The Best Free Frontend Web Frameworks Right Nowを翻訳・再構成したものです。