フレームワークの活用はWebデザインの現場において「当たり前」のものとなってきましたね。制作にかけられる時間・労力は決して無限ではありません。限られた資源(リソース)を効果的に分配するのもプロとして欠かせない姿勢です。
本稿では2016年版Webデザイナーのための「CSSフレームワーク」ベスト10をご紹介します!
フレームワークとは何か?
ファイルとフォルダを含むパッケージのことです。CSSフレームワークには標準化されたHTML、CSS、JSコードが含まれます。フレームワークを使うことで、Web制作が効率化されます。
CSSフレームワークベスト10
- Bootstrap
Bootstrapがナンバー1のフレームワークと言って間違いないでしょう。多くの顧客はWebサイトをBootstrapで構築することを望みます。ハイクオリティなWebサイトをデザインするための、強力なフロントエンドフレームワークです。
2.Foundation
もう一つの人気の高いフレームワークがこのFoundationです。プレミアムテーマの開発に使われることが多く、例えばWordPressプレミアムのテーマに使われています。
- Semantic UI
Semantic UIを使うと、人に優しく、レスポンシブでかつ美しいWebサイトを素早く開発することができます。SemanticはIntuitive Javascriptと簡易化されたデバッグシステムを用いています。
4.Pure CSS
Pure CSSは小さいサイズのレスポンシブCSSモジュールであり、どのWebデザインプロジェクトでも使えます。Pure CSSは軽くて小さく、余分なものが含まれていないため新しいルールを簡単に設定することができます。
5.Bulma
モバイル優先でデザインされています。カラムシステムはシンプルで、リサイズ可能です。このフレームワークを際立たせているユニークな点は、Metro UI CSS グリッドです。
6.Skeleton
Skeletonはとてもシンプルで、モバイルに優しいフレームワークです。CSSファイルのちょっとしたコレクションからできており、どのサイズのスクリーンにも合うようなWebサイトを素早く製作するのに適しています。
- Milligram
Milligramはgzipされた状態でたったの2KBしかありません!Milligramは主に、少ないプロパティでパフォーマンスを向上させ、生産性を上げるためにデザインされました。
- Kube
Kubeはプロフェッショナルなディベロッパー、デザイナー向けのフレームワークです。タイポグラフィにも力を入れています。
- Blazecss
素早くWebサイトを構築するための素晴らしい骨組を提供します。BlazecssはBoostrup, Semanticなどの巨大なフレームワークとSkeltonやMiligramのような小さいフレームワークの間に位置します。
- Unsemantic
Unsemanticグリッドシステムは960グリッドシステムを継承するもので、同じような働きをします。違いは、Unsemanticはパーセンテージに基づいているという点です。
(補筆)Uikit
Uikitは超軽量のフレームワークで、フロントエンド開発者がWebインターフェイスを手間なく構築するのに役立ちます。提供されているのは、html、CSS、JSのコンポーネントで導入もカスタマイズも簡単です。またLESS やSASS ファイルを吐き出すこともできます。
(※本稿は「Top 30+ Best CSS Framework 2016 for Web Designers」の一部を翻訳・再編集したものです)









