tomotaka@xenon.io

UXチームの構成 – プロダクトデザインでキャリアプランを立てるには？

UXデザインのプロジェクトでは、多くの場合、それぞれが異なる機能と責任を持つ複数のUX専門家が必要とされます。UXチームの構成と各人の責任を理解することで、組織が適切な人材を採用し、UXデザイナーが希望するキャリアパスに必要なスキルセットを開発できるようになります。本記事では、企業やスタートアップ企業が製品開発に用いるさまざまなUXの役割、スキルセット、チーム構造についてお話します。また、デザインプロセスを通じてUXチームがどのように連携し、製品を成功に導くかについても見ていきましょう。

UXPinは、あらゆるUXの役割とタスクのための機能を備えた提携デザインツールです。シンプルなワイヤーフレームから複雑なHi-Fiプロトタイプまで、UXPinのコードベースのデザインツールは、UXチームが顧客に優れたユーザーエクスペリエンスを提供できるようお手伝いします。無料トライアルにサインアップしてUXPinの高度な機能をぜひお試しください。

UXの役割とスキルセットの理解

現代の製品開発チームには、デザインプロセスのさまざまな要素を担当する多くのUXスペシャリストがいます。以下は、9つのUXの役割とそのスキルセットです：

UXデザイナー
UIデザイナー
UXリサーチャー
UXアーキテクト
UXライター
コンテンツ戦略担当
UXエンジニア
DesignOps専門家
プロダクトデザイナー

UXデザイナー

UXエキスパートの多くは、 UXデザイナーとしてスタートし、リサーチ、UIデザイン、プロトタイピング、テスト、ドキュメンテーション、ハンドオフなど、小さな会社でエンドツーエンドのUXプロセスを担当します。大企業や企業の製品開発での UXデザイナーの役割は、UX、ユーザビリティ、アクセシビリティにより重点が置かれます。 UXデザイナーは、ユーザーのニーズを満たす製品を提供するために、行動、ペインポイント、感情など、人間の要素を理解するのに多くの時間を費やしています。

UIデザイナー

UIデザイナーは、製品のビジュアルデザインとインタラクションデザインに重点を置いています。製品の美しさを保ちながら、機能的でまとまりのある、つまり形と機能を確実に両立させるのが仕事です。 UIデザイナーは、ボタン、カラー、アイコン、タイポグラフィー、画像、フォーム、コンポーネント、UIのパターンなどの視覚的要素を駆使して、ユーザーインターフェースをデザインする仕事を行っており、ユーザーのニーズを満たすインターフェースの実現のために、UXリサーチとの密接な関わりが必要です。 UIデザイナーは、よくフロントエンドデベロッパーやUXエンジニアと連携して、技術的な制約の理解や、開発のための適切なドキュメントの提供をします。

UXリサーチャー

UXリサーチャーは、【ユーザー】、【競合他社】、【市場調査】の収集と分析を担当します。この3つのセグメントを全体的に理解するために、定性的・定量的リサーチの手法を用います。 UIデザイナーは、エンドユーザーとの対面インタビューやプロトタイプのユーザビリティテストを行うこともあります。また、特定の業界やターゲット層を理解するために、フィールドリサーチを行うこともあります。 UIデザイナーは、これらのデータを、ユーザーペルソナ、カスタマージャーニーマップ、共感マップなど、さまざまなUXアーティファクトにまとめ、チームの他のメンバーがユーザーを理解し、デザインの決定を導けるようにしなければいけません。また、UXチームが常に最新のインサイトを持って意思決定できるよう、リサーチの管理と更新を行うのもUIデザイナーの役割です。

UXアーキテクト

UXアーキテクトは、デジタル製品の構造、情報アーキテクチャ、およびナビゲーションを担当します。すべてのユーザーフローを理解し、リンク、画面、ナビゲーションの優先順位を適切に設定しなければいけません。 UXアーキテクトは、ヒートマップ、分析、スクリーンレコーディング、アイトラッキングなど、ナビゲーションに関するデータを分析し、ビジネスのゴールとユーザーのニーズを満たす製品のアーキテクチャをデザインするために多くの時間を費やします。 UXアーキテクトの主な成果物は、UI デザイナーやコンテンツ戦略担当が仕事の土台とするワイヤーフレームです。

UXライタ

UXライターは、UIの言語と表現に焦点を当てます。UI、フォームラベル、コンポーネント、ナビゲーション、CTA（Call To Action）など、ユーザーと接するタッチポイントに一貫性を持たせる重要な役割を担っています。 UXライターは、「エラー」、「完了」、「情報」などのシステムメッセージやメールが、ユーザーにとって明確で実行しやすい表現になっているかどうかも確認します。　　　　　　　　　　　　　　　　　　　　　　　 UXライティングは、製品ドキュメント、ポリシー、免責事項、その他の長文コンテンツにまで及びます。UXライターは必ずしもこのようなコンテンツを作成するわけではありませんが、法務やテクニカルライターなどと協力し、すべてのタッチポイントで言葉が統一され、一貫性が保たれるようにします。　

コンテンツ戦略担当

コンテンツ戦略担当の仕事は、テキスト、画像、動画などの製品のコンテンツがユーザーのニーズとビジネスの目標を確実に満たすようにすることです。また、コンテンツが常に適切であるように管理し、更新するのも彼らの仕事です。 UXのプロフェッショナルと同様に、コンテンツ戦略担当もユーザーリサーチと密接に関わり、製品のコンテンツが確実にターゲット層に適したものにすべく、ユーザーとそのニーズを理解しなければいけません。　コンテンツ戦略担当は、UXにとどまりません。マーケティング、カスタマーサポート、ビジネス、製品チームなど、複数の部門と密接に連携し、コンテンツの調達、編集、公開を行います。

UXエンジニア

UXエンジニアは、UXデザインとデザイン思考の原則を理解したフロントエンドデベロッパーであり、UXのデザインプロセスとフロントエンド開発の両方に携わるハイブリッドな役割です。 UXエンジニアは、デザインプロセスを通じてデザインチームと連携し、技術的なアドバイスやサポートを提供します。また、複雑な機能をテストするために、HTML、CSS、Javascriptを使用して忠実度の高いコードプロトタイプを開発するデザイナーをサポートします。 UXエンジニアは、UI デザイナーと協力し、デザインを機能するコードに変換します。また、最終製品がデザイン仕様に確実に合致するように、デザイナーとエンジニアの橋渡し役も担います。

DesignOps専門家

DesignOps専門家は、UXデザインの運用サイドを担います。非効率やボトルネックを排除し、UXワークフローを最適化するのが彼らの仕事であり、また、全員が団結して働けるように、チームのモチベーション向上や、企業文化の強化も行います。 DesignOpsの役割は、主に3つあります：

DesignOpsリーダー：運用ビジョンとロードマップの作成に注力するハイレベルなポジション
DPM（デザインプログラムマネージャー）：DesignOpsリーダーの戦略とロードマップを実行する責任者
デザインプロデューサー：プロジェクトレベルでチームメンバーと直接作業し、日々の管理・運営タスクを管理

無料のeBookを入手する：DesignOps 101: Guide to Design Operations.

プロダクトデザイナー

プロダクトデザイナーは、UX/UIデザイナーと似たような機能を持ちますが、ゼロからデザインするのではなく、既存の製品に携わります。製品の残りのライフサイクルで、UXを管理するのが彼らの仕事です。プロダクトデザイナーは、新しい製品体験のデザインに焦点を当て、通常、既存のデザインシステムやコンポーネントライブラリを使用してユーザーインターフェースを構築します。プロダクトデザイナーはUXを重視する一方で、新製品リリース時のビジネスバリューとROI（投資収益率）を向上させる役割も担っています。

最適なUXチーム構造とは

designops increasing collaboration group

UXデザインのチーム構造は主に3つあります：

集中型デザインチーム構造
組み込み型/分散型デザインチーム構造
柔軟なデザインチーム構造

集中型デザインチーム構造

集中型デザインチーム構造では、UXチームはUXリーダーとUXマネージャーの下で1つの場所で作業を行います。このUXチーム構造は、デザイナーが知識を共有し、お互いにフィードバックを与えることが比較的簡単な中規模組織で最も効果的です。

組み込み型/分散型デザインチーム構造

組み込み型または分散型のデザインチームは、中小企業、代理店、スタートアップ企業に最適な、部門を超えた構造で、この機能横断的なチームモデルには、UXエキスパート、デベロッパー、マーケティング担当者、プロダクトマネージャー／オーナー、プロジェクトリーダーが含まれます。

柔軟なデザインチーム構造

柔軟なデザインチーム構造は、中心型と分散型のハイブリッドモデルです。UXチームは、デザインリーダーに対してハイレベルなUX戦略を報告し、チームリーダーに対して日々のタスクを報告します。柔軟なデザインチーム構造は、企業組織やデザイン成熟度の高い企業で最も効果的です。

UXPinを使ったUXチームの連携方法

UXPinのエンドツーエンドデザインツールは、デザインプロセスを通じて、UXチーム同士、ステークホルダー、他部門との連携を可能にします。

初期段階

デザインプロセスの初期段階において、UXリサーチャーはUXPinに内蔵されたデザインライブラリや製品のデザインシステムを使ってサッとプロトタイプを作成し、ユーザーのペインポイントを他のメンバーに示すことができるようになります。

アイデア出しとLo-Fiプロトタイピング

UXチームがユーザーの問題を確定したら、アイデアを出し、プロトタイプを作成して、アイデアを検証します。UXアーキテクトは、プロトタイプの画面を作成し、それらをつなぐワイヤーフレームを構築します。 UXリサーチャーとUXデザイナーは、UXPinの【プレビューと共有】機能を使って、ユーザーフローとナビゲーションのテストを行い、ユーザーのニーズを満たしていることを確認できます。UXPinの【コメント】機能でコメントやインサイトを残し、それをUXライターやUIデザイナーなどの関連するチームメンバーに割り当てることができます。

モックアップとHi-Fiプロトタイピング

UIデザイナーは、割り当てられたコメントやその他のドキュメントを使って、色、タイポグラフィ、その他の視覚的要素を含む忠実度の高いモックアップを作成できますが、UXPinの【コンテンツとデータ】機能を使用すると、UIのデザインに集中しながら、コンポーネントにダミーデータの入力ができます。 UIデザイナーは、UXPinのインタラクション、ステート、変数、エクスプレッション、アニメーションなどのコードベースの機能を使用して、最終的な製品体験を正確に表現することができます。 UXライターは、UIの言語が製品ガイドラインに沿い、ユーザーのニーズを満たすのを確実にします。同時に、コンテンツ戦略担当者は、テスト時にダミーデータを実際のコンテンツに置き換えて、ユーザーに正確なユーザー体験を提供することができます。

ユーザーテスト

UXリサーチャーは、【プレビューと共有】を使って、プロトタイプのイテレーションをテストし、UXチームの他のメンバーとインサイトを共有して、微調整や調整を行うことができます。さらにUXPinのコメント機能を通して、ユーザビリティに関する問題の特定や、関連するチームメンバーへの割り当てができます。チームは、【プレビューと共有】リンクを介して、忠実度の高いプロトタイプをステークホルダーに提示することもでき、ステークホルダーはデザインを確認し、関連するチームメンバーにコメントを割り当てることができます。

デザインハンドオフ

UXエンジニアは、UXチームと協力して、最終的なデザインハンドオフの準備ができ、UI要素のコードへの変換や、フロントエンド開発のためにデザインシステムからスニペットを取り出したりします。 DesignOpsは、このデザインプロセス全体において、UXチームの運営上の問題や新しいチームメンバーのオンボーディングをサポートします。UXPinのコメントをチェックしてこれをバックログに追加し、チームメンバーが各タスクを完了できるようにしているのです。

UXPinを使ってプロトタイプを10倍速く作成しよう

コードベースのデザインによってUXチームの生産性を高め、より良いUXを顧客に提供する方法を探してみませんか？今すぐ無料トライアルにサインアップして、UXPinの高度な機能をぜひお試しください。

Try UXPin for free

コンバージョン率をあげるウェブデザインとは？初心者ガイド

訪問者は、ウェブサイトのデザインからあなたのビジネスに対する意見を0.05秒で形成すると言われています。例えばUX（ユーザーエクスペリエンス）が低いと、直帰率が高くなり、コンバージョン率が低下するというネガティブな感情が生まれます。

Webサイトのコンバージョン率に与えるUXデザインの影響を理解するというのは、潜在的な障害の排除やビジネス価値の形成、デザインプロジェクトにもたらす高いROI（投資収益率）の鍵になります。本記事では、Webサイトのデザインがコンバージョンに与える影響と、デザインチームがマーケティングキャンペーンを改善する方法についてお話します。

コンバージョン率の最適化について学びましょう

UXPinでプロトタイプで得られる有意義なインサイトを使い、コンバージョン率の最適化するアイデアをテストして、よりよいUXをデザインしませんか？

無料トライアルにサインアップして、コードベースのデザインにるUXワークフローの強化やWebサイトのコンバージョン率の向上、顧客へのより良い体験の提供方法をぜひご覧ください。

ウェブサイトのコンバージョン率の最適化とは

ウェブサイトのコンバージョンには、販売の成功、見込み客、フォーム入力や、その他訪問者に完了してほしいタスクが含まれ、コンバージョン率の最適化は、訪問者がこのようなタスクを完了する機会を増やすための手法です。

このコンバージョン率の最適化の多くは、ウェブデザインとUXに起因しており、UXデザイナーの仕事になります。最適化のためのデザインとは、UXチームが、ユーザーが何を必要としているのか、そしてUI（ユーザーインターフェース）はどのようにすればそのゴールへ最も早く導くことができるのかを理解しなければならないということです。

デザインがコンバージョン率に重要な理由

ウェブデザインはコンバージョン率において重要な役割を果たします。以下は、それを裏付ける統計データです：

ウェブサイト訪問者の38%は、魅力的でないコンテンツやレイアウトのウェブサイトを見ると、そのウェブサイトとの関わりをやめてしまう
訪問者の48％が、ウェブサイトのデザインが企業の信頼性を判断する一番の要因であると考える
モバイルファーストのウェブデザインを採用した企業の68％が、売上が増加したと回答している
訪問者は大抵８秒後にウェブサイトを離れてしまうため、デザイナーはユーザーのニーズを満たすのに、ユーザーインターフェースとコンテンツを優先させなければならない

第一印象の設定

ウェブサイトのデザインは、多くの場合、顧客との最初の接点と、それでブランドがどのように認識されるかということになります。美的感覚に優れたUIやエクスペリエンス、コンテンツで顧客に感銘を与えるのは、ウェブサイトのトラフィックを、収益を生む顧客に転換するための第一歩となります。

SEO対策

SEO（検索エンジン最適化）は、無料のオーガニックトラフィックを提供するため、ウェブサイトにとって不可欠です。UX デザイナーは、コンテンツ、レイアウト、および階層構造を最適化するために、検索エンジンが Web ページをクロールしてインデックスを作成する方法を理解していなければいけません。

アクセシビリティ

ウェブアクセシビリティは、SEOの要素のひとつですが、様々な人向けのウェブサイト体験の実現にも不可欠です。UXデザイナーは、弱視、色盲、視覚障がい、認知障がい、聴覚障がい、移動障がいなどのハンディキャップを考慮し、WebサイトがWCAG（ウェブコンテンツのアクセシビリティに関するガイドライン）を確実に満たしていなければいけません。

信頼感の向上

信頼は、訪問者のコンバージョン率をあげるための重要な要素であり、顧客は、お金や個人情報を渡す前に、あなたの会社やウェブサイトが信頼できるものであることを知りたいと思うものです。そこで、優れたウェブデザインは、あなたがブランドを大切にし、ビジネスを評価し、実店舗に人を迎え入れるような良いユーザー体験を与えたいと考えていることを顧客に伝えています。

ROI（投資収益率）のデザイン

デザイナーは、UXはともかく、デザインのROI（投資収益率）を高めるために、コンバージョン率をあげる重要性も認識しなければなりません。機会やコンバージョンを増やすことは、組織におけるデザインの価値を確立することにつながります。

コンバージョン率をあげるためのデザインのヒントとUIのパターン

1. CTA（Call To Action）

CTA（Call To Action）は、コンバージョン率の最適化に不可欠です。CTAは、CTAボタンやメールフォームのように、希望するアクションを起こすためのUI要素を備えた提供で、ユーザーの注意を引きます。CTAボタンは通常、その重要性を示し、エンゲージメントを促すために、カラフルで他のコンテンツよりも大きく表示されます。

2. ランディングページ

HubSpotの調査によると、”ウェブサイトにランディングページがあるビジネスほど、見込み客の発生が多い “という結果が出ていることから、デザイナーとマーケターが協力して、高品質で見込み客を生み出すランディングページをデザインするといいでしょう。

ランディングページは、通常のウェブページとは異なり、気が散るものを排除してユーザーを1つの製品またはCTAに集中させるために、ナビゲーションやリンクはすべて取り除きます。

3. お客様の声

お客様の声やレビューは、特に著名人やブランドからのものであれば、ソーシャルプルーフを示すのに不可欠です。お客様の声は、製品を使ってその恩恵に満足している人がいることをウェブサイトの訪問者に伝えてくれますからね。

マーケティングソフトウェア大手のHubSpotによると、「人はレビューや体験談を参考にして、製品やサービス、さらには販売者を信頼するかどうかを判断する」とのことです。

4. 価値提案

価値提案は、あなたの製品がどのような問題を解決しているかを顧客に伝えるものです。例えば、高速インターネットを販売している場合、あなたの価値提案は、顧客が「バッファリングや中断なしにNetflixやYouTubeのビデオをストリーミングできる」ことです。高速通信やインターネットについてはどこにも触れず、「解決策」を売っているのです。

マーケティング担当者は一般的に、価値提案をアバブ・ザ・フォールド（Webサイトを訪れた際に、スクロールをせずに目に入ってくる画面領域）、CTAの横に置きます。顧客は、自分の問題に対する解決策（価値提案）を見て、リンクをたどって申し込むのです。

5. お問合せ先

メールアドレスや電話番号などのお問い合わせ先を探すのに、ビジネスのウェブサイトを訪れることがよくありますが、多くのウェブサイトでは、そのような情報をメインナビゲーションの上にあるヘッダーバーに掲載しているため、ユーザーはスクロールしたり、別のページに移動したりすることなく、お問合せ先を見つけることができます。

デザイナーは、ユーザーがクリックしてメールや電話をかけられるように、HTMLのリンク属性に「tel:」や「mailto:」を含めるようエンジニアへの指示が必要です。

6. 価格設定

価格設定は、特にSaaSなどのサービス型ビジネスにおいて、人が企業のウェブサイトを訪れるもう一つの理由です。製品のプランを比較する価格表のUIパターンは、ユーザーにとって便利であり、その透明性が信頼を築きます。デザイナーは、ユーザーが希望するオプションにサインアップし、オンボーディングプロセスを開始できるよう、常にCTAを含めなければいけません。

7. 人の顔

商品画像に人の顔を使うことは、人間的なつながりを生み出し、親しみやすいコンテンツにするために非常に重要です。また、アバウトページには、チームメンバーのプロフィール画像を掲載し、ブランドの個性の表現が必要です。

Onextrapixelに「On How To Use Human Face To Improve User Experience」という、有名ブランドのウェブサイトの例がいくつか紹介された興味深い記事があります。

8. ネガティブスペース

ネガティブスペースやホワイトスペースは、CTAや重要な要素、コピーなど特定のコンテンツに注意を引くための優れたウェブデザイン手法です。また、デザイナーは、読みやすくしたりコンテンツを別々にするのに、テキストやUI要素にも適切なネガティブスペースを使う必要があります。

9. ケーススタディ

B2Bサイトでは、製品がどのように問題を解決し、結果をもたらすかを示すケーススタディが不可欠です。

たとえば、UXPinブログでは、”How PayPal scaled How PayPal Scaled Their Design Process with UXPin Merge “というケーススタディが紹介されています。世界最大のテック企業の1つから採用されるということは、Mergeに大きな信頼性を与え、製品が機能することを実証しています。

10. 読み込みのスピード

読み込み速度の最適化は通常、エンジニアリングチームの責任ですが、デザイナーはページの読み込み時間を短縮するために、以下のように多くのことをすることができます：

レスポンシブデザインのベストプラクティスを用い、レイアウトとコンテンツをデスクトップ、タブレット、モバイルデバイスに最適化する
ユーザーのより早い目標到達を妨げるような、余計な「あれば便利」的機能や特徴を排除する
コンポーネントやマイクロインタラクションを再利用して、CSSやJavascriptのファイルサイズを最小化する方法を見つける
PNGよりもJPGを使用し、配置やウェブレイアウトに応じて画像を拡大・最適化する
ロゴ、アイコンなどのグラフィックにはSVGを使う

CRO（コンバージョン率の最適化）

ここでは、デザインチームがウェブサイトのコンバージョン率を分析し、最適化するためのヒントをご紹介します。デザイナーは、このようなテストを既存のウェブサイトに使ったり、新しいアイデアをテストしたりすることができます。

A/Bテスト

A/Bテスト（スプリットテスト）とは、2つのデザインを比較して、どちらがより良いパフォーマンスを示すかを判断する手法です。UXデザイナーがウェブサイトやランディングページを最適化するために小さな変更を加える、反復的なプロセスです。

A/Bテストを成功させるコツは、色、コピーの言い回し、フォント、画像など、細かい変更を比較することであり、全く異なる2つのデザインを比較すると、何が具体的にコンバージョンを増加させたの判断が難しくなります。

多変量解析テスト

多変量解析テストはA/Bテストに似ていますが、デザインチームは2つのバリエーションだけでなく、複数のデザインをテストします。デザイナーは、複数のレイアウトを同時にテストすることで、より早く最適な選択肢を導き出すことができます。

このテストは、デザイナーが訪問者を複数のグループに分けることができ、なおかつ正確な結果を得るのに十分なサンプルサイズを確保できる、トラフィック量の多いウェブサイトでのみ有効です。

ヒートマップ

ヒートマップで、ウェブサイト訪問者がウェブページやコンテンツにどのように関わっているか、特にホバー、スクロール、クリック/タップのインタラクションについてインサイトを出すことができます。デザインチームはこのデータを使って、次のことを判断します：

CTAとユーザージャーニーは明白か
どのナビゲーションリンクが最も重要か
ユーザーはどの程度スクロールするか
訪問者の行動を妨げるようなUI要素はあるか
ページ下部のリンクやコンテンツは、アバブ・ザ・フォールドにあるものよりも価値があるとユーザーが感じるか、つまり、視覚的な階層がユーザーの行動と一致しているか

デザイナーのためのGoogle Analytics

GA（Google Analytics）は、人口統計、ユーザーフロー、オーガニック、SNS、紹介などのトラフィックソース、および行動について、デザイナーに多くの情報をもたらします。GAは、最もパフォーマンスの高いページと最も低いページを特定し、ユーザーがどこでファネルを抜けることが多いかを把握するための素晴らしいツールであり、デザイナーはGAデータを使った問題の特定や、テストやエンドユーザーへのインタビューの実施で、問題を突き止めることができます。

このツールとその機能をもっとよく理解するには、アリス・ウォーカー氏の「The ultimate guide to Google Analytics for UX designers」を読むことをお勧めします。

UXPinでプロトタイプとテストを改善し、ウェブサイトのコンバージョン率を上げよう

UXチームがWebサイトデザインのプロトタイプやテストを行う際、画像ベースのデザインツールでは忠実度や機能性に欠けることが課題のひとつとなっています。

ユーザーフローやコードの忠実度や機能性を再現しなければ、UXデザイナーは正確なフィードバックやインサイトを得ることができず、コードベースのプロトタイプを作成するには、フロントエンドデベロッパーに頼らざるを得ません。

UXPinのコードベースのデザインツールがあれば、デザイナーは一行のコードも書かずに、同じ忠実度と機能を実現できます。UXPinのプロトタイプは、テスト時に正確で実用的な結果をもたらし、デザイナーはデザインハンドオフの前に、より多くのユーザビリティ問題を解決することができます。

デザイナーは、ウェブサイトのユーザーフロー、ランディングページ、eコマースのチェックアウトなどを正確に複製し、実際のエンドユーザーとプロトタイプをテスト、反復、最適化することができます。

UXPinで正確なプロトタイピングとテストを行うことで、ウェブサイトのUXをより明確に把握することができます。無料トライアルにサインアップし、コードベースのデザインでウェブサイトのデザインを最適化し、コンバージョン率を高める方法を是非ご覧ください。

DesignOpsの成熟度確認のためのチェックリスト

DesignOpsを成熟させ、広めることは長期的な成功のために非常に重要です。しかし、どこから始め、何を追跡し、どのように正しいメトリクスを測るのでしょうか？そこで筆者達は、NN GroupのDesignOpsフレームワークとUXPinコミュニティからの質問からヒントを得て、DesignOpsの実践者が成熟度の追跡と測定に使用できるチェックリストのテンプレートを作成しました。

UXPin MergeでコンポーネントライブラリをUXPinのエディタに同期させて、信頼できる唯一の情報源（Single source of truth）を作成し採用率を上げましょう。Reactライブラリ用のGitや、その他の一般的なフロントエンドフレームワーク用のStorybook統合をぜひご覧ください。

メトリクスの使用によるDesignOpsの追跡

DesignOpsの取り組みを追跡しなければ、変更が成功したかどうかや、組織の成熟度合いを知ることはできません。また、このようなメトリクスは、ステークホルダーへの成功の報告、賛同の獲得、およびOpsの拡張のために極めて重要です。

正しいメトリクスの選択

2021年12月に開催されたパトリツィア・ベルティーニ氏とのWebセミナーでは、DesignOpsのROIと正しい測定基準の選択について考察しましたが、そこでパトリツィアは、DesignOpsのメトリクスを、【有効性】と【効率性】の2つのカテゴリーに分類しました。

【有効性】とは、行動や正しいことを行うことであり、主観的で測定が困難な場合がある。
【効率性】とは、数字や割合、比率などを使って測定・定量化できるものである。

ステークホルダーは、原因と結果を明確に示すことができるため、効率性を見ることを好みますが、効率性も、行動や主観的な改善によって効率が上がり、DesignOpsの拡張と成熟に役立つため、同じくらい重要です。パトリツィアが有効性と効率性にどのようにアプローチしているか、YouTubeチャンネルにあるウェビナーで再度ご確認ください。DesignOps、デザインリーダーシップ、デザインシステムに関する今後のウェビナーについてはぜひご購読ください。

DesignOpsのフレームワークを「成熟度チェックリスト」として使う

NN Group の DesignOpsのフレームワークは、「DesignOps の状況」を理解するのに優れたテンプレートであり、DesignOpsリーダーは、このフレームワークを「成熟度の追跡」や、「改善すべき領域の特定」のためのチェックリストとして使うことができます。 NN Groupが557人のデザインとUXの実務者を対象に行った2020年の調査では、DesignOpsは「ほとんどの組織で低水準 」という結果が出ました。この調査では、「組織は推奨されるDesignOpsの取り組みの22%しか行っておらず、DesignOps専用の役割もなく、全体的にDesignOpsの成熟度が低かった」と報告されています。このフレームワークをガイドとして、DesignOpsの実践者は【進捗】と【成熟度】を追跡するためのチェックリストを作成することができます。フレームワークによると、DesignOpsには主に3つ領域があります：

どのように協力し合うか
どのように仕事を成し遂げるか
どのようにインパクトを生み出すのか

どのように協力し合うか

【どのように協力し合うか】は、NN Group の DesignOps 成熟度調査において、平均 18% で最も低いスコアとなり、「人間らしさ：開発と成長の実現」というカテゴリーが、この分野で最も低い成果となりました

この分野が連携や連絡、チームワーク、雇用、スキル開発など、UXのアウトプットに関連するメトリクスに相関していることから、経営陣やデザインリーダー又はDesignOpsのリーダーは、成果の低さに特に注意を払わなければいけません。 組織化：チーム体制 プロジェクトの成功には、「適切なチーム」の構築が欠かせません。NNグループの調査では、DesignOpsの成熟度を向上させるための3つの重要な領域が特定されました：

共有されたデザインチームの組織体制
役割とスキルを補完し合うバランスの取れたデザインチーム
デザインリーダーは他部門のリーダーと同等である

連携：効果的なコミュニケーション

デザインの役割がデザインチームメンバーやステークホルダーに理解され、合意されている
デザイナーがUXの知識やインサイトを共有するためのコミュニケーションチャネル
社内および部門を超えた連携を促す職場環境
チームメンバーが興味や情熱を共有するための正式なチャネル

人間味：発展・成長を可能にする

客観的な候補者評価を促す一貫した採用・面接の実施
新入社員のマイルストーンと目標の設定と、定期的なチェックの実施
デザイナーのキャリア開発のための明確な道筋
成長の機会を特定するための定期的なスキル評価プロセスの確立

DesignOpsサービスの認知

もうひとつ、【どのように協力し合うか】を形付けるのは、組織全体の意識と積極性を高めるために仕事を社会化するという、認識です。

スキルの認識：適切なチーム作りに不可欠
スキルギャップの認識：長期的な成長とUXの拡張に不可欠
キャリアの現状と機会の認識：才能の保持や、従業員のモチベーション維持のための、個人の開発と成長への刺激
ブランドと文化の認識： UXを組織の幅広いビジョンと結びつける。

【どのように協力し合うか】の領域を改善したいと思いませんか？DesignOpsの最初の柱に関する無料のeBookをこちらで入手し、DesignOpsのこの重要な側面について学びましょう。

どのように仕事を成し遂げるか

私たちがどのように仕事を成し遂げるかは、プロジェクトのワークフロー、ツール、プロセス、およびプロトコルに関連しています。この分野は、生産性、プロジェクトの納期、および一貫性に影響を与えるため、通常、DesignOpsの主要な焦点となります。

NNグループのDesignOps成熟度調査では、すべてのメトリクスで平均20％という結果が出ています。

標準化：一貫したツールやプロセスを使う

標準化・文書化されたデザインプロセスをステークホルダーと共有し、社内のデザインチームが使用する
デザインが開発プロセスに適切に組み込まれている
デザイナーは、標準化されたUX原則に基づいて作業を行い、一貫したプロジェクトデリバリーを実現する
デザイナーは、UXアーティファクトを作成するのに一貫したツールセットを使用する
デザインツールは、プロダクトやエンジニアリングを中心とした外部パートナーと統合されている

調和：リソースやインサイトの共有

共有されたデザインシステムまたはスタイルガイド
一元化され、検索可能で、共有されたリサーチのアーティファクトとインサイト
共有され、アクセスしやすいデザインアーティファクト

優先順位：何をなぜ重視するかの決定

デザインチームは現実的な能力で運営されており、すなわち、適切なリサーチ、デザイン、プロトタイプ、テスト、ドキュメンテーション、およびデリバリーのための十分な時間が確保されている。
デザインプロジェクトにおける現実的な時間枠と予算

DesignOpsサービスの有用性

NNグループのフレームワークに、もう一つ、【DesignOpsサービスの有用性 】という要素を追加します。

デザインリーダーシップとステークホルダーのデザインプロジェクトの状況に対する認識
デザインチームの健全性
うまくできあがったデザインプログラム
生産性、効率性、市場投入までの時間、一貫性など、デザインシステムへの影響

どのようにインパクトを生み出すのか

【インパクト】は、DesignOpsの最後の注目分野です。NNグループの調査では、インパクトは平均30%と最も高いスコアでしたが、多くのメトリクスは1桁以下かそれに近い数値でした。

このDesignOpsの要素を拡張、成熟させるのに、デザインアドボカシーは重要な役割を果たします。

測定：デザイン品質の定義と追跡

説明責任を果たすための一貫したデザインメトリクスの追跡
プロジェクトごとに、また、より広いビジョンとロードマップに向けて追跡されるUXのメトリクス
デザイン品質の客観的で一貫した測定

社会化：デザインの役割と価値についての教育

パートナーやステークホルダーと共有するデザインの成功例とケーススタディ
パートナーやステークホルダーに対するデザインの役割と価値の統一的なメッセージと共有
ユーザー中心のデザイン原則の適用における、非デザイナーの認識
組織のデザインの価値の理解

有効化：デザイン活動の組織的な活用の促進

外部パートナーも利用可能なデザイン活動や手法
問題解決のためのデザイン思考など、非デザイナー向けのデザインスキルトレーニング
アイデア出し、プロトタイプテスト、デザインスプリント、UXリサーチなどのデザインプロセスへのデザイン担当以外の社員の参加

DesignOpsサービスの導入

インパクトの要素に【導入】というもう1つのレイヤーを追加します。導入と完了は、DesignOpsのケーススタディと成功事例を組織やステークホルダーと共有することができるため、インパクトにとって非常に重要です。

ツール、プロセス、システムの採用 – 変化の促進
デザインイベント、デザインチームメンバー、外部パートナー、ステークホルダーへの参加
標準化されたデザインプロセスに従ったプロジェクト
デザインレビュープロセスに従ったプロジェクト
管理されたデザインプログラムの数
うまくできあがったプログラムの数

UXPin Mergeでデザインを拡張しよう

デザインアウトプットの拡大のために、デザイナーを増員する必要はありません。2019年にUXPin Mergeを導入したPayPalでは、プロジェクトの納品が8倍速くなり、デザイナーを増員する必要がなくなりました！

デザイン、製品、開発を同期する完全に統合されたデザインシステムがあれば、チームはゼロからのデザインやコーディングをほとんどすることなく、素晴らしい製品を作ることに集中できる時間を増やすことができます。それによりIressは、UXPin Mergeによって「完全に統合されたデザインシステム」を構築し、以下が実現されました：

コードもしくはコードなしでのデザイン
デザインドリフトなし
一貫したデザイン
シームレスな（もしくはまったくない）ハンドオフ

UXPin Mergeの単一のコードベースのデザインソリューションで、DesignOpsの多くの課題を解決しましょう。この画期的なテクノロジーへのアクセス権をリクエストして、顧客にとってより良い製品体験の構築をぜひ始めてください。

Discover Merge

ブランドの一貫性：高める方法をデザインでチェック

UXデザインは、ブランドの一貫性に大きな影響を与えます。製品の視覚的な美しさと使いやすさは、多くの場合、最初に気付かれるものであるため、ブランドに関連し、且つ強い第一印象を与えるものでなければなりません。

UXデザインにおけるブランドの一貫性は、ブランドロゴ、正しい色、フォントの使用にとどまらず、デザイナーは、企業イメージを反映し、製品に意味を持たせ、ターゲットにアピールするような体験を作り出すことを求められます。本記事では、UXデザインにおけるブランドの一貫性の重要性と、デザイナーがブランド価値の高い製品体験をどのように生み出すことができるかを探ります。

UXPin の革新的な Mergeの技術で、一貫したUXをデザインしませんか？信頼できる唯一の情報源（Single source of truth）によって、どのようにリリースごとに一貫性のある、ブランド価値の高い製品体験が確実に提供されるかを、アクセス権をリクエストしてぜひご覧ください。

ブランドの一貫性とは

ブランドの一貫性とは、企業があらゆるタッチポイントにおいて、いかに一貫したメッセージを発信し、そのブランドの核となる価値に忠実であり続けるかということであり、その一貫性は、ビジュアルデザインやコピーライティングから、従業員の顧客対応や問題解決の方法まで、あらゆることに関連しています。

UXデザインにおけるブランドの一貫性

デザインやUXは、顧客が製品やサービスを利用する際に目にし、体験する要素であるため、ブランドの一貫性に不可欠です。優れたネーミング、スローガン、ロゴ、ブランドメッセージなどを持つ企業でも、ユーザー体験が悪ければ、そのブランドはダメになってしまいます。

ブランドの一貫性が重要な理由

ブランドで企業に人間のような特徴ができ、それにより顧客はより簡単に関係を築き、関われるようになります。ここでは、デザインの主導者とステークホルダーが、UXにおいてブランドの一貫性を優先させなければならない理由をいくつかご紹介します。

理由１：信頼関係の構築

もしあなたが誰かと出会い、あることを支持すると言われたとしても、彼らの行動がそれに矛盾していれば、あなたは彼らに疑いの目を向けるでしょう。このような矛盾が多くなると、その人を信じられなくなり、信頼を失うことになるのです。

ブランドについても同様、おそらくそれ以上でしょう。誰でも製品のタイポグラフィ、色、マイクロインタラクションに至るまで、一貫したものを見たいと思うものです。

TeamPasswordにおけるパスワードマネージャーの事例で、オペレーションディレクターのトニー・カッチョボ氏は、「この市場ではブランドが不可欠です。顧客は、我々に”ログイン記録”という機密情報を託しています。それが矛盾や時代遅れのデザインだと、我々がその情報を安全に保つのに十分な最新の技術を持っているかどうか、一部の顧客に疑問を抱かせる可能性があります。フロントエンドの開発は、バックエンドの性能に対する信頼と信用を築くのです。」と言っています。

理由2：ブランド認知の強化

ブランドの一貫性により、顧客はアプリストアやSNS、物理的な場所で、ビジネスやその他の製品を目にすることができます。そのいい例が、世界的なメガブランドであるVirginです。

Virginは、サービス、体験、物理的およびデジタル製品など、世界中のさまざまな産業で成功を収めており、Virginの忠実な顧客は、質の高いサービスの提供、遊び心、フレンドリーなカスタマーサービスを連想させるその特徴的な赤と白のブランドにいち早く目が行きます。

理由3：営業・マーケティング活動の活性化

Lucidpress（ルシドプレス）の調査によると、強力なブランドの一貫性は、収益に大きな影響を与える可能性があることがわかりました。最新のブランド一貫性の現状報告によると、一貫したブランディングで収益が33%増加することが分かったのです。これは、Lucidpressの2016年のレポートから10%増加していることが示すように、この傾向は拡大しているようです。

理由4：デザイン・開発の効率化

ブランディングやデザインの不整合は、デザインドリフト、バグ、手直し、技術的負債、プロジェクトの遅延などを引き起こします。このような不整合は、お粗末な顧客体験を招くだけでなく、ワークフローやデリバリーの非効率性を生み出し、組織の貴重なリソースを犠牲にすることになります。

こうしたデザイン・開発の非効率性を解消するため、企業はすべてのタッチポイントで一貫したユーザー体験を確実に提供できるようにすべく、ブランドのガイドラインを含むデザインシステムを構築するのです。

UXデザインでブランドの一貫性を高める方法

ブランドの一貫性の多くは、信頼を築くことにあり、企業の行動がメッセージと矛盾していれば、ブランドに対する信頼は失われます。ここでは、製品に一貫したブランドメッセージを伝えるための6つのヒントをご紹介します。

ブランドのスタイルガイドでデザインシステムを構築する

デザインシステムは、特に製品やワークフローの凝集性と一貫性の、導入する企業にとっての大きな問題をいくつか解決します。

包括的なデザインシステムには、組織のメッセージングとブランドアイデンティティを強化するためのブランドガイドラインが含まれているものです。デザインシステムは、すべてのプロジェクトが同じ原則とコンポーネントライブラリを使って同じデザイン言語を提供し、ユーザーに一貫したブランド体験を確実にもたらします。

ありきたりなデザインパターン

デザインパターンは、親しみやすさを生み出し、製品の学習曲線と人間の認知負荷を軽減します。こういったありきたりで認識可能なパターンは、製品に基礎的な一貫性を与え、ブランドを強化します。

さらに、製品が使いやすいと、顧客がその製品を使用したり、オススメしたりする可能性が高くなり、ブランドの信頼性や親和性が高まります。

デザインでブランドの声とトーンを表現する

製品のメッセージやコピーと同様に、カラーパレットやビジュアル要素も、ブランドの声やトーンを表現するものでなければなりませんが、このようなUI要素を定める一番いい方法は、潜在顧客でデザインをテストすることです。

UXデザインの会社であるDivamiは、UXリサーチに基づいてブランドの個性を開発することで、これを実現しています。「女性による女性のためのヘルスケアプラットフォーム」であるCeles Careをデザインしたとき、彼らはステレオタイプな「全部ピンク」とせずに女性らしいUIを作りたいと考えました。配色をテストすることで、同社は「ソフトでまろやかな」パレットを見つけ、最も重要なこととして、エンドユーザーがブランドのパーソナリティを連想するようにしました。

内外のブランド一貫性

内部的な一貫性とは、製品内のユーザーエクスペリエンスを指し、外部的な一貫性とは、一連の製品群を指します。製品ごとに多少の違いはあっても、デザイナーは製品間の一貫性を高いレベルで満たさなければなりません。

Appleはハードウェアとソフトウェアを幅広く展開していますが、このブランドは、物理的にもデジタル的にも、誰が作ったかわからないようなデザインになっています。Appleの製品間でのデザインの一貫性で、ブランドと顧客ロイヤルティは強化されるのです。

この一貫性は、組織がすべての製品をデザイン、開発、および製造する場合に管理しやすくなりますが、サードパーティの市場ではどうなるでしょうか?

Shopify、Salesforce、Atlassian などの製品は、コア製品を補完するためにサードパーティアプリに依存しています。アプリにはそれぞれ異なる特徴や機能がありますが、製品のデザインシステムにより、それぞれが確実にコア製品に適合しています。

例えば、アプリの開発者は、マーケットプレイス内のすべてのアプリがコンテンツ、デザイン、コンポーネント、パターンに関するShopifyのガイドライン（ブランディングを含む）を確実に満たすようにShopify Polarisに従わないといけません。これにより、たとえ誰かが異なるサプライヤーから複数のアプリを使用したとしても、それはShopifyの一製品のように感じられます。

Virginのデザイン一貫性

間隔、サイズ、レイアウト、色などの細かいUIデザインは、ブランドの一貫性に影響を及ぼすことがありますが、これらのUI要素がすべてのUIで一貫していれば、ユーザーはコンテンツや機能について考えたり検索したりすることなく、タスクの完了に集中することができます。

さらにデザイナーは、ブランドの声やトーンに沿った一貫したマイクロインタラクション、ページ遷移、通知を使用しなければなりません。このような課題の多くも、デザインシステムによって解決できるため、ユーザーインターフェースは常にブランドと一貫性を保つことができるのです。

透明性を確保する

透明性は、信頼とブランドの親和性を構築する上で重要な要素です。デザイナーは、ユーザーがどんなタスクでも完了できるように、たとえそれが配信停止や有料プランの解約などのビジネスに悪影響を与えるものであっても、機能をシンプルで透明性の高いものにしなければなりません。

製品は、アフィリエイトの紹介やスポンサー、第三者によるデータ共有など、金銭的なインセンティブがあることを必ずユーザーに知らせなければならず、デザイナーは、最終的に信頼とブランドを損なうクリックベイトや欺瞞的なリンクも避けなければなりません。

UXPin Mergeでブランドの一貫性を高めよう

Mergeを使用すると、コンポーネントライブラリをレポジトリからUXPinのデザインエディタに同期できるため、デザイナーはエンジニアと同じUI要素を使用することができ、レポジトリへの変更は自動的にUXPinに同期され、組織全体で信頼できる唯一の情報源（Single source of truth）を作成できます。

デザインシステムチームは、React props（またはStorybook統合のためのArgs）経由でコンポーネントを変更する自由をデザイナーに与えることができます。また、ブランドアセット、カラー、タイポグラフィー、マイクロインタラクションなど、チームが変更できない特定のプロパティをハードコードして制限することも可能です。

ブランド要素やコアバリューをデザインシステムに組み込むことで、製品チームは、小さいけれど重要なデザイン判断に悩まされることなく、新製品の開発に集中することができます。

また、エンジニアがすでにコンポーネントのコピーをレポジトリで持っているため、Mergeはデザインのハンドオフプロセスの効率化も実現します。さらに、UXPinは各コンポーネントのプロップに対してJSXコードをレンダリングします。それにより、エンジニアはライブラリからコンポーネントをコピー＆ペーストし、UXPinから変更を加えるだけで、フロントエンドの開発を始められるのです。

デザイナーとしてフロントエンド技術的負債と向き合う方法

デザイナーとエンジニアは、互いの課題を理解し、協力して解決していく必要があります。そこでデザイナーは製品開発チーム全体にUX（ユーザーエクスペリエンス）とデザイン思考を理解してもらいたいと考え、エンジニアはフロントエンドの負債と戦うためのチームメンバーを必要としています。

本記事では、フロントエンドの負債についてとその問題に対する一般的な解決策、およびデザインチームがエンジニアの負債を減らすのにどのようにサポートできるかをお話します。また、デリバリーヒーローがフロントエンドの負債をデザインシステム開発のためのビジネスケースとして利用し、デザイナーとエンジニアの製品開発プロセスを向上させた事例もご紹介します。

[ez-toc]

UXPin Mergeを使って、デザインと開発間の信頼できる唯一の情報源（Single source of truth）で技術的負債を削減しましょう。UXPin の Merge テクノロジーへのアクセス権をリクエストして、Merge による組織全体の統一性の維持やフロントエンドの負債の解消、製品開発プロセスのスピードアップの方法をぜひご覧ください。

フロントエンドの負債とは

フロントエンド技術的負荷とは、プロジェクトの納期を守るための回避策やショートカットによって蓄積された開発作業のことです。このような短期的な解決策によって、エンジニアは製品をより早く出荷できるようになりますが、その修正は “負債 “としてバックログに蓄積されてしまいます。

金融負債と同様に、エンジニアリングチームが技術負債を適切に管理しなければ、製品、UX、組織に壊滅的な影響を及ぼす事もあり得るのです。

フロントエンド負債とデザイン負債

デザインの負債とは、プロジェクトの納期を守るためにデザイナーが飛ばしてしまう、リサーチ、デザイン、テストなどの必要なUXの実践のことです。例えば、デザインチームが新しいUIパターンを実装したものの、十分にテストする時間がなく、ユーザビリティやアクセシビリティなどへの影響を把握できていない場合などが挙げられます。

製品にデザインシステムがない場合、デザインの負債により、色、タイポグラフィー、UIパターン、レイアウトなど、多くのUI不整合が発生します。デザインの不整合は、それがどんなに小さくてもネガティブなUXを生み出し、ブランドにダメージを与えます。

このような小さなデザイン上の問題の積み重なりが、ユーザビリティに関わる重大な問題に発展し、それが技術的負債と合わさると、根本的な原因を突き止めるのが難しくなり、ワークフロー、リリース、ユーザー、そして収益にまで影響が及ぶ可能性があります。

フロントエンドの負債を防止・管理する方法

ここで重要なのは、技術的負債はプログラミングの産物であり、ある程度の負債は避けられないということです。なので負債をなくすことではなく、不必要なバックログを防ぐことがポイントになります。

既存の企業や組織には、技術的負債の専門チームを抱えるだけの人員とリソースがありますが、金銭的余裕のないスタートアップや小規模な企業にとっては、そのような負債を防止するに越したことはありません。ここでは、フロントエンドの負債を防止、管理するためのヒントをご紹介します。

チームの教育

フロントエンドの負債を最小限に抑えるための最初のステップは、その影響についてチームを教育することです。エンジニア、製品チーム、UX デザイナーは、フロントエンドの負債やそれがどのように組み合わさるか、その悪影響、および各部門がどのようにその役割を果たせるかについての理解が必要なのです。

エンジニアリングの標準の設定

スタートアップを含むすべての組織は、プログラミングの標準とベストプラクティスの導入が必要であり、エンジニアは、統一されたコードを書き、ワークフロー、ドキュメント、リリースについて会社のプロトコルに従わなければなりません。

この標準により、ずさんな仕事を防ぎ、事故による負債の積み重ねが減少します。

すべての記録及び文書化

フロントエンドの負債が発生した場合、エンジニアは以下のようにそれを徹底的に追跡し、文書化する必要があります：

Jira、Trelloなど、バックログへの仕事の追加
負債が発生した理由の説明
チームが行うべきことの概説
問題解決のためのロードマップの提供

この文書化により、修正が効率化され、時間が短縮されます。借金と同じで、こうした小さな時間短縮の積み重ねで、コストを最小限に抑えられるのです。

プロジェクトの納期遵守

チームメンバーやステークホルダーは、プロジェクトの納期を守り、エンジニアに非現実的なスケジュールを強いるようなスケジュール変更を避けなければいけません。このような変更でしばしばリソースが動かされ、それによってバックログ負債がドミノ倒し的に発生してしまうのです。

テストの自動化

製品によくあるプログラミングエラーの自動テストを書く時間を取ることは、負債を防ぐ優れた戦略です。エンジニアは、将来的な負債の再発を防ぐために、バグを見つけたらテストを書くという習慣を身につけておかなければいけません。

デザインシステムの導入

デザインシステムは、フロントエンドの負債を減らすと同時に、デザイナーとエンジニアの一貫性と連携の強化に非常に有効です。

承認され標準化されたコンポーネントライブラリは、エンジニアがより少ないフロントエンドのコードを書くための基盤となり、それによってエラーの減少や、生産性の向上が実現します。

フロントエンドの負債の防止のためにデザイナーができること

デザインチームと製品チームは、フロントエンドの負債を減らす責任も負います。ここでは、デザインプロセスにおけるフロントエンドの負債を最小限に抑えるためのヒントをご紹介します。

フロントエンドの制限の理解

デザインチームと製品チームにとって、製品の技術的な制限と制約の理解は不可欠です。この制約の中で作業することで、デザインハンドオフが効率化され、エンジニアがプロジェクト完了のために新たに書かなければならないコードも削減されます。

早い段階からの頻繁な連携

デザイナーとエンジニアの連携は、ハンドオフの時だけでなく、デザインプロセスの早い段階から始める必要があります。このようなコミュニケーションにより、デザイナーとエンジニアは互いの課題を理解し、適切な解決策を提案することができるのです。

例えば、ユーザビリティの問題に対して、デザイナーにとって使い勝手がよく、エンジニアにとって開発期間の短縮につながるような解決策が、エンジニア側にあるかもしれないですよね。

コードベースとベクターベースのデザインツールの使用

デザインと開発における最大の問題は、デザイナーとエンジニアが異なる言語を話し、異なる制約の中で仕事をする点です。

UXPinのようなコードベースのデザインツールで、完全に機能する忠実度の高いプロトタイプをデザイナーが作成するのが可能になります。GIF、アニメーションビデオ、その他の回避策を使用してコードを複製する代わりに、UXPinのプロトタイプには最終製品のような見た目と機能が備わっています。

さらに、Mergeの技術により、Git、Storybook、npmのレポジトリからUIコンポーネントを取り込むことができ、製品の構成要素を正確に使用することができるようになります。詳しくはこちらをご覧ください：Design with Code: UXPin Merge Tutorial

完全に統合されたデザインシステムの提唱

Iress社のデザインシステムプロダクトオーナーであるニック・エリオット氏は、「UXPin Merge 顧客事例『Iress』：デザインツールの再想像」の記事で、デザインシステムの成熟度の4つのステージと、彼のチームが、完全に統合されたデザインシステムを開発するのにどのようにUXPin Mergeを使ったのかについて説明しています。

完全に統合されたデザインシステムでは、デザインと開発のために単一のコンポーネントライブラリが使われます。デザイナーはドラッグ＆ドロップでプロトタイプを作成し、エンジニアはコードをコピー＆ペーストして最終製品を開発します。ゼロからデザインしたり、フロントエンドのコードを書いたりする必要はないのです。

このシナリオは信じられないかもしれませんが、Iress や PayPal などの企業組織は UXPin Merge を使用して、新しいデザインやコードを最小限に抑えて製品を出荷しています。無料トライアルにサインアップして、Merge と MUI の統合をぜひお試しください。

デザインシステムのためのビジネスケースの構築

UXPinは最近、デリバリーヒーロー（talabat）のDesignOpsディレクターであるアンバー・ジャビーン氏とのWebセミナーを開催しました。講演の中で彼女は、自身のチームがどのようにエンジニアと連携して、デザインシステムのビジネスケースを構築したかについて話しました。

彼女のチームは、まず数ヶ月に渡るリリースの監査から始め、デザインと最終的なリリースを比較しました。その結果、デリバリーヒーロープロジェクトのリリースごとにフロントエンドの負債が発生し、会社に多大な時間とリソースがかかっていることがわかりました。

チームは、この負債のほとんどがデザインドリフトによるものであることを突き止めました。そこで、デザインシステムを導入した場合としない場合のUIを作成する実験を行い、その結果、負債がゼロになり、市場投入までの時間が57％短縮されました。アンバーはこのデータをビジネスケースに利用し、デリバリーヒーローのMarshmallowデザインシステムの構築にゴーサインを出したのです。

UXPin Mergeでフロントエンドの負債に立ち向かう

今後、フロントエンドの負債を負わないようにするには、どうすればよいのでしょうか。方法の一つとして、デザイナーとエンジニアの連携を強化するデザインツールの使用があります。Mergeの技術が搭載されたUXPinでは、プロトタイプの段階で、デベロッパーが製品構築に使用するUI要素をそのまま使用することができます。

アプリやウェブサイトの構成要素でデザインしているため、エンジニアはデザインを開発しやすく、同じコンポーネントを何度も作り直す必要がありません。また、デザインに一貫性を持たせながら、製品をより速くリリースすることができます。Merge へのアクセス権をリクエストして、その強力な機能をぜひご体験ください。

デリバリーヒーロー（Talabat）デザインシステムの採用

2022年5月、UXPinはデリバリーヒーローMENA（Talabat）のDesignOps DirectorであるAmber Jabeen氏を招き、「エンタープライズデザインシステム – 構築と拡張の方法」と題したウェビナーを開催しました。本記事では、彼女の講演の後半にあたる、デリバリーヒーローのデザインシステム採用戦略に焦点を当てた内容をご紹介します。ちなみに、概要については当社のブログに掲載されています。

「デザインシステムの成功は、その採用にかかっており、ユーザーに使ってもらうまでは、成功とは言えないのです。」 – アンバー・ジャビーン氏

UXPin Mergeで、より優れたデザインシステムの採用、一貫性、結束を実現しませんか？デザインシステムのコンポーネントライブラリを UXPin のデザインエディタに同期させ、組織全体で信頼できる唯一の情報源（Singe soruce of truth）を作成しましょう。今すぐアクセスをリクエストし、Mergeの技術をぜひご体験ください。

デリバリーヒーローの3つの導入戦略

アンバーと彼女のチームは、様々な取り組みを試した結果、デリバリーヒーローのために以下の3つの要素からなるデザインシステム採用戦略を開発しました。

ゲーム化
ソーシャル化
称賛

***「一貫した楽しい」*ビジョン**

アンバーのチームは、デザインシステムを他の製品と同じように扱うことが、採用率を高めるのに必要だと考えました。そこでまず、戦略の指針となる「ノーススター」を定めました。

ステークホルダーやチームメンバーからの意見を参考に、チームは「すべてのプラットフォームで、一貫した楽しいユーザー体験を提供しよう」と考えました。

デザインシステムチームは、ビジョンのモットーや理念を強調するのに、一貫した楽しさを全面に出しました。

一貫した（モットー）：

「いつも…例外なく。考えるまでもない。」 デザインの一貫性により、ユーザーはUIやその機能を覚える必要がなく、より直感的なユーザーエクスペリエンスが得られるという考え方です。

楽しさ：

talabatの配慮：製品体験では、デザインシステムのユーザーと製品のエンドユーザーの両方のユーザーを大切にすることを示すことが必要
あなたのために：個別化された体験
速い：配送業者として、お届けは速やかに行いたい
シンプル：直感的なユーザーインターフェース
楽しい：楽しいユーザー体験

明確なビジョンを持って、デリバリーヒーローのデザインシステムチームは、3つの要素からなる採用戦略を立てました。

第一の要素：ゲーム化

第一の要素は、ゲーム化です。チームは、新システムの導入に気付いていました。それはつまり、多くのメンバーが既存のテンプレートを捨て、ゼロから作り直さなければならなかったのです。そこでデリバリーヒーローは、ゲーム化戦略によって、デザインシステムへの切り替えを楽しく、競争的なものにしました。

採用段階

デザインシステム（DS）チームは、システムのビジョンに沿ってゲーム化された採用段階をデザインしました。その目的は、チームメンバーに小さなことから使い始めてもらってその規模を拡大してもらうことでした。DSチームは、ビデオゲームのような感じで、ある「レベル」をクリアすると、次のステージに進むようにユーザーを促したのです。

ブロンズ：基礎（デザイントークン）
シルバー：一貫性と纏まり（コンポーネント）
ゴールド：楽しい体験（音声と音、マイクロインタラクション、ハプティクス、トランジション）
プラチナ：もっと上を行く体験（モーション、ダークテーマ、ボイスUI）

デザインチームは、デザインシステムの階層と関連するUIパターンをポスターにしてワークスペースに貼り、「ゲーム」と「レベル」を連想させるようにしました。

デザインシステムのダッシュボード

チームメンバーにとって、進歩のために何をしなければならないかを知るための進捗状況の可視化は重要でした。そこでDSチームは、Discovery Squadのダッシュボードを作成し、ユーザーの採用状況や次の階層への進捗を可視化しました。

第二の要素：ソーシャル化

デザインシステムの戦略の2つ目の要素は、「コミュニティ主導でデザインシステムをソーシャル化し、人々の投資と関心を維持する」ことでした。

デリバリーヒーローのソーシャル化施策には、「楽しさ」と「包容力」という一貫したテーマがあることにお気づきでしょう。そしてそれはデザインシステムのビジョンに沿っていますよね。

デザインシステムの名付け大会

ンバーのチームは、「デリバリーヒーロー」のデザインシステムの命名に参加するよう、みんなに呼びかけました。社内にメールを送り、名前を募集したのです。

その結果、2つの選択肢に絞られ、「マシュマロデザインシステム 」が選ばれました。デリバリーヒーローの社員は、自分たちが名付けのプロセスに参加したことで、マシュマロに愛着を感じているようです。

チームメンバーがすぐに投資し、参加してくれたことから、この戦略はデザインシステムチームにとって成功でした。

マシュマロのアバター、ハッシュタグ、絵文字

マシュマロのアイデンティティを確立し、認知度を高めるために、DSチームはアバター、ハッシュタグ、絵文字を作成し、社内のやりとりで使用しています。

デザインシステム展示イベントの開催

チームは、ユーザーと交流するイベントを開催し、以下の質問を投げかけるなどして、生の声やディスカッションを促しました：

私たち（デザインシステム・チーム）についてどう思いますか？
デザインシステムでの仕事はどうですか？

ユーザーから新しいインサイトやアイデアを集め、デザインシステムを改善することが目的でしたが、みんな自分の意見を聞いてもらえたと感じ、自分がデザインシステムに貢献しているとわかったら、そのデザインシステムに愛着が湧いて支持者となり、ゆくゆくは更なる採用につながるのです。

また、チームメンバーにマシュマロがふるまわれるなど、明るく楽しいイベントも開催されました。

フィードバックのアンケート

DS チームは、デザインシステムのさまざまな部分についてさらに関与し、フィードバックを集めるのにアンケートを使いました。

デザインシステム組合

マシュマロデザインシステム組合には、互いに学び合い、マシュマロコミュニティを成長させるという目的の下、デリバリーヒーローの各ブランドのチームメンバーが参加し、課題の議論や、アイデアの共有がなされました。

メールマガジン

マシュマロのメールマガジンは、デザインシステムチームのユーザーとの最新情報の共有、ステークホルダーへの情報の提供や会話の一部になるサポートになりました。

第三の要素：称賛

アンバーは講演の中で、プロセスの称賛が採用戦略の最も重要な要素であると述べています。マシュマロチームでは、100%の採用に向けて前進している象徴として、どんな小さな成功も認めて称えます。

「小さな勝利を称えて、それが本当に大きな勝利につながったのです」– アンバー・ジャビーン氏

アンバーが言うように、チームは「それがとても上手」でした。例えば、マシュマロのデザイン言語の70％を完成させるなど、重要なマイルストーンに到達すると、彼らは祝杯をあげました。社内のさまざまなチャネルで、色々な功績を称えました。写真やビデオを使って、組織全体でその瞬間を共有したのです。

アンバーはプレゼンテーションの中でこう述べています：

毎月のニュースレター、All Hands、Slackチャンネルなどで、各隊の採用層を祝いました。
採用された階層を称えることで、チームはより大きな目標に向かって前進し続けることができ、貢献を促すことができました。
次のステップは、デザインシステムへの貢献に対する報奨を始めることです。例えば、それを組織の業績評価の一部にすることで、採用や貢献が促進されるでしょう。

「デザインシステムを構築することはできても、健全な有機的貢献がなければ、それを拡張することはできません。それにはシステムに貢献する人々に報酬を与えるのがいい方法です。」– アンバー・ジャビーン氏

成果の表示

マシュマロチームは成長を測定し、グラフを使ってチームメンバーやステークホルダーに結果を提示しました。以下はDSチームの主な成果です：

マシュマロによって、前月比で約20％のデザイン負債が削減されました。DSチームは、最初の実験からこの影響を測定することができました。デリバリーヒーローのデザインシステムに対する賛同を得る方法については、こちら（No link)をご覧ください。
製品のコンポーネントライブラリの80%をデザインすることで、DSチームは創造性と新しいコンポーネントのための余地を残し、マシュマロのコンポーネントライブラリは、新機能のフロントエンドの労力を約40%削減しました。
コンポーネントの採用＝一貫性があり纏まりのあるエクスペリエンス：デベロッパーは、ライブラリにないコンポーネントに気づいたとき、マシュマロチームに連絡を取り、アドバイスを求め、それがデザインシステムの拡張に関する会話を促します。

マシュマロの成功戦略

デザインシステムの構築と運営には、同士が必要であり、部門横断的なパートナーシップの構築が必要：デザインシステム専門のチームがあっても、ステークホルダー、リーダー、チームメンバーの協力と支持があってこそ、成功につながるのです。
コミュニティ主導での持続可能な採用戦略：デザインシステムを拡張したい場合は、その成長と成功のために全員を結集させる戦略をデザインすることで、組織全体を取り込む方法を見つけましょう。いつでも対応可能で、チームメンバーとつながり、デザインシステムのユーザーに 5 つ星のサービスを提供しましょう。
小さな成功を認めて讃える：「第三の要素」で説明したように、小さな成功を祝うことは、大きな勝利と幅広い導入につながります。人は認められることを好むので、進歩を祝い、奨励しましょう。
成功の数値化と360度にわたるコミュニケーション：成功は、価値提案と達成しようとしたことに基づいています。デザインシステムの目標達成に向けた進捗状況を示すのにメトリクスを使いましょう。ステークホルダー、パートナー、スポンサー、チームメンバーなど、この進捗状況を、組織の全員にまんべんなく伝えましょう。
洗い出しと繰り返し！：アンバーは、うまくいくものを見つけ、組織全体に採用を拡大するのにその戦略を繰り返していくことが重要だと言います。

デリバリーヒーローがマシュマロデザインシステムを構築するまでの完全なストーリーは、アンバー・ジャビーン氏の講演「エンタープライズデザインシステム – 構築と拡張の方法」で見ることができます。

UXPin Mergeによるデザインシステムの拡張

デリバリーヒーローの話から分かるように、デザインシステムを拡張し、組織全体に普及させるのは大変なことです。

DSチームは、デザイナーにはUIキットを、エンジニアにはコンポーネントライブラリを使うように促さなければなりません。どんなに優れたデザインシステムであっても、デザイナーとエンジニアでは話す言語が違うのです。

UXPin Mergeがあれば、デザイナーとエンジニアはまったく同じコンポーネントライブラリを使用することができます。Mergeは、レポジトリからUXPinのエディタにコンポーネントを同期し、エンジニアが最終製品に使用するのと同じインタラクティブなコードコンポーネントを、デザインチームがプロトタイプの作成に使用できるようにします。

デザインシステムチームは、各コンポーネントのプロップ、又は、Storybookの統合とではArgsをインタラクションすることも含めてプログラミングできるので、デザイナーは製品作りに専念するだけです。簡単なワークフローと少ない作業で、より楽しく、より広く普及させることができます。

Merge へのアクセス権をリクエストして、世界最先端のコードベースのデザインツールで、部門を超えた連携を強化しながらデザインシステムを拡張する方法をぜひご覧ください。

ユーザー分析 – 質の高いインサイトを得る方法

ユーザー分析は、プロジェクトの基礎となる調査をもたらし、デザインチームは、この調査をデザインの決定の指針、機会の特定、ステークホルダーの賛同の獲得、共感の実践、プロジェクトのロードマップの優先順位付けに使用します。

ユーザー分析の構成要素や、結果を組み合わせて実用的なインサイトを作成する方法を理解するのは、ユーザーニーズとビジネスゴールを一致させて、好製品をデザインするのに不可欠です。

世界最先端のエンドツーエンドデザインおよびプロトタイピングツールで、正確で実用的なユーザビリティテストの結果が得られます。無料トライアルにサインアップし、コードベースのデザインが製品開発にどのような革命をもたらし、ユーザーにより良い体験を提供できるのか是非ご覧ください。

ユーザー分析とは

ユーザー分析は、人間の行動が製品デザインに与える影響を調べます。そしてUXデザイナーは、ユーザーの行動を理解し、デザインの決定を導くのに、定量的・定性的データを使用します。

例えばUXデザイナーがコーヒー注文アプリをデザインする際に、顧客の人口統計、状況、環境、プロセス、飲料を注文するのに使うデバイスを知りたいと考えるように、リサーチチームは、ユーザーがデジタル製品をどのように使用するかを理解するのに、ユーザーフローに基づいたペルソナやユースケースを作成します。

この分析により、デザイナーは、顧客がアプリケーションを通じてコーヒーを注文するのに適した機能をデザインすることができるのです。

ユーザー分析の実施担当者

ユーザー分析を行う担当者またはチームは、組織と製品の成熟度によって異なりますが、UXデザイナー又はUXリサーチャーは通常、初期段階のユーザー分析または製品の再デザインを担当します。

確立された製品のユーザーリサーチは、大抵プロダクト・マネージャー/デザイナー/オーナーが引き継ぎ、共同作業や複雑なユーザビリティ問題の解決にUXデザイナーを参加させます。

さらに読む ：プロダクトデザイナーとUXデザイナーの違いや役割の違いについては、こちらの記事をご覧ください。

ユーザー分析を行うべきタイミング

チームがユーザー分析を行う場面は、主に3つあります：

新製品のデザイン
既存製品の再デザイン
既存製品の新機能のデザイン

どのような状況であれ、ユーザー分析はUXのデザインプロセスの初期に行われるのがほとんどです。デザインチームはその結果をもとに、プロジェクトの目標設定やアイデア出し、そしてデザインの決定をします。

ユーザー分析が重要な理由

ユーザー分析では、エンドユーザーのタスクやゴールに関する質問に答え、デザインや開発の意思決定の指針を示します。

この分析により、市場調査で必ずしも特定できるわけではないユーザーの心理状態、ユースケース、環境、使用頻度、競合製品との関わり方などの役割や特性を明らかにすることができます。

理由1：ユーザー分析で思い込みや偏見を排除できる

包括的なユーザー分析を行うというのは、顧客も意思決定に参加できるようなものです。ステークホルダーの指示、偏見、思い込み、社内政治、その他の要因に基づく決定ではなく、チームはユーザー調査を意思決定プロセスの指針としています。

理由2：ユーザー分析でビジネスチャンスが見つかる

ユーザー分析によって、チームは顧客のニーズとビジネス目標を一致させることができ、リサーチャーが改善点、競争力、市場ギャップ、その他の機会を探すのにもユーザー分析が使われます。

ユーザー分析の方法

ユーザー分析の手法は、2つに分類されます：

定量的データ：計測可能だが、行動の原因はわからない
定性的データ：主観的なデータだが、「なぜ」が明らかになる可能性がある。

UXデザインでは、どのデータセットも一長一短です。1つのデータセットを使用しても、ストーリーの一部しかわかりません。なのでUXリサーチャーは、ユーザー、競合他社、市場を理解すべく、定量的データと定性的データを組み合わせるのです。

定量的データ

定量的な調査では、数字、時間、比率など、測定可能なデータが得られます。このデータは、分析者が基準値を特定し、何かが上がるか下がるかを測定できるため、比較的簡単に分析することができます。

定量的なデータは、デザイナーやリサーチャーにユーザーの属性を伝え、定性的データと組み合わせて、UXリサーチの重要なツールである「ペルソナ」を作成します。

定性的データ

team collaboration talk communication ideas messsages

UXデザインでは、定性的なデータに高い価値を置いています。測定可能なデータは重要ですが、大抵それだけでは 「なぜ」を説明することができないのです。そこでUXリサーチャーは、定性的データを用いて、問題や機会の根本を理解します。

例えば、Google Analyticsの定量的なデータでは、eコマースのチェックアウトフローの離脱率が高いことがわかります。そこでUXデザイナーがインタビューを行うと、ユーザーはチェックアウトの長いフォームに入力することに苛立ちや負担を感じていることがわかります。

このような定性的データがなければ、チェックアウトフォームを修正するだけではなく、価格や支払い方法、送料に問題があると判断してしまう可能性があります。

ユーザー分析のアーティファクト5つ

リサーチャーやアナリストがユーザー分析を行う際に使うUXアーティファクトには、次のようなものがあります：

ユーザーペルソナ
ユーザーストーリー
ユーザージャーニーマップ
ユーザーコンテンツマトリックス
ユーザータスクマトリックス
タスク分析

1. ユーザーペルソナ

ユーザーペルソナは、UXの調査・分析の基礎となるものです。このUXアーティファクトは、ユーザーの属性、目標、行動、信念を1ページの文書に集約し、架空の名前とプロフィール画像でユーザーグループを代表するものです。

デザインチームと製品チームはペルソナを使用して、人間的なつながりを作り、共感を得やすくします。また、ペルソナは、共感マップ、ユーザー・ジャーニー、ストーリーボード、フローなど、他のUXアーティファクトを開発するための基盤にもなります。

2. ユーザーストーリー

ペルソナは、デザイナーに製品の対象者を明確に示し、ユーザーストーリーは、そのユーザーがどのように製品を使用するであろうかを概説します。このストーリーで、ユーザーがさまざまなタスクをこなす際の環境、モチベーション、状況、考え方を理解できるようになります。

アジャイルコーチであり、Industrial Logicのシニアコンサルタントであるビル・ウェイク氏は、ユーザーストーリーを開発する際に従うべきシンプルなガイドラインを作成しました。彼のユーザーストーリーの方法論は、”INVEST “という頭字語を用いて、1回のイテレーションでビジネスとユーザーに価値をもたらします。

独立（Independent）：ユーザーストーリーは、他のストーリーに依存しないよう、自己完結している必要がある
交渉可能（Negotiable）：ユーザーストーリーは柔軟で適応性のあるものにするため、詳細すぎる説明は避ける
価値あるもの（Valuable）：ユーザーストーリーは、エンドユーザーに価値をもたらすものでなければならない
見積もり可能（Estimable）：ユーザーストーリーに必要なリソースは見積り可能であるべきである
拡張可能（Scalable）：ユーザーストーリーを軽量化することで、一定の確度でタスクと優先順位付けを行うことができる
テスト可能（Testable）：ストーリーがいつ完成したかをチームが理解できるように、受け入れ基準を説明する

ユーザーペルソナの曖昧さ解消のために、因果関係に着目してデザインされたフレームワークであるインターコムのジョブストーリもまた、ユーザーストーリーの方法論です。インターコムによると、ジョブストーリーは実装よりもモチベーションに重点を置いているため、より実用的です。

3. ユーザージャーニーマップ

testing user behavior prototype interaction

ユーザーエクスペリエンスマップやカスタマージャーニーマップともいいます。

ユーザーストーリーがモチベーションとコンテクストをもたらすのに対し、ユーザージャーニーマップは、ペルソナがタスクを完了する様子をステップごとに視覚化します。ジャーニーマップで、より価値のあるユーザー体験を生み出すためにデザイナーが最適化することができる、顧客の重要な瞬間が明らかになります。

ここでは、貴重で実用的なユーザージャーニーマップを作成するための4つのヒントをご紹介します：

真実を明らかにする：マッピングする体験に関する定量的・定性的データを、ユーザーリサーチで調べましょう。そしてウェブ解析、コールセンターのログ、顧客調査やインタビューなど、さまざまなソースを検討します。さらにユーザーデータを三角測量し、知識のギャップを埋めます。
コースを描く：エクスペリエンスマップには、レンズ（チームがジャーニーを見る際のペルソナであるレンズ、すべてのチャネルのタッチポイントであるジャーニーモデル、およびマッピングプロセスから得られたデザイン原理とインサイトである結論を含める必要があります。
ストーリーを語る：ユーザーニーズの始め、中間、終わりを描きましょう。ストーリーに欠かせないインサイトと、「あると便利」なインサイトを明確にします。マップには、すぐに目につくものと、後から身につくもののユーザーニーズの階層がないといけません。
マップを配布する：会議で発表したり、壁に貼ったり、印刷したりして、チームメンバーやステークホルダーの目に触れるようにします。全員がマップをレンズとして使い、顧客と同じように世界を見ることが目的です。

4. タスク分析

デザイナー、エンジニア、プロダクトマネージャー、そしてステークホルダーは、必ずしも自分が使うとは限らない製品や、馴染みのない業界を構築することがよくあります。タスク分析は、そのような問題を解決するために、インサイトとコンテキストを提供することを目的としています。

タスク分析では、ユーザーがどのようにタスクを完了させるかを調べ、以下のような詳細を確認します：

マインドセット
ユーザー環境
物理環境とデジタル環境における行動
タスクの継続時間
使用頻度
タスクの難易度

ユーザーに焦点を当てるユーザーストーリーやジャーニーとは異なり、タスク分析では、ユーザーが完了しなければならないアクティビティを分解します。

5. ユーザータスクマトリックス

複数のペルソナを分析する場合、ユーザータスクマトリックスを使用して、さまざまなタスクとメトリクスを比較することができます。このマトリックスで、タスクを重要な順にランク付けでき、デザイナーはメインの対象者の特定や、価値提案の検証、それに応じた製品ロードマップの優先順位の決定することができます。

以下のPaper Protosの例では、航空券を予約するための7つのタスクと3人のペルソナが表示されています。

このペルソナを比較すると、「旅行経路の検索」がユーザーにとって最も重要なタスクであり、「航空券を予約する前に旅行ガイド（荷物制限）を参照する」は、あるグループにとってのみ重要であることがハッキリわかります。

MailChimpのUXコンサルタントであるステファニー・トロース氏は、ユーザータスクマトリックスに対して、より結合的なアプローチをとっています。彼女のマトリックステクニックでは、行動と動機のコンテキストというレンズを通して見ることで、ペルソナとエクスペリエンスマップのより広いスナップショットがもたらされます。

彼女のユーザーマトリックスはより視覚的で、それによってチームがパターンを識別し、それに応じて優先順位をつけやすくなります。

6. ユーザーコンテンツマトリックス

コンテンツマトリックスは、既存のコンテンツがどのようにユーザーのニーズを満たしているかを可視化し、改善点を見つけ、コンテンツの更新に優先順位をつけるのをサポートします。製品のコンテンツマトリックスを分析することで、余計なコンテンツ、古いコンテンツ、つまらないコンテンツを排除できるのです。

ここでは、コンテンツマトリックスの主なメリットを4つご紹介します：

優先順位の鋭い認識：製品にどのようなコンテンツがあるのか（そしてなぜあるのか）を知ることで、ユーザーや製品との関連性や価値に関する質問を形成することができます。
運営上の制約への対応：たとえば、「ユーザーは頻繁なアプリのホーム画面の更新が必要だが、そのための技術的なリソースがないことが判明するかもしない」といったように、マトリックスを埋めていくうちに、解決策に対する新たな制約が見つかるかもしれません。コンテンツマトリックスでは、評価を促すことで、「ベストの次」の選択肢を発見し、誤った思い込みで前進することがないようにします。
統一言語の開発：コンテンツマトリックスにより、専門用語やスラング、その他の紛らわしい用語を避けながら、トーンと用語の一貫性を維持することができます。
正確なスケール感：製品のコンテンツ規模を把握することで、より適切なデザインの判断が可能になります。例えば、100画面と1,000画面のコンテンツを評価する場合、マトリックスによって製品のマトリックスを可視化し、それに応じてリソースの優先順位を決めることができます。

調査結果の優先順位の決め方

ユーザー調査と分析が完了すれば、ユーザーの全体像や、チームが解決しなければならない問題、そしてその優先順位が見えてくるでしょう。

優先順位付けマトリックスによって、チームはデザイン機能を可視化し、「必要」と「あれば便利」を分けることができます。多くの場合、チームは圧倒的に長い機能リストを持っており、絞り込みは困難です。

そこで、デザインの目的に優先順位をつけるためのヒントをご紹介します：

トップタスク分析：適格なユーザーに、簡単に実行できるタスクのランダムリストを渡し、上位5つを選んでもらうことで、ユーザーにとって最も重要なものを特定することができます。
ギャップ分析：優先順位をつけた機能を、重要度と満足度の高い順に評価してもらい、次に、公式の【重要度＋（重要度　ー　満足度）】を使って、機能の優先順位を決定します。
狩野モデル：ユーザーに、製品からどの機能がなくなると最も困るかを評価してもらいます。この満足度の差は、「必要な機能」と「あれば便利な機能」を示しています。
QDF（品質機能の展開）：優先順位をつけられた仕事、または上のタスクの分析からの機能のリストから始め、これと会社からの機能のリストを組み合わせます。QFDは、ユーザーの必要性を最もよく満たす機能をランク付けします。
パレート分析（80/20の法則）：この方法は、「必要な機能」と「あれば便利な機能」を素早く区別することができます。例えばトップタスクでの最多投票、最多収益など、機能を高いものから低いものへと並べ替え、合計し、各項目のパーセンテージを計算します。スコアが最も高い機能が、最も重要な機能です。
因果関係ダイアグラム：UXの問題は複雑であるため、この分析によって各問題の複数の原因を明らかにし、効果的なトラブルシューティングを可能にします。「なぜ？」と問いかけながら因果関係図を作成し、症状ではなく根本的な原因を明らかにします。
FMEA（故障モード影響解析）：これで、特定のアクションがもたらす悪影響を理解でき、機能の追加ではなく壊れている部分の修正で、製品を改善できるケースを強調することができます。FMEAは、問題の共通性、重大性、難易度に基づいて危険優先度数を算出します。

おすすめの本：The Guide to UX Design Process & Documentation.

UXPinプロトタイプから有意義な分析結果を得よう

UXPinのコードベースのデザインツールにより、デザインチームは、最終製品のような完全に機能するプロトタイプを作成できます。コードのようなユーザーインターフェースやインタラクションを作成し、実用的なユーザビリティテストの結果やステークホルダーからの有意義なフィードバックを得ることができます。

無料トライアルにサインアップして、UXPinでエンドツーエンドのデザインプロセスを強化し、顧客に高品質なユーザー体験を提供しましょう。

UXPinでより速いデザインのための9つのヒントと機能紹介

UXPinの目標は、デザイナーがデザインと構築に費やす時間を減らし、アイデアのテストと反復にもっと時間をかけられるようにすることです。UXPinには、デザイナーがより速くプロトタイプを作成し、より意味のあるテスト結果を得られるよう、多くのショートカットや機能があります。

セクションへ移動します：

1ページデザインと複数のアートボード
データのリフレッシュ
スクロール可能なコンテンツ
スタイルのコピーと貼り付け
インタラクションのコピーと貼り付け
プレビューからページを非表示にする
高度なアニメーション
アクセシビリティ機能
アイコンとフォームのビルトインライブラリ

UXPinでより速くデザインするためのヒントトップ9と仕掛けをリストアップしました。コードベースのデザインに慣れていない方は、無料トライアルにサインアップし、この記事のヒントに従って、UXPinでいかにプロトタイピングをさっと楽しくできるか是非ご確認ください。

1ページデザインと複数のアートボード

画像ベースのデザインツールでは、基本的な機能やインタラクションを作成するのに、デザイナーは複数のアートボードの複製が必要です。その結果、トランジションが「不自然」になり、本物のUX（ユーザーエクスペリエンス）を提供できないことがよくあります。

UXPinでは、アートボードを切り替えることなく、最終製品を使用するのと同じように、1つの画面に対して複数のインタラクションを作成することができます。UXPinのCalming Appは、1つのスクリーンでインタラクションとアニメーションを作成できるいい例です。

Calming Appには4つのスクリーンがあり、それぞれのスクリーンではユーザーがボタンをタップすることでマイクロインタラクションやアニメーションが発生します。アプリの「Breathe」セクションで【Start】をクリックすると、画面が完全に変化し、脈打つようなアニメーションが表示されますが、これらはすべてUXPinの1フレームでデザインされています。

UXPinのデザイナーがこの没入型プロトタイプをどのように作ったか、Calming Appを自由にダウンロードしてインストールしてみてください。UXPinのアカウントをお持ちでない方は、無料トライアルにサインアップし、ダウンロードの添付ファイルの指示に従って、アプリをインストールしてください。

データの更新

プロトタイプにダミーデータを探して追加するのは、時間の無駄に感じられるかもしれません。よく整理されたコンテンツ・ライブラリがあったとしても、コピー＆ペーストして適宜アップロードが必要です。

UXPinでは、数回のクリックでダミーデータをプロジェクトに追加したり、レイヤー名でコンテンツを一致させる機能を使ってフィールドに自動的にデータを入力することができます。

UXPinでは、Macでは【CMD】＋【SHIFT】＋【D】、Windowsでは【CTRL】＋【SHIFT】＋【D】のデータ更新のショートカットで、ダミーコンテンツの瞬時の更新も可能です。

スクロール可能なコンテンツ

使用するデザインツールによっては、スクロール可能なコンテンツの作成は時間のかかる作業ですが、UXPinのクロップとスクロール機能を使えば、わずか2クリックで縦または横のスクロールを追加できます。

ステップ1：（コンテンツがアートボードからはみ出ることになっても）すべてが見えるようにプロトタイプにコンテンツを追加します（例を参照）。
ステップ2：コンテンツが選択されていることを確認し、【選択したコンテンツを切り抜く】にチェックを入れ、縦にスクロールさせるか横にスクロールさせるか選択します。
ステップ3：コンテンツをプロトタイプの端にトリミングし、余分な部分が隠れるようにします。

プロトタイプをプレビューすると、設定にしたがってコンテンツがスクロールします。

スタイルのコピー＆ペースト

あるコンポーネントから別のコンポーネントへのスタイルのコピー＆ペーストは、たった2つのショートカットコマンドででき、2番目のコンポーネントのコンテンツに影響を与えません。

コピー：Macでは【CMD】＋【OPTION】＋【C】、Windowsでは【CTRL】＋【ALT】＋【C】
ペースト： Macでは【CMD】＋【OPTION】＋【V】、Windowsでは【CTRL】＋【ALT】＋【V】

このショートカットはスタイルをコピー/ペーストするだけです。インタラクションはコピー/ペーストしませんが、そのためのショートカットはあります :)

インタラクションのコピー＆ペースト

コンポーネントのインタラクションもコピー＆ペーストしたい場合は、このUXPinのショートカットが使えます：

コピー：Macでは【CMD】＋【SHIFT】＋【C】、Windowsでは【CTRL】＋【SHIFT】＋【C】
ペースト： Macでは【CMD】＋【SHIFT】＋【V】、Windowsでは【CTRL】＋【SHIFT】＋【V】

プレビューからページを非表示にする

「制作中のプロトタイプをステークホルダーに見せることになったが、まだ完成していない部分は見せたくない」ような時は、プロトタイプを複製して余分な画面を削除し、完成したものを見せることができます。

ただ、この方法には問題点がいくつかあります：

時間を食う
複数のプロジェクトファイルが作成され、それぞれ別々の画面が欠落する。
エラーが発生する可能性が高くなる
2つ目のプロトタイプで自身やステークホルダーが作成したメモを、オリジナルにコピーする必要がある
同じプロジェクトで作業している他の人と混同してしまう

より簡単な解決策は、他の人に見られたくない画面を非表示にして、プロトタイプのリンクを共有することですが、これはUXPinの【プレビューからページを非表示】でできます。プロトタイプに表示したくない画面を非表示にできますが、シングルクリックで再度表示することができます。

高度なアニメーション

UXPinはHTML、CSS、Javascriptをレンダリングするため、デザイナーはコードのようなインタラクションやアニメーションを作成することができ、UXPinのプロパティパネルでアニメーションの種類を選択して設定を微調整することで、思い通りの結果を得ることができます。

条件付きインタラクションがあれば、デザイナーはインタラクションを次のレベルに引き上げることができます。コード化された製品を正確に表現するダイナミックなユーザーエクスペリエンスを引き起こすべく、【if-then】と【if-else】のルールセットを作成してみましょう。

UXPinの高度なアニメーションがあれば、デザイナーはUXを実現する没入感のある直感的なプロトタイプを作成することができるのです。

アクセシビリティ機能

インクルーシブな製品を作ることの重要性は誰もが知っていますが、デザイナーはUIのテストにプラグインや外部ツールを使用しなければならないため、アクセシビリティが面倒に感じられることがあります。

内蔵されているアクセシビリティ機能があれば、デザイナーは色の選択をテストするためにUXPinを離れる必要がありません。UXPinには、その場でテストするためのツールが以下のように2つ用意されています：

コントラストチェッカー：プロトタイプをWCA（ウェブコンテンツ・アクセシビリティ・ガイドライン）規格に照らし合わせ、レベルAAとAAAに対応したインジケータでチェック。
色覚異常シミュレーター：8種類の色覚異常を切り替えて、色覚異常のユーザーがプロトタイプをどのように見るかをテスト。

アイコンとフォームの内蔵ライブラリ

プロトタイプをサッと作りたいとき、フォームやアイコンを最初から作るのはとても時間がかかります。多くのデザインツールにはサードパーティーのライブラリが用意されていますが、その中から必要なものを探し出すのもまた大変です。

UXPinには、GoogleのMaterial UI、Font Awesome、Pixel、Retinaのアイコンセットなど、膨大なアイコンのライブラリが内蔵されており、また、自身のSVGを読み込んで、UXPin内での編集も可能です。

UXPinには、デザイナーがそのまま使用することも、ニーズに合わせてカスタマイズすることもできる基本的なフォームエレメントも含まれています。

UXPinで高度なプロトタイピングを試してみよう

このようなヒントやトリックをご自身で実際に試してみませんか？UXPinの高度なデザインおよびプロトタイプ機能をご紹介するサンプルプロジェクトがいくつかあります。無料トライアルにサインアップして、コードベースのデザインがどのようにプロトタイプに革命をもたらし、顧客にとってより良いユーザー体験を生み出すのかぜひご確認ください。

デイブ・マルーフ氏が語る – デザインバリューに関する5つの力強い見解 –

デイブ・マルーフ氏は、DesignOpsのエキスパートであり、業界のベテランです。彼は、ブログ記事、インタビュー、講演などを通じて知識を共有し、このプラクティスの発展に貢献しています。

UXPinが開催した無料ウェビナーに彼を招き、エンタープライズ・デザインに対する総合的なデザイン運営のアプローチに関する彼の見解をシェアして頂きました。

UXPin Mergeは究極のDesignOpsツールです。デザイナーとエンジニア間のギャップを埋めるコードベースのデザインツールで、DesignOpsの多くの課題を簡素化および自動化します。無料トライアルにサインアップして、MUI統合による強力なMergeテクノロジーなど、UXPinの高度な機能をぜひお試しください。

デイブ・マルーフ氏によるDesignOpsの5つのポイント

デイブの講演やブログ記事から、デザイン運営の改善のための5つのアイデアをまとめました。このリソースへのリンクは、本記事の最後にあります。

1：”意図的な空間 “を創る

彼はAmplify Designの中で「意図的なスペースとプロセスがいかに思わぬ発見をする能力、創発、そして探求を促すか」 について話しています。彼は、チームが作業や連携、意見出しをする場であるスペースは、最も「デザイナーの仕事を増幅させる価値あるピース」の1つであると述べています。

彼のお気に入りのワークスペースは、ホワイトボードに囲まれたチームポッドの中央にハイトップデスクかポディウムが置かれたもので、このセットアップは、デザイナーと部門を超えたチームの両方に有効です。

チームメンバーはホワイトボードに向かって座るので、集中力が途切れることはなく、また、走り書きしたメモやアイデアをホワイトボードで確認することもできます。

中央にあるHightopは、連携を促すためのものです。チームメンバーは質問、アイデア、プレゼンなど、このハイトップを使って他のメンバーに向かって行います。この「意図的な空間」は、連絡と連携を促しながら仕事を進めることができるのです。

デイブの意図的な空間の手法は、同じくDesignOpsのエキスパートであるサロメ・モルタザヴィ氏の、プロセスよりもプラクティス（人々の仕事の仕方）を最適化するプラクティス主導型のアプローチと一致しています。

サロメは、3月にUXPinが主催したデザインバリュー会議で、デザイン業務へのアプローチについてのアイデアをいくつか発表しています。

2：デザイナーが増幅させるものを確定する

デイブはDesignX Communityの有名な講演「Amplifying Design Value」（彼のMediumアカウントでも公開）で、Opsが組織内でデザインの価値を高めるための方法を概説しています。

形が与えるもの：形が価値を生む仕組み線、レイアウト、構成、色、文字、テクスチャー、ボリューム、ネガティブスペース、並置、整列、流れ
明瞭さ：ユーザーがデジタル製品を使いこなすための情報アーキテクチャから
行動への適合性：実世界の行動を効率化する、あるいは補完するような直感的なユーザー体験をいかにデザインで提供するか
探求：デザイナーがスケッチやトライアルを通じて可能性を発見する方法

3：より良い未来のためのデザインマニフェストを書く

デイブは、形を与えること、明確にすること、行動に適合させること、そして探求することを褒め称えるデザインマニフェストを書きました。このマニフェストは、「いいデザインが出るのは、、、」という接頭辞から始まります。

いいデザインが出るのは、、、：

さまざまな活動が最も適切なリズムで行われる時
意図的なスペースとプロセスが偶然素晴らしい発見をする能力、創発、探索を促す時
定量的なデータと定性的なデータをバランスよく統合し、実用的なインサイトを得ることができる時
連携とインクルージョンが、協調的かつ集中的な開発とバランスがとれている時
物語の多元性の探求で、人々が将来にわたって意味を見出している時
デザイナーの魅力やモチベーションが、他の人とは違うことを自身で理解している時
質の高いデザインアウトプット、そして質の高いプラクティスとは何かを自身で相互に理解し、評価する時

4：デザインプログラム管理の4つの法則を発見する

デイブは、デザインプログラムマネージャーがデザインワークを管理する際に考慮しなければならない4つのベクトルや法則を挙げています：

忠実度：エンド・ツー・エンドのデザインプロセスにおいて、さまざまな忠実度に対応する適切なサポートを提供する
連携：連携が自然に起こるような環境を整え、デザインプロセスの重要な部分で連携を予定に入れる
結束：チームとプロジェクトが「単一のビジョン」に向けて確実に結束して機能する
振り返り：チームが仕事、思考、創造性を振り返り、評価するための時間と空間をつくる

5：DesignOpsによるデザインバリューの向上

デイブは「How does DesignOps increase your design value?」で、DesignOpsのリーダーがデザインの価値を広めることができる3つの領域を特定しています：

従業員

使えるリソースで最高の人材を採用、育成、定着させる。デイブの言う「採用」は、最も経験豊富で高価な「ロックスター」を引き寄せることだけを指しているわけではありません。

社員の育成への投資や、最も高い潜在能力があり強いリーダーシップを持った人材の発掘は、長い目で見ると良いことが多いのです。彼は人事を4つの側面から見ています：

オンボーディング：優秀な社員をいかに早く育てるか
報酬と認識：組織では、良い仕事はどのように評価されるか、またその報酬は各個人に適切か
人材育成：組織で、成長やリーダーシップのための道筋や機会が作り出されているか
昇進：キャリアアップの基準を明確にすることで、期待値を管理し、適切なチームメンバーを採用するための基準を設定できる

インフラ・ツール

DesignOpsのリーダーには、ツールの賢い選択が必要です。「デジタルの世界では、デジタルとアナログのツールが積み重なっていて、クラフトの接点でそのツールの使用に影響を与えます。」とデイブは指摘しています。

UXPin Mergeにたどり着くまでに、PayPalのエリカ・ライダー氏がいかに多くのデザインツールをテストしたかが、その一例です。彼女は、非デザイナーであるPayPalの社内製品チームが、新製品をデザイン、プロトタイプ、テスト、ハンドオフできるようなデザインツールを必要としていました。

UXPin Mergeを使用すれば、PayPalの製品チームはコンポーネントをドラッグ＆ドロップして完全に機能するプロトタイプを、従来の画像ベースのデザインツールを使用する経験豊富なUXチームよりも8倍速く構築することができます。

チームメンバーが素晴らしい仕事をするには、技術に合った道具を見つけることが重要だということです。

ガバナンスとワークフロー

ガバナンス主義は、チームメンバーの作業や新しいツールやプロセスの採用を妨げたり、遅らせたりすることがよくあります。DesignOpsは、ガバナンスとワークフローを評価し、障害物を取り除いて、デリバリーの品質とペースを向上させなければいけません。

デイブ・マルーフ氏からもっと学ぶ

デイブの知識と経験から、より多くを学ぶためのリソースをご紹介します：

A Guide to UX Leadership – UXPinが提供する無料のe-Book
Holistic Design Operations – 2022年2月に開催されたUXPin主催の無料ウェビナー

UXPinでデザインの価値を上げる

UXPinのコードベースのデザインツールは、デザイナーとエンジニアが同じ言語で会話することで、より良い連携とスムーズなデザインのハンドオフを促します。エンドツーエンドのデザインプロセスを強化し、より大きなデザインROI（投資収益率）を実現しましょう。無料トライアルにサインアップして、UXPinの高度な機能をぜひすべてお試しください。

作成されるべき最も重要な UXアーティファクト

デザイナーは、製品開発プロセスを通じて多くのUXアーティファクトを作成します。こういった記録で、デザインチームは以前の作業を反復して、ステークホルダー、デザインのハンドオフ、研究開発、および将来のプロジェクトのための貴重なドキュメントを提供しやすくなるのです。

本記事では、一般的なUXアーティファクトと、各アーティファクトが次のアーティファクトをどのように導くかについてみていきます。また、チームやステークホルダーによって、どのUXアーティファクトが最も重要であるかについてもお話します。

デザインファイル、ドキュメント、コンポーネント、プロトタイプ、ワイヤーフレーム、モックアップなどのUXアーティファクトを一元化したデザインツールで管理しましょう。無料トライアルにサインアップして、UXPinの高度なコードベースデザイン機能をぜひお試しください。

UXアーティファクトとは

UXアーティファクト（またはUX成果物）とは、デザインチームがプロジェクト中に作成する調査記録、スケッチ、デザインファイル、プロトタイプ、報告書、その他のドキュメントを指します。

UXアーティファクトの主なメリット6点

プロジェクトスコープを概説し、ビジネス、ユーザー、技術の要件を確定する（UXデザイン要件文書）
デザインプロセスを文書化することで、デザインチームは過去の作業を反復し、重複を避けることができる
デザイン思考のプロセスやさらなる意思決定の指針となるリサーチを統合する
チームとステークホルダー間の連絡と連携を簡素化する
デザインチームがユーザーのニーズやペインポイントを調査・理解できるようになる
新しいチームメンバーのオンボーディングのための貴重なドキュメントとなる

UXアーティファクト 3種

問題をシンプルにすべく、この記事では、UXアーティファクトを以下を含めた5つのカテゴリーに分類しています：

リサーチ
デザイン
テスト

1. アーティファクトのリサーチ

アーティファクトのリサーチには、デザインプロセスを通じたリサーチに関連するあらゆるものが含まれます。ここでは、一般的なアーティファクトのリサーチをいくつかご紹介します：

UXデザイン要件書
リサーチプラン
ユーザーリサーチ
競合他社リサーチ
市場リサーチ

その中のいくつかを、より詳しく見ていきましょう。

2. ユーザーリサーチ

ユーザーリサーチのアーティファクトは、初期のデザインプロセスには欠かせないものであり、この資料でデザイナーがユーザーを理解し、人を中心としたデザインを決定できます。ユーザーリサーチのアーティファクトには、以下のようなものがあります：

ペルソナ：ユーザーグループを表す架空の人物。 UXデザイナーに、共感と理解を集中させるための人間的な表現を提供。
エンパシーマップ：ユーザーが問題や状況に遭遇したときに、何を考え、何を言い、何を感じるかを可視化し、ユーザーに共感するための方法。
ユーザージャーニーマップ：ユーザーがあるタスクを完了するまでの道のりを段階的に可視化したもの。
ストーリーボード：ジャーニーマップに似ているが、アイデアやコンセプトを視覚化するためにイラストやストーリーテリングにより重点を置いている。
ユーザーフロー：eコマースのチェックアウトのように、ユーザーがデジタル製品を利用するまでの流れを最初から最後まで可視化したもの。

3. 競合他社リサーチ

UXデザイナーは、競合他社や市場の調査を通じて、製品の需要や機会のギャップをより広く理解することができます。競合他社リサーチの典型的なアーティファクトは、デザインプロジェクトの開始時に完了した競合他社リサーチをまとめた文書である、競合分析レポートです。

デザインアーティファクト

デザインアーティファクトは、デザイナーがデザインプロセスで作成するアーティファクトの大部分を占めると思われ、次のようなものがあります：

スケッチ＆ペーパープロトタイプ
ワイヤーフレーム
サイトマップ/情報アーキテクチャの図式
モックアップ
プロトタイプ
スタイルガイド

1. スケッチとペーパープロトタイプ

デザイナーは、デジタルプロセスに移行する前に、スケッチやペーパープロトタイプを作成し、アイデアを反復しています。また、デジタルワイヤーフレームやモックアップをデザインする際には、こういった紙のアーティファクトをテンプレートの参考資料として使用します。

2. ワイヤーフレーム

ワイヤーフレームは通常、デザイナーが紙からデジタルに移行する際に最初に作成するアーティファクトです。デザイナーはワイヤーフレームを使って、各ユーザーインターフェースの構造とレイアウトを決定すると同時に、低忠実度のプロトタイピングの基礎を提供します。

3. サイトマップ/情報アーキテクチャの図式

サイトマップ（情報アーキテクチャとも呼ばれる）は、各製品やウェブサイトのページと、それらのリンク方法を視覚化したものです。このような情報アーキテクチャは、デザインと開発におけるいくつかの重要な決定を導くため、必要不可欠なUXアーティファクトになります：

プロジェクトに必要な総画面数とそのデザイン法
各ユーザーフローの構成法
ボタンやリンクなど、画面間の接続に使用するUI要素の設定
コンテンツとナビゲーションの優先順位の設定
ヘッダーとフッターなど、ナビゲーションのリンクの配置設定

4. モックアップ

モックアップは、UIデザイン要素を含む最終製品の外観を正確に視覚的に表現したものです。これらのデザインは静的なものですが、忠実度の高いプロトタイプの土台となるものです。

5. プロトタイプ

デザイナーは、デザインプロセスを通じてアイデアを反復する際に、低忠実度プロトタイプと高忠実度プロトタイプを作成します。低忠実度のプロトタイプで、デザイナーがユーザーフローと情報アーキテクチャをテストでき、高忠実度のプロトタイプは、ユーザーテストとステークホルダーのフィードバックのための貴重なアーティファクトになります。

また、高忠実度なプロトタイプは、エンジニアが開発プロセスにおいて参考にし、各画面のレイアウトや、製品がどのように機能しなければならないかを把握するのに、このアーティファクトが使われます。

ただ、これらは忠実性や機能性に欠けるため理解しにくく、それによりデザイナーとエンジニアの間に摩擦が生じることが、画像ベースのプロトタイプの課題として挙げられます。

UXPinはコードベースのデザインツールであり、デザイナーとエンジニアが同じ言語で会話することができます。デザイナーは、UXPinのステート、インタラクション、変数、エクスプレッションなどの高度な機能を使って、コードのような忠実度と機能性を持つプロトタイプを構築できます。無料トライアルにサインアップして、UXPinがエンドツーエンドのデザインプロセスをどのように強化できるかをぜひご覧ください。

6. スタイルガイド

製品のスタイルガイドは、色、タイポグラフィー、ロゴ、ブランディングのガイドライン、その他のビジュアルおよびインタラクションデザインの指示など、重要な情報をデザイナーに伝えます。スタイルガイドは、デザイナーの一貫性の維持や、デザインドリフトの低減をサポートするため、重要なUXアーティファクトです。

製品のスタイルガイドと連動しているのが、カード、ナビゲーションメニュー、CTA（Call to Action）など、ユーザビリティの問題を解決するための部品群である「パターン・ライブラリ」です。

アーティファクトのテスト

デザイナーがデジタル製品を改善するための問題や機会を特定するための貴重なデータは、テストによってもたらされ、このようなアーティファクトには通常、製品ロードマップ、プロジェクトのKPI（重要業績評価指標）、および全体的なUX戦略のための重要なUXメトリクスが含まれます。

また、UXリサーチャーは、ユーザビリティテスト中にデータや文書を作成しますが、これは問題や機会の特定や、デザインのアイデア検証のために不可欠です。

アーティファクトのテストには、以下のようなものがあります：

アンケート報告
ユーザビリティレポート
分析レポート
UX監査

1. アンケート報告

アンケートの結果は、通常1ページ程度の報告書になり、デザイナーはこのデータを使って、意思決定やステークホルダーへのプレゼンテーションを行ったりします。

2. ユーザビリティレポート

ユーザビリティテストは、ユーザーエクスペリエンスのデザインプロセスの重要な部分であり、各ユーザビリティテストは、具体的な問題点と修正のための推奨事項を記載したレポートが作成されます。

3. 分析レポート

デザインチームへのユーザーの行動やデジタル製品の操作方法に関するインサイトは、分析によってもたらされます。アナリストは、デザイナーが知りたいことや分析したいことに応じて、さまざまな分析レポートの作成ができます。

デザイナーは、分析レポートを使って問題や機会を特定し、調査やテスト結果を検証します。

4. UX監査レポート

「UX監査とは、既存のデジタル製品がビジネス、ユーザーエクスペリエンスやアクセシビリティの要件を満たしているかどうかを審査するQA（品質保証）プロセスである。」

UX監査レポートは、リンク切れの修正や古くなったコンテンツの交換など、実行可能な次のステップを含むプロセスをまとめたものです。

UXアーティファクトは誰が使うのか

NN Group（Nielsen Norman Group）の調査では、デザイン部門以外でUXアーティファクトを使う主なエンティティを3つ特定しています。：

社内のステークホルダー
社外ステークホルダー/顧客
エンジニアリングチーム

社内のステークホルダー

ワイヤーフレーム
高忠実度のインタラクティブプロトタイプ
競合分析レポート
ユーザージャーニーマップ
テストレポート

社外のステークホルダー

競合他社分析レポート
ユーザージャーニーマップ
テストレポート
忠実度の高いモックアップとプロトタイプ

Engineering Teamsエンジニアチーム

サイトマップ
ユーザーフロー
スタイルガイドとパターンライブラリ
高忠実度のプロトタイプとモックアップ
ワイヤーフレーム
デザインハンドオフ文書

UXPinでの UXアーティファクトの作成、共有、管理

UXPinは、UXアーティファクトの作成、共有、管理など、デザイナーにエンドツーエンドのデザインソリューションを提供します。そのうちのいくつかを詳しく見ていきましょう。

1. ワイヤーフレーム、モックアップ、プロトタイプ

ワイヤーフレーム、モックアップ、プロトタイプのデザインは、アイデアの開発とテストには欠かせません。デザイナーは、UXPinを使ってこのようなアーティファクトをデザインし、チームメンバーと共有して連携を行ったり、ステークホルダーと共有してフィードバックを得たりすることができます。

UXPinのコメント機能では、チームメンバーやステークホルダーがデザインに対するフィードバックを提供し、デザイナーにコメントを割り当て、アクションを起こした後に「解決済」として作成することができます。

このようなアーティファクトやフィードバックを一箇所に集めることで、デザイナーはテストと反復を速やかに行い、デザインプロセスを効率化することができるのです。

2. デザインシステム

UXPinの直感的なデザインシステム機能により、チームは以下のようなプロジェクトのビジュアルデザイン要素を構築、共有、管理することができます：

コンポーネント
色
タイポグラフィ
アセット

専任のデザイナーやDSチームは、説明／ドキュメントの追加や、チームメンバーが不正に変更できないような権限の設定など、プロジェクトのデザインシステムを管理することができます。

UXPinのデザインシステムは統合された機能であるため、追加のプラグインやアプリケーションを必要とせず、すべてを1つのデザインツールで集中管理することができます。

3. ドキュメンテーション

デザインハンドオフは、デザイナーやエンジニアにとってストレス満載の作業であることはよく知られており、デザイナーは、デザインやプロトタイプの説明のために、複数のフォーマットで複数のアーティファクトを作成することがよくあります。

UXPinはデザインハンドオフ用に最適化されているため、デザインチームはプロトタイプに関するドキュメントを作成できます。もう外付けのPDFや説明ビデオで、デザイナーに「こうすればいいんだよ」と説明する必要はありませんね。

また、UXPinはスペックモードで追加のドキュメントを自動的に作成し、それによってエンジニアは以下のようなことができます：

プロパティの確認
距離測定
スタイルガイドを読む（スターターCSSを含む）

また、エンジニアはUXPinのコメントを通じてデザイナーと連絡をとり、特定のUI要素について質問することができます。

4. プレビューとシェア

多くのデザインツールはプロトタイプやテストの機能を備えておらず、また、正確なテストには適さない限定的な機能を提供しているものもあります。

UXPinのプレビューとテスト機能により、デザイナーはボタンをクリックするだけでプロトタイプを立ち上げることができ、プレビューと共有により、リサーチャーはユーザーとテストを実施し、テスト中に素早く変更して反復することができます。

UXPinを製品設計に活用しよう

UXPinは、ユーザーにより良い体験を提供し、最も価値のあるUXのアーティファクトを一箇所で管理することができます。無料トライアルにサインアップし、コードベースのデザインが製品のデザインプロセスにどのような革命をもたらすかを是非ご覧ください。

ライブデータプロトタイプとは？

デザインツールを使ったプロトタイピングの課題のひとつとして、忠実度と機能性の不足で、デザイナーが包括的で正確なユーザーテストを完了することができないという点があります。

ライブデータプロトタイプは、ユーザー入力のデータでコードの動的な体験を複製することで、このプロトタイプの問題を解決しようとするものです。デザイナーは、ライブデータ機能を実行できるコードベースのプロトタイプを構築するのに、フロントエンドデベロッパーやUXエンジニアとの共同作業が必要になります。

ライブデータプロトタイプとは

ライブデータプロトタイプは、例えばサインアップフォームからユーザーの名前を取得してカスタムウェルカムメッセージを作成するといったように、ユーザー入力、データベース、APIからの情報を使用して、最終製品のようなダイナミックでカスタマイズされたエクスペリエンスを作成します。

ライブデータプロトタイプは通常、API、OTPのメール/テキスト、その他の複雑なユーザーインタラクションなど、ユーザーによって引き起こされる単一のタスクまたはシーケンスのテストをしますが、プロトタイプは、おそらく1つまたは2つのスクリーン、あるいは1つのコンポーネントになります。

リソースを大量に消費するプロセスであるため、デザイナーは、ユーザビリティの問題を伴う可能性や製品の障害を引き起こす可能性のある機能のために、このようなライブデータプロトタイプを準備します。そのため、構築のための時間とリソースを正当化することができるのです。

あいにく、デザイナーは画像ベースのツールを使ってライブデータプロトタイプを作ることができず、ベクターデザインのツールを使う場合は、エンジニアにコードで開発してもらうのが一般的ですが、これはかなり時間とコストがかかる作業です。

とはいえ、代替手段はあります。UXPinのようなコードベースのデザインツールやその革新的なMergeの技術で、チームがデザインとコードで同じUI要素を使用できるようになり、それにより同じ信頼できる情報源を使用することができます。UXPinがどのように機能するかは、これから見ていくことにしましょう。

ライブデータプロトタイプの構築法

製品デザインチームには、ライブデータプロトタイプを構築する際に選択肢がいくつかあります：

コード： HTML、CSS、Javascriptは、正確で実用的なフィードバックをもたらす最終製品と同じ機能性と忠実性を提供するが、デザイナーにはそれらを構築するエンジニアが必要。
ローコードビルダー：エンジニアを介さず、プラットフォームの制約の中でプロトタイプを構築できるが、デザイナーがテストできる内容は限定される。
デザインツール：UXPinのようなコードベースのデザインツールで、デザイナーが実際のデータ、API、コードコンポーネントなどを使って構築、プロトタイプ、テストを完全にコントロール可能。

ライブデータ vs. リアルデータ

ライブデータとリアルデータのプロトタイプの識別は重要です。ライブデータプロトタイプは、ライブで動的なデータを提供し、情報はソースと同期して動的に変化します。以下のように、名前とメールアドレスを入力する基本的なサインアップフォームを見てみましょう：

名前ジョー・キング
メール： joeking@uxpin.com

ライブデータプロトタイプでは、ジョーが自身の名前とメールを入力することができ、気分次第で別のメールアドレスに変えたり、スペル違いもできます。つまりライブデータプロトタイプは、ジョーが入力したデータをそのまま捉えるのです。

一方、リアルデータプロトタイプは静的なものです。フォームフィールドが機能せず、データを取得できないため、デザイナーはジョーの情報を使ってリアルデータプロトタイプへの事前入力が必要です。プロトタイプはジョーの本当の名前とメールを使用しますが、情報は静的で、変更やインタラクションへの反応はできません。

ライブデータプロトタイプの例

デザイナーは、UXPinのコードベースのデザインツールを使って、ライブデータプロトタイプを構築することができます。UXPinの無料サインアップフォームテンプレートは、ステート、変数、条件付きインタラクションを使って、メールとパスワードの有効化と個別化されたメール確認をシミュレーションするいい例です。

このプロトタイプは，ユーザーの入力に反応し、メールとパスワードのフィールドにエラーメッセージを表示します。パスワードは8文字以上で、メールは正しくフォーマットされていなければいけません。もし、ユーザーが何も入力せずに「SIGN UP」ボタンをクリックすると、該当する入力欄の下には「空白にできません」というエラーメッセージが表示されます。

UXPinの無料サインアップフォームのテンプレートは、このような手順で編集することができます。

ライブデータプロトタイピングを使うタイミング

このリストは決して完全なものではないですが、以下はライブデータプロトタイプの最も一般的な使用例です。

1. ユーザートリガー機能

ライブデータプロトタイピングは、ユーザーデータやインタラクションに依存する通知やAPIをテストするのに有益であり、例えば、テキストやGoogle Authenticatorを使用した2段階認証を設計している場合、ライブデータプロトタイプでのこの機能のテストは非常に重要です。

2. MVPテスト

ライブデータプロトタイプは、MVP（Minimum Viable Product：ユーザーに必要最小限の価値を提供できる製品）をテストしたいスタートアップ企業にとって最適です。このMVPで、アイデアの望ましさ、実行可能性、実現可能性をテストし、製品開発プロセスにコミットする前に、テストと反復を行うことができます。

このようなライブデータプロトタイプは、概念実証のための正確な結果を得るのに十分包括的なものですが、無駄がないので、構築や変更に時間がかかりません。

3. A/Bテスト

マーティ・ケーガン氏は、SVPG社（Silicon Valley Product Group）が製品発見時のA/Bテストにライブデータプロトタイプを使用する方法について説明しています。製品チームは、開発に着手する前に、同じ画面やフローの軽量な2つのオプションを作成して、最適なオプションをテストすることができます。

画像ベースのツールによるライブデータプロトタイピングの長所と短所

長所1 – 有意義なステークホルダーのフィードバック

画像ベースのプロトタイプの課題の一つは、デザイナーがステークホルダーにリアルな製品体験を提供できず、賛同が得られにくいことです。画像ベースのプロトタイプでは、ステークホルダーやユーザビリティの関係者は、自らが情報を入力するか、アプリが複雑なタスクを実行したことを「イメージ」しなければいけません。

ライブデータプロトタイプだと、ステークホルダーの入力へ反応し、動的で個別化されたユーザーエクスペリエンスを実現することで、彼らにに製品の正確な表現が提供されるのです。

長所2 – ユーザビリティテストの改善

UXデザイナーは、デザインを引き渡す前にユーザビリティの問題をテストして解決することを目標としています。ライブデータプロトタイプで、忠実度と機能性が大幅に向上され、デザインチームにユーザーテストからの実用的なフィードバックがもたらされます。

たとえば、フォームのエラーがユーザーの問題解決に役立っているかどうかを、デザイナーはどのようにテストすればよいのでしょうか。ライブデータプロトタイプの動的な性質により、デザイナーはスペルミス、パスワード認証、メールフォーマットなど、複数のシナリオをテストすることができます。

長所3：エラーの減少

ライブデータのテストにより、デザイナーはデザインプロセスにおいて、より多くのユーザビリティの問題を解決することができます。エラーが少ないということは、手直しが少ないということであり、企業の人件費の削減に繋がります。

短所1：プロトタイピングに時間がかかる

ライブデータプロトタイピングは、プロトタイプを開発するのにエンジニアに依存しています。ドラッグ＆ドロップ式のデザインツールとは違って、コーディングには時間がかかり、また、プロトタイプの構築には多くのチームメンバーも必要であり、結果としてコスト増と市場投入までの時間の遅れを招きます。

短所2：賛同の獲得

コーディングスキルを持つデザイナーやUXエンジニアでない限り、ライブデータプロトタイプの構築は、デベロッパー抜きには不可能です。つまり、エンジニアリングチームやステークホルダーの賛同が不可欠なのです。

短所3：限られた範囲

ライブデータのプロトタイプを作るには時間とリソースが必要なため、デザイナーが作成やテストできることは限られています。そのため、デザイナーは通常、正確な結果を必要とする大きな問題に対して、このプロトタイプを準備します。

UXPinでエンジニアいらずのライブデータプロトタイピング

UXPinのようなコードベースのツールを使えば、デザイナーは高度なライブデータプロトタイプを、エンジニアにそれほど頼らずに構築することができます。 UXPinプロトタイプは、デザイナーがテストをする際に有益なだけでなく、エンジニアが最小限の文書と説明ですべてがどのように機能するかを正確に確認できるため、デザインハンドオフのプロセスも効率化されます。

機能的なユーザー入力

大抵のプロトタイピングツールはフォーム入力が機能しないため、ユーザーデータに依存する機能をテストすることができませんが、UXPinのコードベースのプロトタイプには、デザイナーがコードを模倣するようにプログラムできる機能的な入力が備わっています。

UXPinのサインアップフォームの例には、一般的にコードプロトタイプを必要とするよくあるエラーや認証を、デザイナーがどのようにテストできるかが示されています。

UXPinでAPIを使用する

デザイナーは、会議予約アプリにGoogleカレンダーの招待状を送るなど、UXPinのプロトタイプをwebhooks経由で他の製品やサービスに接続するのにIFTTTを使うことができます。

IFTTTには、メール、SMS、プロジェクト管理、IoT製品、チャット、SNSなど、UXPinアプリに接続できるサービスが700以上あります。

IFTTTを通じて外部サービスを統合することで、デザイナーはエンジニアの手を借りずに数クリックでライブデータのプロトタイプを接続することができ、UXPinには、デザイナーがAPIデータの送受信ができるように、GETまたはPOST HTTPリクエストのアクションがあります。

リアルデータの取り込み

デザイナーは、JSON、Google Sheets、またはCSVを使用してリアルデータをUXPinプロトタイプに取り込むこともできます。UXPinでは、レイヤー名でコンテンツを一致させる機能や、画像用のUnsplashを使用して、ダミーデータをフィールドに入力することもできます。

このようなコンテンツやデータ機能により、デザイナーは、ライブデータ、リアルデータ、ダミーデータなど、ソースに関係なく、あらゆるフィールドにデータを入力することができます。

UXPin Mergeによる完全に機能するプロトタイプ

デザイナーはUXPin Mergeを使用して、ライブデータプロトタイプを次のレベルに引き上げることができます。デザイナーがコードコンポーネントを使用して完全に機能するプロトタイプを構築できるように、デザインシステムやコンポーネントライブラリをUXPinに同期させましょう。

Merge を使用すると、デザイナーはコードを使用するエンジニアと同じ機能を備えた忠実度の高いプロトタイプを作成できます。コードを書く代わりに、デザイナーはコンポーネントをドラッグ＆ドロップするだけで、ライブデータプロトタイプの構築ができるのです。

以下は、デザイナーが Merge を使用して作成できるライブデータプロトタイプの例です：

完全な機能を持つ日付ピッカー
ユーザーの入力に応じて変化するグラフとチャート
ユーザーがフィルタリング、仕分け、編集できるデータグリッド
ページネーションと検索フィールドの機能
サインアップ、メール購読などの各種フォーム
eコマースと注文フロー

Merge のライブデータプロトタイピングは、デザイナーがプロトタイプを作成するのにエンジニアに頼る必要がないということです。また、追加リソースを正当化するために、毎回ステークホルダーから賛同を得る必要もありません。

また、Merge はコードベースのプロトタイピングを組織の他のメンバーにとってもより身近なものにします。ちなみに、デザインツールの経験がほとんどない PayPal の製品チームは、従来のデザインツールを使用する経験豊富な UX デザイナーよりも Merge を使用した方が 8 倍も速くプロトタイプを作成することができます。

UXPin Mergeを使用すると、すべてのプロトタイプを没入型ライブデータプロトタイプにすることができ、また、デザイナーはこれらの完全に機能するプロトタイプを、従来の画像ベースのデザインツールよりも速やかに構築することができます。

世界最先端のデザインツールでプロトタイプとテストを始めてみませんか？無料トライアルにサインアップして、UXPinで、顧客により良いユーザー体験の提供、デザイナーとデベロッパーの連携の強化、エラーの削減、エンドツーエンドのデザインプロセスの効率化をぜひご体験ください。

アプリデザイン戦略に取り入れるべき – ベストプラクティス７選 –

なぜTwitterはユーザーの心をつかむのでしょうか。Amazonの何が私たちを魅了し続けるのでしょうか。

モバイルアプリの素晴らしいデザインは、突然生まれるものではありません。最初のワクワクするようなひらめきだったら突然パーンと生まれるかもしれませんが、それをユーザーに愛される具体的な製品にするには、強力なモバイルアプリのデザイン戦略が必要なのです。アプリを流行らせたいのであれば、既存の戦略に加えるべき「ベストプラクティス」があります。

もしそのベストプラクティスをすでにいくつか実践しているのであれば、どこに改善点があるか検討してみるのもいいかもしれません。

本記事でご紹介する7つのベストプラクティスはデザインプロセスの中核であり、後付けでもなければ、あればいいというものでもないので、アプリのデザイン戦略に最初から確実に組み込みましょう。そうすることで、最もうまくいくアプリを構築できるのです。

アプリのデザイン戦略を立てる – ベストプラクティス7選

1. ターゲット層を徹底的に知る

いいモバイルアプリのデザインは、ユーザーを中心に展開されるものです。もし、デザインプロセスのどの要素も、「ユーザーにとって何が良いのか」と答えることができないのであれば、それは手直しや見直しが必要でしょう。そして、ターゲットとなるユーザーを深く理解することが、ユーザー中心のアプリを作る唯一の方法です。彼らは誰なのか？彼らは何を望んでいるのか？なぜあなたの競合他社が好きなのか？どこが嫌なのか？プロファイリングするかのように全て調べましょう。潜在的なユーザーについて知るには、以下の方法が使えます：

競合の分析：競合するアプリを特定し、調査に基づいた大量のメモと実用的なインサイト作りましょう。競争の激しい市場なので、上位3～5社の競合他社に限定するのが簡単かもしれません。ソフトウェアや製品のレビューサイトを利用して、ユーザーの好みを把握しましょう。的確なアプリデザインのアイデアが生まれるはずです。
SNS： SNSのプラットフォームには、競合がどのようにブランドを位置づけているかを知るための良いインサイトがあり、オーディエンスの好みや、彼らにとって何が本当に重要なのかが見えてきます。そして何より、ユーザーがライバルにどのように関わっているかがわかります。このようなインサイトで、自身のアプリデザイン戦略が完全に見直されるのです。
アンケート、インタビュー、フォーカスグループ：ユーザーの口から直接きましょう。潜在的なユーザーの思考や感情を理解するには、直接話を聞く以外に方法はありません。アンケート、対面・電話インタビュー、フォーカス・グループなどの方法がありますが、例えば座談会では、人によっては回答に困り、自分の本心ではないけど尋ねる側が期待しているであろう回答を出す人もいるかもしれないので、色々な方法組み合わせることで、より多くの情報を得ることができます。

2. アプリのデザインアイデアを明確にする

あなたのアプリは何をするものですか？その回答は当たり障りのないものではなく、ぼやっとしたものでもなく、一言で済ませるようなものでもありません。アプリの目的は具体的でなければいけません。そうでなければ、アプリの開発はリソースを浪費することになるからです。アプリのデザインアイデアを明確にすることで、関わる人全員が同じ方向に進むことができます。デザインチームと開発チームの各メンバーは、自分たちが何を作っているのか、そしてそのコンセプトの実現のために自分の役割はどうあるべきかがわかるのです。基本的な要件として、以下を知っておく必要があります：

このアプリのデザイン案の目的
誰に向けて作るのか
どのように使われるのか
他のアプリではなくこのアプリを選ぶべき理由
必要なリソース
成功度の測定方法

3. 予算の把握

開発プロセスの初期段階で、モバイルアプリの開発予算を設定しましょう。これにより、製品にどんどん機能を追加していくことによる開発コストの急騰で、多くの場合失敗に終わる”技術”となる「ミッションクリープ」を避けることができます。また、予算があれば、追加する機能や、後日削除したり元に戻したりできる機能を決めることができます。

目標に基づいたマイルストーンで、プロジェクトのタイムラインと予算を整合させ、そうすることで予算が計画通りに進むようになります。予算を立てると、開発する「もの」だけでなく、開発する「方法」も決定します。たとえば、スタートアップ企業であれば、まったく新しいチームをゼロから立ち上げるのがベストかもしれません。でなければ既存のチームを成長させましょう。それか、専門の技術パートナーを利用することもできます。このような企業は、経験豊富な外部の社内チームとして機能し、アプリデザインのアイデアを全面的にアウトソーシングすることで生じるリスクはありません。

4. ユーザーを活性化する（確実に定着させる）方法を学ぶ

ユーザーがアプリをダウンロードするずっと前に、あなたにはユーザーの維持についてのかなり良いアイディアが必要です。ユーザーを「活性化」して、毎日アプリを開き、他のアプリではなく、このアプリで時間を過ごすようにさせるためには、アプリの何が必要でしょうか。その一端は、ターゲットとなるユーザーの理解と、モバイルアプリのデザインアイデアの確定に戻ります。

例えば、ユーザーが、出先でちょっと10分くらいのセッションで気軽にできるようなアプリを探しているとします。その場合、何時間もかけて商品を閲覧するユーザー向けに作られたアプリとはまったく違うデザイン、コンテンツ、体験になります。そうでなければ、ユーザーはおそらく二度と使わなくなるからです。

Amazonは、ユーザーを活性化するためのマスタークラスを提供しています。Amazonのアプリが常に人気を博しているのは、モバイルでの使用を前提に作られているからです。そして、まさにユーザーが望んでいること、つまり、さまざまな商品の購入が簡単にできるのです。

一方Twitterには、バスを待つような短時間で（あるいは、ドゥームスクロールに夢中になれば数時間でも）気軽にできるような、ちょっとしたコンテンツがあります。最近では、ゲームアプリの分野でWordleが同じようなことをしましたが、ユーザーはこのアプリでは足りなかったのです。

Wordle game is one of the successful app right now — ソース: XDA Developers

ユーザーを活性化させるその一点に集中しましょう。

5. KPIの合意

販売促進会議では、「成功とはどういうものか」という言葉をよく耳にすることでしょう。まぁいいですけど、この言葉は、現実の世界では誰も使おうと思わないような、ビジネスライクで格好悪い言葉です。しかし、それでも重要な会話であることに変わりはありません。アプリが目的を達成しているかどうかは、目的を設定しなければわかりませんよね。

このため、KPI（重要業績評価指標）の設定が必要です。KPIは、アプリデザインのアイデアを評価するメトリクスです。使用できるメトリクスはたくさんあり、解析すべきデータは山ほどあります。すべてを見直すのではなく、ビジョンや目標に最も合致したメトリクスを、以下のような中からいくつか選びましょう：

ダウンロード数：ユーザーは自身の製品をインストールするほど気に入っているか？ダウンロード数を押し上げるには何を変えるべきか。
月間アクティブユーザー数：あなたのユーザーベースは、定期的にチェックインしているか？そうでない場合、なぜそうなのか？
一日のアクティブユーザー：最も熱心なユーザーが毎日ログインする理由は何か？
チャーン：何人のユーザーがアプリから離れたりアンインストールしたり放置しているか？何がユーザーを遠ざけているのか？
セッション数と時間：何人のユーザーが、どれくらいの時間アプリを開き、アクティブにしているか？それはなぜか？

6. 適切なモバイルアプリデザインツールスタックの選択

コンセプトの実現は、大抵「言うは易く行うは難し」であり、多くの人にとって、これはデザインプロセスの中で非常にフラストレーションのたまる部分ですが、頭の中に浮かんでいる絵をを何とかしてチームに伝え、実行に移さなければなりません。そのビジョンの実現には、適切なツールを適切なチームに配備することが重要です。

したがって、適切なツールスタックの選択が、アプリ設計戦略の鍵の部分となります。デザイナーやデベロッパーには好みがあり、それは考慮されなければいけません（おそらく彼らはその使い道の達人であり、より良い製品を作るための自信、経験、知識を与えてくれるはずです）。

しかし、そのようなツールが他のソフトウェアとどの程度うまく連携できるかの考慮が必要です。例えば既存のソフトウェアとうまく統合できない場合、またはソフトウェア同士を連携させるのに時間がかかり、不便な回避策が必要な場合は、正しい選択とはいえないかもしれません。

UXPinは、シームレスなワークフローを実現するツールのひとつで、デザイナーがLo-Fiのワイヤーフレームの作成からHi-Fiでピクセルパーフェクトなモバイルアプリケーションのプロトタイプの作成まで、最初から最後まで一貫してクリエイティブな作業を行えるようにするツールです。この「コンセプト術」は、デベロッパーが実際に最終製品を構築する際に使用するものと同じ実在のコードコンポーネントを使用しています。

そのため、専門的なコーディングスキルがなくても、意図したとおりに動作するデザインを作成することができ、チーム間で延々と行き来するハンドオフなしで、発売後も作業を続けることができます。また、チームが安心してUXPinを使いこなせるように、Sketch、Slack、Jiraなどの人気の高いデザイン・開発ツールとも統合されています。

7. フィードバック＆改善のデザインプロセスの実施

モバイルアプリのデザインアイデアを開発する上で、「継続的な改善」はまさに流行語です。これは、プロセス全体の一部であると同時に、考え方の一部でもあります。「どうすればユーザーにとってより良いものになるのか」と常に問い続ける考え方です。実際に重要な改善を継続的に行うには、フィードバックループを導入しましょう。

これは、「ユーザーはアプリをどのように使用し、何をし、何をしないのか？」等を見るための、ユーザーからのコメントやレビューと行動データ分析を組み合わせたものであるべきです。

インタビュー、フォーカスグループ、リサーチなど、原点に立ち返り、アプリのインターフェースと体験に対するユーザーの反応をよりよく理解することです。だからといって、ユーザーのコメントをすべて反映させる必要はありません。そもそもそんな時間はないでしょう？

その代わりに、実用的で貴重なデータを使って、ビジネス目標に沿った機能やアップデートを指示できるようなシステムを構築しましょう。これにより、デザインや開発プロセスが簡素化されるだけでなく、社内の主要なステークホルダーからの支持を得ることができるのです。

フィードバックループがしっかりしていれば、改良すべき点の継続的な確認ができます。つまり、ユーザーを中心に据え、彼らのニーズを汲み取り、彼らの欲求や愛情を自社のビジネス目標に合致させ、それを現在進行中のアプリ開発の決定に使うのです。

UXPinでのアプリデザイン戦略の実行

成功する戦略は、このようなベストプラクティスをすべて活用し、モバイルアプリデザインのアイデアをすべてユーザーの元に届けます。そして、このコンセプトの素晴らしいところは、それぞれのコンセプトがいかにうまく連動しているかということです（ちょうど、あなたのツールスタックのようなものですね）。

アプリの戦略を具体的に定めるには、オーディエンスを熟知することが必要であり、予算によって、どこに焦点をあてて改良を加えるかが決まります。それによってそれぞれがうまく交わり、直感的で採用しやすいプロセスが作り出されるのです。デザイナー、デベロッパー、ユーザーのために有意義な体験を生み出すツールであるUXPin をぜひお試しください。

【フィンテックデザイン】プロダクトデザイナー向けUXのヒント

フィンテック（FinTech：金融機関に関するテック）はどの分野にとっても一筋縄ではいかない業界ですが、特にUXデザイナーにとってはそうでしょう。フィンテックのデザインにおいて、デザイナーは州や国によって異なる金融規制を勉強しなければならず、その金融規制は詳細かつ広範であることが多いです。ということは、デザイナーはプロジェクトの始動前に多くの読み物が必要であるということです。

本記事では、フィンテック製品デザインの基本について、製品がユーザーに優しく、コンプライアンスに適合し、顧客に最大限の価値を提供するためのベストプラクティスを含めてお話します。

UXPinは、暗号通貨製品をデザインするフィンテックスタートアップ企業でも、モバイルバンキングアプリに革命を起こそうとしている既存の多国籍企業でも、より高い忠実度と機能を備えたプロトタイプとテストのための洗練されたコードベースデザインツールをUXデザイナーに提供します。無料トライアルにぜひサインアップして、UXPinの高度なコードベースの機能をぜひすべてご体験ください。

フィンテックとは

フィンテック（Financial Technology）とは、金融テクノロジーの製品やサービスを生み出す市場部門を指し、このような金融商品には、業界の革新と改善を目指すアプリケーション、API、あるいはアルゴリズムが含まれます。

フィンテックの例

以下は、フィンテックの例です：

ネットバンキング（ネオバンクとも呼ばれる）：Monzo (イギリス)、Chime (アメリカ)
デジタルお財布： Payoneer、Skrill、Revolut
決済サービス：PayPal、Venmo、Cash App、Stripe
投資サービス：Robinhood、Betterment
暗号化商品:：Coinbase、Ripple

フィンテックの事例については、Insider Intelligenceのフィンテックスタートアップの記事をご覧ください。

フィンテックのUXデザインの課題

1. コンプライアンスへの挑戦

企業コンプライアンスは、フィンテックデザインの最大の課題の1つです。複数の国や世界中のユーザーを対象に製品をデザインする場合、異なった法律に準拠するために市場ごとにデザインを変更することがあります。

例えば、AML（マネーロンダリング防止）やKYC（顧客情報保護）などの規制には、オンボーディングやユーザーフローに影響を与える詳細なプロトコルがあり、こういった規制には、ユーザーの識別、プライバシー、不正防止、アクセシビリティ、さらにはテロリズムなどに関する複雑なレイヤーが追加されています。

さらに複雑なことに、州や国がこのような法律を定期的に更新したり、新しい法律を導入したりするため、UX研究者やデザイナーは、コンプライアンスの維持のためにデザインを修正しなければならず、それによって製品のロードマップやUX戦略がぐちゃぐちゃになってしまう可能性があります。

2. 顧客の期待に応える

規制とは別に、UXデザイナーは、レガシー（旧式）バンキングや金融サービスからの顧客の期待も乗り越えなければなりません。例えば、多くのネオバンクは顧客のために実店舗を持たないので、アプリは対面での体験を再現するツールや機能を提供しなければなりません。

3. 製品の複雑さへの対応

フィンテックデザインのもう一つの課題は、製品の複雑さと、UXデザイナーがまとまりのあるエコシステムをどのように作るかであり、フォーブス誌では、それを「断片化から生態系への転換」と表現しています。

従来の銀行や金融機関は、クレジット、小切手、預金、住宅ローン、ローンなど、商品ごとに異なる部門が担当しています。デザインチームは、適切な連絡と連携がなければ、シームレスな顧客体験を提供する全体的なエコシステムではなく、断片的な製品をデザインしてしまう危険性があります。

セキュリティプロトコル

フィンテックのセキュリティプロトコルは、UXのワークフローや、デザイナーがリサーチを実施、共有、保存、分析する方法に影響を及ぼします。UXチームは、ISO-27001（ISMSの要求事項などをまとめた規格）やISO-27002（実践規範の規格）など、さまざまなセキュリティプロトコルに準拠する必要があります。

また、UXデザイナーは、安全なパスワード、OTP（ワンタイムピン）の共有、テキストや電子メールのリンクに注意するなど、安全な習慣を採用するようユーザーに促す必要があります。

フィンテックアプリデザインの8つのヒント

design and development collaboration process product communication

1. クリーンなUIデザイン

クリーンでミニマルなUIはあらゆるデジタル製品に不可欠ですが、免責事項やポリシーへのリンク、その他の必要な情報を掲載するスペースを確保しなければならないことが多いフィンテックのデザインだとなおさらです。

段階的開示は、複雑なフィンテック UIをデザインする際によく使われる戦略です。UXデザイナーは、重要かつ必要なコンテンツのみをユーザーに表示し、その他の情報はツールチップ、ドロップダウン、アコーディオン、モーダル、その他のUXパターンの背後に「隠す」のです。

段階的開示のアプローチにより、デザイナーはきれいなUIを作りながら、ユーザーが必要なときにコンテンツを提供することができます。

2. 明確でシンプルな言語

金融商品・サービスは、その条件が長く複雑で、多くの人が理解できないことで知られています。

言葉を簡素化し、ユーザーに明確な予測を持たせることは、フィンテック製品のデザインにおいて非常に重要です。また、それによって金融の専門用語やその意味を理解していないユーザーとの信頼関係も構築できるのです。

例えば、クレジットの申し込みは、ユーザーのクレジットスコアに影響を与える可能性があります。UXデザイナーは、モバイル画面の制約がある中で、このような重要な情報を通常は数個の箇条書きで説明をしなければいけません。

3. アクセシビリティ

アクセシビリティはあらゆるデジタル製品に不可欠ですが、フィンテックのデザインには特に重要です。ノルウェーやオーストラリアなどの国では、製品はウェブコンテンツのアクセシビリティに関するガイドライン　(WCAG) 2.0 レベルAA基準を満たさなければいけません。

こちらのPowerMapperの記事には、国とその関連するアクセシビリティ要件の一覧があります。

4. 有益な可視化

データを視覚化することで、ユーザーは情報を素早く消化し、理解することができます。UXデザイナーは、例えば収入と支出のように、数字を分けるのに色を使うこともできます。

5. 適切なキーパッドの使用

モバイル端末でフォームを入力する場合、ユーザーは数字、文字、特殊記号を切り替えて入力する必要があります。フィンテックのフォームは、一般的に他のデジタル製品よりも長く、ユーザーが入力する項目も多くなっています。

UXデザイナーは、モバイル機器に以下のようなどのキーパッドを使用するかを指示することで、このプロセスを効率化することができます：

数字優先のキーパッド
日付ピッカー
電子メールフィールド（デフォルトで@と.comが表示されるようにする。）

6. 説明的で有益なCTA（Call To Action）の使用

CTAをクリックすると何が起こるかについて、ユーザーに誤解があってはいけません。例えば、誰かがローンの申し込みをする場合、フォームのCTAは通常の【送る】や【送信】ではなく【適用】でなければなりません。

7. 助ける、妨げない

しかし残念なことに、デジタル製品では、顧客がサービスをキャンセルしたりダウングレードしたりするための機能が隠されていることがまだよくあります。UXデザイナーは、顧客の購読終了やオプトアウトを可能にするものも含めて、ユーザーがタスクを完了できるよう、常にサポートしなければいけません。

管轄区域によっては、有料サービスのオプトアウトに関する明確なガイドラインがある場合もありますので、デザインが規制やベストプラクティスを満たしていることを常に確認しましょう。

8. モバイル向けの最適化

多くのユーザー（特に30代以下）は、モバイルアプリやブラウザーを通じて、モバイルでタスクを完了したいと考えています。フィンテック製品にモバイルアプリがない場合、ウェブサイトやウェブアプリがモバイルユーザー向けに最適化され、デスクトップと同じ体験が提供されるようにしましょう。

モバイルアプリの場合、ユーザーが確実にデスクトップと同じタスクを実行できるようにしておく必要があります。多くの製品では、モバイルアプリでできることが制限されており、これが不満の原因になったり、サービスのダウングレードや定期的な支払いのキャンセルができないなど、マイナスの影響を与えることがあります。

フィンテックのユーザビリティに関するよくある課題の克服

ここでは、フィンテック UXの一般的なシナリオとその克服方法をご紹介します。この例は、GoogleのUX Playbook for Financeから引用しています。

ユーザーへの教育とコンバージョン

デザイナーが直面する課題の1つは、複雑な金融商品についてユーザーを教育しながら、コンバージョンさせることです。ここでは、典型的なモバイルオンボーディングフローの推奨例を紹介します：

箇条書きで提供品と規制情報をまとめる
スクロールを減らし、コンバージョンの可能性を高めるために、価値提案をCTAとともにフォールドの上に配置する
オンボーディングフォームの冒頭に価値提案を繰り返す
信用と信頼を築くために、TrustPilotウィジェットなどのソーシャルプルーフを含める。
「サインアップして見積もりを入手する」など、明確なCTAを使用する
既存ユーザーが新しい製品やサービスを申し込む際に、フォームのフィールドを予め埋めておく
プログレスバーを使用して、ユーザーがプロセスのどの段階にいるのかを表示する

大容量データの表示

フィンテック製品は、多くのデータを1つの画面に表示しなければならないことが多く、特に面積の限られたモバイルデバイスでは困難です。ここでは、スペースを最大限に活用し、認知負荷を軽減するための推奨事項をご紹介します：

メインのCTAは説明的なラベルで確実に目立たせる
二次的CTAにはアウトラインボタンやゴーストボタンを使う
コンテンツの区切りには、色と一定の間隔を使う
見出しと本文の区別を明確にする
読みやすく、読みやすい書体を使用する
二次的コンテンツはカルーセル、アコーディオン、ツールチップの後ろに隠す

長文フォームの効率化

フィンテック製品は、法律の準拠のために多くの個人情報の収集が必要なことがよくあります。このようなフォームには長い時間がかかり、ユーザーにとっては圧倒されるように見えるかもしれません。そこで、長いフォームを効率化するためのヒントをご紹介します：

期待に応えるべく、フォームの入力にかかると思われる時間を最初にユーザーに伝える
フォームをセクションに分割し、ステップに分け、ユーザーがいつでも簡単に前後に移動できるようにする
ユーザーがあとどれくらい完了しなければならないかを示すために、進捗状況を示すインジケータを使用する
申し込みに必要な情報のみを尋ね、本人の肩書きや性別、人種など、金融機関にとって無関係な余計な項目は避ける
選択肢が3つ以下の場合は、ドロップダウンメニューを使用せずラジオやチェックボックスを使用して、素早い選択を可能にする
ユーザーが時間のあるときに戻れるように、進捗状況を保存できるようにする
生年月日、連絡先番号、米国の郵便番号、クレジットカード番号などの適切なフィールドには、テンキーを使用する
ユーザーを案内するプレースホルダとエラーメッセージを提供し、エラーメッセージには、ユーザーが問題を解決するための明確で実行可能な指示を必ず付ける

PayPalがUXPin Mergeを使用して製品を8倍速く構築する方法

PayPalは、200カ国以上、25通貨をサポートする世界最大級の決済プラットフォームです。2019年、PayPalの社内製品開発チームはUXPin Mergeの使用を開始し、デザインの拡張と製品の提供を8倍速く行えるようになりました。

Mergeとは

Mergeは、コンポーネントライブラリをUXPinのエディタに同期させるデザイン技術で、デベロッパーが製品段階で使用するUI要素を完全にコード化し、デザイナーがプロトタイプを作成できるようにします。

PayPalのMergeはどのように機能したか

PayPal は Merge を使用して、Microsoft の Fluent デザインシステムと UI コントロールを同期させています。各 React コンポーネントのプロップを通じてすべてが事前に設定されているため、PayPal の製品デザイナーはそのコンポーネントをドラッグ＆ドロップして新しいユーザーインターフェースの構築ができるのです。

PayPalのUXチームは、デザイン、プロトタイプ、およびテストの90%をデザインハンドオフ前に完了する製品チームに指導とサポートを提供していますが、UXデザイナーが丸一日かけて行っていた作業を、プロダクトマネージャーは10分以内で、しかも忠実度や機能性を大幅に向上させながら完了させることができるのです。

このプロトタイプには、完全に機能するグラフやデータの可視化、ソートフィルター、実データ、動的なユーザー体験など、画像ベースのプロトタイプでは実現できなかった機能が含まれています。

MergeのプロトタイプはPayPalのユーザビリティテストの改善だけでなく、ステークホルダーがガイドや説明なしにプロトタイプに関与することができます。

「UXPin Mergeの大きな影響の1つは、より忠実度の高いプロトタイプを作成できるようになったことです。最終製品がどのように見えるか、UX、インタラクティブ性に関して、デザイナー、経営陣、ディレクター、デベロッパーを含む全員がより確信を持っており、ステークホルダーからより質の高いフィードバックが得られます。」エリカ・ライダー氏（ペイパル、デベロッパーツールおよびプラットフォームエクスペリエンス、UX担当シニアマネジャー

UXPin Merge が世界最大のフィンテック企業のワークフローに革命をもたらすことができるとしたら、このコードベースのテクノロジーがあなたのビジネスに何をもたらすか想像してみてください! 無料トライアルにサインアップし、MUI React ライブラリ統合を通じて UXPin Merge をぜひお試しください。

DesignOpsのトップフレームワーク – サロメ・モルタザヴィ氏(SiriusXM)編

2022年3月に開催されたUXPinのデザインバリュー会議では、世界的第一線の企業におけるデザインとDesignOpsを理解すべく、デザイン業界のリーダー5人を招待しました。

サロメ・モルタザヴィ氏は、フォーチュン500に名を連ねる複数の企業で、「サイロを取り払い、アウトプットではなく、顧客の成果に焦点を当てたチーム編成」をサポートした経験から、その見解と経験を語っていただきました。

彼女は現在、SiriusXMでDesignOpsのディレクターとして働いています。彼女のデザインバリュー会議での講演では、企業内でのDesignOpsの維持・拡大における賛同を得るための重要な要素である、DesignOpsとビジネス的インパクトの証明についてお話頂きました。

DesigOps初心者へ向けたアドバイス

サロメは、DesignOpsの初心者へのアドバイスから話を始めますが、これは、戦術的および戦略的なイニシアチブに重点を置くのではなく、「モグラたたき」的な事ををしている経験豊富な実践者にも当てはまることです。

最初のアドバイスは、「イエスマン 」にならないようにすることです。インパクトを与えようとするあまり、多くのDesignOps実践者は、早い段階で何にでも「はい」と言うという間違いを犯してしまいます。このアプローチは、DesignOpsをあちこちに引っ張ってしまい、チームの焦点と価値に悪影響を及ぼします。

価値を見出す

「私たちが行うことの核心はどれも経歴に関係なく、すべては価値主導、つまり価値とビジネス的インパクトの提供に集約されるのです。」 サロメ・モルタザヴィ氏（SiriusXM社 DesignOps担当ディレクター）

サロメによれば、ビジネス価値におけるものは全て2つの方法で現れます：

コスト削減
収益増加

DesignOpsの実践者は、DesignOpsの影響の測定に正しいメトリクスの使用が必要です。パトリツィア・ベルティーニ氏は、メトリクスを【有効性】と【効率性】の観点から確定することで、このDesignOpsのフレームワークを簡素化しています。

効率性と有効性

有効性：行動と「正しい」方法で仕事をすることに基づく「定性的」な評価基準
効率性：数値、割合、比率で測定、「定量」化できること

パトリツィア・ベルティーニ氏のフレームワークの詳細については「DesignOpsのROI：DesignOpsの影響の定量化に向けたポイント」をぜひお読みください。

パトリツィアの簡略化されたフレームワークを用いても，DesignOpsの実践者は有効性と効率性を測定し，焦点を見出すために多くの作業を行わなければなりません。サロメが指摘するように、DesignOps部門の70%は1名で構成されており、そのことが、方向性が定まらず、どこから手を付けていいのかわからないという事態を引き起こしています。

聞き取りと書き取り

サロメは、DesignOpsの実践者は、飛び込んで行動を起こすのではなく、一歩下がって、1対1のインタビューなど、デザインチームの話を聞いて、組織の問題を理解しパターンを特定することを推奨しています。

数週間から数カ月かけて、全体像、空間、組織の基本的な慣行、そして人を理解することで、会社の組織的、体系的な問題が明らかになってくるのです。

このような問題を理解して明確にすることで、DesignOpsの実践者はリーダー、チームメンバー、およびステークホルダーとすぐに信頼関係を築き、DesignOpsが成長するためのポジティブな基盤を作ることができるのです。

彼女は、DesignOpsの初心者にも、心機一転、新たな方向性を模索するエキスパートにもこのアプローチは有効だと言います。

DesignOpsのフレームワーク：デザイン成熟度指数

サロメのお気に入りのDesignOpsフレームワークの一つとして、デザイン成熟度指数がありますが、特に新デザインフロンティアモデルで、以下の成熟度の9つの次元を調べるものです：

デザインチーム
主要なパートナー
役員及び従業員
デザイン運営
デザインシステム
デザイン戦略
ユーザー調査
テストと学習
UIデザイン

この報告書では、デザインが組織に与える最も重要な影響について、以下のように考察しています：

製品の使いやすさ
顧客満足度
収益
プロジェクト固有のメトリクス
コスト削減
市場投入までの時間
コンバージョン又はファネルメトリクス
従業員の生産性
ブランド・エクイティ
新市場への参入
デザイン特許/IP
バリュエーション又は株価

デザイン成熟度指標は、多くのテーマと問題を生み出します。その中でDesignOpsが解決しなければならないのはいくつかありますが、他はデザインリーダーが担うことになります。

サロメは、これらの問題を組織の構造に応じて2つかそれ以上の「バケツ」に正しく振り分けることが重要であると述べています：

DesignOps（デザイン組織運営）
デザインリーダー／デザインチーム／製品（デザインプラクティス運営）

運営メニューツール

バケツを仕分る方法のひとつに、運営メニューツールを使ってアクティビティをいくつかのカテゴリーとサブカテゴリーに割り当てる方法がありますが、サロメは通常、以下の2メニューを作成します：

デザイン組織運営：DesignOpsの活動
デザインプラクティス運営：デザインチーム、リーダーシップ、製品の活動

この運営メニューツールの説明と、様々なバケツのグラフィックは、彼女のデザインバリュー会議の講演の12分48秒あたりを是非ご覧ください。

バケツがいっぱいになったら、次はDesignOpsロードマップを計画し、焦点を絞る番です。

DsignOpsのロードマップの作成

サロメは、成果ベースのツールを使って、一般化された以下の3つの時間軸でDesignOpsのロードマップを構築しています：

このような時間軸によって、DesignOpsの実践者はいい加減な締め切りを避けることができ、DesignOpsは、この柔軟性により、さまざまなチームで試験的に行っているソリューションを試すことができます。

ロードマップには5つのカテゴリーが含まれなければいけません：

目標又はOKR（目標と主な結果）
時間軸
解決すべきテーマ又は課題
成功度又はKRSの尺度
パーキングロット（一旦保留にして脇に置いておける事項）

パーキングロットは、ロードマップにないけれども、将来のアクションが必要なタスクやアクティビティを記録しておくためのものです。

BML（構築、計測、学習）

DesignOpsロードマップの実行のために、サロメは人気の高いデザイン思考手法であるBML（構築、計測、学習）を運営プラクティスに適用しています。

彼女は、DesignOpsの実践者がプロセスやソリューションを進化させる際に、知識に基づいた決定を下すためにBMLで学習することの重要性を強調しています。

サロメのDesignOpsフレームワークが実際に使われている例は、彼女のプレゼンテーションの18分00秒からご覧になれます。

サロメのDesignOpsリソース

著書： Liftoff: Practical Design Leadership to Elevate Your Team, Your Organization, and You
著書：Lean UX
レポート： The New Design Frontier
コミュニティ： DesignOps Assembly

特典：IBM、Salesforce、Delivery Heroの6人の業界エキスパートの執筆による無料eBook – DesignOps 101: Guide to Design Operations

UXPin MergeによるDesignOpsの実現

デザインプロセスとワークフローを効率化するツールを見つけるのは、DesignOps戦略の成功には非常に重要であり、デザインのズレ、連携、一貫性、結束力などは、実践者がしばしば克服しなければならない問題です。

UXPin Mergeを使用すると、DesignOpsは単一のコードベースのデザインソリューションでこういった中核的な問題を解決することができます。Mergeでは、レポジトリからUXPinのエディタにコンポーネントライブラリを同期できるため、デザイナーはエンジニアと同じUI要素を使用して完全に機能する高忠実度のプロトタイプの構築ができるのです。

この信頼できる唯一の情報源（Single source of truth）は、すべてのデザインチームが同じコンポーネントライブラリを使用し、一貫性と結束力が最大限に高まり、デザインのズレが排除され、手直しが削減されるということです。

UXPin Mergeを使用すると、デザイナーとエンジニアが同じ言語で会話できるため、デザインのハンドオフがスムーズになり、市場投入までの時間が短縮され、DesignOpsにプラスのRO（投資対効果）がもたらされるのです。

Discover Merge

追求すべき「 UXメトリクス」とは？

UX（ユーザーエクスペリエンス）は曖昧であることが多く、正しい UXメトリクスと KPI （重要業績評価指標）は特定されにくいのですが、デザインチームや製品チームは自分たちのソリューションが機能しているかどうかを知りたがり、ステークホルダーはさまざまなプロジェクトのROI（投資収益率）に関心を寄せています。

正しい UXメトリクスとKPIの選択は、組織のUXの成果を評価し、競合との比較において自社製品を評価するために極めて重要です。本記事では、これらのメトリクスと、CX（カスタマーエクスペリエンス）のさまざまな側面を測定するためにどの指標を使用すべきかを見ていきます。

世界最先端のUXデザインツールで、UXの価値を高め、より質の高いデジタル製品を提供しませんか？無料トライアルにサインアップして、UXPinのコードベースのデザインツールが、どのように製品デザインのワークフローの強化や、顧客により良い製品体験の提供ができるかをぜひご確認ください。

UXメトリクスと KPI を追跡する理由

UXメトリクスを追跡することで、デザインチームやステークホルダーは、組織のUX戦略が効果があるのかや、各デザインプロジェクトの成功度を知ることができます。

UXとユーザビリティは、使用者の製品の使用に対する満足度や、デザインソリューションが彼らのニーズを正しく満たしているかを企業に伝えるメトリクスであることから、製品の成功には不可欠な要素です。

顧客満足度は、顧客維持、コンバージョン、その他のマーケティングや販売のメトリクスに重要であり、最終的には組織の収益に影響を与えます。

UX KPI は、企業が様々なUXの目標や目的を確実に達成するために、パフォーマンスをベンチマーキングし、長期的に進捗を追跡します。

UXメトリクスの種類

他の測定フレームワークと同様に、UXの測定基準には2つのタイプがあります：

定性的なデータ：感情、ロイヤリティ、ユーザビリティ、ユーザー満足度などの主観的データ
定量的なデータ：数値や比率、その他測定可能なデータ

UX測定における課題は、多くの測定基準が定性的であるということです。定量的なデータは分析が比較的簡単で、数値は上がるか下がるかのどちらかですが、アナリストやステークホルダーは、（意図的または不正確に）データを誤解したり偏った見方をしやすいため、定性データをより綿密に扱う必要があります。

NPS（ネットプロモータースコア）

NPS（ネットプロモータースコア）は、顧客が自身の製品を推奨する可能性を測るため、重要な UXメトリクスとなります。NPSが高いということは、自身の製品がユーザーの問題を解決し、その経験を他の人に伝えようとする傾向があることを示しています

NPSは、顧客の製品や機能に対する満足度を1点（最低）〜 10点（最高）で尋ねることによって出され、企業はその結果を以下の3つのグループに分類します：

推奨者（9点または10点）：最も忠実な顧客
中立者（7点または8点）：満足しているが製品を薦める可能性が低い顧客
批判者（0〜6点）：製品の使用を中止し、他の顧客の購買意欲を低下させる可能性がある、不満がある顧客

SUS（システムユーザビリティスケール）

SUS（システムユーザビリティスケール）は、デジタル製品の総合的なユーザビリティスコアをUXデザイナーに提供する10の質問項目です。SUSの歴史は80年代にさかのぼり、現在でもユーザビリティ測定のための優れたUXメトリクスとされています。

SUSについての詳細と、この重要な UXメトリクスの使用方法については、HubSpotの記事がオススメです。

CSAT（顧客満足度）

CSAT（顧客満足度）は、製品や機能に対して顧客がどれだけ満足しているかを測るものです。CSATの測定には、いくつか方法があります：

【はい/いいえ】の質問：例えば「この製品はタスクXを完了するのに役立ちましたか？」の質問でパーセンテージのスコアが作られます。
10段階評価などのスケール評価：例えば、（一方の端が不満で、もう一方の端が満足している1〜10のスケールを設けた）「今日の経験にどの程度満足していますか？」という質問で、スケールに基づいて集計スコアが作られます。

タイムオンタスク

タイオンタスクは、ユーザーが特定のタスクを完了するのにかかる平均時間を出し、特に、生産性とパフォーマンスの向上のためにデザインされた企業向け製品では、製品の効率性を示す素晴らしいメトリクスとなります。

CSATとは異なり、タイムオンタスクはユーザーからの入力が不要ですが、その代わりにデザイナーは結果を測定・集計する分析ツールを使用します。

CES（カスタマーエフォートスコア）

あるタスク完了における顧客にとっての難易度を測るのに、企業はCES（カスタマーエフォートスコア）を使用します。CESは、ユーザーに経験について質問し、その答えに尺度をつけて測定されます。

例えば：

質問：機能Xの使いやすさはどうでしたか？
難易度1～10：1＝とても難しい、10＝とても簡単

エラー率

エラー率は、製品や機能によって誰かがタスクを完了できなくなる頻度を示します。システムエラー率は、顧客の製品の使用や推奨を躊躇させる可能性があるため、重要な UXメトリクスになります。

私たちは、エラー率をできるだけ低く抑えることを目標に、パーセンテージで表示しています。例えばエラー率が高い場合は、ユーザビリティに重大な問題があり、デザイナーが直ちに調査して修正しなければならないことを示しています。

完了率

完了率（またはタスクの成功率）は、タスク完了の回数を示すものです。完了率は、バグやユーザビリティの問題など、より大きな問題を示す優れたメトリクスとなり、例えば完了率が突然低下した場合、新しいリリースに起因するシステムエラーまたはユーザビリティの問題がある可能性があります。

完了率はさまざまな要因に影響されるため、製品チームは、何かがうまくいっていないことを示すメトリクスとして、このメトリクスをモニタリングするといいでしょう。

エンゲージメント

エンゲージメントは、顧客の満足度や充実度を表すもう一つのメトリクスであり、企業はこれで顧客の製品の使用やインタラクションの頻度がわかります。UXデザイナーは、ユーザーエンゲージメントを出すために、メトリクスをいくつか組み合わせる必要があります。製品によって異なりますが、以下のような例があります：

ユーザーの使用時間
PV（ページビュー）数
ユーザーのスクロール量
コンテンツや他のユーザーとの関わりの有無
製品を使用している間に完了したタスクの数

製品と組織には、それぞれエンゲージメントを測るためのさまざまな方法論とメトリクスがあります。

コンバージョン率

コンバージョン率は、フォームへの入力、売上、サインアップ、取引、その他のビジネスメトリクスに対する変換率を決定するため、非常に重要です。

デザイン上の判断がコンバージョンにプラスにもマイナスにも作用するため、デザイナーはこのビジネスメトリクスに細心の注意を払う必要があります。

UXメトリクスと KPI の追跡方法

UXのメトリクスやKPI追跡のためのツールやテクニックはいくつかありますが、以下のステップバイステッププロセスで、パフォーマンスを追跡・測定する方法を簡単にご説明します。

ステップ1：ベンチマークの定義

ベンチマークは参照ポイントであり、通常は、組織が定性的および定量的メトリックの両方のパフォーマンスを測るための出発点です。ベンチマークは、改善又は悪化の判断するため、UXメトリクス測定にはベンチマークの確定が不可欠です。

例えば、タイムオンタスクは、ユーザーが商品を購入するような特定の目標を完了するのにかかる時間を判断するのに使用される、一般的な定量的UXメトリクスであり、UXデザイナーは、プロジェクト開始時に製品購入にかかる時間をベンチマークし、リリース後にそのメトリクスが改善されたかどうかを判断する必要があります。

ステップ2：目標設定とKPI（重要業績評価指標）の設定

目標：組織が達成したいこと
KPI（主要業績評価指標）：組織が目標に向けてパフォーマンスを追跡するために使用するマイルストーン

目標を設定することで、デザインチームは改善の目標を持つことができます。組織は通常、パフォーマンスを測るために複数のKPIを持つ大きな長期目標を設定します。

例えば、NPS（ネットプロモータースコア）は、顧客が製品を推奨する可能性を測るもので、通常0（最低）～10点（最高）で測定されます。この製品の現在のNPSは6ですが、ステークホルダーは12ヶ月で9以上に50％増加させ、四半期ごとに12.5％増加させたいと思っています。

ベンチマーク：6
目標：9
四半期ごとのKPI：各四半期で0.75ポイント上昇

ステップ3：パフォーマンスの測定

目標とKPIを設定したチームは、パフォーマンスの測定に様々な分析ソフトウェアやテクニックが必要です。そのソフトの例としては、以下のようなものがあります：

Hotjar ：ユーザーの行動をモニタリングするためのスクリーンレコーダーとヒートマップを備えた素晴らしい定性的測定ツールであり、Webサイトやモバイルアプリのためのクイックサーベイツールもあり、様々なUXメトリクスの測定が可能
Baremetrics：チャーン率、コンバージョン、収益など、より定量的な数値データを測定
Google Analytics：フロー、タイムオンタスク、コンバージョンなど、ユーザーを追跡するためのGoogleの無料分析ツール
Optimizely ：2つのデザインのパフォーマンスを比較するためのA/Bテストツール

ステップ4：UXメトリクスの報告

UXのメトリクスを報告することで、デザインチームとステークホルダーは長期的な目標に向けたパフォーマンスを追跡し、各デザインプロジェクトの成功度を測ることができます。

UXメトリクスレポートには、一般的に4つの主なデータポイントが表示され、通常はグラフやグラフィックで表示されます：

ベンチマークまたは開始時の基準
目標KPI
KPIに対するパフォーマンス
望ましい目標

UXのレポートは、簡潔で透明性のあるものでなければなりません。UXデザイナーは、チームメンバーやステークホルダーが調査結果を確認できるように、データの収集と分析に関する参考文献を含めておく必要があります。

ステップ5：UXメトリクスをもとに行動する

デザインチームは、KPIに対応するための実行可能な計画を持つ必要がありますが、例えば、パフォーマンスが悪化したり、特定のKPIを満たせなかったりした場合はどうなるのでしょうか？

UXメトリクスは、データ集めのためのフレームワークではありません。UXデザイナーに、ユーザーと組織のために反復し、改善するためのメトリクスを提供するものなのです。

UXPinによる製品パフォーマンスの向上

お客様のニーズを満たす、便利で楽しい、魅力的なユーザー体験を創造することは、すべてのUXデザイナーが目指すゴールです。優れたUXのデザインは、適切なツールの使用から始まります。

UXPinのコードベースのデザインツールは、UXチームが正確なプロトタイプを作成して、ユーザビリティとアクセシビリティの問題をテストし、特定することを可能にします。リリース前にこれらの問題を解決することは、組織のUX戦略や目標を達成するために非常に重要です。

uxpin collaboration comment mobile design

ベクターグラフィックスをレンダリングする画像ベースのプロトタイプとは異なり、UXPinは、HTML、CSS、Javascriptを生成し、デザイナーによるコード化された製品の機能性と忠実性の正確な再現を可能にします。

UXPinはまた、UXデザイナーがユーザビリティやアクセシビリティの問題に対処し、解決策を見出すための迅速なプロトタイピングを可能にします。自社開発のデザインシステムでも、組み込みのデザインライブラリでも、UXデザイナーはコンポーネントをドラッグ＆ドロップするだけで、ユーザビリティテスト用のプロトタイプをすばやく作成することができます。

UXPinを使用すると、プロトタイプ作成が速くなるだけでなく、UXデザイナーはより高い忠実度と機能性を実現し、ユーザビリティ参加者やステークホルダーから有意義で実行可能な結果を得ることができます。

世界最先端のデザイン、プロトタイピング、テストツールで製品のユーザーエクスペリエンスを向上させ、UXワークフローを効率化しませんか？無料トライアルにごサインナップして、UXPinのコードベースのデザイン機能をぜひご体験ください。