Dyno

ウェブサイトにおける 2 つの「デザイン」

今回は ウェブサイトにおける「デザイン」の種類 について述べてみたいと思います。

ウェブサイトにおけるデザインは大きく分けて「情報デザイン」と「装飾デザイン」の 2 つに分けることができます。

情報デザイン

情報デザイン は、 サイト内のパーツの WHAT と WHERE 、つまり、「どんなパーツを置くか」そして「各パーツをどのような配置で置くか」を決める作業です。

情報デザインの作業を進める上でよりどころとなるのは、人間の認知特性や文化・習慣をもとにした原則です。

そして、情報デザインの主な成果物には次の 3 つがあります。

  1. サイト全体のページ構成を表す サイトマップ
  2. ページ間の移動をサポートする ナビゲーション
  3. ページ内のパーツの構成を表す ワイヤフレーム 

装飾デザイン

一方の 装飾デザイン は、 サイト全体とサイト内のパーツの HOW 、つまり、「全体と各パーツをどのような見栄えにするか」を決める作業です。

装飾デザインの作業を進める上ででよりどころとなるのは、サイトに持たせたいブランドイメージやターゲットの好みです。

装飾デザインの作業から生まれる主な成果物は次の 2 つです。

  1. ページの実際の完成形を表す デザインカンプ
  2. 運用で更新するページのパーツの見栄えをまとめた 共通パーツデザイン

家づくりでたとえるなら、情報デザインの成果物は間取り図、装飾デザインの成果物はインテリアデザインやエクステリアデザインのデザイン案です。

情報デザイン → 装飾デザイン

実際のウェブ制作のプロジェクトでは 先に情報デザインを行いその後に装飾デザインを行う のが本来の進め方です。

しかし現実には予算が限られたプロジェクトも多く、また、プロジェクトメンバーのデザイナーが情報デザインと装飾デザインを明確に識別していない場合、意思決定者が情報デザインの重要性を理解していない場合も多く、情報デザインと装飾デザインをまとめて行う形も多いのが現状です。

ポイント

この情報デザインと装飾デザインを区別する考え方のポイントは、 情報デザインと装飾デザインは目的が異なる という点です。 上で述べたとおり、情報デザインと装飾デザインはその対象が明確に異なります。

そして、もうひとつのポイントは 情報デザインと装飾デザインの両方が機能してはじめて効果的なデザインになる という点です。 情報デザインと装飾デザインは両輪で、どちらか一方だけではよいデザインになりません。

特に日本では「デザイン」と聞くと装飾デザインだけをイメージする方が多いですが、サイト設計においては装飾デザインと同じくらい情報デザインも重要です。

というわけで、ウェブサイトにおけるデザインのお話でした。

十分な予算があり情報デザインの価値がステークホルダーに理解される場合は、必ず情報デザインと装飾デザインを分けて議論するべきです。 これらを明確に区別することによって、初期バージョンのサイトの品質も上がりますし、その後の PDCA の質・速度が上がることと思います。

ご参考になれば幸いです :D