プログラミング

プログラミング

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

14,348 views

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

 

本稿では2016年版Webデザイナーのための「CSSフレームワーク」ベスト10をご紹介します!

 

フレームワークとは何か?

ファイルとフォルダを含むパッケージのことです。CSSフレームワークには標準化されたHTML、CSS、JSコードが含まれます。フレームワークを使うことで、Web制作が効率化されます。

 

CSSフレームワークベスト10

 

  1. Bootstrap

bootstrap

http://getbootstrap.com/

 

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

 

2.Foundation

foundation

http://foundation.zurb.com/

 

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

 

  1. Semantic UI

semantic-ui

http://semantic-ui.com/

 

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

 

4.Pure CSS

pure

http://purecss.io/

 

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

 

5.Bulma

bulma-modern-css-framework

http://bulma.io/

 

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

 

6.Skeleton

skeleton

http://getskeleton.com/

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

 

  1. Milligram

milligram

https://milligram.github.io/

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

 

  1. Kube

kube

https://imperavi.com/kube/

 

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

 

  1. Blazecss

blaze

http://blazecss.com/

 

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

 

  1. Unsemantic

unsemantic

http://unsemantic.com/

 

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

 

(補筆)Uikit

uikit

https://getuikit.com/

 

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

 

(※本稿は「Top 30+ Best CSS Framework 2016 for Web Designers」の一部を翻訳・再編集したものです)

関連記事

おすすめ記事