【決定版】デキるWebデザイナーのための「CSSフレームワーク」ベスト10　

フレームワークの活用はWebデザインの現場において﹁当たり前﹂のものとなってきましたね。制作にかけられる時間・労力は決して無限ではありません。限られた資源︵リソース︶を効果的に分配するのもプロとして欠かせない姿勢です。今後もこうしたCSSのフレームワークを活用した流れは続くのではないでしょうか。

 

そこで本稿では制作の現場で使えるWebデザイナーのための﹁CSSフレームワーク﹂ベスト10をご紹介します！下記にご紹介するフレームワークをうまく活用して、ぜひ日々の業務の効率化にお役立てください。

 

そもそもフレームワークとは何か？

フレームワークとは、本来ファイルとフォルダを含むパッケージのことです。CSSフレームワークの場合だと標準化されたHTML、CSS、JSコードを含んだ機能群のことを指します。こうしたフレームワークを使うことで、一からフロントエンド開発を行うよりも飛躍的にWeb制作の生産性が向上します。

 

もちろんこうしたフレームワークの導入には少々の学習コストがつきものです。ですが、CSSフレームワークはそうした学習コストを払っても十分なリターンがあるでしょう！

 

決定版！CSSフレームワークベスト10

 


(一)Bootstrap



http://getbootstrap.com/

 

お馴染みTwitterが開発したBootstrapがナンバー1のフレームワークと言って間違いないでしょう。多くの顧客はWebサイトをBootstrapで構築することを望みます。ハイクオリティなWebサイトをデザインするための、強力なフロントエンドフレームワークです。

 

2.Foundation


http://foundation.zurb.com/

 

もう一つの人気の高いフレームワークがこのFoundationです。プレミアムテーマの開発に使われることが多く、例えばWordPressプレミアムのテーマに使われています。

 


(一)Semantic UI



http://semantic-ui.com/

 

Semantic UIを使うと、人に優しく、レスポンシブでかつ美しいWebサイトを素早く開発することができます。SemanticはIntuitive Javascriptと簡易化されたデバッグシステムを用いています。

 

4.Pure CSS


http://purecss.io/

 

Pure CSSは小さいサイズのレスポンシブCSSモジュールであり、どのWebデザインプロジェクトでも使えます。Pure CSSは軽くて小さく、余分なものが含まれていないため新しいルールを簡単に設定することができます。

 

5.Bulma


http://bulma.io/

 

モバイル優先でデザインされています。カラムシステムはシンプルで、リサイズ可能です。このフレームワークを際立たせているユニークな点は、Metro UI CSS グリッドです。

 

6.Skeleton


http://getskeleton.com/

Skeletonはとてもシンプルで、モバイルに優しいフレームワークです。CSSファイルのちょっとしたコレクションからできており、どのサイズのスクリーンにも合うようなWebサイトを素早く製作するのに適しています。

 


(一)Milligram



https://milligram.github.io/

Milligramはgzipされた状態でたったの2KBしかありません！Milligramは主に、少ないプロパティでパフォーマンスを向上させ、生産性を上げるためにデザインされました。

 


(一)Kube



https://imperavi.com/kube/

 

Kubeはプロフェッショナルなディベロッパー、デザイナー向けのフレームワークです。タイポグラフィにも力を入れています。

 


(一)Blazecss



http://blazecss.com/

 

素早くWebサイトを構築するための素晴らしい骨組を提供します。BlazecssはBoostrup, Semanticなどの巨大なフレームワークとSkeltonやMiligramのような小さいフレームワークの間に位置します。

 


(一)Unsemantic



http://unsemantic.com/

 

Unsemanticグリッドシステムは960グリッドシステムを継承するもので、同じような働きをします。違いは、Unsemanticはパーセンテージに基づいているという点です。

 

︵補筆︶Uikit


https://getuikit.com/

 

Uikitは超軽量のフレームワークで、フロントエンド開発者がWebインターフェイスを手間なく構築するのに役立ちます。提供されているのは、html、CSS、JSのコンポーネントで導入もカスタマイズも簡単です。またLESS やSASS ファイルを吐き出すこともできます。

 

︵※本稿は﹁Top 30+ Best CSS Framework 2016 for Web Designers﹂の一部を翻訳・再編集したものです。また2017年6月に補筆・修正を加えています︶