デザインへの向き合い方

UX5段階モデル

デザインと聞くと装飾などの表層的なデザインを想像される方が多いのではないでしょうか。私たちnovactではデザインは「課題解決」や「価値向上」の手段としてあるべきだと考えています。

上の図はUX5段階モデルと呼ばれ、ユーザー体験に関するデザインを5階層に分けて解釈したものを図式化したものです。

抽象的な戦略から、具体的な表層まで一つ一つ階層を進めていくことでユーザー体験を構築していくことでUX設計を成功に導くことができます。
また、「戦略」「要件」「構造」「骨格」「表層」これら抽象から具象までを行き来しながら設計していくプロセスこそ「デザイン」と考えています。

戦略フェーズ

UX5段階モデル①

UX5段階モデルの最も基盤になってくるのがこの戦略フェーズです。 novactでは戦略フェーズにおいて、ユーザーニーズとサイトの目的を徹底的に深掘りしていきます。このフェーズにおいての決定事項がのちのフェーズの方向性を大きく変化させていくため、重要度はかなり高いです。

サイトの目的とは具体的に、サイトを制作した先で達成したいことを示します。 Webサイトには制作次第で様々な効果をもたらすことができ、中でもよく挙げられるものは「問合せ件数を獲得する」などといったことです。

ユーザーニーズはサイト目的を達成するために考えるべきターゲットにするユーザー層の選定を行います。

要件フェーズ

UX5段階モデル②

要件フェーズでは、戦略段階で定めた方向性をより具体的に、形にしていくための最初のステップです。 戦略は抽象的すぎるため、要件を明らかにしていくことで後に構造フェーズに進んでいくために必要になってきます。ここでいわゆる要件定義が必要になってきます。

機能仕様ではWebサイトの目的を踏まえて必要な機能などを検討していきます。 CMSを組み込むかどうかなどもここで議題に上がってくる内容です。

また、コンテンツ要求では戦略フェーズで検討したターゲット層がどのようなニーズを持っているのかを深掘りし、大きく以下の2つに部類していきます。 1つ目が「顕在ニーズ」、2つ目が「潜在ニーズ」です。 そもそも、顕在ニーズとは「ユーザーが必要性をはっきりと自覚している状態」をいいます。

それに対して潜在ニーズは文字通り表面化していない「顕在ニーズの裏側に隠れた本人も必要性を自覚仕切れていない状態」をいいます。
よく、潜在ニーズと顕在ニーズをわかりやすく説明される例としてあげられるのはダイエットサプリメントです。ダイエットサプリメントの顕在ニーズは「痩せたい」というという表面化した課題が存在しています。
対して潜在ニーズには痩せたことによって得られる「健康になりたい」「自分に自信が持てるようになりたい」「様々な服を着たい」などが挙げられます。

これらの行動・思考・感情を目に見える形にまで落とし込むことが重要です。

構造フェーズ

UX5段階モデル③

さて、要件フェーズでは機能仕様やコンテンツ要求で方向性をより具体的にしたものをリストアップしてきました。
しかし、ここから制作・開発していくにはその繋がりや一貫性を持たせる必要性があります。 構造フェーズではこれらの概念的なデータ構造を組み上げていき、またよくUXと混同されがちなユーザビリティについての検証を行うのもこの段階になってきます。
構造フェーズで重要になってくるのが、インタラクションデザインと情報設計(インフォメーションアーキテクチャ)です。

インタラクションデザインはサイトを構成する要素をユーザーが正しい認識をできるかの検証をし、モードレスな体験設計をすることを目的としたデザインです。
サイト内で仕様されるアイコンなどが分かりやすいインタラクションデザインの例です。

情報設計では目に見える情報についての優先度を決め、オブジェクト同士の関連性などを明確にすることでコンテンツの一貫性などを目的としています。情報分類や遷移などを決定するのもこの段階です。

骨格フェーズ

UX5段階モデル④

骨格フェーズはこれまでのフェーズで作り上げた情報を元に実際に設計図を作っていく段階です。
この骨格で特に重要視すべき項目は「インターフェースデザイン」「ナビゲーションデザイン」「インフォメーションデザイン」の3つです。
これらはWebサイトを設計するにあたって、UXを成功に導くにあたって決してかけてはならない要素であり密接な関わりを持っているために一貫性や整合性を持たせる必要性があります。

インターフェースデザインとは
Webサイトではボタンやフォームなどにあたる部分になります。レイアウト構成を検討するのもこのインターフェースデザインとも言えるでしょう。

ナビゲーションデザインとは
一般的にサイト上部にあるグローバルナビゲーションやサイト下部にあるフッターリンク、またその他のサイト内リンクにおいて、Webサイトの目的を達成するために優先的に訴求すべき要素への導線などを整理した上で設計していきます。

情報デザインとは
パンクズリストやアイコン、タグなどのアクセントなどでユーザーがWebサイト内における現在の位置や行き先などを把握しやすくなるよう、ユーザビリティに配慮しながら設計する。

これらの3つのデザインを融合した上で矛盾点がないか検証し、ワイヤーフレームでWebサイトの骨組みとなる部分を作成していきます。

表層フェーズ

UX5段階モデル⑤

UX5段階モデルにおいて、最終の階層になるのが表層フェーズです。
表層フェーズでこれまで抽象から徐々に具象に近づけてきたものを完全に目に見える形にまで落とし込んでいきます。

制作において表層を作り上げることが制作のゴールと考えられる方があまりにも多く感じています。UXの成功と言えるのは「Webサイトの目的」を達成してからやっと言えることであり、オシャレなサイト、カッコいいサイト、可愛いサイトを作り上げることがゴールとは言えません。

表層フェーズで我々が大切にしていることはWebサイトVI構築、配色やコントラスト、フォントなどの統一やそのルールの確立、視線誘導です。
一見単純なWebデザインもかなり深くから設計し、作り上げていくことで目的を達成するためのサイトにまで出来上がるのです。