menu

アイコンもセットで、レスポンシブデザインにも対応。CSSフレームワーク6選

ディレクター心得

WordPressと同じくWebサイト制作の生産性アップに役立てたいのが、CSSフレームワークです。「Boostrap」をはじめとしたCSSフレームワークは、Webデザインのトレンドを押さえたアイコンやボタンなどの素材がパッケージングされているものも多く、デザイナーやコーダーの手を借りなくても一定以上の品質のWebサイトをカタチにすることができます。

また、ほとんどのCSSフレームワークはレスポンシブデザインにも対応しているため、ワンソースでのサイト運用を可能にします。代表的なCSSフレームワークをご紹介します。

Bootstrap
CSSフレームワークの代名詞的存在といえるのがTwitter社から提供されている「Bootstrap」です。レスポンシブ対応の重要性が指摘されるなか急速に普及し、世界中のWebサイト制作に利用されています。そのため使い方のポイントを紹介したブログや情報サイトも多く、予備知識がなくても利用しやすいのが特徴です。

Foundation
「Bootstrap」が定番化するなか、デザイン・機能によって差別化を図りたいWebディレクターやWebデザイナーに利用されているCSSフレームワークです。公式のドキュメントが分かりやすく、他のフレームワークでは難しいような複雑なデザインやレイアウトにも対応しています。

Web Starter Kit
Googleから提供されているCSSフレームワークです。Googleの提唱しているマテリアルデザイン(より分かりやすく直感的に操作できるよう、物理法則に基づいて設計されたデザイン)も取り入れられています。

Pure
Yahoo!によるCSSフレームワークです。「Bootstrap」や「Foundation」と比べると軽量なのが特徴で、その分機能も限られますが、特に機能にこだわりがなく、「まずCSSフレームワークを使ってみたい」という場合には最適な選択肢の1つかもしれません。

Almost Flat UI
「Foundation」をベースに開発されたCSSフレームワークです。名前の通り現在のWebデザインの主流になっているフラットデザインが取り入れられており、ECサイトやブログメディアなど幅広いWebサイトに利用することができます。

Cardinal
モバイルファーストをコンセプトに開発され、スマートフォンと相性が良いのが特徴です。デフォルトの機能はシンプルなのものになっており、ユーザーの目的に応じてカスタマイズしていくフレームワークです。

小野 良勝 代表取締役

投稿一覧

横浜の制作会社アイティネットの代表取締役。WEB、モバイル、DTP、デジタルサイネージを事業展開。それぞれの特性を活かした メディアミックスを得意とする。iPhoneやiPadを活用したBtoB向けのアプリケーションを開発。モチベーションの高い人や異業種との交流がたまらない。華の47年組。趣味はオートキャンプ

4段階のプッシュ通知で作品世界へ誘い込む。「X-MEN」プロモーション

Webサイトにおけるユーザーの視線の動きを知る(1)

関連記事

  1. Web運用を委託した方がいい企業5つの特徴!!と、1つの注意点

    Webサイト運用って何かと手間がかかるので、出来れば制作会社に委託したいと考えている企画担当の方が多…

  2. SNSの拡散(バズ)を視覚化。今すぐ役立てたい効果測定ツール3選…

    オウンドメディアとならんで、Webマーケティングの重要な要素の1つがSNSの活用です。「SNSを使っ…

  3. 業務効率を上げるWebディレクター向けテキストエディタ4選

    Webサイトの記事の確認・作成に限らず、デザイナーをはじめとした制作スタッフとの情報共有や、備忘録・…

  4. 縦長レイアウトはもう古い?スクロールエフェクトを活用したWebサ…

    CSS3やHTML5によってWebサイトには以前にも増して多くの情報量を盛り込めるようになってきてい…

  5. ツールを使って効率的に配色。カラーパレットのWebサービス4選

    ベテランのWebデザイナーでも頭を悩ますことの多いWebサイトの配色。256種類のカラーコードによる…

  6. Webサイトの制作スケジュールを見える化&一元管理。無料ガントチ…

    Webディレクターのメイン業務の1つであるスケジュール管理。クライアントに加えてプロデューサーや外部…

  7. 競合サイトの調査に活用できるGoogleの3つの機能

    大手調査会社ニールセンが2015年12月に発表したリサーチ結果によれば、日本におけるインターネット利…

  8. ランディングページの成功事例その2「TECH:CAMP」

    ベテランのWebディレクターでも頭を悩ませることの多いランディングページ制作。用途・目的に沿ったペー…

PICKUP

PAGE TOP