Web制作のためのユーザーエクスペリエンス（UX）設計とは？

Webサイト制作を行う上で重要な役割を果たすUX。この記事ではUXとは何か、そして通常のUX設計と、Webサイト制作におけるUX設計の違いを説明した上で、押さえておきたいステップやポイントをご紹介します。

そもそもUXとは？

UX = User experience（ユーザーエクスペリエンス）、直訳すると「ユーザー体験」となります。

ユーザがその対象（サービスやプロダクト）を通じて得たすべての顧客体験のことで、

主観的（ユーザごとの感情や評価）・時間的（そのサービス関わるさまざまなタイミングで抱く感情や評価）・状況的側面（ユーザが製品やサービスを体験する環境や状況）で捉えることができると言われています。

ユーザ評価が高く優れた体験を提供することが製品やサービスの評価に直結していきますので、それらを実現するためのUX設計が重要な鍵を握っていくのです。

Web制作におけるUX設計

Webサイト制作においてUX設計を行っていくにはどのようにしたらよいでしょうか。一般的に定義されているそのいくつかをみていきましょう。

1. デザイン思考の5つのプロセス

デザイン思考ということは昨今よく耳にするようになりましたが、以下のようなプロセスを用いて、ユーザーの課題を定義し解決策を見いだす行動、要するにUXを設計するという考え方です。

STEP1：共感・理解：ユーザーを深く理解し共感する

STEP2：定義・明確化：アプローチすべき問題を明確にし、定義する

STEP3：アイディア開発・想像：問題を解決するなるべく多くのアイディアを出す

STEP4：プロトタイプ：なるべく早くプロトタイプを作る

STEP5：テスト：プロトタイプをもとにユーザーテストを行う

💡デザイン思考のはじまり

ピーター・ロウが1987年に発表した「デザインの思考過程（Design Thinking）」という著書により、建築と都市のデザイン手法について「デザイン思考」という言葉が使われたのが始まりとされています。その後アメリカのデザインファーム、アイディオ（IDEO）によって提唱され世界に広まりました。

2. Web制作における6つのプロセス

デザイン思考のプロセスに、”実装”が足されたものになります。

UX設計を用いたWeb制作では、実装（ローンチ）された後、実際のユーザにテスト検証・評価・分析・改修を繰り返し、常に体験価値を高めていく必要性があります。

デパート流WebデザインのためのUX 7ステップ

ここまで、一般的に唱えられているデザイン思考やWeb制作におけるプロセスを説明しました。
では実際、デパートにおけるWeb制作のUX設計の方法について、全体の制作ステップに従いご紹介していきます。

重要視しているプロセスは、Step1 - 4になります。

ここでほとんどのことが決定するイメージで、Step5のデザインフェーズではStep4までに出してきた解をまとめるような工程になります。

また、Step6ではユーザテストのFBを吸収していく大事な工程も追加されます。

STEP1：理解

STEP2：共感

STEP3：アイディエート

STEP4：プロトタイプ

STEP5：インターフェースデザイン

STEP6：実装・テスト

STEP7：ローンチ＆計測

Step1 – 理解

一番最初に始めるのは、ユーザの課題とビジネスのゴールを理解していくことです。デザイナーとして、いくら表層のデザインを綺麗に仕上げていったとしても、ユーザとビジネスと双方の課題を解決するという結果を得るのは不可能なのです。

そのためにもデザイナーとしても、たくさんの仕様書などを読み解き、理解をしておく必要があるのです。

• 成果物参考例

  調査

  • マーケット調査

  • 競合調査

  • ユーザ調査

  仕様確認

  • 要件定義書

  • 業務仕様書

  • 機能設計書

  • 非機能要件書

  • システム構成書・関連図

  • データ設計書

など

※太字はデザイナーでも確認し理解する必要がります。

💡ユーザ調査の方法

UX設計を行う上で、重要な鍵を握るのがユーザ調査です。

案件やユーザに応じて様々な方法があります。

一般的に調査方法は、収集するデータの性質により**「定量」と「定性」**と別れると言われています。

ユーザ調査に重きをおき、ユーザ中心で考えていくUXですが、ユーザの声をそのまま反映すればいいんだ！という”お客様第一主義”とは別物。 次に続く工程で、ユーザも気がついていない本当の課題解決の手法を導くためにも、正しい理解をすることが最重要事項と言えます。

Step 2 – 共感

デザイナーが、優れたデザインを生み出すために最も重要なプロセスと言えるのが”共感”のフェーズになります。

製品・サービスを受け取る人たちへの共感をすること。ターゲットとなるユーザの行動内容・思考内容・感情変化などを徹底的に理解しなければなりません。

• 成果物参考例

  • ペルソナ

  • ユーザーストーリー

  • ユーザーシナリオ

  • エンパシーマップ

  • AsIsカスタマージャーニーマップ

  など

Step 3 – アイディエート

アイディエートとは、アイディアを出すことです。ユーザとビジネスの課題を解決する可能性のあるあらゆる策を探索していき、どの解決策で後続するプロセスを進めていくかを絞り込んでいきます。

理解〜共感で得た情報を元に、”あるべき姿”を形成していきます。

• 成果物参考例

  • ブランド企画・定義

  • ブレインストーミング

  • スケッチ

  • ムードボード

  • リファレンス

  • ToBeカスタマージャーニーマップ

  など

  

Step 4 – プロトタイプ

プロトタイプは、制作していくWebサイトが、どのようなユーザ体験を提供できるかを試作し、評価するためのプロセスです。

早い段階で全体のUXを捉えるためのラフを作成したり、課題解決の中心となる箇所に絞り込み詳細に作成したりと、その粒度は目的により様々です。

※この時点でユーザテストを行う場合もあり。

• 成果物参考例

  • 画面構成（ワイヤフレーム）

  • 画面遷移図

  • UI設計

  • 簡易プロトタイプ

  • 基本設計書

  など

Step 5 – インターフェースデザイン

ここまでの設計に基づき、ユーザがストレスなく情報にアクセス、理解、認識するための最適な表層デザインを制作します。

• 成果物参考例

  • デザインシステム

  • デザインガイドライン

  • 画面デザイン

  など

Step 6 – 実装・テスト

ここまでの設計やデザインを、実際にユーザが触れていくものへと実装していくフェーズです。優れたUX体験を創造するためにも、ただ実装するだけではなく、実装したものを実際にユーザにテストしてもらうことが重要です。 テストを行うタイミングが早ければ早いほど、フィードバックを反映しやすく、UXの制度を高めることができます。 また、テストには様々な種類の評価軸がありますので、課題・目的に合わせて適切に選択していきましょう。

• 成果物参考例

  • HTML・CSS・JS

  • バックエンド開発

  • ユーザビリティテスト（結果を吸収

  • ヒューリスティック評価（結果を吸収

  • アクセシビリティ評価（結果を吸収

  • コアウェブバイタル評価（結果を吸収

  • フォーカスグループ評価（結果を吸収

  など

💡ユーザ調査の方法

参考書籍：Web制作者のためのUXデザインをはじめる本 ユーザビリティ評価からカスタマージャーニーマップまで

Step 7 – ローンチ・計測

Webサイトがリリースされても、デザイナーの仕事は決して終わりではありません。 リリース後こそ優れたUXを醸成していくチャンスなのです。実際のWebサイトを実際のユーザに触れて使ってもらい、そのデータを収集していきます。 収集したデータを元に、Step 1からのプロセスを繰り返し、優れたUXを目指し続けていきます。

• 成果物参考例

  • データ分析

  • アクセス解析

  • ユーザからのフィードバック

  • ABテスト

  など

WebデザインのためのUX評価手法

ここまで、Web制作のUX設計の方法について説明してきました。
実際にUXを向上するためには、どのような評価手法があるでしょうか。代表的なものを見ていきましょう。

ユーザ体験を構成する3つのポイント

Webサイトに初めて触れるユーザは、以下の順番でWebサイト自体の体感を評価していくと言われています。

1. 見た目の品質 (Look)

2. 感覚の品質 (Feel)

3. 使いやすさ (Usability)

大きく分けてこの3つの要素のクオリティが高いほど、ユーザーに対してより優れたUX体験を提供することが可能になります。

Webサイトを制作する過程で、これらを評価するためのフレームワークを2つ、ご紹介します。

UXハニカム

UX業界ではスタンダードとして利用されている評価方法、UXハニカム。UXを6つの異なる評価軸に合わせて評価していきます。

UXの評価チェックリスト

1-6全て達成で価値のあるものとする

UXピラミッド

UXハニカムに加えて、もう一つのUXの評価手法としてUXピラミッドがあります。

UXピラミッドは6つの階層で構成され、下3層がWebサイトを利用する際に最低限必要とされる実用性を示し、そして上3層がユーザが利用時に体感する使いやすさや心地よさなどの感覚を示す項目になっています。 Level 1〜3は客観的な評価、Level 4〜6はユーザの主観的な感覚での評価になります。

UXピラミッドを活用したUX品質評価実例

まとめ

Webデザイン制作におけるユーザーエクスペリエンス（UX）についてご紹介しました。 作って終わりではなく、ユーザと共に育てていくことを前提としたWebサイトやWebサービスが求められています。 まずはユーザの課題とビジネスのゴールを適切に理解し、徹底的にターゲットユーザに共感することで、より優れたユーザ体験を設計していきます。そうすることで、プロダクトやサービスの評価を高めていくことができるのです。

株式会社デパートでは、表層面のみならず、Webサイトを通して得た全ての体験が、優れたUXになることを目指したWeb制作を行っています。

お気軽にお問い合わせください。

UX開発の一例

制作実績：株式会社ポプラ社｜"こどもが本好きになる”小・中学校向け電子書籍読み放題サービス『Yomokka!（よもっか!）』のご紹介

株式会社デパートの手掛けた制作実績「株式会社ポプラ社｜"こどもが本好きになる”小・中学校向け電子書籍読み放題サービス『Yomokka!（よもっか!）』」のプロジェクト概要、課題と解決方法をご紹介しています。

制作実績：株式会社ポプラ社｜「総合百科事典ポプラディア」発 調べ学習応援サービス『Sagasokka!（さがそっか!）』のご紹介

株式会社デパートの手掛けた制作実績「株式会社ポプラ社｜「総合百科事典ポプラディア」発 調べ学習応援サービス『Sagasokka!（さがそっか!）』」のプロジェクト概要、課題と解決方法をご紹介しています。

制作実績：Xfolio（クロスフォリオ）｜サービスサイト制作のご紹介

株式会社デパートの手掛けた制作実績「Xfolio（クロスフォリオ）｜サービスサイト制作」のプロジェクト概要、課題と解決方法をご紹介しています。