有用性、持続可能性、実現可能性という概念は、特に HCD（人間中心デザイン）とイノベーションのコンテクストにおいては、デザインプロセスの基礎となり、この概念で、デザインがユーザー中心であるだけでなく、実用的で持続可能であることが保証されます。

デザインツールには、製品をコンセプトからデザインハンドオフまで持っていく機能がありますか？ UXPin は、ライブの React、Storybook、または npm コンポーネントを使って簡単にプロトタイプを作成できる、高度なエンドツーエンドのデザインツールです。このプロトタイプアプローチの活用法をご覧ください。無料相談およびトライアルはこちらから。

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

有用性、持続可能性、実現可能性は、アイデア、コンセプト、仮説をテストし、独自の価値提案（別名、ユニークセリングポイント）があるかどうか、それを追求する価値があるかどうかを判断するためのデザイン思考の方法論です。

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

この方法論を適用することで、デザインコンセプトの弱点を突き止め、さらなるリサーチを行うか、あるいはアイデアを破棄して次に進むことができます。

この方法論の起源

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

IDEO は、最高のアイデアはこの３条件が満たされたときに成功すると認識していました。そして逆に、「偉大なアイデア」は、この３つの基準のうち１つでも欠けると多くの場合はうまくいきません。

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

有用性

デザイナーが最初にチェックしないといけないのは、有用性です。もし製品アイデアに市場価値がなく、誰にもそれが求められなければ売れませんからね。

また、有用性を調べることで、その製品が「ほしい」ものなのか「要る」ものなのかもわかります。例えば：

• 通勤には、徒歩、公共交通機関、自家用車、相乗りなどが必要。
• 通勤には、公共交通機関よりも贅沢な感じがするから車がいい。

「要る」とは、顧客にとってなくてはならないものであり、「ほしい」とは、多くの場合はそのニーズを満たすための、より望ましい選択肢となります。どちらも有用性の条件を満たしていますが、「要る」を満たす製品は、「ほしい」ものや「あればいい」ものよりもはるかに価値があります。

有用性のある製品を見つけるには、以下のように顧客を調査し、満たすことができる問題点（要望とニーズ）を特定しないといけません。

• 製品は問題解決になっているか
• 競合他社には解決策があるか
• もっと良いアイデアがあるか
• そのアイデアのユニークな点はどこであり、なぜ競合他社ではなくそのアイデアが選ばれるのか
• 製品はエンドユーザーにどのような印象を与えるか
• 製品のは、口コミで広がるほどの有用性があるか
• 製品は、一度使ったらそれなしでは生きていけないと思わせるものであるか

有用性を調べる際の目的は、アイデアをストレステストして、修正が必要なギャップを見つけるところにあります。埋めるギャップが多ければ多いほど、製品はより強力になり、ステークホルダーの厳しい質問や顧客満足度にも耐えられるようになります。

有用性の例

デザインにおける有用性の例を以下に挙げてみましょう：

ワークアウトを記録し、フィットネスの目標を達成するためのフィットネスアプリをデザインしているとします。その際、有用性に焦点を当てるには、まずはユーザーの動機やニーズ、感情的なトリガーを把握するところからです。ユーザー調査やインタビューを通して、ターゲットユーザー（多忙な社会人としましょう）は、単にワークアウトの追跡を求めているだけでなく、モチベーションを維持し、フィットネスにやりがいを感じられるアプリを望んでいることがわかるかもしれません。

有用性の実践：

これに対処するために、以下のようにフィットネス体験をゲーム化するような機能をデザインします：

• ３０日間連続ワークアウトの達成など、節目に応じたバッジの獲得。
• フィットネスの目標への到達度を視覚的に表示する、個別化された進捗追跡機能。
• モチベーションを上げるために、友人やワークアウトコミュニティと成果を共有できるソーシャル共有オプション。
• 罪悪感やイライラを与えるのではなく、「今週の目標の半分を達成しました。このまま頑張ってください」といった励ましのプッシュ通知。

このような機能は、モチベーションの維持、達成感、他者との成功の共有など、ユーザーの深いニーズに合致しているため、アプリに有用性がもたらされます。そして単に機能的であるだけでなく、感情的にも魅力的であるため、ユーザーがアプリを定期的に使って体験を楽しむ可能性が高くなります。

有用性を重視することで、アプリが単に基本的なニーズを満たすだけでなく、体験が楽しく、やる気を起こさせ、最終的にユーザーの定着率と満足度を高めることができるのです。

持続可能性

持続可能性は、製品がビジネスとして理にかなっているかどうかを示します。世界で最も魅力的な製品をがあったとしても、それが高すぎたり、採算が合わなかったりすれば、それは良いビジネスモデルとは言えません。

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

例えば１８８６年にコカ・コーラが開発した飲料は、現在でも世界で最も飲まれている飲料のひとつであり、この初期投資は発明者に巨額の富をもたらし、１３５年以上経った今でも株主に驚くべきリターンをもたらしています。

また、持続可能性は、社会や環境への影響、つまりデザインの倫理的側面にも関係します。あなたのデジタル製品は社会にプラスの利益をもたらしますか？例えば２０２１年、Facebook の内部告発者であるフランシス・ホーゲン氏は、SNS 大手の内部調査で、Instagram が１０代の少女に不安、うつ病、自殺願望を引き起こしていることが判明したことを示す文書を公開しました。

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

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

なので、持続可能性を検討するのに、ビジネス、顧客、そして社会に価値を提供しないといけません。その際に検討したい質問としては以下が挙げられます：

• このデザインが機能するには、何が真実である必要があるか
• そのデザインを機能する製品にするには、何がかかるのか
• 新しい製品や機能を構築するための設備投資はあるか
• 価格モデルは？そのビジネスは利益を上げられるのか
• 投資に見合うリターンが得られるのにどれくらいの期間がかかるのか
• その製品は継続可能か
• その製品は社会にどのような影響をもたらすか

有用性と同様に、持続可能性も、アイデアの調査や分析、ストレステストを行い、持続可能で継続可能であることを確認する必要があります。

持続可能性の例

同じフィットネスアプリの例で、そのデザインがビジネスを支え、財政的に継続可能であるかという持続可能性に焦点を当ててみましょう。

持続可能性の実践

ユーザーを惹きつける機能を備えた魅力的なアプリを既に作成しましたが、今度はアプリが収益を生み出し、長期的なビジネス目標に沿うようにする必要があります。持続可能性に対処するため、ユーザー満足度とビジネスニーズのバランスを取る収益化戦略を備えたフリーミアムモデルを導入することにしました。

以下のようにアプローチしていきます：

• 無料のベーシック層： このアプリは、ワークアウトの追跡に非常に重要な機能を無料で提供し、幅広いユーザー層を惹きつけている。この階層には、ユーザーがアプリから価値を得て、定期的に使い始めるのに十分な機能が提供されている。
• プレミアムサブスクリプション： 収益を上げるために、追加機能をが使えるようになるプレミアムサブスクリプションを導入する。追加機能には以下のようなものが挙げられる：
  • 高度なフィットネス分析と個別化されたワークアウトプラン。
  • エキスパートトレーナーによるビデオチュートリアルなどの限定コンテンツ。
  • 新機能やチャレンジへの早期アクセス。
  • 広告のない体験。
• アプリ内購入： カスタマイズしたワークアウトプランや栄養ガイドを１回限りの購入として販売するのが、もうひとつの有効な収益源になる。これにより、ユーザーは定期購読を申し込むことなく特定のコンテンツを購入することができ、さまざまなユーザーの好みに応えることができる。
• ブランドパートナーシップとスポンサーコンテンツ： ビジネスの持続可能性をさらにサポートするのに、フィットネスブランドとのパートナーシップを確立する。そのブランドは、アプリ内の特定のチャレンジのスポンサーになったり、フィットネス用品やサプリメントの限定割引をユーザーに提供したりすることができ、それによって、UX（ユーザーエクスペリエンス）が損なわれることなく、さらなる収益を得ることができる。
• コスト効率の良いスケーリング： バックエンドでは、チームと協力してアプリのインフラが確実にスケーラブル、つまり、莫大なコストをかけずにユーザーベースに合わせて拡張できるようにする。その際、コスト効率の高い価格設定モデルのクラウドサービスを使ったり、アプリを最適化して使うリソースを減らしたりする場合もある。

これが持続可能性を支える理由：

• プレミアム層は継続的な収益を生み出し、これは長期的な継続性にとって極めて重要である。
• アプリ内購入で、ユーザーは柔軟な選択肢を得られることから、二次的な収入源の開拓になる。
• スポンサーコンテンツやパートナーシップは、ユーザーのフィットネスへの関心に沿いつつ（押し付けがましくなく）、追加収入をもたらす。
• フリーミアムモデルは、多くのユーザーを確保し、それが成長と維持につながり、潜在的な投資家やパートナーにとってアプリが魅力的なものになる。

このような要素を考慮することで、アプリが市場で生き残るだけでなく、繁栄することが保証され、ビジネスの観点からも持続可能になり、ユーザーに価値を提供し続けることができるようになるのです。

実現可能性

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

実現可能な要因としては、以下のようなものが挙げられます：

• 技術的制約
• 財務的制約
• 製品のブランディング、マーケティング、カスタマーサポート、その他の事業分野への影響
• 市場投入までの推定時間
• 操作能力

理想としては、利用可能なリソースを使って、会社の現在の能力の範囲内で新製品や新機能をデザインしたいところです。新しい製品をサポートするのにインフラストラクチャを構築する必要がある場合は、リスクやコストが上がりますからね。

新製品や新機能をデザインする際に考慮したい実現可能性に関する質問を以下に挙げてみましょう：

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

実現可能性の例

フィットネス アプリの例を続けて、実現可能性を検討し、利用可能なリソース、テクノロジー、チームの能力で実際にアプリの構築や維持ができるかどうかを確認しましょう。

実現可能性の実践

フリーミアム モデル、プレミアム機能、アプリ内購入が可能な、魅力的で実現可能なアプリをデザインしましたが、次に進む前に、その機能を現在のリソースで実装することが技術的に可能であることを確認する必要があります。

• 開発チームのスキルを評価する： チームの能力を見直す。デベロッパーはモバイルアプリの構築に長けているが、デザインされたゲーム化機能（バッジや実績など）には、ユーザーの進捗をリアルタイムで追跡するための、より高度なバックエンドシステムが必要。それを実現可能にするのに、以下のような決定をする可能性がある：
  • １０回のトレーニング完了などの簡単なルールに基づいて付与される基本的なバッジから始め、時間をかけて段階的に高度な機能を追加する。
  • ゼロから構築するのではなく、ゲーミフィケーションツールを提供する既存のサードパーティサービスを利用して、時間とリソースを節約する。
• すぐに利用できるテクノロジーを使う： AI ベースのおすすめワークアウトエンジンをカスタム開発する代わりに（これは有用だが複雑）、AWS や Google Cloud などの信頼できるプロバイダーの機械学習 API を使うことにする。これにより、より少ない開発労力で基本的な個別化されたオススメを実装することができ、現在の技術スタック内で実現可能な機能となる。
• プラットフォームの制限に最適化する： チームは、アプリが iOS と Android の両方でスムーズに動作することを保証する必要がある。２つのアプリを別々に開発するには多くのリソースが必要になるため、React Native のようなクロスプラットフォームフレームワークを選択する。これにより、単一のコードベースを使ってどっちのプラットフォームでも起動できるようになり、時間の節約とメンテナンスコストの削減につながる。
• インフラとスケーリング： プレミアムサブスクリプションモデルでは、個々のユーザー アカウント、支払い、プレミアム コンテンツへのアクセスの追跡ができる。開始時にこれを実現するには、カスタム支払いシステムを一から構築するのではなく、Stripe や Paddle などの信頼できるサブスクリプション管理サービス と統合することが推奨される。さらに、スケーラブルなストレージとサーバーのニーズに対応するために、 AWS や Google Cloud などのクラウド サービスの使用を検討することによって、独自のサーバーを管理することなく、ユーザーの増加に対応できる。
• MVP（実用最小限の製品）アプローチ： バッジ、カスタム ワークアウト プラン、ソーシャル共有など、すべての機能を一度に構築するのは、現在のスケジュールと予算では実現不可能であることがわかったことから、主要なワークアウト追跡機能とシンプルなバッジなどのアプリの MVP バージョンをリリースする計画を立てる。高度な分析やソーシャル共有などのその他の機能は、アプリが普及してリソースがさらに開発できるようになったら、後のバージョンで導入される。

これが実現可能性をサポートする理由

• サードパーティのツールや API を活用することで、開発時間と複雑さが軽減され、プロジェクトが管理しやすくなる。
• React Native を使えば、iOS と Android を１つの開発チームで構築できるため、時間とコストの大幅な節約になる。
• Stripe のようなサブスクリプション管理サービスを利用すれば、複雑なシステムを社内で構築しなくても、支払いやユーザーアカウント管理が簡単になる。
• MVPアプローチに重点を置くことで、確実にアプリを段階的にリリースすることができ、それでチームは一度に多くの機能に圧倒されることなく、主要なアイデアを検証して製品を改良することができる。

このアプローチでは、チームのスキル、利用可能なテクノロジー、開発時間を考慮することで、与えられた制約内でフィットネス アプリを構築し、それで実現可能になるのです。

デザインレビューにおける有用性、持続可能性、実現可能性の活用

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

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

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

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

ステークホルダーが読みやすく把握しやすいように、デザインレビューを提示する際に使える構成やテンプレートを以下で見てみましょう。

• 問題点：問題点を簡潔に述べる。デザインチームとビジネスチームに、この土台からの共通認識が築かれる。
• システム（現状）： （既存の製品であれば）問題のコンテクストが理解しやすくなるよう、現在のシステムがどのように機能しているかを示す。そうすると、後に、提案する経験によってシステムがどのように機能するかを示すことができる。
• JBTD（The Jobs To Be Done：やるべき仕事）：デザインレビューでは、何で顧客のモチベーションが上がるかを共有することが重要である。トニー・ウルウィック氏によると、JBTD は「市場、顧客、ユーザーのニーズ、競合他社、顧客セグメントを異なる視点で観察し、そうすることでイノベーションをはるかに予測可能で収益性の高いものにできるレンズ」と定義される。このレンズで、ステークホルダーは顧客がどのようにソリューションを「採用」するか「却下」するかを理解することができる。
• ビジネスの目的： この顧客の問題を解決するためのビジネス価値と ROI を述べる。
• 重要なメトリクス： 測らないものの改善はできないので、メトリクスによって、新しい製品のデザインを通して生み出されるビジネス価値と顧客価値を定量化できるようになるべき。
• 提案された体験：提案を一文でまとめる。その際、確実に明確でわかりやすいものにする。そしてこの提案で、関係者はこれが以前に説明した問題とどのように関連しているかを理解する必要がある。
• その提案が及ぼす影響：その提案はビジネスの他の部分にどのような影響を与えるかがわからない場合がある。製品デザインのプロセスの早い段階でこれを理解するのは、有用性、持続可能性、実現可能性のバランスをとるのに極めて重要。
• 基本的なエクスペリエンスデザイン： ステークホルダーが、顧客が製品をどのように好ましいと感じるかを視覚化できるように、ワイヤーフレーム、モックアップ、プロトタイプ、または MVP（最小実行可能製品）を提示する。

• デザインに反映されたインサイト：このデザインを選んだ理由は何か？ インサイトや仮説などは何だったか？など、箇条書きで思考の深さを示す。
• 新しいデザインについての仮説： 
  • 新しいデザインに関する仮説は何か
  • どのようにしてこの仮説にたどり着いたか
  • この仮説を重要だと考えるメトリクスとどのように整合させることができるか

これらは明確でテスト可能であるべき。明確な合否の基準でテストを実施することで、これらの仮説によって、進行中の漸進的な進捗を測るための強力な基盤も得られるはずである。

• チームの共同作業：なぜ全員がこの部屋にいるのか？ステークホルダーからどのような意見が必要なのか？デザインレビュー テンプレートのこのセクションで、製品の成功に責任を負うステークホルダーに対して明確なコンテキストと焦点を設定することができる。

UXPin Merge を使うと、ビルトインコンポーネントライブラリを使って、忠実度の高いプロトタイプや MVP をサッと作成し、デザインレビュー時にステークホルダーに提示することができます。これにより、市場投入までの時間が短縮され、高品質の製品をより早くリリースできるようになります。無料相談およびトライアルはこちらから。

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

インタラクションデザインは、製品のインターフェースがユーザーの行動に反応し、人間とコンピューターの相互作用を支援することで、UXデザインにおいて重要な役割を果たします。

主なポイント：

• インタラクションデザインは、ユーザーとデジタル製品、システム、インターフェイスとの相互作用に焦点を当てた学際的なデザイン分野である。
• ユーザーがどのように製品に関わり、体験するかをデザインし、そのインタラクションを直感的で効率的なものにすることを目的としている。
• 「IxD」とよく略される。

インタラクションデザインはUXデザインプロセスで特に難しい段階のひとつですが、UXPinのコードベースデザインツールにより、忠実でインタラクティブなプロトタイプを構築することで、この課題を軽減できます。無料相談およびトライアルはこちらから。

インタラクションデザインとは

インタラクションデザインとは、HCI（人間対コンピュータのインターフェース）を人間らしく感じさせるプロセスです。インタラクティブなデジタル製品で、エンドユーザーにフィードバックを与えられることによって、この「人間的」なつながりが作り出されます。そしてそのフィードバックは、スクロールによって誘発されるアニメーション、ボタンのクリック状態、別のページへの遷移などを通じて行われます。

インタラクションデザインはよく「IxD」と略され、トランジション、マイクロインタラクション、アニメーションなどの適切なインタラクティブ要素を使いますが、テキスト、色、ビジュアル、レイアウトもユーザーの感情や行動にも影響を与え、それによって、適切な反応を引き出すために戦略的にインタラクションをデザインできるようになります。

インタラクションデザインをうまく活用することで、以下のようなポジティブなユーザー体験がもたらされます：

• 製品満足度の向上
• ユーザビリティの深い理解
• より速い学習性
• より深い個人的なつながり
• 繰り返し使用される可能性が高まる

HCI におけるインタラクションデザイン

HCI（Human-Computer Interaction：ヒューマンコンピュータインタラクションの略）におけるインタラクションデザインとは、ボタン、メニュー、その他のインターフェースコンポーネントなどの製品のインタラクティブな要素を、直感的で使いやすく、ユーザーの操作に応答し、ユーザーとシステム間のコミュニケーションが円滑になるようにデザインすることです。

インタラクションデザインは、テクノロジーとのシームレスなインタラクションを促進する魅力的なユーザー体験を作ることが目標であり、それにはユーザーのニーズ、行動、期待を理解し、機能的であるだけでなく、使っていて楽しいインターフェースをデザインすることが含まれます。

また、HCI におけるインタラクションデザインは、ユーザーがテクノロジーとどのように相互作用するかに焦点を当てることで、ユーザビリティ、アクセシビリティ、総合的な満足度を高めることを目的としています。

インタラクションデザインと UI デザイン

インタラクションデザインは、例えば「ユーザーがある要素をタップしたときに何が起こるか」などのアニメーション、マイクロインタラクション、トランジション、検索、その他のモーションベースのデザインなど、人間とコンピュータのインタラクションに焦点を当てています。

対する UI デザインは、UI がどのように見えるかを決める色、フォント、図像、レイアウトなどのビジュアルデザインと見た目の美しさに重点が置かれています。

つまり、以下のようになります：

• インタラクションデザインは相互作用と動きに関するもの
• UI デザインはビジュアルデザインと見た目に関するもの

これは多くの場合は、中小企業やスタートアップ企業では UI デザイナーが両方を担うい、大企業では別々です。デジタル製品デザインでは何でもそうですが、役割と責任が相乗効果を生むことがあり、すべては企業、製品、組織構造によりけりです。

インタラクションデザインと UX デザイン

インタラクションデザインは、UX デザインの中でも専門的な分野であり、UX がユーザーエクスペリエンス全体と、すべてがどのように結びついているかに注目するのに対し、インタラクションデザイナーはユーザーのインタラクションとモーションに焦点を当てます。

UX デザイナーは、デザイン思考、HCD（人間中心デザイン）、ユーザーリサーチといった UX の基礎を応用して意思決定を行い、ユーザーのタスクやアクション、環境に特を気にかけます。対するインタラクションデザイナーは、デジタル製品がユーザーのアクションに適切に反応することに重点を置き、ユーザーがボタンをクリックしたとき、検索バーにフレーズを入力したとき、画像にカーソルを合わせたときに何が起こるかを考えがちです。

インタラクションデザインの原則とは

ドン・ノーマン氏（ニールセン・ノーマン・グループの共同創設者）の著書『The Design of Everyday Things』から、お気に入りの「IxD 原則」をピックアップしてみました。

可視性

多くの機能と限られたスペースの中で、可視性を優先させるのはデザイン上の重要な課題であり、ドン・ノーマン氏の理論によると、何かが目に見えるほど、ユーザーがそれを見て操作する可能性が高くなります。なのでインタラクションデザイナーは、ユーザーのニーズとビジネス目標に基づいて、可視性の優先順位のバランスを取らないといけません。

可視性の典型的な例として、モバイル端末でのナビゲーションリンクの優先順位付けが挙げられます。アプリバーから表示されるリンクは何であり、デザイナーはハンバーガーメニューの背後にあるナビゲーションドロワーに何を配置するのでしょうか。

フィードバック

フィードバックとは、デジタル製品やシステムがユーザーとどのようにコミュニケーションをとるかということであり、インタラクションデザイナーには、動きやアニメーション、触覚、音声、コピーなど、このフィードバックを表現するための方法があります。

また、アクセシビリティや、製品がどのようにあらゆる種類のユーザーや支援技術にフィードバックを伝えるかついても考えないといけません。

制約条件

可能性が多すぎる乱雑な UI だと、ユーザーは戸惑い、ユーザビリティの問題が生じますが、いいインタラクションデザインだと、ユーザーの行動を制限（制約）して、製品を通じてユーザーをより効率的に導きます。

このような制約は、ランディングページで最もよく見られます。デザイナーは、ナビゲーションやリンクなど、ユーザーがページ外に誘導されてしまいそうなものをすべて取り除き、目立つボタンの CTA やフォームだけを残します。それでユーザーは、１つのアクションに絞られることでコンバージョンにつながるコンテンツに集中できるようになるというわけです。

マッピング

インタラクションデザイナーは、デジタル製品における操作とその効果の間に明確な関係を作り出さないといけません。つまり、その関係を、ユーザーにとって自然に感じられるようにマッピングするということです。

たとえば、iPhone の上のボタンで音量が上がり、下のボタンで下がります。この直感的なレイアウトだと、ユーザーはどのボタンがどのアクションを実行するかを考える必要がありません。

製品が直感的でわかりやすいほど、より簡単で楽しい体験になるのです。

一貫性

インタラクションや UI デザインには一貫性が不可欠であり、一貫性がないとユーザーは戸惑い、ユーザビリティの問題が起こります。なのでデザイナーは、一貫性のある UI やインタラクションをデザインするだけでなく、さまざまな画面サイズやデバイスにおける一貫性も考慮しないといけません。

多くの組織は、承認された UI パターンやインタラクションとの一貫性を上げるのに、デザインシステムを構築したり、オープンソースのコンポーネントライブラリを採り入れたりしていますが、デザイナーはこのような選択について考える必要がなくなれば、UX に集中できるようになり、ユーザーが望ましい結果を達成できるよう適切なパターンを適用することができます。

アフォーダンス（インタラクションの可能性）

アフォーダンスは、ユーザーに何かの使用方法やアクションの実行方法を伝えるものであり、UI 要素を使ってタスクを完了する方法が、ユーザーにとって明白であることを保証するのがインタラクションデザイナーの仕事です。

例えば、送信ボタンの無効状態で、ユーザーは送信する前にフォームの必須項目を入力しないといけないことがわかります。また、リンクにさまざまな色と下線を使うことで、ユーザーはどのテキストをクリックできるかがわかります。

認知

インタラクション デザイナーは、UX デザインにおける認知心理学（注意と知覚、記憶、問題解決、創造的思考）の基礎を理解しておかないといけません。そしてこれは、この精神プロセスに過負荷をかけない製品と体験をデザインすることを目的としています。

認知は、以下などのデザイン心理学の原則を扱っています：

• ゲシュタルトの原理：人間の脳がどのように視覚を認識し、馴染みのある構造を作り出すか。
• フォン・レストルフ効果：物体の集団の中で、異なるものが目立つ、あるいは最も記憶に残りやすいという予測。
• ヒックの法則：相手に選択肢を与えれば与えるほど、決断に時間がかかる。
• 最小努力の原則：利用者は最小限のエネルギーで済む選択や行動をとる。
• 直列的位置づけ効果：人間は、リスト、文章、またはコンテンツの最初の項目（初頭効果）と最後の項目（新近効果）を最もよく覚えている傾向がある。
• 永続的な習慣の原則：人は馴染みのあるルーティンや習慣に依存する ‐ だからこそ、ユニバーサルデザインパターンを使うことが重要。
• 感情伝染の原理: 人間は、動物やアニメーションなどの他人の感情や行動の模倣や共感をする。なので、デザイナーは気持ちや感情を強調するのに顔（絵文字も含む）を使う。
• フィッツの法則：目標地点まで移動するのに要する時間は、その距離と目標の大きさの関数である。

以下の２記事では、認知について深く掘り下げられています： 

• 優れたUXデザインを生み出す心理的トリック
• A UX Designer’s Guide to Improving Speed of Use（UXデザイナーによる利用スピード向上のためのガイド）

これらの原則は、すべての UX 分野に適用されます。

インタラクションデザインチェックリスト

米国政府の Technology Transformation Services（技術変革サービス）の Web サイトである usability.gov から、有用なインタラクションデザインチェックリストを見つけました。このチェックリストには、インタラクションをデザインする際に考慮すべき質問が含まれています。

• ユーザーがインターフェースと対話する方法を定める：クリック/タップ、プッシュ、スワイプ、ドラッグ＆ドロップ、キーボードコントロールなど。
• ユーザーが行動を起こす前に、行動に関するヒントを提供する：正しいラベル付け、リンクの色の違い、クリック可能なUI要素の一貫性の使用など。
• エラーを予測して軽減する：エラーを防ぐと同時に、問題を修正するために役立つメッセージをどのように提供するか。
• システムのフィードバックとレスポンスタイムを考慮する：ユーザーがアクションを完了した後に何が起こり、フィードバックはどのくらいで表示されるのか。
• 各要素について戦略的に考える：適切な要素／パターンを選択したか、エラーを避けるためにクリック可能な要素の間に十分なスペースがあるか、先述のデザイン心理学の原則に従っているかなど、すべての決定をユーザーの視点から精査する。
• 習得しやすいようにシンプルにする：UI やタスクをできるだけシンプルにし、馴染みのあるパターンを使い、認知力を消耗するタスクや機能を最小限に抑えることで、ユーザー体験をシンプルにする。

また、アーロン・レガスピ氏とアミット・ジャクー氏による IxD チェックリストもチェックしてみてください。

インタラクションデザインのリソース

• Interaction Design Association（インタラクションデザイン協会）
• Interaction Design Foundation（インタラクションデザイン財団）
• 50 Best Interaction Design Programs（インタラクションデザインプログラム ベスト５０）

インタラクションデザイナーの仕事

インタラクションデザイナーの役割は、ユーザーが製品、特に Web サイト、アプリ、ソフトウェアインターフェースのようなデジタル製品とどのようにインタラクションするかということに焦点が当てられ、そういったインタラクションが直感的で、シームレスで、楽しいものであることを保証することを担っています。

インタラクションデザイナーの仕事の内訳は以下のようになります：

１．ユーザーのニーズを理解する

インタラクティブデザイナーは、誰がユーザーで、何が必要なのかをリサーチすることに多くの時間を費やします。これには、ユーザーリサーチ、インタビュー、データ分析などの実施や、ユーザーが直面している問題と、製品がそれをどのように解決できるかの把握などが含まれます。このようなニーズを理解するのは、ユーザーにとって意味のあるインタラクションをデザインする上で非常に重要です。

２．ユーザーフローの作成

インタラクションデザイナーは、ユーザーに何が必要なのかがわかったら、例えば EC アプリの場合だと、カートに商品を追加し、チェックアウトプロセスを経て、確認を受け取るまでといったようなユーザーフローをデザインします。これは、そういったステップを可能な限り簡単かつ効率的にすることを目標としています。

３．インタラクティブな要素をデザインする

ここは、クリック、タップ、スワイプなど、すべてのインタラクティブな要素である、ボタン、ナビゲーション、フォームに焦点を当てるところであり、デザイナーはこのような要素を、わかりやすく、機能的で、アクセスしやすいようにデザインします。そして彼らは「このボタンは目立つだろうか？ユーザーはクリックすると何が起こるか分かるだろうか？」といったことを常に考えています。

４．試作とテスト

インタラクティブデザイナーは、プロトタイプ（製品の初期モデル）を作り、実際にそれがどのように使われるかをテストします。この段階は、仮定のテストに関するものであり、ユーザーやステークホルダーからのフィードバックを集め、何がうまくいっていて、何がうまくいっていないかを確認し、それに基づいてデザインを改良していきます。

５．他のチームと連携する

インタラクティブデザイナーは、UX デザイナー、デベロッパー、プロダクトマネージャーと密接に協力し、デザインが実現可能で、ビジネス目標に沿ったものであることを確認します。その際デベロッパーは、インタラクションがどのように機能すべきか（ボタンにカーソルを合わせるとどうなるかなど）を正確に知る必要があります。

６．一貫性を確保する

彼らの役割の大部分は、製品全体で確実にデザインが一貫しているようにすることです。それでユーザーは、さまざまなセクションを移動するときに、慣れ親しんだ感覚を持つはずです。つまり、同じようなタスクやインタラクションに対しては、同じデザインパターンにこだわるということです。

７．ユーザーニーズとビジネスニーズのバランス

インタラクティブデザイナーは主にユーザー体験に焦点を当てますが、デザインをビジネスの目的に合わせる必要もあります。例えば、登録者数を増やすことが目的であれば、ユーザーが押し付けがましく感じたり、ページを巡るのを妨げられたりすることなく、登録ページに誘導されるようなインタラクションをデザインするかもしれません。

８．最新情報の入手

あと、インタラクションデザイナーは、デザインのトレンド、ツール、ベストプラクティスを常に把握しています。インタラクションデザインは急速に進化するため、製品の競争力とユーザーに対する使いやすさの維持には、常に先を行くことが重要です。

つまり、その製品が見た目だけでなく、ユーザーにとって簡単で満足のいく方法で機能することを保証するために彼らはここにいるのであり、ユーザーと製品とのインタラクションを改善することに常に焦点を当てているのです。

UXPin – 究極のインタラクションデザインツール

従来の画像ベースのデザインツールでは忠実さや機能性が不足し、インタラクションデザイナーは複数のフレームを作成する手間がかかりますが、UXPinのコードベースデザインツールを使えば、少ない労力でより優れた結果を得られます。

以下でその方法を見てみましょう：

ステート

UXPin では、１つのコンポーネントに対して複数のステートを作成できます。例えば、デフォルト状態、ホバー状態、アクティブ状態、無効状態のボタンを作成し、それぞれに個別のプロパティとトリガーを設定することができます。

UXPin の ステートでは、カルーセル、アコーディオンメニュー、マルチレベル・ドロップダウンメニューなど、より複雑な UI パターンを１つのフレームで作成することもでき、その UI パターンはコードのように動作するため、インタラクションデザイナーはテスト中に正確な結果とフィードバックを得ることができます。

インタラクション

UXPin のインタラクションがあれば、デザイナーは画像ベースのデザインツールの能力をはるかに超えた、没入感のあるコードのような体験を構築できます。また、UXPin にはトリガー、アクション、アニメーションが幅広く備わっており、完全に機能するアニメーションプロトタイプを作成できます。

また、条件付きインタラクションで、デザイナーは Javascript のような 「if-then 」や 「if-else 」の条件を使って、プロトタイプをさらに一歩進め、ダイナミックなユーザー体験を作り出すことができます。

Variables（変数）

UXPinでは、フォームフィールドは最終製品のように見えて機能します。そして Variables（変数）により、デザイナーは、例えば「オンボーディングフォームを完了した後に、個別化されたウェルカムメッセージを表示する」など、ユーザーの入力を取得してそのデータをプロトタイプの別の場所で使うことができます。

Expression

UXPin の Expression で、フォーム検証や計算コンポーネント（ショッピング カートの更新）などのコードのような機能によって、プロトタイプが新たなレベルに上がります。

この強力な機能により、インタラクションデザイナーはコードを学んだりエンジニアに頼ることなく、機能するプロトタイプを作成できます。

UXPin を使うことで、デザイナーは構築、テスト、反復をより速やかに行うことができ、大幅に優れた結果を得ることができます。無料相談およびトライアルはこちらから。

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.

UXデザイナーがデザイン以外のチームやステークホルダーに、ユーザー中心のソリューションとUXの重要性について教育しようとするにつれて、デザイン提唱は過去10年間で人気が高まっています。

デザインの提唱者には、さまざまな形態があり、組織全体にリプルを広げてユーザー中心の価値観へと思考を転換させることを目標としています。

UXPinのコードベースデザインで製品のUXを向上させませんか？最終製品を正確に再現する忠実度の高いプロトタイプを作成し、ユーザビリティテストやステークホルダーからの有意義なフィードバックを得ることができます。ぜひ無料トライアルにごサインアップしてUXPinがあなたのUXデザインプロセスにどのような革命をもたらすかご覧ください。

UXデザイン提唱者とは

デザイン提唱者とは、デザインの関心、ユーザー中心のデザインアイデア、デザイン思考を促しながら、UX（ユーザーエクスペリエンス）についてデザイン以外のチームやステークホルダーを教育し、連携することに専念するUX専門家のことです。

デザイン提唱者は通常、デザインチーム、ステークホルダー、および他の部門とデザイン関連事項での共同作用における内輪向きの役割になります。

• デザインチームでは、主に組織のデザインバリューを浸透させ、企業文化の構築のために活動する
• ステークホルダーや非デザイナーに対して、デザインの価値を示し、連携の機会を探っている

場合によっては、デザイン提唱者は、オンラインフォーラムやライブイベントを通じてエンドユーザーと外部でつながることもあり、彼らが社内で働くか社外で働くかは、製品や組織によって異なります。

提唱と説得の違い

提唱とは、デザインの利益のために立ち上がってテーブルにつくことであり、一方、説得とは、自分のように考えたり行動するよう人々を説得しようとすることです。

デザイン提唱者とは、人々にデザインの実践を強制することではなく、仕事の中にデザイン思考や原則を取り入れることです。目標は、デザイン以外のチームメンバーやステークホルダーに立ち止まってもらい、”この決定は「我々の利益」と「顧客」のためになるか？”と考えてもらうことです。

UXデザイン提唱 が重要な理由

多くのステークホルダーや非デザインチームはUXを理解しておらず、UXは見た目の美しさだけを追求するものだと考えています。これは些細なことに思えるかもしれませんが、デザインプロジェクトに悪影響を及ぼし、”デザインの失敗 “と認識される結果になりかねないのです。

例えば、ステークホルダーがデザイナーにビジネス上の利益のためにコンテンツとCTA（Call To Action）を優先するように指示するアプリを構築しているとします。ところが、ユーザー調査やテストの結果は、顧客は違うコンテンツや機能を優先すると出ています。

直感的に操作できなかったり、必要なものを見つけるのにメニューやサブメニューに移動しなければならず、その結果、単純な作業なのに必要以上に時間がかかってしまうようになり、ユーザーは製品に不満を感じるようになります。そうなると、以下のようなことが結果として起こる可能性があるのです：

• 顧客が製品を使わなくなり、競合他社に乗り換える
• 顧客問い合わせの増加
• コンバージョン数および売上高の減少
• 否定的なレビューがブランドの評判に傷をつける

このような問題は組織に悪影響を及ぼし、ステークホルダーはUXを責め立てます。本当の問題は、ユーザーリサーチやユーザー中心のデザインよりも、ビジネスの目標や前提を優先させることだったのです。

ステークホルダーは必ずしも悪くないのですが、UXに対する基本的な理解が欠けています。そこでデザイン提唱者の出番です。

デザイン提唱 の例

今回は、PayPalとGMの2つの企業組織におけるデザイン提唱の事例を紹介します。

PayPalにおけるUXの提唱

PayPalのUX Lead EPXであるエリカ・ライダー氏は、デザインバリュー会議2020の講演で、いかにUXの原則を製品やエンジニアリングチームに提唱し、UXだけでなく全員がユーザー体験に責任を負うようにしているかを語っています。

彼女は、製品開発プロセスにおける制御と責任の大きな不均衡を以下のように実感しました：

• UXデザイナーは、ユーザーに提供されたUXについて担うコントロールは0なのに責任は100％を負う
• エンジニアは、ユーザーに提供されたUXに対して負う責任は0なのに、コントロールは100％担う。

エリカは、責任を負うべきは提供するチームであると信じており、エンジニアがUXを理解できるように教育し、専用のウィザードでその成功を測定することに取り組んでいます。

デザインとUXの原則を提唱することで、彼女はユーザーへの製品提供を改善すべく、エンジニアリング担当者との中間点を見出したのです。

エリカのアプローチについては、デザインバリュー会議での30分間の講演「DesignOps 2.0 – Scaling Design」をご覧ください。

デザインの提唱 に一番いい方法

ここでは、パートナーシップから、デザイン活動へのステークホルダーの参加、さらには新しいデザイン手法の導入まで、組織全体でデザインを提唱する方法をいくつかご紹介します。

1. 部門を超えた連携

連携は、デザイン提唱を成功させる鍵の1つです。デザイン提唱者は、各部門と協力して、情報やユーザーリサーチの価値を共有する方法を見つけなければなりません。

ここでは、デザインチームが他の人と協力して、組織の他の部分に価値を提供する方法をいくつかご紹介します：

• セールスチームとマーケティングチームが情報を共有することには、大きなの価値があり、どちらのチームもユーザーの行動を見ますが、それぞれ違うレンズ越しに見ています。
• セールスやマーケティングは、リサーチをサポートするのに貴重なデータを持っていることが多く、UXはキャンペーンの最適化のために既存のユーザー調査を提供することができます。
• ​​ユーザーリサーチで、ビジネスチームが新しいユーザーや市場の機会を特定しやすくなります。デザイン提唱者は、この貴重な情報を共有することで、製品と市場の適合性を向上させ、ユーザーと組織のためになるビジネス上の意思決定におけるUXの影響力を高めることができるのです
• データサイエンティストは、ユーザーの行動、UXが解決できる問題、それに応じた優先順位の付け方について、貴重な見解を持っており、UXの提唱者は、アナリストが顧客の行動をより明確に把握し、理解するためのもう一つのデータポイントとして、ユーザーリサーチデータを共有することができます。

デザインの提唱者となり、組織内での部門の価値を高めるには、このような連携の機会を見つけることは不可欠な部分です。

2. ワークショップ

デザイン思考のワークショップは、デザインプロセスやデザイン思考による問題解決の方法について、デザイン部門じゃないチームやステークホルダーを教育するのにとてもいいです。デザインワークショップは、ジェラ・マーフィー氏がGMで魔法をかけた方法の1つです。その結果を見たらワークショップという方法のすばらしさが分かるでしょう！

3. ユーザーインタビューへ招く

ユーザーインタビューでは、ユーザビリティ・テストのプロセスや、UXデザイナーがどのようにユーザーの問題に対するソリューションを開発し、機会を特定するかをステークホルダーに見てもらうことができます。

また、ユーザーインタビューは、ユーザビリティの問題やデザインの悪いUIでユーザーがどのように苦労しているかをステークホルダーが見る絶好の機会であり、今後の意思決定に共感をもたらします。

4. デザインスプリントに招く

デザインスプリントでは、ステークホルダーとデザイン部門でないチームのメンバーが、1週間以内にエンドツーエンドのデザインプロセスを直接体験することができ、そこでデザイン思考やプロセスを学び、自分たちのソリューションに対するユーザーの反応を見ることができます。

5. ストーリーテリング

GMのジェラ・マーフィー氏は、ユーザーストーリーやUXの成功例を伝えるために、ストーリーテリングをよく利用しますが、UXの成果物を共有することは、こういったストーリーをステークホルダーに提示するにはベストな方法ではないことに、彼女は長い間わかっていました。デザイナーにとっては意味のあるものですが、ステークホルダーにとっては十分なビジュアルではないのです。

彼女は、ユーザーとビジネスゴールの接点を示すビジュアルを多用し、聞き手にとって適切なUXストーリーを語る方法を探しています。

ユーザーやUXのストーリーを語るときは、聴衆のことを考え、適切な言葉やビジュアルを使ってメッセージを伝えましょう。

6. DesignOpsでの提唱

DesignOpsは、デザイン提唱を推進するための一般的な手段であり、DesignOpsの専門家は、デザインの中で効率化を図り、組織の他の部分への影響を測定します。

彼らは、デザインの価値を高めるのに、以下のようないくつかの取り組みを行っています（これらの中には、デザイン提唱者の仕事と類似しているものもあります）。

• 部門を超えた情報共有の推進と促進
• 部門を超えた情報共有
• スキル開発
• デザイン理念の浸透とチーム文化の構築
• キャリア開発およびコーチング
• デザインチームの目標設定とメンタリング
• 結束と一貫性を高めるためのツールやプロセスの開発

このトピックにの詳細については、「DesignOps 101: Guide to Design Operations」と題した電子ブックをご覧ください。

UXPin – ユーザーのための究極のデザイン提唱

ユーザーテストは、デザインプロセスの重要な部分ですが、プロトタイプが製品体験を再現できなければ、正確な結果を得ることはできません。UXPinのコードベースのデザインツールを使えば、デザイナーはコードのような忠実性と機能性を備えたプロトタイプを作成し、より良いユーザーテストを行うことができます。

UXPinのプロトタイプは、ステークホルダーからのより良い、より有意義なフィードバックももたらします。UXPinのコードベースのプロトタイプは、何かをすることを「想像」するのではなく、高度な機能を提供し、ステークホルダーが好む没入型の体験を｢創造」します。

UXPinのコードベースのデザインソリューションに切り替えて、デザイン提唱者が話題にする価値と効率性をより多く生み出しましょう。無料トライアルにサインアップして、UXPinがどのように顧客のためにより良いUXを生み出すかをぜひご体験ください。

The post デザイン提唱とは？ appeared first on Studio by UXPin.

ハイテクなデジタル製品における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.

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

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

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

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

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.

リソースの節約

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

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

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

連携の促進

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

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

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

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

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

定期的な更新のしやすさ

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

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

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

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.