便利なものは積極的に取り入れていくことが大切ですが、WEBサイト作成をする中で
『フレームワーク』
これほど便利なものはありません。
以前は自分の手でCSSを手書きする必要がありましたが、コードが雑になってしまったり、思ったようにスッキリしないことが多いため、最近ではCSSのフレームワークが増えてきています。

フレームワークがたくさんあることはありがたいことですが、それでも
『どれを使えば良いか分からない‥』
という悩みも出てくるため、ここでは軽量で使いやすいCSSのフレームワークを厳選してご紹介したいと思います。
好きなところから読んでください
フレームワークについて簡単におさらい

そもそもこのフレームワークというのは、直訳で『枠組み』という意味になります。
フレームワークを活用することで、最低限必要な作業をするだけで簡単にWEBサイトを作り上げることができるのです。
ネット上のサイトを見ると分かると思いますが、基本的にサイトの構成というのはある程度決まっています。

文章で考えるのであれば、最初の段階で
この流れで文章を書いてください!と決めているような感じです。
その流れの通りに進めていけば、文章力が低い人でも相手に伝えることができるようになります。
フレームワークは、シンプルにクラス名だけをはめ込めばWEBサイトが作れる便利なツールとなるため、最近では企業でも頻繁に使われるようになっています。
CSSでフレームワークは使った方がいいの?

フレームワークの導入に関しては賛否ありますが、私の結論としては
『CSSのスキルが身についていれば使った方が効率が良い』
と思っています。
フレームワークを取り入れることによって、とにかく開発のスピードが早まります。
そして何より枠組みがしっかりしているため、自分だけではなく『クライアント』からでもコードが見やすいため、後々の修正がかなり楽です。

それを考えると、やはりフレームワークは積極的に活用すべきでしょう。
フレームワークを選ぶ際に重要視すべき要素

実際に、プロのエンジニアが試行錯誤して作り上げたコードの上で開発を進められるというのがフレームワークの魅力でもあるため、ここを上手に活かせるかどうかが重要になります。
世の中には数多くのフレームワークが存在しますが、その中で特に重要視すべきポイントとしては
『ファイルサイズの大きさ』
『デザイン性』
この2つは意識して見るようにしましょう。
シンプルなデザイン性で軽量のフレームワークを選び、そこで自分のコンセプトに合うWEBサイトを作り上げるようにしましょう。
あらかじめ目的を決めておき、その目的を達成するための手段としてフレームワークを活用していきましょう。
CSSおすすめフレームワーク5選

正直なところ、実際に多くのフレームワークを導入してみて、自分が使いやすいと感じるものを選んでいただくのが一番なのですが、ここでは数十種類のフレームワークを使ってみた私が、特に使いやすく感じたもの5つにまとめておきました。

Bootstrap4

Bootstrap3の段階では、様々な課題が残されていたため、正直あまり好きなフレームワークではありませんでしたが、最新版のBootstrap4になったことで、今までの課題が解決され、使いやすいCSSフレームワークへと変貌しています。
こちらは『WEBデザインフレームワーク』とも呼ばれるくらいなので、WEBデザイナーにとっては馴染みの深いものになります。
デザインすることがあまり好きではないエンジニアであっても、WEBデザイナーのように綺麗なサイト作成ができるため、自分のイメージを具体化することもできるでしょう。

使いやすさ:★★★★☆
デザイン性:★★★☆☆
汎用性の高さ:★★★☆☆
Ulkit

BootstrapからこちらのUlkitに乗り換えたいという人が増えているくらい人気が上がっているフレームワークになります。
こちらのフレームワークは、シンプルで洗練されたデザインながら、とにかく軽量のファイルで作られています。

JQueryなどのプラグインを取り入れても速度遅延が起こることもほぼありませんので、まずは一度公式サイトでどのようなものかをチェックしてみてください。
使いやすさ:★★★★★
デザイン性:★★★★☆
汎用性の高さ:★★★☆☆
Milligram

軽さを重要視するのであれば、こちらのMilligramは外せません。
実際に確認してみると分かりますが、こちらのフレームワークはとにかくシンプルに作られています。
そのため、無駄な機能が入っていないため、ファイル自体が軽く、必要に応じて機能を付け足す事が可能です。
とにかく無駄な機能を取り除いて、必要に応じて機能を付け足していきたい!と思っている場合には、こちらのフレームワークは最適でしょう。

『とりあえずフレームワークを使ってみたい』
『シンプルなものを探している』
このような考えを持っている方は、まずこちらのMilligramを使ってみてください。
使いやすさ:★★★★★
デザイン性:★★☆☆☆
汎用性の高さ:★★★☆☆
Bulma

この名前を聞いて、真っ先にドラゴンボールが頭に思い浮かんだ人とは友達になれそうです笑。
こちらのBulmaに関しては、CSSファイルを読み込むだけでレスポンシブ対応のレイアウトを構築できてしまうという魅力を持っています。
コンポーネント単位で使う事ができるため、一部だけを適応して利用することも可能です。

使いやすさ:★★★☆☆
デザイン性:★★★☆☆
汎用性の高さ:★★★★☆
Foundation
人気度で言えば、最初にご紹介したBootstrapと並ぶくらい有名なフレームワークです。

実際に使った感じの印象としては、フレームワークなんだけど、自分でもカスタマイズしやすい仕様となっているため、フレームワーク感のない仕上がりを実現できるようなイメージです。
定番に飽きて少し別のものを試したいと思った場合には、こちらのFoundationを使い始めてみると新しい発見があるかもしれません。
使いやすさ:★★★★☆
デザイン性:★★☆☆☆
汎用性の高さ:★★★★☆
初心者はフレームワークは使わないほうが良い(便利すぎるからw)

一度フレームワークを使ってしまうと、その便利さに正直驚きます。
どんな初心者であっても、フレームワークであればプロのエンジニアが書いたコードをそのまま使う事ができるため、WEBサイト制作の面白さにハマる事間違いなしです。
しかし個人的な意見としては
『初心者の頃は絶対にフレームワークを使わないほうが良い!』
という事です。
実際フレームワークを使うと開発が楽になります。
しかしこれはあくまでもチュートリアル通りに作っているだけであって、自分の手で作り上げたWEBサイトではありません。
既存のフレームワークがあれば開発ができるけど、自分のオリジナル性のあるサービスを作り上げようとすると、途端に挫折してしまいます。

最初に面倒なことを進んでできる人ほど、後々の伸び率がヤバイです。
なので今回の記事は中級者〜上級者以上の方に参考にしていただきたいと心で思っています。
記事のまとめ

ただフレームワークを使うだけだと、その辺にあるサイトと同じようなデザインになりがちですが、フレームワーク+オリジナル性を持たせる事ができれば、それだけで作業時間の短縮+差別化につながります。
これらを確認することもできるため、正直勉強する要素としても使えます。
今回の内容をまとめると
▼オススメのフレームワーク5選
- Bootstrap
- Ulkit
- Milligram
- Bulma
- Foundation
この5つになります。
ぜひ今後の開発に役立ててみてください。
ちなみに『こんなフレームワークもオススメですよ!』という意見があれば、ぜひコメントやお問い合わせから教えてくださいね。