ユーザーインターフェイスを工夫するために、設計を理解する

2008.9.28 SUN

CSSとAjaxで何ができるのかを知れば、
適切な提案ができる

ターゲットユーザーの設定同様、持ち合わせなければならない視点に、サイト設計やページ制作技術の知識がある。特にページ制作技術に関しては、年々実現可能なテクニックも増える傾向にある。

基本的なことではあるが、CSSによるスタイルの実装は使いやすいページづくりに欠かせない要素となった。前述のNewYork Magazineの例を見てもわかるが、カテゴリごとに大枠のレイアウトを変更していても、ボックスごとのidやテキストスタイルに与えたclassはWebサイト内で統一している。この下地づくりがページデザインに統一感を与え、ユーザーを混乱させないために重要な役割を担っている。また、スタイルを計画的に切り分けていないWebサイトは保守や管理がしにくいので、長期的にデザインの統一感が保てない可能性も出てくる。こうしたリスクを取り去らないと、表面的な工夫も長持ちしないのだ。

Ajaxを採用したユーザーインターフェイスに対する工夫は、CSS以上にキモとなる技術要素だ。Ajax自体CSSでページデザインしていないとうまく取り込めないのでCSSは大前提なのだが、どんなことがAjaxを使えばできるようになるのかを知っておく必要がある。たとえばURLを変更せずに、ひとつのページにレイアウトした情報を差し替えるようなインタ
ーフェイスはAjaxの典型的な活用方法だ【5】。ポータルサイトでよく見るタブインターフェイスなどが思い当たる形だろう。この方法はもっぱらひとつの画面にたくさんの情報を入れる手段として使われるが、それだけではない。たとえばスライドという動きを伴った場合、情報が切り替わっていることを確実に示すためにも有効である。また、ユーザーのページ遷移履歴に合わせてパンくずリストなどの導線補助機能をダイナミックに生成する手段としても、Ajaxは活用できる【6】。つまり、それぞれの技術をきちんと知ったうえでないと、適切な提案がしにくいのである【7】。

構造設計はデザインそのもの

さらに必要なことは、Webサイトが持っている情報の構造をよく理解することだ。Webサイトが持つカテゴリの数とその内容を理解し、まずスタティックな情報構造を把握する。そして想定ユーザーがたどるであろう動的な導線の様子を想像して、デザインのルールやレイアウトを決定するように心がけたい【8】。そうすることで、必然性のある操作性や形が導き出せるようになるうえ、自身が手がけるWebサイトに必要な独自の工夫も見えてくる。デザインというと、表面的な工夫を加える作業のように感じられることもあるが、そもそもデザインには設計という意味がある。Webデザインとは要件定義から情報設計、ビジュアルデザインのすべてを含んだ言葉だと思えば、情報設計とビジュアルが深い関係にあることがわかるはずだ。

これらの基本的な考え方にのっとってページのデザインを最適化することが、操作しやすいページづくりにつながる。具体的なテクニックを参考に、自分の案件に必要な表現を探ってほしい。