UXの5段階モデル分解編vol.5 サービス/プロダクトのビジュアルを作り、ユーザーの感情を引き出す表層段階の具体的なデザイン手法【2019年版】
目次
2022年追記：最新版記事のご紹介
UXの5段階モデル改めてデザインの5段階モデルとして、より汎用性の高い形で再解釈に取り組んでいます。最新版の記事はこちらからご覧ください。
UXの5段階（5階層）モデルは、サービスやプロダクトがもたらすUXを5つの段階的要素で表したものです。ここで、一貫性を持ったサービス/プロダクトの開発を行うためには、このUXの5段階モデルの概念に沿って開発することが重要です。
UXの5段階モデルの概要をまずは理解したい！という方は以下の記事をご覧ください。
◼︎UXデザインにおける5段階モデルとは？
◼︎UXの5段階モデルにおける各段階での具体的なデザイン手法とは？
ここまでのUXの5段階モデル分解編の記事では、戦略段階から骨格段階までを説明してきました。本記事では、最後の段階である表層段階について、その目的と必要なインプットとアウトプットの説明、具体的なデザイン手法の紹介を行いたいと思います。
各段階の詳細は、こちらをご覧ください。
◼︎UXの5段階モデル分解編 vol.1 サービス/プロダクトの原点となる戦略段階での具体的なデザイン手法
◼︎UXの5段階モデル分解編 vol.2 サービス/プロダクトの開発指針を定める要件段階での具体的なデザイン手法
◼︎UXの5段階モデル分解編 vol.3 サービス/プロダクトのデータ構造を明確にする構造段階での具体的なデザイン手法
◼︎UXの5段階モデル分解編 vol.4 サービス/プロダクトの原型を作成し、ユーザビリティテストを行う骨格段階での具体的なデザイン手法
UXの5段階モデルにおける表層段階での目的とは？
UXの5段階モデルにおいて、表層段階は最上層に位置する段階となります。ここでは、ユーザーが実際に利用するサービス/プロダクトの完成形を作ることになります。
ユーザーは、表層段階で作り上げたデザインに直接触れ、様々な感情を抱きます。その感情はデザインの「即効性」と「遅効性」の二つから生み出されると言えます。
即効性のあるデザインから引き出される感情は「かっこいい！」「かわいい！」「美しい！」「Wow!」といった、瞬発力のある感情です。一方で遅効性が引き出す感情は、「わかりやすい！」「便利！」「売上（数字）が上がった！」「共感できる！」といった、後からじわじわと生まれてくる感情です。これらの両方がうまく引き出されて初めて、サービス/プロダクトは成功となると言えます。逆に、せっかく戦略、要件、構造、骨格と作り上げてきても、表層段階のデザインでユーザーに誤った感情を与えてしまうと、サービス/プロダクトは失敗してしまいます。
したがって「即効性と遅効性を兼ね備えたビジュアルデザインを完成させる」ことが表層段階での目的となります。
表層段階で必要になるインプットとアウトプット
では、「即効性と遅効性を兼ね備えたビジュアルデザインを完成させる」ために必要なことは何でしょうか？
まず「サービス/プロダクトがユーザーに与えたい印象」は、表層段階の基礎となるインプットです。与えたい印象をチームで言語化し、サービス/プロダクトのVI（ビジュアルアイデンティティ）を作り上げ、それに沿ったビジュアルデザインを行います。
また、これまでの段階と同様、一つ前の段階である骨格段階で作り上げたワイヤーフレームが必要なインプットとなります。作成したワイヤーフレームに沿ってコンポーネントのビジュアルを決定していくことで、情報設計に則ってわかりやすくデザインをすることができます。
また、サービス/プロダクトについての情報だけでなく、一般的なデザインのベースとなるデザインガイドラインやタイポグラフィ、色の知識といった、技術的なインプットも必要となるでしょう。さらに、トレンドデザインについての知見を深めることも、ユーザーに使われやすいサービス/プロダクトを作るためのインプットとして重要です。
これらのインプットを元に作るVIおよびサービス/プロダクトの完成形が、表層段階でのアウトプットとなります。
表層段階での具体的なデザイン手法の例
ここからは、表層段階におけるデザイン手法の目的とその例を紹介していきます。
VI（ビジュアル・アイデンティティ）の構築
VIとは、ロゴ、シンボルマーク、ブランドカラーなどの視覚的要素を統一させることで生み出される、サービス/プロダクトおよび企業のブランドイメージを指します。VIの目的は「ブランドのコンセプトを可視化し、その存在意義をユーザー、社会に対して浸透させること」ですが、VIを確立することはサービス/プロダクトのビジュアルデザイン行う上でも重要な指針となります。
VIの目的、事例については以下の記事を参考にしてみてください。
また、VIを確立する一つの手段としてロゴデザインがあります。ロゴデザインについては以下の記事も参考にしてください。
カラーパレット
色は、サービス/プロダクトのイメージを決定するだけでなく、ブランドアイデンティティにも深く結びつく要素であり、ビジュアルデザインにおいて非常に重要です。
ここで、色と言っても一色だけを使うのではなく、ユーザーに対して適する色の複数のセットを利用することが必要です。カラーパレットは、コントラストや均一性を踏まえた、サービス/プロダクトで使用する色のバリエーションをまとめたもので、配色を行なっていく際の指針となります。核となるブランドカラーを決め、ブランドカラーと組み合わせて使える色からカラーパレットを作ることで、コントラストや均一性のあるビジュアルデザインが可能となります。
配色やカラーパレットに関しては、以下の記事で参考サイトやツールをまとめています。
タイポグラフィー、フォント
また、タイポグラフィー（フォントや字面をデザインし、ユーザーに特定の視覚的効果を与えること）も、VIを醸成することに寄与します。タイポグラフィーを特別に作らない場合でも、サービスに利用するフォントを適切に選択し、インターフェイス上に表示する情報を読みやすくすることが重要です。
フォントの選択については、以下の記事を参考にしてみてください。
コントラスト、均一性の実現
インターフェイスに表示する重要な箇所にユーザーの注意を引きつけるためには、コントラストを意識したデザインを行うことが効果的です。テキストの色や、特徴的な画像などで重要度の高い情報を強調することが可能となるでしょう。コントラストにより快適な使用感を実現することで、わかりやすいデザインを実現できます。
しかし、この過程でみだりに配置や色を変更すると、ユーザーに混乱をきたす恐れがあります。そのような事態を避けるために、ベースとなるデザインに均一性を持たせることが重要となります。このためには、前もってインターフェイスのグリッドを作成しておき、それに沿ったコンテンツ配置を行うグリッドベースレイアウトや、上述したカラーパレットが有用です。
視線誘導
視線誘導とは、情報を配置する区画や、表示されるコンテンツの形状、大小、色などを調整することで、ユーザーの視線移動を意図的にコントロールする手法です。視線誘導を意識したデザインを行うことで、見せたい順序で情報をユーザーに見てもらうことが可能となり、ユーザーにストレスなくサービス/プロダクトを利用してもらうことが可能となります。
視線誘導についての詳細は、こちらの記事を参考にしてみてください。
ユーザビリティテスト
骨格段階に引き続き、プロトタイプに対してユーザーがどのような挙動を示すかを確認することが、サービス/プロダクトを改善し、より良いユーザー体験を実現するために重要です。特に表層段階では、視線の移動や遷移など、ユーザーが操作に対してやりづらさを感じているポイントをチェックし、改善することが必要です。
ユーザビリティテストについては以下の記事も参考にしてみてください。
まとめ
今回の記事では、UXの5段階モデルの表層段階における目的と具体的なデザイン手法を紹介しました。
表層段階は、ここまでの段階の集大成としてビジュアルデザインを行い、サービス/プロダクトを完成させる段階です。ここでは、瞬発的な感情と持続的な感情の両方を適切に引き出すため、様々な手法でデザインを作り上げます。
まず、届けたいイメージを言語化することでサービス/プロダクトのVIを構築します。そして、骨格段階のアウトプットであるワイヤーフレームをベースにビジュアルデザインを作っていきます。ここで、レイアウト、色に関する知識やトレンドなどをインプットしておくことで、使いやすさ、わかりやすさを実現するデザインを作ることが可能となります。また、骨格段階同様、ユーザーの反応が確認できるフェーズなので、実際にプロトタイプを作って仮説検証するというサイクルも怠ってはならないでしょう。
これらを意識することで、「即効性と遅効性を兼ね備えたビジュアルデザインを完成させる」ことが可能となるのではないでしょうか。
Goodpatchでは企業のデザインパートナーとして、新規事業の立ち上げや既存事業のリニューアルを一つのチームとなって行っています。戦略段階から表層段階まで一貫した体験を提供するためのサポートをいたします。より良いユーザー体験とビジネスの両立を実現されたい方は、ぜひお声がけください！
実際に担当した事例については、こちらをご覧ください。
参考
Jasse James Garrett 『ウェブ戦略としての「ユーザーエクスペリエンス」』