View more

Web制作のためのユーザーエクスペリエンス(UX)設計とは?

Blog

Web制作のためのユーザーエクスペリエンス(UX)設計とは?

Webサイト制作を行う上で重要な役割を果たすUX。この記事ではUXとは何か、そして通常のUX設計と、Webサイト制作における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全て達成で価値のあるものとする

1 Useful – 役に立つ 提供されるプロダクトやサービスがユーザーの役に立っているか。彼らのニーズを満たしているか。もしそれがユーザーの目的を達成していなければ、ユーザー体験としてはレベルが低い。
2 Desirable – 好ましい プロダクトの見た目や雰囲気がユーザーにとって好ましいかどうか。ここに評価軸においては”デザイン要素”はなるべく少ない方が優れているとされる。
3 Accessible – アクセスしやすい 体の不自由な方や、異なる制限のあるユーザーにとっても使いやすい体験がデザインされているかどうか。色盲の方でも認識しやすいサインなどもその例の一つ。
4 Credible – 信頼できる 企業やプロダクトが信頼できるものであるかどうか。例えば無名な企業よりも、著名なブランドの製品であれば、最初からユーザーの心理的ハードルが下がり、自ずと利用体験がよくなりがち。
5 Findable – 探しやすい 情報やコンテンツが見つけやすい。短期間でユーザーが求める情報にたどり着ければ、利用している際のストレスが下がる。サイトであればページの構造、駅や公共の建物であれば、目的の場所に辿り着きやすいなど。
6 Usable – 使いやすい そしてユーザビリティの高さ。利用していて必要以上に複雑で使いにくい場合はユーザー体験の価値が下がってしまう。例えば家電製品であれば、説明書を読まなければ使い方がわからない時点で減点対象になるであろう。

 

 

 

UXピラミッド

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

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

 

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

Experience

心地良い体験

6 Meaningful – 価値がある: 気づき 気づきを与えることができているか
      時代性 時代にあったデザインや操作方法を取り入れているか
      心地よさ 利用していて心地良い、ワクワクする要素があるか
  5 Pleasurable – 楽しい・心地よい: 直感性 直感性直感的に使用することができるか
      連続性 途切れることなく一連の体験を提供できているか
      容易性 二度手間や煩わしさを排除できているか
  4 Convenient – 便利である: 視認性 文字やアイコン、表示内容はわかりやすいか
      ヘルプ性 困ったときの解決方法がすぐに見つかるか
      簡潔性 文言は簡潔でわかりやすいものになっているか

 

Task

目的達成可能

3 Usable- 使いやすい: 操作性 ストレスなく目的達成のための操作ができるか
      一貫性 ナビゲーション/操作は一貫してわかりやすいものとなっているか
      マルチデバイス対応 タブレット端末のサイズやタッチ操作でも使いやすいか
  2 Reliable – 信頼できる: 安全性 セキュリティ面などで安全に使うことができるか
      検索性 検索サイトから見つけることが可能か
      安定性 安定したパフォーマンスが得られるか
  1 Functional (Useful) – 機能的である: ニーズ 目的を果たすために必要なことが簡単にできるか
      スピード 低速度でも極端に遅くなっていないか
      エラーレス エラーとならない工夫がされているか

 

まとめ

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

 

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

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

 

 

Webマーケティング、Web制作に関することなら
お気軽にご相談ください

 

 

UX開発の一例

株式会社ポプラ社|"こどもが本好きになる”小・中学校向け電子書籍読み放題サービス『Yomokka!(よもっか!)』

株式会社ポプラ社|「総合百科事典ポプラディア」発 調べ学習応援サービス『Sagasokka!(さがそっか!)』

株式会社 BookLive|Xfolio(クロスフォリオ)サービスサイト制作

デパート採用情報

株式会社デパートでは一緒に働く仲間を募集しています