2017年05月17日Webデザイン

【おすすめ書籍】『ウェブ戦略としての「ユーザーエクスペリエンス」』

【おすすめ書籍】『ウェブ戦略としての「ユーザーエクスペリエンス」』

先日、お客様におすすめの参考書籍をたずねられたことがきっかけでオフィスの書棚の奥から引っ張り出しました。
(すでに絶版のようですが、中古も流通しているようです)

ウェブ戦略としての「ユーザーエクスペリエンス」―5つの段階で考えるユーザー中心デザイン (Web designing books)
2005/2 JesseJames Garrett (著), ソシオメディア (翻訳)

原著は2002年なので15年が経過していますが、改めて読み返してみると輝きを失わない2つの本質的な洞察があります。
ポイントを絞って概略をご紹介します。

Webサイトの体験は「セルフサービス」

事実上、どんな場合でも、ウェブサイトは「セルフサービス」製品だ。
(本書P.25より)

こんなに簡単で当たり前のことを今更ながら指摘されると、「ハッ!」となる方も多いのではないでしょうか。

ほとんどの製品には取扱説明書がありますし(テレビのリモコンでさえも!)、ソフトウェア製品であればヘルプコンテンツも用意されています。

ガソリンスタンドやフードコートでは、初めての場所であっても経験則から「だいたいこんな感じ」という雰囲気で<手続き>を進めることができると思います。

給油設備や食券の券売機には物理的な形があるし、ほかのお客様がいるので「人のふりを見て」まねることができます。

それに引き換え、ブラウザを前にしたユーザーはいわば孤独な環境で、誰の助けも求めることができずに「セルフサービス」で操作を強いられているのです。

こうした特徴をもつWebだからこそ「ユーザーの体験そのもの=エクスペリエンス」を戦略の中核として据えるべき、という視点は現在でも受け継がれています。

ユーザーエクスペリエンスを階層構造として捉える

ここ10年の間に、ユーザーエクスペリエンス(UX)についてはさまざまな解釈に基づく構造図が開発されてきました。

それぞれの局面に最適化されたもので優れた図版は多数ありますが、本書に記載されている5段階の階層で示されたモデル(5 Planes Model)はユーザーエクスペリエンスの構造をわかりやすく図式化したモデルとして、長くWebデザイナーやエンジニアに影響を与えてきました。
(弊社ディレクターが昨年参加したセミナーでも紹介されていたそうです。)

「5 Planes Model」イメージ図

(本書P47より、一部改変)

注目すべきは、図版の時系列とWebサイトの構築プロセスが合致するところです。

※英文ですが、元となった図版では時系列(Conception → Completion)も記載されています。

階層構造にならった構築プロセス

さすがに15年以上前に作られたものだけあって今のWeb制作にマッチしない点もありますが、抽象的概念(コンセプト)から具現化(完成)へ至るプロセスは現在でも大きく変わることはありません。

では実際の構築プロセスを本構造図に照らし合わせてみます。

1.戦略(ユーザーニーズ/サイトの目的)
企画提案からプロジェクトの企画・コンセプト策定など、プロジェクトのキックオフから実施計画(特にスコープの決定)までのフェーズに相当します。

これから先のフェーズで「そもそも論」が展開されないためにも、ユーザーニーズを把握しビジネスレベルからサイトの目的を明確化することが重要です。

2.要件(コンテンツ要求/機能要件)
ユーザーニーズとサイトの目的が明確になると、その要件を満たすためのコンテンツや必要な機能が浮かび上がってきます。

いわゆる要件定義にあたるフェーズです。

3.構造(インフォメーション・アーキテクチャ/インタラクション・デザイン)
4.骨格(インフォメーション・デザイン/ナビゲーション・デザイン/インターフェイス・デザイン)

この2つの階層はサイトの<設計>にあたるフェーズです。

サイトマップや機能設計書・ワイヤーフレームといった中間成果物を通じて実装に向けた合意形成を重ねつつ、具現化に向けて必要な要件を詰めていきます。

5.表層(視覚的デザイン)
ここまで積み重ねてようやく、視覚的要素(カラーリング・コントラスト・均一性・一貫性・タイポグラフィー)を伴った完成予想図として具現化された姿があらわとなります。

抽象から具現へ、コンセプトから完成へ

表層については具体的な要素解説の前に、章の冒頭で「表層の定義」についての記述があります。
その中からブランドアイデンティティとの関係に触れている一説をご紹介します。

ブランドアイデンティティを伝える上で、主要な道具となるのがビジュアルデザインだ。もしあなたのサイトが「テクニカルで権威がある」というアイデンティティを伝えたいのなら、マンガ文字をつかったり、明るいパステルカラーを使うのはおそらく間違っている。これは美的な問題だけでなく、戦略の問題なのだ。

(本書P.157より)

最下層の戦略から脈々とつながってビジュアルデザインへと至る構造を持つユーザーエクスペリエンスに対して、抽象的な概念から具体的な完成形へと時系列に進めるプロセスは非常に理にかなっていることです。

問題点を見つけるのは容易、しかし原因は簡単にはわからない

ユーザーのリテラシーが大幅に向上した現在、Webサイトのユーザビリティは、実際に使ってみればたいていの問題点を見つけることができます。

しかしながらその直接的な原因に対処をしても、根本的な原因の層にアプローチしない限り恒久的には解決できないものです。

本書ではWebのユーザー体験について、15年も前にそのことを見透かしたかのような構造論を展開している点で先進的だったと思います。

一方、この構造の本質は様々な人間の社会活動に潜む古典的な階層構造なのかもしれません。

※「デザインフェーズで浮かび上がる「デザイン以外」の問題点について」という記事の中でも本書(図版)について触れています。

Getting Betterとは

企業の忙しいWeb担当者(Web担当者)の方のために、コーポレートサイトやオウンドメディアの運営に欠かせない情報やトレンド・ノウハウを解説するブログです。

日々のサイト運営のご参考になれば幸いです。

IMAGICA Lab.のWebサイト構築サービスについてはこちら
https://www.imagica-imageworks.co.jp/web/

「株式会社IMAGICAイメージワークス」は、2018年10月1日に「株式会社IMAGICA Lab.」となりました。

トップへ