Web開発技術は伝統工芸にはならない。これだけ環境が変する中では最適な制作ワークフローも常に変化する。特に近年のモバイルデバイスの爆発的普及や、モダンブラウザの普及は、開発環境にあらゆる変化をもたらしている。

開発プロセスの変化

例えば私が行う実作業の中では、Photoshopを持ち出すようなビジュアルデザイニングはかなり小さく身を潜めているように思う。それはもちろんデザイナーにとって最も重要な1つであるが、プロジェクト全体においてはあくまで「最終的な」仕上げに過ぎない。ビジュアルデザインに到達するまでのラフスケッチ、ワイヤーフレームの作成が制作業務において、時間的にも重要度的にも大きな割合を占めるようになった。

つまり、全体像をスピーディーに設計し、その価値判断のタイミングを早期にもっていく。デザイナーやプログラマーという専門家が参加する前に多くのことを見極めることができれば、プロジェクトはより身軽になる。より多くのアイディアを具体的に試すことが出来るし、専門家ではないより広い範囲のブレインと共有し、なるべく早い段階で物事を判断できるようになる。

デザイナーがPhotoshopで絵を描き始めてしまったら、プログラマーがコードを書き始めてしまったら、引き返すのは非常に厄介なのだ。（不可能なのではない、「非常に厄介」なのだ。）

Travis Isaacs’s “How to Wireframe Like a Ninja”

今年の5月 the Big Design 2010 conference にて、UXデザイナーである Travis Isaacs 氏が行ったプレゼンテーションを紹介したい。
“Keynote Kung-Fu: How to Wireframe Like a Ninja” と題されたこのプレゼンテーションは、アップルキーノートを使った魅力的で効果的なワイヤーフレームやサイトモックアップの作り方について解説している。

彼はキーノートのオリジナルツールキットを作成し、KeynoteKungfu.comにて販売している。このサイトについては最後に詳しく。

高精度なプロトタイピングの重要性

個人的にこのプロセスにはかなり共感できた。
つまり各工程をどの媒体でどこまで突き詰めるかは、各工程が持つフリクションを考慮したプロジェクト全体におけるリスクの最小化が重要なのである。
そして精巧なビジュアルと、機能を深く表現した High-Fidelity Prototyping（高精度なプロトタイピング）がいかに重要かを教えてくれる。

スライドの多くはキーノートの素晴らしさについてだが、彼が言わんとするのはみんなが既に知っている「キーノートの便利さ」というよりは、「キーノートはWebサイトのモックアップ作成にとても便利」ということだろう。

具体的なデザインと開発プロセスについて

デザインと開発プロセスについての彼のインタビュー。

Isaacs「フロントエンドデザイナーとしてスケッチから始める。ただしかなり精巧なレベルで。ページのスケッチが完成したらそのままキーノートに移す。
インタラクションやインターフェイスの詳細を表現するのにキーノートを使うが、その後の行程が、一般的なフロントエンド開発者と少し違う。彼はそのままコーディングに進むのだ。コードに沿って（またはコードにならって）ビジュアルデザインをすることに意味がある。
コーディングには TextMate を使う。TextMate は全ての言語の構文バンドルを持ち酔いしれるようなキーボードショートカットがある。
フロントエンド言語にはHTML, CSS,そして jQuery。jQueryは唯一の必要なJSライブラリだ。また、960.gs grid system や the new HTML5 Boilerplate 、 the LESS CSS framework などをよく使う。」

キーノートツールキット KeynoteKungfu

彼が作成したキーノートツールキット KeynoteKungfu.com には、ナビゲーション、テーブル、画像やバナー、フォームエレメント、インジケータやソーシャル系ボタン、またタッチスクリーン用のインタラクション表現などのWebに必要なあらゆるエレメントがマスタースライドとして用意されている。

これらのエレメントの作り込み（例えばグラデーションだとかそういうこと）に時間をかける必要はない。彼が代表して作ってくれたのでそれを使わない手はない。12ドルの価値が十分にある。

私が特にいいと思うのは、960.gsのテンプレートを用いる概念だ。今まではワイヤーフレームの段階できっちりとしたレイアウト比率まで確定させたことがなかったが、Photoshopで使うのと同じグリッドガイドを下敷きにすることで、より高精度なワイヤーフレームが出来上がる。960pxかどうかは別として、これはいいアイディアだと思う。

iPhone用とiPad用のツールキットに関しては無料配布されているからぜひ試してみて欲しい。
KeynoteKungfu.com

まとめ

もちろんペーパープロトタイピングに重点を置くことは、今に始まったことではない。
大規模プロジェクトであればあるほど、ペーパープロトタイピングの資料は充実している。しかし、ワイヤーフレーム自体の作り方は実に多様であると感じる。

私自身いろいろなプロジェクトに参加して思うのは、それらの資料はどの程度深く考えられているかに関わらず、実際の描画においては「かなり適当に」作られるように感じる。ワイヤーフレームだからワイヤー（線）だけで表現すればある程度は分かるが、このシンプルな描画作業の品質（例えば丸みであったり、グラデーションであったり）が高まれば物事はよりスムーズに進むように思う。共有したときのリアリティが全く違ってくる。

ボタンがボタンっぽいかどうかなんてワイヤーフレームの段階において取るに足らないことのように思える。もちろん「クオリティの高いワイヤーフレームを作る」ということに情熱を燃やしてしまい、手段が目的化してしまってはいけない。

ただこのような先人の知恵や便利なもの（例えばたった$12のツールキット）はぜひ取り入れたい。

ビジュアルデザインとインタラクションデザイン、インフォアーキテクトとデザイナーやプログラマーのもっとも重要な架け橋がここにある。

あとがき
ご無沙汰しています。この記事は http://mashable.com/2010/11/12/travis-isaacs-web-design/ を参照し、一部引用と私的な感想を混ぜて書いたものです。

無限のスペースは実在するのか

WEBブラウザがスクロール機能を持っていることで、WEBサイトを作る人はそこに無限のスペースがあると考えるようになる。

せっかくWEBサイトを作るのだから、あれもこれも載せたい。あれもこれも載せるんだから、そっちもこっちも載せよう。採用するCMSではこんな機能もあんな機能もある。どれもこれもすごい感じ、あるとかっこいい感じ。

しかし、本当に無限のスペースがあるのだろうか。言いたいことばかり書き散らかされた広大なスペースに、忙しいユーザーはいちいち付き合ってくれるのだろうか。

ユーザーは基本的に急いでいる

人は実に様々な理由でインターネットを使うが、ほとんどの場合に共通するのは「何かを探している」ということ。

何か知りたいことがあって検索する。表示されたサイトの中から良さそうなものを選び、そのサイトの中で知りたい事の場所を探す。彼らにとってはWEBページが表示される1秒2秒の読み込み時間でさえもどかしい。とにかく、できるだけ速く知りたいと思っている。

（もちろん暇を持て余してただ当てもなくネットサーフィンする人もいるだろう。でもおそらくあなたのビジネスにとって彼らは重要ではない。）

目に見える要素が増えれば増えるほどユーザーの視線は迷い、気は散らされ、1つの要素への注意は薄れ、選ぶべきものを選ぶことが難しくなる。
受け手が選ぶべきものを選べない理由は、語り手が本当に伝えたいことを選べていないからに他ならない。

ユーザーに最も喜ばれることは、探している情報を他のどのWEBサイトよりも明確に伝えること。1つの情報に1つのWEBページを与え、そのページの中ではそれだけを伝える。1つ上の階層のページでは、格納されている情報を明示して選んでもらうことだけを考える。

種類の異なる全く別の情報へのリンクリストや、様々な検索機能や、自分のビジネスと無関係で大した収入もない広告は、思い切って消し去ろう。
全て消し去ることが難しいなら、本当に必要かどうかを改めて考え、リンク1つでも消し去ろう。1つでも。

それによって、本当に伝えたかったメインの情報が浮き出てくる。スペースの大きさや色使いの問題ではなく、相対的な情報量の問題である。

機能は少ないほどいい

CMSベースのWEBサイトが主流になってから得に問題なのは、あらゆる設計が見本として用意されたテンプレートに左右されてしまうことだ。
CMSの多機能化は評価基準の1つであることは間違いない。優秀なCMSほど拡張性を兼ね備えている。しかし、ブログシステムに代表される汎用性のあるCMSは「あったら便利そうな機能」として提案しているに過ぎない。

それを採用するかどうかはその都度決めよう。全てのページにタグクラウドが本当に必要かどうか、その都度考えよう。

情報設計は作業の１行程なのか

インフォメーションアーキテクトという言葉が再定義され脚光を浴びている中、とあるセミナーで、ある情報デザイナーがこんな事を言っていた。

「インフォメーションアーキテクトなんて職種は存在しない」

インフォメーションアーキテクトという役職、肩書きを見るたびに同じことを思っている。それはプロジェクトを通して全員の気配りを以てして初めて成功する概念であると。分業体制の中の１行程ではないと。

ディレクターがデザイナーに画面構成書・原稿を渡す。
「シンプルで分かりやすいサイトでお願い」
しかしそれらの書類がシンプルでなければ、デザイナーがいくら見栄え上のシンプルさを実現したとしても、出来上がるサイトは本質的にシンプルにはならない。

もっと前の段階に戻ってみる。

クライアントがディレクターに原稿を渡す。ディレクターが、インフォメーションアーキテクトと呼ばれる人が、いくらがんばってシンプルに情報設計をしようとしても、クライアントの事業がシンプルでなければ本質的にシンプルにはならない。

つまり、制作を担当する各プロフェッショナルが出来る事は多くあるが、最終的な出来栄えは関わる人全ての意識によって大きく振れるということだ。

日産、アウディのカーデザイナーを経て独立した和田智氏が著書『未来のつくりかた』にてこのように書いていた。

部屋の美しさはその国の文化レベルを示す
その街に住む人の部屋の美しさは、その街の美しさと比例します。
部屋は国の文化的なレベルを示すものであり、美意識の度合いを表すものとも言えるのです。
引用：未来のつくりかた アウディで学んだこと 和田 智 (著)amazon

自宅の部屋や職場のデスクを常に綺麗に保つ能力は、その人の性格の現れであり1つの才能であると思う。形を持たない情報を整理することは、普段の生活をよりよくするためには必要な作業なのだ。

これは学んで習得できるものではなく、向き不向きのある難しい作業だと言えるだろう。

極端に言うならば、本当に整理された情報設計を実現するためには、プロジェクトに登場するクライアント、ディレクター、デザイナーの職場のデスクが綺麗に整理されている必要があるかもしれない。

まとめ

実際の制作現場から目を逸らさなければ、これらが理想論であることは否めない。
紙媒体のチラシよろしく、スペースさえあれば情報を詰め込みたくなる気持ちはどうしても先行してしまうし、かといって予算があり、タイトなスケジュールで動くプロジェクトを進める中でクライアントと「シンプルとは何か」を論じている暇など無い。

しかしながら、Webサイトの構築作業が、クライアントが自分たちのビジネスを整理し、構造的に可視化する初めての体験になるということは少なくない。

このような場合では、サイトを構築することを通して成果物以外にいろいろな発見、ヒントを見つけるための頭の超整理体験を提供することができるかもしれない。情報を可視化するウェブサイトの完成度はクライアント社内での意思統一においても非常に重要な資料となる。そういうものを作ることができれば、エンドユーザーにとっても有意義なものになるだろう。

インフォメーションアーキテクトという役割があるとすれば、それは制作現場でのサイトに対しての働きかけではなく、クライアントとの対話の場で人間に対して働きかけるものであるべきだろう。

あとがき

久しぶりのブログが、いまいち要領を得ない長文になってしまった。しかも少し偉そうだ。その辺りは、この猛暑による思考能力の低下ということで大目に見ていただきたい。

Photo Creits:

• Ryoanji Temple- Kyoto By Flavio@Flickr
• Road to… By Absolutely Simple
• Ryoanji Temple in Kyoto By mrhayata
• Tea Room/茶室 By Yuki Yaginuma

それは、

最新トレンドのグラデーションをチェックする事でもなく、
セクシーな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つのサイトを紹介しました。ここにあるような「ブレイクスルー」が実際「トレンド」になっていくかどうかは分かりませんし、実用レベルで普及するかどうかも分かりません。

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