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