それは、

最新トレンドのグラデーションをチェックする事でもなく、
セクシーなjQueryエフェクトを習得する事でもなく、
HTML5やCSS3の斬新な表現で同業者を驚かせる事でもなく、
CMSのありあまる余計な機能を使いこなす事でもない。

誰もいない静かな湖畔で

快適なチェアに腰掛けて

たった100ページの本『シンプリシティの法則』を読むこと

（もちろん、iPhoneは自宅に置いておこう）

◆

このエントリーはプロローグ。また詳しく読み解いていきたい。
Amazon：シンプリシティの法則：John Maeda (原著), 鬼澤 忍 (翻訳)

レイアウトとしては、左に記事カテゴリーリスト、そして記事を等分したブロックにして一覧表示しています。画面遷移の方法としてカテゴリ名をクリックすると上下スライドのモーションを見せながら該当カテゴリに移動します。

沢山の情報をアーカイブするインターフェイスとしてはシンプルさの追求による極めてユーザーに優しいレイアウトです。画面遷移も斬新な印象ですが、ここではきれいにグリッド状にしきられたレイアウトについて考察してみたいと思います。

CMSによるアーカイブページをレイアウトすることの難しさ

こういった「記事詳細ページ」以前のアーカイブページをどのようにするかというのは、ブログではもちろん、ECサイトや企業サイトでもよくある場面です。

決められた原稿での静的ページならデザイナーが決めたレイアウトで問題ないのですが、CMSの場合は文章量は固定されません。つまり、レイアウトは更新担当者の文章量に依存してしまいます。
（CMSで構築したものの、クライアントの自由気ままな更新によってどんどんレイアウトが崩れて行くのはよくある話）

そんな条件下で、ボックスをフロートさせてきれいなグリッド状にするだなんて、できれば避けたいレイアウト。この Article Skimmer ではどのような対処をしているのでしょうか。

でこぼこのブロックをグリッド状に並べるには

Article Skimmer ではブロックの横幅はリキッドで指定ですが、高さが固定されています。
つまりウィンドウ幅を縮めて文字が下に流れた場合、またフォントサイズを大きくした場合、はみ出した記事本文は見えなくなることになります。

「なんだそれだけか」という内容ですが、ここで書きたいのはコーディングテクニックの話ではありません。

『全部の情報をいかにレイアウトするか』ではなく『見やすいレイアウトありきで、情報量をどこまであきらめるか』という、あくまでアーカイブページとしての機能を優先した設計段階の話になると思います。

これまでの考え方だと、文字量が増えればレイアウトが柔軟に変化して表示を保つ、フォントサイズが大きくなればボックスが大きくなり表示を保つ、というものが「よいコーディング」とされていたような気がします。

しかし、記事詳細ページへの案内役としてのアーカイブ機能を考えた時、『とにかくレイアウトを維持して重要性が低い部分は非表示』にした方が、ユーザーにとっては見やすいということを Article Skimmer が明示していると感じます。

例えばApple のカレンダーアプリ iCal の場合、1日に沢山の予定を入れてカレンダーを小さくすると、個別の表示文字がどんどん減って行き最後は1文字だけになるまで省略されますが、存在自体が省略されることはありません。月一覧では個々の内容が犠牲になっても、せめてイベントの存在だけでも伝えるという機能目的が達成されています。

まとめ

ボックスの高さを固定してフロートすればグリッドになる、という事は誰でも知っていることです。
しかし、多くのHTMLコーダーがいままでWEBサイト上でこれをしなかった理由として「文字を大きくすると語尾が消えるんですけど…」というクライアントなりディレクターなりの物言いがあるからだと思います。
そのためハナからこんなレイアウトは避けたり、テーブルにしたり（テーブルは嫌だと言われ無理矢理動的なCSS指定を追加したり）という話になってしまう。

しかし、そもそもフロントエンドコードの問題ではなく、『どのページがどんな役割をするのか、どのページでどこまでの情報が必要なのか』という、サイト設計段階で解決するべき問題だと思います。

クライアントがWEBに対する理解が浅い場合「全部大事な文章なんだからとにかく全部表示させたい！」と主張する場合も多いと思いますが、ユーザーの視線は1つ、またページ遷移も一瞬であることを、よく考えた情報整理が必要です。

関連記事
メディア・パブ: NYTのサイト、ニュースページのシンプルレイアウト版を試す

画像化？ sIFR？ どっちも飽き飽き

http://winnielim.com/

シンガポールのWEBデザイナーさんのサイト。
一見するだけでもセンスのある美しいデザインだと感じるサイトですが、なんとロゴを含む全てのテキストがプレーン（ブラウザフォント）テキストのまま。装飾のための最小限の画像と、CSS の工夫だけでこれだけのデザインを実現しています。

作者はサイト制作にあたり、このようなコメントを記載しています。

WEBサイトをシンプルに、うまく構造化し、かつ使いやすく作る為に、ブラウザフォントのみを利用するWEBタイポグラフィの限界やWEBカラーパレットの限界を押し上げつつも、その厳格な決まりをうまく使いたかった。

このデザイナーの考えの先進性や強い意思を感じます。
もちろんWindowsで閲覧したならばガビガビなのだけど、テキストの画像化や sIFR という考え方を突き進めると、結局はこうなるのでは。これこそがWEBサイトの一番あるべき姿ではないかと思います。2008年一番感動したサイト、WEBデザイナーです。

『WEBサイトらしい』レイアウトって、なんだったのか再考

http://www.alt-style.jp/

山梨県にあるインテリアショップのサイト。
業界的なトレンドに流されず、こういった斬新なレイアウトを思いつき、そして商用サイトとして現実化する、というのは想像するより難しいこと。デザイナはもちろん、運営者側を含めてセンスも意識も高くないとできません。
テクスチャの切り替えとか、1pxのラインを巧みに使った複雑なレイアウトとか、なんといいうのか…WEBのことばっかり考えてるような人たちだけでは、こういうデザインは生まれないような気がして、ガツーンときました。

スクラップブックを読みあさるワクワク感

http://blog.worldending.jp/

センスと高い技術をもち、個人名義で継続的にアウトプットをしているWEBデザイナー小野さんのサイト。
昨年末のリニューアルでの方向性は私にとっては意外なものでした。というのも、以前はオリジナリティのあふれるグラフィカルなものだったため、それが更に進むのかと思っていたからです。グラフィックデザインよりは、エディトリアルデザインといえるそれ。またこの段階で解像度ターゲットをWXGAにしてしまう所。紹介するまでもない有名なサイトだと思いますが、ブレイクスルーを感じるサイトとしては外せない1つです。

Flashにしない、ページをめくる体験

上記3サイトが「退化とは違うシンプル化」だとすれば、このサイトは「画面遷移の快適性の追求」の1つの解。
http://mekas.jp/

海外の視点から日本のファッションシーンをレポートするウェブマガジンのサイト。
シンプルなレイアウトとモノトーンの配色、そして個人的に写真のセンスがツボすぎて大好きなサイトなのですが、スパイス的な要素として雑誌を読み進めるような感覚の表現が斬新です。単にHTMLを遷移しているだけなのに、その瞬間のエフェクトを少し工夫するだけで、こんなにも「雑誌を読み進めてる感」が出せるのか、と関心させられました。長々とページを延ばしていくのも読み疲れるし、平凡なページネーションがついているだけでもなんだか味気ない。次のページを読み込んでみたくなる、そんなサイトです。
（ MEKAS というのは、日本語の「おめかし」という意味での「めかす」だそうです。素敵です。）

まとめ

以上、よくあるトレンドWEBデザイン記事とは違う視点で4つのサイトを紹介しました。ここにあるような「ブレイクスルー」が実際「トレンド」になっていくかどうかは分かりませんし、実用レベルで普及するかどうかも分かりません。

しかしただ既存のトレンドを取り入れているサイトではなく、一歩も二歩も先を考え、まだ理解されにくいだろう事柄をあえて実演していっている姿勢というのは
かっこいいと思います。

• 2008年のWebデザイントレンドおさらい｜HiGash.Net
• 【レポート】Shift2 – 2008年の海外Webデザイントレンドおさらい – ProjectDD Blog

などのエントリーで詳しく解説されていてとても参考になります。

私もこういうトレンドは好きで、沢山のCSSギャラリーをRSSで流れ購読するほどの WEBデザインギークではあるけれど、一方で日本国内の仕事として必要とされるデザインとは全く違うベクトルを持っていると思っています。

海外のトレンドは実際の仕事に反映できるのか

多くのクライアントにとって「こういうグラデがトレンドなんですよ」とか「やっぱツヤツヤ感が気分ですよね！」とか全く意味がなくて、そのクライアントのビジネスに見合う、またそのクライアントの顧客が理解可能な範囲で良いと思えるものを深く読む方がずっと重要な事柄です。

昨今の進化では一番分かりやすい「幅広化」も、そのサイトの想定ユーザの環境によっては 760px であるべきかもしれないし、1000px であるべきかもしれない。そんな部分に「トレンドどうこう」はデザイナーのマスターベーションに過ぎないと思います。
企業の担当者や代理店の人など、何を読んだかこういうトレンドでやたら頭でっかちになってしまって「（鼻息荒く）幅は950pxで！」などと言う人が時々いますが、大抵は広すぎる。

海外のトレンドを注意深く観察するのはよいことだと思うけど、ただ単にトレンドこそ正義と思ってしまうのは大きな間違いだと思います。
よっぽどWEBデザインが注目されるような（WEB系イベントサイトなど？）場合以外、日本国内では意図的に1年〜2年くらい前のトレンドを取り入れる方がクライアントの理解度、満足度は高いのかもしれません。

では本題となる2008年のWEBデザインについて自分なりの考察。

グラフィック合戦は燃え尽きる

2008年のデザイントップ10などを見ても、やはり表現の幅がどんどん広がっています。
しかし、CSSデザインが一気に浸透してギャラリーサイトも急増した2006年、2007年から、驚く程劇的な進化はないようにも感じます。私はこの方向性はもう頭打ちなのではと思っています。

というのも、グランジエフェクトとかウッディとか、周りに植物沢山生やすとか、きらびやかな装飾つけるとか、はっきり言ってキリがない。「手の込んだグラフィックを背景にあててコテコテにする」というのは結局はそのグラフィックパワーそのものであって、言ってしまえば Photoshop 勝負であって、それだったらWEBデザイナーはグラフィックデザイナーにかなわないんでないか。
「あの超絶カッコいい絵が描けるグラフィックデザイナーがちょっとHTML覚えれば、中途半端なWEBデザイナーなんて吹けば飛ぶよね」っていう方向性なんだと思います。

WEBデザインは進化し過ぎたかもしれない（海外では）

例えば、私がこの ROSTRATA.net をデザインし公開した2006年8月、当時それほど多くなかったCSSデザインギャラリーのいくつかが取り上げてくれました。当時新しいっぽいデザインにしていた事に加え、CSSレイアウトだったこと、Flash のような表現を JS で実装していたこと（その後やめた）、ブログエンジン WordPress をベースにしながらスタティックサイト風に構築していたこと、それらが珍しかったからだと思う。
ただそれから2年、それらは平均的なWEBデザイナーであれば当然のようにできることになったし、珍しくもなんともない。

そして更にレベルの高いデザイナー達は「独自に利用する」のではなく「共有する」ことに目を向け、PSD を配布したり、デザインを WordPress テーマとして配布するようになりました。
今では印象的な処理をした PSD を無料でダウンロードできてしまう、WordPress のテーマ適用ボタンを押すだけで美しいWEBデザインのサイトを所有できてしまう。

それがオリジナルのデザインであるのか、配布されたものであるか、実にどうでもよく、調べる価値もないし、クレジットを消したりちょっとした手を加えてしまえばそれがオリジナルにも見えてしまいます。
つまり2008年末現時点において、少なくともリッチグラフィック思考のWEBデザインはグラフィックデザインとしては価値があれど、注目すべきWEBデザインとしてはそれほど価値がないと思います。
（時々、どこかで配布された Awesome! な WordPress テーマをそのまま利用している WEB制作会社を見る事があるけれど、よく見てる人には分かってしまうのが恥ずかしい）

じゃあWEBデザインへの情熱はどこへ向ければいいの

WEBデザインは情報閲覧ツールとしてのインターフェイスデザインとしての進化がコアとなり、退化とは違うシンプル化、スクリプトによる画面遷移の快適性の追求などに向いていくのではないかと思います。（ただ日本では海外ブログのようなグラフィック合戦もまだ始まってない）
冒頭でリンクしたWeb Design Trends For 2009 の中でも、1年2年前に比べて、グラフィック系のトレンドよりもインターフェイス表現に関するものが多くなってきています。

少なくとも、WEBデザインを仕事としている人たちが今目を向けるべきなのは、海外のリッチグラフィックサイトのトレンド追っかけではなく、それが正しいか正しくないかを別とした「ブレイクスルー的な何か」なのではないでしょうか。

次のエントリーで、そんな「ブレイクスルー的な何か」を感じたサイトを紹介したいと思います。
2009年WEBデザイン新潮流（後編）