プランニング

UXの5階層(5段階)モデルと、感情設計に対応した3階層6段階

ジェシー・ジェームズ・ギャレット(Jesse James Garrett)氏の著書『The Elements of User Experience』によって提唱されたUXの5階層(5段階)モデルは、ウェブに限らず製品やサービスのプロジェクトにも広く応用される、貴重なワークフローでありガイドラインです。ウェブサイト設計やUXに携わる専門家なら、5階層(5段階)モデルを知らぬ者はいないでしょう。

 

私自身の体験を踏まえ、5階層(5段階)モデルの有用性についての再認識と、現代的なマーケティングの課題解決として当社が重視している新たな3階層6段階についてまとめてみたいと思います。

UX5階層(5段階)モデルとの出会い

私自身は、情報アーキテクチャと人間中心設計のアプローチに関心を抱き始めたのは2008年ごろからでした。
もともと大学で建築を学んでいたこともあり、人間中心設計というアプローチは理解しやすかったですし、当時はFlashを用いたインタラクティブなデザインが全盛期で、概念を知らずともUXを意識したデザインや実装を自然と志していたものでした。

その中で、「ウェブ戦略としての『ユーザーエクスペリエンス』」(2005年に日本語版が刊行されたらしいです)を2011年頃に読みました。
当初は少し遅く触れたかもしれませんが、それによって5階層(5段階)に整理されたWEBデザインの指針と、UXという概念を明確に意識する様になり、そのための戦略や計画の重要性に気づくことができたのです。
このことが、私自身のWEBウェブサイトデザインの考え方を大きく変え、マーケティング戦略やブランディングについての学びや新たな洞察をもたらした重要な節目でした。

今では、UXという視点はデザインやビジネスの世界で欠かせないものとなっており、私自身もこの概念に触れて以降、より洗練されたアプローチと戦略を取り入れ、プロジェクトの成功に寄与しています。
いわゆるWebデザイン制作の範囲に留まらない事業を構築しようと考えたのも、UXを中心にしたデザインの在り方に、デザインそのものやデザイナーとしての存在意義を見いだした事が理由です。

キャレットの5階層モデルとは

J・J・ギャレットの5階層モデルは、情報システムの設計に関連して特にWebサイトの構造を解釈する際に用いられるものです。
このモデルは、Webサイトを構成するソフトウェアシステムの側面とハイパーテキストシステムの側面を組み合わせて、構築のプロセスを階層的に捉える手法を提供しています。

具体的には、以下のように解釈されます。

戦略

Webサイトを設計する際に、組織のビジョンや目標を理解し、それに基づいてWebサイトの方向性を決定します。ビジネス目標やターゲットユーザーに対する戦略が定義されます。

要件

戦略層で決定された目標や方向性を踏まえて、Webサイトに求められる要件を洗い出します。ユーザーのニーズやコンテンツの要件、機能性などが議論されます。

構造

要件層で特定された要件に基づいて、Webサイトの構造やナビゲーション、情報アーキテクチャが設計されます。ここでは、コンテンツのカテゴリー分けやページ間の関係性などが決定されます。

骨格

構造層で定義された設計に基づいて、具体的なウェブページのスケッチやワイヤーフレームが作成されます。この層では、ユーザーのエクスペリエンスに重点を置いたデザインが行われます。

表層

最終的なデザイン要素が追加されます。色、テキスト、画像、フォントなどの視覚的な要素が組み込まれ、Webサイトの外観が完成します。

このモデルは、Webサイトの設計段階において、戦略的な側面からデザインの具体化までを体系的に捉えるのに役立ちます。
UXを提供する上で、WEBサイトデザインの中にある要素を明確にし、かつ何をどのように行うのかといった指針が示されています。

この5階層の考え方は、建築のプロセスと共通しているところがあります。基礎を堅め、柱を立て、梁や屋根を張って、設備を入れて壁や内装を仕上げていく…WEBサイトを建物をつくるように考えると、わかりやすいと感じる方もいらっしゃるのではないでしょうか。

5階層モデルと建築の共通点

実際、5階層モデルと建築のプロセスにはいくつかの共通点があります。

階層的アプローチ

両者のプロセスは階層的に進行します。5階層モデルでは、戦略、情報、コンテンツ、感情、ビジュアル、インタラクションの階層が順に進められます。
建築のプロセスでは、基礎から柱や梁、屋根、設備、内装といった要素が順序立てて組み込まれます。

設計と構築の統合

5階層モデルでは、UXデザインの各階層がプロジェクトの初期段階から最終段階まで統合的に考慮されます。建築のプロセスでも、設計と構築が密接に連携して進められます。設計段階で決定された要素が、建物の構築段階で具現化されます。

ユーザーエクスペリエンスの重要性

5階層モデルは、ユーザーエクスペリエンスを中心に据えた設計を強調しています。建築のプロセスでも、建物を利用するユーザーの快適性や安全性を重視した設計が行われます。

目的とニーズの考慮

5階層モデルでは、プロジェクトの目的とユーザーのニーズに応じて設計が進められます。建築のプロセスでも、建物の用途や利用者のニーズに基づいて設計が行われます。

統合的なアプローチ

両者のプロセスは、異なる要素や要求事項を統合的に取り扱う点で共通しています。UXデザインでは、ビジュアルデザインやインタラクションデザインなど、様々な要素が統合されます。建築のプロセスでも、構造や設備、内装などの異なる要素が一体となって建物を構成します。

これらの共通点からわかるように、5階層モデルと建築のプロセスは、設計と構築の両面で統合的かつユーザーエクスペリエンスを重視したアプローチを共有しています。

戦略・目的から表層への一貫性から生まれるUXが重要

この5階層では、必ずしも下層からの積み上げである必要はなく、また各階層が相互に関係し合っているため、設計プロセスは実際のプロジェクトによって異なるアプローチを取る場合もあります。
とはいえ、建築で言えば基礎にあたる戦略がしっかりできていないと、その上に構築される建物は不安定で危なっかしいものになってしまうでしょう。

また、建築では機能性や使い勝手、心地よさなどのUXが建築家によってデザインされ、設計段階で意図が投影されます。WEBサイトにおいても、UXを設計に投影せずに職人の経験と勘だけ、表層や骨格だけを見て制作してしまうと、提供されるUXはビジネスの戦略に沿ったものにはならないのです。

5階層モデルを土台にしたCEの3階層モデル

現代においても5階層モデルが色褪せるところはないのですが、マーケティングを中心とした設計となると、少し様相が異なるな…と感じるようになりました。
UXのための…という点では共通ですが、マーケティングでは、より顧客心理や態度変容を考慮した設計が求められます。5階層モデルでもカバーは出来るが、よりポイントを明確にした設計指針が必要だと感じる点があります。

また、我々のような作り手にとって5階層モデルは非常に有用ですが、顧客のマーケティング的な関心事からすると、

  • 深層|戦略設計、情報設計
  • 中層|コンテンツ設計、感情設計
  • 表層|ビジュアル設計、インタラクション設計

と、3階層で説明した方が具合が良いという感覚があります。また、実際そのように設計をしています。

深層|戦略設計、情報設計(Strategic and Information Design)

この階層では、WEBコミュニケーションの目標を戦略的に設計し、情報を効果的に伝える方法を検討します。ターゲットオーディエンスやコンテンツの要件、ウェブサイトの目的などを定義します。ターゲットユーザーや選ばれる理由を明確にする戦略、トラフィック対策やビジネスの目的達成のための情報設計などが深層にあたります。

中層|コンテンツ設計、感情設計(Content and Emotional Design)

ターゲットが求める情報を、どのように整理しどのような順序で提供すればよいのかを考えるのが中層です。コンテンツ設計においては、ユーザーの興味を引きつけ、興味を持続させるために魅力的なコンテンツやストーリーテリングが重要です。また、感情設計を通じて、ユーザーの共感や関心を引き起こす要素を盛り込むことが考慮されます。

コンテンツの運用やCMS設計なども、このタイミングで摺り合わせを行っています。

表層|ビジュアル設計、インタラクション設計(Visual and Interaction Design)

ビジュアル設計とインタラクション設計が行われます。ビジュアルデザインには、ウェブサイトの外観やデザイン要素が含まれます。インタラクションデザインには、ユーザーとの対話を重視した要素やウェブサイトのユーザビリティを向上させるための要素が含まれます。

深層に先んじることはほぼありませんが、中層の検討と同時か、少し先行して表層のデザインを進めていく事も多いです。その方が具体的な課題の洗い出しがしやすく、検討の速度も効率も高まると思います。

Summary

3つの階層に分けることで、WEBコミュニケーションの設計プロセスがより体系的かつ効果的に行われることが期待できます。チームにアサインされたデザイナーやエンジニアのスキルレベルによっては、この程度の階層である方が連携がしやすく、一気通貫に仕事が進む感覚があります。各々の階層の異なる側面を理解し、統合することで、ユーザーエクスペリエンスの向上と情報伝達の効果だけでなく、制作効率の向上も得られるでしょう。