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. ユーザーを後押し&安心感を与えるクロージング。LPの「ストーリー…

    ユーザーの願望に対する解決策だけでなく、その先にあるプラスアルファの価値を示し、裏付けや背景をあわせ…

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

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

  3. 画像のタイプ・特徴にあわせて使い分けたいgjf、jpg、png

    Webサイト制作で画像を取り扱ううえで意外のおろそかになりがちなのが、画像の保存形式です。プロのフォ…

  4. コンテンツ制作に集中できる、SEO対策済みWordPressテン…

    ユーザーの役に立つ情報を発信することによって検索上位獲得を狙うコンテンツSEO対策が主力となった今で…

  5. モックアップやサンプル画像、アプリなどに使える無料PSDファイル…

    プレゼンテーションや打ち合わせの際、具体的なイメージを共有するのに非常に役立つモックアップ。限られた…

  6. 「オウンドメディアって何?」意外と知られていないトリプルメディア…

    「オウンドメディアって最近よく聞くけど、どんなもの?」。この質問に正確に答えられるWebディレクター…

  7. ランディングページの成功事例その1「DHC 公式オンラインショッ…

    効果的なランディングページを制作するためには、ファーストビューに加えて、Webページ全体のレイアウト…

  8. 読まれるコンテンツに欠かせない、分かりやすい文章の3つのポイント…

    良質なコンテンツを配信することによってユーザーの行動を喚起するコンテンツマーケティングが主流となった…

PICKUP

PAGE TOP