UX/UIとは何か？
他の記事も書きましたが、ここでは念のためUI/UXについて簡潔にまとめます。
UX（ユーザーエクスペリエンス）は、ユーザーが製品やサービスを使用する際に感じる総合的な体験全体を指します。
UI（ユーザーインターフェース）は、ユーザーが製品やサービスと対話するためのインターフェース要素（ボタン、メニュー、フォームなど）を指します。
UXとUIは、ユーザーがどのように製品やサービスと関わり、どのような感情や反応を持つかに影響を与えます。
以下の記事もご参照ください。
UI/UXとは？成果につながる必須事項を徹底解説！
UIデザインを理解する〜ヤコブ・ニールセンの10原則〜
UXの5階層（5段階）モデルと、感情設計に対応した3階層6段階
よいUI/UXを提供するための着眼点
ユーザー中心の設計
ユーザーのニーズ、要求、行動パターンを理解し、それに基づいて設計することが重要です。ユーザーの視点から考えることで、使いやすく、満足度の高い体験を提供できます。
シンプルさと一貫性
シンプルなデザインと一貫性のある要素は、ユーザーにとって予測可能で理解しやすい体験を作り出します。無駄な複雑さを避け、簡潔さを重視しましょう。
情報の階層化
複雑な情報を階層的に整理することで、ユーザーが必要な情報に迅速にアクセスできるようになります。重要な情報を隠さずに提示することが重要です。
フィードバックと透明性
ユーザーの行動に対して適切なフィードバックを提供し、システムの状態や進行状況を透明に伝えることで、ユーザーの不安や混乱を減少させます。
アクセシビリティとインクルーシブデザイン
インクルーシブとは、包括的や包容的といった意味を持つ言葉です。ターゲットユーザーの設定は重要ですが、あらゆるユーザーが製品やサービスを利用できるようにするため、アクセシビリティを考慮したデザインを採用しましょう。異なる能力や状況を持つユーザーにも対応できるデザインが求められます。
UX/UI改善のポイント
ターゲット（ペルソナ）を明確に設定する
データに基づいて、年齢、性別、居住地、職業、役職、年収、趣味、家族構成、ライフスタイルなど詳細に情報を設定していき、具体的なターゲット（ペルソナ）を設定することで、適切なアウトプットのイメージを形成することがポイントです。データを収集する際は、ユーザーアンケートやインタビューなどで可能な限り詳細かつ具体的に収集をするのが良いでしょう。
ターゲット（ペルソナ）の具体的な設定方法についてはこちらの記事もご参照ください。
Webサイトやアプリの目的を明確にする
「このターゲットにどのような行動を取ってもらい、どんな体験によって、どんな感情を抱いてもらえるようにするのか」という文脈で目的を明確化していきます。
例えば、「忙しいビジネスマンが、仕事や通勤の合間に手軽にビジネス情報をチェックできるアプリ」があるとして、よりユーザーを増やすという目的を設定したとします。
この場合、見た目のデザインを、ビジネスに対して感度の高い人が好むようなクールでシンプルなデザインにするといった改善活動が想定されます。
しかしそのデザインが、見た目は良くとも機能性が悪く、目的のコンテンツが見つけにくかったり、辿るのに時間がかかる場合はどうでしょうか。おそらく、ユーザーを増やすという目的を達成することは難しいでしょう。
目的と手段を混同しない
これは、シンプルなデザインを目指した結果、ユーザビリティが低下してしまった…という例です。
見た目のシンプルさにこだわるあまり、ユーザーが操作の判断に必要な要素が欠落してしまったり、情報が不足（意味が理解しにくいアイコンの利用など）したりする事は、実際に起こり得ます。
「どのような機能や導線、付随する情報があれば、忙しいユーザーが限られた時間の中で手軽に情報をチェックできるのか」という観点に立ち返り、正解に向かった仮説検証や深堀りをする必要があります。
シンプルな見た目という表現手段にこだわるあまり、”手軽にチェック”という目的が失われるのは本末転倒です。
UI・UXの改善はこのように目的に応じた観点に何度も立ち返る必要が出てきます。そのため、まずは開発の初期段階で目的を明確に設定することが重要です。
ユーザーの利便性を意識した設計を行う
具体的にはコンテンツのカテゴリ分けや関連コンテンツ同士を繋ぐ導線、コンテンツからCVに至るまでの導線などを、実際のユーザーの思考と心理の動きを意識しながら設計やテストを行いましょう。
まず、ユーザーの利用中の離脱を防ぐために、ユーザーにストレスを与えない導線を設計します。導線設計はアクセス解析をはじめ、ユーザーシナリオや感情設計を基にした行動パターンの分析から行います。
導線設計とあわせて、画面設計においても、文字のサイズやフォント、色彩の使い方やコントラスト、リンクやボタンの位置など、細かい部分に至るまで、ユーザーの利便性に軸足を置いた改善を行うことが、UI/UXの向上に直結します。
ユーザーからの意見を反映する
UI・UXの向上のためには、ユーザーの意見を知り改善に繋げることが重要です。
製作側は常にユーザーを意識してプロダクトの製作にあたりますが、制作側がもつ仮説が間違っている可能性を認識しましょう。
実際に分かりやすい設計になっているかは利用者でなければ分かりません。このため、実際に利用するユーザーが、商品やサービスを利用した際の体験に対する満足度を調査しましょう。
調査にあたっては定性調査と定量調査の2つを実施することが必要です。
定性調査の手法にはユーザーテストやヒューリスティック調査、インタビューなど、定量調査の手法にはアクセス解析やデータマイニング、アイトラッキング、ABテストなどが挙げられます。
これらの調査でデータを収集し、分析、改善施策を行いましょう。
UI/UX改善の手順
改善ポイントについては、ご理解いただけましたか。
要約すると
- ターゲットとのなるユーザーをよく観察し
- 理解し
- 彼らの目的にかなう情報を
- 認識しやすい方法で提供
- そしてフィードバックを受け取り改善する
という事になります。この一連の手順についてまとめてみました。
ユーザー調査と分析
ユーザーのニーズや行動を理解するために、ユーザー調査やユーザーインタビューを実施します。得られた情報／データから、行動パターンやニーズについて洞察を得ます。
ペルソナの作成
ユーザーのセグメンテーションに基づいてペルソナを作成し、異なるユーザーグループの特性とニーズを定義します。
ユーザージャーニーマッピング
ユーザーが製品やサービスを利用する過程を段階的にマップ化し、ユーザーの感情やニーズを把握します。
ワイヤフレームとプロトタイプの作成
デザインのアイデアを視覚化するために、ワイヤフレームやプロトタイプを作成します。これにより、デザインの方向性を検討できます。
デザインの検証とテスト
プロトタイプをユーザーに提示してフィードバックを収集し、デザインの問題点や改善点を特定します。ユーザーテストやユーザビリティテストが含まれます。
改善と最適化
ユーザーフィードバックやテスト結果に基づいてデザインを改善し、最適なユーザーエクスペリエンスを提供するための調整を行います。
技術的要素も確認
UI/UXに関わる技術は日々進歩をしており、高度化しています。まずは基礎的に考慮すべき技術を確認しましょう。
レスポンシブデザイン
もはや常識的な実装ですが、異なるデバイスや画面サイズに適応するためのテクニックです。主要なユーザーの閲覧環境に合わせた画面サイズを設定し、情報が適切なサイズで表示されるように設計します。
アクセシビリティ
特定の障がいを持つユーザーだけではなく、サイトの訪問者が情報にアクセスすることを容易にする事が重要です。Web Content Accessibility Guidelines (WCAG)など、アクセシビリティのガイドラインに基づいた設計と実装を行います。
ユーザーインタラクションの実装
ユーザーが直感的に操作できるインタラクティブな要素を実装します。ボタンの機能やナビゲーションの動作などが含まれます。直感的である、とは認知と理解のしやすさを指します。これは、ユーザーのリテラシーレベルや背景にある文化にも影響を受けます。
しかし、どんなユーザーでもコンピューターのOSが提供するUIには慣れがあるものです。そのため、まずはOS（iOSやAndroid、Windowsなど）が実装しているUIの規則やガイドラインを参考にして考えると良いでしょう。
デザインシステムの構築
一貫したデザイン要素やコンポーネントをまとめたデザインシステムを構築し、効率的なデザインと開発を実現します。デザインの一貫性は、わかりやすさ、探しやすさなど重要な体験を提供します。また、ブランド価値を高める効果も期待されます。
デザインシステムについては、こちらもご参照ください。
デザインシステムとビジュアルアイデンティティ
パフォーマンスの最適化
ウェブページやアプリの読み込み速度を向上させるための技術的手法を採用します。表示速度の向上は、ユーザーがイライラする原因を低減し、より積極的な行動を促す効果が期待できます。
ABテストとデータ分析
新しい機能やデザインの効果を評価するためにABテストを実施し、データ分析を通じて改善の方向性を判断します。これまでGoogleが提供してきたOptimizeが2023年9月にサービス終了となり、GA4にABテストのソリューションを統合することがアナウンスされています。
高度な実装技術、パーソナライゼーション
パーソナライゼーションは、ユーザーに合わせたカスタマイズや個別化された体験を提供するための高度な技術です。これはUI/UXの改善において非常に重要な要素であり、以下のような側面に関連します。
コンテンツの個別化
ユーザーの興味や過去の行動に基づいて、コンテンツや提案を個別にカスタマイズします。これにより、ユーザーは関心のある情報や商品に簡単にアクセスできます。
レコメンデーション
ユーザーの過去のアクティビティや購買履歴から、関連するコンテンツや商品を提案するアルゴリズムを実装します。これにより、ユーザーの関心に合ったものを提示できます。
ダイナミックコンテンツ
ユーザーがサイトやアプリを訪れるたびに、その時点での状況や環境に応じたコンテンツを表示することができます。例えば、地域ごとの情報や天候情報の表示などが含まれます。
個人データの活用
ユーザーが提供した個人情報や設定を活用して、よりパーソナライズされた体験を提供します。ただし、プライバシーとセキュリティに注意を払うことが重要です。
パーソナライゼーションは、ユーザーにとってより価値ある体験を提供するための手段として、UI/UXの改善において非常に効果的です。マーケティングオートメーション（MA）ツールや、データマネジメントプラットフォーム（DMP）などのサービスを利用することが一般的です。
具体的な事例
アスクル
「アスクル」は、オフィス用品を中心に幅広い商材を取り扱う総合ECサイトですが、探している商品の見つけやすさ、比較しやすさにおいて、非常に完成度が高いサイトの一例と言えます。
オフィス用品は商品数や種類が非常に多いにもかかわらず、カテゴリ検索やジャンルからの検索など検索機能が優れており、気になる商品や欲しい商品にかんたんにアクセスすることができます。
検索性の高さだけではなく、気になった商品を比較して購入を検討するために商品をブックマークしておく機能もあり、気になる商品を、購入前の段階で見比べることも可能です。
また、デザインも非常にシンプルで無駄がないこともUI/UXを意識した賜物と言えるでしょう。
ライフネット生命
ネットで加入まで完結できる生命保険会社ですが、保険は商品の特性上、ユーザーが加入決定までに長い時間をかける傾向にあります。
そのような中でもユーザーの意思決定を促すため、再訪したユーザーの検討状況に合わせて情報を出し分けるといったパーソナライズを随所に施しています。
たとえば、「がん保険」について情報収集しているユーザーには、「がん保険」に関する商品をレコメンドしてくれます。
また、一度自身の年齢などを入力して特定の商品の見積もりをすると、再訪時に見積もり内容が表示されるので、改めて入力する手間がないところもユーザーのかゆいところに手が届く設計と言えます。
スマホで使いやすいサイト設計になっていることも大きな特徴です。
SmartNews
同サービスでは、興味のあるチャンネルに登録すると、ユーザーが必要とするニュースがプッシュ通知されるという形式をとっていましたが、ユーザーからプッシュ通知の許可が得られない傾向がありました。
そのため、ユーザー登録時のユーザーの行動や思考の仮説を立て、ユーザーがプッシュ通知を許可するまでのフローを外部のUI/UX企業とともに設計し、ユーザーがサービス利用開始時に見るチュートリアルを、興味を引くようなアニメーションを交えて実装することでプッシュ通知の許可を得やすくしました。
併せて、プッシュ通知の許可による利便性が伝わるようなデザインやカラースキムの変更も実施しました。
結果、ユーザーは興味のある情報を簡単に利用できるようになり利用者の継続率アップに成功しています。
Facebookは、初期には大学の学生向けのオンラインコミュニティから始まりましたが、その後急速に成長し、世界中のユーザーが友達と情報を共有し、コミュニケーションするためのプラットフォームとして広く知られるようになりました。
ユーザーエクスペリエンスの改善においては、タイムラインのデザインやフィードのアルゴリズム変更、プライバシーコントロールの強化などが行われました。
ユーザーからのフィードバックや行動データを基にして、ユーザーエクスペリエンスを改善し続けています。
Googleは初期の検索エンジンとして登場した頃、検索インターフェースはシンプルでしたが、検索結果の品質は向上の余地がありました。検索エクスペリエンスはテキストベースで、関連性の高い結果を表示するための高度なアルゴリズムが不足していました。また、モバイルデバイス向けの最適化も行われておらず、多様なコンテンツ形式を統合的に表示する機能も不足していました。
その後、Googleは多くのUI/UX改善を行い、検索エクスペリエンスを大幅に向上させました。Googleのホームページは、シンプルな検索ボックスが目立つデザインとなり、ユーザーは素早く検索を開始できるようになりました。高度な検索アルゴリズムにより、関連性の高い検索結果を提供し、ユーザーは迅速に求める情報を見つけることができるようになりました。
さらに、検索結果ページはテキストだけでなく、画像、ビデオ、ニュース、地図など様々なコンテンツ形式を一つのページで表示できるようになり、ユーザーは多様な情報にアクセスできるようになりました。モバイルフレンドリーなデザインの導入により、モバイルデバイス上でも快適な検索体験が提供され、様々なスニペットや自動補完、関連キーワード表示などがユーザーの利便性を高めました。
また、大規模なデザインへの投資を行った事も重要です。特に、2011年から2014年にかけて「Google Material Design」と呼ばれるデザインガイドラインとスタイルを導入し、多くのGoogle製品やサービスのデザインを一貫性のあるものに統一しました。