スイッチ | ブログ・サイト運営を応援するWebマガジン

Bootstrapだけじゃない!デザイナー必見のCSSフレームワーク5選


デザインを簡単に制作することのできるCSSフレームワークは、ウェブデザインでは大いに活躍してくれます。特に、TwitterがリリースしているBootstrapはCSSフレームワークの中では圧倒的な人気。しかし他にも魅力的なCSSフレームワークはいくつも知られています。制作するデザインや開発体制によって、最適なCSSフレームワークを選択していきたいものです。本稿では、おすすめのCSSフレームワークをその特徴とともにご紹介していきます。

CSSフレームワークとは?

ところで、そもそもCSSフレームワークとはどういったものなのでしょうか?おすすめのフレームワークについてご紹介する前に、CSSフレームワークの基本について簡単に復習しておきましょう。

ホームページやウェブサービスなどのウェブ制作物は、いくつかのプログラミング言語で作られています。中心となるのは、HTMLとCSSでしょう。HTMLとは、ページに配置する要素(テキストやボタン、画像など)を決めています。一方で、CSSはそれら要素のデザインやレイアウトを決めています。

CSSフレームワークとは、簡単に言うとCSSを使いやすくしてくれるものです。CSSをほとんど書かずに要素のデザインができるので、コーディングが苦手なデザイナーでもウェブデザインを制作することができます。管理の手間やコストを削減することにもつながるので、ウェブ制作ではぜひとも活用していきたいツールなのです。それでは、おすすめのCSSフレームワークとその特徴について見ていきましょう。

おすすめのCSSフレームワーク5選

Bootstrap

CSSフレームワークと言えばコレ、というくらい普及しているのが、Twitterが開発しているBootstrapです。開発元がTwitterであることからもわかるように、Twitterライクなデザインを簡単につくることができます。もちろんレスポンシブ対応です。Sass版とLess版も提供されています。
前述の通り、Bootstrapの愛用者は世界中にいます。そのため、書籍やネットなどの情報が圧倒的に多いです。基本的な使い方から活用方法、困った時の解決方法まで、あらゆる情報が簡単に手に入ります。ビギナーだけでなく、ハードにカスタマイズをしたいプロにとっても嬉しいことですね。

Bootstrapのサイトはこちら

Foundation

Bootstrapと並んでフレームワーク選びの筆頭に並ぶのが、Foundationです。レスポンシブかつスタイリッシュなデザインを、少ないステップでつくることができます。グリッドの扱いが得意で、機能の豊富さでもBootstrapに引けを取りません。Sass版も提供されています。Bootstrapと同様、サイズが大きいことがデメリットでしょうか。

Foundationのサイトはこちら

Material UI

名称からわかるように、いわゆるマテリアルデザインを取り入れているCSSフレームワークです。2014年にGoogleが提唱した、マテリアルデザインのガイドラインをもとに開発が行われています。CSSフレームワークとしては新しい部類に入る、新進気鋭のツールです。

Material UIのサイトはこちら

Pure

検索エンジンで有名なYahoo!が開発しているCSSフレームワークです。他と比較すると機能は少ないのですが、それだけに軽量に動いてくれます。サイズも小さく、Bootstrapが200KB弱なのと比較してPureは5KBもありません。動作速度や扱いやすさは、フレームワーク選びの重要なポイントです。その点でも、フレームワーク選びの候補としてはPureも注目に値します。

Pureのサイトはこちら

Skeleton

Skeletonは、Pureよりもさらに軽量なCSSフレームワークです。タブやページネーション、テーブルなどの要素デザインは含まれていません。ページのレイアウトだけに使いたい場合に最適ですね。

Skeletonのサイトはこちら

あとがき

Bootstrapも万能ではなく、フレームワークによってそれぞれメリットやデメリットがあることがわかります。無料で利用できるものがほとんどなので、まずは動きを見てから自分に合うCSSフレームワークを選んでいってください。


Sponsored Links

こちらの記事もおすすめです!

シェア頂けると励みになります!

ブログ更新情報はこちらから発信しています。

【完全保存版】ショッピングカートASP徹底比較2018

運営者情報

荒木 厚(株式会社コクリ 代表)

デザイン会社、WEB運営会社を経て、「株式会社コクリ」を設立。 Wordpressを使ったWebサイトやネットショップの企画・制作、SEO・リスティング広告を使った集客支援をしています。