UX(ユーザーエクスペリエンス)デザインとは？初心者向けに原則とプロセスを解説
- Miyuki Shimose
- 2024年10月27日
- 読了時間: 31分
更新日：5 日前
まずはじめに：ホームページを作成 →｜Web デザインツール →
UX デザインとは「ユーザーエクスペリエンスデザイン」の略で、製品やサービスを通して、使う人の「体験」を設計することを意味します。「このアプリ、使いやすい！」「このサイト、わかりやすい！」といった、いわば「使い心地」をデザインするための技術やプロセスだと言えるでしょう。
現代において、ユーザーは商品やサービスを利用するだけでなく、心地よさやなど総合的な満足度を求めています。使う人に寄り添った、UX デザインを設計することが大切です。今回は UX デザインに関する疑問や、混同されやすい「UI」「UX」の違い、そして発展し続ける UX デザインの原則に踏み込んでいきます。ぜひ最後まで読んでみてください。
目次
＼Wix なら思い通りのデザインをノーコードで実現／
UX デザインとは？
UXデザインとは、製品やサービスを使用する際の「ユーザー体験全体」をデザインするプロセスのことです。その範囲は、製品を知る段階から使用後の評価まで、すべてを含みます。
この概念は、1990年代に『The Design of Everyday Things』の著者であるドン・ノーマン（Don Norman）によって提唱されました。彼は次のように述べています。
「プロダクトとは、単なる商品や製品ではない。それは、まとまりのある経験の集合体だ。最初の意図から最終的な振り返りまで、最初の使用から、サービス、メンテナンスまで、製品やサービスのすべての段階を通して考えてみてほしい。UX デザイナーとして それらすべてをシームレスに連動させることが大切なんだ。」ー Don Norman
UX デザインの目的
「ヒューマンファースト」の考え方に基づき、ユーザーが製品を使うときに、その商品を認知する段階から、使用後の影響までより良い体験をサポートすることを重視したデザイン分野のことを UX デザインと呼びます。
UX デザインを通じて、ターゲットとする顧客に最初から最後まで満足してもらえるように、戦略的にデザインを開発し改善することが UX デザインの究極の目標です。
UXデザインとUIデザインの違い
UX（ユーザーエクスペリエンス）とUI（ユーザーインターフェイス）はよく混同されますが、実は全く異なる分野です。ここでは、両者の違いについてわかりやすく解説します。
UIデザインとは？
UI（ユーザーインターフェイス）デザインは、製品の「視覚的なデザイン」に焦点を当てた分野です。
例えば以下の要素がUIデザインに該当します。
• アプリやウェブサイトのボタンやアイコン
• メニューやフォント
• 色使いと全体のレイアウト
UI デザインは、ユーザーにとってわかりやすく、使いやすいインターフェイスを作ることを目的としています。
UXデザインとの関係
UI デザインは、UX デザインの一部といえます。UX が「全体の体験」をデザインするのに対し、UI はその体験を視覚的に形にする役割を担います。
たとえば、UX/UI デザイナーのペアが、ある Web デザインのプロジェクトに関わっているとしましょう。UX デザイナーはサイト全体のフローと機能に焦点を当て、プロダクトデザイナー、アナリスト、ユーザー、マーケティング担当者と相談しながら、サイトをスムーズに閲覧するために必要な機能を洗い出し、その設計を UI デザイナーに引き継ぎます。
その後、UI デザイナーが画像の大きさ、コンテンツの配置、テキストの量など、理想の状態を視覚的に実現するために必要な判断を下します。UI デザイナーは一般的に、「ユーザーにとって最適な Web サイトのレイアウトとは」「ホームページに載せるべき情報量はどのくらいか」「インターフェースのビジュアルは全体として魅力的か」といった質問の答えを突き詰めながら理想のデザインを組み立てます。
次は、ユーザーが使いやすいと感じられる、Web デザインとはなんなのか、一緒に学んでいきましょう。UI UX デザイナーとしてのキャリアに興味がある人、UI UX デザインに優れたホームページを作成したい人は注目です。
優れた UX デザインの 7 つの原則
どのような品質が優れたユーザーエクスペリエンスに貢献するのでしょうか。UXデザインにおいて重要な基準として、ピーター・モービル（Peter Morville）氏によって提唱された、UX ガイドライン「UXハニカム」モデルによる7つの項目が含まれます。
1. 役に立つ（Useful）
サイトや製品がユーザーのニーズに応えられているか。
2. 使いやすい（Usable）
直感的に操作でき、スムーズに目的を達成できるか。
3. 探しやすい（Findable）
必要な情報に簡単にアクセスできるか。
4. 信頼できる（Credible）
情報が正確で、ブランドとして信頼される内容か。
5. 好ましい（Desirable）
魅力的なデザインで、ユーザーにポジティブな感情を与えられるか。
6. アクセシブル（Accessible）
すべての人が利用しやすい設計になっているか。
7. 価値がある（Valuable）
ユーザーにとって価値ある体験を提供しているか。
1. 役に立つ（Useful）
あなたがある製品や Web サイトを所有しているとします。果たしてそれらは目的にかなっていますか？優れた UX デザインを評価する最初の指標は、最終製品がターゲットユーザーに対する解決策を提示しているかどうかです。明確な用途がなければ、目的志向の製品で溢れる市場において成功することはありません。
何が役に立つか立たないかは、見る人によっても判断が分かれるところです。時には、美的感覚や喜びなど、実用的でなく、他人にとっても明白でない特定の価値を満たす製品もあります。たとえば、フロントエンド開発者のタナ―・ヴィラレッテ（Tanner Villarette）氏がリリースしたモバイルアプリは、iPhone にインストールすると 2014 年当時のクラシックな iPod touch のインターフェースを表示し、操作することができるようになるというものです。
Instagram などでも「#throwback（懐かしい振り返り）」といったハッシュタグが人気であるように、このアプリは実用的な意義はほとんどないにしても、その美学を重視するノスタルジーに駆られたユーザーにはポジティブな体験を提供します。
Web デザインへの取り入れ方：有用性
役に立つ程度、つまり「有用性」とは、そのサイトがユーザーの購買や情報収集、講座の申し込みなど、特定の目的の達成に役立つことをいいます。Web サイトを設計する際にはこれに注意する必要があります。
それだけでなく、サイトデザインの各要素においても有用性が評価されなければなりません。たとえば、ネットショップを閲覧し、ある商品についての質問が出てきたとします。この場合、ホームページのライブチャット機能は回答を得るための完璧なソリューションのように見えます。あなたはチャットでメッセージを送信し、待ちますが、最終的にはチャット機能がそもそも有効化されていなかったということに気づきます。つまり、このデザインパーツは余分であり、ユーザーに誤った期待を抱かせてしまうことになるのです。これでは、体験を高めるどころか、サイトのユーザーエクスペリエンスを低下させてしまいます。
2. 使いやすい（Usable）
UX デザインで成功すれば、ユーザーはサイトを通じて直感的、効率的、かつスムーズに最終目標に到達することができます。ユーザビリティが高くなくても商品はその目的を果たすことができますが、市場で成功する可能性は低くなります。しかし、ユーザーにとって日々の作業をより簡単に、より効率的にする製品であれば、確実に今後の売上が望めるでしょう。
Web デザインへの取り入れ方：ユーザビリティ
ユーザビリティ（使いやすさ）の高い Web サイトとは、ユーザーがすばやく効率的に目的を達成できるサイトのことを指します。たとえば、あなたがオンラインフィットネスのサイトを今開いているとします。訪れた理由としては、「講師やクラスの内容についてもっと知りたい」、最終的には「クラスに申し込む」といったことが挙げられるでしょう。
ここで、クラスを予約しようとするときに遭遇しうる 2 つの展開を考えてみます。まず、登録フォームの場所が分からずにサイト中を探し回る必要がある場合。やっと見つけたフォームに個人情報を入力し送信した後、インストラクターがあなたの登録を確認してメールを送ってくるのを待つ必要があります。もうひとつは、Web サイトのヘッダーに「今すぐ予約」という目立つボタンがある場合。このボタンからすぐにオンラインの予約カレンダーにアクセスできます。希望のクラスを選び、オンラインで支払いを済ませると、すぐにそのクラスへの申し込みが完了した旨の確認メールが届きます。
どちらのシナリオも、ユーザーを A 地点から B 地点に移動させるという意味では技術的に「使える」ものですが、ユーザーエクスペリエンスのレベルには明確な違いがあります。一方は使いやすく、シームレスで満足のいくものですが、もう一方は多くのステップがある上に待ち時間も長いため、不満を感じるユーザーも少なからずいると考えられます。
3. 探しやすい（Findable）
ターゲットとするユーザーが製品を見つけられなければ、その製品はどれほど役に立つのでしょう？UX でいう「探しやすさ」とは、ユーザーが必要なときに製品を見つけ、アクセスできるようにすることを意味します。Web サイトのようなデジタル製品の場合は、求めているコンテンツを簡単に見つけられることがとても重要です。
Web デザインへの取り入れ方：探しやすさ
UX に優れた Web サイトを作るための基準のひとつは、ユーザーが見たい Web ページを確実に識別できるようにすることです。そのためには、サイトのどの部分が訪問者にとって最も重要であるかを予測し、そのページを探しやすい便利な場所に表示する必要があります。
前述の Wix UX デザイナー、シャニは、「訪問者がページを開いてから数秒で、サイトに求める目的は何なのか、また必要なコンテンツはどこにあるのかを理解してもらう必要がある」と語ります。また、「そのためには、優れたデザインとコンテンツの整理がポイントになります。また、サイト上が混雑しすぎないように注意が必要です」とも述べています。
たとえば、あなたが飲食店のホームページを開いているとします。このサイトでは「オンラインでデリバリーを便利に注文できる」ことを宣伝しています。メニューが表示され、あなたは食べたいものを決めましたが、ここでひとつだけ（大きな）問題が発生します。ホームページを閲覧し、サイト内を検索しても、どこでどのように注文すればいいのかがわからないのです。このようなサイトでは、料理を注文するという目的を達成するために必要なものが見つからないため、せっかくの訪問者を落胆させてしまうことになります。
4. 信頼できる（Credible）
信頼の基盤は、ユーザーに誠実な姿勢をみせることと、ブランドの評判に応えることに尽きます。これは、ターゲットとなるユーザーの感情を考えると特に重要です。広告や口コミから、ブランドに相応の品質や発見を期待していたユーザーは、約束された体験が与えられないと「騙された」と感じてしまいます。一方、信頼性を確立しているブランドは、自社製品を信頼してくれる長期的なユーザーを獲得することができます。そして、その関係が新たなロイヤルカスタマーへと広がっていくことでしょう。
Web サイトや製品が一発でうまくいかないことはよくありますが、そのために信頼性を犠牲にする必要はありません。ユーザーの不満や要望に耳を傾け、それに応えることで、ブランドはユーザーから高い評価を受けることができるのです。
前述のシャニは、「がっかりするユーザーは必ずいますし、製品をリリースすれば改善すべき点が出てくることは明らかです」と話します。そして、「でも、一番大切なのは、ユーザーの声に耳を傾けて、その声に耳を傾けているという実感を与えることだと思うんです。たとえ今、彼らが望む機能がなかったとしても、耳を傾けていることを知らせるのは良いことです」と語っています。
Web デザインへの取り入れ方：信頼性
ブランディングの強化、顧客が商品やサービスを購入するのに便利な場所の提供、オンラインプレゼンスの構築など、企業が Web サイトを作成する理由はさまざまです。どのような目的であれ、Web サイトを持つことでブランドを確立し、顧客にさらなる価値を提供することができます。
信頼できる Web サイトの定義としては、頻繁に更新されていること、きちんと機能すること、ブランドやビジネスのイメージを忠実に表現していることなどが挙げられます。たとえば、あるネットショップで全品 20％ オフの春のセールを告知しているとします。商品を選んでレジに進み、オンラインで支払いを済ませると、セールが終了していたため正規価格が請求されていることに気づきます。このような体験は、「サイトのコンテンツが信頼できない」「情報が古い」といった理由から、ユーザーにそのブランドに対するネガティブな印象を与えることになります。
5. 好ましい（Desirable）
ブランドとターゲットユーザーの間で美的感覚を共有し、感情的なつながりを築き上げることで、新製品やイベント、その他のサービスや商品に対する欲求感情が生まれます。ブランドがユーザーの期待に応える限り、これはユーザーエクスペリエンスを高めるための手段として最適です。最終的には商品を通じた興奮の波をユーザー間で広げることができるからです。
また、商品やブランドに対する欲求を生み出すことで、その商品を所有したり、利用したりしたユーザーは自分の体験を友人に語ったり、商品を見せたりする可能性が高くなるというメリットもあります。これは、その商品を試したいと思う新しいオーディエンスへの波及効果につながります。
Web デザインへの取り入れ方：好感度
商品を魅力的なものにするためには、一貫したブランディングが重要です。ロゴを作成し、ブランドカラーを決め、魅力的な広告コピーを書くことで、市場におけるブランドの影響力を強めることができます。これらの要素によって、ターゲットとなる消費者の間での認知度と信頼性が高まります。
Web デザインの場合は、Web サイト上のすべての要素がブランドイメージに沿ったものでなければいけません。たとえば、せっかくサイトがあってもブランドロゴやビジネス名が含まれていなかったり、ブランドカラーと異なる色やメッセージを使っているとユーザーを混乱させてしまいます。サイトのデザインが商品に直接影響を与えるわけではありませんが、このようなサイトを見たユーザーは、なじみのあるブランドを求めてサイトを離脱してしまう可能性が高いといえます。
6. アクセシブル（Accessible）
アクセシビリティとは、身体的な制約を持つユーザーがサイトや製品を使用する上で直面する障壁を取り除くことを意味します。生まれ持った能力に関わらずすべての人が使用できる製品、アプリ、Web サイトなどを設計し、不自由を感じることなく最終的な目標を達成できるようにするための施策などが含まれます。
ユーザーエクスペリエンスの中でもこのような側面は見落とされがちですが、アクセシビリティの高い製品を求める人々へとターゲット市場を拡大することは、ビジネスにとっても大きな利益をもたらします。また、アクセシビリティの向上を図ることで、Web サイトや製品がより使いやすくなるというメリットもあります。読みやすさや理解しやすさを念頭に入れたタイポグラフィデザインなどがその例です。
Web デザインへの取り入れ方：アクセシビリティ
ウェブアクセシビリティを高めるためには、色のコントラスト、フォントサイズ、代替テキストなど、多くの重要な点を細部まで考慮する必要があります。アクセシビリティの基本要件は地域によっても異なるため、Wix のアクセシビリティウィザードのようなツールを使って、自社のサイトがその地域の最も基本的なアクセシビリティ要件を満たしていることを確認することが重要です。また、読み上げツールが使用できるように、Web フォントを使用することが重要です。
アクセシビリティには責任が伴いますが、これを遵守することで企業はメリットを得ることができます。アクセシビリティの高さは、ブランド認知度とパフォーマンスの向上に加えて、法的リスクを最小化するという意味でも役立つためです。
7. 価値がある（Valuable）
ブランドや商品の価値を創造することは、ユーザーエクスペリエンスを形作る中でも特に重要な要素です。そのため、UX の 7 原則ではこの「価値」が一番中央に位置しており、これまで挙げてきた 6 つの要素が満たされてはじめて価値あるユーザー体験を創造することができると考えられています。
ユーザーはそれぞれ独自の視点を持っているため、ここで説明した内容の捉え方は個人によって異なることが想定されます。あるユーザーにとっては、特定の UX 要素がより価値を持つかもしれません。上記のような品質を満たすことで、ビジネスや製品をターゲットオーディエンスに価値あるものとしてアピールできる可能性が高まります。最終的にブランドがユーザーを満足させることができれば、さまざまな商品やサービスが混在する市場で成功を手にすることができるでしょう。
UXデザイン設計プロセスの6ステップ
UX デザインにはさまざまな側面があります。ここで重要なのは、完璧なユーザーエクスペリエンスを形成するためには全体として流動的なワークフローが必要であり、厳格な一連のステップに従うことはほとんどないという点です。たとえば、製品がアイデアベースなのかすでに存在しているのかに応じて、異なる段階からデザインを始めることもあるからです。
個々のアプローチがどのようなものであれ、UX プロセスには通常、ユーザーと製品についてより良く理解するための以下のようなタスクが含まれます。
段階 1：アイデア出しと定義
UX デザインの第一段階は、製品、ユーザー、ブランドを完全に理解し、コンセプトとしてそれらを調和させることです。多くのブランドは、マーケティングの観点から製品の成功を重視する傾向がありますが、UX デザイナーの戦略はユーザーをサポートすると同時に、ビジネスのニーズも満たすことに重点を置いています。
このアイデアと定義付けのフェーズでは、製品のあらゆる側面がどのように実現されるかを理解し、UX デザインプロセスの残りの段階につなげていくことを目標としています。そのため、UX デザイナー、UI デザイナー、マーケティング担当者、その他関係者など、製品開発に関わるすべての人が時間をかけてブレーンストーミングを行い、自分たちの目指すものを形にして定義します。一般的な議題は、「解決したい問題は何か」「どんな問題があるのか」「この製品を使うのは誰なのか」「KPI は何か」などです。
UX プロジェクトの最終的な成果物が物理的な製品であれ、アプリや Web サイトであれ、最初の重要なステップはまずコンセプトと目標を微調整することです。そのためには、リサーチ、ブレーンストーミング、戦略的思考、プランニングなどを通じて強固な基盤を築いた上で、開発、設計、マーケティングへと具体的なステップを踏んでいく必要があります。
この段階で最も効果的な方法としては次のようなものがあります。
・ステークホルダーインタビュー
ステークホルダーインタビュー（関係者へのインタビュー）は、UX デザインプロセスの初期段階からさまざまな人の意見を取り入れてインサイトを発見するための最良の方法のひとつです。主に、プロジェクトの成果に投資する専門家から貴重な知識を引き出すことを目的としています。
UX デザイナーがどのステークホルダーにインタビューを行うかは、まずデザイナーが最初にどのようなガイダンスを求めているかによって決まります。一般的には、財務的な意思決定を下す人や、プロジェクトの組織にとって重要な人と話をすることが推奨されます。
UX デザイナーはこのインタビューを通じてターゲットユーザー、各チームメンバーの役割、包括的な目標、KPI といった要素を具体化し、プロジェクトの方向性を明確にします。
・コンセプトスケッチ
コンセプトスケッチは、早い段階でアイデアを生み出すために有効な方法です。このプロセスでは、プロセスの開始時にデザインチームのメンバーと相談して意見を募ります。 参加者はそれぞれ自分のアイデアをチームに発表し、その背後にある意図を共有する必要があります。UX リーダーは通常、ここで集まった大枠のコンセプトをもとにデザインプロセスを開始します。
・キックオフミーティング
ユーザーエクスペリエンスのデザインは共同作業として行うことができます（むしろそうあるべきです）。そのため、プロジェクトの目標をさまざまな角度から定義することが常に重要です。ひとつのプロジェクトに多くの人が関わる場合、グループワークショップやキックオフミーティングを実施することで関係者の足並みを揃えることができます。キックオフミーティングは通常 UX リーダーが主催し、ビジネス、マーケティング、デザイン、ユーザーなど、プロジェクトのさまざまな側面を代表するプレーヤーが一堂に会する形で行われます。
この場では製品の目的と目標、理想のユーザー像、デザインタスク、リサーチの目標、成功の評価方法などを定義します。また、ミーティングはチームメンバーが懸念を表明しやすい雰囲気のもとで進行する必要があります。
UX チームにとって、キックオフミーティングは最終的な意思決定者の把握、関係者全員の認識合わせ、プロジェクト開始にあたってのモチベーションアップという意味でも役立ちます。
段階 2：調査（リサーチ）
UX デザインプロジェクトを開始すると、ターゲットユーザーや業界の市場について大きな疑問が生じることがよくあります。そのため、通常、次の段階としてリサーチが行われます。リサーチによって定性的および定量的な情報を収集することで、UX デザイナーはプロジェクトの範囲を理解し、賢明な判断を下すことができます。
以下では、UX リサーチの実施に最適な方法をいくつかご紹介します。
・ユーザー調査
UX はユーザー中心設計を軸として進むため、相応の時間をかけてエンドユーザーの行動、欲求、能力、ニーズを深く理解する必要があります。これらのインサイトをもとに、UX デザイナーはユーザーと製品の関係を理解し、デザインプロセス全体を通じてここからの学びを生かすことができます。
ユーザー調査を行うためのアプローチは多岐にわたりますが、最も一般的な方法としては次のようなものがあります。
ユーザーインタビュー：ターゲットユーザーに関するデータを収集し、彼らの経験を理解するためには確実な方法です。UX デザイナーがユーザーインタビューのための質問項目を用意し、ターゲットユーザーを代表する人物と 1 対 1 で話をします。ユーザーの行動、ニーズ、欲求、ペインポイントに関するデータを明らかにすること、または製品に関するフィードバックを得ることを目的としています。
フォーカスグループ：UX デザイナーがファシリテーターとなって行う、製品に関するグループディスカッションです。フィードバックを得ることを目的としています。この方法のメリットは、有機的な会話を通じて一度に複数の視点が得られることです。
ユーザーアンケート：ターゲットユーザーの代表者に、製品に関連する戦略的な質問を含むアンケートを送付することです。一度に多くのユーザーにアンケートを送ることができるため、ユーザーインサイトの獲得や測定可能なデータの収集に便利な方法です。
・市場調査
市場調査は、ユーザーの直接的な体験に焦点を当てるのではなく、ブランドが競合他社や製品に対する需要、業界内の標準や傾向を理解するのに役立ちます。これらのインサイトは、ユーザー調査から得られたデータとともに、特定の商品のブランディング、マーケティング、販売の意思決定に反映させることができます。
・ユーザビリティテスト
製品の簡易版（ローファイ）や、似たような機能を持つ既存の製品がある場合は、対象となるユーザーに試用してもらい、その体験について質問をするのがとても効果的です。これはユーザビリティテストと呼ばれ、ユーザーが製品にどのように反応するかを直接検証することができます。
主な検証項目は、ユーザーがタスクをうまくこなせるかどうか、製品を楽しんで使っているかどうか、ニーズを十分に満たしているかどうか、もう一度使いたいかどうか、などです。ここで問題が発生した場合は、ユーザーの不満や課題を回避するための解決策を見つけるチャンスだと捉えましょう。
段階 3：分析
調査で得られたデータから、UX デザイナーはオーディエンスや市場に関する新しい知識を得ることができます。これらの情報を深く分析すれば、製品に関する不確実性を払拭し、仮定していたことをより現実に近づけることができるでしょう。ターゲットユーザーをサポートする方法をより深く理解した上で、ここで得たインサイトをもとにしてすべてを網羅するユーザーエクスペリエンスを提供するための方法を導き出すことが大切です。
調査で得られた結果を理解し、製品の目標を調整するために、UX デザイナーは通常以下のような要素を使用します。
・ユーザーペルソナ
UX デザインのプロセスにおいて、ユーザーペルソナはターゲットユーザーを可視化し、製品や体験をより正確にデザインするためのアプローチとして役立ちます。ペルソナとは、UX デザイナーがリサーチに基づいて作成した架空の人物像のことです。実際のターゲットユーザーの範囲を表しているため、デザインプロセス全体で常に頭に置いておく必要があります。
ユーザーペルソナには架空の名前と画像に加えて、年齢、性別、国籍など、ユーザー調査から得た基本的な人口統計学的情報を適用します。さらに、これらのペルソナに、消費習慣、嗜好、ペインポイント、SNS 利用状況などの行動を割り当てます。
・ユーザージャーニーマップ
ユーザージャーニーマップは、ターゲットユーザーが製品のデザインをどのように体験するかを段階的にまとめたものです。通常、ユーザーが製品を使用する際のすべてのタッチポイントを特定の順序でリストアップし、タイムラインとして視覚化します。
ユーザージャーニーを作成することで、UX デザイナーは製品をユーザーのニーズと能力に合わせて調整し、ユーザーが意図したタスクを完了できるようにすることができます。ここではユーザーの状況を想像する、最終的な目標を達成するために必要なステップの概要を記す、各アクションの機能レベルを特定するといったアクションを行います。
段階 4：デザイン
調査と分析が終わると、いよいよデザインに入ります。ここまでで得た知識とインサイトをもとに、最終製品の構図を決めていきましょう。
UX デザインのプロセスのほとんどがそうですが、この作業は一度で終わるものではありません。ブレーンストーミングやスケッチを繰り返し、複数のキーパーソンが意見を出し合いながら進めていく必要があります。UX と UI デザイナー、ブランディングおよびマーケティング担当者、そしてプロダクトチームの他の主要なプレーヤーたちが関わります。
以下では、製品、アプリ、Web サイトのデザインを成功させるために UX プロセスで使用される信頼性の高い手法をいくつかご紹介します。
・ワイヤーフレーム
ワイヤーフレームはデジタル製品の設計図であり、通常、アプリや Web サイトのユーザーインターフェースのラフスケッチとして提示されます。必ずしも最終的な仕上がりに忠実なものではありませんが、デザインの基本的なレイアウトを考え決定し、正しく機能させるために必要な要素を定義するという点で役立ちます。
ワイヤーフレームでは色やフォント、テキストを使用しないため、この後のステップでデザイナーがユーザーインターフェースの基礎に磨きをかけ、細部の美しさを追求していくことになります。せっかく色を付けても元の構造がユーザーにとってやさしくなければ意味がないため、これは極めて重要な工程です。
驚くべきことに、ワイヤーフレームは紙とペンで描かれることが多くあります。ただ、UX デザイナーの中には、Adobe XD のようなソフトウェアを使用して、プロダクトのインターフェースを詳細まで、より正確にスケッチする人もいます。
・情報アーキテクチャ
情報アーキテクチャとは、ユーザーにとって論理的かつ直感的な方法でコンテンツを整理するプロセスのことです。文章や画像、CTA（行動喚起）、オンラインフォームなど、さまざまな情報を意識的にマッピングすることで、アプリや Web サイトをナビゲートするユーザーが目的を達成するために必要なコンテンツをすばやく簡単に見つけられるようにするためのものです。
このプロセスには、各ページの情報の階層を確立することと、ユーザーがある項目から別の項目にスムーズに移動できるよう、Web サイト全体のナビゲーションを考慮することが含まれます。
UX デザイナーはまず関連するコンテンツをまとめ、親ページと子ページを視覚的に表現するサイトマップを作成します。次に、メニュー、パンくず、フィルターなどのナビゲーションシステムを作成し、最後に、どのコンテンツがどこにあるのかをユーザーに示すコンテンツラベルを作成します。
・マイクロコピー
アプリや Web サイトのインターフェース全体に使用される優れたマイクロコピーは、ユーザーを言葉で誘導し、いつ、どこで、どのように特定の行動をとればよいかを示すものです。
ユーザーエクスペリエンスは、デザインのビジュアル面だけでなく言語面でも形成されるということを忘れないでください。ニュースレターへの登録、商品の購入確認、エラーの謝罪などを伝えるテキストはユーザーとのインタラクションを生み、ブランドや商品に対するユーザーの感情を動かします。
マイクロコピーを作成する際は、簡潔、明確、親切で、Web サイトやアプリに付随する全体的なブランドアイデンティティに沿ったものであることを心がけましょう。たとえば、ある場面では口語調で親しみやすい関係を築くことができますが、別の場面では、ユーザーがフォーマルかつプロらしいコミュニケーションを期待するかもしれません。
段階 5：テスト
最高のユーザーエクスペリエンスを実現するためには、正式ローンチ前の最後のステップとして Web サイトや製品のテストが欠かせません（UX の世界では「検証」とも呼ばれます）。テストは最初のリサーチとデザイン段階が完了し、デザインに忠実なサイトやアプリが使用できるようになった後に開始します。デザイナーと関係者がプロセスの現状をより正確に評価できるようにするため、必ず正しいデザインのバージョンでテストを実施しましょう。
UX デザインのこの段階に含まれる要素は次の通りです。
・プロトタイプ
プロトタイプとは、ユーザーエクスペリエンスを検証するために特別に設計された製品の初期バージョンのことです。すでに述べたように、テスト段階ではより高度かつ忠実度の高いプロトタイプを使用することが推奨されます。
・ユーザーテスト
ターゲットユーザーを中心としたユーザーの行動を観察するためのものです。この段階では、デザイナーが、ユーザーが製品を使用するときに特定の機能をどのように操作しているかを注意深く観察し記録します。ユーザーの意見を募る、アンケートを作成する、フィードバックを記録するといった手法で欠点を指摘し、全体的なユーザーエクスペリエンスを向上させることができます。
・社内テスト
デザイナー自身がプロダクトをテストするのもおすすめです。定期的に自分のデザインを使い、直接関わりを持つことで、うまくいくことといかないことをより明確に理解することができます。
段階 6：最終化、発売、一連のサイクルの繰り返し
UX デザインプロセスの最後のステップは、プロダクトのローンチです。リサーチ、デザイン、フィードバックの集大成として、最終的に完成した製品を発売するのはエキサイティングでやりがいのある瞬間でしょう。
通常、このプロセスはベータ版のリリースから始まります。これは、一般公開する前に未解決の問題を発見し解決するために、限られた人たちにリリースすることを指します。
プロダクトや Web サイトは、一度ローンチすればデザインプロセスは一旦終わりますが、作業自体はまだ完了していません。一発で完璧なデザインになることはまずないため、最高のユーザーエクスペリエンスを実現するためには、ユーザーの反応に耳を傾け、デザインを改善するためのフィードバックを得ることが重要です。優れた UX デザイナーは建設的な批評を受け入れ、ユーザーのニーズを満たすためにデザインの見直しを積極的に行っています。
優れた UI/UX デザインの Web サイト事例 5 選
さて、Web の仕事に携わっているみなさんは、今回学んだ UX デザインの知識を今後のサイト制作でどのように応用できるかを考えたいと思っていることでしょう。以下では UX に優れた美しく機能的なサイトの例を 5 つご紹介します。論理的なレイアウトの組み立て方、明確なマイクロコピー、最新の UX トレンドを取り入れた魅力的なデザインなど、ユーザーエクスペリエンスの在り方を考えさせてくれる素晴らしい例ばかりです。
01. Jung Design
デザイナーの Jung Hoeさんは、情報アーキテクチャを極めたプロ。彼のポートフォリオサイトの目的はクライアントの新規獲得であるため、訪問者の注意を引き、自分の仕事とプロとしての目標を伝えるための豊富な情報を掲載しています。
サイトでは Jungさんの履歴書、わかりやすい作品事例、お問い合わせフォームなどに簡単にアクセスできるため、ユーザーは彼のことを知り、実績を確認し、最終的にはスムーズに問い合わせを行うことができます。さらに、クールなアニメーションと鮮やかなカラーが好感度を高めるポイントになっています。
Extra & Ordinary Design は、訪問者にシームレスで楽しいオンラインショッピング体験を提供する EC サイトです。ショップを開くとユニークな形の陶器がたくさん。商品を簡単にフィルタリングし、任意の価格帯で興味のあるタイプのアイテムを絞り込むことができます。
ユーザーが商品をクリックするとその商品の詳細ページが開き、素材、価格、配送方法などの情報が表示されます。 購入する場合は、「カートに追加」をクリックし、チェックアウトに進んで決済するだけです。
03. Mikaela Rubin
Mikaela Rubinさんのサイトのユーザーエクスペリエンスは、まず魅力的なホームページのデザインから始まります。絶妙なバランスとアニメーションの利用により、サイト訪問者は迷うことなく（そして、飽きることなく）Mikaelaさんのビジュアルを駆使したストーリーテリングに夢中になることでしょう。
サービスに関する詳細を知りたいユーザーは、きれいに整頓されたトップページのコンテンツを引き続き閲覧することもできますし、サイトのヘッダーにあるメニューから見たいページへのショートカットを探すことも可能です。 さらに、ページ上部の検索バーでは、食事制限や食材、料理の種類などに応じて、特定のレシピを簡単に検索することができます。
04. Noni Ceramica
世界のインターネットトラフィックの 52％ をモバイルデバイスが占める今、UX の観点では「モバイルサイトを閲覧する際に PC と同じ範囲の機能を利用できること」が大きな意味を持つようになっています。
Noni Ceramicaさんの場合、スマホ版では凝縮されたハンバーガーメニューが表示されるため、ユーザーはコンテンツに圧倒されることなくサイトを簡単に簡単にナビゲートすることができます。また、ショップボタンを目立たせて外出先でも簡単に購入できるようにすることで、顧客満足度およびオンラインでの売上アップにつなげました。
スマホサイトをデザインする際には、レスポンシブデザインとアダプティブデザインについての比較記事もぜひ参考にしてみてください。ご自身の好みに基づいてホームページ作成ツールを選択することができます。
05. HERoines
HERoines は女性のモチベーションを高め、サポートすることを目的とした非営利団体です。そのミッションの重要性から、サイトも有益でインスピレーションを与え、組織への新たな関心と支援を生み出すデザインであることが不可欠です。
このサイトでは、パララックススクロールによって情報の連続的な流れが促進され、サイトの各セクションで訪問者に魅力的な体験を提供することができます。また、横スクロールを利用して、ユーザーのモチベーションを高めるメッセージと「今すぐ参加」「寄付」などの CTA バナーを表示させています。
また、大きなフォントとコントラストの効いた色使いで文字を読みやすくし、アクセシビリティを高めている点もポイントです。また、ブランディングを意識した配色はユーザーとの信頼関係構築にも役立っています。
まとめ
UXデザインは、単なる「見た目の良さ」だけではなく、製品やサービスの「使いやすさ」と「価値」を総合的にデザインすることが重要です。
この記事でご紹介した UX デザインプロセスを参考にして、ユーザーにとって使いやすいサイトの作成に生かしましょう。
マウスオーバー効果やパララックススクロールなど、訪問者の目を引くエフェクトも効果的に使うことで、 UX に貢献することができます。ブランドイメージにあった、理想の UX デザインが提供できるように、デザイン効果も戦略的に導入してみましょう。
＼Wix なら思い通りのデザインをノーコードで実現／
おすすめ関連記事
この記事を書いた人
下瀬 美幸（Miyuki Shimose）
Wix 公式ブログ編集者／SEO エキスパート
