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. フォント選びの基本中の基本。和文&欧文の4系統

    フォントはレイアウトや配色と並んでWebデザインにおいて大きなウェイトを占める要素です。同じテキスト…

  2. Webページの統一感がUP。クリック率改善も期待できるグリッドデ…

    既存のWebサイトの一部をリニューアルしたり、コンテンツを追加したりする場合、課題になってくるのがそ…

  3. ジャンル・目的に合わせて幅広く利用可能。高品質なWebフォントサ…

    OSやデバイスを問わず制作サイドの意図通りのフォントを表示することができ、レスポンシブ対応にも相性の…

  4. WordPressの効果を最大化する、レンタルサーバー選びのポイ…

    WordPressを利用するうえで最低限必要となるのが、「Apache」と「MYSQL」の両方に対応…

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

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

  6. サブ要素&導線に盛り込むべき情報は?ファーストビューの効果的な改…

    Webサイトの「顔」ともいえるファーストビュー。「メインコピー」と「キービジュアル」に加えて、「サブ…

  7. もうデザイナーの「勘」には頼らない!イメージを視覚化する3つの工…

    Webデザイナーへのディレクションでは、イメージを言葉で伝えるだけでなく、視覚化してひと目で理解でき…

  8. コンテンツの品質管理に役立つ無料の文章チェックツール3選

    ライターや外部の制作会社から納品されてきたコンテンツの品質管理もWebディレクターの大切な仕事の1つ…

PICKUP

PAGE TOP