[画像のクリックで拡大表示]
[画像のクリックで拡大表示]
[画像のクリックで拡大表示]
[画像のクリックで拡大表示]
[画像のクリックで拡大表示]

 前回、Webサイト誕生の経緯には共有したい生の情報がまずあり、次にそれを発行するための仕組みと体裁ができあがってやっと普及にこぎ着けたというお話をした。そう説明するとサイトは雑誌や新聞といった紙のメディアと目的は同じと言えるけれど、物理的に定着した形を持たないという意味でサイトは印刷物とは決定的に様子が違う。

 つまり読みかたの決定権はユーザーの側にあるというわけ。本のように「綴り」という概念がないのだ。だからといって、書式だけを与えた情報を頭からずらりとならべるわけにはいかない。そんなことをしたら、ユーザーは欲しい情報のありかさえ、分からなくなってしまうだろう。ある程度ユーザー側の行動を予測し、設計しておく必要があるのだ。

情報の導線=構造を作れ!

 ユーザーの行為を想定して情報の配置を決める工程は、導線設計と呼ばれている。掲載する情報の多いサイトほど、この工程には時間がかかる。例えば会員制で情報を提供するサイトの場合、初めてアクセスしたユーザーはそのことを知らせて登録する手順を踏むはずだ。しかし、登録を見送るユーザーもいるかもしれない。この流れを予測して、登録してもらいやすいサイトに仕上げる下準備が導線設計である(図1[拡大表示])。

 導線設計は視覚言語のようなチャート図を使って作られる。例の場合、会員登録してもらう事をサイトの第一目標に掲げている都合上、できるだけ登録の機会を増やす基本指針に沿って導線を作っている。この概念こそが、文書に与える書式の次に必要な、サイトの基本構造になる。よくWebサイトの設計は建築物に例えられるが、空間を移動するのは利用者の意思だとしても、その行動を予想して混乱をきたさない仕組みを考えるのは設計側の責任だという点でとてもよく似ている。

Webデザインの定義って?

 情報の編纂、そして構造の設計と、だんだんサイトデザインの全貌が明らかになってきた。しかしだれが、どんな役割を負って作り上げるものなのかはまだはっきりしない気がする。ここで今一度Webサイトの要素を確認してみよう(図2[拡大表示])。「言葉・語」は情報のこと。これらは図版を含めてコンテンツと括られているものだ。情報を説明する切り口や、取り上げる内容を考えるタームである。雑誌における編集作業にも等しい。「スタイル」は情報の見栄えを指す。編集済みの情報を見やすく、時には楽しく親しみやすく整える作業にあたる。「コード」はコンテンツとスタイルをWebに反映させる時必要な手続きを意味する。そしてこの3つの要素(作業)が順次進行してWebデザインになる。

 一般に「言葉・語」は情報アーキテクトと呼ばれる専門家が、「コード」はエンジニアなどの開発者が、スタイルはグラフィックデザイナーなどクリエーティブに関わるスタッフが担当することになっている。もう少し突っ込んだ役割を説明すると、情報アーキテクトはWebサイトとして構成する生の情報を集めて、分かりやすく情報を構成する仕事になる。情報はタイトルや見出し、本文など簡単な書式を備えた状態で練り上げられていく。導線設計には関わらず、トピックをグループ化したり、1ページに収める内容を調整したりすることに専念するアーキテクトもいる。

 情報の効果的な関連づけには内容と内容のつながり(ノード)を確認しやすいマインドマップというツールや、文書構成を簡単に作れるアウトライン作成ツールを駆使する。エンジニアはHTMLやスクリプト言語を操ってサイトの表示や動きをコントロールする係で、サーバーなどのシステムに関する知識も豊富な人材だ。案件ごとに適した使用技術を選び、実装するところまでを手がける。

 グラフィックデザイナーは造形に対する知識を持つスタッフだ。見出しとして成立する文字の大きさ、美しく読みやすい本文の体裁を設計してスタイルを作る。配色に関する専門知識も持っていて、使い勝手を阻害しない適切な色使いや、閲覧環境で変わる色の特性を知っている。また、サイトの内容に適した表現を選び、実際にグラフィックを作る事もできる。

専任か、兼任か

 規模の大きなサイトではこの3つの要素を分業して進めるのが一般的だ。特にEコマースサイトのようにユーザーからの要求も、必要な技術も高度なサイトでは徹底した分業体制が敷かれる。一方で情報発信だけが主目的の静的なサイトではいくつかの役目を1スタッフが兼任する形でも問題ない。ただし「言葉・語」と「スタイル」はどのレベルの仕事でも兼任しないほうがいい。どちらも客観的な価値判断を要する作業になるため、兼任するとどちらかに都合の良い状態になってしまうからだ。兼任するなら、「コード」を中心にコードに強いグラフィックデザイナー、情報アーキテクトに強いエンジニア、といった具合で左右をまたぐ形が理想的である。もちろん、すべての要素に関心を持ち幅広くリテラシーを養うのが大切なのは言うまでもない(図3[拡大表示]、[拡大表示]、[拡大表示])。