+RECOMMEND
+RECOMMEND
+Ad
+OTHERS

無料ブログ作成サービス JUGEM

paperboy&co.
RSS 1.0
ATOM  0.3
<< March 2019 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
<< iPadのクリエイティブなApps 20 | main | ストリーミング時代にはいったなあと思った TwitterとUstreamの考察 >>
Webのグリッドデザイン 支援ツールあれこれ



Webデザインをするときレイアウトの基準となるグリッドを決めますが、いちいち計算していると時間がかかってしまいます。そこで、支援ツールをいくつか紹介したいと思います。

Grid Designer

http://grid.mindplay.dk/



カラム数とマージンの幅を計算してくれるサイト。
使い方も簡単で、カラム数(Columns)を指定し、サイト幅(Pixels)、サイトの両端のマージン
(Gutters)、最後にカラムのマージン(Margins)を指定し「Design」ボタンを押すだけです。
入力された数値から最適なカラム幅やマージンを計算してくれます。
また、下部にはカラムをまとめて使った場合の幅も表示されるので、非常に便利です。



960GRID SYSTEM

http://960.gs/


こちらは960pxでデザインされたWebデザインのグリッドテンプレートを配布しています。
データ形式も豊富でたいていの制作環境で使えるので便利です。
実際にCSSに落とし込んだサンプルサイトも見ることができるので、実用性も高く、ほかのサイトの絡む分析もあり、制作時にかなりの参考になりそうです。



Variable Grid System

http://www.spry-soft.com/grids/


CSSグリッドジェネレーター。
カラム数とマージン、サイト幅の指定でCSSデータを制作しダウンロードできます。



960LAYOUT SYSTEM

http://960ls.atomidata.com/


先に紹介した960GRID SYSTEMが提供しているサービス。
カラム数とマージンの計算のほかに、ヘッダー、フッター、コンテンツ部分それぞれで絡むわけしていくことができます。

このように指定できるカラムは、タグ要素と分割数、クラス、IDの指定などかなり細かく設定することができます。出来上がったデータはZip形式でダウン ロードできます。





GRIDMAKER

http://www.grafikk.co.uk/gridmaker/#/12,60,500,10,16761021,true,10,10,16732743/


ほかのサイトと同じように、カラム数やマージン幅を計算してくれます。
大きく異なるのはベースラインの幅も指定でき、細かい文字組みにも対応できるということです。
また、png形式で保存できるので、そのままテンプレートとして使用することもできます。
どうやら、PhotoshopCS4用のプラグインとしても配布しているようです。残念ながらCS4で確認できる環境がないのでこの部分の検証はできませんでした。




調べていくとほかにもいろいろとあるようですが、管理人が普段使っているものや、これは便利だと思ったものを紹介しました。
日本語サイトにこういったグリッドシステムを適用することは、日本語という言語の特性上なかなか難しい部分もあるとおもいます。このようなツールを使うと導入が楽になるのでチャレンジしてみてはいかがでしょうか。
| グラフィックデザイン | 21:36 | comments(0) | trackbacks(0) | - | - |はてなブックマーク - Webのグリッドデザイン 支援ツールあれこれ | このエントリーをはてなブックマークに追加









http://blog.tug.lomo.jp/trackback/990147