レスポンシブWebデザインのフレームワーク＆グリッドシステムの個人的まとめメモ

レスポンシブWebデザインについて約1年ぶりに調べてみようと思ってググってみたら情報が多すぎて訳がわけがわからないので（苦笑）、いくつかの「まとめ」記事を紹介させて頂きつつ、個人的なメモとしてまとめてみました。

「Design Spice」さんの記事 

レスポンシブWebデザインに使えるCSSフレームワーク&グリッドシステム │ Design Spice

2013年5月に書かれた記事ですが、紹介しているフレームワークの数がとにかく多いです。よくぞここまでまとめたなーと感心しきりです。とりあえず記事で紹介されているフレームワーク（とその他いろいろ）を箇条書きにさせて頂きます。ちなみに各サイトへのリンクは外しておきますので利用した方は上記記事を参照して下さい。

【フレームワーク】
Bootstrap
Foundation
Gumby
Skelton
Wirefy
Base
CSShorus
Tuktuk
Amazium
YAML CSS Framework
Centurion
Workless
helium
Almost Flat UI

【グリッドシステム】
Responsive Grid System
The Semantic Grid System
Golden Grid System
Responsive Grid System
BluCSS
Columnal
Gridiculous
Frameless
Less+ Framework
Titan Framework
Ingrid
Gridism
Simple Grid
Responsive Aeon Framework
Toast
MUELLER GRID SYSTEM
Susy
Proportional Grids
Flurid
Micro Responsive Grid
Unsemantic CSS Framework
Singularity
Bedrock
996 Grid
Jeet Framework

【ジェネレーター】
Gridpak Responsify.it Variable Grid System RWD Calculator
【その他】
Gridless
The Goldilocks Approach to Responsive Web Design
Cool Kitten

「yugurido」さんの記事

レスポンシブwebデザインに役立つレスポンシブフレームワーク25 | yugurido

2013年2月に書かれた記事ですが、紹介しているフレームワークについて一つ一つ感想メモが書いてあります。とてもまめです。選ぶときの参考になるのでとても有り難いです。こちらも記事で紹介されているフレームワークを箇条書きにさせて頂きます。ちなみに各サイトへのリンクは外しておきますので利用した方は上記記事を参照して下さい。

cgSceneGraph
Groundwork
Responsive Boilerplate
Opentip
xyCSS
Workless
Junior
Reuze
Centurion
Dashing
Pods
Nimbus
Simple Grid
CSSHorus
BootMetro
Kube Framework
BASE
Metro UI CSS
Wirefy
ENYO
ResponsiveAeon
jqmPhp
Responsive Grid System
Gumby

「co-jin」さんの記事

レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35（〜2013年9月まで） | co-jin

2013年10月に書かれた記事で9月までに発表されているフレームワークがまとめられています。この記事も紹介しているフレームワークについて一つ一つ一言メモが書いてあってわかりやすいです。こちらも記事で紹介されているフレームワークを箇条書きにさせて頂きます。ちなみに各サイトへのリンクは外しておきますので利用した方は上記記事を参照して下さい。 

Pure
Cascade Framework
.FITGRD
PocketGrid
Kraken
GroundworkCSS
Topcoat
gridism.
Furatto
Gumby
skelJS
Ink
HTML KickStart
Markup Framework
Jeet Framework
KNACSS
Skeleton
Golden Grid System
Bootstrap
Foundation
RWD GRID
ONE% CSS GRID
IVORY FRAMEWORK
BASE FRAMEWORK
SIMPLE GRID
KUBE CSS FRAMEWORK
PROPORTIONAL GRIDS
QUANTUM FRAMEWORKK
INGRID
TOAST
THE GOLDILOCKS APPROACH
Workless
Reuze
Pods
CSSHorus

「グリッドシステム」とは

グリッドシステム（グリッドレイアウト）とは、画面を論理的にグリッド（格子）状に分割して、その分割されたブロックごとに文字等を配置してレイアウトしていく手法のことです。

ちなみにこのグリッドシステムは、スイスのグラフィックデザイナーのヨゼフ・ミューラー＝ブロックマンという方が「デザインされる媒体の面積と文字の大きさの比例」について研究・発表した理論のようです。（下の書籍）

Grid Systems in Graphic Design/Raster Systeme Fur Die Visuele Gestaltung

個人的な感想

あれもこれも手を出すとそれこそ訳が分からなくなるので、まずはどれか一つを選んで使ってみつつフレームワーク＆グリッドシステムに慣れることから始めようと思います。（さて、どれにしましょうかね？）

「レスポンシブWebデザイン」の参考書籍

本物のレスポンシブWebデザインを本気で学びたい人に。基礎から実践まで1冊にまとめました。イーサン・マルコッテ氏が提唱するRWDの3大要素「メディアクエリー/フルードイメージ/フルードグリッド」をていねいに解説。レスポンシブタイプセッティング、レスポンシブテーブルなど現場のノウハウが満載。RWDに欠かせないパフォーマンス改善のアイデアとテクニックも多数掲載。

（Amazonの書籍紹介文より）

レスポンシブWebデザイン マルチデバイス時代のコンセプトとテクニック (WEB PROFESSIONAL)