CSSフレームワーク使ってる?レスポンシブWebデザイン160サイトを調べてみた

みなさんはコーディングをするときに、CSSフレームワークを活用していますか?

私はBootstrapやFoundationなどの存在は知りつつ、あまり使う必要性を感じていないのでフレームワークは使わない派です。

ただ一方で、Web制作の現場ではフレームワークを利用したサイト構築が一般的になりつつあるという話もときどき耳にします。

そこで今回の記事では、世の中のWebクリエイターさんはどのようにレスポンシブWebデザインをコーディングしているのか調べてみました。

レスポンシブWebデザイン160サイトを調査

調査方法

  • Responsive Web Design JPさんに掲載されているサイトの中から、新しい順に160サイトを調査(2017/06/06時点)。
  • 調査にはFirefoxのアドオン「wappalyzer」を使用。

COLUMN

Responsive Web Design JPさんからWebサイトをピックアップした理由は2つあります。1つは取り扱うサイトの幅広さ。大企業から個人事業、特設サイトやコーポレートサイトなど多様なWebサイトが掲載されています。もう1つはデザイン性。質の高いWebサイトが、どの技術を採用しているかを知りたかったからです。

CMSや広告配信・Webサーバーなど全51カテゴリのシステム別マーケットシェアの情報も

フレームワークを使っていないサイトが圧倒的多数に

160サイトを調べた結果、
Bootstrap…11サイト
Fundation…1サイト
フレームワークなし…148サイト

という結果になりました。

あんまりフレームワークは使われていない(?)んですね…。

CSSフレームワークはどのような案件で活用されているのか?

それではCSSフレームワークは、どのような状況で使われているのでしょうか。

調査で使ったアドオンのwappalyzerのウェブサイトではBootstrapの採用サイトとして、 PayPalやネットフリックス、ストックフォトのShutterstockなどが紹介されていました。
サービス系のWebサイトに多く使われているのかもしれないですね。

特にデザイナーが不在の開発チームにとって、デザイン性の高いWebサイトが作れる可能性を持ったCSSフレームワークは大変便利なものだと思います。
構築スピードの速さからスタートアップのサイトにも多く活用されているイメージです。

まとめ

私がふだん携わる案件では、クライアントの職種やサービスに合わせてオリジナルでデザインを作り込むことが多く、CSSフレームワークを使っていないのが現状です。
(CSSフレームワークのメリットである「あらかじめ用意されたテンプレート」を使うことがほぼないため)

BootstrapやFoundationがいくら簡単といっても、使いこなすにはそれなりに勉強が必要なのでなかなか手が出せない…というのもありますが。

デベロッパーの方が制作の主導権を持っている制作会社さんの場合などは、積極的にCSSフレームワークを採用していっているのかもしれないですね。

以上、気になったので調べてみました。