Home > WEBデザイン > 手っ取り早くWebページを作るなら、やっぱりグリッドシステムについては知っといた方がいいと思う。

手っ取り早くWebページを作るなら、やっぱりグリッドシステムについては知っといた方がいいと思う。

えーっと、もともとHTMLって文章を修飾するために出来た側面があります(つまり、レイアウトすることを意識していない)ので、Flashでページを作ることを考えると、制限が多いってのは宿命といえば宿命なんですよね。
でも、フレームでメニューとコンテンツを切り分けたり、tableタグを駆使したりして、一生懸命レイアウトすることを突き詰めていって、今はCSSである程度柔軟にレイアウトをすることができるようになりました。

でも、どれだけ柔軟性が増したとしても、恐らくFlashのように自由にはなりはしないでしょうし、客観的に見ると「似たようなページ」に見えてしまうかもしれませんね。

ちょっと昔の話ですが、css ZenGardenという試みがありまして、「同じ文章をCSSでどこまで素晴らしくできるか?」というお題目の上で、みんなが競って素晴らしいWebページを作りました。
この試みは、ある意味Blogサービスのテンプレートを作るのに似ているかも知れませんが、実際に自分でWebページを作る際には、このような試みだけでは、ちょっと進めていくのが難しいところがあるかも知れません。

というのも、何も手がかりのない状態で、多種多様の情報やインターフェースを納めるのは、なかなか手間が掛かり、なおかつ使い易いものとなると、なかなか難しいでしょう。
それを行う為の手がかりの一つになるのがグリッドシステムと言われる、架空のマス目に要素を当てはめていく手法なのです。
詳細な説明はおなじみのコリスさんの、以下の記事をご覧いただくと、何となくつかめるとのではないかと思います。
グリッドシステム -サイトへの有効活用方法
基本的に書籍にしても新聞にしても、雑誌にしてもWebサイトにしても、文字と図版の組み合わせによる情報伝達という目的から逸脱することはアリませんので、グリッドシステムを意識することはとても有用だと思われます。

ただ、一口にグリッドシステムといっても、何をどうすればいいのかが、わかりにくいというのもまた事実です。
特にWebページというのは、既に述べたようにレイアウトに制限が多いメディアですから、グリッドシステムを実現するにしても、自由度は決して高くありません。
それを手軽に利用できるものとして、960GridSystemがあります。
これは、960pxという横幅に対して、12行(60px)・16行(40px)・24行(20px)のカラムを設定し、その行に沿ってレイアウトが出来るもので、個々の要素は左右に10pxのマージンを有しているため、要素同士がくっついて見づらくなるようなことがありません。
この手法を利用することで、比較的複雑なレイアウトをスムーズに行うことが出来ます。
ただ、この話だけでイメージがわきにくいかも知れません。
そこで、DesignDevelopの以下の記事で紹介されているチュートリアルを参考にするといいでしょう。
photoshop×960 Grid SystemでWEBデザイン「How to create an elegant web layout in Photoshop」
紹介されているサイトはPhotoshopのチュートリアルなのですが、これを眺めるだけでも、960GridSystemというものの雰囲気がつかめると思います。


Trackback:No Trackbacks

TrackBack URL for this entry
http://bowworks.biz/action.php?action=plugin&name=TrackBack&tb_id=21
Listed below are links to weblogs that reference
手っ取り早くWebページを作るなら、やっぱりグリッドシステムについては知っといた方がいいと思う。 from BowWorks
トラックバック
このエントリにトラックバックはありません
このトラックバックURLを使ってこの記事にトラックバックを送ることができます。 もしあなたのブログがトラックバック送信に対応していない場合にはこちらのフォームからトラックバックを送信することができます。.

Home > WEBデザイン > 手っ取り早くWebページを作るなら、やっぱりグリッドシステムについては知っといた方がいいと思う。

Feeds
Hatena Diary
Twitter
Tumblr

Page Top