UXデザインの基礎〜ユーザー体験の概念と事例を紹介します!〜

皆さんこんにちは!キカガク長期コース卒業生の川合です。

今回はデザインブログ第三弾として「UXデザイン」を取り上げます!

Web制作やアプリなど、さまざまな現場で重要なUX(ユーザーエクスペリエンス)

UXデザインは意味をつかみづらい言葉で、「なんとなくは分かるけど、説明しようとすると難しい」「UIとの違いが分からない」という方も多いのではないでしょうか。

この記事では、UXデザインの意味や役割、事例を交えながら紹介します!

UXデザインとは何か

UX(ユーザーエクスペリエンス)デザインとは、ユーザーがどのような体験を得るかという視点でデザインすることです。

単に見た目の美しさだけでなく、ユーザーが使いやすく、満足度の高い体験を提供することが求められます。

UXデザインとUIデザインの違い

「UI/UXデザイン」と併記されることも多く、混同してしまいがちです。

UXデザイン」は使いやすさ、便利さ、感情面に焦点を当てているのに対し、「UIデザイン」は見た目や操作性に焦点を当てています。

また、UXデザインはUIデザインを内包しており、UIデザインはUXデザインの一部を指しています。

UIとUXの違いについては「デザインブログ第二段」で紹介しています。ぜひこちらもご覧ください!

UXデザインとは思いやりのデザイン

UXって何だかよく分からない」「UXって難しそう」と思うかもしれません。

難しく考えず、UXデザイン = 他人を思いやる行為 と捉えてみてください。

より、身近なものに感じてきたのではないでしょうか。

あなたのアプリケーションやサービスを利用してくれる人のことを想像し、「どうやったら気持ちよく、スムーズに使ってもらえるか」を考えてみましょう!自ずと良いUXができあがっていくと思います。

そして、想像する人は、なるべく身近な人が良いでしょう

ご自身の家族、友人、同僚、上司、ご近所さんなど、アプリを提供したいターゲットの年齢や環境に近い顔見知りの方をピックアップしてください。

その人が実際にあなたの作成したアプリを使うことを想像し、「どうやったら良い体験をプレゼントできるだろう」と考えましょう。作ったら実際に使ってもらい、ぜひフィードバックをもらってください。

フィードバックを基に改善し、より良いUXにしていきましょう!

この時、UIやUXを改善する手法を学ぶ意欲が最高頂になると思います。

難しい専門知識は、この改善のフェーズで身につけても遅くはありません。

私は「学ばなきゃいけない状況になったとき、一番新しいことを吸収できる」と考えています。

まずは「喜んでほしい」という意気込みが大事だと思います。

UXデザインが必要な理由

UXデザインを考慮することで下記のメリットを得ることができます。

  • ユーザー満足度を向上できる
  • ユーザーのニーズに合わせた設計ができる
  • 他社との差別化、競争力の向上が図れる
  • 継続的に使ってもらえる
  • サポートやトレーニングのコストを削減できる

あなたのサービスがとても魅力的で、唯一無二、競合他社がいないものであれば、UXが悪くてもユーザーは使い続けてくれるでしょう。

「このアプリが好き」というよりは「他にないから使っている」状況です。

もしそうでなければ、UXデザインにこだわるべきです。同じようなサービスが他にある場合も、あなたのアプリケーションが使いやすく、気に入ってもらえるものであれば使い続けてくれるでしょう。

ユーザーに「使いやすい」「このアプリが好き」と思ってもらうためにUXデザインは欠かせないものです。

使っていくうちにどんどん好きになってもらい、あなたのアプリをユーザーにとっての推しのアプリに認定してもらいましょう!

UXデザインの5段階モデル

UXデザインには、ユーザーの体験を考える際に用いられる5段階モデルがあります。

このモデルはJesse James Garrett 氏が著書「Elements of User Experience」で提唱したものです。
UXは5つの要素で構成されている」ことを示しています。

戦略(Strategy)〜利用者のニーズ・サービスの目的〜

プロダクトの目的を設定し、「誰のどんな課題を解決するのか」「なぜ必要なのか」を明らかにすフェーズです。

ここを間違えると、後の工程をどれだけ頑張っても意図しない方向に進んでいくことになります。

走る方向を間違えると、いつまでたってもゴールに辿り着けないのと似ています。

適切なゴールを設定する必要があるため、最重要の工程と言っても過言ではありません。

要件(Scope)〜要件定義(コンテンツ・機能)〜

「何によってユーザーに価値を提供するのか」を考えるフェーズです。

「戦略」で導き出した課題を解決するために必要なコンテンツや機能を、ユーザーがそのサービスを利用している場面をイメージしながらリストアップします。

ゴールに行くため、手段を選ぶことと似ています。走るのか、泳ぐのか、自転車に乗るのか。どの方法でいくとゴールへ辿り着けるのかを検討します。

構造(Structure)〜情報設計・モデリング〜

ここからの3フェーズはどのように価値を提供していくかを考えていきます。

ここでは、要件」で定めたコンテンツ・機能を整理し、ユーザーに分かりやすく届けるための全体構造を設計します。

どこに、どのようなコンテンツ・機能を配し、それらがどのように関連付けられるのかといったことを決めていきます。

建築でいう設計図のようなものを作成します。

骨格(Skeleton)〜レイアウト・ナビゲーションデザイン〜

ユーザーとの接点となるインターフェースにおける設計を行うのが骨格段階です。

どのような要素が、どこに配置されるかを検討し、最終成果物の骨組みとします。

建築の骨組みと同じようなものを作成します。

表層(Surface)〜ビジュアルデザイン〜

視覚的な要素の反映をするフェーズです。

配色や文字のフォントなど、ユーザーの受ける印象に大きな影響を与えます。

建築のインテリア、エクステリアと同じようなものを作成します。

このモデルによって、抽象的な概念から始まり、徐々に具体的になっていくことで、目的から外れることなくデザインを進めることができます

良いUXデザインの指標「UXハニカム」

UXハニカムとは、ユーザーの知覚や感情、反応などの主観的な体験であるUXの構成要素を分かりやすく抽出したフレームワークです。

2004年に、情報アーキテクチャを専門領域とするピーター・モービル氏によって提唱されました。

この構造モデルでは ユーザーが感じる「価値(Valuable)」を中心に、ユーザーエクスペリエンスを構成する6つの要素が配置されています。

①Useful 〜役に立つ〜

アプリケーションやサービスを利用するユーザーは、「タスクを自動化したい」「レシピを調べたい」など、目的を持ってアクセスします。そのニーズに応えることで、アプリケーションやサービスの有用性を発揮します。


提供されているサービスが、ユーザーのニーズを満たすことができるか(役に立つのか)という観点で、Webサイトの効果を判断していきます。

②Usable 〜使いやすい〜

ユーザーが操作し、目的を達成してもらうアプリケーションにおいて、ユーザーに価値のある体験をしてもらうためには、ストレスを感じさせることなく利用できる環境が必要です。


ユーザーにとって使いやすい画面設計・導線設計・機能設計を実現できているか」という観点でアプリケーションのユーザビリティを見直していきます。

③Findable 〜探しやすい・見つけやすい〜

Usable 使いやすい」とも関連しますが、ユーザーが必要とするサービスがアプリケーションで提供されていたとしても、そこまでユーザー自身がアクセスできなければ全く意味がありません。


ユーザーが欲しいコンテンツへ迷うことなくスムーズにアクセスできる設計が実現できているか」という観点で見直していきます。


また、アプリケーション内における「探しやすさ」だけでなく、検索エンジンにおける「見つけやすさ」も見直す必要があります。

④Credible 〜信頼できる〜

次に、ユーザーが必要とするコンテンツに辿り着いたとしても、情報の信憑性や提供元に対する信頼性がなければアプリケーションの利用価値を見出すことができません


アプリケーションにあるサービスが、ユーザーにとって信頼できるものかという観点で見直していきます。

⑤Accessible 〜アクセスしやすい〜

アプリケーションを利用するユーザーは、すべてが健常者とは限りません

高齢者や障がい者などハンディキャップを持った方もいらっしゃいます。


様々な状態のユーザーがアクセスすることを念頭に、誰もが利用できるアプリケーションが実現できているかという観点でアクセシビリティを見直していきます。

⑥Desirable 〜好ましい〜

ユーザーの興味関心を惹きアクションを起こさせるためには、情動的なデザイン(エモーショナルデザイン)も大切な要素となります。


CI(コーポレート・アイデンティティ)やVI(ビジュアル・アイデンティティ)が反映されたデザイン設計だけでなく、ターゲットユーザーが好感を持てるイメージ・アイデンティティ・ブランドが形成されているかという観点でアプリケーションのデザインを見直していきます。

これら6つの面が成立して、ユーザーにとって価値のある体験を創造することができるという考え方です。

そして、ユーザー視点でUX改善に取り組む際の評価軸として役に立ちます。

参考:「The User Experience Honeycomb」 Peter Morville著

UXを考慮した事例10選

ここまで「UXとは何か」を概念、モデル、フレームワークとともに紹介しました。

このセクションでは、UXを向上されるための手法および事例を紹介します。

①ステップバー

現在の進捗状態を示すUI要素です。

ユーザーのタスクの完了項目や進捗度合いを示し、一目で全てのタスクが把握できる利点があります。

特に長いプロセスを要する登録画面やアンケートなどで効果を発揮します

「あと何個で作業が終わる」というのが分かれば、ユーザーは続けて必須項目を入力してくれる可能性が高まります。

②パーソナライズされたコンテンツ

ユーザーの過去の行動や好みに基づき、パーソナライズされたコンテンツを提供します。

そうすることでユーザーの関心を引き付け、より良い体験を提供します。

ついつい関連商品や動画ページへアクセスしてしまった経験はないでしょうか

ユーザーを長くサービスに滞在させるのに役立ちます。

③フォームの自動入力

ユーザーが同じ情報を繰り返し入力する必要がないように、フォームの自動入力機能を提供することで、手間を省き、スムーズな操作を実現します。

長い入力を要求されると、その面倒さから離脱してしまうユーザーも少なくありません

予測変換で少しでもユーザーの負担を減らし、タスクを完了させてあげることが良い体験につながります。

④リアルタイムのフィードバック

ユーザーの行動や操作に対して、即座に視覚的なフィードバックを提供することで、ユーザーが自分の行動を理解しやすくなります

モーダルやポップアップで何が起きたのかを知らせたり、パンくずなどで今いるページを把握してもらうことが重要です。

ユーザーが迷子にならないよう、ナビゲーションしてあげてください。

⑤エラーメッセージの親切さ

ユーザーがエラーに遭遇した場合、わかりやすく具体的なエラーメッセージを表示し、解決策や次のステップを提案することで、ユーザーが問題を解決しやすくなります。

「エラーが発生しました」だけでは、何が原因でエラーが起きたか分かりません

全角数字ではなく、半角数字で入力してください」「そのアカウント名はすでに使われております」など、具体的にエラーの原因を示してください。

⑥インタラクティブな要素の活用

ユーザーがアプリケーションとより深い関与を楽しめるよう、「ドラッグ&ドロップ」「スワイプ」「ズーム」などのインタラクティブな要素を活用します。

より自然な動作を採用することで、現実世界の事象と近くなり、直感的にアプリケーションを使うことができます

しかし、動きが大げさだったり多すぎるのも良くありません。情報を妨げたり、動作を重くしてしまう可能性があります。

⑦検索とフィルタリングの使いやすさ

大量のデータやコンテンツがある場合でも、効果的な検索機能とフィルタリングオプションを提供することで、ユーザーが必要な情報を見つけやすくします。

欲しい情報や使いたい機能にすばやくアクセスできることがユーザー体験向上につながります

⑧プッシュ通知の適切な活用

プッシュ通知を使用して、重要な情報や個別のお知らせをユーザーに送信する一方で、過度な通知のオーバーロードを避けることで、ユーザーのストレスを軽減します。

ユーザーにとって有益な情報であれば、プッシュ通知の効果は高まります

逆に通知頻度が多いと煩わしさを感じるかもしれません。ユーザーが通知を設定できるよう配慮も必要です。

⑨オフライン時のサポート

ユーザーがインターネット接続がない状況でも、アプリケーションの一部機能を使用できるように、オフラインモードやキャッシュ機能を提供することで、ユーザーの利便性を高めます。

また、オフライン時のアクセスエラー画面にユーモアがあると、簡素なエラー画面よりも嫌悪感が軽減されます。

オフラインでも操作できるよう配慮しつつ、操作ができない場面も想定してUXデザインを考えてみてください

⑩アクセシビリティの配慮

バリアフリーなデザインや視覚・聴覚障害者向けの補助機能を実装することで、すべてのユーザーがアプリケーションを利用しやすくなり、包括的なUXを提供します。

ターゲット設定にもよりますが、より多くの人に使ってもらいたい場合は重要な配慮です。

目が不自由な方向けに文字を大きくできる機能を追加したり、文字を読み上げる機能を考慮した実装をするなど、プラスアルファの配慮をすると、広い層に使ってもらえるアプリケーションとなるでしょう

良いデザインは気付かれない

普段何気なく使っているアプリケーションにも、先に紹介した配慮がされているのではないでしょうか。

良いUXデザインは意識しないと気付くことができません。逆に、気付かれないから良いデザインなのです

ユーザーに意識させることなく目的を達成してもらうことができれば、それはデザインが成功しています。

ここのデザインが少し違和感があるな」「ここの操作が迷うな」と、手を止めてしまった場合、そこには改善の余地がある合図です。

じっくりユーザーを観察し、どこを改善すれば解決するかを検討しましょう!

まとめ

UXデザインはユーザーの体験に焦点を当てたデザイン手法」であり、ビジネスの成果にもつながる重要な要素です。

今回はアプリケーションに寄った話をしましたが、あなたが提供するサービスと顧客の接点全てにUXデザインが必要です。

アプリケーションだけでなく、それを説明する資料、ロゴマーク、広告など、様々な場面でUXデザインを向上させることで、きっと顧客はサービスのファンになってくれると思います。

ぜひ、届ける相手への「思いやり」を大事にし、UX向上をしていきましょう!

こちらの記事もオススメ

まずは無料で学びたい方・最速で学びたい方へ

まずは無料で学びたい方: Python&機械学習入門コースがおすすめ

Python&機械学習入門コース

AI・機械学習を学び始めるならまずはここから!経産省の Web サイトでも紹介されているわかりやすいと評判の Python&機械学習入門コースが無料で受けられます!
さらにステップアップした脱ブラックボックスコースや、IT パスポートをはじめとした資格取得を目指すコースもなんと無料です!

無料で学ぶ

最速で学びたい方:キカガクの長期コースがおすすめ

一生学び放題

続々と転職・キャリアアップに成功中!受講生ファーストのサポートが人気のポイントです!

AI・機械学習・データサイエンスといえばキカガク!
非常に需要が高まっている最先端スキルを「今のうちに」習得しませんか?

無料説明会を週 2 開催しています。毎月受講生の定員がございますので確認はお早めに!

説明会ではこんなことをお話します!
  • 国も企業も育成に力を入れている先端 IT 人材とは
  • キカガクの研修実績
  • 長期コースでの学び方、できるようになること
  • 料金・給付金について
  • 質疑応答