ハイテクなデジタル製品におけるUXデザインの世界でも、ペンと紙は、Lo-Fi（低忠実度）のプロトタイプをサクッと作る選択肢として今でも好まれています。皆さんの思い込みとは裏腹に、UXチームはコンピューターから離れ、付箋やホワイトボード、メモ帳に書き込んだり、紙のプロトタイプに注釈を加えたりすることに多くの時間を費やしています。

デザイナーがコンピュータに向かう前に計画や準備をすればするほど、ワイヤーフレーム、モックアップ、プロトタイプをサッとデザインすることができます。そしてペーパープロトタイプは連携を促すことから、初期の UX デザイン思考プロセスの重要な部分であり、それでデザイナーは最小限のコストで多くのアイデアを検討できるようになるのです。

UXPin を使うことで、デザインチームと開発チームは、ペーパープロトタイプから忠実度の高いプロトタイプ作成にすぐに移行でき、それでデザインプロセスは大幅に加速されます。一貫性のある高品質なデジタル体験を構築しませんか。無料トライアルにサインアップして、UXPin のプロトタイピング機能をぜひお試しください！

ペーパープロトタイプとは

ペーパープロトタイプとは、デジタル製品を表す手描きの「スクリーン」を使ってアイデアを開発し、ユーザーフローをデザインするプロセスであり、ここではインタラクションデザインよりも、ハイレベルな UX（ユーザーエクスペリエンス）のテストを行います。

ペーパープロトタイプには機能がないことから、忠実度が低いため、ペーパープロトタイプのデザイナーがペーパープロトタイプを部門外で共有することはほとんどありません。

ペーパープロトタイプは、情報アーキテクチャをマッピングしてユーザーフローを可視化することを主な目的としています。

デザインチームは、よく机の上やフローの上に紙画面を並べて、実際のユーザーがどのようにナビゲートして最終的なゴールに到達するかを想像します。そのデザインは初歩的なもので、たいていは白黒でスケッチされ、コンテンツは見出しと行動喚起のリンクだけが読みやすいテキストで表示された限定的なものです。

また、スワイプやスクロールなどの基本的な機能をシミュレートするために、チームが厚紙を使って iPhone や Android のモックデバイスを作ることもあります。このようなモックデバイスを使うことで、デザイナーは自分のデザインが携帯電話の枠内でどのように見えるかを確認することもできます。‐ これはモバイルアプリのデザインの際には特に便利です。

紙のプロトタイプの主な利点はスピードですが、UI Stencils などのツールを使って、正確で見た目に美しい画面レイアウトをデザインするデザイナーもいます。これは、紙のプロトタイプをステークホルダーやテスト参加者に提示する予定がある場合に極めて重要です。

UXPinの旅は、Web Kitという同様のペーパープロトタイピング製品から始まりました。ペーパープロトタイプを自動的にワイヤーフレームに変換するデザインツールとペアになったペーパーパッドです。そして UXPin は、エンドツーエンドのプロトタイピングソリューションへと進化し、最初から制作可能なプロトタイプを作成できるようになりました。UXPinをぜひ無料でお試しください。

ペーパープロトタイプのデジタル化

reMarkable や Apple Pencil のようなツールを使えば、チームはアナログな紙の体験のようなスピードと多様性を楽しみながら、リモートで共同作業を行うことができます。

デジタルスケッチツールを使うことで、ペーパープロトタイプのプロセスは加速されます。デザイナーは、（画面を再描画することなく）より速やかに変更を加え、詳細なメモを添付し、完成したプロトタイプを UXPin のようなデザインツールにすぐにアップロードして、忠実度の高いプロトタイプを作成したり、ワイヤーフレームを作成したりすることができます。

ペーパープロトタイプがデジタル化されることで、紙やプラスチックのゴミも減って環境にも優しいですよね 。

ペーパープロトタイプのメリット・デメリット

スピードと柔軟性は別として、ペーパープロトタイプにはメリットもデメリットもあります。

以下の無料のeBook に載っているメリット・デメリットからいくつか挙げてみましょう（英語）

メリット：

• 速やかなイテレーション：１時間以上かけて完成させたデジタルモックアップよりも、５分で完成した紙のデザインを破棄する方が簡単。
• 低コスト：紙は安く、ツールやキットが追加されても破綻しない。
• 創造性の向上：鉛筆と紙の自由さで、実験と新しいアイデアが育まれる。デザインツールはデザインプロセスにおいて重要な役割を果たすが、デザインの初期段階では創造性を阻害する可能性がある。
• チーム構築：ペーパープロトプは、クリエイティブな環境でチームが一丸となれる貴重な機会となる。ペンと紙を使って作業することで、子供のようなエネルギーが引き出され、そこから絆が生まれ、同僚との関係が強くなる。
• 習得が一番ラク：誰もがアイデアをスケッチできるため、ペーパープロトタイプはマーケティング、開発、ステークホルダーなどの他部門を巻き込むのに最適な方法となる。
• ドキュメンテーション ：ペーパープロトタイプは優秀なドキュメンテーションとなる。例えばデザイナーは、プロジェクト全体を通して参照できるように、メモやアイデアのアウトラインを作ることができる。ペーパープロトタイプは優れた UX成果物である。

デメリット：

• ユーザーの反応がない：ユーザーからのフィードバックがないため、アイデアがうまくいくかどうかを知るのは難しく、ペーパープロトタイプを参加者とテストしたとしても、フィードバックは限られたものになると思われる。
• 不正確なフィードバック：UXチーム以外では、ペーパープロトタイプの解釈が大変である可能性があり、それで正確で意味のあるフィードバックが制限されてしまう。
• 潜在的に不要：UXPinのようなラピッドプロトタイピングツールでは、ペーパープロトタイプでデザインプロセスに不必要なステップが追加される可能性がある。UXPin にはあらかじめデザインシステムが用意されているため、デザイナーは忠実度の高い要素をドラッグ＆ドロップでサッとデザインして、作業用のプロトタイプを編集することができる。

１４日間のトライアルにサインアップして、UXPin を使って紙のデザインコンセプトを最終製品のように機能する高忠実度のプロトタイプにどれだけ早く変換できるかをぜひご覧ください。

ペーパープロトタイプを作るタイミング

Google のジェイク・ナップ氏は「ペーパープロトタイプは時間の無駄だ」と言っていますが、初期段階のコンセプト作りにはペーパープロトタイプが有効だと認めています。

一度紙からデジタルに移行したら、戻る理由はありません。新機能や製品の再デザインのために、紙のプロトタイプに戻るデザイナーもいるかもしれませんが、その場合でも、紙のプロトタイプまで戻る必要はないかもしれません。

とはいえ、紙のプロトタイプは初期段階の概念化に最適です。そのスピード、簡単さ、シンプルさにより、デザイナー以外の人も含むすべてのチームが利用でき、実験と創造性を育むことができます。‐ これはデジタルキャンバスでは実現できないことですですね。

また、ペーパープロトタイプは以下には理想的です：

• ブレーンストーミングのミーティングとセッション
• 初期段階での基本的な社内ユーザーテスト

ペーパープロトタイプの作り方

ペーパープロトタイプは、製品デザインの楽しみどころです。チームメンバーがブレインストーミングを行い、アイデアをスケッチする機会ですからね。

スケッチの綺麗さを気にする必要はありません。最高の UX デザイナーでも、別に素晴らしいスケッチアーティストというわけではないですし、そもそもこれは、自身のアイデアを視覚化して創造力を引き出すことが目標です。

ペーパープロトタイプの作成には、主に以下の３ステップがあります：

１．材料を準備する

紙、ペン、マーカー、付箋、はさみなどの材料を集めます。UI（ユーザーインターフェース）のスケッチに、ホワイトボードや大きな紙を使うのもいいかもしれません。

２．インターフェースをスケッチする

基本的な画面、UI、デザインの主要な構成要素を別々の紙に描き、そのスケッチを順番に並べることで、ユーザーの流れを表現します。

３．インタラクションのシミュレーションをする

ユーザーとのインタラクションの順序でスケッチをレイアウトします。ユーザーのアクションに基づいてスケッチを手動で切り替えてユーザー体験をシミュレーションし、フィードバックを集めてデザインを直していきます。

詳しいガイドについては、UXPinのプロトタイプに関する記事をご覧ください。

ペーパープロトタイプを作るための６つのヒント

1. プリンター用紙と安い鉛筆やペンを使う。罫線やラインが引いてあるノートは、多くの場合はデザイナーがたくさんのアイデアを練るよりも、線の間に描くことに気を取られて創造性が抑制されてしまう。
2. ウォーミングアップから始める！リラックスして流れに乗るには、数枚のスケッチが必要なこともある。クレイジーエイトは、同じ画面の多くのバージョンを素早くデザインするための素晴らしいペーパープロトタイプの手法であり、これを２，３ラウンド行うと、さらに発展させるアイデアがたくさん出てくるだろう。
3. モバイル優先型またはプログレッシブエンハンスメントのプロトタイプを作成する。最小のスクリーンから始めて、ビューポートを拡大縮小しながらレイアウトを調整する（これはモバイルと Web デザインに当てはまる）。拡大は、コンテンツを優先して、モバイルに変換されない複雑なデスクトップ用のレイアウトになるのが回避されることから、縮小よりもはるかに簡単である。補足: UXPinのオートレイアウトを使うと、自動的にデザインのサイズ、フィット、塗りつぶしがされることからモバイル優先型のデザインに便利な機能である。
4. １画面（１枚の紙）につき１枚のスケッチにこだわる。ペーパープロトタイプでは、紙片を順番に配置してユーザーフローを作成する必要があり、その入れ替えや、新しい画面の追加をしたりすることから、１枚の紙の上に複数の画面があると、このスピードと柔軟性が失われてしまう。
5. アイデアが浮かんだら反復する。目標は質ではなく量であり、紙でプロトタイプのアイデアをたくさん作ると、多くの場合、最終結果を得るために各アイデアから少しずつ取り出すことになる。これは、紙を使ったレゴ セットのようなものである。
6. ペーパープロトタイプがうまくいくには、計画を立てることが重要。十分な数のペン（黒の細いマーカーが最適）、紙、はさみ、のり、付箋、インデックスカード、テープ、厚紙、その他にもプロジェクトに必要と思われるものを用意する。ホワイトボードとマーカーも、ユーザーフローの概要を共同で描くのに最適。プロのアドバイス：ペーパープロトタイプを準備する仕事は、アート＆クラフト愛好家に割り当てる。どのチームにも少なくとも１人はいて、必要なものを十分すぎるほど揃えてくれるはず。

ペーパープロトタイプのテストと発表

UX部門外でペーパープロトタイプをテストして発表することは、常に厄介です。ステークホルダーやユーザビリティの参加者は、何が起こるかを「想像」しなければならないため、訳がわからなくなったり、提示しようとしている内容から焦点がそれる可能性があります。とはいえ、Jakob Nielsen の調査によると、ユーザビリティの問題の７５%は、ペーパープロトタイプのようなシンプルで忠実度の低いプロトタイプで特定できることが分かっています。

ペーパープロトタイプを発表してテストするためのヒントを以下に挙げてみましょう：

• 発表者以外の１人を「人間コンピュータ」または製品シミュレータ役に指名する：人間コンピュータ役の人は、スクロール、スワイプ、さまざまな画面への移動、その他の機能のシミュレーションをする。
• リハーサル：プレゼンターとシミュレーターが同期できるように、リハーサルは非常に重要。発表者は、シミュレータがプレゼンテーションに追いつくための適切なリズムを考案するといいかもしれない。
• 標準的なユーザビリティテストのベストプラクティスに従う – 「最低５人のユーザーを使ってテストを記録する」などの標準は、現在も適用されている。ユーザビリティの標準と実践方法に関する詳細については、当社のユーザビリティ・テスト・ガイド（無料）をこちらからダウンロード可能（英語）。
• ユーザーに紙のプロトタイプを渡して検査させる場合は、どこに注目して何をテストすべきかがわかるように、ガイダンスと注釈を必ず提供する。

UXPin でのプロトタイプ

モバイル アプリケーションを構築する場合でも、新しい Web サイトを構築する場合でも、UXPin でデザイナーは高度なプロトタイプを構築するためのツールを得られます。‐ 大抵の主要なデザインツールではこれができません。

でも本記事を鵜呑みにせず、１４日間の無料トライアルにサインアップして、次のプロジェクトでは UXPin の強力なプロトタイピング機能をぜひ実際にお試しください。

The post ペーパープロトタイプ： １０分でわかる実践ガイド appeared first on Studio by UXPin.

ダブルダイヤモンドのデザインプロセスは、問題の特定や、ソリューションの開発のために広く使われている方法論であり、この成果ベースのフレームワークは、核となる問題とエンドユーザーへの影響に焦点を当てながら、創造性と革新性を促します。

世界最先端のプロトタイピングツールで、より良い製品をユーザーに届けませんか。無料トライアルにサインアップして、UXPin によるインタラクティブなプロトタイピングをぜひお試しください。

ダブルダイアモンドとは

ダブルダイアモンドモデルは、２００３年にブリティッシュデザインカウンシルによって開発されたイノベーションとデザインのためのフレームワークです。デザインカウンシルは、どのような手法やツールを用いても、プロジェクトを実現するためのシンプルなデザインプロセスを求めていました。

デザインのフレームワークには２つのダイヤモンドが以下のようにあしらわれています：

• 問題を表すダイヤモンド
• ソリューションを示すダイヤモンド

デザイナーはこのダイヤモンドの中で仕事をし、このダイアモンドで彼らは問題を真に理解し、ソリューションを徹底的にテストすることができます。

デザイナーは、最初のダイヤモンドで核となる問題を特定すると、２番目のダイヤモンドの基礎となるデザインブリーフを作成します。２つ目のダイヤモンドでは、プロトタイプを作成し、リリース準備が整うまでソリューションをテストすることに重点が置かれます。

ダブルダイヤモンドデザインプロセスの起源

私たちがデザインフレームワークとして知っているダブルダイヤモンドは、ブリティッシュデザインカウンシルから生まれたものですが、このプロセスは、ハンガリー系アメリカ人の言語学者であるベーラ・H・バーナシー氏の「発散-収束モデル」から影響を受けています。

ベラのモデルは、最初のダイヤモンドを使って問題を広く深く探求し（発散的思考）、次に適切な集中的な行動をとる（収束的思考）というデザインフレームワークと非常によく似ています。

ダブルダイヤモンドデザインプロセスにおける４つのフェーズ

ダブルダイヤモンドのデザインプロセスは、２つのダイヤモンドと「４D」とも呼ばれる以下の４つのフェーズで構成されます：

1. 発見（Discover）
2. 確定（Define）
3. 開発（Develop）
4. 提供（Deliver）

ダイヤモンド１ – 問題の発見と定義

最初のダイヤモンドは、UXリサーチと探索に関するもので、多くの場合「問題空間」と呼ばれます。 ‐ デザイン思考プロセスの共感と確定のステージに似ていますね。

デザイナーはまず、問題とユーザーのニーズを調べることから始めますが、このフェーズには、アナリティクスや UX成果物のレビュー、エンドユーザーへのインタビュー、サービスサファリの実施、その他の初期段階のリサーチ方法が含まれる可能性があります。

第２フェーズでは、デザイナーは「発見」フェーズでのリサーチを用いて、問題とそれがユーザーに与える影響を確定しますが、デザインチームは、核となる問題にたどり着くまで、第１フェーズと第２フェーズを何度か繰り返すことがあります。そしてデザイナーが作成する UX 成果物には、以下のようなものがあります：

• ユーザーペルソナ：対象とするユーザーの架空の人物像で、その特徴やニーズを概説する。
• カスタマージャーニーマップ： タッチポイント間のユーザー体験を可視化した成果物。
• 問題ステートメント：取り組むべき具体的な問題を簡潔に表現したもの。
• 共感マップ：理解と共感を促進するために、ユーザーの思考、感情、行動を図示したもの。

第２フェーズの最後では、デザイナーはデザインブリーフを作成して、それをデザインプロセスの後半で適切なソリューションを見つけるための指針とします。

ダイヤモンド２- ソリューションの開発と提供

 ２つ目のダイヤモンドでは、適切なソリューションを見つけるためのアイデア出し、プロトタイプおよびテストを行います

開発のフェーズでは、ダブルダイヤモンドのフレームワークの中でも、チームが以下のようなさまざまなツールや手法を用いる忙しいフェーズです：

• ワークショップとブレーンストーミング：チームとして集まって、アイデア出しや仮説立て、実験の実行、可能性のあるソリューションについての話し合いを行う。
• 低忠実度（Lo-Fi）デザイン：スケッチ、ワイヤーフレーム、ペーパープロトタイプなど、デザイナーが多くのアイデアをサッと開発してテストするのに使われる、忠実度の低い（Lo-Fi）メソッド。
• 部門横断での連携：デザイナーは、エンジニア、プロダクトオーナー、その他のステークホルダーとミーティングを行い、可能性のある課題や制約に関するフィードバックを得るためにアイデアを話し合う。

開発のフェーズは、デザイナーが以下の点において最も可能性の高いソリューションを１つ特定するまで、アイデア出しやプロトタイプ、さまざまなアイデアのテストを繰り返すプロセスです：

• 問題を解決する
• ユーザーのニーズに合わせる
• 予算と技術的制約を満たす

状況によっては、デザイナーはソリューションを１つ選ぶか、いいと思うアイデアを２つ３つ選んで、提供のフェーズで忠実度の高いプロトタイプとテストを行います。まずは、１つのソリューションにたどり着くまで、うまくいかないものを排除することを目標にします。

それでデザイナーは、１つのソリューションにたどり着くと、最終的なプロトタイプを改良すべくさらにテストを行います。この一連のテストにおいて、デザイナーは、最終的な結果でデザインブリーフとステークホルダーが確実に満足できるように、ユーザビリティと UX（ユーザーエクスペリエンス）に焦点を当てます。

また、デザイナーは問題に遭遇すると、ソリューションを見つけるために開発のフェーズに戻り、ソリューションが見つかるまで反復とテストを繰り返します。

プロトタイプとテストが完了すると、デザインチームは、ドキュメント、注釈、アセット、他にもエンジニアがリリースのために最終製品を開発するのに使う指示など、デザインハンドオフに備えます。

あとは、デザインチームは UX監査と QA（品質保証）を実施し、最終リリースが確実にプロジェクトの要件、ビジネス目標、ユーザーニーズを満たしているようにする必要があります。

ダブルダイヤモンドデザインプロセスの使い方

ダブルダイアモンデザインプロセスをワークフローに活用する実践例を見ていきましょう。

第１フェーズ：発見

• ユーザーリサーチ：ターゲットユーザーへのインタビューやアンケートを実施する。
• 市場調査：競合他社や業界動向の調査
• ステークホルダーへのインタビュー：ステークホルダーからインサイトを得る。
• 共感マップ作成：共感マップを作成して、ユーザーの感情や動機を理解する。

第２フェーズ：確定

• データの統合：親和図を使ってパターンを特定する。
• 問題提起：明確で簡潔な問題ステートメントを作成する。
• ユーザージャーニーマップ：ユーザージャーニーをマッピングして、ペインポイントを特定する。
• デザインブリーフ：プロジェクトの目標と制約をまとめたブリーフを作成する。

第３フェーズ３：開発

• アイデア出し：共同ワークショップを通じてソリューションをブレインストーミングする。
• プロトタイプ：ワイヤーフレームやスケッチを作成する。
• ユーザーテスト：実際のユーザーとプロトタイプをテストする。
• イテレーション（反復）：フィードバックに基づいてデザインを改良する。

第４フェーズ：提供

• 高忠実度（Hi-Fi）プロトタイプ： 忠実度の高いモックアップでデザインの詳細を最終決定する。
• 開発：デザイナーとデベロッパーの密接な連携により、サイトを構築する。
• 品質保証：広範なテストを実施する。
• 立ち上げと監視：サイトを立ち上げ、継続的にパフォーマンスを監視し、さらなる改善を図る。

ダブルダイヤモンドデザインプロセスに従うことで、徹底したユーザー中心のアプローチで新しいサイトをきちんとデザインできることから、ユーザーのニーズを深く理解し、ソリューションを探って改良を重ね、最終製品を効果的に実装して立ち上げることによる、成功の可能性の最大化につながるのです。

UXPin でエンドツーエンドのUXデザインを試してみよう

プロトタイプとテストは、ダブルダイアモンドフレームワークなどのエンドツーエンドのデザインプロセスにおいて重要な意味があります。デザイナーは、潜在的なソリューションの徹底的なテストや正確な結果の獲得のために、高品質のプロトタイプの使わないといけません。

残念ながら、高忠実度のプロトタイプは、特定のツールでは時間がかかることがあり、ダブルダイヤモンドのデザインプロセスで多くのアイデアをテストするには理想的ではありません。

UXPin の完全インタラクティブデザインなら、デザイナーはスピードのために品質を妥協する必要はなく、最終製品のような外観と機能を備えた、忠実度の高いプロトタイプを作成できます。そしてより良いプロトタイプだと、テスト時に正確な結果がもたらされることで、デザイナーは画像ベースのデザインツールでもっと色々できるようになります。

UXPin には組み込みのデザインライブラリも標準装備されていることから、デザインチームはコンポーネントをドラッグ＆ドロップして、忠実度の高いモックアップを数分で作ることができます。数回クリックすれば、インタラクションを追加して、以下のコードのような機能を持つプロトタイプを作成できます：

• ステート：任意の要素に対して複数のステートを作成し、それぞれに個別のプロパティとインタラクションを設定できる。
• 変数：ユーザーの入力を捉えてデータに基づいたアクションを実行することで、ダイナミックで個別化された UX（ユーザーエクスペリエンス）をテスト中に作成する。
• 条件付きインタラクション: 「if-then 」と「if-else 」のルールを作成し、ユーザーのアクションや入力に対してさまざまな反応を実行する。
• Expression：フォームのバリデーション、計算コンポーネント、パスワード認証のシミュレーションなど、従来はコードでしか実行できなかった複雑な操作を実行する関数をデザインする。

どんなフレームワークでも、UXPin だとデザインプロセスを強化して、顧客により良いユーザー体験をお届けできます。無料トライアルにサインアップして、UXPin によるコードベースのデザインの可能性をぜひご体験ください。

The post ダブルダイヤモンドのデザインプロセス – 製品デザインを成功に導くおすすめのフレームワーク appeared first on Studio by UXPin.

完璧なWebサイトは、スムーズな制作と立ち上げ作業を１回やって作られるものではありません。

シームレスで完全な機能を備えたサイトは、入念なプロトタイピングの賜物なのです。

プロトタイプで、Webサイトから初期の不完全な部分を取り除くことができ、サイトの効果を最大化する機会がもたらされます。

多くの場合、企業の Webサイトは投資家や顧客に与える第一印象となります。

なので、プロトタイプを通じて Webサイトを完成させる方法を理解するのは、ビジネスの早期成功のために極めて重要です。

そこで本記事では、Webサイトプロトタイプについて詳しく見ていきましょう。

実際にユーザーとテストできるプロトタイプを作成してみませんか。UXPinはインタラクティブな プロトタイプを作成 し 、チーム全体が一体となるUIデザインツールです。こちらから UXPinをぜひ無料でお試しください。

Webサイト プロトタイプとは

出発点となるサイトの初期バージョンであり、プロトタイプの作成によって、探求、改良、完成の余地が効果的な方法で生まれます。

また、プロトタイプの最も優れた点の一つとして、サイトを公開する前に、開発のためのスペースを作ることが挙げられます。

プロトタイプは、低忠実度（Lo-Fi）フォーマットで始め、サイトのフォームと機能の簡単なアウトラインを含めるといいでしょう。

このアウトラインで、最終的な製品のために意図された詳細とインタラクティブなデザインが全て高忠実度（Hi-Fi）のプロトタイプへ発展できます。

Web サイトプロトタイプの柔軟性で、全ステークホルダーにメリットがもたらされます。

デザイナーと開発者は製品を完成させるためのスペースを確保でき、早い段階でステークホルダーの意見を取り入れてインターフェースの現実的なアイデアにつながります。

そして顧客でさえ、プロトタイプが開発に役立つ完璧な UI（ユーザーインターフェース）から恩恵を受けます。

Web サイトプロトタイプのメリット

ビジネスにどのようなメリットがあるかをイメージできるように、Web サイトプロトタイプがもたらす最も注目すべき影響に焦点を当ててみましょう。

視覚化

視覚的に魅力的なプラットフォームは、プロトタイプのような視覚的な情報をもとにしたプロセスを通じて作成するのが最適です。

そして強力なシステムでは、サイトの初期イメージが完全に機能するものに発展するまで、複数回のイテレーション（反復）が可能です。

サイト制作の各ステップをリアルタイムで視覚化できるため、制作ステップに関わってインスピレーションを得る機会が各関係者にもたらされます。

例えばデザイナーやデベロッパーは、サイトを完璧なものにするために、常に自分の作品を微調整したり、対話したりすることができます。

また、プロジェクトの方向性を積極的に評価できるため、インタラクティブなビジュアルがなければチームの進捗や目標を十分に把握できないことがあるかもしれないステークホルダーにもメリットがあります。

早期のフィードバック

プロジェクトを完成させたものの、ある時点でその方向性が間違っていることに気付いてプロジェクトをやり直さないといけなくなることほど、時間を食う上に不毛なことはありません。

プロトタイプは、このような開発後期での落とし穴を避けるための効果的な戦略です。

チームが構築の全段階でデザインと対話できるようになれば、フィードバックは生成も実行もしやすくなります。

つまり、いつでもプラットフォームの方向性をテストし、方向転換することができるため、完成品が目標を達成できていない可能性ははるかに低くなります。

UX テスト

最終製品はユーザーあってのものですから、デザインプロセスのできるだけ早い段階でユーザーの意見を取り入れてはどうでしょうか。

製品が完成する前に、UI とユーザーデザインをプロトタイプで実際のユーザーにテストすることができます。

これによって、完全にインタラクティブな体験ができるようになり、ユーザーはウェブサイトの機能を全てテストして、フィードバックを提供することができます。

リスク軽減

ウェブサイトの設計には、サイトが公開されて初めて明らかになる隠れた落とし穴が潜んでいることがあり得ます。

例えば、わかりにくいナビゲーションや一貫性のないデザイン スタイルなどのUIに関する問題で、サイトの影響力が下がる可能性があります。

インタラクティブなプロトタイプで、サイトのフォームや機能の問題が公開前にわかりやすく提示されることによって、こうしたリスクが軽減されます。

なので、プロトタイプがあれば、コストのかかる複雑な作業も、わずかな微調整で済みます。

また、プロトタイプを用いて、製品がステークホルダーのビジョンに合致していることを確認することで、機能性以外のリスクも減らすことができます。

サイト制作中に社内の誰もが簡単にレビューできるようになれば、会社の目標との整合性をずっとチェックしやすくなります。

明瞭なコミュニケーション

まとまりがあり、スムーズに機能するプラットフォームは、つながりの強いチームを生み出します。

一般的なチームワークを育む方法はいくらでもありますが、単一の製品に関するコミュニケーションは、情報源を共有することで一番うまくいきます。

その際プロトタイプは、ウェブサイトデザインチームのコミュニケーションのために完璧な情報の中心になってくれます。

このフォーマットでは、メンバー全員からの投稿の閲覧や対話ができるため、メンバー全員の足並みが揃い、さまざまな改善点について話し合うことができます。

効率的なイテレーション

完全に公開されたウェブサイトを編集するのは非常に複雑なプロセスですが、適切なツールを使えばそれを回避することができます。

プロジェクトの新しいイテレーションを簡単に繰り返し作成できる機能で、最高の製品を構築することができるようになります。

プロジェクトの新しいイテレーションを作成するための効果的かつ効率的なプロセスにより、チームは公開前に多くの編集を行い、より創造的なコンセプトを追求することができます。

そしてその結果、出来上がったサイトはスムーズに運営され、型にはまった競合他社のサイトとは一線を画すものになるのです。

ユーザー中心のデザイン

ユーザーリサーチはここまでしかできません。このような形のユーザー統合はコンセプト作りには有効かもしれませんが、プラットフォームが開発されるにつれて、より具体的なユーザーインプットが必要になってきます。

そこでプロトタイプだと、サイト独自の方法でユーザーのインタラクションを探求する機会が得られます。

サイトのプロトタイプを操作してレビューする機会をテストユーザーに与えることで、チームはどのような改善ができるかをより深く理解することができます。

多忙なデザインチームでは見逃してしまうような問題も、ユーザーによって明るみになり、その情報でインパクトのある改善が促されることもあります。

スコープの確定

スコープを明確にしてそれを維持するのは、どんなプロジェクトにおいても重要なことであり、Webサイトも例外ではありません。

 Webサイト制作 には複数の人が関わるため、スコープが定まらないままでは、不要なプロジェクトに多くの開発時間とリソースが割かれることになりかねません。

プロトタイプはアウトラインのような役割を果たすことから、チームは早い段階で作業範囲を決めることができます。

どのような機能が必要かを特定することで、どこにフォーカスするかの基盤ができ、プロジェクトのスコープから外れた余計な部分がすぐにとわかるので軌道修正することができます。

ステークホルダーの承認

ステークホルダーはサイトのデザインについて深く理解していない場合があり、それで製品を説明して承認を得ることが難しくなりますが、プロトタイプは、ステークホルダーがプロジェクトを理解してそれを承認しやすいように、正確な視覚的資料を提供してくれます。

コスト削減

ミスの発見が遅れれば遅れるほど、そのミスは大きくなり、費用もかさむ傾向にあります。

デザインミスやプロトタイプの欠陥を早期に解決することで、ミスがサイトの最終バージョンで金銭的な負担に発展するのを防ぐことができます。

デザインの探求

探求は、簡単でリスクのないときに最も魅力的で効果的なものになる傾向があります。

プロトタイプで、デザイナーは創造的でリスクのない空間を得ることができ、最高のプロトタイピングツールを活用して、さまざまなデザインツールと簡単にアクセスできます。

この形式の探索により、サイトを目立たせ、閲覧者に印象を与えることができるような新しいデザインスタイルの機会が開かれます。

Webサイトプロトタイプの作り方

プロトタイプの可能性を最大限に引き出すために、始める前に考慮すべき重要な点を以下で見てみましょう。

予備作業を行う

よくできたアイデアに共通するのは「リサーチ」であり、「なぜ」、「誰のために」「どのように」サイトをデザインするのかを理解するのは、何よりも優先すべきことです。

なので時間をかけてユーザーリサーチを行い、ターゲットとするユーザーを特定しましょう。

ユーザーが何を求めているかを理解し、そのコンセプトと目的を一致させることで、成功の土台を築くことができるのです。

このような初期の段階で答えが全て得られるとは思えませんが、将来のウェブサイトに関して考えられる核心的な質問にはそれぞれ以下のように答えを考えてみるものいいかもしれません：

• ウェブサイトの目的は何か？

• ウェブサイトはブログ、販売プラットフォーム、またはその他の何かに分類されるか？

• どのような読者が想定されるか？

• 閲覧者はウェブサイトとどのように接触するか？

• サイトの成功にどんな機能が必要か？

• ウェブサイトは、同カテゴリーの他のサイトとどのように似ているか？

• また、どのように違うのか？

事前準備があるほど、次のデザインステップがより簡単で正確になります。

準備の詳細については、製品開発ガイドの記事をご覧ください。

最初のビジュアルをスケッチする

重要な要素と目標をすべて頭に入れたら、いよいよプロトタイプの前段階を作成します。

このアウトラインは「ワイヤーフレーム」と呼ばれることが多く、サイトの主要機能の概要を示すことを目標としています。

このラフ案では、サイトの情報アーキテクチャ、インタラクティブ要素、基本的なデザインアイデアなどが詳しく説明されるべきです。

ただこの段階では、詳細や正確さは主な目標ではないので、ワイヤーフレームはモックアップツールや手描きのスケッチで作成することができ、ペーパープロトタイプのノウハウがあれば、この段階でそれが大いに役立ちます。

UXPinでプロトタイプを作成する

ここでメインベントである、柔軟性、インタラクティブ性があり、完成した製品を表現できるプロトタイプです。

ワイヤーフレームが、デザインの重要な側面に焦点を当てることでこのプロセスの先陣を切り、プロトタイプで、新しいディテールを追加することができます。

従来のプロトタイプのプロセスは長く複雑になることがありますが、テクノロジーの進歩によってプロトタイプはシンプルになりました。

UXPin はおすすめツールの１つであり、Web サイトデザインにおけるプロトタイプの効率と効果を上げるために特別に設計されています。

UXPin のプロトタイプは、チームが簡単に不完全な部分をチェックしてフィードバックを得ることができるように、プレビューが簡単にできるように設計されています。

プレビューは、複数のブラウザでテストしたり、モバイルデバイスで表示したりすることもでき、あらゆるフォーマットで基準を満たしていることを確認できます。

また、UXPin Mirror を使えば、モバイルデバイス上でリアルタイムにアップデートの違いを確認することもできます。

また、高度な機能のライブラリにより、完成したサイトの細部まで正確に表現できます。

インタラクティブなコンポーネントのさまざまな状態を作成したり、スムーズなナビゲーションに対応するドロップダウンメニューをデザインしたり、タブメニュー、ナビゲーションドロワー、その他多くのオプションを使って整理したりできます。

プロトタイプの段階でのカスタマイズはこれだけに留まりません。ユーザー体験を個別化するために変数を追加し、バーチャルショッピングカートのようにさまざまな値を計算するために式を使うことができます。

また、ユーザーのインタラクションをもとに、サイトがさまざまな反応をするように、条件付きのインタラクションを生成することもできます。

UXPinのプロフェッショナルなデザインのプロトタイピングツールでは、プロフェッショナルな Webサイトに必須の複雑な機能はすべて、コードを学ぶ必要のないシンプルなシステムで作成することができます。

コンセプトを検証し、Web サイトプロトタイプを改良する

目標に合ったプロトタイプを作成したら、いよいよテストです。

インタラクティブで完全に機能するプロトタイプを用いて、ユーザーが Web サイトをどの程度ナビゲートできるかをテストすることができます。

ユーザーが特定の機能を発見してそれを使うのにかかる時間を記録して課題を特定し、デザインがどのように受け入れられるかを観察します。

フレキシブルなプロトタイプを使えば、ユーザーの反応に基づいて簡単に修正を行うことができ、その修正を再テストして Web サイトの試作品を磨き上げることができます。

UXPinにおける Web サイトプロトタイプの実例

ユーザー向けにデザインする場合、「最終的な目標」と「その途中の行動」を知る必要があります。

両者はそれぞれ「コンテンツ」と「ユーザーフロー」と呼ばれ、共に優れた Web サイトの中心を形付けます。

でも、情報のアウトラインからインタラクティブなデザインにするにはどうすればいいのでしょうか？

以下で、コンテンツ一式をプロトタイプに速やかに変える方法を見てみましょう。

ステップ１：コンテンツインベントリーの作成

何をデザインするのか？多くのデザイナーは、ユーザーがより多くの時間を費やす情報を調べる前に、外側から始めて内側に向かって作業し、内容とフレームワークを作成します。

内側からデザインを始めると、ユーザーを念頭に置いてデザインすることになります。

すぐに見てもらいたいものは、次に注目してもらいたいものよりも優先されます。

例えば、ナビゲーションバーは CTA（行動喚起）ほど注目に値しません。

同様に、コンテンツ優先型のアプローチは、当然ながらモバイル優先型のアプローチでもあるということも重要です。

モバイルデバイスには、画面サイズ、帯域幅など、より多くの制限があるため、このようなパラメーターの範囲内でデザインすると、容赦なくコンテンツを優先せざるを得なくなります。

コンテンツインベントリとは、エンドユーザーに関連する要素をすべて含む、整理されたリスト、スプレッドシート、または同等の文書のことであり、よくできたインベントリだと、セクションに分けられた情報の階層として機能します。

完成したコンテンツインベントリーには、ユーザーフローの可能性が全て示されます。

ステップ２：十分な情報を得た上でコアフローを計画する

銀行の Web サイトのような複雑なプロジェクトでは、次のような多くのフローが必要になります：

• パスワードの変更
• 投資オプションの確認
• 401k（米国の確定拠出年金）の確認
• 小切手の注文
• 新規口座開設・解約
• 他行への送金、他行からの送金
• クレジットカード残高の支払い

各フローでは、ユーザーが複数のコンテンツ ページを通過する必要がありまが、このチュートリアルでは、最も重要なフローの１つであるクレジットカードの支払いプロセスだけに焦点を当てます。

プロトタイプを作成するときは、まず最もリスクの高い、あるいは最も基本的なユーザーフローに焦点を当てましょう。

このユーザーフローを書き出してみましょう：

• ホームページにアクセスする。
• ログイン情報を入力し、ダッシュボードにリダイレクトする。
• クレジットカードの残高をクリックする。
• 残高を支払う口座を選択する。その後、リクエストを送信し、残高が完済されたことを確認する。

ステップが多くあるように思えますが、必要な決定は、「支払うかどうかの決定」、「支払い元のアカウントの選択」、「トランザクションの確認」の３つです。

プロトタイプでは、各ステップが明確かつ簡単でないといけません。

ステップ３：プロトタイプを作る

今回は、架空の銀行でクレジットカードの残高を返済させるユーザーフローを構築しましょう。

実際のコンテンツがあれば、この目標はミッドファイ（Mid-fi）を作ることです。

箱型のワイヤーフレームのような Lo-fi プロトタイプや、ブランディングをそのまま見せる Hi-fi プロトタイプと違い、Mid-fi プロトタイプは、ユーザーがタスクを達成するために取る意思決定の流れを示します。

イテレーションの回数が限られている場合、視覚的なデザインに時間を浪費することなく、ユーザーテストに十分な詳細を提供できる Mid-fi プロトタイプが最適です。

Mid-fi では、機能的なプロトタイプは、以下が示されます：

• UI 要素の正しいレイアウト（ナビゲーション、主要コンテンツなど）
• 基本的な色
• 基本的なインタラクション（高度なアニメーションやステートはまだない）
• 正しいタイポグラフィ
• 正しい寸法の画像

以下で、銀行の Web サイトで機能させる方法を見てみましょう。

ログインページ

ログインは簡単です。ユーザーは、銀行のホームページにあるシンプルなフォームで自分の口座を安全に入れますが、ユーザーにとって銀行やそのブランドとの最初の接点であるこの必須のステップをおろそかにはしません。

カラースキームからマイクロコピーに至るまで、すべてが親しみやすく、かつプロフェッショナルなトーンに合っていないないといけません。

口座の概要

ユーザー名とパスワードを入力すると、アカウント情報を含むダッシュボードが表示されます。この画面は、その人にアカウントの概要を伝えることが目的であり、広告もアップセルもなく、二次的な情報は片側に押しやられています。画面はすべて彼らのお金に関するものです。

また、支払い時かどうかの判断のために、この画面にクレジットカードの残高を表示します。

支払いプロセス

ユーザーフローによると、その人が次に取る行動は、カード残高の支払いの選択です。

これは簡単なクリックであり、この時点で、お金を引き出す口座を選択しないといけません。

決断には時間と認知力が必要なので、口座選びはシンプルにすべきであり、各口座は、口座名と残高などの必要最小限の情報が挙げられているだけです。

次に、その人は３つ目の決定、つまり取引の決定に辿り着きます。この時点で必要なのは、トランザクションの内容だけであり、つまり、前の決断の選択肢を排除することができます。

そして新しい画面、あるいはシンプルなモーダルウィンドウに、その決定に必要な情報が提示されます。具体的には、口座名、支払い金額、承認と不承認のボタンなどになります。

できました！右のボタンをクリックすると、残高がクリアされたことが確認できます。

実物に近づくことでうまくいく

このデザインの各画面には、実際のマイクロコピーに加えて、実際の色、タイポグラフィ、レイアウトが使われていることに注目してください。完全には洗練されていませんが、テストを始めるには十分です。

この時点では、基本的なインタラクションをいくつか追加して、ユーザーが画面をクリックできるようにするだけです。

それが終わったら、フィードバックを集めて、必要に応じてイテレーションを行い、ユーザーとテストを行います。

そしてプロトタイプを完成させるには、各ユーザーフローで上記のステップをすべて繰り返すだけです。

UXPinで自分のプロトタイプを作ろう

人がインタラクティブな Web サイトを訪れるのは、タスクを達成するためであり、ウィジェットを使ったり、グラフィックを鑑賞するためではありません。

なので、実際のコンテンツに沿った流れは、プロトタイプのUIを開発するのと同じくらい重要になります。

コンテンツ中心のデザインで、その道に沿って進むべき道が見つかります。

このガイドで学んだことを試してみたい方は、UXPinの無料トライアルをぜひお試しください。

The post Webサイト制作 のためのプロトタイプ【 実践ガイド】 appeared first on Studio by UXPin.

プロダクトのリデザインは、デジタル製品の多くの側面、特にその UX（ユーザーエクスペリエンス）、ビジュアルデザイン、技術的バグ、ビジネス価値を改善する機会です。

また、製品チームは、製品をより適切で最新のトレンドに対応させることで、製品のライフサイクルを延ばすこともできます。

UXPin Mergeのコンポーネント駆動型プロトタイプで、プロダクトリデザインの範囲を改善し、優れた結果を出しませんか。詳しくは Mergeページをぜひご覧ください。

プロダクトリデザインとは

デジタル製品の「リデザイン」とは、Web サイト、アプリ、ソフトウェア、ゲームなど、既存の製品の更新や改善のことを言います。

このようなリデザイン、変化するテクノロジー、トレンド、需要に対応し、製品の関連性と競争力を維持するのに非常に重要です。

リデザインの程度はプロジェクトの範囲によって異なり、UX の向上やユーザーニーズの変化への対応、技術的な問題への対処のために、UI（ユーザーインターフェース）、機能性、新機能に大幅な変更を加えることが含まれる場合があります。

リデザインのプロセスでは通常、現行製品の徹底的な分析、ターゲットユーザーのニーズや嗜好を理解するためのユーザーリサーチ、新しいデザインコンセプトやプロトタイプの開発が行われます。

そしてデザイナーは、最終的な製品がデザインブリーフの目標と目的を満たすようにすべく、そのプロトタイプをテストして反復しないといけません。

また、プロダクトリデザインは、デザイナーが多くのステークホルダーと協力し、過去の調査を見直し、新たな調査を行う必要があるため、複雑で時間のかかる場合が多いです。

製品をリデザインする理由

UX向上

UXの向上は、リデザインのプロジェクトの範囲に関係なく、優先されることがよくあります。

デザイナーは、製品がよりユーザーに使いやすく、効率的で、楽しめるようなものになることを目指します。

例えば、企業はWebサイトをリデザインして、より直感的でナビゲートしやすいものにするかもしれません。

技術上の問題

デザイナーは、パフォーマンスや機能に悪影響を与える技術的な問題やバグを解決するために、エンジニアと協力することがよくあります。

例えば、セキュリティ上の欠陥を修正するために、エンジニアリングチームが新しい認証システムを求めることがあります。

その際デザイナーは、リリース前に新しいログインフローをテストし、潜在的なユーザビリティの問題を特定しないといけません。

業界の新しいトレンドや需要に応える

組織は、業界のトレンドやベストプラクティスに対応するために製品をリデザインすることがよくあります。

業界のトレンドに合わせてデザインを変更したいい例として Instagram が挙げられます。同社は過去１０年間で、Snapchat に対抗した「ストーリー」 と、TikTok に対抗した「リール」の2つの大きなデザイン変更を行いました。

変化するユーザーニーズに応える

テクノロジー同様に、ユーザーのニーズも進化するので、組織は変化に合わせて製品をリデザインします。

また、ターゲットとするユーザーが変わることもよくあることで、その度に組織は新しいニーズや優先順位に合わせて製品をリデザインしないといけません。

パフォーマンスおよびスケーラビリティの向上

製品が急成長を遂げると、新しい技術やトラフィックの増加、成長に伴う使用量の増加に対応するために、製品をリデザインしないといけなくなることがよくあります。

新しいデバイスに最適化する

新しいデバイスや IoTが頻繁に市場に登場する中、デザイナーは需要に合わせて UI や機能をアップデートしないといけません。

例えば、２０２１年５月、Google は折りたたみ可能なデバイスに対応するための新しいレイアウトやコンポーネントを含むマテリアルデザイン３をリリースしました。

ビジネス目標との整合性を上げる

商品のリデザインは、多くの場合ビジネスの目標や目的に沿って行われ、その目標は、初売り、バレンタインデー、クリスマスなどの季節的なプロモーションや新製品に関連する場合があります。

例えば、ある ECブランドはが新しい製品群をリリースする予定がある場合、その製品を Web サイト上で宣伝して優先順位を付けるにはリデザインが必要になります。

ブランドアイデンティティの向上

企業は、組織のアイデンティティをよりよく反映させるため、あるいはリブランディングに合わせるために、製品のビジュアルデザインやブランディングを一新したいと思うかもしれません。

例えば、ある組織は製品のデザインを古く感じ、ブランドを現代のデザインのトレンドに合ったものにするためにデザインを変更したいと考えるかもしれません。

競争圧力への対応

組織は、競合他社に追いつき追い越すために、製品をリデザインをしないといけないことがよくあります。例えば、調査チームが、市場で提供されていない機能や特徴の需要を特定し、そこで企業は、競争上の優位性を獲得するために製品をリデザインします。

UX のための競合分析については、こちらの記事でご紹介しています。

ビジネスの成長を促進する

新たな市場への参入、新規ユーザーの獲得、既存ユーザーの維持、エンゲージメントや収益の向上など、ビジネスの成長を促進するのに、多くの場合はリデザインが必要です。

例えば、広く使われているブログプラットフォームである Ghost は、クリエイターエコノミーに焦点を当てるため、過去５年間で製品をリデザインしました。

同プラットフォームは、ブロガーや出版社といった元々の顧客層を今も惹きつけていますが、デザインの変更により、サブスクリプションベースのビジネスやクリエイターにとって好ましい選択肢となりました。

一般的な製品リデザインのプロセス

以下は、通常行われるリデザインプロセスのステップです。

１．リデザインの目標と目的を定める

目標と目的を定めることは、リデザインのプロセスを導く重要な第一歩です。

このステップでは、ステークホルダーに会い、ユーザーのニーズを考慮しながらリデザインのビジネス目標をリストアップし、優先順位をつけます。

２．現行製品の徹底的な分析を行う

次に、デザイナーは現在のデザインを、その特徴や機能性、UX やパフォーマンスに細心の注意を払いながら分析します。

この分析により、リデザイン時にデザイナーが対処しないといけない問題や課題が特定されます。

３．ユーザーリサーチを行う

ユーザーリサーチによって、デザイナーは製品のターゲットとなるユーザーのニーズ、嗜好、行動を理解することができます。

また、ユーザーリサーチの手法には、インタビュー、アンケート、ユーザーテスト、フォーカスグループ、既存製品の分析などがあります。

そしてデザイナーは、この顧客からのフィードバックをもとに、ユーザーペルソナの更新や、リデザインのプロセスの指針となる新しいペルソナの作成などを行います。

４．デザインコンセプトおよびプロトタイプを作る

デザイナーは、ステップ１から３で集めたリサーチを分析し、デザインコンセプトのアイデアを練ります。

このフェーズでは、デザイナーはデザインスプリントや迅速なコラボレーティブプロトタイピングのセッションを実施し、多くのアイデアを速やかに反復します。

ステップ４は、ユーザーの問題を解決しながら、プロジェクトの目標と目的を満たすソリューションを見つけることを目指しています。‐ 本質的にはデザインチームのバランスをとるということです。

５．テストおよび反復

デザインプロセスにおいて、テストは欠かせないものです。デザイナーは、ステークホルダーにプロトタイプを提示し、ユーザビリティテストを実施して、アイデアに対するフィードバックを得ます。

そして、プロジェクトの予算と範囲によっては、デザイナーは何度も反復を行い、コンセプトを洗練させてからハンドオフする場合もあります。

６．デザインハンドオフと開発プロセス

次に、デザイナーはデザインファイル、プロトタイプ、ドキュメントをエンジニアに渡し、最終製品を開発してもらいます。

そしてエンジニアが開発プロセスを完了すると、デザイナーは QA（品質保証）を行い、最終製品がデザインプロジェクトの仕様を満たしていることを確認します。

７．監視および保全

組織がリデザインをリリースした後、プロダクトオーナーは事前に設定したメトリクス（KPI）を通じてパフォーマンスを監視し、ユーザーからのフィードバックを集めます。

また、彼らはこのデータを使って製品を更新または改善することで、そのライフサイクルと市場での関連性が最大化されるかもしれません。

UXPin Mergeで速やかなプロダクトリデザイン

UXPin Merge は、企業がデザインシステムを UXPin のデザインエディタに同期させることができるようになる高度なコードベースの技術です。

なので、デザイナーはデザインプロセスで、エンジニアが最終製品に使うのと同じコンポーネントを使うことができます。

そしてこのコンポーネント主導のプロトタイプのワークフローにより、デザイナーは最終製品の完全に機能するレプリカを作成し、正確なユーザビリティテストや、ステークホルダーからの有意義なフィードバックを得ることができます。

製品分析のためのバージョン管理

Merge のバージョン管理で、デザインチームは古い製品のプロトタイプを作成するためにデザインシステムの以前のバージョンに切り替えることできるようになります。これによってデザイナーは既存の製品のプロトタイプを作成し、問題や改善の機会を特定することができます。

高忠実度のプロトタイプを数分で実現

製品の分析とリサーチが完了したら、デザイナーはプロトタイプを作成し、ソリューションをテストして、反復と改善を行うことができます。

その際、既存のコンポーネントライブラリを使ってプロトタイプを作成したり、UXPin のパターン機能を使って新しいプロトタイプを作成することができます。

また、このコンポーネント駆動型のプロトタイピング環境により、チームは従来のデザインワークフローよりも高い忠実度と精度で、ビルド、プロトタイプ、テスト、反復を行うことができます。

UXPin を使ったウェビナーでは、製薬会社の大手である ジョンソン・エンド・ジョンソン の UX デザイナーが、組織のデザインシステムを使って、１０分以内に UI の完全なリデザインを構築する方法を紹介しています。

The post プロダクトのリデザイン | うまくいくための工夫とヒント appeared first on Studio by UXPin.

UX デザインフレームワークは、ユーザー中心で、一貫性があり、効率的なデジタル体験を生み出すための貴重なツールです。万能のソリューションではなく、さまざまなプロジェクトに適応できる柔軟なガイドラインです。

多くの組織やスタートアップ企業は、プロジェクトを成功させるために１つもしくはそれ以上の UX デザインフレームワークを採用しており、デザインチームはそのフレームワークを用いて意思決定を行い、問題を解決します。

主なポイント：

• UX デザインフレームワークとは、一貫性のあるユーザーに優しいデジタル製品、Web サイト、アプリケーションを作成するために、デザイナーが従う構造化されたアプローチのことである。
• UX デザインフレームワークでまとまりのある楽しい UX（ユーザーエクスペリエンス）が確保されながら、デザイナーは十分な情報に基づいたデザインの決定を下すことができる。
• デザインフレームワークで、リーンUX やダブルダイアモンドのようなプロジェクトの遂行ができるようになったり、フォッグ行動モデルやフックモデルを適用して特定の機能の成果を達成したりすることができる。

世界最先端のコードベースのデザインおよびプロトタイピングツールである UXPin を使って、製品開発プロセス全体のデザイン課題を解決しませんか。無料トライアルにサインアップして、UXPin の全機能をぜひお試しください。

デザインフレームワークとは

デザインフレームワークとは、デザインプロジェクトのためのツール、ワークフロー、プロトコル、プロセスのセットであり、それでチームは、問題の解決やプロジェクトの遂行のための体系的なアプローチを得られます。

デザインフレームワークは、新入社員のオンボーディングや責任の引継ぎに有用であり、新しいチームメンバーは、慣れ親しんだ、構造化されたプロセスに従うことで、自分がデザインプロセスのどの位置にいて、どのようにプロジェクトを完成させるべきかを知ることができます。

また、複数の部門横断的なチームが同じ製品に取り組む大規模な組織では、デザインフレームワークを使うことで、チームの連絡や連携が確保され、ワークフローや遂行において最高の品質と一貫性を維持することができます。

デザインフレームワークは、全員に特定の考え方や作業方法を強制するのではなく、チームを導くものであり、チームメンバーに何をすべきかを指示する代わりに、ソリューションを見出すための体系的な道筋を提供するものなのです。

デザインフレームワークが必要な理由

デザインフレームワークを使う主な利点には、以下のようなものがあります：

• 一貫性： プロジェクトのさまざまな部分にわたって、統一された認識可能なデザインを確保する。
• 効率： 確立された作業パターンを提供することで時間の節約になる。
• ユーザー中心主義： ユーザーのニーズと期待を優先し、より良い製品を生み出す。
• コラボレーション： デザインチーム、デベロッパー、ステークホルダー間のコミュニケーションを促す。
• 生産性： チームは計画的かつ一貫してプロジェクトを遂行できる。

UX デザインのフレームワーク９例

UX デザインのフレームワークは、デザインプロセスと製品開発に構造を提供しますが、以下のように、デザインチームが達成したい結果に応じて使うフレームワークがあります。

１．UCD（ユーザー中心デザイン）

出典：Interaction Design Foundation

UCD（ユーザー中心デザイン）は、エンドユーザーのニーズ、嗜好、行動をデザインプロセスの最前線に置くUX デザインのフレームワークであり、それを使う人にとって直感的で、効率的で、楽しい製品、サービス、システムを作ることを大前提としています。

ユーザー中心デザインの主要な原則と側面には、以下のようなものがあります：

• ユーザーへの共感： デザインプロセスは、ユーザーを深く理解することから始まる。デザイナーは、ユーザーのニーズや目標、ペインポイント、行動におけるインサイトを得るべくユーザーリサーチを実施する。
• ユーザビリティの重視： ユーザビリティは UCD の重要な側面であり、デザイナーは、製品を学びやすく、使いやすくし、ユーザーのエラーやフラストレーションを最小限に抑えることを目指す。そしてそれには、明確なナビゲーション作成などが含まれる。
• プロトタイプとテスト： デザイナーは、デザインプロセスの早い段階でプロトタイプを作成し、そのプロトタイプを実際のユーザーとテストすることで、デザインハンドオフの前に問題を特定する。
• 継続的改善： このアプローチでは、製品が発売された後でも、ユーザーからのフィードバックやニーズの変化に基づいて、継続的なモニタリングと改良を促す。

要するに、UCD とは、ビジネス上の目標を満たすだけでなく、より重要なこととして、それを使う人々のニーズや期待に応え、より良いユーザー体験をもたらす製品を生み出すことを目指す総合的なアプローチなのです。

２．デザイン思考プロセス

出典： IBM’s Renner Modafares

デザイン思考プロセスは、大抵の UX フレームワークやワークフローの基礎となっており、世界中の UX デザイナーが UX デザインを学ぶ際に学ぶフレームワークになります。

デザイン思考のプロセスは、以下の５つの段階からなる反復的なユーザー中心のフレームワークです：

• 共感：ユーザーが必要としているものを見つける
• 確定：解決したい問題を決める
• アイデア出し：ユーザーの問題に対するソユーリョンを開発する
• プロトタイプ：プロトタイプを作成する
• テスト：プロトタイプをユーザーやステークホルダーとテストする

さらに読む：デザイン思考 プロセスとは？

３．ダブルダイアモンド

出典：UX Collective

ダブルダイヤモンドは、デザインイノベーションに好まれる成果ベースのデザインフレームワークであり、チームメンバーがアイデアを開発して反復する連携と創造的思考を促します。

ダブルダイヤモンドのフレームワークには、以下のように２つのステージ（ダイヤモンド）と４つのステップがあります：

第１ステージ – 準備：

• 発見：UX チームは、ユーザーのニーズや問題を理解するために UX リサーチを実施する。そこでリサーチャーは、インタビューやユーザビリティ調査を通じてエンドユーザーと関わり、共感し、問題を発見する必要がある。
• 確定：チームは、ディスカバリーから得たインサイトをもとに、プロジェクトが解決すべき問題を確定して優先順位をつける。

第２ステージ – プロトタイプおよびテスト：

• 開発：UXチームは、さまざまなアイデア出しやプロトタイプの手法を用いて、ユーザーの問題に対するアイデアやソリューションを開発する。
• 遂行： チームは、エンドユーザーやステークホルダーとともにソリューションをテストしなければならず、そこで機能しないソリューションは却下し、機能するソリューションは反復して改善する。

４．フックモデル

出典：Webkul

ニール・エリアル氏は、「習慣形成的な製品を作る」ための UX デザインフレームワークとしてフックモデルを開発しました。このフレームワークは、顧客に価値を提供しながら、デザイナーが倫理的にプロジェクトにアプローチすることを奨励しています。

フックモデルには、以下の４段階のプロセスがあります：

1. トリガー：ユーザーが特定の行動を取るきっかけとなる外部または内部のトリガーを理解する。
2. アクション：ユーザーに取ってもらいたい行動を確定する
3. 可変報酬：ユーザーがアクションを完了したときに得られる、予想外のポジティブな報酬。
4. 投資：ユーザーに、製品により多くの時間を投資するインセンティブを与えることで、サイクルを繰り返す。

さらに読む：

• Hooked: How to Build Habit-Forming Products
• 優れたUXデザインを生み出す心理的トリック

５．リーン UX

出典：Plain Concepts

リーンUX とは、成果物よりも成果を優先する、協働的な UX デザインのフレームワークであり、デザイナーは、思い込みではなくデータを使って意思決定を行わないといけません。また、この方法論では、必要のない機能が削除されるため、より無駄のない問題解決型の製品が実現します。

リーンUX のフレームワークには以下の３つの段階があります：

• 思考：結果、仮定、ユーザーリサーチ、アイデア、メンタルモデル、スケッチ、ストーリーボード
• 作成：ワイヤーフレーム、UI デザイン、モックアップ、プロトタイプ（MVP：最小実行可能製品）、価値提案、仮説
• 確認：データおよびアナリティクス、ユーザビリティテスト、ステークホルダーとユーザーのフィードバックの分析。

さらに読む：

• リーン UX ：UXで効率性を最大化するためのヒント
• Lean UX vs. Agile UX – is there a difference?（英語版）

６．アジャイル UX

出典：UXmatters

アジャイル UX は、アジャイルソフトウェア開発と連携するために作られたデザインフレームワークであり、アジャイルソフトウェア開発と同様に、以下のような１２の指針があります。

1. CX（カスタマーエクスペリエンス）
2. 技術と社会の変化を利用する
3. リソースを有効活用した開発スケジュール
4. 適応力のある連携
5. 意欲的な個人を中心としたプロジェクトの構築
6. チームのチャンネルを超えた効果的なコミュニケーション
7. 成功のベンチマークとなる実用的なアプリケーションと高品質の UX
8. 持続可能な開発
9. 技術的な卓越性は相対的なものである
10. シンプルさ
11. 部門横断チーム
12. 適応力のある柔軟なチーム

さらに読む：

• How Agile Environments Revolutionize a Design Team’s Workflow?（アジャイル環境はデザインチームのワークフローにどのような革命をもたらすか？）
• The 12 Realistic Principles of Agile UX（アジャイル UX の現実的な12の原則）
• アジャイル 、 スクラム 、 カンバン – プロジェクト管理 手法３選を比較

７．BASIC フレームワーク

出典：Basic UX

BASIC UX とは、「使える製品のためのフレームワーク 」です。比較的新しいデザインフレームワークであり、現代の製品開発のためのインタラクションデザインガイドラインを提供します。

BASIC の頭文字は、以下の５つの原則に従っています：

B = Beauty – 美しさ

A = Accessibility – アクセシビリティ

S = Simplicity – シンプルさ

I = Intuitiveness – 直感性

C = Consistency – 一貫性

各原則の中には、成功に導くためにデザイナーが自問自答しないといけない一連の質問が以下のように含まれています。

Beauty（美しさ）:

• ビジュアルデザインは美しいか
• スタイルガイドに従っているか
• 高品質のビジュアルが使われているか
• 適切に配置されているか

Accessibility（アクセシビリティ）:

• 「誰でも」使えるか
• 規準に準拠しているか
• クロスプラットフォームに対応しているか

Simplicity（シンプルさ）:

• ユーザーの負担は軽減されているか
• 乱雑で繰り返しの多い文章はないか
• その機能は必要か

Intuitiveness（直感性）:

• 機能は明確か
• ユーザーは最初の指示がほとんどなくても目的を達成できるか
• ユーザーは更なる指示がなくても簡単にタスクを繰り返すことができるか
• ユーザーは結果や出力を予測できるか

Consistency（一貫性）:

• 製品は既存の UI パターンを再利用しているか
• デザイン言語、画像、ブランディングはデザインシステムと一貫しているか
• 適切なタイミングで適切な場所に表示されるか
• 製品は毎回一貫したパフォーマンスをしているか

組織は、このような質問を適応させたり、独自の質問を追加して、製品とそのユーザーに関連したものであることを確認するといいでしょう。

さらに読む：BASIC UX – A Framework for Usable Products.（BASIC UX – 使いやすい製品のためのフレームワーク）

８．UX ハニカム

出典：Researchgate

ピーター・モーヴィル氏の UXハニカム は、７つの原則を列挙した総合的な UXデザインのフレームワークであり、この７原則は、高品質な製品とユーザー体験を提供するために、各デザイン決定の指針となります。

UX ハニカムの７原則は以下の通りです：

1. 有用性： 製品はユーザーの役に立ち、ユーザーの問題を解決するものでないといけない。
2. 使いやすさ： 直感的で使いやすいデザインでないといけない。
3. 好ましさ： UI（ユーザーインターフェース）のデザインは、美的感覚に優れ、好ましいユーザー体験を提供するものでないといけない。
4. 見つけやすさ： 検索やナビゲーションが明確でわかりやすいものでないといけない
5. アクセス性： ハンディキャップのあるユーザーを含め、どんなユーザーでもアクセスできるデザインでないといけない。
6. 信頼性： ユーザーが製品やコンテンツを信頼できないといけない。
7. 価値： 最終製品は、ユーザーとビジネスに価値をもたらすものでないといけない。

９．フォッグ行動モデル

出典：UI Patterns

スタンドフォード大学の B・J・フォッグ氏が開発した「フォッグ行動モデル」は、行動や行為は以下の３要素が収束した結果であると示唆しています：

• モチベーション
• 能力
• トリガー

フックモデル と同様、デザイナーはフォッグ行動モデルで長期的に使用率とエンゲージメントを上げる製品を構築することができるようになります。フォッグは、「些細なステップ」が長期的な行動を発展させる最良の方法であることがよくわかります。

私たちの多くが経験したことのある素晴らしい例として、「デジタルゲーム」があります。最初のレベルは簡単で、プレイヤーに達成感を与えることで、さらなるエンゲージメントを誘発します。そしてプレーヤーが製品に関わる時間が長くなるにつれて、ゲームは徐々に難しくなっていきます。

さらに読む：

• Fogg Behavior Model（フォッグ行動モデル）
• Tiny Habits by B J Fogg（小さな習慣 by B J フォッグ）

UXPin によるエンドツーエンドの製品デザイン

UXPinは、高品質な製品を提供するためのツールと機能を備えたエンドツーエンドのデザインソリューションであり、UX デザイナーは、UXPin のコードベースのデザインツールを活用して、最終製品のような外観と機能を持つ忠実度の高いプロトタイプを作成できます。

また、プロトタイプとテストは、あらゆるデザインフレームワークの重要な要素であり、UXPin のビルトインデザインライブラリにより、デザインチームはデザインプロセス全体を通してアイデアをテストするための忠実度の高いプロトタイプを作成できます。

有意義なテストのフィードバック

コードベースのプロトタイプは、最終製品のように見え、機能し、ユーザビリティテストやステークホルダーから有意義で実用的な結果を生み出します。それで UX デザイナーは、ユーザーのニーズとビジネス目標の両方を満たすソリューションを見つけるために、アイデアを素早く変更し、反復することができます。

効率化されたデザイン・ハンドオフ

より高い忠実度と機能を備えた UXPin のコードベースのプロトタイプは、エンジニアがより正確かつ効率的に最終製品を提供できるよう、デザインのハンドオフプロセスを効率化する上で重要な役割を果たします。

UXPin のコードベースのデザインツールで、エンドツーエンドのデザインプロセスを強化しませんか。無料トライアルにサインアップして、UXPin の高度な機能をすべて体験し、顧客により良い UX を提供しましょう。

The post UX デザインフレームワーク – 一番便利なフレームワークとは？ appeared first on Studio by UXPin.

デザインシステムのガバナンスを「急成長、創造性、柔軟性を阻むもの」だと考える人もいますが、デザインとユーザビリティの一貫性を維持しながら適切に実施することができれば、デザインシステムのガバナンスはスケーラビリティと創造性を促進できるのです。

いいデザインシステムのガバナンスは、成長や利益よりもユーザーを優先させることです。また、企業文化においてもチームメンバーが従い、受け入れるガバナンスのプロセスをどのように導入するかに重要な役割を果たします。

UXチームとエンジニアリングチームのツールは、デザインシステムのガバナンスにも影響を及ぼします。UXチームは、最終製品の変更に合わせてデザインツールの更新が必要にあり、プロセスが人的エラーにさらされることになるのです。

UXPin Merge を使えば、チームは２つの別々のデザインシステムのアップデートを心配する必要がありません。UXPin Mergeは、GitレポジトリやStorybook 統合（React、Revue、Angular、Emberなどとの接続が可能）のコードコンポーネントとエディタツールを同期し、別々のデザインシステムの必要性をなくし、ヒューマンエラーを軽減しますからね。

UXPinがデザインシステムのガバナンスを強化する方法をぜひコチラからご覧ください。

デザインシステムのガバナンスとは

デザインシステムのガバナンスとは、製品のデザインシステムを維持・更新するためのプロセスやプロトコルのことです。

例えば、アプリの終了アイコンを「X」から「ー」に変えるような小さな変更であっても、何段階もの承認と実施プロセスを経ないといけません。

デザインシステムのガバナンスは、以下のような目的を果たします：

• デザインとブランドの一貫性の維持
• ユーザビリティの問題につながる誤ったデザインの決定の防止
• チームメンバーへの、創造的な思考や、変更を試みる前の手持ちのツールでの問題解決の促進
• アクセシビリティを考慮した確実なアップデート
• 組織全体への変更点の周知
• デジタル製品およびデザインドキュメントの更新

効果的なデザインシステムのガバナンスがなければ、新しいコンポーネントの編集やアップデートは、ユーザビリティの問題や矛盾を生み出して製品の評判を落とすような「無法地帯」のようになる可能性があります。

デザインシステムの維持の課題

デザインシステムの維持には多くの課題があり、どの組織でも、デザインシステムの管理者またはチームがないといけません。。

ここでは、デザインシステム維持のための一般的な課題７つと、効果的なガバナンスモデルが不可欠である理由を見ていきます。

１．社内政治

残念ながら、うまくいっているデザインシステムであっても組織内の権力闘争から逃れられるわけではありません。経営者の力を使って、デザインシステムチームの最初の決定を覆してデザインの変更の推進や阻止に働くチームメンバーがいることだってあり得ますし。

その点ガバナンスは、経営陣やその他のステークホルダーにデザインの変更とその理由を十分に伝え、賛同と承認を得やすくしてくれます。

２．複数のチームや部署からのインプットの管理

デザインシステムは、UXやエンジニアリングチームだけのものではなく、企業のデザインシステムは、製品チームやその他のステークホルダーが共有しています。

このようなインプットをすべて管理するのは、適切なガバナンスシステムがなければ大変です。

３．デザインシステムは、よく後付けやサイドプロジェクトになる。

多くの企業、特に設立間もないスタートアップ企業では、製品のデザインシステムは優先事項ではなく、UXデザイナーが暇な時や週末に行うサイドプロジェクトで、成長需要との整合性を保つために細々とやっています。

このような環境では、デザインシステムは乱用されやすく、誤ったデザイン決定が行われがちです。ガバナンスが不十分なため、UX チームがユーザビリティの問題を修正するのに変更を元に戻さなければならないといったこともよくあります。

４．お粗末なコミュニケーション

部署間、チーム間、個人間の適切なコミュニケーションがなければ、例えば２つのチームが同じ作業を別々に行うことになったり、「他の人がやっている」と思い込んで肝心のユーザビリティの変更が忘れられたりなど、デザインシステムはバラバラになってしまいます。

そこでデザインシステムのガバナンスによって、組織全体のコミュニケーションが促され、誰もが最新の情報を得ることができるのです。

５．チームメンバーの消極的な姿勢

製品のデザインシステムに難色を示すチームは、気に入った部分だけ選んで、あとは「より良いデザイン方法」を開発します。新しいメンバーや、デザインシステムの構築に携わっていない人が、「自分の方がうまくやれる」と思い込んでしまい、他の人の努力を台無しにしてしまうのです。

このような消極的な姿勢は、製品の使い勝手や一貫性に影響を与えるだけでなく、要らぬ対立を生むことにもなりかねません。

そこで抑制と均衡が複数備わっているガバナンスモデルによって、デザインシステムがチームメンバーに乗っ取られるのを防ぎます。

６．変化に対する抵抗

時にはその逆もあります。システムは今のままでいいと考え、いかなる変更も跳ね除けてしまうデザインシステムの管理者もいます。デザインシステムは決して完全なものではなく、組織の成長のために進化しなければならない、進行中の作業なんですけどね。

７．「信頼できる唯一の情報源（Single source of truth）」のジレンマ

多くの企業が、UXデザイン、プロダクト、エンジニアリングを中心としたすべての部門間で単一のデータセットを扱うという、『信頼できる唯一の情報源（Single source of truth）』のジレンマに悩まされています。

UXチームはデザインツールを使い、エンジニアはコードを使い、プロダクトチーム（技術的なノウハウが乏しい場合が多い）はパワーポイント、PDF、紙など、あらゆる種類のツールを使って仕事をします。

このようにワークフローが分散しているため、『信頼できる唯一の情報源』の維持は大変であり、全員が最新の情報を得られるようにするために、追加のスタッフやリソースが必要になることも少なくありません。ガバナンスシステムがよくても、「信頼できる唯一の情報源」のジレンマは常に付いて回る課題なのです。

世界的な決済サービスの大手である PayPal は、『信頼できる唯一の情報源』のジレンマをUXPin Mergeで解決しました。同社は、UXPin Mergeを使って、Gitレポジトリからのコードコンポーネントで内部 UI（ユーザーインターフェース）のデザインシステムを構築し、それを維持しています。

デベロッパーが新しい変更を実施すると、UXPin のデザインエディターのコンポーネントが同時に更新されるため、デザイナーとエンジニアは常に同じデザインシステムで作業することができます。

デザインシステムのガバナンス規準の確立

デザインシステムの変更や更新が必要となる主なシナリオは４つあり、そのシナリオでは、プロトタイプの作成や修正を依頼したりする前に、チームが一連の質問やテストを行う提出プロセスが必要です。

• 新要素の導入：新しい要素を追加するためのワークフローを確立することで、デザインシステムの整合性を確保しながら、各チームメンバーには追加する機会が平等に与えられます。
  
  
• パターンの推進：パターンは、「１回限りのもの」と「新しいベストプラクティス」の２種類に分類され、チームは、この新しいパターンを推進する前に、現在利用可能なものと比較してテストしないといけません。
  
  
• パターンのレビューと適応：どのデザインシステムにも、リリース前にパターンをレビューする、少なくとも２名で構成されたチームが必要です。このレビュープロセスにより、新しい要素が現在のデザインシステムの規準と実践に合致していることが保証されます。
  
  
• デザインシステムのアップデートのリリース：チームは新しいアップデートの準備ができたときにリリースするのではなく、アップデートのリリーススケジュールのきちんと作らなければいけません。厳密なリリーススケジュールを設定することで、品質保証と文書化のプロセスを正しく実行できるようになります。

このサブミットプロセスを管理するには、変更が必要なステップを全てマッピングしたシンプルな決定木の使用が効果的です。

このInayaili de León氏による優れた例では、Canonicalチームが、コンセプトからリリースまでのシンプルな決定木に従って、新しいパターンをデザインシステムに追加する方法を示します。

彼女は、デザインシステムと同様、決定木も製品の進化に合わせて更新・改良していく作業であることを認めています。

ステップバイステップのガバナンスモデル例

デザインシステム・ガバナンスのアプローチには様々な方法がありますが、ここではデザインシステムの第一人者であるブラッド・フロスト氏 にヒントを得た１０個のステップからなるプロセスをご紹介します：

１．使えるものを使う

製品チームは、現在のコンポーネント・ライブラリを使ったソリューションを見つけるためにあらゆる努力を払わなければいけません。これは、デザインシステムが十分に文書化され、誰もがアクセスできるものでなければならないということであり、現在のデザインシステムが新しい要件を満たしていない場合、チームはステップ ２に進むことができます。

２．デザインシステム（DS）チームへの連絡

製品チームはDSチームに連絡し、問題と変更案について話し合います。この場合も、DSチームと製品チームは協力して既存のソリューションを探します。デザインシステムを熟知しているDSチームは、製品チームが見落としていたものを発見することもありますが、それでもソリューションが見つからない場合、チームはステップ３に進みます。

３．その変更が単発のものなのか、デザインシステムの一部なのかの判断

製品チームとDSチームは、その修正が一度限りのもの（スノーフレーク）なのか、デザインシステムの一部なのかを判断します。通常、一度限りの変更は製品チームが担当し、デザインシステムの変更はDSチームが担当しますが、いずれにせよ、チームは変更の優先順位を決め、スケジュールを立てる必要があります。

４．初期プロトタイピング

チームが製品の変更をプロトタイプにしてテストを実施します。

５．初回レビュープロセス

DSチームとプロダクトチームは、プロトタイプとテストの結果を確認します。両チームとも異論がない場合は次のステップに進み、変更点が不足していると判断した場合はプロトタイプとテストに戻ります。

６．UX および開発テスト

デザインが最初のレビューに合格すると、UXチームと開発チームに送られ、変更が UX（ユーザーエクスペリエンス）と技術要件を確実に満たしているようにするためにさらなるテストが行われます。

７．最終確認

プロダクトチームとDSチームが再度集まり、UXと開発でのテスト結果を確認します。両チームが満足すれば、次のステップに進みます。そうでない場合は、繰り返しテストを行います。

８．ドキュメント作成とリリーススケジュール

チームは新しい変更のドキュメント化や変更履歴（例：Github）の更新、さらにリリースのスケジュール化を行います。

９．変更点のリリース：変更点のリリース、バージョン管理ガイドラインに従った製品のバージョンアップ、全チームへの通知（Slack、Asana、Trello、Githubなど）を行います。

１０．品質保証

品質保証のため、製品チームが最終的な変更点を確認します。

この１０ステップのプロセスにより、先に説明したデザインシステムに共通する７つの課題をすべて軽減できることがおわかりいただけると思います。複数の抑制と均衡により、デザインシステムはその完全性を維持しながら、変更を組織全体に伝達することができるのです。

このプロセスは、デザインシステムの多くの課題を解決しますが、抑制と均衡は人的エラーを排除するものではありません。なのでチームには、「信頼できる唯一の情報源（Single source of turh）を提供するツールが必要です。

UXPinによるデザインシステムのガバナンスの強化

UXPin Merge が、デザインとコードの間のギャップを埋めて「信頼できる唯一の情報源」を作成することで、デザイナーとエンジニアは常に同じツールで作業できるようになります。

ベクターベースの一般的なデザインツールでは、この問題は解決されず、デザイナーとエンジニアは、同じシステムを別々に更新し、同期させないといけません。

UXPin はコードベースのデザインエディターであり、Git や Storybook を介してコードコンポーネントを同期させ、プロダクトチーム、UXデザイナー、デベロッパーが同じコンポーネントで作業できるようにするものです。

最後に、プロトタイプはコードベースであるため、製品のアップデートやデザインシステムの変更に要する時間が大幅に短縮されます。

優れたデザインシステムのガバナンスを育む唯一のデザインツールをお試しになりませんか？UXPin Merge を使えば、デザインシステムを最大限に活用し、デザインコンポーネントとコードコンポーネントを全て最新の状態に保つことができますよ！

The post デザインシステムの ガバナンス とは？ appeared first on Studio by UXPin.

UX デザインプロセスは、製品のUX（ユーザーエクスペリエンス）をデザインするうえで必要な「体系的、反復的、構造化」された一連のアクションです。 これによって、チームは再現しやすいプロトコルに従って、組織の品質基準を満たしながら製品を提供できるようになります。

デベロッパーがアプリを構築するのと同じUIコンポーネントを使ってプロトタイプを構築することで、デザインプロセスのスピードを上げませんか。 厳しい納期を守り、高品質の製品をリリースしましょう。詳細は UXPin Mergeのページをぜひご覧ください。

UX デザインとは

UX (ユーザー エクスペリエンス ）デザインとは、人間の問題を解決するためのデジタル製品のデザイン方法論であり、 この人間中心のデザインアプローチによって、デザインチームは仮定ではなくユーザーのニーズに基づいた意思決定を行うことができます。

この人間中心のアプローチの中核となるのは「共感」であり、UX デザイナーは「ユーザーがデジタル製品を使って達成したいこと」と、「その過程で遭遇する可能性のあるペインポイント（問題点）」を理解しないといけません。

UX デザインプロセスとは

UX デザインプロセスは、UXデザインチームがプロジェクトを完了するのに使う反復的な段階的な方法論であり、デザイン思考プロセスから派生したものです。 デザイン思考のプロセスと同様に、UX デザイナー時間をかけてユーザーに共感し、ビジネスや背景について学び、問題の範囲を確定します。

UXデザインプロセス と デザイン思考プロセス の違いとは

デザイン思考プロセスは、人間の問題に対するユーザー中心のソリューションを開発するための５段階のプロセスです。対する UXデザインプロセスは、UXプロジェクトを実現するためのデザイン思考を組み込んだ、多段階のエンドツーエンドの方法論です。

企業は UXデザインプロセスはデザイン思考の原則を基にしていますが、手順や方法は若干異なる可能性があります。

UX デザインプロセスが重要な理由

企業が UX デザイン プロセスを標準化するのには、以下のような理由があります：

• プロジェクトが確実に品質と一貫性の基準を満たしているようにする
• デザイナーが偏見や思い込みを持たずにソリューションをデザインできるようにする
• デザイナーが多くのアイデアをテストおよび反復して、最適なソリューションを見つけることができるようになる
• チームや部門間の連携を促す
• 設定されたプロトコルに従うことで手戻りのリスクを軽減する
• ステークホルダーがプロジェクトの進捗状況を追跡できるようにする
• 隠れたリスクと機会を特定する

UX デザインプロセスの７ステップとは

一般的な UXデザインプロセスには、製品の目標の確定からデザインハンドオフ、すべてが想定通りに動作することの確認まで、７つのステップがあります。

ステップ 1: プロジェクトと範囲の確定

UX デザインプロセスの最初のステップでは、複数の部門のチーム メンバーとステークホルダー (通常は以下の部門の代表者で構成) とともにプロジェクトの目標と範囲を確定します：

• ビジネス – プロジェクトのビジネス要件と目標について説明する。
• デザイン – デザインの前に何をする必要があるかを伝え、プロジェクトに期待されることを管理する。
• 製品 – コンテクストを共有し、デザインに必要なタイムラインとリソースの計画を支援する。
• 技術 – UXデザインの実現可能性と技術的制約を確定する。

この初期のデザインフェーズは、新しい製品や機能が解決しなければいけない問題を特定することを目的としています。製品チームは、プロジェクトの範囲、計画、成果物、納期についても概説します。

ステップ 2: UXリサーチの実行

次に、デザイナーは問題を調査して、考えられる解決策を探します。 そしてこのリサーチ段階では、UX デザイナーは次のようなタイプのリサーチを実施します。

• ユーザー調査：潜在的なユーザーを調査して、ユーザーが誰であるか、何を必要としているか、どのようなコンテキストで操作しているかを理解する。 また、ユーザーのニーズを調査したり机上調査を行ったりするために、フォーカス グループを招待する場合があり、 UX リサーチの結果は、ユーザーペルソナやユーザージャーニーマップなどがある。
• 市場調査：市場を分析して、市場の細分化と製品の差別化を決定する
• 競合調査：競合他社が同様の問題をどのように解決し、機会を特定するかを理解するための競合分析。
• 製品調査：既存の製品からのインサイトとアナリティクスを分析して、ユーザーの行動を理解する。

ステップ 3: ソリューションの下書きを作成する

ユーザー、市場、競争環境を明確に理解した上で、デザイナーは、ソリューションがどのようなものになるかについての初期の下書きを作成すべくブレインストーミングのセッションを実行でき、これは、多くの場合「アイデア出しの段階」と呼ばれます。そしてデザイナーは、初期のビジュアル デザイン計画中に紙とペンを使うことも、デジタル UX ツールに直接移行する場合もあります。

低忠実度の手法には、以下のようなものがあります。

• スケッチ：UIの手描きのスケッチ
• ペーパープロトタイプ：プロトタイプの紙バージョン
• ワイヤーフレーム：基本的な線と形状を特徴とする紙のプロトタイプのデジタル バージョン
• 低忠実度のプロトタイプ: ワイヤーフレームを使ってユーザーフローと情報アーキテクチャをテストするデジタル プロトタイプ

また、チームは、デザインスプリントを使って、ステークホルダーや他のチーム メンバーと特定の問題を解決することもあります。

ステップ 4: 高忠実度のモックアップとプロトタイプをデザインする

次に、UIデザイン チームはワイヤーフレームをモックアップに変換し、最終製品と同様の外観と機能を備えた忠実度の高いプロトタイプを構築します。 企業にデザインシステムがある場合、デザイナーは UIコンポーネントライブラリを使ってインタラクティブなプロトタイプを構築します。

ステップ 5: ユーザビリティテストを実施する

高忠実度プロトタイプの主な目的はユーザビリティテストであり、UX デザイナーは、以下の目的でそのプロトタイプを実際のユーザーでテストします：

• アイデアの検証
• ユーザビリティの問題の特定
• アクセシビリティのテスト

ステップ ２〜５は反復可能であり、デザイナーはテスト結果を使って、ステージ ２または３に戻り、有用性、実行可能性、実現可能性の基準を満たすソリューションが見つかるまでアイデアを繰り返します。

ユーザーテストは第５段階ですが、デザインチームはUXデザインプロセス全体を通して複数のテストを実施し、アイデアや仮説を検証することに注意することが重要です。 そしてこのようなテストには、チームメンバーとの内部テスト、またはフィードバックのためにアイデアやプロトタイプをステークホルダーと共有することが含まれます。

ステップ 6: デザインハンドオフを手配する

UXデザインプロセスの最後から ２番目の段階はデザインハンドオフです。ここでは、デザインチームが最終デザインとそのドキュメントを開発チームに引き渡し、エンジニアリング プロセスを開始します。

デザインハンドオフは UXプロセスの終盤に近いですが、デザイナーとエンジニアの連携は、デザインが技術的な制約を満たしていることを確認しながら、デザインから開発への移行を効率化するためのアイデア作成中に始まります。そして彼らの連携は、やり取りがしやすくなる色々なツールを通じて促されます。

関連記事：デザイナーとデベロッパーの連携をダメにする5つの間違い

ステップ 7: 製品を起動する

UXデザインプロセスの最終段階は、新しいリリースの起動と明確な検査です。 新しいリリースがプロジェクトのビジネス目標、UX、アクセシビリティ要件を満たしていることを確認する時期が来ました。

いいUXデザインプロセスのベスト プラクティス

UXデザインプロセスはすべての組織、プロジェクト、チームで同じではありませんが、プロセスを効率化するためにデザイナーが従うことができるベスト プラクティスがいくつかあります。

ユーザー中心の思考を適用する

デザイナーは、デザインが確実にユーザーのニーズを満たすものであるようにするために、デザイン決定の中心にエンドユーザーを置かないといけません。 そしてこの人間中心の考え方により、無関係なコンポーネントや機能のコストを削りながら、ユーザーが望む製品を提供できます。

共感を実践する

ユーザー中心の考え方を維持する方法の 1 つに、ユーザーへの共感があります。しかし、デザイナーがUXデザインプロセスを進めていくと、ユーザーを重視することから、見栄えは良くても特定のユーザーニーズには応えられない機能のデザインに移ってしまうことがあります。

なので、UXデザインプロセス全体を通じて共感を実践することで、デザイナーはユーザーのペインポイントの解決に集中できるようになります。

デザインシステムを構築する

デザインシステムは、組織全体の一貫性と整合性を強化しつつ、市場投入までの時間を大幅に短縮できます。 デザインシステムを最初から構築する余裕がない場合は、MUIや Bootstrapなどのテーマ対応のオープンソース コンポーネントライブラリの使用を検討しましょう。

ちなみに、UXPinには、マテリアルデザインUI、Bootstrap、iOS、Foundationなどのデザイン ライブラリが組み込まれているため、デザイン チームはモックアップやプロトタイプをサッと作成できます。

デザイナーが開発コンポーネントの完全に機能するプロトタイプを構築できるように、UXPinのデザインエディタをコンポーネントライブラリに連携するツールであるUXPin Merge を使ってプロトタイプを次のレベルに引き上げましょう。

デベロッパーとの連絡および連携

UXデザインプロセスを成功させるには、連絡と連携が非常に重要であり、 デザイナーは他のデザイン チームとつながり、エンジニア、ビジネス マネージャー、製品チーム、ステークホルダーとオープンなコミュニケーションをとらないといけません。

DesignOpsで、他の時間のかかる運用タスクや管理タスクを効率化しながら、より良い連携と連絡が促されます。

UXPinによるUXデザインプロセスの強化

UXプロセスを成功させるには、デザインチームが変更の追加や迅速な反復ができるようにするツールが必要であり、 UXPinは、エンドツーエンドのデザインソリューションであり、デザイナーは UX デザインプロセスのあらゆる段階での機能を得られます。

完全にインタラクティブなプロトタイプ

デザイナーは、UXPin のビルトインデザイン ライブラリの 1 つを使うか、デベロッパーのコンポーネントライブラリをインポートして、すぐにプロトタイプを開始できます。 UXPinはコードベースであるため、プロトタイプは画像ベースのデザインツールよりも忠実度が高く、機能が豊富です。

高品質のユーザーテスト

コードベースのプロトタイプで、UXデザイナーは正確でより包括的なテストを実行できます。テストの品質が上がると、最終製品に反映されるエラーやユーザビリティの問題が少なくなります。

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

UXデザインの反復プロセスでは、ステークホルダーのフィードバックが非常に重要です。 プロトタイプが直感的でないと、ステークホルダーは賛同と資金調達に影響を与える可能性のあるデザインコンセプトを理解するのが大変になりますからね。

UXPin を使っているかどうかに関係なく、プロトタイプは他の一般的なデザインツールよりもはるかに高い忠実度と対話性を備えています。 その結果、デザイナーはステークホルダーから有意義で実用的なフィードバックを得ることができるのです。

UXデザインプロセスをレベルアップしよう

UXPin Mergeを使うと、デザイナーはテスト中にデザインハンドオフを効率化しながら、より良い結果を得ることができるため、市場投入までの時間とコストが削減されます。

そしてデザイナーは、ゼロからデザインするのではなく、コンポーネントをドラッグ ＆ドロップして、最終製品のように見えて動作する、完全に機能するコードベースのプロトタイプを構築できます。詳細は UXPin Mergeのページを是非ご覧ください。

The post UX デザインプロセス – 実用的な７ステップ ガイド appeared first on Studio by UXPin.

 デザインハンドオフツール を使用することで、デザインから開発へのスムーズな移行を促進させることができます。

エンジニアには、実用的なドキュメント、忠実度の高いプロトタイプ、効率的なコミュニケーションおよび連携向けの機能を提供します。

効果的なデザインハンドオフのプロセスがなければ、デザインと開発間のギャップを埋めるために多くの時間を費やしてしまいます。

コード化コンポーネントを使ってデザインすることで、ハンドオフのプロセスを効率化してみませんか？

UXPin Mergeでは、npm、Storybook、Gitレポジトリからコンポーネントをインポートして、エディタにドラッグ＆ドロップするだけで高度なプロトタイプを作成できます。

この技術についてさらに詳しく知りたい方は、こちらのページをぜひご覧ください。

１．UXPin Merge

UXPin Mergeは、ReactやStorybookコンポーネントで構築されたコードベースのHi-Fi（高忠実度の）プロトタイプをデザインしてハンドオフをすることができます。

この「信頼できる唯一の情報源（Single source of truth）」によって、デザイナーもエンジニアも同じUI要素で作業できるため、市場投入までの時間が大幅に短縮されます。

プロトタイプが完成すると、次にデザイナーはそれをエンジニアと共有します。

エンジニアはスペックモードを使って、ドキュメント、スタイルガイド、コメントを見ることができるだけでなく、開発段階で使用可能なコンポーネントのJSXコードをコピーして使用することができます。

ちなみに、UXPin Mergeは最初から完全にコード化されたコンポーネントを使ってデザインできるのでエンジニアとデザイナー間で伝達ミスが起きることはありません。

Mergeがデザインプロセスとハンドオフをどのように最適化できるかについての詳細は「デザインハンドオフ ーUXPin Mergeで実現することー」の記事をご覧ください。

２．Zeplin

Zeplinは、デザイナー、エンジニア、その他のチームメンバーが効率的に連絡・連携しやすくなる人気の デザインハンドオフツール です。

Jira、Slack、Trello、Microsoft Teamsなどのコラボレーションツールと統合可能です。

Zeplinを使うと、デザイナーは注釈を含むユーザーフローの作成と、エンジニアにコンテキストの提供が可能です。

スタイルガイドから色、テキストスタイル、スペーシング/レイアウト、デザイントークン、コンポーネントを保存することができます。

また、開発で使えるコードスニペット、その他のスタイリングが含まれているのも魅力ポイントです。

３．Marvel

Marvel は、Zeplinと同じくデザインハンドオフ機能がある人気のデザインツールです。

自動生成されたモックアップを使って、プロトタイプの作成・他のデザインツールからのインポートが可能です。

MarvelはモックアップからスターターコードとCSSを生成して時間を節約でき、デザインと開発のギャップを埋めることができます。

また、エンジニアは各コンポーネントのチェックとアセットのダウンロードができるため、連絡ミスやツール間の切り替えを回避できます。

４．Sympli

Sympli は、バージョン管理とデザインのハンドオフを目的としたツールなので、コンポーネントディレクトリのStorybookに相当する “デザイナーのような” 存在と言えるでしょう。

Sympliをプロトタイピングツールと統合し、UI要素やデザインシステムを同期させることで、要素の説明やコンテクストを加えるためにチーム間のレビューや共同作業が可能です。

また、エンジニアはスタイルガイド、スペックモード、スペックとアセットを参照して開発プロセスを開始できます。

さらに、Sympliにはモバイルアプリ開発用のXcodeとAndroid StudioのプラグインでIDE（統合開発環境）と同期できるのが最大の魅力です。

５．Avocode

Avocode は、開発チームのためのデザイン ハンドオフ ファイルを作成します。

また、Avocode の「ワンクリック」統合が、ダウンロード可能なアセット、スペックモード、１０種類のコード言語用のスニペットを生成することで、デザイナーには時間の節約になります。

そして、Avocode のデザインレビューでは、デザイナーは他のチームやステークホルダーを招待して、デザインの批評やフィードバックを行うことができます。それでデザイナーは、全員が更新を認識できるように、フィードバックを反復し、変更を再同期して新しいバージョンを作成できます。

なのでデザインチームは、Avocodeのレビュー機能を使って、矛盾点や修正点について話し合うことができます。

６．InVision

InVision は UXPin のような機能があるデザインツールであり、InVision Studioのデザインからのプロトタイプの作成や、他の一般的な画像ベースのデザインツールからのファイルのインポートなどができます。

Inspect は、デザインスペックとコードスニペットを自動生成する、InVisionのデザインハンドオフツールであり、デザイナーとエンジニアは、コメント機能で連絡をとって連携とフィードバックを一箇所で維持することもできます。

また、InspectのStorybook統合により、InVision はコードレポジトリにあるコンポーネントをエンジニアに通知し、それがライブラリを検索する時間の節約や、不慮の手戻りの予防になります。

そして、InVisionはコミュニケーションやプロジェクト管理タスクを同期するのに、Jira、Confluence、Trello などのソフトウェアとの統合もします。

７．Framer

Framerは、React コンポーネントを同期して編集するコードエディタを備えたレイアウトデザインツールです。

これはデベロッパーにとっては素晴らしい機能ですが、コードの知識や経験があまりないデザイナーには不向きです。

UXPinのようにプロパティパネルでコンポーネントのプロップを編集することはできないので、代わりにFramerのコードエディタでの変更を加える必要があります。

これもコードに慣れていない人にとっては理想的ではありません。

しかし、デザイナーはReactコンポーネントをプロトタイプやテストに使うことができ、他の一般的な画像ベースのツールよりも優れた忠実度と機能性が得られます。

また、Framerの高い忠実度と機能性によって、デザインのハンドオフがスムーズかつ効率的になり、エンジニアは、React コンポーネントからコードをコピーして、新しい製品やUIを構築することができます。

ただ、Framer のコードベースのデザインテクノロジーは、React製品には優秀ですが、UXPinの Storybook統合が提供する他の一般的なフロントエンドフレームワーク用の機能がありません。

８．Spectrr

Spectrr は、色、フォント、スペーシングなど、エンジニアがコンポーネントやレイアウトを検査するための自動注釈が付いたデザイン仕様ツールです。

デザイナーは、各コンポーネントのメモや、レスポンシブレイアウトの作成指示を含めることができます。そしてエンジニアは、Spectrr がプロジェクト用の完全なCSSファイルの生成もするため、開発を開始するための優れたスターターテンプレートを手に入れることができます。

９．Adobe XD

UXデザインやプロトタイピングツールとして広く使われていましたが、2023年に廃止されました。Adobe XDの共有モードを使って、デザイナーは仕様書やCSS のスターターコードなどをエンジニアに渡すことができます。

コメント機能はAdobe XDとJira、Slack、Microsoft Teamsなどのプロジェクト管理ソフトウェアと統合させて共同作業を行うことができます。

また、Adobe XDの共有モードでは、他のデザインハンドオフツールに比べて限られていましたが、Zeplinにデザインを同期することで、より多くの機能とより良い連携ができました。

１０．Figma

Figmaは世界中で最も人気のあるデザインツールの１つです。初期リリース時点では Sketchに似ていましたが、その後プロトタイプやテスト機能を提供できるように進化しました。

Figmaの共有機能によって、エンジニアは要素を検査し、Web、iOS、Android用のコードスニペットを生成することができます。

また、React、Flutter、Vue、Ember、Angular などのフレームワーク向けのコードを生成するために、サードパーティのプラグインのインストールもできます。

2023年現在、デザインプロジェクトに無料で「開発モード」が追加できるので、エンジニアはプロジェクトにアクセスして、コメント機能でフィードバックができるでしょう。

ちなみにUXPinは、従来の画像ベースのデザインツールのようなベクターファイルではなく、HTML、CSS、Javascript をレンダリングするコードベースのツールです。そのため、デザイナーとデベロッパーにとってドリフトが少なく、実際のデザインがイメージしやすいというメリットがあります。

デザインハンドオフが大変な理由

デザインハンドオフの最大の課題として、プロトタイプの忠実性と機能性があります。

デザイナーは、トランジションやアニメーション（例：GIFやビデオなど）のようなコードベースの機能を再現するために、さまざまなツールや方法を用いる必要があります。

非現実的な期待

技術的制約がないと、デザイナーや製品チームに非現実的な期待を抱かせてしまうかもしれません。

実際のプロトタイプには含まれていないことから、エンジニアはどのように組み合さっているかを確認するためにプロトタイプから外部ファイルにアクセスしたり、アニメーションを見てどのように組み合わされているかを確認する必要があります。

コードレンダリングに不十分な画像ベースツール

もうひとつの問題は、デザインのコードへの変換です。

多くの画像ベースのデザインツールには、CSSを含むHTMLテンプレートが自動生成できるプラグインやアプリケーションがあり、これで十分に思えるかもしれません。

しかし、実際のところ、このコードだけではデザインを完全には再現はできません。共通言語が異なることから、”ズレ” がでてきてしまうのです。

技術的制約 

デザインドリフトのもう一つの原因は、製品を表示するブラウザやデバイスのレンダリングエンジンです。

よく起きがちなケースとしては、モックアップから最終的なコードへの色やグラデーションでのドリフトが挙げられます。

多すぎるデザインハンドオフツール

ハンドオフではデザインファイル、プロトタイプ、ドキュメント、アセット、コラボレーションのためのツールが複数使用されていることがよくあります。

さまざまな場所やプラットフォームに分散していると、ハンドオフではミスやエラーが起こりやすくなってしまいます。

ここで紹介したのは、あくまでデザインと開発間の摩擦が起きやすい場面の一部の例であり、ハンドオフ経験者であればよくご存じかと思います。

しかし、ラッキーなことに、このプロセスを効率化できるデザインハンドオフツールがあります。

UXPin Mergeによるデザインハンドオフの改善

UXPin Mergeは製品開発フローにおけるすべての課題を解決できるオールインワンUXデザインツールです。

ツールの使用を１つにして、デザインワークフローを効率化し、完全に機能するプロトタイプの作成、連携の強化、製品のUXの向上を実現しましょう。

まずは14日間の無料トライアルでUXPinをお試しいただき、すべてがつながることで製品開発がどれくらい簡単になるかを実感ください。

UXPin Mergeのアクセスのリクエストはこちら。

The post ２０２４年に試すべき デザインハンドオフツール １０選 appeared first on Studio by UXPin.

ワイヤーフレームの作成は、UXデザインプロセスにおける重要なステップであり、最終製品の設計図としての役割を果たします。

このガイドでは、コードベースのテクノロジーと内蔵機能で際立つエンドツーエンドのデザインツールであるUXPinを使って効果的なワイヤーフレームを作成する方法を詳しくご紹介します。

本記事では、基本的なUI要素の組み立てからユーザーフィードバックの組み込みまで、アプローチを一つずつ詳細に提供しています。

インタラクティブなフォーム要素や「Code-to-Design（コードからデザイン）」の機能など、UXPinのユニークな機能が、どのようにデザインプロセスの効率化や連携強化、よりユーザーにとって使いやすい製品への貢献をできるかを見ていきましょう。

主なポイント：

• UXPinには、デザイナーが完全にインタラクティブで機能的なワイヤーフレームを作成できるようになるコードベースのワイヤーフレーム作成機能がある。
• UXPinは、デザインライブラリや高度なプロトタイピング機能などが内蔵されていることによって、他のデザインツールとは一線を画している。
• UXPinは、ワイヤーフレームから忠実度の高いプロトタイプへのシームレスな移行をしやすくすることから、複雑なインタラクションや API連携まで実現し、包括的なフルスタックデザインソリューションとなる。

UXPin でデザインプロセスを効率化し、ワイヤーフレームをもっと速く作成しませんか。こちらから無料トライアルにサインアップして、UXPin のフルスタックデザインソリューションをぜひお試しください。

UX のワイヤーフレームとは

UX のワイヤーフレームは、UI（ユーザーインターフェース）の基本的なフレームワークを表現する、低忠実度（Lo-Fi）の視覚的な設計図であり、通常は色やグラフィック、複雑な詳細はなく、主にスペースの割り当て、コンテンツの優先順位、および意図された機能に焦点を当てています。

デザイナーは、Web ページやアプリ、システムの構造を伝えるために、デザインプロセスの初期段階でワイヤーフレームを作成しますが、ワイヤーフレームは、詳細なモックアップや高忠実度（Hi-Fi）プロトタイプに入る前に、基本的なレイアウトとインタラクションのパターンを確立することを主な目的としています。

ワイヤーフレームの利点

ワイヤーフレームには、デザインプロセスの効率化や、チームメンバー間の効果的なコミュニケーションの促進を実現するさまざまなメリットがあります。以下に、その利点を挙げましょう：

• 明瞭性： ワイヤーフレームが、レイアウトを視覚的に表現することで曖昧さを取り除き、関係者は誰でも明確なロードマップを得られる。
• 効率性： ワイヤーフレームが早期に問題を解決することで、開発後期の時間とリソースが節約される。
• 整合性： ワイヤーフレームで、プロジェクトの目標と機能性に関するステークホルダーとチームメンバーの足並みが揃う。
• ユーザビリティ：UX（ユーザーエクスペリエンス）を評価する機会を提供することから、 直感的なナビゲーションとレイアウトが確保される。
• 連携： ワイヤーフレームがディスカッションのツールとして機能することから、デザイナー、デベロッパー、ステークホルダーが初期のデザインのフィードバックを提供できるようになる。
• 優先順位付け： デザインの最も重要な要素を特定し、コンテンツの効果的な階層化が実現する。
• 柔軟性： ワイヤーフレームで、反復と変更がしやすくなることから、実験のための Lo-Fi（低忠実度）モデルとして機能できる。
• アーキテクチャ：ワイヤーフレームは、デジタル製品の情報アーキテクチャのベースとなる。

UXPinはワイヤーフレーム作成に適したツールか

UXPinは、優れたUXを実現できるワイヤーフレームが作成可能なエンドツーエンドのデザインツールです。デザイナーは次のような機能を使用してインタラクティブなワイヤーフレームを簡単に作成できます：

• ボックス（Box）：テキストを追加できる柔軟な UI 要素
• シェイプ（Shape）：長方形、楕円、円、丸、線、矢印、多角形、星形
• テキスト（Text）：基本的なテキストブロック
• フォーム（Form）：ボタン、テキストエリア、セレクト/マルチセレクト、チェックボックス、ラジオボタンなど、基本的なスタイルのないフォーム要素のセット
• ホットスポット（Hotspot）: UIの任意の要素や特定の場所をインタラクティブにする
• アイコン（Icon）：マテリアルデザイン、Fonts Awesome、Retina アイコンなど、複数のアイコンセットから選ぶ

他のデザインツールとは違い、UXPinのUI要素はデフォルトでもインタラクティブなものです。

例えば、UXPinのすべてのフォーム要素は完全に機能し、チェックボックスやラジオをキャンバス上にドラッグ＆ドロップするだけで、クリック可能なオン/オフの状態のインタラクティブ機能がすでに備わっています。

このようなインタラクティブな要素により、デザインチームは、デザインプロセスのよりコストのかかる忠実度の高い（Hi-Fi）段階に移行する前に、ワイヤーフレームのプロセスでより多くのデータとフィードバックを集めることができます。

UXPinと他のワイヤーフレームツールの違い

UXPin の最も大きな違いは、このプラットフォームがコードベースのテクノロジーを採用している点です。UXPin は、SketchやFigmaのようにベクターグラフィックスを生成するのではなく、HTML、CSS、Javascript を裏でレンダリングします。

このコードベースのアプローチにより、デザインチームは完全にインタラクティブなワイヤーフレームやプロトタイプを構築するための機能が強化できます。

たとえば、画像ベースのツールでは、入力フィールドはグラフィカルな表現ですが、UXPinではユーザーデータをキャプチャ、保存、共有できる機能的になります。

内蔵機能とプラグイン

もう一つの違いは、UXPinは他のワイヤーフレームツールよりも多くの機能を標準で提供し、プラグインや拡張機能を必要としない点です。UXPin のプランには、デザインシステム、ビルトインデザインライブラリ、コンテンツとデータ、フォント（Googleとカスタム）、アクセシビリティ機能など、他のデザインツールではプラグインが必要なものが多数含まれています。

Code-to-Design（コードからデザイン）

UXPin Mergeのテクノロジーにより、デザインチームはコードコンポーネントをデザインプロセスにインポートしてプロトタイプを作成を可能にします。デザイナーは、デベロッパーが最終製品に使うのと同じ UI ライブラリを使って、完全に機能するインタラクティブなプロトタイプを作成できます。

エンジニアリングチームで特定のワイヤーフレームのコンポーネントライブラリが使われている場合、Merge を使ってこれを UXPin にインポートできます。

また、Merge にはインタラクティブなプロトタイプの作成に使えるビルトインライブラリ（例：Material UI、MUI、Ant Design、Fluent UI、ボイラープレートなど）があり、ワイヤーフレーム作成から忠実度の高いプロトタイプ作成まで、コンセプトやアイデアをすぐにテストすることができます。

UXPin でワイヤーフレームを構築する方法

ここでは、フィードバックの収集やステークホルダーとの連携など、UXPin でワイヤーフレームを作成するためのステップをご紹介します。

このステップバイステップのチュートリアルに従うには、UXPin のアカウントが必要です。

まだお持ちでない方は、１４日間の無料トライアルにサインアップしてください。

ステップ１: UXPin を開いて新規プロジェクトを作成する。

• UXPin を開き、青い［＋New project］のボタンをクリックする。
• プロジェクト名を入力し、［ Create New Project（新規プロジェクトの作成）］をクリックする。
• 次に、「What do you want to start with today?（今日は何から始めますか？）」画面から［New prototype］を選択する。

ステップ２：ワイヤーフレームのキャンバスサイズを選ぶ

右側のプロパティパネル（Propaties Panel）で、ワイヤーフレームのキャンバス（CANVAS）のサイズを選択します。

UXPin には、デスクトップ、タブレット、モバイル、ウェアラブルなど、幅広い標準ビューポートが用意されています。

グリッドとガイドを使って、水平または垂直方向の一貫性を保ちましょう。

ステップ３：各画面のページを作成する

アートボードやフレームが使われる FigmaやSketchとは異なり、UXPinは画面ごとに独立したページが使われます。

• 左サイドバーの下部にある［Pages & Layers］を選択する
• サイドバー上部の［＋］のアイコンをクリックし、新規ページを作成する（［OPTION + N］のキーボードショートカットでも可能。）
• ページ名をダブルクリックして変更する（今回は「Login（ログイン画面）」と「Welcome（ウェルカムページ）」の２つのページを作成する）

アドバイス：ユーザーフローライブラリを使って、ユーザージャーニーと情報アーキテクチャを設計し、プロジェクトの画面数とナビゲーションレイアウトを決定しましょう。

ステップ４：ワイヤーフレームの UI 要素の作成

UXPinのシェイプ、フォーム、ボックスなどを使ってワイヤーフレームのパターンやレイアウトを組み立てることができます。

また、オートレイアウト（Auto Layout）では、サイズ、ギャップ、配置、分布など、グループ要素を効率的に管理できます。

UXPinのコンポーネントを使って、再利用可能なワイヤーフレーム要素を作成しましょう。これによって、より迅速な反復と最大限の一貫性を実現できます。

ステップ５：インタラクションを定義する

このデモでは、ログイン画面からウェルカムスクリーンに基本的なナビゲーション・インタラクションを追加します。

• 要素をクリックして選択し、Properties Panel（プロパティパネル）の Interactionsをクリックする。
• 以下のようにナビゲーションのインタラクションを作成する：
  • Trigger：Click (Tap)
  • Action： Go to Page
  • Page：ドロップダウンリストから Welcomeを選択
  • ［Add（追加）］をクリックしてインタラクションを完了する

Trigger、Action、Animation、条件などのインタラクションの設定方法をご覧ください。

ステップ６：連携とフィードバックの収集

UXPinのPreview（プレビュー）と Share（共有）機能を使って、ステークホルダーにワイヤーフレームを共有します。

また、Comments（コメント）機能で、ステークホルダーはデザインに注釈を付けてフィードバックしたり、特定のチームメンバーにコメントを割り当てることができます。

UXPin でワイヤーフレームからプロトタイプへ移行する方法

UXPinでは、ワイヤーフレームからプロトタイプまで簡単にできます。

ゼロからコンポーネントをデザインしてモックアップを作成することも、デザインシステムを使って忠実度の高いインタラクティブなプロトタイプをすばやく構築することもできます。

UXPinには、プロトタイピング機能を強化する主要機能が以下のように４つあります：

1. ステート（状態）: UI要素１つに対して複数のステートを作成でき、メニューやドロワーなどの複雑なインタラクティブコンポーネントをデザインできる。
2. Variables（変数）：ユーザーの入力からデータを取得し、登録後に個別に送るウェルカムメッセージのように、個別化された動的なユーザー体験を作成する。
3. Expression： 複雑なコンポーネントや高度な機能を作成するための Javascript のような関数であり、コードは不要。
4. 条件付きインタラクション：ユーザーのインタラクションに基づいて「if-then」や「if-else」の条件を作成し、複数の結果を持つダイナミックなプロトタイプを作成して、最終的な製品エクスペリエンスを正確に再現する。

API連携でより高度なプロトタイプにする

UXPinのIFTTT統合で、例えば、ユーザーのカレンダーへの予定の追加や、ウェルカムメッセージのようなメールの送信など、API連携を通じて外部の製品やサービスと連携することができます。

UXPinのデザインシステム、高度なプロトタイピング機能、および API機能を使うことで技術的な知識やエンジニアからのサポートがなくても、複雑な製品のレプリカを作成できます。

この洗練されたプロトタイプによって、ユーザーやステークホルダーから有意義なフィードバックを得ることができ、製品のUXを向上させることにつながります。

世界最先端の製品デザインツールを使って、ワイヤーフレームとプロトタイプを作成しませんか？

無料トライアルにサインアップして、UXPin でインタラクティブなワイヤーフレームを作成してみましょう！

The post 【プロダクトチーム向け】UXPin ワイヤーフレーム 入門 appeared first on Studio by UXPin.

デザイン会社のIDEOによれば、持続可能な長期的成長や成功する製品の特徴として、有用性（Desirability）、持続可能性（Viability）、実現可能性（Feasibility）が必ずあるといいます。

 デザイン思考 のプロセスでは、最も顧客の役に立つ製品や機能性を決めるために、リサーチ、つまり「デザインレビュー」を行います。このデザインレビューがうまくいけば、競合他社が解決していない問題を特定することができ、エンドユーザーとビジネスの双方に利益をもたらすでしょう。

しかし、デザインレビューは何から始めるべきでしょうか？競合における自社の強みはどうやって見つけるのでしょうか？そして、ユーザーや組織のために実行可能なビジネスモデルかはそのように判断するのでしょう？

本記事では、 デザイン思考 を概念化する段階でのリサーチと、以下３つの重要な基準を満たすアイデアを発掘する方法について見ていきます：

• 有用性（Desirability）
• 持続可能性（Viability）
• 実現可能性（Feasibility）

UXPinは、顧客に最高のユーザー体験を提供するための、高度なエンドツーエンドのデザイン、プロトタイピング、テストツールです。無料トライアルにサインアップして、UXPinでUXワークフローとデジタル製品デザインがどのように強化されるかをぜひお試しください。

デザインにおける有用性、持続可能性、実現可能性とは

有用性、持続可能性、実現可能性とは、アイデア、コンセプト、仮説を検証し、独自の価値提案（UVP （Unique Value Proposition）とも言う）があるかどうか、それを追求する価値があるかどうかを判断する デザイン思考 の方法論です。

この３つをすべてクリアしないと、リスクやコスト、失敗の可能性が高まってしまいます。有用性、持続可能性、実現可能性は、アイデアのリスク分析手法であり、イノベーションの芯の部分を見つけるためのツールキットであるとも言えるでしょう。

この方法論を適用することで、デザインコンセプトの弱点を突き止め、さらなるリサーチを重ねたり、アイデアを破棄して次のステップに進むことができるのです。

この方法論の由来

世界的なデザイン会社である IDEO は、２０００年代前半にアイデアをテストする方法として、『有用性』、『持続可能性』、『実現可能性』という デザイン思考 の手法を概念化しました。

IDEOは、最高のアイデアは、この３つの条件が満たされたときに成功すると考えました。逆を言えば、「素晴らしいアイデア」は、これら３つの基準のうち１つでも欠けているとうまくいかないことが多いのです。

では、この３つのレンズを通して、これらの３要素がどのように組み合わされているのかをみてみましょう。

有用性

デザイナーがまずチェックしないといけないのは、有用性 です。もし製品アイデアに市場価値がなく、誰もそれを欲しがらない、必要としないのであれば、それは売れませんよね。

また、有用性を調査することで、その商品が「欲しいもの」なのか「要るもの」なのかがわかります。

例えば、以下のようになります：

• 徒歩、公共交通機関、車、相乗りなどでの通勤が必要。
• 車通勤は便利で公共交通機関よりも快適かもしれないから、車通勤したい。

要るものとは、顧客にとってなくてはならないものであり、欲しい物とは、そのニーズを満たすための、より望ましい選択肢であることが多いです。どちらも「有用性」を満たすものですが、「欲しい」や「あったらいいな」よりも、「必要」という欲求を満たすものの方が、はるかに価値があります。

有用性のある製品を見つけるには、顧客を調査して、満たすことのできるペインポイント（「欲しいもの」と「必要なもの」）を特定しないといけません。

• 製品で問題が解決される人がいるか
• 競合他社は解決策を提示しているか
• もっといい考えはあるか
• そのアイデアは何がユニークなのか、なぜ競合他社ではなくそのアイデアを選ぶ人がいるのか
• その製品でエンドユーザーはどう思うか
• その製品は、使った人が誰かに話したくなるような有用性があるか
• その製品は、一度使ったら一生手放せないようなものか

有用性を調査する場合、そのアイデアをストレステストして、修正すべきギャップを見つけるという意図があります。ギャップが埋まれば埋まるほど製品は強くなり、ステークホルダーからの厳しい質問や顧客満足度にも耐えられるようになるのです。

持続可能性

持続可能性とは、その製品がビジネスとして成立しているかどうかを示すものです。たとえ世界で最も有用性のある製品があるとしても、それが高すぎたり、利益が出なかったりすれば、それは良いビジネスモデルとは言えませんからね。

本当に持続可能な製品アイデアは、短期的にも将来的にもビジネスとして意味があり、投資に対するプラスのリターンをより早く、より長く提供できるほど、デザインアイデアの持続可能性は高くなります。

持続可能性の素晴らしい例として、いかにしてコカ・コーラが１８８６年に生み出した飲料が、今でも世界で最も消費されている飲料の 1 つであり続けられるのかが挙げられます。その初期投資は、発明者に莫大な富をもたらし、１３５年以上経った今でも株主に信じられないほどの利益をもたらしていますよね。

また、持続可能性は、社会的、環境的なインパクト、つまりデザインの倫理的な側面も重要です。そのデジタル製品は、社会にとってプラスの利益をもたらしますか？例えば２０２１年に、フェイスブックの内部告発者フランシス・ハウゲン氏は、SNS 大手の内部調査で、インスタグラムが１０代の少女たちの不安や鬱、自殺願望を生み出していることを示す文書を公開しました。

Instagramは短期的には高い経済的リターンをもたらすかもしれませんが、このティーンエイジャーへの害は長期的に持続し得るものでしょうか。また、政府はFacebook や Instagram を規制するために何ができるのでしょうか？

Facebookは、社会的な論争、罰金、訴訟を克服するためのリソースを持つ巨大企業ですが、小さな会社やスタートアップ企業は、同じような圧力に直面した場合、ほとんどが折れてしまうでしょう。

そのため、持続可能性を検討する際には、事業、顧客、社会に対する価値の提供が必要であり、以下のようなことを検討してみるといいかもしれません：

• このデザインが成立するには何が必要か
• デザインを機能する製品にするには、どのような費用がかかるか
• 新製品や新機能を構築するための設備投資はあるか
• 価格モデルはどうなっているか、また、そのビジネスは利益を上げられるか
• ROI（投資対効果）が出るまでどのくらい時間がかかるか
• その製品はサステナブルか
• その製品は社会にどのような影響を与えるか

なお、持続可能性は有用性と同様に、その製品が確実に実行可能で持続可能であるようにするために、アイデアの調査、分析、ストレステストが求められます。

実現可能性

実現可能性は、現在のリソースに注目し、予測可能な将来において製品を開発する能力があるかどうかを判断します。そしてデザイナーは、その製品がビジネスにどのような影響を与えるかを考慮しないといけません。

実現可能な要因としては、以下のようなものがあります：

• 技術的な制約
• 財務上の制約
• 製品がブランディング、マーケティング、カスタマーサポートなどに与える影響
• 想定される市場投入までの時間
• 運営能力

理想的には、利用可能なリソースを用いて、会社の現在の能力の範囲内で新製品や機能をデザインしたいものです。新製品をサポートするためにインフラを構築しないといけないとなると、リスクとコストが増加しますからね。

新製品や新機能をデザインする際に考慮したい実現可能性に関する質問として、以下のようなものが挙げられます：

• 現在のデザイン体制で、新製品を開発するための部品が揃っているか
• デザイン・開発にかかる時間はどれくらいか
• 新製品の構築や拡張に十分なプロダクトデザイナー、UX デザイナー、エンジニアがいるか？
• 技術的な制約は新しいデザインに対応できるか
• 組織は新しい人材の採用が必要か
• 組織の能力を拡張する必要がある場合、それが将来の製品にどのような利益をもたらすのか
• その製品はブランドにどのような影響を与えるのか
• 製品のリリースは、マーケティング、セールス、カスタマーサポートなど、組織の他の分野に影響を与えるか？また、そのような部門はより多くの仕事をこなす能力があるか

デザインレビューにおける「有用性、持続可能性および実現可能性」の使用

組織は、「インフラ、マーケティング、販売、カスタマーサポートなどのコストを伴う開発を行う前にデザインやプロトタイプの問題点を特定する」という目的のもと、製品デザインの初期段階でデザインレビューを実施し、特定の基準に照らしてデザインを評価します。

基本的には、組織は製品デザインの有用性、持続可能性、実現可能性を知りたいと考えています。

UXデザインレビューのテンプレートのご紹介

「有用性、持続可能性、実現可能性」の デザイン思考 の方法論を適用することで、ステークホルダーに包括的かつ客観的なデザインレビューを提示するためのインサイトとデータを得ることができます。

以下は、ステークホルダーが読みやすく、理解しやすいように、デザインレビューの説明する際に使用できるストラクチャーまたはテンプレートです。

問題：問題は簡潔に述べましょう。デザインチームとビジネスチームは、この土台から共通の理解を深めていきますからね。

システム（現状）： 問題のコンテクストを理解するために、現在のシステムがどのように機能しているかを示しましょう（既存の製品であれば）。その後、あなたの提案する経験によって、システムがどのように機能するかを示すといいでしょう。

JBTD（ジョブ理論）： デザインレビューでは、何が顧客のモチベーションを高めるのかについて、共通の理解を持つことが重要です。Tony Ulwick氏はJBTDを「市場、顧客、ユーザーニーズ、競合他社、顧客セグメントを異なる角度から観察することでイノベーションをより予測しやすく、収益性の高いものにする。」であると定義しており、これによって、顧客がソリューションをどのように「採用」または「不採用」にするかの決定方法をステークホルダーが理解するために役立ちます。

事業目的： 顧客の問題解決におけるビジネス価値とROI を述べましょう。

把握すべきメトリクス： 測定しないものは改善できません。このメトリクスによって、新製品のデザインによって生み出されるビジネスと顧客の価値を定量化できるはずです。

提案された体験： 提案内容を文章でまとめ、明確で理解しやすいものにしましょう。その場にいる人たちは、その提案があなたが以前に明確にした問題とどのように関連しているのかを理解しないといけませんからね。

提案の意味合い：その提案がビジネスの他の部分にどのような影響を与えるか、もしかしたらわからないかもしれません。製品デザインの初期段階でそれを理解するのは、有用性、持続可能性、実現可能性のバランスを取るのに重要です。

基本的なエクスペリエンスデザイン： ワイヤーフレーム、モックアップ、プロトタイプ、またはMVP（最小実行可能製品）を提示して、顧客が製品をどのように望ましいと感じるかをステークホルダーがイメージできるようにしましょう。

デザインに反映されるインサイト：このデザインを選択した理由は何でしたか？インサイトや仮説などは何でしたか？いくつかの項目を箇条書きにして思考の深さを示しましょう。

新デザインに関する仮説：

• 新しいデザインについての仮説とは
• どのようにしてこの仮説にたどり着いたのか
• この仮説を、重要だと思われるメトリクスとどのように整合させることができるか

このような仮説は、明確でテスト可能なものであるべきです。明確な合格・不合格のメトリクスでテストを行うことで、この仮説は、少しずつ前進していることを測るための強力な基礎となるはずです。

チームの協調性を重視： ステークホルダーからどのような意見が必要か？デザインレビューのテンプレートのこのセクションによって、製品の成功の鍵を握るステークホルダーのために、明確なコンテクストと焦点を設定できます。

UXPinにあるデザインライブラリを使って、忠実度の高いプロトタイプやMVP を手短に構築し、デザインレビューの際にステークホルダーに提示することができます。無料トライアルにサインアップして、早速 UXPinプロトタイプ第１号を作成しましょう！

The post デザイン思考 における「有用性、持続可能性、実現可能性」とは appeared first on Studio by UXPin.

リソースの節約

デザインプロセスを反復すると、ユーザー（少なくともステークホルダー）からのフィードバックも定期的に得ることができるため、多くの時間節約につながります。

受け取ったフィードバックはポジティブなものも、ネガティブなフィードバックも正しい方向性を知ることができるきっかけとなるので、貴重な時間を無駄にすることはありません。

フィードバックが全くない場合、ゴールまで急いでも失敗している危険性があり、時間と帯域の大きな無駄となります。さらに、「時は金なり」ですから、デザインイテレーションは最も費用対効果の高い選択肢となりますね。

連携の促進

デザインプロセスを反復することで、ステークホルダーが意見を述べたり、自分のアイデアを共有したりする機会ができるため、健全な連携が促進されます。その結果、「自分の視点でのみ物事を見る」ということにならないため、自分だけでは発見できないような気づきが得られます。

本当のユーザーニーズへの対応

デザイン イテレーション のプロセス（特に連携を取り入れたプロセス）が確立されていないと、デザイナーは孤立して仕事をするという罠にはまりがちです。サイロ化すると、内省的になりすぎてしまい、それが早合点や、生産性のない完璧主義への暴走につながってしまいます。

しかし、デザインプロセスを反復的に実施することで、ユーザーのニーズに焦点を当て、ユーザーからのフィードバックに従った意思決定を行うことができます。また、漫然とした改善に終始するのではなく、次善の策に優先順位をつけてデザインの改善ができるようになります。

さらに、ユーザーからのフィードバックによって、ステークホルダー間の意見の対立を解消できるようにもなります。

定期的な更新のしやすさ

デザインプロセスの反復によって、ステークホルダーに最終結果を投げかけて「見といてね」と放置するのではなく、定期的に進捗状況の更新を提供することができます。

特にデベロッパーにとっては、これは「デザインの途中でも開発に着手できますよ」ということです（実際、デベロッパーは反復的な開発プロセスを活用することができますから、みんなにとっていい話になります）。

また、顧客と仕事をする場合、頻繁に更新することで、製品にかける努力を示すことができ、それによって顧客との良好な関係を築くことができます。さらに、製品の定期的な更新を顧客に伝えることで、マーケティング上の話題を提供し、世間の声を得ることだってできます。

UXPinのプロトタイプは、顧客やステークホルダーとの共有がすぐにできます。数回クリックするだけで、デザイナーは、顧客やステークホルダーが本物と同じように見えて機能するデザインイテレーションをテストする際に、コンテクストに応じたフィードバックのコメントを得られるようになります。また、アダプティブバージョンを使うと、シミュレーションされたプロトタイプは、デバイスやスクリーンサイズに適応します。ただし、プロトタイプの共有前に、プレビューモードでエラーや見落としがないかをチェックすることを忘れないでください！

 イテレーション が使われる場所

イテレーションはデザイナーだけのものではありません。ソフトウェアデベロッパーも、非同期で、あるいはデザインのイテレーションに連動して、仕事に反復的なアプローチを取ることができます。さらに大規模なものでは、プロジェクト全体をイテレーションで計画的に管理することも可能です。

デザインにおける イテレーション 

デザインにおいては、イテレーションは、以下のような多くのデザイン方法論において重要な役割を担っています：

• デザインスプリントの方法論
• HCD（人間中心のデザイン）
• デザイン思考およびリーンUX 
• ラピッドプロトタイピング （3Dテクノロジーを使って迅速（ラピッド）に製品の試作品（プロトタイプ）を作成する開発技法）のアプローチ

どのような方法論であっても、必要なリソースがあれば、同時進行の反復デザインプロセスを用いて、非同期で複数のユーザーニーズに対応することができます。

ソフトウェア開発におけるイテレーション

ソフトウェア開発では、イテレーションは継続的な改善の促進や、誤差の範囲の提供、そして製品開発プロセスの他の側面が妨げられるのを防ぐのに使われます（直線的で、すべてのプロセスを順次行うことを強制するウォーターフォール方法論とは違いますね）。実際、反復的なアプローチによって、例えば「アジャイルUX」と「アジャイルソフトウェア開発」を組み合わせて機能性を構築したり、デザインと開発のチームメンバーが連携して作業できるようになります。

プロジェクト管理におけるイテレーション

最後に、イテレーションは、より高いレベルでも機能し、それによって製品やプロジェクト管理プロセス全体の包括的なテーマとなることもあります。プロジェクトのステークホルダーに、ライフサイクルを通じて製品の方向性に関する定期的な最新情報や、主要な成功メトリクスを測るのに使えるデータを提供しますからね。

さらに、イテレーションは DesignOps や DevOps などの社内業務の改善にも活用でき、それによってチームの士気と生産性が大幅に上がります。

リサーチにおけるイテレーション

イテレーションは、リサーチによって促進されるべきです。デザインにおけるフォーカスグループであれ、開発におけるブラウザテストであれ、リサーチで学んだことはすべて、次のイテレーションを推進するために使用されるべきです。

場合によっては、リサーチは非同期かつ独立して行うことができ、「デザイン」または「開発」された成果物を得る必要がないこともあります。例えば、ナビゲーションのラベルや構造を考えるとき、デザイナーは様々な形式的・総括的なカード分類を繰り返し、最終的にシンプルな要件にたどり着くことができますよね。

反復的なデザインプロセスとはどんな感じか

反復的なデザインプロセスは、方法論によって異なりますが、一般的には、計画、アイデア出し、プロトタイプ、テスト、レビューという５つのステージにハッキリとと分けてまとめることができます。

ステージ１：計画

イテレーション（反復）は早いだけでなく、効果的に行われないといけないので、特定のユーザーニーズに焦点を当てたイテレーションを続けるには、ある程度の計画が必要です。

計画段階は、イテレーション中にどの問題を解決するかを決めることがほとんどです。時にはステークホルダーの観察に耳を傾けることもありますが、ほとんどの場合、以前のイテレーションやフィードバックフォームなどの別の場所からユーザーのフィードバックを直接集めるということになります。

いずれにせよ、この段階は常に「リサーチ」という燃料を得て、「目的」によって動かされます。多くのデザイン方法論では、問題は「機会」としてとらえ直され、多くの機会が存在する場合には、方法論は「ステークホルダーは製品の改善に一番いい機会であると思われるものに投票すべきである」述べています。例として、デザインスプリントの方法論は、機会を選択するために「How might we（どのようにすれば〜できそうか）」と「ドット投票（多数決のようなもの）」に依存しています。

つまり、計画段階では、 「今回のイテレーションで何を改善すべきか」という問いに答えられるはずです。

ステージ２：アイデア出し

この段階では、アイデアの良し悪しに関係なく、スケッチによってできるだけ多くのアイデアを出すことが目的です。これは通常、最高のアイデアを磨き上げ、最悪のアイデアを脇に置くという、それ自体が反復的なデザインプロセスそのものです。

創造力を維持するために、Crazy 8s（チームメンバーが30~60秒ごとに合計8つの異なるアイデアを考え、それぞれを紙に書き出す手法）、Four-Step Sketch（1）重要な情報を確認、2）紙の上でデザイン、3）複数のバリエーションの検討、4）詳細な解決策の作成を元にコンセプトを作り上げる）などの反復的な方法論があり、プロセスを無駄なく、楽しく、生産的に保つために時間制限を設けています。

最終的に、我々やチームは、少し洗練されたアイデアを１つ選び、前進させることになります。そして選ばれたアイデアは、プロトタイプ担当が問題提起、明確に定められた実行可能なタスク、そして詳細で十分なビジュアルガイドを得ることができるように、よくユーザーストーリーとして表現されます。

ステージ３：プロトタイプ

プロトタイプの段階になると、特定のアイデアに集中するため、反復的なデザインプロセスが少しシンプルに感じられるようになります。

生産性を最大化するために、通常は時間制限が設けられているので、UXPin のようなワークフローをサポートするデザインツールを使うのがベストであり、製品チームが手元にデザインシステムを用意して、UXデザイナーがそれを徹底的に理解すれば、さらなる効果が期待できます。

ステージ４：テスト

テスト段階は、解決しようとしている問題をプロトタイプが解決しているかどうか、また、どの程度解決できているかの確認を目的としています。何かを実装したり、リサーチを統合したりすることはなく、適切なリサーチ方法を用いて、ソリューションについてできるだけ多くのことを学び、フィードバック、発見、インサイトを文書化するだけです。

ステージ５：レビュー

最終段階であるレビューでは、リサーチを総括して、ソリューションの有効性について結論を出します。

結論は通常、以下のカテゴリーのいずれかに分類されます：

• 「すばらすい」：実装の時期
• 「いいですけど、、、」：プロトタイプに戻る
• 「不具合あり」：アイデア出しに戻る

デザインイテレーションプロセスの「やるべきこと」と「やってはいけないこと」

やる：失敗を恐れない

たとえ失敗したとしても、失敗を恐れず、試行錯誤し、「やってはいけないこと」を学びましょう。失敗は避けられないものなので、早めに解決して、そこから学ぶようにするのが一番です。

やる：柔軟に行く

デザインの方法論は、イテレーションに時間をかけすぎず、自由な創造性を発揮できるように厳しいルールを設けていますが、それでもある程度の自由度は認められています。最終的に、どの機会を優先するか、どのタイミングでイテレーションやテストを行うか、また、同時にいくつのデザインイテレーションプロセスを実行するかは、私たち次第なのです。

その判断は、あらゆるデータやリサーチを駆使しながらも、直感と経験によるところが大きいです。

やる：非同期での作業

ツールやチームメイトなど、利用できるすべてのリソースを活用し、他のデザイナーが非同期で製品の他の側面を解決でき、デベロッパーも有効な解決策を実装し始めることができることによって、最短時間で最大の成果を得ることができます。この２つが行われることで、製品のタイムラインが大幅に短縮されるのです。

やる：連携して耳を傾ける

どの問題を解決すべきなのか？どのイテレーションがベストか？プロトタイプをテストする準備はできているか？このフィードバックにはどんな意味があるのだろう？チームメイトから新鮮な視点と独自の専門知識を得ることで、このような疑問に自信をもって答えられるようになります。

やらない：すべてを解決しようとする

デザインイテレーションプロセスで解決する問題が決まったら、それ以外の問題を解決しようとするのは避けましょう。テストや観察の時に改善すべき点が見つかるのは当然ですが、それが後のイテレーションで良い出発点になるかもしれないので、それは書き留めておきましょう。

スコープクリープ（デザインイテレーションプロセスに忍び込む新たな問題）を許すと、気が散ってスピードが落ち、イテレーションが主要なメトリクスに与える影響を測るのが難しくなるだけですからね。

まとめ

デザインイテレーションの基礎は理解できたので、次のステップは、自身やチームに合った反復デザインの方法論を選択し、全員がそれを習得するために十分な時間を確保しましょう。

ただ、完璧なデザイン手法なんてないので、もしうまくいかない場合は、ワークフローを変更するか、別の方法を試すことを検討してください。

UXPinによるイテレーション（反復）デザイン

UXPinは、製品チームの速やかなイテレーションやアイデアのコラボレーション、実用的なフィードバックの獲得、そして最終的にはコードベースの高忠実度プロトタイプをサポートし、デベロッパーがより多くの作業を行えるようにするために作られたエンドツーエンドのデザインツールです。

UXPinでは、デベロッパー が HTML、CSS、JavaScript に変換されたプロトタイプの仕様の実装、デザインシステムのドキュメントの共同作成、さらにUXPin Mergeを使った実際のReactコンポーネントをプロトタイプにインポートできるため、検証済みのイテレーション作業をより速やかにして生産に移ることができます。

気になった方は、まずは14日間の無料トライアルからぜひお試しください。

The post デザイン イテレーション プロセス入門 appeared first on Studio by UXPin.

近頃、リーンスタートアップ、リーン生産方式、リーンソフトウェア開発、リーンUXなど「 リーン （Lean） 」という言葉をよく耳にするようになったのではないでしょうか。これらのリーンプロセスの目的は「余計なものを取り除くこと」であり、生産性を下げたり混乱させたりするシステムやプロセスをなくします。

リーン UX の主なポイント

• 「リーン生産方式」と「アジャイル手法の原則」を取り入れた、UXデザインへの共同アプローチである。
• ２０００年代初頭に出版されたリーンソフトウェア開発に関する本から派生したものである。
• 学習の優先順位付け、成果の重視、継続的な発見など１５の原則がある。

  適切なデザインツールを選択することで、UXのワークフローとプロセスの効率化につながります。UXPinは、スピード、一貫性、効率を向上させるために構築されたコラボレーションデザインツールです。１４日間の無料トライアルでぜひお試しください。

リーン UX とは

  リーンUX は、連携を促し、MVP（最小実行可能プロダクト）で多くのテストや実験行う成果ベースのデザインプロセスです。

リーン UX は、成果物よりも成果を優先し、「デザインするもの」ではなく「デザインする理由」を問います。「何」を「なぜ」に置き換えることで、デザイナーは「いいと思う人がいるから何か作ろう」という曖昧なものではなく、具体的に「デザインする理由や裏付けとなるデータ」を見つけないといけません。

このように、リーンUXでのデザインは「ワークフローの概念」というよりも１つの「思考プロセス」と言えます。デザイナーは構築する前に仮説を立て、それを検証しないといけません。この思考プロセスが、MVPコンセプトのテストと実験がリーンUXでのワークフローにおいて重要な理由です。

リーン UX の歴史

リーンUX は、２００３年に出版された『Lean Software Development（リーンソフトウェア開発）』という本とアジャイル手法から派生したものです。国際的に有名なデザインとビジネスの専門家であるジャニス・フレイザー氏は、２０００年代に「リーン UX」という言葉を世界で広めました。

“Lean UX is UX practice adapted for Lean Startups…”（日本語訳：リーンUX は、リーンスタートアップのために適応された UX手法である）と言います。

そして、彼はイノベーションとシリコンバレーのスタートアップ企業数社のスケールアップに関する知識と経験を活かし、リーンのコンセプトを UXデザインに応用しました。

アジャイル UX と リーン UX

  アジャイルUX と リーンUX は似たようなコンセプトですが、アジャイルUXはアジャイルを使っているチームに効果的であるのに対し、リーンUX のプロセスはどんなスタートアップや組織にも適しています。

リーン UX のプロセス

リーンUX のプロセスには、従来のUXデザイン思考のフェーズがすべて含まれており、プロトコルが違うだけであることに注意するのが重要です。

デザイン思考のプロセスには５つのステージがあります：

1. 共感：ユーザーが何を必要としているかを発見する
2. 確定：解決したい問題を特定する
3. アイデア出し：ユーザーの問題に対する解決策を考える
4. プロトタイプ：プロトタイプを作成する
5. テスト：プロトタイプをユーザーやステークホルダーとテストする

  一方、リーンUX はプロセスを３つのステージに分けます：

• 思案： 結果、仮定、ユーザーリサーチ、アイデア、メンタルモデル、スケッチ、ストーリーボード
• 作成：ワイヤーフレーム、プロトタイプ（MVP）、価値提案、仮説
• 確認：データと分析、ユーザビリティ・テスト、ステークホルダーとユーザーからのフィードバックの分析

  ご覧のように、どちらのプロセスも同じ要素を含んでおり、方法論だけが異なっています。

リーン UX の原則

こちらの記事で、Ben Ralph氏はコアとなる リーンUX の１５原則を概説しています：

1. 部門横断チーム – 同じプロジェクトに取り組む複数の部署のメンバーでチームを作る。
2. 小規模、専任、同拠点 – チームを５〜９人ほどの少人数にし、ひとつの問題に集中し、同じワークスペース（リモートチームの場合は同じタイムゾーン）に置く。
3. 進歩＝成果であり、アウトプットではない – ビジネス目標の達成は成果であり、機能やサービスはアウトプットである。
4. 問題集中型チーム – チームは新機能のデザインではなく、問題の解決に集中しないといけない。
5. 無駄を省く – ビジネス目標につながらない作業やプロセスを省く。（チームは明確な理由もなく会議に出席したり、報告書を作成したりしていないか？）
6. 少人数制 – チームは一度につき１つのタスクや目的を完了することに集中しないといけない。
7. 継続的な発見 – 顧客、エンドユーザー、ステークホルダーと定期的に関わる。
8. GOOB（Get Out Of the Building）- 社内で仮定をごちゃごちゃ話し合うのであれば実際のユーザーとアイデアをテストする。
9. 理解の共有 – チーム全体が共に学び、成長できるよう、協力し、アイデアを共有する。
10. アンチパターンのロックスター、達人、忍者 – どのチームメンバーも同じように評価する。
11. オープンな職場 – 自由にアイデアを共有できる環境を作る。アイデアに正誤はない！
12. 分析より創造 – うまくいくかどうか議論して時間を無駄にせず、まずはやってみて、その経験から学ぶ。
13. 成長よりも学習 – 最初に正しいものを作り、それから規模を拡大する。
14. 失敗の許可 – 実験とリスクを取ること。マーク・ザッカーバーグ氏の“move fast and break things.” （素早く行動し、破壊せよ）という有名な言葉にあるように、完璧さよりも市場投入スピードを優先する。
15. 成果物ビジネスからの脱却 – UXドキュメントは最小限に。結果に優先順位をつける。

  また、このリーンUXの １５原則には、以下の２つの共通テーマがあります：

• 行動を起こす – アイデアを MVP とプロトタイプに変える。テストを繰り返す。
• チームワーク – 共有、連携、連携

リーンUX のメリット

  従来のUXデザインプロセスには、監督会議、不要な文書や成果物、部署やチームのサイロ化、コミュニケーション不足など、時間をムダにしてしまう障害がありました。

リーンUX で、部門間で連携を促進させ、付加価値をもたらさないプロトコルを避けることでUXワークフローが最適化されます。

また、リーンUX の成果主義とは、UXデザイナーが、CTA（Call to Action） ボタンの色を議論するためにミーティングするのではなく、ユーザーの問題を解決し、アイデアのテストに集中するということです。

複数の部門から代表者を集めた部門横断チームを構築することで、デザイナーは多様なアイデア、経験、視点を活用することができます。この豊富な知識により、チームはより良いMVPを作り、より多くのアイデアをより早くテストすることができるのです。

リーンUX の利点は以下の５つにまとめられます：

1. 無駄を省く
2. 連携を促進
3. 速い
4. 効率的
5. ユーザー中心

 リーンUX の手法

リーンUX 手法の中心となる主な原則は以下の３つです：  

1. 仮定
2. 仮説
3. MVP（最小実行可能製品）

仮定

仮定は単なるアイデアですが、メリットとしては、間違っていても許されることです。これは「実験とリスクを取る」という リーンUX の哲学を補完するものですね。

仮説を立てるには、 思考 の段階で得た研究知識と問題提起が必要です。これらの知識があれば、次のような仮説を立てることができます：

• ビジネスの成果 – うまくいく成果とは？
• ユーザー – サポートしようとしている人（ユーザー・ペルソナ）について具体的にする
• ユーザーの成果 – ユーザーのペインポイントは何であり、製品がそれをどのように解決できるか？
• 製品の特徴 – 問題の解決に必要な製品の改善点

  一連の仮定を強みに、問題解決のための仮説を立て始めることができます。

仮説

UXの仮説とは、以下の３つの変数を持つ検証可能な仮定です：

1. しようとしていること
2. （ユーザーのための）問題解決
3. 望む結果の達成

  仮説は次のように書くことができます： ［このユーザー］のために［これをする］ことで［この結果］が達成されると思われる。

理論は検証されるべきものであって、議論されるべきものではありません。なのでチームメンバーは、仮説がどうなるかについての意見をめぐって議論になることは避けないといけません。次に何をすべきかは、テスト結果に任せましょう！

MVP（最小利用可能製品）

製品全体をデザインする代わりに、チームは仮説を検証するための MVP（最小利用可能製品）を作ります。  

仮説がうまくいけば、それを発展させるための小さな機能的製品を手に入れることができ、仮説が正しくない場合は、そのアイデアを捨てて、無駄な時間を最小限に抑えて次に進むことができます。

デザイナーは、ワイヤーフレーム、モックアップ、プロトタイプを使ってMVPを作り、あらゆるものをテストすることができます。チームは、より時間のかかるデジタルのデザインプロセスに取り組む前に、多くのアイデアをサッと洗い出すために、初期のテスト中に紙のMVPを作成することもあります。

MVP は仮説を検証できるものでないといけません。例えば、ボタンのインタラクションをテストしたい場合、紙のプロトタイプでは有意義な結果は得られませんよね。なので、デジタル製品のコンテクストの中でインタラクションをテストするには、色とコンテンツを備えた忠実度の高いプロトタイプを使用する方がいいでしょう。

それに対し、登録フォームをテストするために、何時間も何日もかけて完全に機能する忠実度の高い製品プロトタイプを作る必要はなく、シンプルなワイヤーフレームがあれば、より早く仕事を終わらせることができます。

UXPin における MVP

UXPin にあるデザインライブラリを使えば、デザイナーはコンポーネントをドラッグ＆ドロップして、MVP をサッと構築できます。高度なインタラクションを追加することもできるので、プロトタイプは最終製品のように見え、感じられるのです。

テストの精度を上げるために、より忠実なテストが必要ですか？  

デザインと開発のギャップを埋めるテクノロジーである UXPin Merge を使って、MVP を次のレベルに引き上げましょう。UXPinのデザインエディタをリポジトリ（GitおよびStorybookとの統合が可能）を介して社内のデザインシステムに同期することで、デザイナーは完全に機能するコードコンポーネントを使用してプロトタイプを構築できます。

UXPin Mergeを活用してリーンUX のプロセスを最適化した使用事例として、PayPalが行った検証があります。あるデザイナーが１ページのプロトタイプ（またはMVP）を2つ作成しました。１つ目はイメージベースのツールで、２つ目はUXPin Mergeを使用しました。イメージベースのデザインツールを使用した場合では、デザイナーは MVP の作成に１時間強かかり、UXPin Mergeを使用した場合だと８分で作成できることがわかりました。その上、Mergeで作成したプロトタイプの方がより忠実で機能的でした。

UXPin Mergeについての詳細や、洗練されたコードベースのデザイン技術で DesignOpsの課題を解決する方法については、ぜひこちらをお読みください。

デザイナーが MVPを作り終えたら、次はテストです！

テスト

最後に、チームは仮説と MVP をテストします。プロトタイプのテストでアイデアの検証をできるだけでなく、リサーチャーがユーザーの行動やプロトタイプとのインタラクションを観察することで、貴重なインサイトを集めることができます。

また、ユーザビリティテストによってユーザビリティの問題やビジネスチャンスも明らかになり、デザイナーはそれを次の反復に追加することができます。

テスト結果を元に、リーンデザインチームは新たなインサイトを得ることができ、思考 の段階に戻ってプロセスを再開することができます。

まとめ

リーンUX のプロセスは、ワークフローを最適化し、連携を強化するために、従来のデザインプロセスを再構成します。チームは新しいスキルを学ぶ必要はありませんが、製品をデザインする新しい方法論へのマインドセットシフトが必要なのです。

この記事で説明してきたように、UXPinを使うことで リーンUX の考え方とワークフローが実現できます。また、コメント機能を使うことで、チームはコミュニケーションをとったり、タスクの割り当て、完了後は［解決済み］にしてタスク管理を円滑で明確に行うことができます。

さらに、デザインライブラリがあれば、デザイナーは低忠実度のプロトタイプを省略でき、ユーザビリティテスト参加者やステークホルダーから実用的なフィードバックを得られる、高忠実度の MVPにすぐに移ることができます。

そして何よりも、UXPinのドキュメンテーション機能によって作業を最小限に抑えることができます。デザイナーはデザインのハンドオフ時に、デベロッパーのために UIに注釈を付けたり、指示などの説明を作成したりすることができます。 世界最先端のコードベースデザインツールの使いやすさをぜひご体験ください。１４日間の無料トライアルはこちら。

The post リーン UX ：UXで効率性を最大化するためのヒント appeared first on Studio by UXPin.

組織と製品の成功に導くためにも、「ユーザー」と「ビジネス」２つの目標において、適切な目標内容とそのバランスを取ることは極めて重要です。双方にメリットのあるソリューションを提供するために、製品チームは企業の戦略目標を達成し、ユーザーの目的や欲求、課題について考慮しなければいけません。

そこで本記事では、「ユーザーゴール」と「ビジネスゴール」２つの違いについて解説し、それぞれの目標内容を見ていきます。また、AirbnbとSpotifyの成功例も合わせてご紹介します。

エンドユーザーやステークホルダーとのテストを強化するために、完全にインタラクティブなプロトタイプを構築しませんか？適切なテストの実施とユーザビリティテスト参加者からの適切なフィードバックを得ることで、ユーザーとビジネスでのニーズを満たすデジタル製品体験を提供しましょう。無料トライアルはこちらから。

ユーザーゴール と ビジネスゴールのちがい

ユーザーゴール

ユーザーゴールとは、ユーザーが製品を使用する際に達成したい、満足させたい、解決したい目的、願望、問題のことです。ユーザーゴールを理解して優先順位をつけることで、デザイン思考の核となる原理である「使いやすく」「機能的」で「楽しい」製品となります。

ビジネスゴール

ビジネスゴールとは、企業が製品やサービスを通じて達成しようとする目標のことであり、収益の増加、市場シェアの拡大、ブランドの評判の向上などが挙げられます。

ユーザーゴールとKPIの把握

ユーザーゴールは、製品の種類やターゲット層によって異なりますが、ここでは一般的なユーザーゴールと、組織がその追跡に使うKPIをいくつかご紹介します。

効率性

ユーザーは、最小限の労力で効率的にタスクを完了させたいと思うものです。なので製品は、ユーザーがタスクを完了して目標を達成するまでの時間を短縮するのにプロセスが効率化されないといけません。

「効率化」のKPI：

• タスク完了時間
• タスクに完了に必要なクリック数/ステップ数/インタラクション数

使いやすさ

ユーザーは、わかりやすく、習得しやすく、操作しやすい製品を求めていることから、シンプルなナビゲーションと親切なガイダンスを備えた直感的な製品だと、UX（ユーザーエクスペリエンス）が向上します。

「使いやすさ」のKPI：

• エラー率
• CES（カスタマーエフォートスコア）
• SUS（システムユーザビリティスケール）

アクセシビリティ

デザイナーは、多様なユーザーや能力に対応した製品体験の提供が必要であり、調整可能なフォントサイズ、代替入力方法、スクリーンリーダーとの互換性などの機能は、インクルーシブなUX（ユーザーエクスペリエンス） の提供には不可欠です。

「アクセシビリティ」のKPI：

• アクセシビリティのチェックリストによる適合度

パーソナライゼーション（個別化）

パーソナライゼーションは、個人のニーズや好みに合わせてコンテンツや機能をカスタマイズして製品体験を上げるものであり、そのニーズを満たすことで、楽しささ、継続性、そしてその “いい体験” が提供される可能性が上がります。

「パーソナライゼーション」のKPI：

• 設定をカスタマイズしているユーザーの割合
• カスタマイズ可能な数
• 活用されたカスタマイズの数

信頼性

ユーザーは、製品に対してエラーのない安定性のある動作を好みます。特に、無料ではない場合はなおさらです。なのでユーザーの信頼と満足感の維持には、製品はエラーや不具合、性能上の問題がなく、正しく機能するものでないといけません。

「信頼性」のKPI：

• クラッシュ、ダウンタイムなどの、技術的な不具合の発生率
• MTBF（Mean Time Between Failure：平均故障間隔）
• MTTR（Mean Time To Repair：平均回復時間）

セキュリティとプライバシー

ユーザーは、組織に対して個人情報やデータの保護を期待しており、強固なセキュリティ対策と透明性の高いプライバシーポリシーを導入することで、ユーザーは自分のデータが保護されていることを確信できます。

「セキュリティとプライバシー」のKPI：

• セキュリティインシデントの発生件数
• データ侵害の件数
• 個人情報保護に関する苦情件数
• 管轄ごとの個人情報保護苦情件数

美観

魅力的で視覚に訴える製品は、CX（顧客体験）を上げ、製品の好感度アップに貢献します。また、優れた美観はブランドのアイデンティティを強化し、製品を競合他社から際立たせてくれます。

「美観」のKPI：

• インタビュー、レビュー、アンケートなどの、デザイン要素に関するユーザーからのフィードバック

楽しさ

ワクワク感、楽しさ、エンターテイメントなどの要素を取り入れることで、商品をより魅力的で楽しいものにすることができます。

「楽しさ」のKPI（エンゲージメントのメトリクス）：

• 平均セッション時間
• 継続率（リテンションレート）
• 使用頻度
• NPS（ネットプロモータースコア）

ソーシャルインタラクション

ユーザーは、社会的な交流や、自分の経験を他の人と共有することを求めることが多いことから、ソーシャルな機能を取り入れたり、ユーザーとのコミュニケーションを促したりすることで、製品の魅力が高まります。

「ソーシャルインタラクション」のKPI：

• コメント、いいね！、シェアなどの数
• １アカウントあたりの平均フォロー数
• 友人への招待状送付数

支援・サポート

アクセスしやすく、迅速なカスタマーサポート、包括的なドキュメントやチュートリアルを提供することで、ユーザーの満足度が上がり、ロイヤリティが構築されます。

「支援・サポート」のKPI：

• カスタマーサポートのチケット数
• カスタマーサポートの対応時間
• チケットの解決率
• サポート交流による満足度スコア

ビジネスゴールと KPI の把握

ビジネスゴールは、事業や業界、組織の戦略的優先順位によって異なりますが、ここでは、プロダクトデザインにおける複数のセクターで見られる、一般的な会社のゴールをご紹介します。

収益成長

多くの企業にとって、売上と収益の向上は主要な目標です。プロダクトデザインチームは、魅力的で機能的、かつ価格の高い製品を作ることで収益の増加に貢献することができ、収益を生み出すインターフェースやユーザーフローを効率化することで、収益の向上を図ることができます。

「収益成長」のKPI：

• 日次/週次/月次/四半期/年次の総売上高
• 収益成長率
• ARPU（１ユーザーあたりの平均収益）

マーケットシェア拡大

マーケットシェアは、業界全体の売上高に占める企業の割合を示すため、製品のメトリクスとして極めて重要です。マーケットシェアを高めるには、組織が多くの要素で競争力を持つことが必要です。例えば、イノベーション、機能、性能、良いUXの提供は製品チームに最も関係の深い要素です。

また、革新的なデザインで製品が差別化され、潜在的な顧客にとってより魅力的なものになり、マーケットシェアの拡大につながります。

「マーケットシェア拡大」のKPI：

• マーケットシェア率
• 市場浸透率
• 顧客獲得数 と 業界/競合他社のベンチマーク の比較

顧客獲得

新規顧客の獲得は、ビジネスの成長にとって極めて重要であり、他の多くのビジネスの目的に影響を与えますが、ターゲットとするユーザーのニーズや好みに合わせた製品をデザインすることで、新規ユーザーを獲得し、有料会員にすることができます。

「顧客獲得」のKPI：

• 日次・月次・年次の新規顧客数
• CAC（顧客獲得コスト）
• コンバージョン率（トライアルから有料プランへ、購読者/ユーザーから顧客へ、など。）

顧客維持

長期的な成功には、既存顧客のエンゲージメントと満足度の維持（顧客ライフサイクル）が不可欠です。プロダクトデザインは、ユーザーからのフィードバックの対応、機能に関する要望の実装、UXの継続的な改善によって、顧客維持の向上を実現できます。

「顧客維持」のKPI：

• 顧客維持率
• チャーン率
• CLV（顧客生涯価値）

ブランドの評価と認知度

強力で一貫性のあるブランドアイデンティティで、企業は際立ち、消費者の信頼が築かれます。プロダクトデザインは、製品が企業の価値観や美意識、ブランド戦略全般と確実に合致しているようにすることで、ブランドの評価を上げることができます。

「ブランドの評価と認知度」のKPI：

• ブランド認知度の測定
• NPS（ネットプロモータースコア）
• 定期的なセンチメント分析
• SNS のセンチメント分析

コスト削減

コストは利益に影響します。つまり、給与やボーナス、株主利益が下がるということです。なので企業は、製品開発、製造、またはサポート関連のコストを削減しようとすることがよくあります。

そのようなコストは、効率的なプロダクトデザインであれば以下のような方法で最小化することができます：

• 製品性能の最適化（サーバーコストの削減）
• インプットコストの削減
• ワークフローとプロセスのシンプル化
• 製品の品質向上
• 新作の市場投入までの時間の短縮
• サポートチケットの削減

「コスト削減」のKPI：

• デザイン、プロトタイプ、テストなどのプロダクトデザインのコスト
• プログラミング、サーバー、APIリクエストなどの製品開発コスト
• 運用コスト
• 労働時間・コスト
• 従業員のオンボーディングコスト

スケーラビリティ

特に、成長意欲の高いスタートアップ企業では、需要の増加や新しい市場への進出のために、ビジネスの規模を拡大しなければならないことがよくあります。なのでプロダクトデザインチームは、製品やサポートするリソースが将来のニーズに対応できるよう、スケーラビリティを考慮する必要があります。

「スケーラビリティ」コストにおいてのKPI：

• 新製品リリースの市場投入までの時間
• 負荷や需要が増加した場合のシステム性能
• 新しい市場や顧客セグメントへの製品適応性

イノベーションと差別化

関連性と競争力の維持には、継続的なイノベーションが必要です。製品チームは、新しい技術、製品、アプローチを探求し、イノベーションを推進する上で極めて重要です。

「イノベーションと差別化」においてのKPI：

• リリースされた新機能や製品改良の数
• 研究開発予算のうち、イノベーションに配分される割合
• 特許出願数または業界賞受賞数

法規制の遵守

企業は、製品が関連する法律、規制、および業界標準に確実に準拠しているようにしないといけません。そのため製品チームは、製品、UI、およびプロセスが確実に規制要件を満たしているようにし、例えばカリフォルニア州やヨーロッパのユーザーなど、特定の管轄区域に合わせて必要な調整を行う必要があります。

「規制遵守」のKPI：

• コンプライアンス監査の合格数
• コンプライアンス違反の発生件数
• コンプライアンス違反により発生した罰金または違約金。

環境および社会的責任

多くの企業は、持続可能性や社会的責任への取り組んでいます。特に法律で特定の目標や要件を満たすことが義務付けられている国や州で、このような取り組みを行っています。そのため、製品チームは、e-waste（デジタル廃棄物）の削減、パフォーマンスの最適化（サーバーリクエストの削減）、製品ファイルサイズの縮小によるストレージの最小化などの目標に貢献するといいでしょう。

「環境および社会的責任」のKPI：

• 製品に関連する温室効果ガス排出量の測定と削減
• デザインおよび開発プロセスにおけるエネルギー消費量の測定と削減
• E-wasteの測定と削減
• 製品の社会的インパクトの測定

ビジネスゴール と ユーザーゴール のバランスのとり方

「ビジネスゴール 」と「 ユーザーゴール 」のバランスをとるのは難しく、ユーザーのニーズとビジネスゴールに対応した機能や改善の開発には、継続的な反復が必要です。

そこで、製品チームが適度なバランスを取ることに成功した２社の実例を以下でご紹介します。

例１：Spotify

•  ユーザーゴール ： ユーザーは、お気に入りの曲やアーティスト、プレイリストに簡単にアクセスでき、パーソナライズされた楽しいリスニング体験を望んでおり、自分の好みに合わせて新しい音楽を発見することも大切にしている」。
  
•  ビジネスゴール ：ユーザーベースを拡大し、プレミアム購読と広告による収益を増やすことを目標としており、製品チームは、ストリーミング業界における競争力を維持するために、UI（ユーザーインターフェース）、機能、パフォーマンスを常にアップデートしている。
  
• 両者のバランスを取るためのアプローチ：『Discover Weekly』 や 『Release Radar』 など、パーソナライズされたプレイリストを生成するアルゴリズムに投資することで、ユーザーとビジネスのゴールに取り組んでいる。このような機能は、ユーザーに合わせた音楽のオススメを提供し、ユーザーがプラットフォームでより多くの時間を過ごすことの促進、広告露出の増大、購読のアップグレード促進をすることで、ユーザーの満足度を高める。また、UXを向上させる機能に焦点を当てながら、収益モデルに対応することで、ユーザーとビジネスのゴールをうまく両立させている。

例２：Airbnb

•  ユーザーゴール ：ゲストは、シームレスな予約体験、宿泊施設の多様性、ホストとの信頼できるコミュニケーションを望んでいる。
  
•  ビジネスゴール ：ホストのネットワーク拡大、予約数の増大、サービス料による収益の獲得を目的としており、信頼できる宿泊施設マーケットプレイスとしての評判を維持したいとも考えている。
  
• 両者のバランスを取るためのアプローチ：Airbnbは、直感的な UI、強固な検索とフィルタリング機能、ゲストとホスト間の信頼できるメッセージシステムに投資することで、 ユーザーゴール に取り組んでおり、ビジネスゴール達成のために、「Airbnbのホスト向けリソースセンター」など、ホストがリスティングやカスタマーサービスを改善するためのサポートやリソースを提供している。

また、Airbnbはレビューと評価システムを導入することで、ゲストとホストの透明性と信頼性を確保しており、企業の成長と成功には、このような「ユーザーゴール」と「ビジネスゴール」 のバランスが欠かせません。

インタラクティブなプロトタイプを使って、ステークホルダーに好印象を与える・顧客に愛されるユーザー中心の製品をデザインしてみましょう。無料トライアルにサインアップして、UXPinの多機能で高度な機能をぜひお試しください。

The post UXのティッピングポイント – ユーザーゴール と ビジネスゴール appeared first on Studio by UXPin.

コンポーネント駆動型のプロトタイプは、UXデザインの次なるイテレーションです。デザイナーはもはやゼロからデザインすることはなく、エンジニアが書くコードはより少なくなっています。  

これによってもたらされることは、機能横断的な連携の強化、市場投入までの時間短縮、一貫性、エラーの減少、より良いテスト、ステークホルダーからの有意義なフィードバック、そしてスムーズなデザインのハンドオフが実現します。  

UXPin Mergeを使うことで、これらのメリットがすべて実現可能です。詳しくはこちらのページをご覧ください。  

 コンポーネント駆動型 プロトタイプとは

  コンポーネント駆動型のプロトタイプは、デザイナーが既製のUI（ユーザーインターフェース）要素を使ってUIを構築する製品デザイン手法の１つです。ゼロからデザインするのではなく、インタラクティブなコンポーネントをドラッグ＆ドロップしてプロトタイプを作成します。  

このデザイン手法は、フロントエンドエンジニアがゼロからコーディングするのではなく、既存のコンポーネントライブラリを使ってUIを構築するコンポーネント駆動開発に由来するものです。  

Storybookはこの開発方法でよく使用されるツールであり、エンジニアはコンポーネントを分離して構築・管理することができます。

コンポーネント駆動型プロトタイプも同様に、ゼロからデザインするのではなく、オープンソースのUIライブラリや製品のデザインシステムを使って、既製のコンポーネントでUI構築に集中することができます。  

コンポーネントは通常、色、タイポグラフィー、サイズ、スタイルなどの定められたプロパティで完全にインタラクティブであり、それによってデザイナーはプロトタイプ作成、テスト、イテレーション、デザインプロジェクトの提供をより速く、より正確に行えるようになります。  

 コンポーネント駆動型プロトタイプ の手法

  コンポーネント駆動型のプロトタイプはコンポーネント駆動開発からヒントを得たものですが、ブラッド・フロント氏のアトミックデザイン原則がデザイン手法の基礎となります。  

アトミックデザインにおいては、UI構築の際に最小のUI要素から始めて徐々に規模を拡大していく段階的な取り組み方法を採用しています。ゼロからデザインするのではなく、要素を組み合わせ、より大きなコンポーネントやテンプレート、UI（ページ）を作成します。

アトミックデザインの5つの要素には、以下のようなものがあります：  

1. 原子（Atoms）：HTMLタグ、フォント、アニメーション、カラーパレットなど、UIの基礎となる要素。デザイナーはこれらの要素を分解することはできない。
2. 分子（Molecules）：原子が組み合わさって、フォームのラベルや入力フィールドのような小さなインタラクティブなコンポーネントを作る。
3. 生体（Organisms）：ユーザビリティやアクセシビリティの問題を解決するために、デザイナーが使うインタラクティブ性の高い複雑なUIコンポーネントであり、ロゴ、検索フィールド、プライマリーナビゲーションなどが例として挙げられる。
4. テンプレート：ブログのフィード、カルーセル、導入事例、フッターなど、さまざまなウェブサイトやアプリケーションの部門の構造を定めるものであり、テンプレートには、このような大きな構造を作成するための原子、分子、生体のグループ化が含まれている。
5. ページ：ユーザーのニーズとビジネスゴールを一致させ、まとまりのあるUIを作成するためのテンプレート集を使った完全な画面。

コンポーネント駆動型プロトタイプにおける8つのメリット

1. 信頼できる唯一の情報源（Single source of truth）

  コンポーネント駆動型のプロトタイプの最も大きなメリットは、デザインと開発の連携の強化であり、デザイナーとエンジニアは、レポジトリやnpmパッケージ、Storybookでホストされている同じコンポーネントライブラリを使って作業します。  

UXPin Mergeのようなツールは、デザインと開発の間の繋がりを促し、各部門が単一のコンポーネントライブラリにアクセスできるようにします。デザインチームが視覚的なUIコンポーネントを使う一方で、エンジニアはその背後にあるコードを見るというように、同じ要素を異なる視点から見ることができます。   

2. デザインの一貫性

  この信頼できる唯一の情報源（Single source of truth）は、デザインと開発全体の一貫性の維持に優れており、インタラクティブ機能とスタイリングが組み込まれているため、デザイナーはUIコンポーネントを組み合わせてUIを作成することだけを考えればよく、色、タイポグラフィー、サイズ、境界線の半径、正しいアイコンの使い方などのバリエーションといったよくある問題を排除することができます。  

また、デザインの一貫性は、複数のチームが同じ製品に取り組む際に重要な、承認され統一されたコンポーネントやUIを受け取るエンジニアにも利点があります。

3. 共有可能

  デザインチーム間でコンポーネントを共有することで、デザインの一貫性を維持しながら、UXワークフローとデザイナーの連携を効率化することができます。  

静的なUIキットで、デザイナーはUI要素の共有ができますが、そのようなキットは忠実性と機能性に欠けています。そうなると、デザイナーが自らセットアップしなければならず、それがインタラクションデザインの矛盾やドリフトにつながります。  

そこでコンポーネントライブラリを共有すれば、デザイナーはビジュアル要素、インタラクション、スタイリング、その他デザインシステムが設定するあらゆる制約を受けることができます。  

4. よりスムーズなデザインハンドオフ

  デザインハンドオフは、デザイナーとエンジニアにとって、本来はストレスの多い、虚構に満ちたプロセスであり、デザイナーは、ツールやビデオ、ドキュメントや静的なデザインを使って、プロトタイプが「何をするはずなのか」を示します。  

UXPin Mergeでデザインハンドオフを行うと、エンジニアが同じコンポーネントを使うため、不確実性がなくなり、文書化を減らすことができます。デザイナーは、各コンポーネントのインタラクションやスタイリングのプロパティで技術的な制約を受けないようにできるので、エンジニアが再現できないデザインを目にすることはほとんどありません。  

5. 有意義なフィードバック

  ユーザビリティの参加者やステークホルダーも、コンポーネント駆動型のプロトタイプの恩恵を受けます。完全にインタラクティブなプロトタイプは、最終的な製品とその能力について、誰もが現実的に期待することができ、デザインチームは、より高い忠実度と機能性により、ステークホルダーとエンドユーザーから有意義で実用的なフィードバックを得ることができるのです。

6. より高速なイテレーション

コンポーネント駆動型のプロトタイプのワークフローにより、デザイナーはテストやステークホルダーからのフィードバックに対して、より速やかにイテレーションを行うことができます。ドラッグ＆ドロップによるデザインプロセスと簡単にできるプロパティへのアクセスにより、デザイナーはその場で変更を加えることができるのです。ちなみにPayPalは、UXPin Mergeに切り替えた後、以下のようにその効率性の向上を実感しました：

「忠実度の高いプロトタイプをより早く作り、セッション後にすぐにフィードバックが得られます。すぐに修正できることがあれば、次の参加者の前にその変更を行い、以前よりずっと早くフィードバックを得ることができます。」- PayPal, UXシニアマネージャー、エリカ・ライダー氏

UXPin Merge のユーザーはPatternのようなツールの恩恵を受け、デザインチームは1つのコンポーネントが持つ複数のバージョンを共有のパターンライブラリに保存することができます。そしてデザイナーは、UXPinのPropaties Panel（プロパティパネル）を使う代わりに、UI要素とパターンを切り替えて、より速くイテレーションを行うのです。  

7. レスポンシブデザイン機能

  レスポンシブデザインは、デザイナーにとって時間のかかる作業です。1つの画面に対して複数のレイアウトの作成が必要があり、それによってデザインプロジェクトに多大な時間が費やされることになります。そこで、レスポンシブコンポーネントを開発することで、デザイナーはプロトタイプを１つ作成するだけで、すべてのレイアウトに対応できるようになります。  

Merge のコンポーネント駆動型のプロトタイプのソリューションでは、デザイン システムチームはコンポーネントをiFrameでラッピングして、複数のビューポートに対応させることができ、デザイナーはデザインをプレビューする際に、ドロップダウンを使ってこのようなレイアウトを切り替えることができます。  

8. デザインの拡張性

  コンポーネント駆動型のプロトタイプのドラッグ＆ドロップの特性とは、非デザイナーが、画像ベースのデザインツールを使う熟練のUXデザイナーよりも、高い忠実度と機能性でプロトタイプを構築することができるということです。  

PayPalが2019年にUXPin Mergeを使い始めた際に、製品チームをトレーニングすることでデザインプロジェクトの90%を完了させることができました。UXデザイナーは製品チームを指導し、複雑なユーザビリティの問題をサポートすることで、UX専門家を増やす必要性が下がるとともに、ハイレベルなUXの取り組みに集中できるようになりました。  

コンポーネント駆動のワークフローは、学習曲線を大幅に短縮し、プロトタイプを高速化することで、非デザイナーにもデザインプロセスがより身近なものになっているのです。  

コンポーネント駆動型のプロトタイプのワークフローを導入している会社

  PayPalとTeamPasswordは、コンポーネント駆動型のプロトタイプを使って不整合を排除し、顧客にポジティブなユーザー体験を提供しています。  

PayPalが巨大な多国籍企業であるのに対し、TeamPasswordは小規模なチームで運営されていることから、今回この２社を例に選びました。  

両社とも、UXPin Mergeに切り替え、コンポーネント駆動型のプロトタイプのワークフローを採用することで、大きなメリットを得られました。  

PayPal

  PayPalは、コンポーネント駆動型のプロトタイプのとてもいい成功例です。同社はUXPin Mergeに切り替えた後、画像ベースのデザインツールを使っていたときよりも8倍速くデザインプロジェクトを完成させました。  

「PayPalで使っている別のデザインツールで、1ページのベクターベースのデザインを行い、その後、UXPinでMergeコンポーネント ライブラリを使って全く同じプロトタイプを作成しました。Merge だと、デザイナーは約 8分間でできますが、他のデザインツールでは1時間以上かかりました。」

「社内でよくある問題は、製品チームがUXデザインをボトルネックと捉えていることです。まずはそのボトルネックを取り除き、製品チームが自分たちでデザインを行えるようにする戦略を実行しました。」 – Paypal、エリカ・ライダー氏  

PayPalのコンポーネント駆動型のワークフローでは、製品開発に関わるすべての人がUXに責任を持つようになります。最も大きな影響として、コンポーネント駆動型のプロトタイプによって、PayPalの製品チームはより多くのデザイン責任を担うことができるようになった点です。  

Teampassword

  パスワード管理は、組織が顧客の確保および維持のために信頼を勝ち得なければならない、競争の激しい業界であり、デザインは、ブランドの強化や、顧客の信頼とロイヤルティを獲得する一貫したユーザー体験を生み出す上で、重要な役割を担っています。  

「お客様は私たちに「ログイン記録」という重要な情報を託しています。矛盾や時代遅れのデザインは、当社がその情報を安全に保つのに十分な最先端の技術を備えているかどうか、一部のお客様に疑念を抱かせてしまうことになります。フロントエンド開発は、バックエンドのパフォーマンスに対する信頼と自信を築くのです。」トニー・カッチャーボ氏、TeamPasswordオペレーションディレクター  

TeamPasswordはゼロからデザインする代わりにオープンソースのコンポーネント ライブラリを使い、プロトタイプとテストのためのデザイン チームは設けられてません。その代わりに、TeamPasswordのフロントエンドのデベロッパーは UXPin Merge を使って新しいUIや機能のプロトタイプとテストを行っています。  

このコンポーネント駆動ワークフローによって、TeamPasswordは製品のデザイン、テストなどが高い整合性で行うことができ、市場競争の中での運営において欠かせないものとなっています。  

コンポーネント駆動型のプロトタイプの始め方

  デザインと開発の間に信頼できる唯一の情報源（Single source of truth）を作成することはこれまで以上に簡単になります。UXPin Mergeでを使用することで、組織はコンポーネント ライブラリをインポートでき、デザイナーとエンジニアは同じ UI 要素を使えるようになります。  

コンポーネントの取り込み

  デザイナーは、UXPinのNPM統合を使ってオープンソースのコンポーネントライブラリをインポートしたり、エンジニアの協力を得て、MergeのGitまたはStorybookの統合を使って製品のデザインシステムを同期させたりすることができます。

プロトタイプ

どの方法でUXPinとコンポーネントを同期させても、デザインの流れは同じです。

• MergeのUI 要素をキャンバスにドラッグして、プロパティパネルで変更する。また、より大きく、より複雑なコンポーネントを作成するのにUXPin Pattern（パターン機能）を使って要素を組み合わせることも可能。
• コンポーネントを接続してプロトタイプを作成し、ユーザビリティテストやステークホルダーへのプレゼンテーションを行う。
• 完璧なソリューションを見つけるまで、テストとイテレーション行う。UXPinでは、【プレビューと共有】を使ったブラウザでのテストや、【UXPin Mirror】を使ったモバイルでのテストが可能。
• プロジェクトに【ドキュメンテーション】を追加し、デザインハンドオフの時にコメント機能を使ってエンジニアと共同作業を行う。

Mergeの信頼できる唯一の情報源（Single source of truth）

UXPin Mergeは組織全体での「信頼できる唯一の情報源（Single source of truth）」として機能し、それによって製品のデザインシステムの管理および拡張のお手伝いをします。さらに、コンポーネントライブラリのレポジトリに変更があると、UXPinのデザインエディタに自動的に同期され、チームに更新が通知されます。

UXPin Mergeのバージョンコントロール機能で、リリースの追跡や、デザイナーによる以前のバージョンへの切り替えができるため、アップデートを完全にコントロールすることができます。

UXPin Mergeが提供するコンポーネント駆動型のプロトタイピングを試してみませんか？詳細とこの革新的なテクノロジーへのアクセス権のリクエスト法については、Mergeのページをぜひご覧ください。

The post コンポーネント駆動型 プロトタイプとは？ appeared first on Studio by UXPin.

 Facebook のマーク・ザッカーバーグ氏の“Move fast and break things!（素早く行動し、破壊せよ）“ という言葉もある通り、ラピッドプロトタイピング  によって「プロトタイプ」の制作過程がスピードアップし、デザインチームは最終デザインをより早くエンジニアリングチームにプッシュすることができます。  

完璧を求めると貴重な時間が費やされ、それによって製品チームは競争から一歩遅れてしまいますが、ラピッドプロトタイピングによって、デザインチームはデザインの主な機能とフローだけに集中でき、速やかに市場に投入することができます。  

主なポイント  

• ラピッドプロトタイピングは、製品開発の次の段階で絶対に必要な機能や画面を考慮しながら、実用的なプロトタイプを迅速に作成する方法論である。
• ラピッドプロトタイピングのプロセスにプロトタイプの作成やユーザーとのテスト、可能な限り迅速な反復があることによって、デザインは可能な限り早く開発されるようになる。
• ラピッドプロトタイプによって、ステークホルダーは、リソースを投入して製品を作る前に、製品がどのように見えるか、 UX（ユーザーエクスペリエンス）がどのようなものかをすぐに確認することができる。
• ラピッドプロトタイピングは、効率的で、速く、アクセスしやすく、ユーザーが楽しめる製品を作ることに重点が置かれている。

  UXPinの高度なプロトタイピング機能により、デザインチームは製品を迅速に構築できます。プロトタイピングでReactコンポーネントを使って、生産可能なプロトタイプを１０倍速く構築してみませんか。詳しくは UXPin Mergeをぜひご覧ください。  

 ラピッドプロトタイピング とは

ラピッドプロトタイピングは、ユーザーフローをテストして速やかにアイデアを検証するために、忠実度の高いプロトタイプを作成するプロセスであり、デザイナーがUXの最適化だけに集中して「あったらいいな」の機能や見た目に振り回されるのを防ぐべく、「スピード」を目標としています。

チームが製品を市場に投入するのが早ければ早いほど、成長と製品改良のための資金を得るための収益が生み出されますからね。

ラピッドプロトタイピングと従来のプロトタイプ

ラピッドプロトタイピングに比べ、従来のプロトタイピングプロセスでは、以下５つの段階で定義されています：

1. スケッチ：紙に大まかなスケッチを描き、ブレインストーミングを行う。
2. ワイヤーフレーム：ボックスや大まかなシェイプで骨格を作り始める。
3. モックアップ：色、タイポグラフィ、写真、その他のビジュアルデザイン要素を使って、ワイヤーフレームに詳細を注入する。
4. プロトタイプ：基本的なプロトタイプのために画面をつなぎ合わせたり、高度なプロトタイプのためにアニメーションやインタラクションを追加することで、モックアップにインタラクティブ性を追加する。
5. ハンドオフ：エンジニアリングのチームは、最終製品にするためのプロトタイプを受け取る。

ただし、Lean UXやラピッドプロトタイピングのような新しい考え方が一般化し、できるだけ早くコーディングに取りかかりたい派の人も多いことから、上記のような従来の手法は時代遅れになりつつあります。

 ラピッドプロトタイピング の利点

 ラピッドプロトタイピング の主な利点を４つざっと見てみましょう：

1. コスト削減：製品をより早く市場に投入することで、人件費が削減されると同時に、製品の早期収益化が実現する。
2. 時間の節約 ：テスト中にユーザーのペインポイントを把握できることで、変更に多大な時間とコストがかかるような開発にエラーが発生する可能性がなくなる。
3. ユーザー重視：時間が限られているため、チームはUXの最適化に集中し、「あったらいいな」のような機能に惑わされない。
4. アクセス可能：デザイナーでなくてもプロトタイプを作成してテストできる環境が作り出され、このプロセスにより、製品チームは 、（多くの場合は数回の反復を経て）デザインを製品チームに提示する UXデザイナーにアイデアを説明する必要がなくなり、時間が節約される。

 ラピッドプロトタイピング のプロセス

ラピッドプロトタイピングは独立したプロセスというより、効率化のためのフィルターであり、できるだけ質の高いフィードバックを得るために、フィードバックに基づいてサッと修正を行い、Hi-Fi（高忠実度）のプロトタイプに素早く移行します。

また、ラピッドプロトタイピングでは、明確な目標とKPIの設定が重要であり、チームは設定した目標を達成するために必要なタスクだけに集中します。

そして以下のステップは、ラピッドプロトタイピングとテストのフェーズに適用されます（デザインプロセスの初期段階はすでに完了していると仮定します）。

事前準備 – インタラクティブワイヤーフレーム

ラピッドプロトタイピングがデザインプロセスの最終段階に重点を置くのに対し、インタラクティブワイヤーフレームは初期段階のデザインにスピードと効率をもたらします。

インタラクティブなワイヤーフレームがあれば、UXチームはモックアップや忠実度の高いプロトタイプのデザインに移行する際に、大きなスタートを切ることができます。

インタラクティブワイヤーフレームに関する無料電子書籍をダウンロードして、この初期段階のデザイン戦略がラピッドプロトタイピングプロセスの最適化にどのように役立つかぜひご覧ください。

ステップ１：デザインシステムの構築

デザインシステムで、デザイナーは効率的なラピッドプロトタイピングに不可欠な要素である「スピード」と「一貫性」を維持することができます。また、デザインシステムによって、新しいデザイナーのオンボーディングは効率化され、（PayPal が Mergeで行なっているように）デザイナーでなくても製品を構築できるようになります。

UXPinでは、デザインシステムをゼロから作成したり、Google のマテリアルデザイン、Bootstrap、iOSのような広く使われているシステムを使うことができます。さらに、すぐに使えるインタラクティブな UIパターンを使って、再利用可能なコンポーネントを簡単に構築できます！

ステップ２：モックアップの作成

デザインシステムが完成すれば、モックアップの作成はドラッグ＆ドロップで簡単にできます。

ちなみに、Sketchでデザインしたい場合は、UXPinのSketchインポートを使えば、デザイナーは簡単にモックアップをアップロードして、プロトタイプやテストを始めることができます。

ステップ３ – UXPin 流インタラクションの作成

モックアップが完成したら、ユーザーフローをつなげてインタラクションを追加します。

まずはインタラクションをシンプルにしておきましょう。チームメンバーがコピー＆ペーストするだけで済むように、デザインシステムでインタラクションのガイドラインを作成するといいですね。シンプルなインタラクションで時間の節約になるだけでなく、統一性が保たれ、最終製品は見やすくて一貫性のあるものになりますからね。そしてデザイナーはいつでもインタラクションの修正をすることができます。

ここでの目標は、ユーザーがフローを完了するために重要なインタラクションだけに集中することだと覚えておいてください。UXデザイナーは、テストから正確なフィードバックを得るためにも、最終製品のように見えるプロトタイプを作らなければなりません。

UXPinを使うことで、コンポーネントや変数を作成、ステートを追加し、実際のデータを使って、忠実度の高いプロトタイプ作成して最終製品とまったく同じ外観と機能性を確かめることができます。

• コンポーネントを使うと、ボタン、アイコン、カードなどの再利用可能な要素を作成できるため、時間の節約になる。マスターコンポーネントはコンポーネントのプロパティを確定し、インスタンスコンポーネントはマスターコンポーネントの内容を反映する。マスターコンポーネントへの変更は、すべてのインスタンスコンポーネントに反映されるため、デザイナーは要素を１つ編集するだけで、フロー全体に変更を加えることができる。

• 変数を使うと、ユーザーの入力を保存し、提供されたデータに基づいてプロトタイプ内でアクションを実行できる。UXチームは、ユーザビリティテストやステークホルダーへのデモンストレーションの際に、個別化されたエクスペリエンスを提供することができる。これが、UXPinが持つラピッドプロトタイピングを促進する強力な機能である。
• 例えば、デフォルト、ホバー、アクティブ、無効など、要素やコンポーネントのステートを作成できる点は、UXPinのもう一つの強力な機能である。さらに、ドロップダウンやナビゲーションメニューのように、ステートをアクティブにしたり切り替えたりする「トリガー」を設定することもできる。
• UXPin Mergeを使うと、デザイナーは忠実度の高いプロトタイプを他のデザインツールにはないレベルで作成できる。UXPin Mergeは、コード化されたコンポーネントを使ってデザインする際に、プロトタイプの外観や機能を最終製品とまったく同じにすることができる。 − UXPin Merge については、本記事の後半で。

ステップ３：テスト、微調整、繰り返し

忠実度の高いプロトタイプが完成したら、いよいよテストです。UXPin では、ブラウザ上でプロトタイプをテストしたり、UXPin Mirror （iOS & Android）をダウンロードしてモバイルデバイスでテストすることができます。

そして UXチームは、ステークホルダーからのフィードバックやユーザビリティ調査を集め、デザインを微調整してから、テスト段階に戻って変更を検証することができます。

また、UXデザイナーは、即座にフィードバックを得てラピッドプロトタイピングプロセスをスピードアップするために、テスト中にちょっとした変更を行うかもしれません。

UXPin Merge がラピッドプロトタイピングを速める方法

従来のデザインツールは、ベクターまたはラスターグラフィックスをレンダリングします。そのグラフィックは最終製品のように見えるかもしれませんが、機能が限られているため、テストやステークホルダーからの有意義なフィードバックは得られません。

この方法で作成されたプロトタイプだと、カートに商品を追加したり、ビデオを再生したりするように、ユーザーがデータを入力したり、要素の状態をアクティブにしたりしたことを「想像」しないといけません。

UXPinはコードベースのデザインツールです。デザイナーがキャンバスに何かを描くと、UXPin は HTML/CSS/JS のコードをレンダリングします。そこでさらに一歩進んで、Git や Storybookと統合する Merge テクノロジーを導入した結果、ゼロからデザインすることなく、用意されたインタラクティブなUI要素でプロトタイプを作成できます。

UXPinのプロトタイプは最終製品のように見え、機能するため、テスト参加者やステークホルダーは、UXPinのプロトタイプを操作したときに何が起こるかを考える必要がなくなります！また、デザイナーは、JSON、Google Sheets、または CSV から実際のデータを使って、本物の製品体験をシミュレーションし、複数のシナリオをテストするために素早く変更することもできます。

さらに、UXPin Mergeは、実際のUXと有意義なフィードバックによってラピッドプロトタイピングを加速させるだけでなく、デザインからエンジニアリング、そして最終製品への移行を大幅に短縮してくれます。

PayPalのDesignOps 2.0 – UXPin Merge のサクセスストーリー

UXPin Mergeは PayPalのDesignOps 2.0の中核を成しており、プロダクトチームのメンバーがラピッドプロトタイピングを使ってPayPalの社内ツールのインターフェースを構築しています。

基本的に、UXPin MergeでPayPalの製品チームは、UI（ユーザーインターフェース）を構築し、Reactコンポーネントで忠実度の高いプロトタイプをテストするための、ノーコードのドラッグ＆ドロップツールを使用できます。さらに、PayPalのプロダクトマネージャーは、JSON、Google Sheets、または CSVから実際のデータをインポートすることで、プロトタイプに最終的な製品機能が付きます。

また、PaypalのUXデザイナーは、プロトタイプやテストのプロセスに参加する代わりに、プロダクトチームのメンターとして、必要に応じて指導やサポートを提供します。

コードコンポーネントを使うことで、PayPalのエンジニアは、ベクターやラスターベースのデザインツールを使うよりもずっと速く製品チームのプロトタイプを開発することができるのです。

UXPin Mergeによって、PayPalがたった３人のUXデザイナーで効率的なラピッドプロトタイピングを実現できるのであれば、今あなたが行なっているデザインプロセスに何をもたらせるでしょうか？ぜひUXPin Mergeのページをご覧ください。

Reach a new level of prototyping

Design with interactive components coming from your team’s design system.

Discover UXPin Merge

The post ５分でわかる【 ラピッドプロトタイピング のプロセスと忠実度】 appeared first on Studio by UXPin.

組織がデザインプロセスを効率化し、連携を強化しようと努力する中で、DesignOpsは『デザイン目標』と『ビジネス目標』を一致させるための基盤としての役割を果たします。

UXPinは最近、３人の DesignOps エキスパートによるウェビナー「Strategies for Building Resilient DesignOps Practice（レジリエントな DesignOpsプラクティス構築のための戦略）」を開催し、そこでは貴重なインサイトと戦略が得られました。

ウェビナーでは、以下の３人の業界専門家によるパネルディスカッションが行われました：

• Salomé Mortazavi氏：SiriusXM社の DesignOpsおよびデザインシステム担当シニアディレクター
• Meredith Black氏：豊富な経験を持つDesignOpsコンサルタント
• Adam Fry-Pierce氏：Google社のUXリーダーシップ担当チーフスタッフ

知識が豊富なこの三方からユニークな視点と経験がもたらされ、DesignOpsにおける課題と機会について議論されました。

UXPinの「信頼できる唯一の情報源（Singoe source of truth）」で、効率的なタスク管理とワークフローを実現します。アクセス方法については、Merge のページをぜひご覧ください。

デザインチームの真のニーズを突き止める

レジリエントな DesignOps のプラクティスを構築するには、デザインチームの真のニーズを理解し、それに対処することが非常に重要です。デザインチームが直面する基本的な課題の１つに、デザインと全体的なビジネス戦略との整合性の欠如があり、この不整合はデザインプロセスを阻害するような、非効率性やコミュニケーションのギャップ、そしてリソース制約につながってしまいます。

共通のビジョン作り

デザインチームのニーズに対応するための極めて重要なステップは、共通のビジョンの作成であり、このビジョンの共有には、デザインチームの目標をビジネスの幅広い目標と一致させることが含まれます。組織内でのデザインの役割について共通の理解を確立することで、チームはより結束して効果的に働くことができるのです。

デザインチームのビジョンのステートメントの作成についてはこちら。

ワークフローの効率化

デザインチームをサポートするもうひとつの重要な側面は、ワークフローの効率化です。デザインチームは、断片化されたプロセスによるボトルネックや非効率によく遭遇します。そこで DesignOps が、ワークフローを効率化することで効率性を上げ、連携しやすい環境を促進することで、デザインチームがこのような課題を克服できるよう支援します。

デザインシステムの導入

デザインシステムの導入は、コミュニケーションギャップやリソースの制約に対処する効果的な方法です。デザインシステムは、さまざまなデザインプロジェクト間で一貫性を保つことができるような一連の基準とガイドラインを提供し、それによってチームメンバー間のより良い連絡と連携が促進されます。

ロードマップと成熟度モデルの整合性

ロードマップを成熟度モデルと整合させることは、デザインプラクティスの現状評価や改善領域の特定などのデザイン計画のプロセスにおいて有益です。デザインチームは、ロードマップを成熟度モデルと整合させることで具体的なマイルストーンと目標の達成に焦点を当てた取り組みを行うことができますからね。

こちらもチェック： UXPin Merge 顧客事例『Iress』：デザインツールの再想像

DesignOps のプラクティスを適切なサイズにする

DesignOpsのロードマップを組織の成熟度モデルと整合させるなど、デザインチームの特定のニーズと成熟度に合わせて運用を調整するには、DesignOps のプラクティスを適切なサイズに調整することが非常に重要です。

成熟度モデルの使用

効果的なアプローチの１つは、デザインリーダーシップチームが集まって定性的な課題やニーズ、目標について議論することによって、成熟度モデルを中心にDesignOpsロードマップを調整することです。成熟度モデルで、重点領域の概要や、テーマの特定および優先順位付けができるようになります。この調整によって、確実にDesignOpsが組織の成熟度に沿った具体的なマイルストーンと目標の達成に重点的に取り組めるようになります。

記事を読む：DesignOps の成熟度確認のためのチェックリスト

企画におけるインクルーシブデザインの提唱

もうひとつの重要な側面は、組織の企画（プランニング）のプロセスにおけるインクルーシブデザインの提唱です。デザインが主要な企画要素として認識されていないことがあるため、この認識を変えるにはデザインチームによる提唱が必要です。デザインを提唱してその価値を示すことで、DesignOps が組織の企画と意思決定プロセスにおいて、確実にデザインが重要な考慮事項となるようにすることができるのです。

内部統制とチームの成長

組織の目標に合わせるだけでなく、デザインチームのニーズに社内で焦点を合わせることが重要となります。この連携には、チームがどのように成長できるかの評価やデザイナーに開発の見通しを示す方法が含まれます。また、デザイナーが同じタイプのプロジェクトで行き詰まることもあり、彼らの成長と発展に貢献する多様な機会を提供することは非常に重要です。

デザインチームワークに関する電子書籍を読む： DesignOps First Pillar: How We Work Together.（DesignOps の第一の柱：協働の方法）

重要な部門横断的パートナーシップの特定と確立

DesignOps がうまくいくには、重要な部門横断的パートナーシップの確立が不可欠です。このようなパートナーシップによって、デザイン業務は確実に組織内の他のチームや部門の目標やインセンティブと一致できるようになります。

目標と動機の理解

部門横断的パートナーシップを確立するための重要な側面のひとつは、パートナーの『目標』と『動機』を理解することであり、さまざまなチームや部門には、それぞれの行動の原動力となる明確な目標と動機があることを認識することが非常に重要です。

この「目標」と「動機」を理解することで、DesignOps は他のチームの取り組みと連携し、共通の組織目標に向かって取り組むことができます。そしてこの連携は、DesignOps が確実により広範な組織目標と統合して、単独で運営されることがないようにするのに欠かせません。

緊急性と重要性のバランス

部門横断的なパートナーシップを確立する上でもうひとつ重要なことは、緊急性と重要性のバランスをとることです。文化を構築し、デザイナーをつなげることに力を注ぐのは重要ですが、緊急性が優先されることが多いことを認識しておくことも極めて重要です。DesignOps は、効率性を確保しながら、デザイン組織の価値を上げることに重点を置かないといけないのです。

DesignOps の規模および範囲

機能横断的なパートナーシップを確立する際には、さまざまなチームの固有のニーズを評価し、そのニーズを満たすための DesignOps の適切な規模と範囲を決定するなど、DesignOps の規模と範囲の考慮も不可欠です。

出だしに余裕を持ってチームや組織のニュアンスを理解することで、どのような種類のサポートやリソースが必要かを特定することができます。この体系的なアプローチによって、DesignOps は組織固有のニーズに合わせて確実に調整されるのです。

測定とインパクト：DesignOps のROIを説明する方法

インパクトを測り、DesignOps の ROI （投資収益率）を示すことは、組織内でその役割を説明し、デザインと部門横断チームに価値をもたらす重要な側面に焦点を当てるのに非常に重要です。

インパクトへの焦点

DesignOps を測る上で欠かせない側面の１つは、インパクトへの焦点です。DesignOps の実践者は、すべてをやり遂げたいという衝動を抑え、代わりに最も重要なことに集中しないといけません。DesignOps チームの規模とインパクトは必ずしも一致しないことを認識しておくことが重要であるため、低コストでも見返りの大きい取り組みに集中することが非常に重要です。

土台作り

DesignOps にレイヤーを追加する前に、デザインと部門横断チームの価値を促進する本質的な側面に焦点を当てることによる、強固な基盤構築が必要です。この土台を築いて組織からの賛同が得られたら、DesignOps が提供する中核的な価値を損なわないように注意しながら、追加のレイヤーを追加し始めることができるのです。

内部拡張と乗数

緊縮財政の時代には、創意工夫を凝らして取り組みの規模を拡大することが極めて重要です。これは必ずしも人員を増やす必要はありませんが、DesignOps に関心のあるマネージャーやリーダーとの提携が必要になる場合があります。また、同様にこれらに関心のあるデザインリードの機会を引き出すことにもつながるかもしれません。このような内部乗数は、必ずコストを増やすというわけではなく、取り組みを強化させることができるのです。

デザイナーの DesignOps 参加

DesignOps を拡張するもう１つのアプローチとして、デザイナーの DesignOps への参加があります。多くのデザイナーは、気づかないうちにすでにDesignOps 活動を行っているかもしれません。このようなデザイナーにDesignOps での役割を割り当てることで、組織はデザインへの理解を通して、 DesignOps の価値を上げることができます。

スコープの影響：コストセンターと収益源 – 管理範囲内のメトリクス

DesignOps の影響をスコープする際には、コストセンター（原価中心点）と収益源を通してビジネスニーズに焦点を当てることが不可欠であり、このスコープには、機能横断的な強固なパートナーシップの確立や、DesignOps の管理範囲内のメトリクスへの注力が含まれます。

ビジネスニーズへの焦点

ビジネスに価値をもたらす重要な側面を特定し、その側面に取り組みを集中させることは、影響範囲に不可欠です。DesignOps にできることがたくさんある一方で、ビジネスに最も大きな影響を与えるものに集中することが、最も大きな価値と ROI を生み出すということを認識しておくことが重要です。

部門を超えたパートナーシップの確立

強力な部門横断的パートナーシップを確立するということは、エンジニアリング、製品、技術プログラムマネージャなど、組織内の他の部門や機能との関係を築くということです。このようなパートナーシップにより、DesignOps は組織の広範なゴールと連携で、達成につながることができるのです。

投資としての人間関係

機能横断的なパートナーと個人的な関係を構築することで、DesignOps は他部門や機能の目標やニーズをよりよく理解できるようになり、DesignOps の管理範囲内のメトリクスに焦点を当てながら、調整して取り組むことができます。

時代の変化への対応

DesignOps は、たとえ緊縮財政の時代であっても、回復力性（ レジリエント ）があり、成長と発展の機会を模索することで、変化に機敏に適応できないといけません。柔軟で、回復力があることでDesignOps は世の中が変化しても、ビジネスに価値をもたらし続けることができるのです。

DesignOps × ChatGPT含む生成系AI

DesignOps のコンテクストでは、AI（人工知能）や ChatGPT のような生成系モデルは、デザインプロセスを大幅に効率化し、生産性を上げてくれます。その方法を以下に挙げてみましょう：

ルーティンタスクの自動化

AI はデザインプロセスにおけるルーティンワークや繰り返し作業を自動化し、それによってデザイナーはより複雑でクリエイティブな作業に集中できるようになります。例えば、DesignOps の実務者は、AI を使って、事前に確定されたルールやガイドラインに基づいて、デザインアセット生成、UI（ユーザーインターフェース）コンポーネント、さらにはレイアウト全体を自動化することができます。

迅速なプロトタイプ

生成系 AI モデルは、特定の入力に基づいてデザインコンセプトを生成することで、迅速なプロトタイプを支援することができます。AI を活用することで、デザインのアイデア出しやコンセプト開発の段階のスピードが大幅上がり、デザイナーはより短時間で幅広いアイデアを検討することができるのです。

ユーザー調査とデータ分析

AI は、ユーザー調査やデータ分析の支援もします。例えば、AI はユーザーの行動データを分析してパターンや傾向を特定し、デザインの意思決定に有益で貴重なインサイトを提供することができます。また、DesignOps は 、ユーザーテストを実施してフィードバックを集めることでユーザーの反応を集めて分析するような、時間のかかるプロセスを AI を使って自動化することもできます。

連携の強化

ChatGPT のような AI モデルは、アイデアを生み出し、フィードバックを提供し、様々なタスクを支援する仮想チームメンバーとして機能することで、連携を改善することができます。そしてこの AI アシスタントは、特に遠隔地や分散した作業環境において、デザインチームの効率性と生産性を上げることができます。

UXPin Merge テクノロジーでデザインワークフローのギャップを埋め、デザイナーとデベロッパーの連携を強化してみませんか？組織全体で「信頼できる唯一の情報源（Single source of truth」）を持ち、ドリフト排除、市場投入までの時間短縮、１つのツールで負債の最小化を実現しましょう。詳細は こちらのページをご覧ください。

The post レジリエント な DesignOps – 実践のためのヒント appeared first on Studio by UXPin.

プロトタイプ はデザインプロセスにおいて最も重要なステップの1つですが、いまだに一部のデザイナーやプロジェクトチームを悩ませています。

よくある誤解として、モックアップのことを「プロトタイプ」と呼んでいることです。また、プロトタイプは一連のスケッチでも、最終製品の機能的なレプリカでもありません。

プロトタイプ とは何か？

プロトタイプとは、最終製品のシミュレーションのことで、製品チームが実物の製造にリソースを投入する前にテストするために使用します。

プロトタイプの目的はアイデアをステークホルダーと共有し、最終的にデザインをエンジニアリングチームに渡して開発する前にアイデアをテストして検証することです。  

プロトタイプ はユーザビリティテストで参加者と共にユーザーのペインポイントを特定し、解決するために不可欠です。プロトタイプをエンドユーザーと一緒にテストすることでUXチームはデザインプロセスの中でユーザーエクスペリエンスを視覚化し、最適化することができます。

エンジニアリングにはコストがかかり、最終製品に変更を加えることはチームが予想しているほど簡単ではありません。そのため、デザインプロセス中にエラーを発見し修正することは非常に重要です。

プロトタイプには主に4つの観点における品質があります。

• 表現方法 – プロトタイプそのもの、紙やモバイル、またはHTMLとデスクトップなど。
• 精度 – プロトタイプの忠実度、ディテールのレベル（低忠実度または高忠実度）。
• インタラクティブ性 – テスト段階でユーザーが利用可能な機能（完全機能、部分機能、閲覧のみなど）。
• 進化 – プロトタイプのライフサイクル。あるものはすぐに作られテストされ捨てられ、その後改良されたバージョンと交換される（「ラピッドプロトタイピング」として知られる）。また作成と改良を繰り返し、最終的に最終製品へと進化するものもあります。

ElementorのUXディレクターによると、ウェブサイト構築プラットフォームのデザイナーは、デザインの複雑さにもよるが、平均4〜5回のプロトタイピングセッションを行うという。

ユーザーのニーズを解決するための初歩的なアイデアであっても、デザインのあらゆる可能なイテレーションをプロトタイプ化すべきです。プロトタイピングは、最終バージョンのベータテストのためだけに行うべきではありません！

プロトタイプをテストすることで、エンドユーザーが製品にどのように接するかについて新たな気づきが得られるのであれば、忠実度や方法は気にせず、時間をかけてユーザーのフィードバックを集めて反復する価値があります。

プロトタイプの種類

プロトタイプを紙、デジタル、HTMLの3つのタイプに分けてみていきましょう。

ペーパープロトタイピング

ペーパープロトタイプとは、紙やデジタルのホワイトボードに描かれたプロトタイプのことである。このようなプロトタイプは、デザイン思考のワークショップのように、デザイナーがまだアイデアを練っている初期段階で使用されます。

ペーパープロトタイピングは、デザインチームが協力して多くのコンセプトを素早く検討するデザイン初期段階で最も効果的です。チームメンバーは、シンプルな線、形、テキストを使ってアイデアを手書きでスケッチします。美学ではなく、多くのアイデアとスピードが重視されます。

UXチームは、床やテーブルの上にペーパースクリーンを並べたり、ボードに固定したりして、ユーザーフローをシミュレートする。これらのプロトタイプをテストするための一般的なやり方は、一人が「製品」を操作し、実際のユーザーの行動に従ってスケッチを切り替えることです。

ペーパープロトタイプのメリット

• 速い – プロトタイプのスケッチは数分でできます。そのため、紙はたくさんのアイデアをテストするのに適しています。ブレインストーミングの会議中であってもすぐにプロトタイプを描くことができるので、アイデアが頓挫しても数分以上は無駄になりません。
• 安価 – メーカー製のペンと紙があればプロトタイプを作ることができるので、安価で身近なものです。
• チームビルディング – ペーパープロトタイピングは共同作業であり、多くの場合、チームで楽しく新鮮なアイデアを生み出すことができます。これは素晴らしいチームビルディングのエクササイズであり、これらの自由な発想のセッションはしばしば創造性を刺激します。
• ドキュメンテーション – チームメンバーは、ペーパープロトタイプの物理的なコピー、メモ、TODOを保管し、将来のイタレーションの際に素早く参照することができます。

ペーパープロトタイプのデメリット

• 非現実的 – どんなに熟練した技術をもってしても、ペーパープロトタイプはデジタル製品を手書きで表現したものにすぎません。そのためペーパープロトタイプはすぐに描けますが、エンドユーザーとのテストではほとんど、あるいは全く結果が得られません。
• 誤検証 – ペーパープロトタイプでは、アイデアを正しく検証できないことがあります。紙の上では良いアイデアに見えても、デジタルワイヤーフレームでは効果的に機能しない場合があります。
• 本能的ではない反応 – ペーパープロトタイプはユーザーの想像力に頼っているため、刺激を見てから反応するまでに時間がかかります。UXを成功させるためには、この「本能的な」反応が重要です。

これらのメリットとデメリットを考慮すると、ペーパープロトタイピングはデザインの初期段階でのみ行うことをお勧めします。紙からデジタルに移行した後は、同じデザインやユーザーフローのために手書きのプロトタイプを再度作成する必要はありません。

ペーパープロトタイピングの詳細については、以下の参考資料をご覧ください。

• Paper Prototyping as a Usability Testing Technique （ユーザビリティテスト手法としてのペーパープロトタイピング）by Justin Mifsud
• Better Use of Paper in UX Design by Marcin Treder（紙の良い利用方法）
• iPhone User Interface Design, Paper Prototype Design （iPhoneのユーザーインターフェースデザイン、ペーパープロトタイピングのデザイン）(video)
• Printable Paper Prototyping Templates courtesy of Tripwire Magazine（印刷可能なペーパープロトタイピングのテンプレート）

デジタルプロトタイピング

デジタルプロトタイピングは、デザイン・プロセスのエキサイティングな部分です。プロトタイプは最終製品に近い形で作成されるため、チームはアイデアをテストし検証することができます。

デジタルプロトタイプには2つのタイプがあります。

• 低忠実度（Lo-Fi）：ワイヤーフレームを使用したユーザーフロー
• 高忠実度（Hi-Fi）：モックアップを使用したユーザーフロー

低忠実度のプロトタイプでは、調査チームは基本的なユーザーフローと情報アーキテクチャの概要を把握できます。高忠実度のプロトタイプでは、ユーザーインターフェース、インタラクション、およびユーザビリティテスト参加者が製品を実際に操作する方法をテストし、より詳細に検討します。

 デザイナーは、FigmaやAdobe XDなどのデザインツールを使ってプロトタイプを作成します。またデザイナーではない製品チームのメンバーが、パワーポイントやGoogleスライドを使ってユーザーフローをシミュレーションすることもあります。

UXPinの特徴として、デザイナーは、他のデザインツールでは実現できない、最終製品とまったく同じ外観と機能を持つプロトタイプを作成することができる点です。

デジタルプロトタイプのメリット

• リアルなインタラクション – ハイフィデリティのデジタルプロトタイプでテストすることにより、UXチームはユーザーが最終製品とどのようにインタラクションするかを見ることができ、ユーザビリティに関する問題を効果的に解決することができます。
• 柔軟性 – 早期にテストを行い、頻繁にテストを行うことができます。初期のプロトタイプから始めて、デザインプロセスが進むにつれ徐々に高度なものにしていくことができます。
• スピード – アイデアをテストするにはペーパープロトタイプが一番早いかもしれませんが、ユーザビリティの問題をテストするにはデジタルプロトタイプが一番早いです。製品がエンジニアリングの段階になると、変更にはかなりの時間と費用がかかります。

デジタルプロトタイプのデメリット

• 学習曲線 – プロトタイプを作成する前にソフトウェアを学び、理解する必要があります。しかし、ほとんどのデザインソフトウェアには同じツールが搭載されているため、ソフトウェアの切り替えは比較的簡単です。
• コスト – ローフィデリティからハイフィデリティのプロトタイピングへと移行するにつれ、時間と労力のコストが増加します。

プロトタイプが成功するかどうかは、チームが各ユーザビリティテストでの明確な目的とKPIを示すかどうかにかかっています。適切な計画がなければ、デザイナーは余計な機能やインタラクションを追加してしまう可能性があります。

デジタル・プロトタイプの作成に役立つリソースをいくつかご紹介します。

• A 10-Minute Rapid Prototyping Lesson by Marek Bowers（10分でできるプロトタイプの高速レッスン）

HTMLとJavaScriptのプロトタイピング

まれに、より正確な結果を得るためにHTMLとJavaScriptのプロトタイプを作成することがあります。この方法の欠点は、コーディングにかなりの時間と技術的コストがかかることです。

しかしUXPin Mergeではそのようなことはありません。

デザイナー（および非デザイナー）は、最終製品のような外観と機能を持つ、コードベースのハイフィデリティ・プロトタイプを作成することができます。

例えば、UXPin Mergeでは、チームはGitリポジトリから取り出したReactコンポーネントやStorybookコンポーネントを使用して、完全に機能する高忠実度のプロトタイプを作成することができます。UXPin Mergeではプロトタイプが最終製品のように機能するため、参加者はボタンやドロップダウンの動作を「想像」する必要がありません。

HTMLを組み込んだ低視覚・高機能のプロトタイプ。(画像提供：Mike Hill氏）

HTMLプロトタイピングのメリット

• 最終製品の機能性 – HTMLプロトタイプは、最終製品の正確なモデルを参加者に提供します。
• 最終製品の技術的基盤 – HTMLプロトタイプの構築は、研究者に貴重な研究ツールを提供し、開発者に最終製品を構築するための基盤を提供します。
• プラットフォームにとらわれない – ほぼすべてのOSやデバイスでプロトタイプをテストすることができ、ユーザーは外部のソフトウェアを実行する必要がありません。

HTMLプロトタイピングのデメリット

• デザイナーのスキルレベルに左右される – HTMLプロトタイプは、あなたのコーディング能力に依存します。コード化されていないプロトタイプは、UXデザインとは関係のないユーザビリティの問題を引き起こす可能性があります。
• 創造性の阻害 – 使えるプロトタイプを作るために、コーディングには時間と集中力が必要です。デザイナーは、使い慣れたデザインツールを使うのと同じレベルの革新性や創造性を達成できないかもしれません。

HTMLプロトタイピングに関する参考資料をご紹介します。

• Designing with Code by Andy Fitzgerald（コードでデザイン）
• The Advantage of Rapid Prototyping by ZURB（ラピッドプロトタイピングの利点）
• コードでデザインする【UXPin Merge入門】 – Robert Kirkman

プロトタイピング のプロセス

プロトタイピングに最適なプロセスというものはなく、製品や用途によって異なります。以下に、最も効果的な3つのプロトタイピング・プロセスをご紹介します。

(注：低忠実度から高忠実度に移行する際には、必ずプロトタイプをテストすることをお勧めします。)

紙⇒低忠実度デジタル⇒高忠実度デジタル⇒コード

ほとんどのデザイナーは、紙⇒低忠実度デジタル⇒高忠実度デジタル⇒コードのプロセスでプロトタイピングを行いますが、実はこれは私たちがUXPinをつくった方法でもあります。

チームで協力して多くのアイデアを練り、紙の上でワイヤーフレームをスケッチし、デジタルに落とし込む前にユーザーフローを作成します。ここでUXチームは、クレイジーエイトや「どうしたらいいか」という質問など、一般的なブレーンストーミングの手法を用いて、エンドユーザーの気持ちになって考えます。

低忠実度デジタルプロトタイプ（ワイヤーフレーム）は、デザインプロセスの早い段階で、ナビゲーションや情報アーキテクチャなどの重要な要素をテストします。モックアップに移行する前に、フィードバックをもとにワイヤーフレームを素早く調整することができます。

ナビゲーションや情報アーキテクチャが完成したら、デザイナーは、色やコンテンツ、インタラクション、アニメーションなどを追加して、最終製品に似せたモックアップを作成します。

リサーチャーによるテストが終了したら、UXチームはエンジニアにデザインを引き継ぎ、最終製品を開発します。  

紙⇒低忠実度デジタル⇒コード

低忠実度のプロトタイピングからコードに移行することは、以前からある手法ですが、最近ではほとんど使われていません。高忠実度と比較してみると、低忠実度のプロトタイピングではコストが安い反面、ユーザビリティの問題の多くを捉えることはできません。

Yelpのデザイン変更作業で作成された低忠実度のプロトタイプ。

Yelpのデザイン変更作業で作成された高忠実度のプロトタイプ。

HTML プロトタイピング => コード

一人で開発をしていると、初期のプロトタイピングの方法を省略してすぐにコードに取りかかることがあります。アイデアを出し合う相手がいない中で、開発者がいきなりコードに取り組むのは理にかなっていると言えます。

基本的にプロトタイプは基礎を作り、最終製品へと進化していきます。このプロトタイピングの方法は、効率的なワークフローを持つ熟練した開発者にのみ有効です。

優れたデザインスキルを持つデザイナーでも、このプロトタイピング方法は避けた方がいいかもしれません。低忠実度プロトタイピングと高忠実度プロトタイピングは、コードを構築・編集するよりも圧倒的に速いからです。  

紙⇒UXPin Merge – 高忠実度 プロトタイピング ⇒コード

UXPin Mergeを使用すると、ラピッドプロトタイピングによってUXプロセスを加速できます。コードコンポーネントを使用して完全に機能する高忠実度プロトタイプを作成し、最終製品の実物と同じ状態でユーザビリティテスト参加者に提供します。

UXチームは、上記で説明したような通常のペーパープロトタイピングプロセスにしたがって作業を行います。次に、デザイナーはUXPin Mergeを使用して、すぐに使用できるインタラクティブなコンポーネントをキャンバス上にドラッグ＆ドロップするだけで、忠実度の高いプロトタイプを作成します。

その結果、最終状態を「想像する」必要はなくなり、プロトタイプは最終製品と同じように機能します。UXPin Mergeが提供するコードベースのデザインツールでプロトタイプを作成することは、エンジニアがベクターベースのデザインで作業するよりもはるかに早くプロトタイプを構築できるのです。さらに詳しく知りたい方はこちらのページをご覧ください。

The post プロトタイプ とは？機能的なUXへの道 appeared first on Studio by UXPin.

UXエンジニアは、現代のソフトウェア開発チームにおいて重要な役割を担っており、デザインと開発の間の連携を強化するためのスキルと言語を持ち合わせています。

UXエンジニアは、大抵は部門を超えたチームで働き、デザイナーとエンジニアの間を明確にしてサポートする役割を担っています。UXエンジニアとデザイナーが協力して、デザインのアイデアを機能コードに変換することで、分野間のギャップが埋まり、フロントエンドエンジニアとバックエンドエンジニアは、このコードを基盤として最終製品を開発します。

​​UXPin Mergeにより、デザインと開発の間のギャップを埋めることがこれまでになく簡単になりました。デザイナーの皆さん、コードコンポーネントをUXPinのデザインエディタに同期して、完全に機能するプロトタイプを構築しましょう。無料トライアルにサインアップして、無料の MUI 統合により Merge をお試しください。

UXエンジニアとは？

UXエンジニアは、UIエンジニアまたはUI/UXエンジニアとも呼ばれ、UXデザイナーとUXデベロッパーのハイブリッド的な位置づけになりますが、一般的には、デザイン思考やデザイン原理を理解したフロントエンドのデベロッパーです。

UXエンジニアは、デザインチーム、エンジニアリングチーム、またはその中間で、デザインと開発の橋渡し役として働き、通常は、レイアウト、ボタン、リンク、その他のインタラクティブなコンポーネントなど、UI要素の構築と最適化を行うフロントエンド開発を専門としています。

UXエンジニアは、静的なデザイン要素をインタラクティブなコードコンポーネントに変換する、デザインシステムを扱うことが多いです。

UXエンジニアのスキルセットと業務内容

「UX Engineers: What We Are」内で、UXエンジニアのブライリー・サンドリン氏は、UXエンジニアの職責をグラフィックで表現しています。

UXデザイナーが行う：

• UXリサーチ
• アセット作成・管理
• ワイヤーフレーム作成

UXエンジニアとUXデザイナー両方が行う：

• アイデア出し
• デザインテスト
• 再デザイン

UXエンジニアが行う：

• プロトタイピング
• UIコンポーネント開発
• UIメンテナンス
• スタイリングのアーキテクチャ

UXエンジニアとフロントエンドエンジニア両方が行う：

• 実装
• 技術的実現性
• バックログ管理

フロントエンドエンジニアが行う：

• パフォーマンス
• クエリのアーキテクチャ
• 検索エンジンの最適化

UXエンジニアは、デザインプロセスや原則に関する知識と理解を持ち、フロントエンドのプログラミングの高い能力が備わってなければいけません。ここでは、ソフトウェア開発プロセスにおけるUXエンジニアのスキルや責任について説明します。

UXエンジニア にコードは必要か

はい、UXエンジニアはコーディングの方法を知っておかければならず、最低でもHTML、CSS、Javascriptといった主要なフロントエンドのプログラミング言語についての高い能力が必要です。

フロントエンド開発 – HTML、CSS、Javascript

UXエンジニアの主な業務はフロントエンドの開発であり、他のフロントエンド開発と同様、HTML、CSS、Javascriptに関する高い能力と経験が求められます。

製品によっては、React、Angular、Vueなど、特定のフロントエンドフレームワークの経験を求める企業もあります。

パッケージ管理

プログラミング言語によっては、Node.jsプロジェクトで使用されるNPM（Node Package Manager）やYarnなどのパッケージマネージャの操作法を知っておかなければいけません。

バージョン管理（Git）

フロントエンドの開発は、常に変化し、進化しています。UXエンジニアは、Gitなどのバージョン管理システムを使って、変更と更新を管理し、バージョン管理によって、他のプログラマーと同時にプロジェクトに取り組むこともできます。

デザイン思考

UXエンジニアがデザイナーと連携するには、デザイン思考プロセスの理解が不可欠であり、エンドユーザーへの共感や、UXデザインの原則の理解が必要です。

ユーザーインターフェース（UI）デザインとインタラクションデザイン

UIデザインとインタラクションデザインは、UXエンジニアにとって重要なスキルです。UXエンジニアは、デザイナーと協力してアイデアを出し合い、プロトタイプを機能コードに変換します。UXエンジニアはユーザーインターフェースをデザインしませんが、デザインファイルをコードに変換するため、UIデザインの原則を理解しておかないといけません。

ヒューマンコンピュータインタラクション（HCI）

ヒューマンコンピュータインタラクション（HCI）は、インタラクションデザインと似ていますが、デザインの原則よりもコードに重点を置いており、UXエンジニアの仕事は、デザイナーのプロトタイプを基にした、直感的なフロントエンド体験の構築になります。

デザインシステム

UXエンジニアは、デザイナー、リサーチャー、その他のエンジニアからなる、職域を超えたチームと共にデザインシステムに携わることが多く、デザインファイルから新しいコンポーネントを構築する役割を担っています。

デバッグとテスト

UXエンジニアは、リリース前にフロントエンドのバグを発見して修正する責任を担っていることから、デバッグとテストは、UXエンジニアの重要な作業の一部といえます。又、UXエンジニアは、コードのプロトタイプを作成してデザイナーやエンジニアに提示します。

デザイナーがプロトタイプがデザインと一致していることを確認し、UXエンジニアと一緒に働くデベロッパーがベストプラクティスや命名規則などを確認しながらコードをチェックします。

UXエンジニアは、このようなコードプロトタイプを構築することで、デザインのハンドオフプロセスを効率化し、エンジニアが最終製品を開発するための基盤を構築しています。

ナビゲーションと情報アーキテクチャ

UXエンジニアは、画面、モーダル、ページをつなぐ役割を担っているため、ナビゲーションと情報アーキテクチャを理解しておかなければいけません。

レスポンシブデザイン

レスポンシブデザインは、フロントエンドの開発において非常に重要であり、UXエンジニアは、CSSメディアクエリを使って、モバイル、タブレット、デスクトップなど、複数の画面サイズやデバイスに対応したブレイクポイントの設定が必要です。

ワイヤーフレームとモックアップ

UXエンジニアは必ずしもワイヤーフレームやモックアップを作るわけではありませんが、これらのデザインのコードへの変換が必要です。

UXエンジニアは、上記で挙げた必須スキルとは別に、デザインチームとの連携のために、以下の基本的なデザイン原則を理解しておかなければいけません：

• ビジュアルデザイン
• ユーザビリティテスト
• UXリサーチ
• ユーザージャーニーマップ

UXエンジニアの実際の仕事内容

UXエンジニアの担当は、組織や製品によって異なりますが、通常はデザインプロセスとエンジニアリングプロセスを行き来して仕事をし、4つのステージにUXエンジニアのプロセスが定められます：

1. アイデア出し
2. デザイン
3. 構築
4. テスト

1. アイデア出し

UXエンジニアは、ユーザーリサーチャーやデザイナーと協力して、ユーザビリティの目標の確定や、解決策のブレインストーム、初期デザインの技術的な実現性についての助言をします。

アイデア出しの段階では、ブレインストーミングとアイデアのスケッチが非常に重要であり、UXエンジニアは、アイデアがどう働くかや製品の技術的制約の範囲内であるかどうかについて、技術的なインサイトを提供します。

アイデア出しの段階でUXエンジニアがいれば、デザイナーやリサーチャーはエンジニアリングの能力を超えたソリューションを回避できるため、企業の貴重な時間を節約することができるのです。

2. デザイン

UXエンジニアは、ワイヤーフレームや低忠実度のプロトタイピングからモックアップや高忠実度のプロトタイピングまで、デザインプロセスで積極的な役割を果たし、デザインシステムを使う場合は、デザイナーと協力してUXPinなどのツールでコンポーネントのライブラリをデザインします。

UXエンジニアは、デザイナーのデザインのハンドオフのためのデザインファイル、ドキュメント、プロトタイプの準備をサポートする役割を担っており、デベロッパーに言葉や指示を確実に理解させ、デザイナーとエンジニアのコミュニケーションを円滑にします。

3. 構築

UXエンジニアは、静的なデザインをコードに変換する役割を担っています。役割はレイアウトやUI要素に及び、データ統合、API、パフォーマンス、分析などのその他のフロントエンド開発はエンジニアリングチームに任せます。

UXエンジニアは、開発段階を通じてエンジニアリングチームと協力し、意図したとおりにデザインを実行します。

4. テスト

UXエンジニアは、デザイナーと密接に協力して、デザインプロセスでのアイデアのテストや、ソリューションの開発、エンジニアと協力してコードのバグの特定や修正をします。

UXエンジニア になるには

大手の企業でUXエンジニアとして就職したい場合、通常、コンピュータサイエンス、ヒューマンコンピュータインタラクション（HCI）、またはUXデザインのいずれかの学位が必要とされます。

UXエンジニアになる方法はいくつかあります：

• UXデザイナー：HTML、CSS、Javascriptなどのプログラミング言語と、Git、Chrome Developer Tools、NPM/パッケージマネージャ、コマンドラインなどのフロントエンドスキルの習得が必要
• フロントエンドデベロッパー：フロントエンド開発からの移行が、UXエンジニアになるための最も一般的なルートであり、フロントエンドデベロッパーは、UXエンジニアに必要なほとんどのスキルをすでに持っているが、さらにUXデザインのプロセスや原則の習得が必要
• プロダクトデザイナー：プロダクトデザイナーからUXエンジニアへの道もまた、単純明快であり、プロダクトデザイナーは、デザイン思考を仕事に応用し、ほとんどがプロトタイプを作るための基本的なプログラミングスキルを持つ

UXエンジニアもまた、多様なツールキットを使って仕事をします。デザイナーとデベロッパーの2足のわらじを履いているため、デザインツール、DevOps、デベロッパー用ツールキットを熟知しておかなければいけません。ここでUXエンジニアのツールをチェックしましょう。

UXエンジニアの多くはデザインシステムを扱う職種であるため、高収入のUXエンジニアを目指すのであれば、デザインシステムの知識と経験が不可欠です。

UXエンジニアの給与

Glassdoorによると、2022年の米国におけるUXエンジニアの平均給与は116,625ドルです。

UXPin MergeによるUXエンジニアリングワークフローの最適化

UXPin Mergeで、UXエンジニアがデザイナーやデベロッパーと1つのツールで連携できるようになり、レポジトリからUXPinのデザインエディタにコンポーネントを同期させることにより、デザイナーとエンジニアが同じUI要素で作業できるようになります。

UXエンジニアがプロトタイプをコーディングする代わりに、UXデザイナーはUXPinでコンポーネントをドラッグ＆ドロップして完全に機能するプロトタイプを構築することができます。また、デザイナーはUXPinのプロパティパネルでコンポーネントを編集し、これにより、UXエンジニアがコピー＆ペーストで変更できるようJSXを簡単にレンダリングすることができます。

UXエンジニアがレポジトリに加えた変更は、自動的にUXPinのデザインエディタに同期され、デザイナーは新しいコンポーネントで作業することができます。この信頼できる唯一の情報源（Source of truth）により、UXエンジニアは毎回プロトタイプを一から構築するのではなく、コードにわずかな調整を加えるだけで済み、市場投入までの時間が大幅に短縮されます。

UXPin Mergeでは、デザイナーとエンジニアがすでに同じ言語で会話しているため、デザインのハンドオフが効率的であり、UXエンジニアは、レポジトリからスターターコードを使用してUIを開発した後、フロントエンドおよびバックエンドのデベロッパーに引き継いで最終製品を完成させることができます。UXPin Mergeのリクエストはこちらから。

The post UXエンジニア って具体的にどんな人？ appeared first on Studio by UXPin.

アフィニティ・ダイアグラムは、データ、ユーザーのニーズ、意見、洞察、その他のデータタイプなどの情報をグループ化するためのフレームワークです。

アフィニティ・ダイアグラムは、それぞれのコンセプト、アイデア、思考を小さなメモ用紙に書き出していきます。そして、2つのアイデアの親和性を確認するために、異なるカテゴリーでアイデアをグループ化します。

1960年代に人類学者の川喜田二郎氏によって考案されたダイアグラムは、アイデア創出のための貴重なツールです。デザイン思考の数多くのフェーズで発見された大量の情報を、チームが自然な連想関係に基づいて整理することができます。

アフィニティ・ダイアグラムは、アプリ内のどこに機能やフィールド、オプションを配置すべきかを考える際によく使われます。

UXPinでは、このアフィニティ・ダイアグラムをとても気に入っています。UXPinでは、アウトライン、ドキュメント、ワイヤーフレーム、UI/UXデザイン、Hi-Fiプロトタイプについて、デザインチームとリアルタイムで簡単にコラボレーションすることができます。

アフィニティ・ダイアグラムの例

1. 新しいアイデアのアフィニティ・ダイアグラム 

下の例では、UXチームがコミュニティ・コラボレーションについてブレインストーミングを行っていました。この図から、コミュニティ・コラボレーションが、彼らが議論していたアイデアの1つであることがわかります。コミュニティ・コラボレーションというカテゴリーは、その後、他のサブカテゴリーに細分化されました。「貢献者」「ユーザー」「評価」。

2. 組織親和図法(KJ法) 

下の例では、デザイナーが、お客様のニーズを満たすための最善の方法について、情報を整理しています。この図を一目見ると、ブレインストーミングによる解決策が見えてきます。

提供: Elegant Themes 

3. 色分けされた親和図法  

この例では、デザイナーはアイデアを色分けして整理しています。これは、複数の異なる色の付箋を使ってアイデアを整理するというものです。

統計、アイデア、顧客からのフィードバックに異なる色を選ぶことで、図式化を実行することができます。あるいは、それぞれのクラスターに異なる色のラベルを貼る。サブカテゴリーは、メインカテゴリーとは違う色にしてもいいでしょう。そうすれば、付箋紙を新しいグループに再編成しても、元の編成時の色を維持することができます。

アフィニティ・ダイアグラムの作成が完了したら、次はデザインとプランニングを始めましょう。UXPinは、チームメイトとリアルタイムでデザインしたり、テスターや関係者とプレビューを共有したりできる優れたデザインツールです。

アプリデザインで親和図法を使う理由は？

アプリのデザインには、情報やアイデアの集まりがあります。これらのアイデアに一貫性のあるフレームワークがなければ、チームはコンセンサスを得ることなく時間を浪費してしまうかもしれません。親和図法/アフィニティーマッピングを使用すると、新しい思考パターンを発見し、情報を関係性のあるものに分類してクラスタリングすることで、古いパターンを簡単に壊すことができます。チームは、情報やアイデアのクラスター内のカテゴリーやメタカテゴリーを発見し、そうすることで、どのアイデアがチーム内で共通しているかを見つけることができます。

親和性ダイアグラムを作成する理由はたくさんあります。まず第一に、ウェブやアプリのデザイナーが、ユーザーのニーズが複雑に絡み合ったウェブの中から意味を見出すのに役立ちます。ユーザビリティテスト、インタビュー、チャットなど、顧客からのフィードバックを収集する方法はさまざまあります。しかし、これらすべてのデータをKPIに照らし合わせて測定することは容易ではありません。それを試みるのは難しいことです。アフィニティ・ダイアグラムを使えば、デザイナーは多様なソースからの定性データを実用的なビジュアル・ダイアグラムに効率的に合成することができます。

アフィニティ・ダイアグラムは、”空間飽和とグループ化 “という手法とも呼ばれています。つまり、最初はみんながアイデアを持ってきて、ボードはリサーチとアイデアで “飽和状態 “になります。すべてのデータから意味を見出すためには、空間が飽和しているので、チームは情報をグループ化する必要があります。グループ化のプロセスでは、ビジネスの視点、個々の情報の間に関連性を引き出し、その結果、より深い洞察を得ることができます。これにより、問題点が明確になり、潜在的な解決策を見出すことができます。このようにして、分析から合成へと移行していきます。

アフィニティ・ダイアグラムが活躍する場面とは？

アフィニティ・ダイアグラムは、アプリを作る前に計画するのに役立ちます。アイデアを生み出すのに最適です。アフィニティマップは、設計前の段階で、定性的なユーザーリサーチや顧客からのフィードバックからつながりや意味を見出し、集めたデータを整理するのに役立ちます。

アプリ開発の初期段階では、チームでワークショップを開催し、コラボレーションやアイデアの共有を行います。このワークショップには、マーケティング、UXスペシャリスト、ビジネスアナリスト、法律家など、さまざまな部署のメンバーが参加します。その後、調査と分析の段階に入ります。アプリ開発者は、ユーザーのペルソナを構築し、次期アプリの欠点と利点を明らかにします。この手順は、実地調査、文脈調査、ユーザーインタビューなど様々なデータをマッピングするための一貫したフレームワークがないと、圧倒されてしまいます。

チームは親和図法を使って、大量のデータからカテゴリーやテーマを作ることができます。このマッピングは、データをグループ化し、グループ間のつながりを見つけることで、パターンを見つけ、学んだことを素早く発見するのに役立ちます。

例えば、親和性マップを使えば、次のようなことができます：

• 特定の研究課題に対する答えを見つける
• ブレインストーミングセッションの結果を整理する
• 革新的なソリューションの作成/開発
• プロセスの改善
• 関連するデータやノートのまとめ

アフィニティ・ダイアグラムの背景にある考え方は、全員の声を聞き、対立を避け、似たようなパターンのアイデアが好まれる環境を作ることで、イノベーションのプロセスを簡素化することです。

a) 機能的なアプリとなるように、アプリの運用ワークフローを設計する

アフィニティ・ダイアグラムは優れた手法であり、ステップ・バイ・ステップで進めていくと、調査結果の明確な概要と統合を作成するのに役立ちます。すべてのデータを整理したら、その情報を機能的なアプリに変えることに集中できます。

b) アプリを使いやすくする

UXに関しては、エンドユーザーのニーズを理解することが難しい場合があります。お客様の声を収集するソースが複数あるため、膨大なデータの中から関連性や意味を見出すのは困難です。しかし、アフィニティ・ダイアグラムを使えば、ユーザーから得たデータをマッピングして、ユーザーのニーズ、行動、動機を理解することができます。ユーザーリサーチをマッピングすることで、優れたユーザー体験を提供するために必要なアイデアを処理する方法が得られるのです。

アフィニティ・ダイアグラムのあまり良くない状況とは？

アフィニティ・ダイアグラムでは、チームメンバーがアイデアを付箋やカード、紙に書き留め、壁のチャートやホワイトボード、黒板などに貼り付けます。最終的には、似たようなテーマやパターン、グループに基づいて分類された付箋紙ができあがります。

しかし、この方法は一時的なものであり、メモの一部が落ちてしまったり、誰かに剥がされたりする可能性があるという問題があります（粘着性の高いものを使ったり、オンラインのテンプレートを選んだりしない限り）。また、遠隔地のチームでは使えませんし、その他の多くの状況でも使えません。

物理的にノートを書いてボードに貼るというプロセスは時間がかかります。ほとんどの場合、情報のマッピングを始めるには、研究の最後まで待たなければなりません。

また、親和性図には時と場所があり、複数の関係者の賛同を得られたときに最も効果的であることを覚えておいてください。

アフィニティ・ダイアグラムを作成するための最適なプロセス

1. ブレインストーミングのプロセスでは、ブレインストーミングの目的を明確にします。すなわち、どのような問題を解決しようとしているのか？データ、文書化された事実、アイデア、観察のすべての部分をメモ、カード、または紙片にまとめ、誰もが見える平らな面に貼り付けます。
2. チームの協力関係に基づいて、関連するすべての付箋を関係性に基づいて移動させ、クラスターを作り始めます。時間を節約するために、できるだけチームメンバーを巻き込みましょう。
3. どのカテゴリーにも属さない付箋は、「一旦保留（parking lot）」というカテゴリーを作ります。すでに表現されていると思われる付箋は、捨てないようにしましょう。アイデアの重複は、同じアイデアを持っているメンバーが何人いるかを明らかにするため、問題ありません。
4. コンテンツがクラスター化されたら、クラスターを表すカテゴリーをチームに提案してもらい、提案されたカテゴリーを各列の一番上に書き込んでいきます。このとき、カテゴリーの名前を考えるのに時間をかけすぎないようにします。例えば、「ツール」と「ガジェット」の間に意見の相違がある場合は、両方を記載します。もし、メンバーが大きく異なるカテゴリーを作成した場合は、最も賛同を得られたものを選択します。クラスターに名前をつけることは、テーマを発見するのに重要です。
5. クラスターを重要度の高い順に並べることもできます。例えば、あなたの会社では何を優先していますか？会社の価値観、動機、優先順位を参考にして、ランキングを決めましょう。
6. クラスターの中に線を引いてつながりを持たせることができます。
7. そのつながりから意味を持たせます。例えば、ユーザーのペインポイントなのか、ニーズなのか。取り組まれていないギャップを探す。
8. 似たような情報を特定するのではなく、合成された情報を実践に移すことに集中する。

優れたアフィニティ・ダイアグラムの結果

アフィニティーマッピングは、概念やアイデアの間のつながりを見つけることで、大量のデータセットを統合します。事実、調査、意見などをクラスターに整理することで、複雑な問題の解決策を見つけたり、共通の課題を見つけたりするのに役立ちます。優れたアフィニティーマッピングでは、自然な形で関係性が構築され、実用的な結果に変換することができます。次のようなことに役立ちます：

1. 問題を特定する
2. アイデアの創出
3. 複雑なアイデアをシンプルなソリューションに変換する
4. グループのコンセンサスを得る

アフィニティ・ダイアグラムは共同作業である。良い結果を出すためには、プロセスを適切にまとめるリーダーを任せる必要があります。また、アイデアがあふれないように、時間制限を設けるとよいでしょう。計画を立て、ブレインストームの目標をチームメイトに伝えましょう。そうすれば、生産性とアウトプットを向上させることができます。

アフィニティ・ダイアグラムの目的は、膨大な量のデータをより一貫性のある形式に整理することであることを忘れないでください。最良の結果を得るためには、正確さを優先し、生成されたアイデアの数に制限をかけないようにしましょう。

まとめ

UXPinでは、アフィニティ・ダイアグラムを使って情報共有や合意形成を行っています。UXPinでは、親和性図を使って情報共有や合意形成を行っています。また、親和性図は設計段階やプロジェクト管理の際に記録として残しています。

UXPinに参加すれば、リアルタイムでのコラボレーション、アイデアの共有、実際のデータやインタラクションを使った生き生きとしたプロトタイプの生成が可能になります。

The post アフィニティ・ダイアグラム とは？ appeared first on Studio by UXPin.

顧客とのつながりやプロセスの効率化に役立つデジタル製品を導入する企業が増えるにつれ、デザインオペレーションマネージャーの重要性が高まっています。デザインチームのメンバーが複数のプロジェクトを同時に進めている場合、デザイナーや開発者の管理方法を熟知した人材を導入することは理にかなっています。

比較的新しい職種であるデザインオペレーションマネージャーは、多くの仕事を兼任することが多いです。さらに、職務内容も様々なので、特定のタスクを果たすためにポジションをカスタマイズすることもできます。しかし、どのように定義したとしても、デザインオペレーションマネージャーは製品開発プロセスを改善することができます。

プロジェクトのワークフローを改善する

デジタル製品を成功させるには、時間とお金が必要です。現在では、ほとんどのチームは、コラボレーションによるアジャイルプロジェクトマネジメントが最高の結果を生むと考えています。おそらくそれは正しいでしょう。しかし、成功する製品を効率的に作るためには、どのアプローチが最適なのかを知るには、プロジェクトのガイドラインを見直したり、他のコンセプトを試したりする必要があります。

知識豊富なデザインオペレーションマネージャーは、スクラムやカンバンなどのオプションを検討し、プロジェクトのワークフローを改善できるかどうかを判断することができます。

UXPin Mergeのようなコードベースのデザインツールを使用しているデザイン・開発チームは、独自のワークフローを作成することで最良の結果を得られるかもしれません。例えば、PayPalはデザインとDevOpsを1つのフローに統合したシステムを使用しています。

デザイン業務担当者には、ワークフロー改善の機会を探るように促してください。今はまだ時間がかかるかもしれませんが、その努力は長期的にはチームの時間と労力を節約することになるでしょう。

プロジェクトに特化したスキルを持つ専門家のチームを作る

 デザインオペレーションマネージャー は、プロジェクトの要件を検討し、目標を達成するために必要な特定のスキルを持つ専門家のチームを構築する方法を知っている必要があります。例えば、あなたのチームが作っているのは非常にシンプルな製品なので、必要なのは1人のデザイナーと2、3人の開発者だけかもしれません。しかし、よりインタラクティブで表現力豊かなデジタル製品を作るには、新たな人材が必要になるかもしれません。デザインオペレーションマネージャーは、採用するために応募者を審査する方法を知っている必要があります。

• アニメーション・デザイナー
• プロジェクトマネージャー
• ブランドマネージャー
• アートディレクター
• コンテンツクリエイター
• UI/UXテスター

製品が高度化すればするほど、プロジェクトを完成させるために必要なスキルも増えていきます。デザインオペレーションマネージャーは、適切な人材を確保することができます。

最適な規模のチームを維持することでコストを削減（必要に応じて規模を拡大

あなたのチームは、ユーザーフレンドリーなデザインを作成し、プロトタイプを作成し、市場で通用する製品を作るために協力し合っていますか？

チームの人数が少なすぎると、マイルストーンを達成するのに苦労し、競合他社に追いつくことができません。従業員が多すぎると、潜在的な貢献者がチャレンジ精神に欠け、コストを浪費してしまいます。経験豊富なデザインオペレーションマネージャーは、チームを監査して、メンバーの数が必要かどうかを判断し、製品デザインチームの新しいメンバーの導入を進めることができます。

多くの企業がそうであるように、時折、追加の支援を必要とするプロジェクトがあるでしょう。デザインオペレーションマネージャーは、チームを過剰に拡大するのではなく、信頼できるフリーランスのデザイナーや開発者に連絡を取り、共同作業を支援することで、迅速に規模を拡大することができます。

また、デザインプロセスの拡張を容易にするツールやプロセスを知っている必要があります。例えば、UIパターンを定義し、一貫性を確立し、デザイン作業を容易にするために承認されたアセットへのアクセスを提供するデザインシステムがすでにあれば、チームはより迅速に作業を進めることができます。

 デザインオペレーションマネージャー による品質保証

あなたは、従業員、マネージャー、ステークホルダーにとって魅力的なデジタル製品を作っています。しかし、品質保証のために製品をテストするという特別なステップを踏んでいますか？

品質保証テストの最適な方法は、目的によって異なります。デザインオペレーションプログラムのマネージャーがその目標を明確に把握していれば、ターゲットとなる市場が製品に価値を見出すことができるようにテストを管理することができます。

社内製品の中には、大規模なテストを必要としないものもあります。試作品を数人の同僚に送り、フィードバックを求めるだけでいいかもしれません。

しかし、収益を生み出す市場向けの製品には、綿密なテストが必要です。デザインオペレーションマネージャーは、テストとフィードバックをしてくれるユーザーを募集するかもしれません。A/Bテストでは、あるバージョンのアプリが他のバージョンよりも優れているかどうかという疑問を解決することができます。これを機に、AIをユーザビリティテストに参加させてみてはいかがでしょうか。

買ってもらえなかったり、クレームや悪い評価を受けたりするような商品は出したくない。当たり前のことですが、リスクを伴い、テストされていない製品は、あなたの会社に損害を与えます。製品を改善し、失敗を避けるために、品質保証の方法を知っているデザイン担当者を雇いましょう。

製品をリリースする前に、チームがすべてのタスクを完了していることを確認する

理想的なのは、プロジェクトのタスクが完了したことを示すチェックリストを管理することです。例えば、従業員Aがアプリのナビゲーションをデザインしているとします。従業員Bは、アプリがすべてのデバイスで完璧に見えるようにコードを調整していますので、その仕事が完了したら報告します。

この方法は通常、うまくいきます。しかし、タスクが時間通りに正しい順序で完了するように、誰かがチェックリストを監督しているでしょうか？これはプロジェクトマネージャーが行うことができますが、その人はデザインチームの中でどのアプローチがプロジェクトのタイプに最適かを知っているでしょうか？

ここにもデザインオペレーションマネージャーが介入し、製品開発プロセスを改善するチャンスがあります。タスクを割り当て、完了を監視するためのアプリケーションは数多く存在します。これらのツールを使いこなしている人は、プロジェクトごとに最適なオプションを選ぶことができます。プロジェクトマネージャーは進捗を監視するかもしれませんが、その進捗をどのように測定し、保証するかを決めるには、より広い視野を持った人が必要です。

UXPin Mergeでデザインオペレーションマネージャーの仕事が楽になる

デジタル製品を構築するほとんどすべての設計・開発チームは、デザインオペレーションマネージャーの洞察力から恩恵を受けることができます。

しかし、新しいマネージャーに過度の負担をかけてはいけません。ストレスの多い職場環境は、人間関係を悪化させ、仕事の進展を困難にするでしょう。

UXPin Mergeへのアクセスをリクエストすることで、チャレンジを容易にすることができます。Mergeは、デザインにコードベースのアプローチを取ることで、開発プロセスを合理化します。デザイナーはGitやStorybookのような開発者のライブラリからインポートされたインタラクティブなコンポーネントを使用するので、デザインプロセスの時間が短縮されます。さらに、デザインを開発チームに送る前に、完全に機能するプロトタイプをテストすることができます。

Mergeにアクセスして、デザインオペレーションマネージャーの仕事を容易にし、製品開発プロセスを改善することができます。

The post デザインオペレーションマネージャー は必要ですか？ appeared first on Studio by UXPin.