Fluid Column Layout

30 10月
2009

最近のトレンドでブラウザ幅に合わせたサイト幅決定のサイトが増えていると思うのですが。

例えば
名古屋デザインウィーク
名古屋デザインウィーク 画面キャプチャ
とか

ISOLATION UNITとか
ISOLATION UNIT 画面キャプチャ
とか

丸の内.com
丸の内.com 画面キャプチャ
とか

KAYACさんのサイトのどこかでも見かけたような気がしたけど見つからない。

海外だとこの辺?
CreativeDepart.com
CreativeDepart 画面キャプチャ
一番最初に見かけたのはこれとは別の海外のブログサイトだったのだけど今見つからない。

リキッド一番ビビったのがこれ。
Wilkommen bei EMPREIS

Wilkommen bei EMPRIS 画面キャプチャ1

中はこんな感じ
Wilkommen bei EMPRIS 画面キャプチャ2

Width1680まで、イメージも合わせて伸びる。しかも画像のレンダリングも綺麗。どの幅で見てもバランスがいい。

リキッドレイアウトの持つ「閲覧の主権はユーザーにある」という考えはとてもインターネット的で、この流れは個人的に興味深い。いわゆる平面デザインとして紙メディアが代表的だけれども、紙の表現の主権はデザイナーにある。キャンバスの大きさが決まっていて、その制約の中で美を追求する。対してWebにはキャンバスはあれど、大きさは一定ではない。ユーザーが全ての環境を決める。どのようなフォントサイズで見るか、どのような画面幅で見るか、決めるのはユーザー。形が利用者に沿うこと。それはデザインの本質だと思う。

iMacが27inchなんて化け物マシンに進化したこともあり、今は等幅カラムで切ったコンテンツを配置し直してるけど、Wilkommenのように閲覧環境に依存しない美しいWebサイトが増えてくるのだろうね。

JQueryのソースが落ちてたのでそれもリンクを
可変グリッドレイアウトのjQueryプラグイン書いたよ
Smart Columns w/ CSS & jQuery

近いうちどこかで使ってみたい。

Comment Form

top

This site is protected with Urban Giraffe's plugin 'HTML Purified' and Edward Z. Yang's Powered by HTML Purifier. 61 items have been purified.

Archit -Train Of Thought is Digg proof thanks to caching by WP Super Cache!