Webインターフェイス・デザインガイド

Web制作の案件を新たに受注したときに、制作者としてもっとも頭を悩ますことのひとつが、そのWebサイトのインターフェイスデザインではないだろうか。

そもそも誰にでもひとつくらいは、お気に入りのWebサイトがあるに違いない。あなたは、どんなサイトに心が惹かれ、魅力を感じるだろう。

「印象に残るWebサイト」の条件を考えたとき、デザインのトーンや斬新な機能性、美しいビジュアルなど、いろいろな部分的要素があげられる。しかしユーザーの観点から見れば、Webサイトの良し悪し、好き嫌いの判断がなされる最大の要素は、それらを総合的に構成した「インターフェイス」にあるといえる。なぜなら、どんなに優れたシステム技術が組み込まれたサイトであっても、ユーザーがWebで実際に見て触れるものは、パソコンのスクリーンに映し出された画面、つまりインターフェイスであるからだ。システムやコンテンツの真価が発揮できるのも、インターフェイスのデザイン構成次第、といえるだろう。

Webサイトの制作に取り掛かる際、まず初めに確認すべきことは、そのサイトの「目的」と果たすべき「役割」だ。企業イメージを訴求するものなのか、商品のオンライン販売を行うものなのか。クライアントが何を求め、その要求に適うためのWebサイトとはどのようなものであるのか。サイトの目的・役割を正しく理解し、それに応じたユーザー導線や操作性を備えたインターフェイスをデザインすることが肝要だ。

では、サイトの目的や役割に応じたインターフェイスを実現するためには、どうしたらよいのだろうか。この企画では、まず第1部で、Webサイトの様式を10タイプに分け、それらの各インターフェイスの構造を分析した。むろんこれがすべてではないが、これらのパターンを把握することで、新たに手がけるWebサイトはどんなインターフェイスが向いているのか、どのような条件を必要としているのか、そうしたことを探るための目安としていただければ幸いだ。また第2部では、Web表現のメインストリームのひとつとなっているFlashインターフェイスを用いたWebサイトのなかから、非常に興味深いサイトを紹介する。

CONTENTS

第1部　新規案件のためのWebインターフェイス・デザインガイド

01　ベーシック型
多くの情報から目立たせたい要素を引き立たせるベーシックなレイアウト

02　検索機能重視型
文字情報を整理し、検索性の高さに重点をおいたインターフェイス

03　購買意欲喚起型
ユーザーの商品購買意欲を刺激する、活気に満ちたレイアウト

04　訴求力重視型
商品への関心を高める訴求力の強いイメージ配置

05　シンプル追求型
構成要素を必要最小限にしぼったシンプルなインターフェイス

06　読ませる目的型
テキスト情報の読みやすさを追求したデザイン構成

07　クリック結実型
楽しさと印象づけでクリックや応募率を高めるレイアウト

08　ユーザー登録促進型
下層優良コンテンツまで関心を抱かせるインターフェイス構成

09　ナビゲーション渾然一体型
グローバルとサブのふたつのナビゲーションが一体化したレイアウト

10　コンバージョンアップ目的型
トップページからのコンバージョンアップを狙ったインターフェイス




第2部　Webインターフェイスの現在形

ウインドウのサイズに追従するインターフェイス
ANTEPRIMA

「カメ城」を玄関にしたユニークなコーポレートサイト
平和アルファ

クリック強要を逆手に取った愛らしさ漂うメニュー画面
バタフライ・ストローク・株式會社-Characters

Flash Videoで展開するユーモラスな製品紹介サイト
Honda 低床・低重心ミニバン

ユーザーに「実機の操作」感覚をWebで体験させる
VAIO

ひとつの輪から無数に広がる小気味いいメニュー表示
Self Titled

イメージ写真を全面に起用したオンラインショッピングサイト
gift by nssgraphica

モノクロ映像が全面に表示される印象的なバックグラウンド
Kurt Stallaert