本当に最近はあっちを見てもこっちを見ても様々なグリッドシステムを名乗るサイトが登場してきました。PSDをダウンロードするタイプのものからCSSを吐き出してくれるものまで。
僕の面倒くさがりも来るところまで来たらしく、気が付けばブックマークの中身にグリッドシステムという名前のフォルダが出来上がる始末。
使ってないものも多いですが、今日はその中からいくつかご紹介できればと思います。
960 Grid System
まずは王道の960Grid System。もはや説明なんぞいらんでしょうと思えるほど、WEB屋の間で当たり前になってきてる気がするGrid Systemですね。僕が初めてGrid Systemという名前を聞いたのもここでした。
僕はPhotoshopもFireworksもどっちも使う派なのですが、テンプレートとしてそろっていることはもちろん、HTML、CSS、Photoshop、Fireworksのプラグインなど、まさに至れり尽くせりな内容でもちろん無料！お買い得ですね！
Variable Grid System
そして、その960 Grid SystemのCSSをベースに作られたのがVariable Grid System。ベースにとは言ってますが、要するに960 Grid SystemのCSSを可変可能につくり直してくれます。自分でグリット間なんかを調整したCSSが欲しい時なんか便利。
Grid
上記までの通常のGrid Systemとはだいぶ意図も仕様も異なりますが、「そんな12カラムとか別れててもしょうがないでしょ！もっとシンプルな奴はないの？！3カラムとかは？？」という人はこちら、均等３カラムとか、１：２のカラムとか。結構ぱっぱと使えそうなGridデータがダウンロードできます。ま、個人的には960 Gridで十分ですが、使えそうなのでご紹介。
The Grid System
「先輩、綺麗っす。」なんて、このサイトを見て思わず嘆いてしまうのは僕だけでしょうか。一度は人に向かって言ってみたいセリフですが。忘れましょう。
さて、コンテンツの内容としては960 Gridよりも充実していると思っているこのThe Grid System。主にデザイン面でのテンプレートデータが充実していますね。中でもThe Golden Grid TemplateのPSDデータは一度覗いておくことをオススメします。それ以外にも色々なグリッドに沿ったテンプレートデータがダウンロードできて、一日潰せますよ。
978 Grid System
「960？え？何言ってんの？978でしょ？ちゃんと測りなさいよ！（A型）」な会話があったのかなかったのかは知りませんが、960が流行った後に知ったGrid System。またびみょうな数字ですが、「世界中にあるPCやタブレットPC等はこのサイズで作られるのがもっとも適したGrid」的なことをおっしゃっていますが、なるほど納得、今度使ってみましょうかね。
520 Grid System
「おいおい、次は520？いったい何のサイズだよカマンベール？」と思う人も多いと思いますが、これはFacebook Pageのサイズなんですね。
最近は日本でもFacebookの波が来るとか来ないとか去ったとか言われていますが、この520pxのグリッドを意識してGridデザインしようぜというのがこの520 Grid Systemの言わんとすることです。
1140 CSS GRID
「1024なんか捨てちまえ！」的なことをおっしゃっていらっしゃいますが、1280pxのために1140pxでデザインしようぜという意図のGrid System。いづれ近い将来お世話になるかもしれません。
NEW!!!
Griddle.it
これ便利かも、何かをダウンロードするとかじゃなくて、URLから画像生成するタイプの物ですね。
[html]http://griddle.it/レイアウト幅-カラム数-カラムの感覚[/html]
という具合でURLを生成すると、その要望通りのグリッドレイアウトを生成してくれるという優れ物。
試しに下記をクリックしてみてください。960px幅で、12カラム、20px間隔でのグリッドを生成してくれるはずです。
これを更にbodyの背景画像などに設定すると更にわかりやすいですね。意外とグリッドに合わせたデザインって、マークアップの段階でずれること多いですし便利便利かと。
Website layout made easy | Griddle.it
いかがでしたでしょうか？
この他にも、「え？こんなサイズ意味あんの？」という面白大発見なサイズのGrid推奨のサイトもあるのですが、まぁ、使うことはないだろうというものは省かせていただきました。
まぁ、あくまでもGrid Systemっていうのはデザイン技法のひとつですから、それにとらわれすぎるのもどうかと思いますが、WEBサイトの基本がGridデザインである以上は、こういったテンプレートやツールと使いこなして効率化につなげたいですね。
関連する記事
レスポンシブやらアイコンフォントやらフラットやら！2013年の気になる技術やデザインを試してみたリニューアル手順！
パララックスサイトを作る時必要だったリソースと使い方のご紹介！制限時間12時間で調べあげた情報色々！
CSS3でここまで出来るの？！真似してみたいと思える物からそうじゃない物まで様々なCSS3チュートリアル達！
フリービー(Freebie)コンテンツの紹介とまとめ！WEB屋がフリービーコンテンツから学べること色々！
『かっこいいサイトが見たい！』って時、知ってれば有意義な時間を過ごせそうなサイト色々全部紹介！
約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々
怒涛のサイトナビゲーション総まとめ！事例、チュートリアル、参考サイト、僕の知る何もかもを紹介！
WEBデザインのトレンドを追い、考え、共有する意識！僕のWEBデザイントレンドと参考サイト色々がっつり！
