UI/UXデザイン：ケーススタディによる定義とデザインプロセス

![UIUX Design Definitions, Design Process with a Case Study.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3671938/b33553b8-6bad-3030-fc9f-fd222e588077.png)

## はじめに

UI/UXデザインは製品開発プロセスにおいて非常に重要な役割を果たしています。なぜなら、これは視覚的で魅力的な製品を創り出し、優れたユーザージャーニーを提供する責任があるからです。良いUI/UXデザインは、ユーザーが製品やサービスとの認識やユーザーとのインタラクションに著しい影響を与え、その結果、サービスに対する滞在または離脱の決断に影響を及ぼす可能性があります。UXデザインとUIデザインは関連していますが、デザインプロセスでは異なる役割があります。こちらの役割を明確にすることは、効率的なワークフローの構築と高品質なデザインプロジェクトの創出にとって重要です。

それでは、UXデザインとUIデザインにはどのような違いがあるのでしょうか？ UIデザイナーとUXデザイナーが、アジャイルデザインプロセスでどのように協働するのでしょうか？ このブログでご一緒に発見しましょう！

## UXデザインとは？
![What is UX Design.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3671938/730a9cf7-82b9-6872-7746-0d84e4b7b4c1.png)


UX（ユーザーエクスペリエンス）は、ユーザーが製品やサービスを利用している際の総合的な体験を指します。これは、ユーザーの相互作用に関するあらゆる側面を包括し、製品やサービスに対するユーザーの認識、感情、態度を含みます。

UXデザインは、ユーザーと製品やサービスとの相互作用を設計し、最適化するプロセスです。UXデザインの目標は、ユーザーのニーズと期待を満たしつつ、同時にビジネスの目標と調和する製品やサービスを作り出すことです。 

よく設計されたUXデザインは、ユーザーとビジネスの双方に利益をもたらします。

- **ユーザーにとって：** ユーザーセントリックの哲学に基づいて、UXデザインはユーザーの各インタラクションをシンプルにし、情報を検索したりタスクを完了したりする際にナビゲーション機能との操作が円滑に行えるようにサポートします。良いUXは、ユーザーに物理的で心理的な満足感をもたらし、シームレスな体験を提供します。
- **企業にとって:**  良いUXデザインの製品を所有することは、ユーザーに対してポジティブな経験を作り出し、利用をを増やせ、離脱率を減少させ、それにより高い変換率をもたらします。設計がしっかりされたUXは、製品の再設計コストやUXの悪さに起因する顧客サポートコストの必要性を減少させることで、企業にとって長期的にコストを節約するのにも役立ちます。

## UIデザインとは？
![What is UI Design.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3671938/1fe7a6e8-991c-0bf5-c653-4fc66447ca79.png)

UI（ユーザーインターフェイス）には、ボタン、メニュー、アイコン、タイポグラフィ、配色など、製品やサービスのインターフェイスを構成するビジュアルでインタラクティブな要素が含まれます。

UIデザインとは、ユーザーが操作する製品やサービスのインターフェイス上のビジュアル要素やインタラクティブ要素をデザインするプロセスです。UIデザインのゴールは、視覚的に魅力的で、直感的で使いやすいインターフェースを作ることです。

UXと同様に、良いUIデザインはユーザーと企業の双方にとって有益です。

- **ユーザーにとって:** 良くデザインされたUIは、ユーザーに視覚的に魅力的なインターフェイスを提供し、製品やサービスでの体験をより快適なものにします。. 
- **企業にとって：**  UIデザインへの投資は、ポジティブな最初の印象の創出、強力なブランドプレゼンスの確立、ブランド価値とアイデンティティの伝達、そして最終的な競合他社との差別化など、さまざまな面でビジネスに利益をもたらします。UIデザインを優先することで、企業はブランドを強化し、忠実な顧客ベースを構築することができ、最終的には長期的な成長と成功をサポートすることができます。 

## デザインプロセス:  UI/UXデザイナーの協働方法
![The-Design-Process-How-UIUX-Designers-collaborate.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3671938/d5a10ac0-24c0-715a-cbdb-ee3f4e70bcf5.png)


デザインプロセスにおいて、UXデザイナーとUIデザイナーは密接に連携し、ユーザーを深く理解し、直感的なデザインを創造します。Lollypopでは、グローバルに展開する全プロジェクトにおいて、3ステージのアジャイルデザインプロセスを採用しています。

このアジャイルアプローチは、よく知られているデザイン思考プロセスにインスパイアされたものですが、コスト削減や市場投入までの時間の最適化など、お客様のご要望に合わせてカスタマイズしています。私たちのアプローチは直線的なアプローチではなく、プロセス全体を通して改訂が推奨されます。中小企業にも大企業にも適しており、文化的嗜好に合わせることも可能です。それでは、探検してみましょう！

### ステージ1: 発見

発見ステージは、企業が目指すゴールとユーザーの要望を満たす製品を創り出すために必要なインサイトをデザイナーに提供するため、デザインプロセスの成功には非常に重要です。このステップは、デザイン思考プロセスの最初の2つのステップを含みます。

#### A. 共感

各企業は独自のビジョンを持っています。そのため、Lollypopでは「共感する」ステップにおいて、お客様のゴール（ブランド認知、新ユーザー獲得、ユーザー数増加、Webサイトのトラフィック増加など）に沿った方向性をデザインできるよう、お客様を中心に据えています。このステップを開始するために、私たちはお客様に主要な関心分野をカバーするアンケートフォームを送ります。

- **ビジョンと背景:**  製品・サービスの将来的な開発に対する企業のビジョンは何でしょうか？この製品・サービスを通じて、企業がユーザーに伝えたいメッセージや価値は何でしょうか？
- **一意である価値提案:**  この 製品・サービスがユーザーに提供する具体的な利益は何でしょうか？その製品・サービスは、ユーザーにどのような問題を解決するのでしょうか？
- **プロセスとワークフロー:**  ユーザーはどのようなシナリオでこの製品を使うのでしょうか？ユーザーはどのように製品と接しますか？
- **コンペティション:**  最大の競合相手は誰なのでしょうか？？この製品・サービスの差別点は何でしょうか？

#### B. 定義

お客様からのアンケート結果が回収されると、デザインチームは「問題記述書（Problem Statement）」を作成します。

一般的に問題記述書とは、プロジェクトが解決を目指す特定の問題を簡潔かつ明確に記述したもので、現在の状態、将来の望ましい状態、そしてそれらの間に存在するギャップを概説します。これにより、チームは解決しようとしている問題を明確に理解することができる。

問題記述書を確定した後、LollypopのUXデザイナーはプロジェクトの理解を深めるために2～3週間の発見ワークショップを行います。ワークショップの際、チームは必要な成果物を作成するために、以下のような様々な活動を行います

- **SWOT分析:** 4つの要素によるビジネス分析モデル： 強み（Strengths）、弱み（Weaknesses）、機会（Opportunities）、脅威（Threats）の4つの要素から、企業の概要とビジネスモデルの評価を行います。
- **共感マップ:** これは、デザイナーがユーザーの気持ちや考えを理解するためのビジュアルツールです。このマップは、様々な調査方法（アンケート、インタビュー、ユーザー観察など）を通じて作られました。その情報は「Says（言う）」-ユーザーの意見、フィードバック、コメント）、「Thinks（考える）」-ユーザーの信念、思い込み、態度、「Feels（感じる）」-ユーザーの感情状態（恐れ、不満、喜び）、「Does（行う）」-ユーザーの行動（行動、習慣、ルーチン）の4つのグループに分けられます。
- **ユーザーペルソナ:** ユーザープロファイル、環境、心理統計、ペインポイント、目標、シナリオなど、さまざまな側面からエンドユーザーを架空の人物として表現したもの。ユーザーペルソナは、デザイナーがユーザーをより深く理解し、ユーザーの要望や 期待を満たす適切なデザインを決定するのに役立ちます。
- **ユーザージャーニーマップ:** 製品・サービスに対するユーザーの相互作用的なジャーニーを順次記述したもの。このツールは、ジャーニー全体を通してユーザーの目標、動機、問題点、接点を特定するのに役立ち、デザイナーはユーザーの体験を最適化するための改善点を発見することができます。 
- **競合分析:** これは競合他社の解決策（特徴、機能、プロセス、感情など）を分析・評価するプロセスです。このプロセスにより、UXデザイナーは、ユーザーの体験を最適化しつつ、市場において独自の差別化ポイントや 競合優位性を創出するために、十分な情報に基づいたデザインの意思決定を行うことができます。
- **デザイン監査:** 現在の製品・サービスの長所と短所をさまざまな方法（ヒューリスティック評価、ユーザーテストなど）に基づいて評価・分析することで、形式、機能、ユーザー体験の面で向上と調整を図るプロセスです。

### ステージ2: デザイン

デザインステージは、UXデザイナーとUIデザイナーが密接に協力して、製品を生かす魔法を創り出す最も重要な段階です。このステージでは、お客様の役割は方向づけからフォローとフィードバックの提供へシフトします。Lollypopのデザインステージでは、デザイン思考プロセスの最後の3つのステップを行います。

#### C. アイデアを出す

アイデア出しステージでは、できるだけ多くのアイデアを出すために、ブレーンストーミングやアイデア出しワークショップなどの手法が用いられる。発見のステージで、デザイン上の問題に対して真に革新的で効果的な解決策を見出す可能性を最大化するためには、フィルターにかけたり判断したりせずに、すべての情報・データを収集する必要があります。デザインチームからの成果物には、以下のような項目があります 

- **機能一覧と優先順位付け:** 重要性と必要性によってプラットフォームの機能をリストアップし、ランク付けるプロセスで、どの機能を最初のリリースに含め、どの機能を後のリリースに遅らせるべきかをデザイナーが判断するのに役立てます。
- **ユーザーフロー：** ユーザーがWebサイトやアプリを使用し始めてから、特定の目標を達成するまでに行う行動や タスクを順序立てて視覚的に記述したダイアグラムです。
- **タスクフロー:** 特定のタスクを完了するためのユーザーの行動を、ユーザーフローのようなサブブランチを含まない、直線的なシーケンスで詳細に記述したダイアグラムです。
- **情報建築:** 論理的に整理され、ユーザーが簡単に情報を見つけ、アクセスし、効果的に利用できるように設計された情報システムです。IAには以下の項目が含まれています。サイトマップ（Sitemap） – ページ間の構造とリンクを記述したマップ；分類法（Taxonomy） – コンテンツや情報をグループ、カテゴリー、タグに分類するプロセス； ナビゲーション（Navigation） – メニュー、ナビゲーションボタン、ツールバー、およびその他のリンク；コンテキストヘルプ（Contextual Help）： 問題発生時にユーザーをガイドするドキュメント； Web サイト・アプリの検索・コンテンツボタン。
- **デザインの方向性:** デザイン指向の文書で、以下の項目が含まれます。ムードボード（Moodboard） – 閲覧者に特定の感情を呼び起こすために、同じインターフェイス（デジタル、印刷物など）上で特定のアイデアに基づいたグラフィック要素、色、書体、シンボルのセット；ビジュアルディレクション（Visual direction） – デザインの全体的な外観と感覚を定義するガイドラインのセット。 通常は、色、タイポグラフィ、イメージ、その他のデザイン要素の使用に関する情報や、レイアウト、構成、その他のデザイン面に関するガイドラインが含まれる。

#### D. プロトタイプ 

本ステップの目的は、テストや評価が可能な最終的な製品やサービスの暫定版を作成することです。デザイン成果物には以下のような項目があります。

- **ワイヤーフレーム:** ワイヤーフレームは一般的に、ボックスホルダーの形式で白黒のシンプルなスケッチであり、ボタン、テキスト、画像など、ページ上のさまざまな要素の基本的なレイアウトと機能を示します。ワイヤーフレームは、デザイナーがより詳細なデザインに移る前に、様々なデザインコンセプトを素早くテストし、反復するのに役立ちます。
- **プルーフ・オブ・コンセプト（POC）:** お客様に提案されたデザインの実行可能性と潜在性を見せるために、主要なデザイン特徴と機能 を含む新しいUI/UXデザインの小規模なビジュアルまたはインタラクティブな デモンストレーションです。これにより、クライアントはより理解を深め、早期にフィードバックを提供することができます。性質やプロジェクトの範囲に応じて、デザイナーはPOCの様々な形式（プロトタイプ、モックアップ、ダイアグラム、プレゼンテーションなど）を通じてアイデアを提示することができますが、その中でもプロトタイプは、テスト用の製品バージョンを提供し、クライアントが直接やり取りして改善点を探ることができるため、最も好まれる形式です。 
- **UIスタイルガイド:** 異なるプラットフォームやデバイス間での一貫性を確保するために、関係者（UIデザイナー、開発チーム、マーケティングなど）に提供されるルールと標準のセットです。これには色、フォント、幅と間隔、レイアウト、視覚効果、アイコンなどのガイドラインが含まれる。

#### E. テスト 

高忠実度のプロトタイプが完成したら、ビルドステージに移行する前に、デザインチームはその機能性と利用性をテストし、ユーザーや ステークホルダーからのフィードバックを収集します。以下のようなテスト方法が使用されます。

- **A/Bテスト：**製品やサービスの2つのバージョンを比較し、どちらがより良いパフォーマンスをするかを判断する方法です。これには、ユーザーを2つのグループのいずれかにランダムに割り当て、各グループに異なるバージョンの製品やサービスを提示することが含まれます。そして、各々のバージョンのパフォーマンが測定され、どちらがより効果的かを判断するために比較される。
- **利用性テスト:** 参加者を募集し、一連のタスクを完了してもらい、その経験についてフィードバックを得てもらうことで、ユーザビリティの問題を特定する方法。製品と参加者の相互作用が観察、記録、分析され、改善すべき領域が特定されます。

Lollypopのデザイナーはデザインステージで上記の様々なタスクを実施する必要がありますが、実際のプロジェクトでは、コスト削減や市場投入までの時間短縮を求めるお客様のご要望にお応えするため、一部の活動が省略されることがあります！

### ステージ3：ビルド

この最終ステージでは、デザインチームは情報アーキテクチャ、プロトタイプ、UIスタイルガイドなどの主要な設計書を開発者に提供し、製品開発フェーズを開始します。資料には、設計要素（ブロックサイズ、要素間隔、相互作用するボタン動作など）に関する詳細な説明を含むUI/UX設計注釈が含まれる場合があることに注意してください。

これらの資料が手元にあれば、開発者は開発作業を正確に実施するために必要なすべての情報を得ることができます。 

- **フロントエンド開発：** プロジェクトに最適な技術（MEANスタック、フラッター、ネイティブOS）の組み合わせの実装します。
- **バックエンド開発：** 最適なプログラミング言語と技術を使用して、データベースの設計、APIの構築、サービスの統合、ロジックの処理、計算を行い、アプリケーションが適切に機能するようにします。
- **品質管理（QC)：** 品質基準を満たすために、品質チェックを行い、既存の不具合や不正確な点を修正します。

すべてのデザイン要素が現実に機能し、ユーザーの期待を満たすためには、このステージでデザイナーと開発者の協力や 連絡が極めて重要であることにご留意下さい。

## 行動におけるデザインプロセス： Vodafone Ideaのケーススタディ

### 1.チャレンジ
2019年、Lollypopは、インドで3億3,000万以上のユーザーを抱える最大の通信サービスプロバイダーであるVodafone Idea（Vi）のデジタルブランディング全体を刷新するという課題に挑戦しました。この企業は、世界的な2つのブランド、VodafoneとIdeaの合併から生まれました。特に、Lollypopは直感的なモバイルアプリケーション、メール、頑強なウェブサイトを含むすべてのデジタルタッチポイントのデザインを担当しました。これにより、両ブランドの既存のアプリからのユーザーのシームレスな移行が可能となりました。

通信市場の不確実で不安定な性質と、その独自の複雑さにより、シームレスなデジタルトランジションを理解し、作成することはLollypop Design Studio にとって難しい課題でした。どんなタッチポイントでの悪い経験も顧客の離脱を引き起こし、それによってビジネスの損失につながる可能性があります!

### 2.プロセス

#### ステップ1：調査

最初のフェーズでは、ロリポップのUXリサーチャーがお客様とワークショップを行いながら、各アプリの使用性のスコアを導き出すために、ユーザーのペインポイント、期待、モチベーションを理解しました。さらに、市場上のユーザレビューも徹底的に調査しました。ほとんどのアプリは時代遅れの設計言語を持っており、体験も見直す必要がありました。

その後、ユーザーの個人的特徴を特定し、ユーザーに最適なジャーニーを作成しました。ユーザーのために、リチャージ、請求書、残高チェックなどの直感的なワークフローを定義し、顧客獲得とエンゲージメントを高めるための、これまでにないさまざまなイニシアチブを提案いたしました。

#### ステップ2：デザイン

LollypopのUIデザイナーは、新しいブランドガイドラインに合わせてデザインシステムを更新することで、アプリに新鮮な印象を与えました。 すべての画面でユーザーに行動を促し、より高いエンゲージメントにつながることを確保するために、私たちはVodafoneの大胆さとIdeaの遊び心を取り入れました。 

アイコンやアートワークなどの要素は全体的に同期しており、赤と黄色のバランスが両方のブランドの統合を際立たせている。

![UIUX Design Step 2 Define.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3671938/47cbf13f-341a-c090-e24d-2301f07954d0.png)


#### ステップ3：ビルド

このフェーズでは、新しくデザインされたユーザーインターフェイスとユーザー体験を実現するために、Lollypopのデザイナーと開発者が協力しました。デザインの実装に必要なドキュメント、例えばデザイン注釈や引き渡し資料などは、開発者に渡されます。

さらに、アプリにバグやグリッチがないことを確認するために厳格なテストが行われました。Lollypopのチームはまた、アプリをさまざまなデバイスやプラットフォームでテストし、意図した通りに機能していることを確認するために繰り返し作業を行いました。

![UIUX Design Step 4 Build.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3671938/e715cecd-c3d1-00be-361e-556da7a0be93.png)


### 3.結果

Lollypopは、VodafoneとIdeaの特性を考慮しつつ、それらの使用パターンに急激な変化をもたらさない新しいシームレスなエクスペリエンスを設計しました。このプロジェクトは驚異的な結果を達成しました。
- 3億人以上の顧客にサービス提供
- 6000万以上のダウンロード
- 150万の請求書支払い
- 350万のリチャージ
- 7500万人の総訪問者
- 4.0の平均評価
- UI/UXデザインと影響に対する国際的な賞

Vodafoneの事例研究を通じて達成された結果は、Lollypopが何百万人ものユーザーに対応するデジタルエクスペリエンスを提供する専門知識と能力を示しています。この事例以外にも、読者は彼らのウェブサイトを通じて他のLollypopプロジェクトについてもっと学ぶことができます。

![Vi portfolio.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3671938/50f0e753-e4c5-edc9-5e1c-c97c482a0cdf.png)


## 最後の考え

一般的に、UXデザイナーとUIデザイナーは、ユーザーの要望を満たすだけでなく、ビジネスにも良い影響を与える製品を作るために、全てのデザインプロセスを通じて密接に協力することが必要です。 

しかし、日本市場の多くの企業は 、これら全てを「プロダクトデザイン」と呼ばれる1つの部門にまとめることを選択します。その理由は、プロジェクトが通常は小規模で行われ、UXやUI作業にそれほど専門性を必要としないからです。これらの役割を組み合わせることで、より一貫性のある設計プロセスが実現され、その結果、ワークフローがより効率的になり、コミュニケーションが改善され、最終的にはより良い最終製品が得られます。しかし、各分野がもたらす独自の価値を認識し、デザインプロセスにおいて両方の側面に適切な注意が払われるようにすることが重要です。

現在、実現したい革新的なアイデアを持っているか、または最新のデザイントレンドで製品を新たなレベルに引き上げる予定ですか？私たちのUXの専門家と話してみましょう!日本のトップUI/UXデザインスタジオとして、私たちはグローバルな経験を持つ強力なローカルチームを擁しています。日本アメリカ、ベトナムなど、どこにいても、UXの研究方法論とデザインプロセスに精通し、地元の味を加えながら、ターゲット市場でビジネスを活用するお手伝いをする準備ができています。一緒に素晴らしい製品を作り上げましょう！! 

もっと見たいかもしれません:

https://lollypop.design/blog/2024/january/ui-ux%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%82%B1%E3%83%BC%E3%82%B9%E3%82%B9%E3%82%BF%E3%83%87%E3%82%A3%E3%81%AB%E3%82%88%E3%82%8B%E5%AE%9A%E7%BE%A9%E3%81%A8%E3%83%87%E3%82%B6%E3%82%A4/