Takazudo Clipping*

なんとなくうだうだ情報設計みたいな話

インフォメーションアーキテクチャについての細かい説明は、勉強中なのでこのエントリ内では詳しく書きませんが、サイト制作には、大まかに、次のようなフローがある。一応ここでは、サーバーサイド技術を含まない、コーポレートサイトみたいなものだと仮定して。

とりあえず、うちの会社では、この図のデザイナーより上の行程を行う人は、明確に分かれていなくて、すべてまとめてディレクターと呼んでる。実際には、このひとはこういうことできるとか、暗黙のうちにあるんだけれども、設計者って呼ばない。ディレクターって呼ぶ。そんなこんなで、オレは設計をしている！って意識しているディレクターって、結構少ないんじゃないかなーと思った。

でも、この「構造設計」っていうのって、いっちばん重要な所だと思う。専門で設計者（Information Architecturist?）って役職を作った方がいいんじゃないかと思うぐらい。だって、設計ができるのって、ナビゲーションの知識もいるし、デザイナーに作ってもらうパーツの種類や並べ方を決定しないといけないし、サイト全体の構造からユーザーの導線まで全部考えて作らないといけないですもん。ページの中身の構造と、サイト全体の構造を両方考える。ユーザーがそのサイトで目的を達成するってことと、クライアントがなし得たいビジネス上の目標を達成するということ。この2つを両立させることができるのは、何よりもこの工程。

デザインは、まず「情報デザイン」と、「ビジュアルコンセプト」に分かれていると最近感じていて、「情報デザイン」は、ページ内のパーツ設計をどうするか。大見出し中見出し小見出し段落番号リスト順不同リストお問い合わせコラム…がどのように配置されるか、ページ内の要素のプライオリティを考慮し、どのようなパーツを用意すべきかということ。そして、設計者が考えるナビゲーションをどのように実現するかUIを考案する。そのナビゲーションに最適なページ内の領域分けを定義する。（うちの社内だと、ディレクターとデザイナーが半々でページ内の情報デザインの資料である、ワイヤーフレームレイアウトを組んでいる感じかなぁ）

「ビジュアルコンセプト」は、サイトのユーザーを見据えて、どのようなトーン＆マナーでグラフィックをするかを決める。この2つが組み合わさり、「ビジュアルコンセプト」が「情報デザイン」に適用されることで、最終的な「ビジュアルデザイン」が完成すると思う。

コーディングを専門でやるなら、HTMLの仕様を決められて、その仕様に沿った後方互換性を確保した上で先方互換性のあるコードを書く。パーツの余白ルールを守れる。考えられる。動きのあるUIを実現できる。基本的なJavascriptの機能をサクッと作れる。システムに最適化できる、構造を意識したHTMLを書けるなどが必要なスキルか？

実際の構造（特にページの中身）の整理は、設計者→デザイナー→コーダーと下っていくうちにブラッシュアップされていって、完成されるっていうパターンが多いかも。サイトの規模にもよったりしますけど、うーんやっぱこーいうパーツいるよねとか出てくるし、最初っからそれが見れてればいいんだけれどなかなかムズカシイ。要素が増えたりやっぱこれ変かもってのが出てくる。

とりあえずこの三者が、かなりの水準で仕事をこなすことで、標準的なコーポレートサイトができるとしましょう。

Next Step

上で挙げた三者は、その次のステップとして、他の分野に手を伸ばすことで、標準的な水準を超えたWebサイトが生みだすことができるようになると思う。（※ほかの分野っていうか、設計とデザインの中間の部分は、完全にかみ合ってて、明確な線引きはなかなか難しいと思うんだけれども）

設計者は、UIを学ぶことで、より幅の広いナビゲーションを設計できる。今、jQueryやmootools、prototype.jsなどのおかげで、今までFlashでしかできなかったようなことが、かなり楽に実装できるようになってきた。こういったものは、物珍しくてカッコイーと思ってしまっていた。自分は。でもほんとは、カッコイーじゃなくて、アコーディオンのメニューなら、狭いスペースでより多くのナビゲーションを実現できるからスゴイんですよねこれって。ドロップダウンメニューもしかり。

ちょっと話がそれますが、jQueryベースのライブラリで、interface elementsというものがありまして、このネーミングって最高だなって思った。インターフェイスの要素なんですよね。Amazing Effectsとかじゃなくて。

設計者はほかに、設計している段階で、ユーザーの導線を考えていたら、別のユーザー像も見えてくるかもしれない。そしたら前の段階のコンテンツプランにフィードバックできる。

デザイナーは、情報デザインという観点で突き詰めていけば、構造の設計にかかわっていけるし、上で挙げたUIも設計者に提案できるし、Flashができれば、情報設計の面でもビジュアル的な表現の面でも、もっと幅が広がる。

多くのコンテンツをもったフルFlashのサイトを作るには情報設計ができてUIの知識があるFlasherがいないとできないと思う。ただ、それができれば、構造設計の段階からHTMLじゃありえないサイトにすることだって可能。それがデザイナーなのか、設計者なのか、コーダーなのかはもはや関係なし。

コーダーは、デザインを覚えればCSS Zen Garden的な、構造的にシンプルでだけれど、グラフィック要素満載で素晴らしいサイトが作れるし、なによりコーダーは、HTML触っていて、直接ページ内の構造に関わっているから、設計者になるのも一つの選択肢。といかかなり親和性があり、自然にできそう。もしくはシステムと関わってCMS的な設計もできるかもしれないし。

javascriptが得意なら、Ajaxで動的なサイトも作れるし、サーバーサイドの技術を組み合わせて色々できるプログラマにもなれる。Web標準やSEOにくわしければ、そういう提案をコンテンツプランに含めることもできる。

自分は、サイトを作るのは、みんなで一つのピザを作っているようなものだと思う。こいつはピザのパン部分を用意してくる。あなたはチーズを用意してきて自分は具を考える。最高のチーズを用意してきた人がいたら、それにあう最高のパンと具を選んでカバーしてあげることができたら超うまいピザができる。

逆にいえば、そういったことも考慮してピザを作れなければ、高品質なピザは絶対作れないじゃないかなということを考えたり。

参考

The Elements of User Experience: User-Centered Design for the Web (Voices (New Riders))という本が、かなり有名な本らしいです。以下にサンプルのPDFがあるので、興味があれば是非読んでみてください。英語ですが、辞書使いながらでも読む価値は十分にあります。印刷して線引きまくってしまった。

• The Elements of User Experienceの一部（PDF）

Amazonはこっち。気合いで英語版かってしまったので来たら頑張って読む。

• Amazon - The Elements of User Experience: User-Centered Design for the Web (Voices (New Riders))

日本語訳も出てます。

• Amazon - ウェブ戦略としての「ユーザーエクスペリエンス」―5つの段階で考えるユーザー中心デザイン (Web designing books) (単行本)

参考になる資料が以下に色々

• Tools - Information Architecture Institute
• 情報アーキテクチャアソシエーションジャパン - IAAJ: Information Architecture Association Japan » IA Tool/Resource