プロトタイピングツールは、デザイナーが最終製品のレプリカを作成するための製品で、ユーザーテストやステークホルダーへのプレゼンテーションや、デベロッパーへの引き渡しに使われます。デザインツールには、大抵追加機能としてプロトタイプがありますが、専用のツールを使うことで、より高度なプロトタイプができるようになります。

コードベースのデザイン革命を牽引する企業の１つである UXPin の１４日間の無料トライアルにサインアップして、次のデジタル製品や Web デザインのプロジェクトで UXPin の高度なプロトタイプ機能をぜひお試しください。

１．UXPin

UXPin は、デザインを完全にインタラクティブにすることができる、コードベースのプロトタイピングツールです。多くの主要なデザインソリューションとは違い、UXPin にはプロトタイプとテストに必要なものがすべて組み込まれているので、プラグインは必要ありません！

UXPin は、デスクトップ（Mac および Windows）へのダウンロードか、ブラウザでの使用を選択できますが、UXPin のダウンロードの方には、オフラインでも作業を継続できるというメリットがあります。

そして、ブラウザでのプロトタイプのテストや、UXPin の Mirror アプリを使って、iOS や Android などのモバイルデバイスでのプロトタイプの実行ができます。また、UXPin のドキュメントは素晴らしく、１ステップごとの説明やビデオによるチュートリアルで、このツールのあらゆる側面がカバーされています。

さらに UXPin には、他のプロトタイピングツールにはないもう１つの利点として、React コンポーネントで完全に機能するプロトタイプを構築するための UXPin Merge というのものがあります。

Merge を使うと、Git レポジトリや npm 経由での React コンポーネントの同期や、Vue、Angular、Web コンポーネント、Ember 向けの Storybook 統合の使用などのオプションがあります。また、Merge でレイアウトのデザインや、製品を １０ 倍速く立ち上げることができます。

２．Figma

Figma は、最も広く使われているデザインツールの１つであり、多くの YouTube コンテンツや詳細なドキュメントを備えた大規模で熱心なコミュニティがあります。

また、Figma には、複数のデバイスでプロトタイプをテストできるモバイルアプリを備えた「プロトタイピング機能」が内蔵されており、ブラウザでの作業も、Figma をダウンロードしてデスクトップでのオフラインの作業もできます。

ただ、Figma は初期段階のコンセプトには優れていますが、高度なプロトタイプはまだ完璧ではありませんし、デザイナーはユーザーテストに対応できるプロトタイプを作れるとは思えません。

２０２３年、Figma にはインタラクティブなプロトタイプをシンプルにする多くの機能が加わりましたが、Figma の入力はまだ制限されており、UX リサーチャーは、ユーザーの情報入力が必要なアクションをテストすることができません。このツールだと、ユーザーのインタラクションに適応する動的なユーザーフローは作りにくいです。

ただし、Figma で作成したプロトタイプにインタラクションを追加できます。Figma のデザインを UXPin にインポートして、インタラクティブなプロトタイプを作成するためのプラグインを使います。詳しく次のチュートリアルをご覧ください：Figmaのデザインをインタラクティブなプロトタイプにしよう

３．Adobe XD

Adobe XD も人気のある UX デザインツールですが、２０２３年に廃止されました。

Adobe UX のプロトタイプの面白い機能の１つに、特定のインタラクションの時間を節約してくれるオートアニメーションがあります。オートアニメーションで、アニメーションシーケンスの最初と最後のフレームを作成すれば、あとは Adobe XD が埋めてくれます。この機能は全アニメーションで機能するわけではありませんでしたが、パララックス（スクロールエフェクト）のようなものを作成する際にはかなりの時間の節約になりました。

４．Invision

Invision は長年にわたって強力なプロトタイピングコンポーネントでしたが、Figjam に似たコラボレーション用のツールに焦点を当てることにしました。プロトタイピングツールはまだありますが、市場にある他のツールに比べると、２０２４年にインタラクティブな製品を作るには物足りない感じです。

Invision には素晴らしい DSM（デザインシステム管理）機能があり、デザインシステムの管理や、デベロッパーへの CSS やスターターコードの提供に便利です。また、DSM は Storybook と統合されているので、デザイナーとデベロッパーはデザインシステムを同期することができます。ただ残念ながら、デザイナーは UXPin Merge のようにコードコンポーネントを使ったプロトタイプの作成はできません。

５．Framer

Framer は、２０２４年の Web レイアウト作成向けのプロトタイピングツールにおいてトップに君臨するうちの一つです。ラピッドプロトタイピングのための AI 機能を備えており、ユーザーが希望する Web サイトの種類を入力すると、Framer がカスタマイズするデザインを提供します。 Framer では AI が非常に早く取り入れられました。

その他の特筆すべき機能には、レイアウトと挿入メニューがあり、その機能によって、コンセプトのデザインや反復をサッと行うことができます。これは印象的ですが、UXPin にもオートレイアウトとビルトインのデザインライブラリによる同様の機能があります。

Framer の Smart Components 機能には、UXPin の ステートに似た機能がありますが、それほど包括的ではありません。バリアントと変数を使って、スイッチの切り替えやチェックボックスのアクティブ化など、要素にホバーまたは押された状態を付けることができるくらいです。

また、Smart Components は、他のベクターベースのデザインツールからステップアップしたとはいえ、UXPin のステート、インタラクション、エクスプレッション、変数の機能ほど忠実ではありません。

その他のデザインツール比較

その他にも、よく使われている以下のようなプロトタイピングツールと UXPin の比較もご覧ください：

• Marvel App
• Justinmind
• Proto.io
• Axure
• Zeplin
• Balsamiq

UXPin を体験してみよう

デザインツールをお探でしたら、上記の５つも含め、デザイナーが見た目のいい Lo-Fi（低忠実度）ワイヤーフレームやモックアップを作成するのに使えるのがたくさんあります。

ただ、UX のデザインにはテストが必要であり、つまりモックアップではなく、Hi-Fi（忠実度の高い）プロトタイプが必要だということです！UX デザイナーはコード化された製品をデザインしますが、画像ベースのプロトタイプでユーザーテストを行います。ただ、それだと正確で意味のある結果を得ることは不可能であり、必ずユーザビリティの問題が発生し、それが最終製品に反映されてしまいます。

そこで、UXPin のようなコードベースのツールがあれば、デザイナーは機能するHi-Fi（忠実度の高い）プロトタイプを作成できるので、ユーザビリティの参加者は、ボタンや入力が機能することを「想像」する必要はありません。

UX デザインの革命に繰り出しませんか。１４日間の無料トライアルにサインアップして、UXPin でより優れたプロトタイプとテストをぜひご体験ください。

The post ２０２４年のおすすめ プロトタイピングツール ５選 appeared first on Studio by UXPin.

Figma、AdobeXD、UXPin の３つは、デジタル製品をデザインするための主要なUX（ユーザーエクスペリエンス）デザインツールです。

この記事では、これら３つを比較してUIデザイン、モックアップ、プロトタイプ、連携に関してそれぞれの位置付けや特徴を紹介していきます。

どのデザインツールがあなたのプロジェクトやチーム・組織のニーズに最適か、ぜひご覧ください。

主なポイント

• AdobeXD は、Creative Cloud Suiteとシームレスに統合することで、Photoshop や Illustrator などのツールとのスムーズなデザインワークフローを実現する。

• Figma は、リアルタイムでの連携に最適なプラットフォームであり、複数のユーザーによる同時デザインが実現する。

• UXPin は他のデザインツールとは違い、コードベースのデザインツールであるため、複雑なプロトタイプを作成することができる上に、Mergeテクノロジーによってデザインとコードのギャップを埋める。

• 適切なデザインツールの選択は、プロジェクトの複雑さ、連携の必要性、統合の好み、プロトタイプ機能によって決まる。

世界最先端のUXデザインツールを使って、デザインプロセスに隠れたユーザビリティの問題を解決し、より多くのビジネスチャンスを特定しましょう。

デザインと開発をつなぐ「信頼できる唯一の情報源（Singel source of truth）」を作成しましょう。こちらからUXPin Mergeをぜひご覧ください。

AdobeXD とは

料金

Creative Cloud は ＄８２.４９（Photoshop、Illustrator、InDesign、Premiere Pro、Acrobatなどの２０以上のクリエイティブデスクトップおよびモバイルアプリケーションを含む）

最適な用途

Adobeユーザー、UIデザイン

機能の概要

• Photoshop や Illustrator などの Creative Cloud とのシームレスな統合

• 自動アニメーションで、スムーズなマイクロインタラクションとトランジションが実現し、プロトタイプのリアリズムが充実する

• 音声機能付きプロトタイプの統合で、UIデザイナーが音声UI をテストできるようになる

• リピートグリッドは、デザイン要素の迅速な複製を促進し、それによって反復作業を最適化し、デザインの一貫性を保証する

AdobeXD は、Adobe の Creative Cloud Suiteに含まれる UX および UIデザインツールです。

これは、インタラクティブなデザインを設計、プロトタイピング、共有するためのプラットフォームです。

Adobe のエコシステム内に統合されているため、デザイナーは Photoshop や Illustrator などのツール間を簡単に移行できるため、デザインプロセスが効率化します。

Figmaとは

料金

＄１２〜＄７５

最適な用途

UI（ユーザーインターフェース）デザイン、連携（コラボレーション）

機能の概要

• リアルタイムの連携により、複数のユーザーが同時にデザインを行うことができ、チームワークと即時のフィードバックを促進する

• 統合機能により、多くのプラグインやサードパーティ製アプリが提供される場合があり、それによってプラットフォームの機能が強化する

• ブラウザおよびデスクトップアプリケーション

• 開発モードで、エンジニアがデザインを分析し、スターターCSS でコードに変換しやすくなる

• バリアブルを使うと、デザイナーはユーザーのインタラクションに基づいてコンポーネントのプロパティを変更できる

Figmaは、リアルタイムの連携のために構築された、ベクターベースのデザインプラットフォームです。

ブラウザベースのツールであるため、アクセスの障壁がなく、それによって場所やデバイスに関係なくチームが同期して作業できることが保証されます。

また、Figmaの直感的なインターフェースとパワフルなプロトタイピング機能は多くの人に愛され、UXプロフェッショナルも愛用しています。

複数のデザイナーが同時にプロジェクトを編集できる機能など、コラボレーションに重点が置かれています。デザイン空間におけるチームワークが再定義されたことで Figmaはデザインツールのトップとして確立しました。

 FigmaはAdobeに買収されたのか

Adobe は２０２２年９月に Figmaの買収計画を発表しましたが、この買収はまだ成立しておらず、２０２３年８月の欧州委員会の調査を含む規制当局の精査を通過しないといけません。

規制当局は、Adobeによる買収で「インタラクティブ製品デザインのソフトウェアとデジタル資産作成ツールの供給に関する世界市場での競争を低下させる可能性がある 」ことを最も懸念しています。

そして、この契約が成立すれば、AdobeはAdobeXDを廃止し、UXデザインツールとして Figmaを Creative Cloud にバンドルすると噂されています。

UXPinとは

料金

＄３９〜＄１４９

最適な用途

UI デザイン、インタラクションデザイン、デザインシステム

機能の概要

• ブラウザとデスクトップアプリケーション

• 高度なインタラクティブプロトタイプにより、デザイナーはデザインプロセスにおいて、より多くのユーザビリティの問題を解決し、より良いビジネスチャンスを特定することができる

• UXPin のコメント機能を使ったリアルタイムの連携とコミュニケーション

• ステートにより、デザイナーは１つの要素に対して複数のステートを作成し、ドロップダウンメニュー、タブメニュー、ナビゲーショナルドロワーなどの複雑なインタラクティブコンポーネントをデザインできる

• Variables（変数）がユーザーの入力からデータを取得し、アプリバーに表示される名前やプロフィール画像のように、個別化されたダイナミックなユーザー体験を作り出す

• Expression（式） 複雑なコンポーネントや高度な機能を作成するための Javascript のような関数 – コードは不要！

• 条件付きインタラクションは、ユーザーのインタラクションに基づいて［if-then］と［if-else］の条件を作成し、複数の結果を持つダイナミックなプロトタイプを作成して、最終的な製品エクスペリエンスを正確に再現する

• UXPin の Merge テクノロジーを使って、React、Vue、Angular などのコードコンポーネントでデザインする

• UXPin の IFTTT 統合を使って、API やその他のデジタル製品を連携する

• UXPinのデザインシステムで、アセット、ドキュメント、UI 要素、カラー、タイポグラフィなどのコンポーネントライブラリを作成および共有する

• ネイティブアプリケーション（iOSとAndroid）の UXPin Mirror を使ったクロスプラットフォームのプロトタイプテスト

UXPinはコードベースのデザインツールで、デザイナーはリアルなプロトタイプを簡単に作成できます。

そしてデザイナーは、ツールのフォームとビルトインのデザインライブラリにより、 Figma や AdobeXD のような従来の画像ベースのデザインツールよりも速くモックアップやプロトタイプの作成や、テストおよび反復をすることができます。

UXPinの強みは、ベクターグラフィックスではなくコードをレンダリングできることです。

このコードベースのアプローチで、プロトタイプの範囲が広がり、ステークホルダーやユーザーからのより良いフィードバックのテストを強化するのです。

UXPinのMergeテクノロジーでデジタル製品デザインをレベルアップしてみませんか？

デザイナーはレポジトリからUIコンポーネントをインポートし、”実物に近い” 動きや操作・機能性のあるプロトタイプを作成しましょう！

UXPinとFigmaの違い

UXPinとFigma は、一見似ているように見えます。デザイナーは、左側にコンポーネントライブラリとレイヤー、右側にプロパティとインタラクションがあり、どちらのツールもデザインキャンバスが中央にあります。特に、Figmaでデザインし、UXPinでプロトタイプを作成するのが好きなUXデザイナーにとっては、このような親しみやすさでツールの切り替えがしやすくなります。

では、UXPinとFigma の主な違いを以下に挙げましょう：

• UXPinはコードベースで、Figmaはイメージベースである。UXPinのコードベースアプローチは、デザイナーが Figma や AdobeXD では再現不可能なコードのような機能やインタラクションを作成できるということである。
• UXPinには、テキスト入力などのフォームフィールドがあり、対する Figmaの入力フィールドは、使用不可で非インタラクティブなグラフィカル表現である。
• 「Code-to-Design（コードからデザイン）」か「Design-to-Code（デザインからコード）」の違いがある。Figma は「Design-to-Code（デザインからコード）」アプローチであり、デベロッパーは静的デザインをコードに変換しなければいけない。対する UXPinでは「Design-to-Code（コードからデザイン）」のワークフローを提供する一方で、「Code-to-Design（コードからデザイン）」へのソリューションも提供している。デザイナーはMergeを使ってコードコンポーネントをデザインプロセスにインポートできる。
• Figmaはアートボードとフレームを使い、UXPinは画面をページに分ける。

プロトタイプに最適なデザインツール

Figma や AdobeXD のような画像ベースのデザインツールは、ワイヤーフレームやモックアップ、基本的な低忠実度（Lo-Fi）プロトタイプには最適ですが、UXPinのインタラクティブプロトタイプ機能にはかないません。

例えば、Figma や AdobeXD では、美しいフォームやユーザーフローを作成できますが、入力はインタラクティブではありません。

そのため、デザイナーはテスト中に意味のあるインサイトを得ることができず、何か外部ツールを使うか、エンジニアと協力して実用的なプロトタイプを作成しないといけません。

一方、ステート、インタラクション、変数、Expressionなどの UXPinのインタラクティブ機能を使えば、デザイナーはコードベースのプロトタイプが反映されたインタラクション、ユーザーフロー、機能をデザインできます。

このような高度な機能により、プロトタイプの範囲が大幅に広がり、複雑なプロトタイプ機能や API統合であっても、デベロッパーを巻き込む必要がなくなります。

デザインツールの選び方

以下に、Figma、AdobeXD、または UXPinのいずれかを選択する際の重要な判断基準を挙げましょう：

• プロジェクトの範囲と複雑さ: どの３つのツールも、簡単なデザインに対して同等のエクスペリエンスと結果を提供するが、インタラクティブなプロトタイプを構築したい場合、またはデザインと開発を同期したい場合は、UXPinが最適なオプションである。

• 連携のニーズ: リアルタイムの連携がリストの上位にある場合、Figma の同時マルチユーザー機能は不可欠であり、 UXPinだと、Slackと統合されたコメント機能を通じて同様のソリューションを提供する。

• プラットフォームのアクセシビリティ: Figma と UXPin のブラウザベースのアプリケーションは、どこからでもアクセスを優先するには非常に重要であるが、もし Adobe Suite愛用者であれば、AdobeXDがエコシステムによりよく適合する。

• 統合と拡張機能: Figmaの豊富な統合エコシステムは、ワークフローがサードパーティ製プラグインで成り立っている場合は便利。Photoshopのようなツールとのシームレスな同期ではAdobeXDがお勧め。デザインと開発の同期を優先する場合、UXPinとMergeテクノロジーが最適である。

• フィードバック ループ: 効率化されたフィードバック プロセスは、最新の非同期製品開発にとって極めて重要。 UXPinのプレビューに関するコメント機能を使うと、ステークホルダーや他のチームは、UXPinのアカウントを持っていなくても、特定のチームメンバーにコメントを割り当てるなど、プロトタイプに関するフィードバックに注釈を付けることができる。

• 高度なプロトタイプ: UXPinは最も洗練されたプロトタイプ機能を提供するが、AdobeXDの音声プロトタイプはVUIデザイナーにとってユニークで便利な機能である。

• 信頼できる唯一の情報源（Single source of truth）： UXPin は、これら３つのツールの中で、Mergeテクノロジーを介して「Code-to-Design（コードからデザイン）」のソリューションを提供する唯一のツールである。Mergeがデザインと開発用の単一のUIライブラリでデザイナーとエンジニア間のギャップを埋め、シームレスな製品開発ワークフローとスムーズなハンドオフが実現する。

• 学習曲線: AdobeXD、Figma、およびUXPinには同等の学習曲線があるが、UXPinの高度な機能を習得するには少し時間がかかる。その代わり、デザインの迅速な反復と市場投入までの時間の短縮が得ることができる。

「以前まではBalsamiqを愛用していまいしたが、Figmaを使い始めてからはとても気に入りました。ですが、UXPinと出会って強力なスクリプト機能が使えるようになり、エンジニアの同僚が最終製品で使うのと同じライブ HTML UIコントロールを使ってインタラクティブなUIをデザインできるようになった今、もうFigmaには戻れません。」 シニアUXデザイナー、Anthony Hand

UXPinの「Code-to-Design（コードからデザイン）」が FigmaやAdobe XDを上回る理由

Figma と AdobeXD はビジュアルデザインを実現しますが、UXPin の「Code-to-Design（コードからデザイン）」へのアプローチは、デザインと開発間のギャップを埋めることで差別化を図ります。

また、UXPinは、ベクター グラフィックスの代わりに実際のコードをレンダリングすることで、プロトタイプの信頼性を確保し、それによってベクターベースのプロトタイプとインタラクティブ性の誤解による「よくある落とし穴」を回避します。

UXPinのMergeテクノロジーで、レポジトリから UIコンポーネントを統合し、それによって最終製品を正確に反映する、完全に機能する高忠実度のプロトタイプが実現します。

Figma と AdobeXDは視覚的な表現に依存しており、デザインに動きなどを加えるために追加のツールや開発者のサポートが必要になることがよくあります。ですが、UXPinはここで紹介したようなコードベースのアプローチと多機能性によって、シームレスで正確かつ迅速なデザインから開発までのプロセスを実現できます。

UXPin Mergeテクノロジーを使って「Code-to-Design」アプローチで製品開発ワークフローに革命を起こし、より良いデザインを効率的につくりましょう。デザイナーとデベロッパーの連携を改善し、顧客により良いUXを提供しましょう。

詳細とアクセスのリクエスト方法については、こちらのページをぜひご覧ください。

The post 【必見】Figma と AdobeXD と 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.

Figmaでつくるプロトタイプは最終製品がどのように見えるかを視覚化し、デザインについての説明や、ユーザーフローを計画するには最適ですが、プロトタイプテストには不向きかもしれません。そこでUXPinの出番です。デザイナーはUXPinを使うことで、質の高いテスト結果をもたらすインタラクティブなプロトタイプを作成することができます。本記事ではこれら２つのツールについて詳しくみてみましょう。

主なポイント：

• Figmaはベクターベースのデザイン環境でリアルタイムでの連携を提供し、UXPinはコードベースのアプローチで高度なインタラクティブなプロトタイプを提供する。
• UXPinで提供するMergeなどの高機能により、複雑なインターフェースをFigmaよりも大幅に速く構築できる。
• プロトタイピングにおいて２つを比較した結果、UXPinでのプロトタイプは、Figmaで作成したときよりも８倍速く、よりインタラクティブであることがわかった。
• Figmaは、静的なモックアップ、低忠実度プロトタイプ、共同デザインの作成に優れているが、インタラクティブなプロトタイプ機能が欠けている。

UXPinが提供するMergeテクノロジーによって、デザインチームでもコードベースのプロトタイプの作成を可能します。これによって、デザインから開発への移行を効率化し、コストと時間を大幅に節約することができます。

デザインと開発のギャップを解消させ、UXPinのMergeテクノロジーで高忠実でインタラクティブ性のあるプロトタイプを作成してみませんか？詳しくはこちらのページをご覧ください。

Figmaとは

Figmaは、リアルタイムの連携を実現するベクターベースのデザインツールです。ワイヤーフレーム、モックアップ、プロトタイプ、情報アーキテクチャまで、様々なデザインアセットを作成することができます。

２０１６年にブラウザベースのベクターグラフィックス編集ツールとして誕生し、当時デザインツールの市場を独占していたAdobe製品に代わる人気ツールとなりました。多くのUX/UIデザイナーはFigmaのその使いやすさに惚れ込み、UIデザイン業務においてもFigmaが使われ始めました。

Figmaのプロトタイプは、他のチームにデザインについて説明するのに最適です。また、クリエイティブなプロトタイプ、デザインの探求、パワフルなドローイングを作成するのに優れています。一方、Figmaのプロトタイプでは開発環境の制約沿った高度なインタラクティブ性が欠けていますが、そこはUXPinでかなえることができます。

UXPinとは

UXPinは、部門横断的な連携向けのコードベースのフルスタックデザインツールです。インタラクティブ性のあるプロトタイピング機能はUXPinを使う上で最大の魅力であり、デザイナーは、最終製品のようなビジュアルと完全な機能性を持つプロトタイプを作成することができます。ライブラリやフォームを使うことで、ワイヤーフレーム、モックアップ、ユーザーフローマップ、情報アーキテクチャの作成も簡単に行うことができます。

UXPinのプロトタイプは、デザイナーがプロトタイプにインタラクションを追加して動きを加えることができます。テスト中でもユーザーの入力情報の保存や、ライブデータも使うことができるため、まさに “実物” のような操作性があります。

これらによって、デザイナーは次のようなことが可能となります：

• 堅牢でインタラクティブ性のあるプロトタイプの構築
• ユーザーやステークホルダーから高品質で有意義なフィードバックの獲得
• デザインハンドオフの効率化

FigmaとUXPin – プロトタイピングでの違い

Figmaは、コラボレーション機能とコンポーネントベースのアプローチによって、プロトタイプのための信頼性の高いソリューションを提供します。一方、UXPinではさらに高度なインタラクション機能と、Mergeテクノロジーによるデザインから開発へのシームレスなハンドオフを実現します。

UXPinとFigmaのプロトタイピング機能を簡単に比較してみましょう。

Figma:

• 基本的なインタラクションとトランジション： Figmaでは、デザイナーはクリック可能な基本的なトランジションを追加し、モックアップをより魅力的なものにすることができる。
• コンポーネントの作成とデザインシステム： デザイナーは、共有・再利用可能なコンポーネントを作成し、UIの一貫性を保つことができる。
• 協働デザイン機能： 複数のデザイナーが同時に同じデザインに取り組むことができ、それによってデザインプロセスが効率化され、集団での創造性が促進される。

UXPin:

• 高度でインタラクティブなプロトタイプ： 洗練されたプロトタイピング機能でステート、インタラクション、変数、式などの機能により、実物に近いプロトタイプを作成できる。
• Mergeの「Code-to-Design」手法： デザイナーは Reactコンポーネントをインポートして、最終製品と区別できないほどの「リアルな」プロトタイプを作成できる。また、Mergeはデザインと開発のギャップを埋め、シームレスな製品開発フローを提供する。
• リアルタイムの連携とユーザーフィードバック： UXPinのコメント機能は、チームメンバーやステークホルダーとの部門横断的な連携を促進する。また、ユーザーからのフィードバックをプロトタイプに直接取り込み、実際のユーザーのインサイトやステークホルダーからのフィードバックに基づいて、繰り返しデザインを改良できる。

FigmaとUXPinの比較 – 実際の使用例

シニアUXデザイナーのAnthony Hand氏は、UXPinとFigmaのプロトタイピング機能についての比較記事をMediumに書きました。チームは、関連するブランドカラーとサードパーティのアイコンを含む、カスタムのMicrosoft FluentのWebライブラリを作成しました。

彼はFigmaのFluent UIキットを使い、React UIライブラリのGitHubレポジトリをMergeを使ってUXPinにインポートしました。Reactコンポーネントには、レポジトリで定義されたスタイリングとインタラクティブなプロパティ、必要なコントロールとAPIを含みます。

対するFigma UIキットではFluent Design Systemの静的バージョンであり、デザイナーは関連の変数とインタラクションの設定が必要です。UXPinのReactコンポーネントと比べると、忠実度も機能もかなり劣ります。

実験

Anthony氏は、UXPinとFigmaのプロトタイピングの効率性を比較するために、両方のプラットフォームで同じ単一ページのプロトタイプを作成しました。Figmaではページのデザインで１時間かかったところが、UXPinではわずか８分で作成できました。

「UXPinのプロトタイプには、ライブドロップダウン、カレンダーボタン、ソート可能なデータテーブル、そしてインタラクティブな Highchartsの円グラフまでありました。」 – シニアUXデザイナー, Anthony Hand

Anthony氏がUXPinで作成したプロトタイプは、高品質で、エラーが少なく、Microsoft Fluentのライブコントロールを使用したインタラクティブな要素を備えていました。一方、Figmaのプロトタイプは８倍以上の時間を掛けてつくったにも関わらず、そのようなインタラクティブ性がなく、リアルタイムのインタラクションを減らすラスタライズされた画像に頼っていました。

Anthony Hand氏の見解

Figmaは、馴染みのあるグラフィックデザインのプラットフォームをWeb ベースで進化させたものであり、旧来のツールよりも進歩していますが、まだ限界があります。UXPinでは、コードベースのデザインアプローチで 「インタラクティブなプロトタイプ 」に重点を置いているため、デザイナーはライブコード要素を使ったデザインを作成でき、インタラクティブ性とリアル感がでます。さらに、UXPinでは、最小限の学習要件で単一のページに複雑なインタラクションを実装することができる機能があります。

「Figmaはもちろんすごくいいツールですが、UXPinの便利なスクリプティング機能を活用し、エンジニアが完成品で使用するのと同じライブHTML UIコントロールを使ったインタラクティブなUIをデザインできる方法を学んだ今、Figmaに戻れなくなりました。」シニアUXデザイナー, Anthony Hand

Figmaはプロトタイプ向きか

Figmaは素晴らしいUIデザインツールですが、最終製品のイメージをするためのインタラクティブなプロトタイプを作成するためには必要な機能が欠けています。ここでは、デザインプロセスにおいてFigmaを上手く使うための用途とその理由をいくつか見てみましょう：

• 静的なUIモックアップ： Figmaの直感的なUIと機能で、モックアップのデザインが難なくできる。
• 低忠実度（Lo-Fi）プロトタイプ： Figma は、画面間の基本的な遷移のみが必要なため、低忠実度のワイヤーフレームのプロトタイプに最適。
• 情報アーキテクチャ： デザイナーは、単一のアートボード上に画面を整理して、製品のアーキテクチャとユーザーフローのマッピングや視覚化をできる。
• 協働デザイン： Figmaでリアルタイムの連携がしやすくなり、それによってチームはコメント投稿やデザイン批評の実行、バージョン履歴へのアクセスができる。

Figmaでのプロトタイプの限界

以下を見ると、UXPinを検討したくなるかもしれません：

• インタラクティブ性のあるプロトタイピング： Figmaは、シンプルなクリック/タップのインタラクションを提供するものであり、ユーザーデータの取得や、ドロップダウンメニュー、カルーセル、アコーディオン、日付ピッカーなどの複雑なコンポーネントの作成は、Figmaではできない。
• ライブデータとAPI： UXPinと違い、Figmaでは ライブデータの読み込みができず、そのような複雑な統合には、エンジニアリングの入力が必要。そうなると、時間とリソースが増大してしまい、ほとんどのプロジェクトでは実現不可能になる。
• コードからデザインへ： Figmaはデザインからコードへの手法で動作する。つまり、デベロッパーはデザインをコードに変換する必要があり、時間のかかる複雑な作業である。Mergeがあれば、UXPinのコードからデザインへのワークフローによって、デザイナーはデベロッパーが使うのと同じ構成要素を使ってコードベースのプロトタイプを構築でき、製品開発ワークフローがシームレスになることで開発時間が大幅に短縮される。

UXPinでのプロトタイプ作成がいい理由

本記事に共通するテーマは「インタラクティブ性」であり、デザイナーは、現代のデジタル製品をインタラクティブなプロトタイプを使ってアイデアをテストすることを求められます。なぜでしょうか？

• 開発には時間とコストがかかる。デザインプロセスで問題を解決することで、組織は膨大な時間とリソースを節約し、それによって無駄な支出が減る。
• UXは、製品の採用、エンゲージメント、リテンションにとって極めて重要。インタラクティブなプロトタイプにより、デザイナーはデザインプロセスでユーザビリティの問題を解決し、製品の UXを向上させることができる。

デザイナーはプロトタイプやユーザーテストにおいてイメージベースのツールを使うと、デザインプロセスでのユーザビリティの問題やビジネスチャンスを見逃してしまいます。これによって、製品が提供するUXとバックログに変更を加えなければならず、負債や、回避できるはずのコスト増加に繋がってしまいます。

インタラクティブなプロトタイプがUXの負債を減らすには

Merge は、より良いテストとスムーズなデザインオフにより、無駄で回避可能なユーザー体験と技術的負債を減らすことができます。デザインチームは、プロトタイプ構築のためにデザインシステムのレポジトリからインタラクティブコンポーネントをインポートし、Figmaのようなイメージベースのツールではつくることができない 最終製品の正確なレプリカを作成することができます。

また、ユーザーとステークホルダーは、Mergeのプロトタイプを最終製品と同じように操作することができ、デザインチームは反復と改善のための正確で有意義なインサイトを得ることができます。

さらに、デザイナーとエンジニアがまったく同じコンポーネントを使うため、デザインハンドオフに必要なドキュメントや説明が少なくて済みます。デベロッパーは、同じレポジトリから同じUIライブラリをインポートし、UXPinからJSXの変更を適用して、最終製品を納品できます。

「UXPin Mergeによって、当社のエンジニアリング時間は約５０%短縮されました。数十人のデザイナーと数百人のエンジニアを抱える企業レベルの組織全体で、これがどれだけのコスト削減になるか想像してみてください。」  – UXリードデザイナー, Larry Page

より速い プロトタイプとイテレーション

Mergeは、ノーコード、ドラッグ＆ドロップのプロトタイピング環境をデザイナーのために効果的に作成します。Anthony氏のケーススタディからわかるように、Mergeに切り替えることで、同じUIライブラリを使って、Figmaよりも 8 倍速くUXPinでプロトタイプを作成することができました。

UXPinのプロパティパネルを使って、コンポーネントやプロトタイプの変更は早く効率的になります。それでも、デザイナーは単一の UI 要素に対して複数のバリエーションやステートを作成し、それを UXPinのパターンに保存することで効率を上げることができます。そしてデザイナーは、プロパティパネルで調整する代わりにコンポーネントを入れ替えるだけで、テスト中に即座にフィードバックを得ることができます。

「UXPinを使って、忠実度の高いプロトタイプを作成することができ、とても助かっています。忠実度の高いプロトタイプをより速く作成し、セッション後にすぐにフィードバックを得ることができます。修正箇所があれば、次のユーザビリティテスト参加者にはその変更を適用させ、今までよりもずっと早くフィードバックを獲得することができます。」プロダクト、UX、DesignOpsソートリーダー,  Erica Rider

UXPinのMergeテクノロジーを使ったインタラクティブコンポーネントで、プロトタイプレベルアップしませんか。詳細およびアクセスリクエスト方法については、こちらのページをぜひご覧ください。

The post 【 プロトタイプ 】FigmaとUXPin – できること、できないこと appeared first on Studio by UXPin.

日付ピッカーは、Web サイト、アプリケーション、ゲーム、企業向けソフトウェア、OSなどで使われる、デジタル製品のデザインにおいて最も馴染みのあるUIパターンの１つです。

そしてデザイナーは、日付ピッカーがスクリーンサイズ、OS、デバイスなどでどのように機能するかを理解し、製品の美観、機能性、全体的なUX（ユーザーエクスペリエンス）への影響をテストしないといけません。

UXデザイナーは、従来の画像ベースのデザインツールで日付ピッカーは作成できませんが、UXPin Mergeでは可能です。UXPin Mergeの技術によって、完全に機能する日付ピッカーをGitレポジトリやnpmパッケージ、さらにStorybookからインポートすることができるのです。  

UXPinに同期された日付ピッカーは、最終製品のように機能します。アートボードをリンクしてインタラクションを作成する必要はありません！Mergeへのアクセスリクエストはこちらのリンクから。

 日付ピッカー とは

  日付ピッカーは、ユーザーが特定の日付、時間、またはその両方の組み合わせを選択できるようにする UIパターンであり、フォーマットの一貫性を確保しながら、日付の取得を効率化することを目的としています。

 日付ピッカー が必要な理由

  世界では、例えば米国だと「mm/dd/yyyy（月/日/年）」のように「日」の前に「月」を置くのに対し、英国では「日、月、年」の形式を使うというように、日付の表示形式が異なります。

これは微妙な違いに見えますが、データベースはユーザーが米国形式を使っているのか、英国形式を使っているかを区別することはできません。データベースは、どちらか一方の形式でしか日付を正しく読み取ることができないのです。例えば『２０２２年１０月１日』を数字で見てみましょう：

• 米国：10/01/2022 （英国だと 10日1月2022年）
• 英国：01/10/2022 （米国だと1月10日2022年）

  この例では、データベースは各エントリーを「１０月」ではなく「１月」として解釈しています。 また、ユーザーは同じ日付を複数の方法で入力し、異なるセパレーターを使用することもできます。以下に例を挙げましょう：

• Oct 1, 2022 
• Oct 1, 22
• 1 Oct 2022
• 1 Oct 22
• 10-01-22 / 01.01.2022 / 10/01/22 
• 22/10/01 / 2022/10/01

  日付ピッカーによって、ユーザーが日、月、年を個別に選択し、あいまいさをなくし、システムが一貫した正確なフォーマットを提供できるようにします。 

モバイルとデスクトップにおける 日付ピッカー の UIデザイン

モバイルの 日付ピッカー 

デザイナーは、iOSやAndroidのようなモバイルのオペレーティングシステムがユーザーにどのように日付ピッカーを表示するかを認識することが重要です。ちなみに、 iOS のネイティブピッカーでは無限スクロールのUIが使われ、Androidアプリケーションでは月全体を表示するカレンダービューが使われています。

また、iOSでは親指でのスクロールができますが、Androidでは親指タップに最適化されたUIとなっています。

デザインシステムからカスタムの日付ピッカーを使うこともできますが、ネイティブのオプションを使うことで、親しみやすさが生まれ、製品の学習曲線が短くなります。ただし、モバイルアプリにネイティブの日付ピッカーを使う場合は、iOSのUIで述べたようなユーザビリティの問題が生じないように注意しましょう。

デスクトップの 日付ピッカー 

  大抵のデスクトップのWebサイトやアプリケーションは、カレンダーの日付ピッカーが使われており、余分なスペースとマウスを使うことで、ユーザーは数回のクリックだけで簡単に日付を選択できます。また、多くの製品では、ユーザーが手動で日付を入力するための入力フィールドが提供されています。

日付の数値の入力フィールドは、デスクトップでもうまく機能します。UXデザイナーは、ユーザーを正しいフォーマットに導くべく、プレースホルダーや有益なエラーメッセージを含めないといけません。

 日付ピッカー の UIデザイン５種

数値の入力フィールド

  最も基本的な日付ピッカーは、数値入力またはテキスト入力フィールドです。このようなフィールドには、日付ピッカーを備えたモーダルポップアップが含まれる場合があるか、ユーザーは区切り文字を使って日付を入力する必要があります。

製品によっては、US Web Design Systemsのこの例のように、ユーザーが日付を入力するか、モーダルを使うかを選択できるものもあります。

プレースホルダーは、「MM/DD/YYYY（月/日/年）」といった日付のフォーマット方法をユーザーに示す必要があります。UXデザイナーは、ユーザーが「月」と「日」を入力するとセパレーターが表示される日付のオートフォーマットを適用することで、これをさらに推し進めることができます。また、デザイナーは、ユーザーがフォームに記入する方法を知ることができるように、ヘルパーテキストを下に追加することもできます。こちらの例をご覧ください。

ドロップダウン日付セレクタ

  デザイナーは、Webサイトやデスクトップのアプリケーションで、大体はドロップダウンの日付セレクタを使用します。ただこのような日付ピッカーはマウスではうまく機能しますが、オプション間のスペースが少ないため、モバイルデバイスのユーザー、特に大きな指や親指を持つユーザーには難しいかもしれません。

ドロップダウンセレクタは、カレンダーモーダルで単一の入力フィールドを使うよりも多くのスペースを占有し、ユーザーが「日」、「月」、「年」を個別に選択する必要があるため、入力に時間がかかります。

なので、ドロップダウンセレクタは、デスクトップアプリケーションやWebサイトには最適ですが、オンボーディングフォームではボトルネックになるかもしれません。

スクロール 日付ピッカー 

  スクロール日付ピッカーは、ユーザーが日、月、年を別々に選択するため、ドロップダウンと同様に機能します。このようなスクローラーは、ユーザーが親指を使って日、月、年をスクロールできるモバイルデバイスで最も便利です。

ただ、多くのユーザーは、スクロール式の日付ピッカーが遠い未来や過去の日付には適していないとの不満を抱いています。何十年もスクロールするのは時間がかかり、特に手や指に障がいのあるユーザーにとっては大変です。

ちなみに、iOSのデフォルトの日付ピッカーは、スクロール式の日付ピッカーの最も一般的な例ですが、Appleでは、はるか過去や未来の日付にカレンダーピッカーがよく使われています。

カレンダー 日付ピッカー 

  カレンダーUIは、最もよく使用される日付ピッカーであり、カレンダー日付ピッカーは、OS、デバイス、画面サイズに関係なくうまく機能します。

物理的なカレンダーやデジタル形式のカレンダーは誰でも見慣れたものであるため、ユーザーはこのような日付ピッカーで慣れ親しみ、それによって認知的な負荷や製品の学習曲線が軽減します。

カレンダーのUIは、日付範囲のピッカーに特に有益で、それによってユーザーは自分の選択を視覚化してサッと調整することができます。  

タイムラインピッカー

タイムラインピッカーは、１週間までの短い日付範囲や数時間の時間枠を選択するのに適しています。タイムラインのUIは、ユーザーが［開始日］と［終了日］を選択するためにインジケータをドラッグすることができるので、モバイルデバイスで特に便利です。

タイムラインピッカーは日付にも使えますが、タイムウィンドウの選択に最適です。

 日付ピッカー のUIとUXのベストプラクティス

日付ピッカー のアクセシビリティ

  デザイン性の低い日付ピッカーだと、障がいのあるユーザーやスクリーンリーダーを使うユーザーはイライラしてしまう可能性があります。全ユーザーが日付の選択にアクセスできるようにするには、物事をシンプルに保つことが非常に重要です。

以下は、日付ピッカーにアクセスしやすくするための推奨事項です：

• 日付フィールドには明確なラベルを使いましょう。例えば、誰かが予約をしている場合、スクリーンリーダーや認知障がいのユーザーが必要な日付を知ることができるように、フィールドに「予約日」または「予約日を選択してください」というラベルを付けます。
  
  
• プレースホルダーと入力フィールドの上または下にフォーマットのヒントを含めましょう。このバリデーションで、明確な指示によって全ユーザーに利益がもたらされると同時に、日付ピケットがより利用しやすくなります。
  
  
• ユーザーは、タッチ、マウス、スクリーンリーダー、キーボードを使って日付ピッカーを使えないといけません。UX デザイナーは、全ユーザーとデバイスが 確実にUIを操作して簡単に日付を選択できるようにするために、日付ピッカーをテストしないといけません。
  
  
• 日、月、年のフィールドを分けることで、スクリーンリーダーやキーボードユーザーが日付を入力しやすくなります。UX デザイナーは、ユーザーがカレンダーを使って選択を完了できるように、ボタンまたはカレンダーのアイコンを含めるのもいいでしょう。（USWDSの日付ピッカーの例を参照）。

以下は、日付ピッカーのアクセシビリティリソースです：

• Collecting dates in an accessible way by Hassell Inclusion
• Date picker by US Web Design System
• General accessibility guidance for forms by US Web Design System

現在の日付を表示

  カレンダーピッカーでは、ユーザーに［現在の日付］と［選択内容］の表示が重要です。現在の日付を強調表示することで、ユーザーが選択する際の基準となり、特に旅行や予約の際に重要です。

「現在の日付」と「ユーザーが選択した日付」の区別は、混乱を避けるために非常に重要です。マテリアルUI では、現在の日付にはアウトラインを、選択された日付には陰影のある背景を使用することで、これをハッキリと区別しています。

空いてない日をブロックする

日付を選択しても、その日が利用できないことが判明するのは、最もイライラするユーザー体験のひとつであり、それでユーザーは選択をやり直して、空きを見つけるまで試さないといけません。そこで、空いてない日付をブロックすることで、ユーザーはカレンダーに戻ることなく選択することができます。

追加の重要な意思決定データを提供する

Booking.com や Airbnb などの多くの旅行予約アプリは、ユーザーが最良の料金を見つけることができるように、各日付の下に１泊あたりの料金を表示しています。この情報でユーザーはお金を節約できるため、ポジティブなユーザー体験が生み出されます。

不要なデータの削減

カレンダーのUIは、ごちゃごちゃして煩わしい場合があります。デザイナーは、カレンダーを読みやすくしてタスクを完了しやすくするために、UI要素、線、その他のコンテンツをできるだけ減らさなないといけません。例えば、ユーザーは「生年月日」を選択する際に「曜日」を見る必要はありませんよね。

また、UXデザイナーは、カレンダーの背後にあるコンテンツを遮断するために、モーダルオーバーレイに無地の背景を使わないといけません。

UXPinで 日付ピッカー をデザインする方法

UXPinは、インタラクティブで動的な忠実度の高いプロトタイプを作成するための高度なプロトタイピングツールです。大抵のプロトタイピングツールでは、１つのインタラクションをプロトタイプ化するために複数のアートボードを作成する必要がありますが、UXPinではステート、Variables（変数）、条件を使って完全に機能するページを作成できます。

UXPin に日付ピッカーを挿入するには、まず垂直ツールバーの「Search All Assets（すべてのアセットを検索）」の検索アイコン（command + F / Ctrl + F）をクリックします。

次に、入力フィールドで「date（日付）」または「calendar（カレンダー）」を検索します。

オプションは［Components（コンポーネント）］ の見出しの下に用意されるものもあり、タッチユーザーに最適なものもあれば、キーボードユーザーに最適なものもあるでしょう。ただし、「Input calendar（カレンダー入力）」は、タッチユーザーにはカレンダーを提供し、キーボードユーザーには入力フィールドを提供します。

 日付ピッカー コンポーネントのスタイリング

UXPin のコンポーネントはすでに優れたUXを提供するようにデザインされていますが、皆さんはブランドが持つビジュアルアイデンティティやアプリ/ Web サイトの美的感覚に合うようにスタイリングしたいと思うでしょう。そのためには、右側のプロパティパネルを使いましょう。

UXPinのデザインシステムライブラリ（特にテキストスタイルとカラースタイル）を使っている場合は、すでに確立されているスタイルを活用することで、日付ピッカー コンポーネントとデザインの他の部分の視覚的な一貫性をある程度維持できます。

コンポーネントをカスタマイズするには、スタイルを設定したいレイヤーを選択し、「デザインシステムライブラリ」の アイコン（⌥ + 2 / alt + 2）をクリックして UXPinのデザインシステムライブラリに移動し、レイヤーに適用したいスタイルを選択します。

実際のコンポーネントで代用

デザイナーは、同じコンポーネントを何度も挿入したりスタイリングしたりして毎回最初からいちいち作るのではなく、デベロッパーによってすでに構築されたリリース可能なコンポーネントを使用できます。コーディングなしで Git、Storybook、または NPM からコンポーネントを取り込むことができ、見た目も機能も本物と同じです。これを実現できるUXPinが持つテクノロジーについてご覧になりませんか。こちらからぜひアクセスをリクエストしてください。

The post UI を魅力的にする 日付ピッカー のデザイン 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.

プロトタイプ はデザインプロセスにおいて最も重要なステップの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.

新しいプロジェクトの開始時に企業が考えることの一つとして、「コンポーネントライブラリを採用するか、ゼロから始めるか 」というのがあります。メリット・デメリットの比較検討が必要であり、プロジェクトの範囲と優先順位の考慮も必要です。 その際に最も人気のあるコンポーネントライブラリの1つがMUIで、GoogleのMaterial Design UIを最初にモデル化された包括的なReact UIライブラリです。

今回はMUIについてみていきましょう、なぜMUIを使いたいのか、他のコンポーネントライブラリとの違いは何か、そして次のプロジェクトのデザインの始め方ついてお話します。 コードでデザインってどんな感じだろう、と思ったことはありませんか？

UXPin Mergeは、コードコンポーネントをレポジトリからUXPinのエディタに同期させる画期的な技術です。この強力なツールにより、デザイナーは一行のコードも書かずに、きちんと機能するコードベースのプロトタイプを作成することができます。Merge の詳細と、次のプロジェクトのためのアクセス要求方法についてご覧ください。

また、UXPinのトライアルでは、コードコンポーネントを使ったデザインがどんな感じか試すことができ、トライアル中にMUI 5キットを用意していますので、MUIを間近で体験することができます。14日間の無料トライアルに登録して、MUIをぜひご利用ください。

MUI とは

MUIは、デザイナーやデベロッパーがReactアプリケーションを構築するのに使えるUIコンポーネントの巨大なライブラリです。このオープンソースプロジェクトは、コンポーネント作成のためのGoogleのガイドラインに従っており、基礎的なUI要素と高度なUI要素のカスタマイズ可能なライブラリが備わってます。 また、MUIはReactのテンプレートやツールを販売しており、プロジェクトに合わせて微調整できる既成のユーザーインターフェースがあります。

MUI のような コンポーネントライブラリ を使う理由

デザイナーは、新製品の開発や既存プロジェクトの機能追加にUIキットを使用することがよくありますが、これらのライブラリにより、デザイナーは必要なコンポーネントをドラッグ＆ドロップして、さっとインターフェースのデザインができます。

MUIコンポーネントライブラリを使用する7つの理由を探ってみましょう。

1. 市場投入までの時間を短縮

競争の激しい今日のテク環境において、市場投入までの時間は、企業が常に最適化を求めるメトリクスとなっています。コンポーネントライブラリを利用することで、デザイナーやデベロッパーは、すぐに使える徹底的にテストされたUI要素で、大きな幸先のいいスタートを切ることができます。

デザイナーは、要素をドラッグ＆ドロップしてユーザーインターフェースを構築し、製品やブランドの要件に合わせてコンポーネントをカスタマイズすることができます。

デザインチームは、UIコンポーネントをゼロから構築してテストすることに煩わされることなく、優れたカスタマーエクスペリエンスのデザインにより多くの時間を費やすことができ、市場投入までの時間が大幅に短縮されます。

デザイナーがプロトタイプの作成、テスト、反復を速くできるため、ユーザビリティテストはずっと速くなります。テスト中にユーザーインターフェースがうまく機能しない場合は、膨大なライブラリからその場で変更を加え、参加者やステークホルダーから即座にフィードバックを得ることができます。

デザインハンドオフでは、エンジニアはコンポーネントライブラリをインストールし、プロトタイプやスタイルガイドからの変更をコピー＆ペーストすることで、ゼロから始めることなく製品を開発することができます。

2. 信頼できる唯一の情報源（Single source of truth）

信頼できる唯一の情報源（Single source of truth）の維持は、デザインシステムのガバナンスにおける最大の課題の1つです。製品チーム、UXデザイナー、およびデベロッパーが、同期していないデザインシステムを使用していることは珍しいことではなく、その結果、エラーや再作業が発生し、DesignOpsは大きな課題に頭を抱えることになります。

MUIのコンポーネントライブラリを使用することで、デザインと開発の間に信頼できる唯一の情報源（Single source of truth）を作成しながら、こういった課題を大幅に減らすことができます。デザイナーとエンジニアは別々のデザインシステム（デザイナーは画像ベース、エンジニアはコードベース）を持つことになりますが、MUIは彼らに同じスタートブロックを提供します。

UXPinのコードベースエディターでMergeを使用すると、デザイナーとエンジニアは同じデザインシステムのコンポーネントを単一のレポジトリで同期して使用します。レポジトリが更新されると UXPin に同期され、デザイナーに変更点が通知されます。Reactコンポーネント ライブラリにはGitを、その他の一般的なテクノロジーにはStorybookを使用してMergeを接続できます。

3. デザインの一貫性

一貫性は、ユーザーエクスペリエンス、信頼の構築、ブランドロイヤリティには欠かせません。同じUIコンポーネントを使用することで、デザイナーは一貫性を高め、エラーや手戻りを最小限に抑えることができます。

4. 拡張性

拡張性もまた、製品デザインの重要な要素です。ゼロからデザインシステムを構築する場合、デザイナーは製品をスケールアップする前に、新しいコンポーネントのデザイン、プロトタイプの作成、テストが必要です。

MUIの包括的なUIライブラリにより、デザイナーはプロトタイプに必要なコンポーネントを検索して、すぐに拡張することができ、エンジニアは、MUIから同一のReactコンポーネントをコピー＆ペーストし、デザイナーの仕様に合わせてカスタマイズできます。

MUI Xには、データグリッド、日付ピッカー、チャート、ページネーション、フィルタリングなど、複雑な製品をより速く拡張するためにチームが使用できる高度なReactコンポーネントのライブラリが含まれています。

5. 容易なメンテナンス

MUIのようなコンポーネントライブラリには、コンポーネントのインストール、使用、更新、カスタマイズのための詳細なドキュメントが付属しています。デザイナーやエンジニアは、このフレームワークを使って企業のデザインシステムの維持ができ、ガバナンスシステムやプロトコルを簡単に確立することができます。

また、MUIには、あるバージョンから次のバージョンへの移行のためのハウツーガイドもあるので、企業はMUIがアップデートをリリースするたびに、最新のUIスタイル、テクノロジー、トレンドを利用できます。

6. アクセシビリティ

デザインシステムを設定した経験のある方は、すべてのコンポーネントがアクセシビリティ基準をクリアするのに必要な時間と費用をご存知でしょう。MUIのデザイナーは、WCAD 2.0のアクセシビリティ・ガイドラインを満たすようにコンポーネントをデザインすることに細心の注意を払い、研究者やデザイナーの負担を軽減しています。

ただし、アクセシブルなコンポーネントを用いてインターフェースをデザインする場合でも、ナビゲーションやユーザーフローをテストして、製品全体がアクセシビリティの基準を満たしていることの確認が必要であることに留意することが重要です。

7. スキルの強化

MUIのオープンソースコンポーネントUIライブラリは、スタートアップ企業や若い起業家が新製品を開発する際に、特に教育、指導、技能伝授を受けられない発展途上国において、その能力が発揮されるようにします。

また、チャリティ団体、非営利団体、NGOなど、製品やツールを開発したいがデザインシステムに投資する予算がない場合にも、このライブラリーは非常に有益です。 誰でもMUIの優秀なデザイナーやデベロッパーのスキルを活用し、フォーチュン500社で使用されているのと同じコンポーネントライブラリを使用して、洗練されたデジタル製品を開発し、グローバル市場で競争することができます。

MUIが他の コンポーネントライブラリ と異なる点

GoogleのMaterial Design UIは、間違いなく世界で最も優れた、最も包括的なデザインライブラリの1つであり、MUIは、Material Designの上に構築することで、それに匹敵するReactコンポーネントライブラリを提供します。

MUIはTheming機能で簡単にカスタマイズでき、ライブラリのドキュメントも充実しているため、多国籍企業や製品アイデアを持つ一人のデベロッパーでも製品の構築が可能です。 MUIは非常に広く使われているため、デザイナー、研究者、デベロッパーからなる大規模なグローバルコミュニティが存在し、指導やサポートを受けることができます。

Reactが最も人気のあるフロントエンドフレームワークの1つであるという事実も加わり、MUIは魅力的なコンポーネントライブラリとなっています。

興味深い事実と数字

ここでは、MUIの興味深い事実と数字をご紹介します。 注：MUIの統計は上昇を続けており、これは、2022年1月時点のものです。

• MUIは、Googleと差別化するために名称を変更することにして、2014年にMaterial UIとしてスタートしましたが、多くの人がMaterial UIはGoogleの製品だと思い込んでいるようでした。
• MUIには2,200人以上のオープンソースの貢献者がいます。
• GitHubで73,700スター以上獲得しています
• MUIが実施した2020年調査の回答者1,488人のうち、35％のデベロッパーが従業員5人以下の企業で働いていました。
• 調査では、27％のデベロッパーがエンタープライズ・アプリケーションにMUIを使用し、20％が管理者用ダッシュボードにライブラリを使用しています。

UXPinのMUI5キット

UXPin MergeのMUI統合で、UI Reactコンポーネントでプロトタイピングの力が発揮されます。 MUIは、きちんと機能するコードコンポーネントでのデザイン作成をサポートします。信頼できる唯一の情報源（Single source of truth）により、デザイナー、デベロッパー、製品チームなどは、エラーや摩擦を減らし、より効果的にコラボレーションを行うことができます。 忠実度が高いほど、参加者とステークホルダーから有意義なフィードバックを得られるような、より良いユーザビリティ・テストとなります。

その結果、全体的なユーザー体験が向上し、ビジネス価値が高まります。 UXPinのMUIキットの詳細と、この画期的なコードベースのデザイン技術へのアクセスをリクエストするための申し込み方法についてご覧ください：UXPinのMUIライブラリ：より速くデザインする。

UXPin Mergeによるコンポーネントライブラリの同期

UXPin Mergeで、Gitレポジトリ、Storybook、またはMUIからコードコンポーネントを同期し、実際のコードで完全に機能する高忠実度のプロトタイプの構築ができます。 メニュー、フォーム、タブ、データテーブル、日付ピッカー、アコーディオンなどの複雑なUIコンポーネントは、UXPinのコードベースエディタに機能が搭載されており、デザイナーは、ユーザーインターフェースの構築に必要なMUIコンポーネントをドラッグ＆ドロップします。

標準的な画像ベースのデザインツールと同じように、コンポーネントのプロパティパネルを調整することができます。 UXPin Mergeの優れた点は、デザイナーがコードベースのコンポーネントを使用してデザインするのに、新しいスキルセットを学んだり、コードの書き方を知る必要がないことです。

ワークフローは変わりませんが、プロトタイプの忠実度と機能性が大幅に向上します! デザイナーが Merge を使用せずに UXPin を使用する場合でも、ステート、Javascriptのようなインタラクション（条件付きインタラクションを含む）、変数、エクスプレッション、オートレイアウトなど、コードベースの高度な機能を利用できます。

The post MUI とは？MUIについて何を把握すべき？ appeared first on Studio by UXPin.

最新のウェブサイトとアプリは、ユーザーインターフェースの開発、維持、拡張をフロントエンドフレームワークに依存しています。ReactのJavascriptライブラリは、デジタル製品を構築するための多くのコンポーネントライブラリがある、間違いなく最も人気のあるフロントエンドフレームワークです。

そこで今回は、主要な Reactコンポーネントライブラリと、次のプロジェクトに適したライブラリの選び方について見てみましょう。

UXPin Mergeで、デザイナーがコードコンポーネントを使って完全に機能するプロトタイプを作成できるように、ReactのコンポーネントライブラリをGitのリポジトリからデザインエディターに同期できます。

 Reactコンポーネントライブラリを選ぶ時に検討すべき6つのこと

これから「Reactのコンポーネントライブラリを選ぶ時に検討すべき6つのこと」を述べますが、これは決して完全なリストではありません。中には、現在作成している製品に当てはまらない場合もあります。

１）人気

各 Reactライブラリ の人気は、GitHubのスター数で手軽に比較できます。 毎週ダウンロードされるNPMで、コンポーネントライブラリの使用者数もわかります。 一般的に言って、 Reactライブラリ の人気が高いということは、それだけ確立され、目的を果たしているということです。

２）問題点

星評価と同様に、ライブラリのGitHubの問題で、そのライブラリの人気と維持の程度について色々とわかります。 これは、たとえライブラリに問題が最小限しかないとしても、作ろうとしている製品に影響を与えるものはないのでしょうか？

３）ドキュメントとサポート

 Reactライブラリ を選ぶ時、ドキュメントは重要な検討事項です。 例えば、問題が発生するたびにStackOverflowが実行されるのを避けたいとか、特定のコンポーネントの使用方法を知りたい時など、 優秀なドキュメントは定期的に更新されるので、ライブラリを包括的に理解できます。 また、 Reactライブラリ が作成者から直接サポートされるのか、専用のコミュニティフォーラムを介してサポートされるのかを把握しておきたいのではないでしょうか。 課題を克服するために専門家のアドバイスが必要な場合があるので、問題を迅速に分類し、プロジェクトを継続させるためには（それが有料でも）十分なサポートを得られるかが重要です。

４）カスタマイズ

コンポーネントライブラリの使用における欠点の1つは、その制約とカスタマイズの欠如です。 一部のプロジェクトではカスタマイズは重要ではありませんが、独自のUIを開発する場合は、独自のデザインシステムを構築する機能が不可欠です。 ライブラリのドキュメントを調べて、コンポーネントをカスタマイズするための手順が提供されているかどうかと、いかに簡単に思い通りの結果に辿り着けるかを確認してください。

５）ブラウザ／デバイスの相性

デザインしているアプリによっては、コンポーネントライブラリのブラウザとモバイルの相性を知りたい場合があります。 最も手っ取り早くブラウザとデバイスの相性を調べるには、GitHubの問題かStackOverflowの検索です。

６）アクセシビリティ

アクセシビリティはややこしいですが、デジタル製品のデザインには必要な検討事項です。 Reactライブラリ がコンポーネントをデザインするときにアクセシビリティが考慮されていないと、あなたはそれを自分でしなければならなくなり、3番のドキュメントと4番のカスタマイズに戻るということです。

 Reactコンポーネントライブラリ：トップ５

我々が独自に選んだReact ライブラリの２０２２年のベスト５です

注：GitHubスターとNPMのダウンロードに関する情報は、2022年1月時点のものです。

1) MUI

• GitHub スター数：73.8k
• 週間 NPM ダウンロード数: 2.3M
• 公式サイト: mui.com

MUIは、最も広く使用されている Reactコンポーネントライブラリ の1つです。 このライブラリは、世界で最も広範なUIキットの1つであるGoogleのマテリアルデザインUIに基づいて構築されています。 

MUI- テーマとカスタマイズ

MUIの最大の魅力の1つは、コンポーネントにテーマを設定してカスタマイズできることです。 デザイナーは、MUIを基盤として使用して、デザインを速く拡張できますが、製品または組織のカスタマイズデザインシステムを構築するのにライブラリを適応させることもできます。 デザイナーは、コンポーネントをカスタマイズする際のユーザビリティ問題を回避するために、マテリアルデザインとMUIの包括的なガイドラインを活用できます。 MUIには、ダッシュボード、eコマースWebサイト、ランディングページなどのReactテーマテンプレートを購入するためのテンプレートマーケットプレースもあります。 

MUI-　ドキュメント

MUIのドキュメントは、そのコンポーネントライブラリと同じくらい詳細で包括的なものです。 そのキュレーターは、デザイナーとデベロッパーに、インストール、使用法、カスタマイズ、アクセシビリティなどの一つひとつの手順とガイドラインを提供するために細心の注意を払っています。 YouTubeには、MUIのユーザーと寄稿者からなる大規模なコミュニティからの、最善の方法、チュートリアル、ヒントとコツ、ハウツーガイドなど多数のビデオがあります。

2) React-Bootstrap

• GitHubスター数：20.3k
• 週間 NPM ダウンロード数。879,780
• 公式サイト：react-bootstrap.github.io

2011年に設立されたBootstrapは、WebサイトおよびWebアプリケーション向けの最も古くから人気のあるオープンソースCSSフレームワークの1つです。 Bootstrapは、モバイルファーストのWeb開発を優先する最初のCSSフレームワークの1つであり、設計者がレスポンシブWebサイトを早く構築および拡張できるようにしました。 React-BootstrapはBootstrapJavascriptに取って代わり、JQueryのようなリソースを大量に消費する依存関係を捨てて、包括的で単純な Reactコンポーネントライブラリ を構築しました。

React-Bootstrap–コンポーネント

Bootstrapを熟知していたら、React-Bootstrapの一般的な外観のコンポーネントライブラリにすぐに気付くでしょう。CSSの前身と同様に、React-Bootstrapは、モバイルアプリケーションよりもWebデザインを優先するUIコンポーネントに特化しています。

React-Bootstrap–テーマ設定とカスタマイズ

React-Bootstrapは非常に一般的で、スタイリングが最小限であるため、デザイナーは簡単に調整やカスタマイズができます。 Bootstrapで確定されたクラスとバリアントにより、CSSを使用してコンポーネントを簡単に選択およびカスタマイズできます。 Bootstrapの長い歴史と幅広い使用により、管理ダッシュボードから多目的Webサイト、eコマース、ランディングページなど、あらゆるものに対応する無料のプレミアムReact-Bootstrapテーマとテンプレートがたくさん見つかります。

React-Bootstrap – ドキュメント

React-Bootstrapには、MUIほど詳細で包括的ではありませんが、優秀なドキュメントがあります。 React-Bootstrapのシンプルさと命名規則により、このドキュメントはReactを理解、使用、カスタマイズするのが最も簡単なライブラリの1つになっています。

３）Semantic UI React

• GitHubスター数：12.6k
• 週間 NPM ダウンロード数: 218,320
• 公式サイト：react.semantic-ui.com

Semantic UIReactは、React-Bootstrapの代替として人気です。 React-Bootstrapのように、Semantic UIは、寄稿者がReactコンポーネントを構築するために使用したオープンソースのCSSフレームワークとして始まりました。

Semantic UI React – コンポーネント

Semantic UI Reactには、WebサイトおよびWebアプリケーション用の幅広いUIコンポーネントがあります。 コンポーネントは、ミニマムでシンプルなまま、Bootstrapよりもクリーンでモダンなスタイルです。 Semantic UI Reactは、1,600を超える無料アイコンと7,864 Pro（有料）を含むFontAwesomeアイコンセットを使用しています。

Semantic UI React – テーマ設定とカスタマイズ

セマンティックUIは、コンポーネントが簡単にカスタマイズできる、直感的でわかりやすい命名規則を使用しています。 ドキュメントには、SemanticUIReactを使ったテーマ設定について一つ一つ説明したガイドも含まれています。 Semanticには、MUIやReact-Bootstrapにあるようなテンプレートオプションがほとんどありません。

Semantic UI React – ドキュメント

Semantic UI Reactの対話型のドキュメントには、コードを検査してコンポーネントを色々と試すためのCodeSandboxの事例が用意されています。 また、ドキュメントでは、サンプル、コード、プロップを切り替えて、多角的にコンポーネントを可視化することもできます。

4) Ant Design (AntD)

• GitHubスター数：76.6k
• 週間 NPM ダウンロード数：681,434
• 公式サイト：ant.design/docs/react/introduce

Ant Design（AntD）は、中国最大のオンラインマーケットプレースであるAlibabaの親会社であるAntGroupによって開発された、もう1つの多くの人々から利用されている人気の Reactコンポーネントライブラリ です。 MUIと同様に、AntDにはWebアプリケーションとモバイルアプリケーションの両方に対応する膨大なコンポーネントライブラリがあります。

Ant Design – コンポーネント

AntDには、モバイルデバイス用の無限スクロールやPull-to-Refresh（引っ張って更新）などのUIパターンを含む、デスクトップおよびモバイル用の大規模なコンポーネントライブラリがあります。 Ant Design ProComponentsには、複雑なインターフェースを構築するための一連の高度なReact UI要素（MUI Xに類似）があります。

また、プロジェクトを開始してUIをもっとずっと速く構築するための、既成のテンプレートとスキャフォールドの膨大なライブラリもあります。

Ant Design – テーマ設定とカスタマイズ

AntDは、デベロッパー向けのデザイントークンまたは変数を使用して、コンポーネントをカスタマイズおよびテーマ化します。 UIライブラリにはLessが使用され、GitHub内のすべてのAntD変数の完全なリストが備わってます。

Ant Design – ドキュメント

AntDの包括的なドキュメントには、使用とカスタマイズについての一つ一つの手順が記載されています。 CodeSandBox、CodePenやStackBlitz内の各コンポーネントを検査することもできます。

5) Chakra UI

• GitHubスター数：22.8k
• 週間 NPM ダウンロード数：182,166
• 公式サイト：chakra-ui.com

Chakra UIは、セグン・アデバヨ氏によって設立された、ナイジェリア拠点の Reactコンポーネントライブラリ です。 Chakraの無料のコンポーネントライブラリかChakra UI Proのいずれかを選択でき、それにはインターフェースをより速く構築するために予め作られた複雑なUIコンポーネントがあります。

Chakra UI – コンポーネント

Chakra UIのコンポーネントライブラリは、WebベースのアプリケーションとWebサイトを対象にしています。 ライブラリは、好みに応じて、TypeScriptまたはJavascriptReactコンポーネントのいずれかを選択できます。 チャクラのデザイナーはWAI-ARIA規格に沿っているため、すべての要素にアクセスできます。

スタイリッシュなUIコンポーネントは、Semantic UIに似ており、濃淡のオプションを利用できます。

Chakra UI – テーマ設定とカスタマイズ

Chakraのデザイナーは、製品とブランドの要件を満たすために、変数を使用して完全にカスタマイズされるUIライブラリを作成しました。Charkaは、Create React App、Framer Motion、React Hook Form、およびReact Tableとも統合して、ライブラリ使用とカスタマイズを拡張します。

Chakra UI – ドキュメント

Chakra UIには、ガイド、ビデオチュートリアル、事例、FAQ、主要チームメンバーと接続するためのリンク、およびアクティブなDiscordコミュニティを含む優秀なドキュメントがあります。

åChakraのユーザーは、 Reactライブラリ に非常に情熱的で熱心であり、質問できる相手が必ずいます。

UXPin MergeでReactコンポーネントを使ったデザイン

 Reactライブラリ を使用する際の課題の1つは、デザイナーと開発者が同じコンポーネントを使用しても、デザインシステムは別々だということです。

デザイナーはベクトルベースのデザインシステムを使用し、開発者はコードベースのReactコンポーネントを使用します。 一部のライブラリにはデザインツール用のUIキットが備わってないため、デザイナーはライブラリを再作成するか、第三者の作成者を見つける必要があります。

UXPinでGitHubから Reactコンポーネントライブラリ を分離し、Mergeを使用してレポジトリをデザインエディターに同期できます。 デザイナーは、レポジトリからのコードコンポーネントを使用して、完全に機能するプロトタイプを作成します。 デベロッパーがレポジトリを更新すると、変更は自動的にUXPinに同期されるため、信頼できる唯一の情報源が作成されます。

ということは、個別のデザインシステムはもういらないのです！

こちらでUXPin  Mergeの詳細、アクセスのリクエスト法を確認してみてください。 また、Vue、WebコンポーネントやEmberなどより多くのフロントエンドフレームワークにStorybookと統合し、Mergeを使うことができます。

The post おすすめ５選 – Reactコンポーネントライブラリ appeared first on Studio by UXPin.

レスポンシブなWebサイト、モバイルフレンドリーなデザイン、アダプティブな画像は、UX（ユーザーエクスペリエンス）にとって重要です。 そのため、レイアウトを複数使用せずに、これらのような画面のサイズに合わせたプロトタイプを即応的にデザインできる機能があると時間の節約につながり、開発フローで有益となるでしょう。実はこれは、UXPin Mergeが持つ 実際のReactコンポーネントを使ってコードとデザインするという機能性によって実現可能なのです。

 Mergeが持つ機能をさっそく試してみたいという方は、ぜひこちらからアクセスしてください。認証プロセスとセットアップ完了後、すぐにレスポンシブなプロトタイピングを開始可能です。 MergeではGitを使用しているためデータの保存場所は関係なく、GitHubとの統合も必要ありません。お好きなコードベースプラットフォームをお使いください！  

 レスポンシブデザイン の問題

  最近のプロトタイピングツールの一般的な要件に、「デバイスの種類に合わせた切り替え機能」や「プロトタイプ内のコンポーネントを利用可能な範囲で自動調整できる機能」があります。これらの レスポンシブデザイン 機能は、UXPinを含むその他プロトタイピングツールのデフォルト設定では備わっていません。多くの場合で、複数のレスポンシブレイアウトを、テストしたいデバイスサイズごとに１つずつ作成するしかありません。ただ、このやり方の場合だとプロトタイプにインタラクティブ性がなく、特にモバイルデバイスやレスポンシブなサイトを日常的にデザインしていては生産性が低くなってしまいます。

例として、Material UIライブラリを使って、上記で述べた問題を説明します。下のビデオでは、Gridコンポーネントをx-smallのデバイスサイズで12 列、smallデバイスで6列になるように設計しています。しかし、このレイアウトコンポーネントとUXPinのキャンバスは関係ないので、コンポーネントでの変更はキャンバス上には反映されません。

Material UIコンポーネントは全て最初からレスポンシブですが、基本的にデフォルトでキャンバスサイズが固定されているため、UXPin Mergeはコンポーネントのメディアクエリを使えません。そのため、ページの更新やキャンバスサイズを変更しても、コンポーネントのレイアウトには反映されず、元のデザインのままとなります。

 Mergeの「 Code-to-Design 」ソリューション

  そこで UXPin Mergeの出番です。 Mergeでは実際のReactのコードを使ってデザインできます。コードでデザインすることで、ベクターベースのデザインツールのような制限に縛られることはなくなります。想像力と直感的なプログラミングを組み合わせることで、制限を越えて自由にコードを作成できます。それが Merge の魅力です。

そのため、レスポンシブなプロトタイピングでの問題を解決するには、さまざまなデバイスのサイズに対応可能なコンポーネントを作成し、キャンバスにある全てのコンポーネントのレイアウトを管理するプロトタイプの親コンポーネントとして使いましょう。本記事では、レスポンシブコンポーネントの作成方法を紹介し、コード化したデザインシステムを今日からレスポンシブにすることができます。

レスポンシブコンポーネントの作成

  まず、ラッパーとして機能する「DeviceViewer」という名前の React コンポーネントを作成します。ネストされたサイズ変更可能な IFrameコンポーネントにプロップとスタイルを渡します。コンポーネントがIFrame内にネストされると、キャンバスサイズを固定する必要なくなるため、すべてのメディアクエリ、レスポンシブプロパティ、およびスタイリングが完全に機能します。複数のページを作成することなくレスポンシブなプロトタイプをテストできるようになります。

下の画像は、DeviceViewerの簡略化された構造です。

const useStyles = makeStyles((theme) => ({···
}));
 
function DeviceViewer(props) {
 const classes = useStyles(props);
 const [frameWidth, setframeWidth] = React.useState(0);
 const [frameHeight, setframeHeight] = React.useState(0);
 const [deviceView, setdeviceView] = 
 React.useState(props.defaultView);
 
 React.useEffect(() => {···
 }, [props]); 
 
 const handleChange = (event) => {
   setdeviceView(event.target.value);
 };
 
 const setViewportDimensions = () => {···
 };
 
 const IFrameResize = () => {···
 };
 
 return (
   <div className={classes.root}>
     <Grid···
     <Box pb={3}>
       <IFrame···
     </Box>
   </div>
 );
}

お分かりかもしれませんが、これはMaterial UIライブラリを使ったReactコンポーネントのかなりシンプルなものです。スタイル、ステートメント、onChangeイベントハンドラ、HTML要素を構造化する 「return文」があります。

return文の内部には、Grid、Box、IFrameコンポーネントがあります。Gridコンポーネントは、デスクトップ、モバイル、タブレットなどの選択可能なビューポートサイズのドロップダウンリストであり、Boxは、基本的に IFrame コンポーネントを含むためのスタイリングラッパーです。

useEffect()

useEffectとデフォルトのプロップを使って、デバイスのビューサイズはステートの読み込みと更新時に変更され、その都度、ネストされたコンポーネントのプロップとスタイルが「前のIFrame」 から「新しいIFrame」 に渡されます。

if文（擬似コードで以下にあります）は、ユーザーがUXPinのエディタまたはプレビューモード（Preview）に合わせて、キャンバスに追加するスタイリングを決定します。

React.useEffect(() => {
   setdeviceView(props.defaultView);
 
   // We’ve redacted this code for readability 
   // UXPin mode change CSS handling
   if (in EDITOR mode)) {
     // remove drop-down styling
   } else if (in PREVIEW mode)) {
     // Change canvas margin properties
   }
 }, [props]);

handleChange()

IFrameを更新するときにデバイスのサイズを追跡するのに、ドロップダウンリストの値を参照する onChangeのhandleChange()関数をターゲットの値を渡します。

const handleChange = (event) => {
   setdeviceView(event.target.value);
 };

setViewportDimensions()

これらの値は、setViewportDimensionsで行ったようにハードコードすることもできますし、動的なキャンバスサイズが必要な場合はjsonとして渡すこともできます。

const setViewportDimensions = () => {
   switch (deviceView) {
     case "desktop":
       setframeWidth(1280);
       return;
     case "tablet":
       setframeWidth(768);
       setframeHeight(1024);
       return;
     case "tablet-landscape":
       setframeWidth(1024);
       setframeHeight(768);
       return;
     case "mobile":
       setframeWidth(375);
       setframeHeight(667);
       return;
     case "mobile-landscape":
       setframeWidth(667);
       setframeHeight(375);
       return;
     default:
       return;
   }
 };

ちなみにUXPinのプレビューモードで、setViewportDimensionsで設定したセレクトメニューはこのような表示となります。

IFrameResize()

IFrameResizeは、ステート読み込み時と更新時にIFrameコンポーネントから実行されます。IFrameResizeは、setViewportDimensionsを呼び出して、ステートのプロップに基づきIFrameのサイズを変更し、現在のIFrame（#target）のコピーを作成し、そのプロップとスタイルを新しいIFrameに渡します。こうすることで、新しいIFrameが読み込まれると、プロップとして渡されたコンポーネントが、新しい IFrameの寸法内に配置されます。

実際のIFrameコンポーネントとドキュメントを比較してすると、内部にネストされる子コンポーネントにデータとCSSを渡すために必要なプロップ全てが用意されており、サンドボックスタグは、Frameがキャンバス自体と通信できるようにするために追加されています。

そしてFrameContextConsumerは、jssを全て受け取り、指定された場所にcssルールを挿入し、子コンポーネントに渡します。

IFrameコンポーネントにプロパティを渡すラッパーコンポーネント（DeviceViewer）であり、ページの更新やレイアウトを直接変更することなく、子要素を更新したり変更したりすることができます。

まとめ

ここまで紹介したUXPin Mergeでのソリューションは他社のデザインツールと比較してみると、非常に画期的なアイデアであることがお分かりいただけると思います。Mergeでは、プラグインの作成または編集、APIを呼び出してデザインツールに追加機能を追加する必要はありません。代わりに、実際のReactコンポーネントで実装できるものは全てMergeで全く同じように使うことができます。これによって、デザインプロセスは促進され、レスポンシブなWebデザインにすぐに対応できる柔軟で直感的なコンポーネントを自由に作成できます。

UXPin Mergeが、提供開始当初では想像できないほど、国内外問わず多くの皆様にデザインワークフローで採用していただいており、さまざまなユースケースもいただきました。本記事で、少しでもUXPin Merge について知っていただけると幸いです。

 Merge を最大限に活用するために、ぜひこちらのUXPinのコミュニティでアイデアを共有してください！

まずは14日間の無料トライアルを始めたい方はこちらより。

The post UXPin Merge による レスポンシブデザイン appeared first on Studio by UXPin.

どんなに優れたアイデアでも、必ず成功するとは限りません。どんなに新しいコンセプトを確信していても、実際にフィードバックを得て、それを基にして良い製品を作るしかありません。

だからこそ、プロジェクトの規模にかかわらず、プロトタイプを作り、それをテストすることは必要不可欠なのです。これは、プロジェクト全体の礎となるものです。

最初は難しく感じるかもしれませんが、実際にプロセスに参加してみると、直感的に理解することができます。また、徹底的に行うことで、長期的にはリソースを節約し、ローンチをできるだけスムーズに行うことができます。

ここでは、ユーザーテストを最大限に活用するためのヒントをご紹介します。

1. 早めにテストを始める

製品が完成するのを待っていては、貴重なインサイトを逃してしまいます。もちろん、良いアイデアを思いついたその日にユーザーテストを開始することはできませんが、発売の準備が整うまで我慢するべきではありません。

すべてのディテールをカバーすることはできませんが、早い段階でインサイトを収集することで、問題点を修正したり、最初から問題を取り除いたりすることができます。自分のためにデザインしているのではないということを常に念頭に置き、修正に時間がかかりすぎる前に、ユーザーの協力を得て問題点を発見する必要があります。

プロトタイプの各段階で何ができるかを意識していれば、失敗しても次のバージョンを改善するための教訓になります。また、長い目で見れば、発売後に発生する修正に時間をかけずに済むため、コスト削減にもつながります。通常、期待値を設定するのに役立つ方法で、フェーズを分割することができます。

• ワイヤーフレームやスケッチは、1ページだけのシンプルな構成であるため、最小限の洞察しか得られません。全体像を把握することはできませんが、ユーザーがコンセプトをどのように理解し、次のステップに進むのかという基本的な期待を形成することができます。
• 低～中程度のフィデリティのプロトタイプ – これらのプロトタイプでは、UIインタラクションに関する基本的な洞察や、コンテンツを理解した場合にユーザーがどのように先に進むか、何か邪魔なものがないかなどの収集を開始できます。このステップは、後々のための強固な基盤を形成するのに役立ちます。
• ハイフィデリティ・プロトタイプ – 技術的には完全な製品ではありませんが、この段階では、ユーザーの問題点や、ユーザーがほとんどの要素と相互作用する方法をすべて把握することができます。この段階では、最終製品を作る準備ができているかどうか、対応しようとした問題を解決できたかどうかがわかるはずです。

すべてのプロセスを踏む時間がない場合や、すべてのインタラクションを備えたハイフィデリティ・プロトタイプの構築に時間がかかりすぎる場合は、代わりに完全にインタラクティブなコード・コンポーネントでプロトタイプを構築することができます。開発者のライブラリから直接提供されるUIコードコンポーネントは、デザインプロセスを10倍速くするのに役立ちます。10倍速くするのに役立ちます。

2. タスクをマップ化する

すべてのテストセッションには、明確な目標が必要です。もちろん、得られるすべての知見を得ることが目的ですが、効率的に、できるだけ多くの問題を解決するために、実行可能なプランを用意しておくべきです。

テストユーザーにタスクを提供する際の最も一般的な間違いのひとつは、漠然とした質問を多用することです。

具体的な経験についての答えを得るためには、簡単に追跡でき、洞察を集めることができる実行可能なステップを目指しましょう。例えば、「全部動くのか」というような無意味なテーマではなく（ネタバレになりますが、プロトタイプなので動きません）、明確な次のステップが得られるようなものを目指しましょう。

まず、より多くの情報を得たい製品の側面に基づいて各セッションを制限し、優先順位で分類します。そして、例えば「インターフェイスを見て、ビデオを編集するオプションを見つける」とか「チェックアウトページに移動する」など、テスターに何を期待しているのかを説明しましょう。

これらはすべて、望ましいステップバイステップのプロセスや必要な時間など、達成すべきゴールもあるはずですが、ユーザーはテストを成功させるために情報を持っている必要はありません。

プロトタイプをテストする際には、ユーザビリティが重要であることを忘れてはいけません。この段階では、デザインや追加のデータでポイントを外したり、ユーザーを圧倒したりしないようにしましょう。テストを分かりやすく、シンプルで信頼性の高いものにするために、手取り足取り説明するのではなく、プロトタイプで最大限のインタラクティブ性を追求するようにしましょう。

3. 適切なユーザーを選ぶ

テストプロセスを開始する際、プロトタイプを見せる前にユーザーに技術的なスキル評価を受けさせる必要はありませんが、適切なテスターのプールを確保する必要があります。

代表的なユーザーとは、製品をローンチしたときに（できれば）使ってくれるであろうユーザーペルソナとして、実際に見ているユーザーのことです。例えば、料理アプリを作るのであれば、最低でも週に3、4回は家で料理をするようなユーザーを想定しておくといいでしょう。もちろん、すべての人がまったく同じであるべきではなく、さまざまな問題に気づくことができるような組み合わせでなければなりません。

試作品をテストするのに適したグループを見つけるのは難しいかもしれません。それが、テストを全く行わないチームがある理由の一つでもありますが、最終的には必ずその価値があります。新鮮な視点を持った適切なユーザーに参加してもらうことが最も重要なので、量よりも質を追求すべきです。10人以下の人数でも、実際には多くのことを学ぶことができます。

製品に新鮮な目を向ける必要があることも、家族や友人を避けるべきです。協力しようとしてくれたとしても、その製品についての知識がない場合では、実際に使ってもらうユーザーと同じアプローチをするのは難しいでしょう。この場合、製品を未発表なのであれば、NDA（秘密保持契約）を利用するのも良いアイデアとなります。

もうひとつ留意すべき点として、製品の性質と、ユーザーがどこでそれに接するかということです。つまり、国際的な製品やサービスに取り組んでいる場合は、それぞれの市場に特有の仕様があるため、さまざまな市場からテスターを集める必要があります。また、デバイスについても、ユーザーが実際に使用する環境でテストを行う必要があります。

テストの後半では、発売前に何が可能で、何を変更すべきかを明確に把握するために、社内の関係者からも意見を収集する必要があります。これには、すでに同様のプロセスを経験している販売店などの関係者も含まれます。

4. 何度も繰り返し行う

常に調整できるようにしておく必要があります。テストプロセスは必ずしも直線的ではないので、最高の結果を得るためには柔軟性が重要です。

例えば、ある機能が製品の主な機能から離れてしまっていることに気づいたら、それに対応するために方向性を変える準備をしておくべきです。

このフィードバックループは、テスト対象者に与えるタスクにも当てはまります。何かうまくいっていないことがあれば、即興で質問を変えて、最良の洞察を得ることができます。

また、タスク自体に問題がなくても、ユーザーはどうすれば改善できるか提案してくれるでしょう。だからこそ、チーム全員がこのプロセスに参加し、以前は考えもしなかった新しいソリューションを実行できるようにしておくべきなのです。

また、すべての問題を一度に解決しようとしないことも重要です。プロトタイプは途中で何度も変更されるはずなので、忍耐強く、最大の問題を最初に解決するようにしてください。プロトタイプには何度も変更を加える必要があります。段階を踏んでいる間は、データベースのバックアップを取っておくと、何かを最初の位置に戻す必要が生じたときに、大きく巻き戻さなくて済みます。

新しい機能を追加するたびに、新しいテストを行う必要があります。一見過剰に見え、すべてをまとめてしまいたくなるかもしれませんが、小規模にすることで、より詳細な知見を得ることができ、また、デザインに関しては特に重要な、大規模な変更の手間を省くことができるのです。

まとめ

できるだけ早くプロトタイプを目にしてもらうことを目指しましょう。実在の人物にプロセスに参加してもらうことで、新たな視点を得ることができ、予想外の方向への変更や改善に役立ちます。

腕まくりをしてデザインをやり直すことを恐れてはいけません。チーム全員を巻き込んで、テストはいつもスムーズに進むわけではありませんが、それぞれのステップを通して、製品をよりよく知ることができ、シームレスな発売に近づくことができます。優先順位付けのプロセスを経て、テストにさらに力を注ぎ、フィードバックループでプロトタイプを完成させ続ければ、いつの間にか誇りに思える製品ができあがるはずです。まずは、UXPinの無料トライアルに登録して、プロトタイプの作成を始めてみましょう。

The post プロトタイプでの ユーザーテスト で使える4つのヒント appeared first on Studio by UXPin.

マイクロインタラクションは、強化とフィードバックによってユーザーエクスペリエンスを向上させます。マイクロインタラクションがなければ、ユーザーインターフェースは退屈で活気のないものになってしまいます。

好むと好まざるとにかかわらず、デジタル製品は人間の心理を利用しています。チャットやソーシャルメディアのアプリで「入力中…」と点滅しているのを見ると、その人が何を言おうとしているのか気になってしまいます。

このようなマイクロインタラクションは、ユーザーを引きつけ、製品を使い続けたり、購入したり、ポジティブなブランド体験を共有したりする可能性を高めます。

一方で、マイクロインタラクションは、ユーザーがユーザーフローを完了するのを妨げ、結果的にネガティブな体験をもたらします。

適切なバランスを見つけるには、UXチームがユーザビリティスタディや関係者からのフィードバックを通じて、エンドユーザーとともに忠実度の高いプロトタイプをテストすることが重要です。

UXPin Mergeを使用すると、GitリポジトリやStorybookから完全にインタラクティブなコンポーネントを使用して、UXデザイナーがハイフィデリティ・プロトタイプを作成でき、インタラクションの追加プロセスをスピードアップできます。コードベースのプロトタイプを使用することで、UXチームは最終製品で使用されるマイクロインタラクションを正確にテストすることができます。UXPinを使った高度なプロトタイピングを体験するには、今すぐ無料トライアルをご利用ください。

マイクロインタラクションとは？

マイクロインタラクションは、システムやユーザーからのトリガーに基づいて、フィードバックを提供します。このフィードバックは、タスクが完了したことをユーザーに知らせたり、アクションが必要なときにユーザーに警告したりします。

マイクロインタラクションは、トリガーとフィードバックのペアで動作します。最初にトリガーがあり、次に確認のためのフィードバックがある：

• トリガー：ユーザーのアクションまたはシステムの状態変化
• フィードバック：ユーザーインターフェースへの視覚、聴覚、触覚の変化

私たちが毎日無意識に使っているマイクロインタラクションの優れた例として、プレビュー通知をスワイプで消すことが挙げられます。携帯電話を使用中に通知を受け取った場合、よくスワイプすると、通知のポップアップが画面からスライドして消えます。

上記の例では、マイクロインタラクションのトリガー-フィードバックを次のように定義することができます：

• トリガー：ユーザーが通知のポップアップをスワイプする
• フィードバック：通知が画面から消える

ポップアップで表示される通知もマイクロインタラクションです。

• トリガー：システムが通知を受け取る
• フィードバック：通知ポップアップのアニメーション

通知ポップアップは、複数の目的を果たすマイクロインタラクションの素晴らしい例です：

• ヘルプ：ユーザーに新しいメッセージを通知する
• マーケティング：通知を送信した製品の使用をユーザーに勧める

マイクロインタラクションの4つのステージ

ユーザーにとって、マイクロインタラクションはトリガー・フィードバックとして起こります。しかし、UXチームやエンジニアが知っているように、舞台裏ではさらに多くのことが行われています。すべてのマイクロインタラクションには、4つのステージまたはステップがあります。：

• トリガー：ユーザーのアクションまたはシステムの状態変化
• 条件：どのようなマイクロインタラクションがトリガーされるかを定義するシステムルール
• フィードバック：ユーザーインターフェースへの視覚、聴覚、触覚の変化
• モード：マイクロインタラクションが完了した後に起こること-ステートまたはUIの変更

UXPinは、クリック/タップ、マウスアクション、ジェスチャーなど、様々なユーザートリガーをUXデザイナーに提供します。また、プロトタイプの次のアクション（マイクロインタラクションを含む）に対して「if-then」条件を設定することができます。これは、Javascriptの関数を実行するのと同様です。

実際にお試しください。UXPinの無料トライアルにサインアップして、世界で最も先進的なプロトタイピングツールで遊んでみてください。

なぜマイクロインタラクションが重要なのか？

マイクロインタラクションは、ブランドがユーザーとコミュニケーションをとることを可能にし、わかりやすさ、次のアクション、ブランドエンゲージメントなどを提供します。

わかりやすさとシステムフィードバックの提供

例えば、Instagramのフィードを下に引っ張ると（ほとんどのアプリで）、上部にローディングアニメーションが表示され、システムがフィードを更新するために働いていることを示します。

このマイクロインタラクションがなければ、ユーザーは、システムが A.自分のアクションに応じたのか、B.タスクを完了したのかを知ることができません。

アクションを起こす

マイクロインタラクションは、ユーザーにアクションを起こさせるのにも役立ちます。最も一般的なものは、Eコマースで見られる「カートに入れる」というマイクロインタラクションです。

買い物客が商品をカートに入れると、ヘッダーにあるカートのアイコンが揺れたり、色が変わったりします。場合によっては、画面の横からカートがスライドしてきて、ユーザーにチェックアウトを促すこともあります。

ブランディング

マイクロインタラクションは、ユーザーにポジティブな印象を与えたり、楽しいアニメーションを提供することで、ブランド体験を向上させます。

例えば、DuckDuckGoのアプリを使用したことがある人は、「すべてのタブとデータを消去」をクリックすると、ブラウザが閲覧履歴を消去したことを示す炎が表示されます。

このマイクロインタラクションは、DuckDuckGoがユーザーにブラウジングのプライバシーを提供し、トラッキングクッキーをブロックすることを約束するものです。

マイクロインタラクションの重要性を示すその他の例

• ナビゲーションとユーザーフローの改善
• 特に新しいユーザーに対して、指示を与える。
• ユーザーのエラーを示す、または防止する（必須項目での入力不完全なフィールドに赤でハイライトするなど
• エンゲージメントや共有を促進する

マイクロインタラクションの例

マイクロインタラクションには無限の可能性があります。UXデザイナーはしばしば、マイクロインタラクションで創造性を発揮して楽しんでいます。

ここでは、マイクロインタラクションの最も一般的な例と、それらがどのようにユーザーエクスペリエンスを向上させるかをご紹介します。

マウスホバーエフェクト

マウスのホバー効果は、デスクトップユーザーにとって最も一般的なマイクロインタラクションの一つです。これらのマイクロインタラクションは、ツールチップを使って分かりやすくしたり、カーソルを変えてクリック可能な要素を示したりすることができます。

また、ホバーによるマイクロインタラクションは、画像カルーセルの開始／停止や、ビデオのプレビューを可能にし、ユーザーが画面を「ブラウズ」してからどこをクリックするかを決めることができます。

クリック/タップエフェクト

ほとんどのインタラクションは、ユーザーが画面上の要素をクリックしたりタップしたりすることで発生します。クリック／タップによるインタラクションには、無限のマイクロインタラクションと可能性がありますが、ほとんどの場合、製品やウェブサイトをナビゲートする方法を提供しています。

クリック/タップアクションは、ボタンを押すエフェクトのように、要素上のマイクロインタラクションをトリガーし、ユーザーが別の画面に移動したことを示すために、ページのスライドトランジションをトリガーすることがあります。

タップ／クリック／ホールドエフェクト

タップ＆ホールドのマイクロインタラクションは、ドロップダウンメニューに代わる優れた機能で、特にスクリーンスペースが限られたモバイルデバイスでは有効です。ユーザーは要素をタップ＆ホールドすることで、より多くの選択肢を得ることができます。通常、何らかのマイクロインタラクションでポップアップを起動します。

Facebookの「いいね！」ボタンがその典型例です。デスクトップでは、「いいね！」ボタンの上にカーソルを置くと、より多くの投稿のリアクションを見ることができます。モバイルではマウスカーソルがないため、同じ機能を利用するには「いいね！」ボタンをタップ＆ホールドする必要があります。

ハプティック・フィードバック

最近のスマートフォンやゲーム機のコントローラーには、ユーザーやシステムの動作に対応した振動である「触覚フィードバック」が搭載されています。

ゲームでは、撃たれたり殴られたりするようなアクションシーンに触覚フィードバックがよく使われます。この振動により、ユーザーは画面上で起こっていることを聞いたり、見たり、感じたりすることができ、没入感を得ることができます。

スマートフォンで親指を使った生体認証を行った場合、認証に失敗すると親指の下にわずかな振動が伝わります。この触覚マイクロインタラクションは、親指の位置を変えて、もう一度やり直さなければならないことを知らせてくれます。

データ入力・進捗管理のためのマイクロインタラクション

マイクロインタラクションは、データの入力や進捗状況に非常に効果的です。よく、新しいパスワードを作成するときに、「弱い」から始まり、「強い」「非常に強い」へと進行していくプログレスバーが表示されます。

また、「サインアップ」や「確認」のボタンは、シェーディングされた暗い色/クリックできない状態にしておき、次に進むために十分な強度のパスワードを作成した後に点灯させることもできます。

フローの上部にプログレスバーを設置すると、ユーザーに確認ページまでの残り時間を知らせることができます。ユーザーが進むにつれて、バーがアニメーションしたり、色合いが変わったりして、完了を促すことができます。

スワイプ／スライドによるマイクロインタラクション

UXデザイナーは、移動やナビゲーションを示すためにスライドによるマイクロインタラクションをよく使います。これらのマイクロインタラクションはモバイルで最も効果的ですが、デスクトップ画面でも画像カルーセル、セールスファネル、チェックアウトフローなどで効果を発揮します。

モバイルデバイスでは、タップする代わりにスワイプすることで、よりスムーズで高速なナビゲーションが可能になります。スライドのマイクロインタラクションは、アクションに対応しているため、スワイプとの相性が良いです。

スライドマイクロインタラクションの優れた例として、出会い系アプリでの左右へのスワイプがあります。ユーザーがスワイプすると、マッチする可能性のある相手が画面外にスライドします。一致した場合、アプリは「It’s a Match」というマイクロインタラクションと、チャットを開始するためのボタンやリンクをユーザーに提供します。

システムフィードバック

マイクロインタラクションは、システムのフィードバックをユーザーに伝える上で重要な役割を果たします。回転するローディングアイコンは、最も一般的なシステムマイクロインタラクションです。これらのマイクロインタラクションは、アプリやウェブサイトのロード中にユーザーに待つことを知らせます。

回転するアイコンがないと、ユーザーはアプリがクラッシュしたと思ってしまうかもしれませんし、クリックやタップを続けてしまい、結果的に複数のサーバーリクエストが発生してしまうかもしれません。

メッセージの通知も、システムのフィードバックの好例です。アプリは（他のユーザーから）新しいメッセージを受け取り、アプリを開くように警告します。

まとめ

マイクロインタラクションの重要性と、それを利用してユーザーエクスペリエンスを向上させる方法をご紹介しました。何事も「過ぎたるは及ばざるが如し」です。マイクロインタラクションを使いすぎたり、無駄に長いアニメーションを作ってユーザーの動きを遅くしたりしないようにしましょう。

UXデザイナーは、ユーザビリティスタディからのフィードバックをもとに、ユーザーがナビゲーションのためにマイクロインタラクションを必要としている箇所や、強力なパスワードの作成など重要な指示を見逃していないかを判断する必要があります。

UXPinプロトタイプ：マイクロインタラクションの作成

UXPinは、UXデザイナーがハイフィデリティ・プロトタイプのための没入型ユーザー体験を作成するためのトリガー、条件、およびインタラクションを提供します。

また、変数を作成してマイクロインタラクションをパーソナライズすることもできます。例えば、サインアップフォームからユーザーの名前を取得し、ユーザーがサインインに成功したときのウェルカムアニメーションをパーソナライズすることができます。

また、ページ遷移の有効化、要素の表示/非表示、トグル、状態の設定、APIリクエストの作成など、様々な機能があります。UXPinは、UXチームが完全に機能するハイフィデリティ・プロトタイプを構築して創造性を発揮するためのツールと柔軟性を提供します。UXPinで次のプロトタイプのデザインを始めましょう。世界で最も先進的なコードベースのデザインツールを使ったプロトタイピングのパワーを体験していただくために、14日間の無料トライアルをご用意しています。

The post プロトタイプを改善するパワフルな マイクロインタラクション appeared first on Studio by UXPin.

忠実度とは、プロトタイプやデザインの「精度」や「リアルさ」のレベルを指し、ビジュアルデザインやインタラクション、機能性において、プロトタイプが最終製品にどれだけ近いかを表します。 高忠実度 なプロトタイプは再現性が高く、最終的なUX（ユーザーエクスペリエンス）を可能な限り近い形でシミュレーションすることを目的としています。

 高忠実度 プロトタイプ（Hi-Fiプロトタイプ）には、色、タイポグラフィ、インタラクション、アニメーション、イメージなど、実際の製品が持つUI（ユーザーインターフェース）に沿ったビジュアルおよびインタラクティブな要素が含まれます。このようなプロトタイプによって、ユーザーやステークホルダーに没入感のある体験が提供されるため、最終製品のイメージが理解しやすくなります。

そして、デザイナーはデザインプロセスの後期段階で、コンセプトのテストおよび検証、ユーザーフィードバックの収集、UX改良のために忠実度の高いプロトタイプを作成します。そして作成されたプロトタイプで、インターフェースの使いやすさや効果性の評価、潜在的な問題や改善点の特定し、情報に基づいた製品デザインの決定をすることができます。

UXPinのMergeテクノロジーで完全にインタラクティブなプロトタイプを作成して、より良いデザインを決定しましょう。詳細とアクセスリクエスト方法については、こちらのページをぜひご覧ください。

高忠実度（Hi-Fi）と低忠実度（Lo-Fi）プロトタイプ

デザイナーは、さまざまな目的と目標のために、デザインプロセスの各段階で高忠実度または低忠実度なプロトタイプを使用します。

低忠実度（Lo-Fi）プロトタイプとは、一般的に簡単なスケッチやワイヤーフレーム、または基本的なデジタルモックアップを使って作成される、シンプル化されたデザインコンセプトのことです。デザイナーは、デザインプロセスの早い段階でこの低忠実度プロトタイプを作成し、多くのアイデアを共同作業で可能な限り速やかにに反復します。

また、低忠実度プロトタイプは、デザインの核となる構造、情報アーキテクチャ、機能性に焦点を当てており、簡単に作成できるため、デザイナーは時間とリソースを過剰に費やすことなく、デザイン案を複数検討し、反復することができます。

一方、高忠実度プロトタイプでは、最終的なデザインのより正確でリアル感があり、ビジュアルデザイン要素、インタラクティブ機能、実際のコンテンツを取り入れ、最終製品のイメージ通りのデザインや機能とほぼ同一のように完成します。デザインチームは、デザインプロセスの後半で高忠実度プロトタイプを作成し、デザインハンドオフの前にコンセプトを確定します。

 高忠実度 プロトタイプのプランニング

デザイナーは、デザインプロセスの初期段階でほとんどのリサーチとプランニングを完了します。そのため、このステップでは高忠実度プロトタイピングを導くために、調査結果を統合し、レビューします。

プロトタイプの目的と目標の設定

デザインのどの側面をテスト、評価、またはステークホルダーに見せたいかを決定することで、高忠実度で達成したい具体的な目標を設定します。

例えば、ECのWebサイトをデザインする場合だと以下のようになります：

• 目標：カートに商品を追加し、チェックアウトプロセスを完了するまでのユーザーフローをテストする。
• 目的：ユーザビリティの問題特定およびコンバージョン率の最適化。

UXリサーチからのユーザーゴールの設定

デザイナーがプロトタイピングツールを使い始める前に、何を作って、誰のために作るのかがわかるように、徹底したUXリサーチが必要です。ユーザーゴールを理解することで、ターゲットオーディエンスのニーズや好みに合わせて忠実度の高いプロトタイプを調整することができるのです。

例えば、フィットネス愛好家向けのモバイルアプリをデザインしている場合、ターゲットとなるユーザーは、ワークアウトや進捗情報の追跡に興味がある可能性があります。となるとこのユーザーグループの目標には、フィットネス目標の設定、消費カロリーの追跡、ワークアウト統計の分析などが含まれます。このようなリサーチを利用することで、デザイナーはそれに応じて機能やインタラクションを計画することができますよね。

主な機能とインタラクションの概要

上記の目標と目的を達成しながら、適切なUXを実現させるためにプロトタイプに必要な中核となる要素を決定します。そのような主要な機能性を特定することで、デザイン作業に優先順位をつけ、プロトタイプに必要不可欠なインタラクションとユーザーフローを確実に捉えることができるのです。

例えば、フライト予約のモバイルアプリをデザインする場合、主な機能として以下が挙げられます：

• フライトの検索
• 検索結果の絞り込み
• フライト詳細の表示
• 座席の選択
• 支払いと予約確認
• 予約内容の確認

視覚的要素のデザイン

デザイナーは、リサーチ、スケッチ、ワイヤーフレームを基礎として、高忠実度のプロトタイプの視覚的要素をデザインします。また、視覚的要素をデザインする際は、タイポグラフィ、色、イコノグラフィー（図像）、イメージなどのさまざまな側面を考慮します。

製品のタイポグラフィと色は、ブランドアイデンティティと調和され、読みやすさを上げるものでないといけません。そして、製品のイコノグラフィーは、親しみやすく直感的なシンボルを使ってアクションや機能を表します。イラストや写真などのイメージは、UXの質を向上させて、適切なメッセージを伝えてくれます。

また、デザイナーは、このようなデザイン要素が、色のコントラスト、読みやすさ、支援技術などのアクセシビリティにどのような影響を与えるかも考慮しないといけません。

オープンソースのコンポーネントライブラリの活用

デザイナーは、MUI、Ant Design、Fluent UI などのオープンソースのコンポーネントライブラリを使うことで、ビジュアルデザインのプロセスを加速することができます。ボタン、フォーム、ナビゲーションバーなどの既製要素を活用することで、デザインに必要な時間と労力が削減され、 高忠実度 のプロトタイプ全体で一貫したビジュアル言語を維持することができるのです。

UXPinには、UIデザインのプロセスを簡素化するツールや機能を提供しています。UXPinにあるMergeライブラリによって、UI要素をドラッグ＆ドロップするだけで画面やレイアウトが構築可能となります。これらのコンポーネントはデフォルトでインタラクティブで、デザインシステムによって定められたプロパティを含んでいるため、より速く、効率的で、一貫性のあるUIデザインが可能になります。

この段階が完了すれば、デザイナーはインタラクティブなプロトタイプを作るための、 高忠実度 なモックアップが作成可能です。

コンポーネントのインタラクションとアニメーションの追加

デザイナーは、ユーザーと要素とのインタラクションを反映するために、ホバー、アクティブ、無効などのさまざまなステートを確定します。また、最終製品の動的な動作をシミュレーションして、たとえば「ユーザーがフォームで入力必須箇所の欄を入力するまでボタンを無効状態にする」など、よりリアルなUXを提供するために、コンポーネント間の遷移も作成します。

さらに、デザイナーは マイクロインタラクションとアニメーションを取り入れます。マイクロインタラクションとは、フィードバックを提供し、プロトタイプとのインタラクションを通してユーザーをナビゲートする、小さくて、繊細で、意図的なアニメーションのことです。プロトタイプをより魅力的でインタラクティブなものにするだけでなく、ユーザーに重要な情報を伝えて、インターフェースをより直感的に誘導してくれます。

Mergeのインタラクティブなコンポーネントを活用

UXPinのMergeテクノロジーによって、デザイナーはレポジトリからコードコンポーネントをデザインプロセスに取り込むことができ、そのUI要素には、デザインシステムによって規定されたインタラクションなどのプロパティが含まれています。

この『Code-to-Design』の手法により、デザイナーはスタイリングやインタラクションなどのコンポーネントプロパティの設定に悩まされることはありません。また、各コンポーネントのバリアントは、デザイナーが選択できるように、例えば「コンポーネントのステート選択」などが UXPinのプロパティパネルに表示されます。

さらにデザイナーは、キーボードやスマホ用のトリガーやアクションなどを含むUXPinのインタラクション機能を使って、マイクロインタラクションを追加することもできます。

ユーザーフローのシミュレーション

ユーザーフローとナビゲーションパスのマッピング

デザイナーは、画面の論理的な順序を確定し、ユーザーの［入口］や［出口］、およびタスク達成のために取ることができるさまざまな［経路］を特定するなど、デジタル製品を通じて「ユーザージャーニー」を定めます。そのユーザージャーニーマップで、ユーザーにとって使いやすくて直感的なナビゲーション体験が保証されます。

インタラクションの設定

デザイナーは、ユーザージャーニーマップに従って、ボタンやリンクなどのインタラクティブな要素を使って、画面間のつなぎを設定します。そしてユーザーは、設定したつなぎによって、さまざまなスクリーンをナビゲートし、製品内で起きるトランジションやインタラクションのシミュレーションができます。

トランジションへの対応

デザイナーは、アニメーション、トランジション、インタラクティブな要素を使って、例えば、「ボタンをクリックするとモーダルが表示される」や、「スクロールすると追加コンテンツが表示される」など、ユーザーがプロトタイプとどのように操作するかをシミュレーションします。

このプロセスが終わる頃には、デザイナーはエンドユーザーと 高忠実度 のプロトタイプをテストする準備が整います。

テストおよびイテレーション（反復）

テストとは、デザイナーがユーザーからのフィードバックを取り入れ、より効果的でユーザーに優しいソリューションを生み出すためにデザインを改良することで、高忠実度のプロトタイプを継続的に改善していく反復的なプロセスです。

以下は、高忠実度プロトタイプのプロセスにおける概要です：

• ユーザーによるユーザビリティテストのセッションを実施し、高忠実度のプロトタイプを評価して、そのユーザビリティに関する貴重なフィードバックを収集する。
• プロトタイプをステークホルダーに提示し、ビジネス価値のフィードバックを得る。
• プロトタイプを使ったユーザーとステークホルダーの対話、理解、全体的な経験に関するフィードバックとインサイトを収集および分析する。
• 改善点を特定し、受け取ったフィードバックに基づいてプロトタイプに変更を加える。
• ユーザビリティの問題に対処し、全体的なUXを向上させるためにデザインを改良する。
• プロトタイプが確実にユーザーのニーズを満たし、デザイン目標に合致していることを確認するために改良の反復プロセスを繰り返します。

UXPin でのプロトタイプの共有と連携

プロトタイプを共有し、フィードバックとレビューを受ける

UXPin のプレビューと共有機能により、デザイナーはチームメンバーやステークホルダーとデザインやプロトタイプを共有でき、その際、サイトマップ、コメント、スペックモード、ドキュメントなど、デザイナーが共有したいものを選択できます。

UXPin の共有リンクはオープンな Web 上で利用可能です。つまり、リンクがあれば誰でもプロジェクトにアクセスできます。その際デザイナーは、チームメンバーやステークホルダーだけがアクセスできるように、プロジェクトをパスワードで保護することができます。

チームメンバーやステークホルダーとの連携

UXPinのコメント機能で、オブジェクト上で直接コメントしたり、メンバーのタグ付け、コメントの割り当て、適切なアクション後に解決できることから、メンバーやステークホルダー間の連携強化されました。また、Team（チーム）コメントとPublic（公開）コメントの機能を使えば、UXPinのアカウントを持っていない人でもフィードバックに参加してもらうことができます。

より円滑な連携とデザインハンドオフ

デザイナーとエンジニアはUXPinのMergeテクノロジーを通して同じ言語で会話できることから、コードコンポーネントで 高忠実度 のプロトタイプを構築すると、デザインと開発プロセスの間のギャップを埋めることができます。

デザイナーとエンジニアは、まったく同じコンポーネントをそれぞれのレンズを通して見ています。例えばデザイナーはUXPinでビジュアル要素を確認し、エンジニアはIDE（統合開発環境）でコードを確認しますが、デザイナーとエンジニアが同じ制約の中で作業するため、この「信頼できる唯一の情報源（Single source of truth）」によって摩擦は軽減されます。また、これらの制約は、デザインドリフトや技術的負債、不整合を防ぐことから、より調和のとれた製品開発プロセスを生み出すのです。

ユーザーテストを強化し、ステークホルダーの連携を効率化するために、より優れた高忠実度のプロトタイプをより速く、よりインタラクティブに構築しませんか。

UXPin Merge を使った高忠実度のプロトタイプについての詳細はこちらをご覧ください。

The post UXPinでできる 高忠実度 なプロトタイピング appeared first on Studio by UXPin.

ユーザビリティテスト参加者やステークホルダーに実際のユーザー体験に近いものを提供する上で、インタラクション機能は欠かせない存在です。しかし、インタラクティブなコンポーネントの作成には時間が掛かってしまい、ほとんどのデザインツールでは上手くいかないことから、多くのデザイナーを悩ませているでしょう。

UXPin Mergeを使用したコンポーネント駆動型プロトタイピング技術と、インタラクティブコンポーネントを使うことで、完全に機能するプロトタイプを構築できます。機能横断的なコラボレーションとユーザーテストを強化するための詳細については、こちらのページをご覧ください。

 インタラクティブコンポーネント とは？

 インタラクティブコンポーネント （またはインタラクティブ要素）は、デザインシステムから再利用可能なUI要素と、デフォルトでインタラクティブ機能を含んでいます。普段からUIキットを使い、プロジェクトごとにインタラクションを追加しなければならないデザイナーにとってこれは画期的と言えるのではないでしょうか。

デザインチームは、インタラクション、ステート、その他のアニメーションを設定して、最終製品を正確に表現する没入型のプロトタイプを作成できます。

インタラクティブコンポーネント のメリット

インタラクティブコンポーネント のメリットをいくつかご紹介します。

1. 少ないアートボード

従来、デザインツールを使ってインタラクションを作成するには、基本的な機能を実装するだけでも複数のアートボードが必要でした。デザイナーは、 インタラクティブコンポーネント を使うことで、1つのアートボードで同じ得ることができます。

2. 市場投入までの時間を短縮

インタラクティブなコンポーネントは再利用可能なので、デザイナーはインタラクションを一度設定するだけで、デザインプロセスでの時間を大幅に節約できます。

エンジニアが承認されたコンポーネントに慣れ親しめば、デザインのハンドオフはより簡単になり、プロジェクトの納期をさらに短縮することができます。

これらの時間節約の結果、市場投入までの時間が短縮されます。

3. 一貫性の向上

UIキットはデザインの一貫性を高めますが、インタラクションに関してはあいまいさを残します。デザイナーはこれらのインタラクションを自分で設定しなければならず、エラーや一貫性の欠如につながってしまいます。

インタラクティブなコンポーネントには、インタラクティブ性がすでに備わっているので、誰もが同じステート、マイクロインタラクション、アニメーションを持ちます。これによって、一貫性を高めるだけではなく、デザイナーが修正するセットアップタスクやエラーが少なくなるため、効率性を高めます。

4. より良いテストとフィードバック

ユーザーやステークホルダーからのフィードバックは、デザインプロジェクトにとって非常に重要です。また、ビジネスゴールに沿ったユーザー中心の製品を提供するための意思決定の原動力となります。

ほとんどのデザインツールでは、エンジニアが数行のコードで実装する単純なインタラクションを実装するための忠実さと機能性に欠けています。 インタラクティブコンポーネント を使用すると、コードの機能を簡単に再現できるため、ユーザビリティテストやステークホルダーのために実物に近いプロトタイプを作成できます。

5. デザインシステムの普及を促進する

デザインシステムチームの仕事の1つとして、デザインシステムを普及を促進させることです。 これにおいても、インタラクティブコンポーネント は製品開発チームの効率的なワークフローを作成できる強力なツールとなります。

6. デザインの拡張

UXPinでは、コンポーネント駆動型のプロトタイピングとインタラクティブコンポーネントがデザインのスケーリングにどのように役立つかを見てきました。１つの例として、PayPalが新しく人材を雇用せずデザインプロセスを拡張したUXPin Merge活用方法をこちらで紹介しています。

リポジトリにホストされているインタラクティブコンポーネントにMergeを統合することで、PayPalのプロダクトチーム（UX/デザインツールの経験はほぼ無いに等しい）は、経験豊富なUXデザイナーが以前行っていたよりも8倍速くデザインプロジェクトの90％を完了することができました。

 インタラクティブなコンポーネント により、学習曲線が大幅に短縮されたことでデザイナーでない人にとってもデザインプロセスがより身近なものになりました。

PayPalのUXチームは、レイアウトやテンプレートを含むインタラクティブコンポーネントライブラリを構築し、React propsを使用してデザインシステムの制約を設定しました。製品チームは、ユーザビリティテストとデザインハンドオフのためのプロトタイプを、ドラッグ＆ドロップで簡単に構築できます。

インタラクティブコンポーネントは、プロダクトチーム（または別のUXPin MergeユーザーであるTeamPasswordの場合はエンジニア）のような非デザイナーに、より多くのUXに関する仕事を与えることができます。

すでに構築済みのコンポーネントにクリック、ホバーなどの条件に応じてインタラクションを作成することも可能です。

UXPinプロトタイプにインタラクティブ・コンポーネントを組み込むには？

インタラクティブコンポーネントを製品のプロトタイプに組み込むには、多くのステップを踏む必要があります。フォームが実際に入力できること、ボックスがチェックできること、リンクがクリックできることを確認します。

このようにすることで、ユーザーが製品を使おうとする経験を持つことができ、製品がどのように機能し、人々がどのように使用する（または使用したい）のかについての洞察を得ることができます。

1. UXPinでの インタラクティブコンポーネント の使用

10年以上前のUXPinの最初のリリース以来、インタラクティブコンポーネントはUXPinのデザインツールの中核であり、最終的な製品体験を正確に再現するプロトタイプを作成するソリューションをデザイナーに提供してきました。

UXPinには、インタラクティブコンポーネントを作成するための4つの強力な機能があります：

• ステート（状態）： 1つのコンポーネントに対して、それぞれ異なるプロパティとインタラクションを持つ複数のステートバリアントを作成できます。
• バリアブル（変数）： ユーザーの入力データをキャプチャし、パーソナライズされた動的なユーザー体験を作成するために使用します。
• Expression（式）： Javascriptのような関数で、複雑なコンポーネントや高度な機能を作成できます！
• 条件付きインタラクション： ユーザーのインタラクションに基づいてif-thenやif-elseの条件を設定し、複数の結果を持つ動的なプロトタイプを作成して、最終的な製品体験を正確に再現します。

UXPinのプラットフォームで簡単にドラッグ＆ドロップできる、ビルド済みのコンポーネント（UXPinでは「フォーム」と呼びます）を使用するのも1つの方法です。(ゼロから設計する必要はありません！）

UXPinのサンプルページにあるインタラクティブなコンポーネントの例をいくつかご紹介します。

ここで、ステート、バリアブル、Expression、条件ロジックで何ができるか見てみましょう。

例１. ボタン

例２. インプットとテキストエリア 

例３. ラジオボタン

例４. インタラクティブなサインアップフォーム

→ このサンプルをダウンロードして使いたい場合は、こちらから。

ドキュメントはこちらをご覧ください。

2. UXPin Mergeの インタラクティブコンポーネント 

Mergeは、コンポーネント駆動型のプロトタイピングとインタラクティブコンポーネントをさらに進化させます。デザイナーが UXPin でコンポーネントを作成する代わりに、Merge はリポジトリからデザイン システム ライブラリをインポートします。

これらの MergeのUI要素の背後には React、Vue、Angular などのフロントエンドフレームワークのコードがあるため、真にインタラクティブなコンポーネントとなります。組織のデザインシステムをインポートすることも、オープンソースのライブラリを使用することもできます。

デザイナーは Mergeコンポーネントを使用するためにコードを見たり書いたりする必要はありません。また、UXPinのプロパティパネルからコンポーネントのプロパティにアクセスし、デザインシステムの制約内で変更を加えることができます。

Mergeについての詳細やアクセスはこちらをご覧ください。

Mergeのインタラクティブコンポーネントを使ってデザインする

ステップ 1: デザインシステムからコンポーネントを取り込む

Mergeを使用してインタラクティブ コンポーネントを UXPin にインポートするには、3 つの方法があります：

• Git統合： React コンポーネント ライブラリを UXPin に直接接続する
• Storybook統合： Vue、Angular、HTML、Ember、Web Components などのフロントエンドフレームワークを同期します。
• npm統合： Node Package Manager（npm）からオープンソースのライブラリをインポートできます。npm Integration とその動作方法の詳細をご覧ください。

インポートされたMergeコンポーネントは左サイドバーのUXPinのデザインシステムライブラリに表示されます。デザイナーはサイドバーから必要なUI要素をクリックまたはドラッグしてキャンバスに表示することができます。

また、複数のデザインシステムとUXPin要素を使用したり、それらを組み合わせて新しいコンポーネントを作成し、パターンとして保存することもできます。

UXPin Mergeでプロトタイピングを始める方法

Mergeを使用して UXPinのコンポーネント駆動型プロトタイピングを始める準備はできましたか？始めるにあたって2 つの方法があります：

• オープンソースライブラリ： オープンソースライブラリは、アクティブな開発サポートがないチームや、コンポーネントに取り組む前にどのように作業できるかの基礎的な情報を把握したいチームに最適です。
• プライベートなデザインシステム： 製品のプライベートデザインシステムをUXPinと同期させたい場合は、Mergeページでアクセスをリクエストしてください。

UXPinの無料トライアルを14日間無料でお試しいただけますので、ぜひご利用ください。

The post プロトタイプに命を吹き込む インタラクティブコンポーネント appeared first on Studio by UXPin.

企業のウェブサイトは、単なる関連ページの集合体ではありません。サイトを運営する企業や、情報やサービスを求めてサイトを訪れたり、商品を購入したりする訪問者という、オンライン上で2つの存在が出会い、交流できる場所ともいえます。ここでは、UX（ユーザーエクスペリエンス）とUI（ユーザーインターフェース）という、異なる分野でありながらも重なり合うWebサイトのデザインと開発の成果です。良いUIは、質の高いUXにつながります。サイトのユーザーエクスペリエンスから得られるインサイトは、インターフェースのデザインに反映され、訪問者を惹きつけ、リピーターを増やす質の高い体験につながります。

企業の製品やサービス、プロフィールが魅力的であれば、訪問者に不便を強いるようなデザインであっても、それを克服することは可能です。しかし、優れたUIデザインは、ユーザーがウェブサイトそのものだけでなく、ブランド自体にも興味を持ちやすくすると、開発者たちは指摘しています。

高度なデザインがどのように機能するのか、どのようにテストすればよいのかわからない？UXPin Mergeに参加すれば、実際のデータやインタラクションを使った “実物に近い” プロトタイプを作成することができます。

良いUX/UIデザインとは？

良いUIとUXデザインの鍵は、その名前にあります。サイトユーザーのニーズと経験が、ウェブサイトのすべてのコンポーネントのデザインを導くのです。インターフェイスデザインは、優れた体験を生み出すことを目的としています。そして、それらの要素をユーザーが実際に使ってみることで、開発者が考えているようなユーザーフレンドリーなインターフェイスになっているかどうかがわかります。

使いやすさや楽しさを追求したユーザーインターフェースをデザインするためには、Webサイトを訪れる人が何を求めているのかをよく理解することが必要です。成功するUIデザインは、サイトのターゲットとなるユーザーとその行動を深く理解することから始まります。

これには、人々がどのようにサイトを利用し、何を期待しているのかを考慮することが含まれます。優れたUIデザインには、モバイルデバイスでは指でスワイプやタップ、デスクトップやノートパソコンではマウスでクリックやドラッグといった、サイトを使用する際の物理的な側面も含まれます。また、ユーザーがサイトを利用する際の明確なガイドラインを示し、コンテンツをできるだけ面白く、利用しやすいものにすることも重要です。

Webサイトには、それぞれの目的があります。そのコンテンツは、特定の視聴者の欲求やニーズをターゲットにしています。しかし、優れたUIやUXデザインの原則は、あらゆる種類のウェブサイトに当てはまります。ここでは、訪問者の体験を最高のものにするために必要な、5つのUI/UXデザインの原則をご紹介します。

創造的であること、しかし予測可能であること

人目を引き、魅力的で、楽しくてためになるコンテンツに満ちたサイトにするためには、リスクを冒してでも新しいことに挑戦することが必要です。しかし、訪問者が混乱せずにサイトを閲覧できるように、慣れ親しんだ構造であることも重要です。

重要なナビゲーションツールは、標準的なフォーマットに従うべきです。ボタン、メニュー、その他のツールは、他の何百万ものウェブサイトと同じように見え、同じように動作する必要があります。訪問者は、これらのツールがどこにあるのか、どのように見えるのかを考えずに、基本的な機能を実行する必要があります。また、重要な情報は、何層にもわたってページやリンクを辿らなくても、ホームページの中央に表示されていなければなりません。

スライドショーやカルーセルなどのインタラクティブな機能が多用されているサイトは、ユーザーがサイトを訪れる目的を妨げてしまう可能性があります。訪問者の行動に関する調査によると、ユーザーはカルーセルの各スライドを見ているうちに、前に見たスライドを忘れてしまう可能性が高いことがわかっています。

 デザイナー と開発者の共通言語となるコードベースツールを使う

 デザイナー は、創造的なビジョンを機能的な製品にするために、通常、開発者に頼らなければなりません。しかし残念ながら、 デザイナー は特定のインタラクションを追加するために必要な作業量を判断できない場合があります。

UXPinのコードベースデザインツールは、Mergeテクノロジーによって、 デザイナー と開発者の間の壁を取り除く共通言語を生み出します。UXPin Mergeでデザインを作成すると、ツールは開発者のライブラリ（GitやStorybook）に保存されているものと同じコードコンポーネントを使用し、プロトタイピング中も完全なインタラクティブ性を維持します。そのため、デザインを別のレベルに引き上げることができます。コードは、どんなデザインツールよりも多くのインタラクションの機会を提供してくれます。

デザインチームは、画像ベースのツールからコードベースのツールに切り替えるべき時が来ています。コードベースのデザインは、プロトタイピングや開発段階を効率化し、製品をより早く市場に送り出すことができます。また、開発者は、特定のOSやデバイスのニーズに合わせてデザインを微調整できるようになります。

コードベースのデザインの威力を疑う方は、UXPin Mergeへのアクセスをリクエストして、チーム間のコラボレーションがどれほど容易になるかを確認してください。

最大限のアクセシビリティを目指す

優れたUX/UIデザインは、明確に決められたニーズを対象としていますが、その対象者は非常に多様である可能性があります。できるだけ多くの人がアクセスできるようにするためには、ユーザー中心のデザインで、誰にとっても読みやすく、使いやすいものを目指す必要があります。例えば、ナビゲーションツールやその他のアクション要素では、アイコンやリンク、ボタンの間に十分なスペースを確保し、誤ってタップしたりクリックしたりしないようにする必要があります。

また、アクセシビリティには、ユーザーがサイト上で何をすべきかを明確に説明し、特定の行動を取った場合または取らなかった場合に何が起こるかを伝えることも含まれます。例えば、ボタンには、ニュースレターに登録する、今すぐ購入する、情報を削除するなど、ユーザーが望む結果を明確に表示する必要があります。また、サイトからの離脱やデータの永久削除など、意図しない結果になることを警告するテキストを追加することもできます。

包括的であること

包括性は、アクセシビリティの重要な側面です。サイトのターゲット層を設定したとしても、他のユーザーが立ち寄る可能性もあり、優れたUXデザインは彼らの特定のニーズを予測します。大きなフォントやコントラストの高いテキストなどの代替手段を提供したり、モバイルデバイスとデスクトップデバイスの両方で見つけやすく、操作しやすいオーディオコンテンツやナビゲーションツールを含めることで、すべての人に配慮したインターフェイスを実現する必要があります。

ウェブコンテンツ・アクセシビリティ・ガイドラインを常に把握しておくことで、デザインシステムにインクルーシブコンポーネントを追加することができます。

UXPin と Kinaole社のCEOでアクセシビリティ専門家である Piotr Źrołka氏が最近開催したウェビナーでは、UXPin Mergeでいくつかのシンプルなガイドラインに従うことで、インクルーシブデザインがどれほど容易になるかを紹介しています。

創造性と制約のためにデザインシステムを構築する

デジタル製品の一貫性を確保するためにスタイルガイドに依存している場合、チームは多くの時間を無駄にしています。静的なスタイルガイドを、機能、カラースキーム、言語など、ブランドに認められたデザインコンポーネントをすべて含むダイナミックなデザインシステムに変換するようにしてみましょう。

デザインシステムは、主役である デザイナー をコントロールしつつ、他のメンバーには革新的な製品や機能を生み出す柔軟性を与えます。デザインシステムには、 デザイナー や開発者が使用できるすべてのコンポーネントが含まれているかもしれませんが、それだけではなく、 デザイナー や開発者が機能を組み合わせて新しい製品を作る機会がほぼ無限にあります。

その結果、ブランドアイデンティティに準拠した高度なデザインを得ることができます。

UXPin Mergeを使ってユーザーのエンゲージメントを高めよう

訪問者がウェブサイトから離れてしまう時間は3秒以内で、残念ながらその多くは二度と戻ってきません。ユーザー中心のデザインは、訪問者を必要な情報に導き、決断を促すようなシンプルでクリーンなインターフェイスによって障害を予測し、それを取り除くように働きかけます。

UXPin Mergeがどのようにデザインとエンジニアリングを融合させ、より良く、より早くサイトを開発するかをご覧ください。

The post 高度なUX/UIに興味のある デザイナー へのアドバイス appeared first on Studio by UXPin.

UXデザインの仕事を獲得するには、 ポートフォリオ の質が重要になります。uxfolioのような企業がオンライン ポートフォリオ 作成のためのソリューションを専門に提供しているほど、 ポートフォリオ は採用プロセスの重要な一部となっています。

しかし、どのようなツールを使ってポートフォリオを作成しても、プロジェクトマネージャーに優れたデザインを見せることができなければ、仕事を獲得することはできません。ポートフォリオのプレゼンテーションの質よりも、UXデザインの質の方が重要視されますが、プレゼンテーションを自分のスキルの例として使うことはできます。

残念ながら、自分のUX ポートフォリオ を客観的に見ることはほとんど不可能と言えるでしょう。レビューを受けることで、自分のポートフォリオの強みと弱みを簡単に把握することができるはずです。いくつかの視点が得られれば、自分のスキルや才能を示すUXデザインのセレクションをまとめることができます。

UXPinでは、進行中の作品や完成したプロトタイプを簡単に共有することができ、必要なフィードバックを得ることができます。

UXPinの無料アカウントを作成すれば、誰とでもプレビューを通じて作品を共有し、レビューを受けることができます。

UXデザインを共有し、他の人からポートフォリオのフィードバックをもらう

UXデザインの ポートフォリオ を誰かに送っても、必ずしも有意義なフィードバックが得られるとは限りません。たとえレビュアーがあなたのポートフォリオの完成度を高めるために多大な努力をしてくれたとしても、結局はあまり役に立たない情報になってしまう可能性があります。

その難しさの多くは、人々のオンラインでのコミュニケーション方法にあります。ほとんどのUXデザイン、プロトタイプ、ポートフォリオでは、レビュアーは作品に直接意見を書き込むことができません。その代わりに、メールなどで意見を送ってもらいますが、その際には自分が確認したい機能と、それをどのように改善できるかを説明してもらいます。

ビジュアルメディアでは、デザインに直接レビューを残せる機能が必要です。

UXPinでは、メンターや同僚がワークスペース内でリアルタイムにコミュニケーションを取ることができるので、より洞察力のあるUXポートフォリオレビューを得ることができます。右上隅付近にある青いアイコンは、クリックすると何が起こるのかユーザーに伝わっていないのではないでしょうか」というようなことを書く代わりに、アイコンの近くに「これは分かりにくいアイコンですね。機能をもっとわかりやすくしてみてください」というコメントをアイコンの近くに置くことができます。

また、デザインや完全に機能するプロトタイプを共有できるため、UXポートフォリオレビューの質も向上します。プロトタイプレビューが実際の情報や機能に基づいていれば、人々はLorem ipsumや偽のデータに気を取られることなく、正確なアドバイスをすることができます。

おすすめの記事: How collaboration makes you a better designer

Spec Modeを使って、素晴らしいデザインアイデアを実現する

UXPinのSpec Modeでは、あなたのデザインにアクセスして、劇的な結果につながる微妙な変更を加えることができます。例えば、メニューを少し左にずらすことで、ユーザーにアピールできるバランスになるかもしれません。また、無理に多くの機能を盛り込もうとすると、UXを向上させるためにもドロップダウンメニューの追加を検討する必要があります。

また、Spec Modeのデザインを開発者と共有し、静的なデザインをデジタル製品に変換する人たちからポートフォリオレビューを受けることもできます。あなたのUXデザインが、開発チームに無理な期待をさせていることがわかるかもしれません。一方で、あなたの作品からCSSコードを生成する能力を評価する開発者からは、賞賛の声が寄せられるかもしれません。UXPinは、あなたのグラフィックから自動的にコードを生成することで、2番目の部分をシンプルにします。

 UXPinの無料トライアルを開始すると、Spec Modeでのレビュアーとの共同作業のメリットを実感できます。

おすすめの記事:２０２３年版 UX / UI デザイン の最新 トレンド １０選

コンセプトを表現する完全な機能を持つプロトタイプを作る

完全に機能するプロトタイプを共有できなければ、最も深いレベルの洞察を得られるポートフォリオレビューを受けることはできません。UXPinはあなたのUXデザインからプロトタイプを生成し、同僚やメンターと共有することができます。

理想的には、機能するプロトタイプを送ることで、現実的なフィードバックを得ることができます。静的なデザインは素晴らしく見えるかもしれません。しかし、それがインタラクティブな機能になることを計画しているのであれば、あなたが期待する機能をレビュアーに体験してもらう必要があります。そうしないと、作品の間違った側面に対するフィードバックを得ることになります。

確かに、優れたデザインは採用担当者やプロジェクトマネージャーを惹きつけるのに役立ちます。しかし、実際に意図したとおりに機能するデザイン機能は、より多くの注目を集め、他の応募者と差をつけることができます。

プロトタイプで機能をテストしてみると、一見すると問題なく機能しているように見えるかもしれません。しかし、その機能が何をすべきかについてのあなたの期待は、あなたの判断を曇らせてしまいます。先入観のない客観的なレビュアーは、新しいユーザーとしてプロトタイプの機能にアプローチすることができます。もし何かが直感的に感じられなければ、改善すべき点を指摘することができます。

おすすめの記事: クリッカブル ・プロトタイプの作成方法

UXPinを使って作品の作成と共有を始める

UXPinでUXポートフォリオを共有することで、あなたの能力をより強く表現するための率直なフィードバックを簡単に得ることができます。UXPinのアカウントを作成すると、誰でもフィードバックやデザインの微調整、反復作業に招待することができます。UXPinアカウントがなくても、フィードバックしてくれる人はいます。UXPinのアカウントは必要ありませんが、正しいリンクを渡しておけば、あなたの成功に貢献してくれます。

今すぐUXPinの無料トライアルを開始して、誰とでも共有できる完全な機能を持つUXプロトタイプを作成しましょう。UXPinはあなたのキャリアに関係なく、あなたのニーズと収入に合ったメンバーシップレベルを提供します。

The post UXの質を高める ポートフォリオ レビュー appeared first on Studio by UXPin.

プロトタイプ開発において、適切なツールの使用とベストプラクティスに従うことはUX（ユーザーエクスペリエンス）に影響を与えるため重要になります。本記事では、UXのためのツールを使ってプロトタイプを作成する上でのヒントをご紹介します。

製品開発のデザインワークフローで、デザイナーがエンジニアとの連携を強化するために、UXPin Mergeでインタラクティブなプロトタイプを構築してみませんか？Mergeについてご覧になりたい方はこちら。

１．プロトタイプでテストする機能を把握する

プロトタイプが上手くいくためには、製品の主な特徴を知ることが不可欠です。それには、デザインプロセスの前に以下のようなステップを事前に確認しましょう：

• MVP（最小実行可能製品）でプロトタイプの機能を決定する。
• ステークホルダーの期待値を設定し、コメントを集め、優先順位を特定する。
• 開発者と早くから連携し、機能を検討する。製品作りを難しくするような技術的な制約があれば話し合う。
• デザインプロセスでユーザーのニーズ、ペインポイント、目標が配慮されることを考慮する。

最初から製品の特徴を明確にしておきましょう。これにより、プロトタイプのデザインは最初から明確な方向性を持つことができます。

２．プロトタイプのテスト方法を計画する

まずは、セッション１回につき３～５個のタスクをテスト目標にしてください。最初のラウンドでは、全体的なコンセプトとコア機能に焦点を当てましょう。その後に、不可欠ではないけど小さな機能や特定のタスクに移るといいでしょう。

適切なものにまず集中することで、最も重要な質問に対する答えがわかってきます。そのような質問で、テストの目標を確定でき、どこに焦点を当てる必要があるのか分かりやすくなります。

• What（何を）：セッションでテストする要素や目標を選ぶ。
• How（どのように）：合格・不合格のテストベンチマークをはっきりと確定して数値化する。
• Why（なぜ）：プロトタイプの使いやすさ、実現可能性、規模に関する仮説と仮定を確立する。
• Who（だれが）：具体的なテストフェーズの役割と責任を割り当てる。
• When（いつ）：確実に計画通りに進むように、期限とタイムラインの目標を確認する。

多くの人は価値のある機能に集中すべきときに、気づいたら製品全体のプロトタイプを作成していたという状況になりますが、今全体を見なくても、重要でない部分は後でケアすることができますからね。

３．時間がない場合は “ラピッドプロトタイピング” を検討する

ラピッドプロトタイプは、５日間のデザインスプリントを１回で終わらせることができます。このプロトタイピング戦術は、時間的なプレッシャーがあるチームにとって効果的です。つまり、最初のプロトタイプのイテレーションは少し基本的なものかもしれませんが、チームは以下のようなことができるということです：

• １週間ではなく１日で、基本的な製品のプロトタイプを製作する。
• 時間を節約して、次のフェーズに素早く移行する。
• 同じ空間で、急ピッチで、一緒にアイデア出しをする。
• ほとんど速攻テストを開始する。

製品開発チームとデザインチームのメンバーが、１つのホワイトボードで一緒に作業することで生産性が上がり、ツール間を行き来する代わりに１つのデザインツールで共同作業を行うことで、基本的なプロトタイプやテストを記録的な速さで行うことができるのです。

４．製品のプロトタイプの忠実度を決める

プロトタイプが最終製品にどれだけ近いか（高忠実度または低忠実度）を判断する場合、製品開発のどの段階にあるのかを把握しておくことが重要です。製品プロトタイプの忠実度は、デザインするプロトタイプの種類によって違ってきます。

低忠実度（Lo-Fi）プロトタイプは、デザインチームが、どのようなアイデアにもコミットすることなく、低コスト・低労力で可能なソリューションをブレインストーミングするためのものであり、紙、デジタル、またはホワイトボードで出来ます。

高忠実度（Hi-Fi）プロトタイプは、通常、ステークホルダー、スタートアップの投資家、製品をテストするユーザーなどに見せるものであり、最終製品に似た静的なモックアップや、クリックで移動できる機能的なプロトタイプの形をとることが出来ます。

コンポーネントベースのプロトタイプは、見た目が洗練されているだけでなく、完全に機能的でインタラクティブであるため、高い忠実度で、コード化されたデザインライブラリからのインタラクティブなコンポーネントでつくられています。

いいプロトタイピングツールだと、低忠実度から高忠実度までのプロトタイプバージョンをデザインすることができます。つまり、さまざまな忠実度のプロトタイプを提示できるというのは、テスト中に多くのフィードバックや色々な視点を得られるということです。

５．実際にプロトタイプをユーザーにテストしてもらう

プロトタイプをテストすることで、問題を早期に発見することができますが、プロトタイプの評価を誰にやってもらうかで、効果的なテストができるかどうかが決まります。デザインチームや製品開発メンバーは、テスト（検証）からインサイトを提供してくれますが、最も重要なフィードバックや意見、そして最も重要な「ユーザーがどう思うか」まではわかりません。

そのため、実際にユーザーに最終製品のプロトタイプのテストをしてもらえば、その製品に何が必要かが明確にわかるでしょう。

• テスト目的を適切に設定すべく、プロトタイプのテストは低忠実度で行くのか、高忠実度で行くのかを早めに決めておく。
• どこでどのようにテストを実施すべきかを把握すべく、ペルソナや想定されるユーザーシナリオを設定しておく。
• 対面でのモデレーター付きテストやユーザビリティテストは、仮説の検証に最適。また、対面式のテストでは、より正確な結果を得ることができ、ユーザーテストプラットフォームを利用することで、幅広い市場へのアクセスができる。

扱うプロジェクトによって、忠実度の度合いが決まります。低忠実度テストは、製品アイデアや新しいスタートアップの開発など、ゼロから始める場合には有効ですが、デザインシステムがすでにある場合、既存製品の新機能のプロトタイプを作るのであれば、UIコンポーネントですぐにテスト可能なプロトタイプを組み立てるといいでしょう。

６．プロトタイプを実際のコンテンツで埋め尽くす

プロトタイプは、より現実的であればあるほどいいです。最終製品で想定される実際のコンテンツで機能や製品のアイデアをテストすることで、より良いフィードバックが得られ、理解が深まり、いいやり取りができますからね。

完成品に組み込まれる可能性のあるコンテンツの多くは、まだ準備が整ってないでしょうが、その代わりに、少なくとも最終製品のコピーやイメージに近いコンテンツを使うことを検討しましょう。

• プレースホルダの文字の使用を避けなければ、ユーザーがわかりづらく感じてしまい、曖昧でただの見本みたいになってしまうので、もし「Lorem ipsum（ロレム・イプサム）…」という言葉をどこかで見かけたら、他のものに置き換える。
• 特にテスターに馴染みがない場合は、画像や視覚的要素を適切に使う。必要なロゴ、画像、アイコンを入手できない場合は、似たような要素を代わりに盛り込むなど、できることはしておく。
• テスト用の文章を作成する人が見つからない場合は、関連するコピーを配置する。関連商品を見てみたり、似たような商品カテゴリのテンプレートコンテンツを利用する。

包括的なテストには、現実的なコンテンツを使ったデザインとプロトタイピングのツールが必要です。テストユーザーに、製品の UI要素をあまり一般的でない形で体験してもらいましょう。そしてその性格を知るヒントを提供し、テストをより簡単に、より効果的に行えるようにしましょう。

７．反復とテストをする

プロトタイプとは、何度も何度も動作を繰り返すことであり、その繰り返しで毎回新たなことがわかり、問題が見つかり、それが改善されていきます。テストを重ねれば重ねるほど、正しい方向に進んでいるという確信がより持てるようになるでしょう。

• プロトタイプテストは、はじめは広い心で受け止める。期待に添えないことも想定し、自分自身を過度に批判しないこと。
• 情報を集め、フィードバックを細かく分析する。テスト結果を細かく見ることで、より早く目標に到達できる。
• 変更を迅速に行い、任意的な修正に振り回されるのを避ける。
• そして、テストを繰り返す。必要であれば何度でも、製品がユーザーのニーズを満たしていると確信できるまでテストを続ける。

８．デベロッパーと連携する

現代のプロトタイプ製品のデザインプロセスでは、デザイナーとデベロッパーの作業が重なることがよくあるため、それが摩擦やトラブルにつながることも少なくありません。なのでここでの最大のポイントは「連携」です。プロトタイプがうまくいくには、製品のデベロッパーと共通の認識を持つことが非常に重要です。

• 特に、デザインの決定やテストの結果が既存のアプリに影響を与える可能性がある場合は、タイムラインの予想を立てる。デベロッパーにいつ回答が得られるかを伝えることで、チームはそれに応じて計画を立てることができる。
• コミュニケーションチャネル、役割、コンタクトポイントを確立することで、当初から効果的なやり取りをする。
• デザイナーとデベロッパーの間で、何があっても「信頼できる唯一の情報源（Single source of truth）」を元に進めていき、これを変更する場合は、全員が認識し、同意した上で進める。「信頼できる唯一の情報源」の確立の仕方を確認する場合はこちら。

良いプロダクトデザインというのは、いつも良い連携によって生まれます。協力と効果的なコミュニケーションは、良いプロトタイプのプロセスの鍵ですが、ありがたいことに、プロダクトデザインや開発プロセスでコードベースの UI 要素を使えるデザインツールがあり、そのツールで、スムーズな連携が実現し、インタラクティブなプロトタイプへの道がひらけます。

そしてこれが最後のポイントに繋がります。

９．適切なプロトタイピングツールを選択する

多くのデザイナーは、プロトタイプのプロセスでツールを複数採用するという間違いを犯していますが、これは、静的なデザインからインタラクティブでコード化されたものへと移行する際にどうしても上手くいかない可能性があります。

UXPin の特徴やリソース、機能により、デザイナーもデベロッパーも、デザイン、プロトタイプ、テストを「オールインワン」で行うことができます。プロトタイプの製品デザインを簡単にするツールなので、一部UXPinの機能をご紹介します：

• 完成品に非常に近い実物そっくりのプロトタイプ
• 高度なインタラクション、変数、またはステートによる、全マイクロインタラクションの提示の実現。
• 製品の外観に似せるだけでなく、デザインシステムに沿った機能を持つ、完全にインタラクティブなプロトタイプ。

UXPinのフィードバックなどの詳細な分析結果を収集、管理、提示できる機能・操作性は革新的なものです。つまり、プロトタイプのテストがより効果的になり、よりターゲットのユーザーが持つニーズを反映できるのです。

プロトタイプのプロダクトデザインを正しく理解しよう

デジタル製品のデザインでは、プロトタイプの効果的なテストが求められますが、プロトタイプは、単に見栄えの良いものよりも、インタラクティブな機能を持つものの方が、うまくいきやすいです。

製品の特徴を理解し、プロトタイプのスキルを上げませんか。製品のデベロッパーとともに、プロトタイプの重点分野を定め、範囲を当初から設定しましょう。そして適切な被験者を集めてテストを行い、現実的なプロトタイプのコンテンツの適切なバランスとともに最適な忠実度を表示します。その製品のプロトタイプに満足できるまで、再テストと反復を繰り返し、あなたやチーム、デベロッパーにとって有効なツールを見つけてください。

デザイナーにとって、デベロッパーに渡す前のテストでは、このインタラクティブなプロトタイプが頼りです。そこで、インタラクティブなプロトタイプを最初から作成するのに役立つツールの１つが UXPinであり、Mergeの技術を搭載することで、デザインプロセスと開発プロセスを思いもよらない方法でつなげることができます。UXPin Merge をご覧になりたい方はこちら。

The post プロトタイプの プロダクトデザイン – ９つのヒント appeared first on Studio by UXPin.

この記事は、UXPinのエンタープライズ向け機能であるUXPin Merge について簡潔にまとめました。Reactベースのライブラリを Merge に統合し、簡単にデザインできるのでぜひ試してみてください！

UXPin Merge は、デザイナーが開発者のReactコンポーネントを取り込み、実際のコードを使用してインタラクティブなプロトタイプを作成することができます。これは従来のデザインツールにはない魅力です。Merge 機能によって、デザイナーにとってもデザインツール内で「第2の」デザインシステムを作成する必要がなくなり、チーム全体にとっての「信頼できる唯一の情報源（Single source of truth）」を提供できるようになりました。デジタル製品の開発において、デザイナーとデベロッパーの断絶を解消したのです。

今回 Merge を簡潔に説明するにあたって、MozillaのReact Todo Appのサンプルを使用してMergeと統合してみました。統合後は、コンポーネントを使って、UXPinでインタラクティブな Todoリストのプロトタイプをデザインできるようになりますよ。

始める前に、UXPin Merge へのアクセス権をまだお持ちではない方は、こちらからお知らせください。認証プロセスとセットアップが完了したら、コードでデザインの準備は整いました！

GitHubとの統合についてもご安心ください。制約などないので、お好きなものをお使いください！

コンポーネント

Todoアプリでは以下３つのReactコンポーネントがあります：

1. Form：ToDo 項目の作成
2. FilterButton：現在の状態によって Todo をフィルタリング
3. Todo：ToDoリスト項目

これらのコンポーネントは `src/components` のディレクトリにあり、下のイメージでまとめました：

このチュートリアルが終わる頃には、デザイナーは上記３つのコンポーネントでプロトタイプを作成できるようになります。実際のデザインシステムでは、コンポーネントが３つ以上あるかもしれませんが、ここで紹介する方法が他のデザインシステムでも応用できると思います。

UXPin Merge をセットアップ

まず、 https://github.com/mdn/todo-react をフォークしてクローンしてください。次に、CLIを含むUXPin Merge NodeJSパッケージをインストールします。

1. Navigate（ナビゲート）：cd todo-reactというプロジェクトフォルダに移動する
2. Install（インストール）：UXPin MergeとCLI NodeJSバンドルを yarn add @uxpin/merge-cli-dev でインストールする
3. Ignore（無視）：UXPin Mergeのビルドディレクトリを echo ‘/.uxpin-merge’ >> .gitignore で無視する 

デザインシステムでは、さらに以下のような２つのコンフィグファイルが必要です：

1. uxpin.webpack.config.js
2. uxpin.config.js

UXPinは通常、既存のWebpackのビルドプロセス全体を使う必要はないので、デフォルトのビルドを使います。uxpin.webpack.config.jsファイルを作成し、以下のコードを貼り付けましょう：

</p>
const path = require("path");
const webpack = require("webpack");
 
module.exports = {
    output: {
      path: path.resolve(__dirname, "build"),
      filename: "bundle.js",
      publicPath: "/"
    },
    resolve: {
      modules: [__dirname, "node_modules"],
      extensions: ["*", ".js", ".jsx"]
    },
    devtool: "source-map",
    module: {
      rules: [
        {
          test: /\.(s*)css$/,
          use: [
            {
              loader: 'style-loader'
            },
            {
              loader: 'css-loader',
              options: {
                importLoaders: 2
              }
            },
          ]
        },
        {
          loader: "babel-loader",
          test: /\.js?$/,
          exclude: /node_modules/,
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
          }
        },
      ]
    }
}
 
<p>

UXPin Merge で使うコンポーネントは、レポジトリのディレクトリの一番上にある uxpin.config.jsファイルで、そのファイルディレクトリを指定する必要があります。下のコードスニペットでもわかるように、この時点では「Form」コンポーネントの src/components/Form.jsのみを追加します。他のコンポーネントはチュートリアルの後半で追加していきます。

uxpin.config.js を作成し、以下の内容を貼り付けましょう：

module.exports = {
  components: {
    categories: [
      {
        name: 'General',
        include: [
          'src/components/Form.js',
        ]
      }
    ],
    webpackConfig: 'uxpin.webpack.config.js',
  },
  name: 'Learn UXPin Merge - React Todo list tutorial'
};

最後に、 Webpackがアプリバンドルを作成するためにBabel-loaderを使用します。そして babelをインストールするには、yarn add babel-loader -devからyarn install のコマンドを使います。

おめでとうございます👏 これで、Formコンポーネントを表示するのに必要最低限のコンポーネントの準備ができました。

Experimental Mode（実験モード）

Experimental Modeでは、UXPinにプッシュする前に、ローカルコンポーネントのプロトタイプを作成し、動作確認ができます。UXPin Merge のExperimental Modeを開き、 Formコンポーネントをプレビューするために、 ./node_modules/@uxpin/merge-cli/bin/uxpin-merge -disable-tunneling を実行してください。実験モードでは、-disable-tunneling を使うと、リクエストはローカルホストの Webサーバーに直接送られます。（注：UXPinの -disable-tunneling オプションは、Chromeでのみ機能します。）

`uxpin.webpack.config.js` で提供される設定を使って、Experimental Modeはコンポーネントをバンドルして、ブラウザウィンドウを開きます。UXPinエディタと同じ方法でコンポーネントをレイアウトすることができ、Experimental Modeが読み込まれたら、サイドバーからFormコンポーネントをキャンバスにドラッグ＆ドロップします：

Form コンポーネントがありますが、スタイリングが足りないので、グローバルラッパーのコンポーネントを作成することにします。

グローバルラッパーコンポーネントを使ってCSSを適用する

デザインシステムと同様に、このTodoアプリはグローバルスタイルがあり、 `src/index.css` ファイルで指定されています。全コンポーネントに、このファイルで指定されたスタイルが必要です。ファイルは、グローバルラッパーコンポーネントから読み込むことができます。そしてこのコンポーネントは、UXPinのキャンバスにドラッグしたすべてのコンポーネントを包みます。

ラッパーファイルを以下のように作成します：

mkdir src/wrapper/ 

touch src/wrapper/uxpinwrapper.js

以下をコピーし、`UXPinWrapper.js`にペーストします：

import React from "react";
import '../index.css';

export default function UXPinWrapper({ children }) {
  return children;
}

import ‘../index.css’;` の行は、各コンポーネントをレンダリングする前にCSSが読み込まれるようにします。

このラッパーファイルを使うようにUXPinに指示するため、以下を uxpin.config.jsに追加します：

wrapper: 'src/wrapper/UXPinWrapper.js',

ターミナルで ./node_modules/@uxpin/merge-cli/bin/uxpin-merge -disable-tunneling を使って、UXPin の実験モード を再起動します。再起動は、コンフィグファイル更新のときに必要になります。ブラウザの再読み込みは、コンポーネント更新の場合にのみ必要です。

Experimental Modeでは、スタイル設定された Formコンポーネントのある新しいブラウザウィンドウを開く必要があります：

名前をカスタマイズできるFilterButtonの追加

では、UXPin MergeにFilterButtonを追加する作業を行います。このボタンは Formコンポーネントの下に表示されます：

このコンポーネントを追加するのは、Formコンポーネントと同じですが、ボタン内に表示されるテキストをデザイナーが指定できるように `prop-types` のパッケージで実装したいと思います。

propTypesは、コンポーネントを編集する際にUXPinのプロパティパネルにマッピングされますが、既存のFilterButtonコンポーネントではprop-typesを使っていないので、`FilterButton.js`を追加しましょう：

</pre>
import React from "react";
+ import PropTypes from 'prop-types';

function FilterButton(props) {
  return (
@@ -15,4 +16,9 @@ function FilterButton(props) {
  );
}

+ FilterButton.propTypes = {
+   name: PropTypes.string
+ }

+FilterButton.defaultProps = {
+  name: 'Button Name'
+};

export default FilterButton;

<pre class="wp-block-syntaxhighlighter-code">

src/components/FilterButton.js’`を `uxpin.config.js` に追加し、./node_modules/@xpin/merge-cli/bin/xpin-merge -disable-tunneling で再起動してください。コンフィグファイルを更新したため、再起動が必要です。Experimental Modeが起動すると、サイドバーに新しい「FilterButton」コンポーネントがパネル上に表示されているはずです。これをクリックしてキャンバスにドラッグします。

３つのコンポーネントのうち２つが UXPin Mergeで動作するようになりました。残る１つは Todoコンポーネントです。

ラッパーでTodoコンポーネントを追加する

最後のコンポーネントである「Todo」に進みます。これは、UIで Todoアイテムのリスト内に表示されます。

FilterButtonを追加するときに、propTypesを追加するためにFilterButton.jsファイルを編集しました。では、Merge固有の変更を分離し、コンポーネントのソースコードを変更したくない場合は、Todoコンポーネントのためのラッパーの作成ができます。これは、CSSの適用に使ったグローバルラッパーコンポーネントと考え方自体は似ていますが、Todoコンポーネントに特化したものになります。

次のように入力します：

mkdir -p src/components/merge/todo 

touch src/components/merge/todo/Todo.js

以下のコードをコピーして、Todo.jsに貼り付けます。

import React from 'react';
import PropTypes from 'prop-types';

// Import the original component
import TodoM from '../../Todo';

function Todo(props) {
  return <TodoM {...props}/>
}

Todo.propTypes = {
  /**
   * If `true`, the todo will be marked as completed.
   */
  completed: PropTypes.bool,

  /**
   * The name of the todo.
   */
   name: PropTypes.string,

  toggleTaskCompleted: PropTypes.func,
}

Todo.defaultProps = {
  name: 'Do Laundry'
};

export default Todo;

オリジナルのTodoコンポーネントを `TodoM` としてインポートし、新しく確定した `Todo` 関数でこのコンポーネントを返しています。また、PropTypesはFilterButtonコンポーネントと同じように、新しく確定された `Todo` ラッパー関数で指定しています。

Uxpin.config.js に src/components/merge/todo/Todo.js」を追加し、./node_modules/@uxpin/merge-cli/bin/uxpin-merge -disable-tunneling で再起動します。実験モードで新しいウィンドウを立ち上げたら、Todo コンポーネントをクリック＆ドラッグでキャンバスに配置します：

Todo コンポーネントが表示され、デフォルトの「Do Laundry」の Todo 名も表示されます。このデフォルトの名前は、 Merge を使用する場合にのみ適用されます。

UXPinへのプッシュ

デザインシステムを UXPin にプッシュするまでは、コンポーネントは自分にしか見えないので、デザインチームがそのコンポーネントを使えるようにするには、コンポーネントバンドルを UXPinにプッシュする必要があります。 Mergeでデザインライブラリを作成してプッシュするには以下の２ステップが必要です：

１．UXPinでライブラリを作成する

1. UXPinのアカウントに行く
2. UXPin エディタに入る
3. 新しいライブラリを作成する
4. Reactコンポーネントをインポートするオプションを選択する。
5. Authトークンをコピーする（誰とも共有せず、gitレポジトリにチェックインしたファイルにも配置しないでください。このトークンは、あなたのアカウントでライブラリに直接アクセスするためのものです）。

以下のような流れになります：

２．uxpin-merge CLI経由でライブラリをプッシュする。

前回の停止で作成したトークンを使って、プロジェクトのレポジトリ内から以下を実行します：

./node_modules/@uxpin/merge-cli/bin/uxpin-merge push –token YOUR TOKEN 

デザインチームが Mergeライブラリにアクセスできるようになりました。

 Merge ライブラリの使用

 Merge のデザインライブラリがプッシュされたので、UXPin エディタ内でテストしてみましょう：

* ブラウザで UXPin Editor をリロード

* エディタ左下の「Learn UXPin Merge（UXPin Merge  について）」のデザインシステムを選択

* コンポーネントをキャンバスにドラッグ&ドロップ

下の画像のようなプロトタイプができるているはずです：

プレビューとエクスポート

UXPinでプロトタイプを作成して、アプリへのエクスポート準備が整いました。プロトタイプをプレビューし、Specモードを使ってコンポーネントのJSX コードをコピー＆ペーストすることができます。

エディタの右上にあるPreview（プレビュー）ボタンをクリックします。読み込まれたら、上部にある「Spec」リンクをクリックします。これで、コンポーネントをクリックして、右側のパネルに生成する JSXコードを表示できるようになります：

デザインシステムの初期バージョンをプッシュするのは素晴らしいことですが、時間をかけてかなりの数のアップデートをプッシュする必要がありそうです。

アップデートのプッシュ

FilterButtonには、アクティブなフィルタを示すために「pressed（押されている）」ステートがあります。Reactアプリを見てみると、「pressed（押されている）」と「unpressed（押されていない）」ステートの違いは以下の通りです：

このステートへの反応を追加してみましょう。src/components/FilterButton.js` に以下の変更を加えます：

FilterButton.propTypes = {
-   name: PropTypes.string
+   name: PropTypes.string,
+   isPressed: PropTypes.bool
}

変更をgitにコミットし、UXPinにプッシュします：

git add. 

git commit -m “Added isPressed prop to button” 

./node_modules/@uxpin/merge-cli/bin/uxpin-merge push –token YOUR TOKEN

Mergeコンポーネントは、最新のプッシュされたコードに自動的に同期されます。最新のものを表示するには、UXPin エディタを表示するタブを再度読み込み、FilterButtonを選択します。エディタの右側のパネルに新しい「Pressed」プロパティが表示されるので、選択するとステートが有効になります：

今後変更するときも、同じ流れでしてみてください。ちなみにプロトタイプでは、プッシュされた最新バージョンのコンポーネントが自動的に使われます。

まとめ

Reactアプリを作成し、そのコンポーネントをUXPin Mergeにプッシュしました。また、コンポーネントの変更や新しいコンポーネントの追加に、アップデートをプッシュする方法も学びました。これで、デザインチームはこのコンポーネントを使って、UXPinで忠実度の高いプロトタイプを作成できるようになりました。

このプロジェクトのソースコードは GitHubで閲覧できます。より高度な Merge テクニックを学ぶには、Mergeドキュメントを参照するか、salesjp@uxpin.com までお問い合わせください。

UXPin Merge をまだお持ちでない方は、アクセスのリクエストをお願いします。

The post コードでデザインする【UXPin Merge 入門】 appeared first on Studio by UXPin.

ユーザーフローは、UX のデザインプロセスにおいて不可欠なものです。この貴重な UX のアーティファクトによって、プロダクトチームはユーザーの視点からフローやプロセスを視覚化し、エラーを減らし、UXを向上させることができます。

そこで本記事では、 ユーザーフロー について深く掘り下げ、その重要性、ユーザーフローを導く原則、視覚的表現、そして様々な種類のフローについて見ていきます。

アイデア出しからデザインハンドオフまで、デザインプロセスのあらゆる解決策となるオールインワンデザインツールである UXPin で、ユーザーフローの作成と高忠実度なプロトタイプのデザインをしませんか。今日からプロトタイプ第１合を作りましょう。無料トライアルのお申し込みはコチラ。

UXにおける ユーザーフロー とは？

ユーザーフローとは、デジタル製品、アプリ、Webサイトをナビゲートする際に、ユーザーが行う一連のステップ、決定、アクションを表すグラフィックビジュアライゼーションです。

プロダクトチームは通常、オンボーディングやECサイトで商品購入時など、一度に１つのタスクやゴールに焦点を当てます。デザイナーは、これらの場面でのユーザーフローにおけるプロトタイプを作成し、担当者やステークホルダーと UX（ユーザーエクスペリエンス）をテストし、フィードバックを繰り返しながら、開発可能な製品を完成させていきます。

UXデザインでの ユーザーフロー の重要性

ユーザーフロー は、ユーザーが特定のタスクやゴールを達成するために、アプリケーションやWebサイトを通過する経路を可視化するものであり、その可視化によって、チームはユーザーフロー内の摩擦点や機会を特定し、それを解決するためのソリューションを設デザインすることができます。

さらに、デザイナーは、より効率的で満足度の高いユーザー体験を実現するために、フローの最適化も視野に入れることができます。

よくデザインされた ユーザーフロー がもたらすメリット

ユーザーと組織にとって、以下のような多くのメリットにつながります：

• ユーザビリティの向上：最適化されたユーザーフローは直感的で、意思決定がシンプルであり、認知負荷を軽減するため、ユーザーが迷ったりイライラしたりすることのない、ユーザーに寄り添った体験がもたらされる。
• 顧客維持の向上：デジタル製品がユーザーのニーズを満たし、タスクの遂行や目標の達成を実現すれば、ユーザーはその製品を使い続け、そのポジティブな体験を共有する可能性が高くなる。
• コンバージョンの向上：ユーザーフローを効率化することで、サインアップ、購入、サブスクリプションなど、ビジネスの収益を生み出すタスクの障害となるものが取り除かれる。
• コスト削減：ユーザーフローの最適化によって冗長な画面や機能が削除されるため、デザイン、開発、メンテナンス、サーバーリクエスト、API 使用など、多くのコスト削減につながる。
• アクセシビリティの向上：デザインチームは、アクセシビリティ要件を満たすのにユーザーフローを視覚化して最適化することができ、それによって UI がより包括的なものになり、製品のユーザーベースが増える。
• データに基づいたデザインの決定：ユーザーフローを分析することで、ユーザーの行動や嗜好に関する貴重なインサイトが得られ、それによってデザイナーは、思い込みではなく実際のデータに基づいて意思決定を行うことができる。また、データに基づいたデザイン決定により、ユーザーのニーズを満たす製品や体験が実現し、より直感的で楽しく、ユーザーに寄り添ったものになる。

効果的な ユーザーフロー の UX の原則

うまくいくユーザーフローには、デザインコンセプトや意思決定の指針となる UX の原則が組み込まれています。ここでは、ユーザーフローをデザインする際に考慮すべき基本的な UXの原則 をいくつかご紹介します：

わかりやすさ と シンプルさ

ユーザーフローは、わかりやすく、ナビゲートしやすいものでないといけません。なので複雑なデザインや、使う前に学ばないといけないような機能は避けないといけません。また、ナビゲーションとインタラクションの要素は、一貫性があって予測可能で、わかりやすいものでないといけません。プロセスやインタラクションが、頭を使いすぎるのを強いられるようなものだと、それをやめるのが痛い出費になったとしても、より簡単な選択肢の方に行ってしまうでしょう。

一貫性

製品やユーザーフロー全体を通して、一貫したデザイン言語、レイアウト、パターン、インタラクションデザインを維持しましょう。デザインの一貫性で親しみやすさが高まり、より直感的でユーザーに優しい体験をもたらしますからね。

柔軟性

代替経路やショートカット、入力方法など、タスク完了のための方法を複数提供することで、さまざまなニーズや好み、能力に対応したフローをデザインしましょう。

フィードバックとコミュニケーション

UIフィードバックは、ユーザーをガイドし、ユーザーフローをナビゲートする際の期待値を管理するものであり、例えば、進捗インジケーター、視覚的ヒント、ステータス情報、「完了」や「エラー」などのメッセージ、警告などがあります。このようなコミュニケーションによって、ユーザーはシステムの状態、操作が完了したかどうか、次に何をすればいいかがわかります。

ユーザーニーズの予測

デザイナーは、ユーザーリサーチを活用してユーザーのニーズの予測や対処をすることで、障害や行き詰まりを防ぐことができます。役立つヒントやエラーを防ぐ機能が追加されれば、ユーザーはより早く問題を解決し、より効率的で効率的なフローを実現できます。

最小限の工程

デザイナーは、不必要な工程やアクション、意思決定ポイントを排除することで、ユーザーフローを効率化することができます。このような摩擦を最小限に抑えることで、効率性が上がり、エラーやドロップオフを減らすことができます。

ユーザーの目的を重視

あなたは、目的を効率的に達成できる製品を使いたいですか、それともビジネス価値の提案やその他の無関係なコンテンツで溢れかえっている製品を使いたいですか？ユーザーの目標や望む結果を優先し、効率と成功を高める機能を備えたユーザーフローをデザインしましょう。

アクセシビリティとインクルーシブ

多様な能力、嗜好、デバイスを持つユーザーが製品を使い、フローをナビゲートし、タスクを完了できるようにしましょう。デザイナーは、フォントサイズ、色のコントラスト、キーボードナビゲーション、言語、スクリーンリーダーとの互換性などの要素が、UX にどのような影響を与えるかを考慮しないといけません。アクセシビリティについての詳細は、こちら（英語のブログとなります）をご覧ください。

 ユーザーフロー の可視化するための方法

ユーザーフローの種類を調べる前に、デザインチームがジャーニーのマッピングを可視化するのに使う方法について説明することが重要です。

フローチャート

ユーザーフローチャート（ユーザーフロー図）は、情報の流れ、意思決定ポイント、ユーザーの行動を表現するために、多くの業界で使用されている図解技法であり、記号、矢印、その他の図形を使って、要素、プロセス、決定、データの入出力を表現します。

ワイヤーフロー

ワイヤーフローは、ワイヤーフレームとフローチャートを組み合わせて、ユーザーがインターフェースを通過するまでの道のりを詳細に表現しており、各画面のレイアウトや、ユーザーや情報が画面間をどのように流れるかが表現されています。

ワイヤーフローで、ユーザーと特定の要素とのインタラクションの視覚化や、そのインタラクションのコンテキストを理解することができ、デザイナーやエンジニアは、ワイヤーフローを使って情報アーキテクチャやナビゲーションをより詳細に視覚化することができます。

スクリーンフロー

スクリーンフローとは、ユーザーが製品を操作する際の経路を示す、注釈付きのスクリーンショットやモックアップのことです。ワイヤーフローを忠実に再現したもので、デザイナーやステークホルダーは、最終製品を正確に表現した画面を使って、ユーザーフローをより詳細に視覚化することができます。

ストーリーボード

デザイナーは、映画業界のようにストーリーボードを使い、一連のイラスト、画像、またはスクリーンを使ってユーザーのジャーニーを表示します。ストーリーボードで、デザインチームはユーザーフローからズームアウトして、ユーザーの環境や状況を視覚化することができます。

例えば、食品配達のドライバー向けのアプリをデザインする場合、ユーザーフローを以下のように多角的に可視化する必要があるでしょう：

• 徒歩
• 自転車
• 原付き／バイク
• 車
• バン

ストーリーボードとユーザーフローを組み合わせることで、デザインチームがユーザーとより深く共感し、より適切なソリューションを提供することができるのです。

ユーザーフローの種類

ここでは、一般的なユーザーフローのカテゴリーを７つご紹介します。デザインチームは、このユーザーフローを視覚化するために、上記のテクニックとメディアを使うといいでしょう。

タスクフロー

タスクフローは、特定のタスクを完了するためにユーザーが実行しなければならない手順を表しており、ユーザーの行動と意思決定の順序に焦点が当てられ、多くの場合フローチャートを使って視覚化されます。特にペインポイントを特定し、ユーザージャーニーを最適化するのに有効です。

オンボーディングフロー

オンボーディングフローで、プロダクトチームは製品の初期設定と導入を可視化し、デザインできるようになります。このフローは、アカウント作成、チュートリアル、ハイライト、カスタマイズされたオプションを組み込んでユーザーに慣れ親しんでもらい、すぐに使い始めてもらうことを目的としています。

コンバージョンフロー

コンバージョンフローは、収益と成長を生み出すのに非常に重要であり、ニュースレターの登録、購入、プランのアップグレードなど、目的の行動や結果に至るまでのステップを表すものです。デザイナーは通常、コンバージョン率やアップセルなどの収益を生み出す活動を最大化するために、このフローにおける摩擦や注意力を最小限に抑えることを目指します。

ナビゲーションフロー

ナビゲーションフローは、デジタル製品の構造とアーキテクチャを概説するものです。デザインチームは、ユーザーが画面、セクション、機能の間をどのように移動するのかを、この可視化によって理解するすることができます。ユーザーがより速く探し、より効率的にタスクをこなせるように、彼らはこのようなインサイトを使って機能やコンテンツの優先順位を決めていきます。

アカウント管理フロー

ユーザーは、住所、パスワード、請求書の詳細、アプリの設定、定期購読など、アカウント情報を更新する必要があることがよくあります。アカウント管理フローは、このような管理業務をシンプルにし、ユーザーがより重要な業務に専念できるようにするためのものです。

エラーフロー

エラーフローによって、デザインチームは問題をシミュレーションし、それを解決するためのソリューションをデザインすることができます。このようなインサイトは、ユーザーフローを改善し、エラーの発生をなくしたり、ユーザーが問題を修正するための適切なフィードバックを作成するのに使われます。

オフボーディングフロー

オフボーディングフローは、定期購入の解約やアカウントの削除など、製品やサービスの利用を中止する際にユーザーを誘導するフローです。このフローは、オンボーディングと同様に効率的でなければならず、それによってフラストレーションが最小限に抑えられ、顧客を取り戻す可能性が上がります。

 ユーザーフロー の作り方８つのステップ

ここでは、ユーザーフローを作成するためのフレームワークを順番にご紹介します。

１．目標とエントリーポイントを明確にする

分析したいタスクや目標を特定します。− これは、上記のユーザーフローや製品にとって固有のものである可能性があります。この目標で、ユーザーフローの範囲と焦点、およびどの視覚化が最も適切かを決めることができます。

また、Webサイトの UX をデザインする場合、フロー作成の前に、ユーザーがどこからやってくるのかを判断してマップ化するのもいい習慣です。モーガン・ブラウン氏の『Stop Designing Pages and Start Designing Flows （ページのデザインをやめてフローのデザインを始めなさい）』でのアドバイスに基づき、Webやモバイルのプロトタイプでは、以下のソースを検討することをお勧めします：

• ダイレクトトラフィック
• オーガニック検索
• 有料広告
• SNS
• 紹介サイト
• メール

２．ペルソナを特定する

あなたの製品には、多くのユーザーペルソナがあるかもしれません。その中から、ユーザーフローに最も関連性の高いものを決めましょう。また、複数のペルソナに対してユーザーフローを評価し、全員のニーズと期待を満たすようにするのもいいかもしれません。

ペルソナのテンプレートや作成に役立つヒントについては、無料のeブック『The Guide to UX Design Process & Documentation （UXデザインプロセス＆ドキュメンテーションの手引き）』の「Analyzing Users Before Diving Into Design（デザインに入る前にユーザーを分析する）」の章をご参照ください。

３．ユーザーのアクションと意思決定ポイントをリストにする

ユーザージャーニーを個々の行動と意思決定ポイントのリストにして噛み砕き、目標達成のためにユーザーが取るべき各ステップとその選択肢を考えましょう。例えば、サインアップ画面には、メールでのサインアップや複数のソーシャルログインなど、いくつかのオプションがあるとします。サインアッププロセスを完了するための工程はオプションごとに違いますよね。

４．フローをマップ化する

まずは、紙やデジタルツールでフローをスケッチし、多くのアイデアを速やかに反復することから始めましょう。そしてこれは、チームメンバーがアイデアや提案を共有する共同作業であるべきです。

基本的な概要が決まったら、デザインツールでユーザーフローを作成するといいでしょう。UXPin にはデザインライブラリが５つ内蔵されており、そのうちの１つが「ユーザーフロー」という名前にふさわしいものです。UXPin のユーザーフローライブラリには、チームがユーザージャーニーを作成・共有するために必要な、以下のようなものがすべて含まれています：

• あらゆる方向に対応するフローライン
• アクションブロック
• アイコンブロック
• ラベル
• デバイス（モバイル、タブレット、デスクトップ）
• ジェスチャー

ここでは、フローアウトライン化するためのテクニックをいくつかご紹介します。

ライティング優先のアプローチによるフローのアウトライン化

ジェシカ・ダウニー氏がJumpstarting Your App Conception Without Sketching UI （UI をスケッチすることなく、アプリの構想をスタートさせる）という記事で書いている、「ライティング優先」のアプローチを使うといいでしょう。このアウトライン化手法で、アイデアを具体化し、アプリやサイトの各ページの「共通理解」を構築することができます。

例えば、銀行アプリを作ってみましょう。シナリオは、「自動入金をオンにしたい人がいる」です。以下のアウトラインで、[ 括弧 ]内のコンテンツはアクションボタン/リンクを表していることに注意してください。

ステップ1：自動入金の設定を希望しますか？

[自動入金の設定]

ステップ2: 入金頻度の選択

[月１回]　[月２回]

[一週間おき]　[毎週]

ステップ3：毎月１回入金する

[カレンダーの日付の選択]

ステップ4：金額の設定

金額表示欄

[自動入金の設定]

フローをアウトライン化するための速記法

また、Basecamp のライアン・シンガー氏が使っている速記法のアプローチも試してみてください。彼のアプローチは、フローを継続的な会話として扱います。

上記の銀行アプリの例では、ステップ２とステップ３の略記を作成すると、次のようになります：

シンガー が Basecamp でどのように速記を行い、このアウトライン化プロセスでどのように複雑なフローを描けるかは、「A Shorthand for Designing UI Flows （UIフローのデザインのための速記法）」でご確認ください。

５．スクリーンを追加する

ワイヤーフローやスクリーンフローをデザインしている場合、ユーザーフローに必要な忠実度のレベルに応じて、関連するワイヤーフレーム、モックアップ、スクリーンショットを追加するといいでしょう。

６．システムのフィードバックを含める

エラーメッセージ、完了通知、ロードインジケータなど、システムのフィードバックとレスポンスを追加しましょう。このような詳しい情報によって、デザイナーやエンジニアは、ユーザーを案内するための適切な UI コンポーネントやコンテンツを作成することができます。

７．レビューとイテレーション（反復）

ユーザーフローを分析し、潜在的な改善点、ペインポイント、または摩擦を確認しましょう。また、可視化したものをチームメンバーやステークホルダーと共有してフィードバックをもらい、プロトタイプに適したフローができるまで反復しましょう。

８．プロトタイプとテスト

デザインツールでユーザーフローのプロトタイプを作成しましょう。UXPin に内蔵されているデザインライブラリ（iOS、Material Design、Bootstrap、Foundation）は、Webおよびネイティブアプリケーション用の UI コンポーネントとパターンをデザイナーに提供しており、デザインライブラリパネルから UI 要素をドラッグ＆ドロップして、ブラウザでテストできる忠実度の高いモックアップの作成や、UXPinミラーを使ったモバイルアプリのテストを行うことができます。

以下のような高度な UXPin 機能を使って完全にインタラクティブなプロトタイプを作成し、最終製品を正確に複製する結果を達成しましょう：

ステート：UI 要素１つに対して複数のステートを作成し、アコーディオン、カルーセル、ステッパー などの複雑なインタラクティブコンポーネントをデザインすることができます。

変数：ユーザーの入力データを取得し、例えば、登録フォームの名前フィールドのデータを使ったウェルカムメッセージの作成など、個別化された動的なユーザー体験を実現します。

エクスプレッション： Javascriptのような関数で、複雑なコンポーネントや高度な機能をコードなしで作成できます。

条件付きインタラクション：ユーザーインタラクションに基づいて【if-then】や【if-else】の条件を作成し、最終製品の体験を正確に再現すべく、複数の結果を持つダイナミックなプロトタイプを作成します。

UXPinの高品質なプロトタイプとテストでユーザーフローを強化しませんか。世界最先端のデザインツールで、顧客に合った UX デザインを始めましょう。無料トライアルのお申込みはコチラ。

The post スムーズなUXをかなえるための ユーザーフロー とは？ appeared first on Studio by UXPin.

『Design-to-Code（デザインからコード）』とは、デザインツールを使ってデザイナーがプロトタイプを作成し、デベロッパーがそれをコード化するという、一般的な製品開発の流れを簡略化したものです。

UXPin Mergeは、このプロセスをひっくり返す画期的な『 Code-to-Design （コードからデザイン）』のワークフローを採用しています。

本記事では、FinTechの大手であるPayPalを含む４つのケーススタディとともに、「 Code-to-Design 」の利点や課題について述べ、製品開発プロセスをどのように強化できるのかについて説明していきます。UXPin Mergeの詳細についてはぜひこちらのページをご覧ください。

『 Code-to-Design 』とは？

『 Code-to-Design 』は、UXPinがMergeの技術を使って開発したUXワークフローです。Mergeを使うことで、デザイナーはUXPinのデザインエディターにレポジトリからUIコンポーネントをインポートし、それらを使って「コンポーネント駆動型プロトタイピング」と呼ばれるプロセスで、完全にインタラクティブなプロトタイプを作成することができます。

このコンポーネント駆動型プロトタイピングの手法によって、デザイナーはプログラミング言語を書いたり学んだりする必要がなく、コードの利点をすべて活用できます。

「 Code-to-Design 」のワークフローは、UXデザイナー、ステークホルダー、プロダクトチームに次のようなメリットをもたらします：

1. デザイナーはリリース可能なプロトタイプを作り、それによってデザインプロセスでのテスト範囲を拡大する。
2. 既製のコードコンポーネントを使うことで、デザイナーはゼロからデザインする必要がなくなった。これによって、プロトタイプの品質、忠実度、機能性を高めながら、市場投入までの時間を短縮することができる。
3. Mergeのプロトタイプは最終製品のように見えることから、ステークホルダーはデザインのビジョンをより繊細にイメージすることができる。
4. デザイナーとエンジニアが同じ言葉を話し、同じソースを使うことで、デザインハンドオフがよりスムーズになり、摩擦が少なくなる。
5. Mergeはコンポーネントライブラリを製品開発のワークフローに統合するため、デザインシステムの導入が増加する。
6. ドラッグ＆ドロップの簡単なワークフローにより、デザイナーでなくてもプロダクトデザインがもっと身近になる。

『Design-to-Code』か『 Code-to-Design 』どっちがいいの？

「Design-to-Code」の課題

「Design-to-Code」は、従来のUXのワークフローであり、デザインチームは、標準的な画像ベースのデザインツールを使ってモックアップやプロトタイプを作成し、デベロッパーはそれをコードに変換します。

「Design-to-Code」のワークフローの最大の課題は、デザイナーとエンジニアの間にギャップが生じることです。デザイナーはそのギャップを埋めるべく、複数ツールの使用や詳細なドキュメント作成、さらにデベロッパーと直接プロトタイプやインタラクションでの機能についての説明をしなけいといけません。

このような手厚い作業や説明をしても、最終的な製品がデザイナーの仕様や期待に応えられないことはよくあることです。それでデザイナーとエンジニアは、責任をなすりつけ合いますが、本当の問題は言葉の壁です。デザイナーはベクターグラフィックツールを使う一方で、エンジニアはコードで仕事をするからなのです。

「 Code-to-Design 」でのソリューション

「 Code-to-Design 」のワークフローは、デザイナーとエンジニアの間のギャップを埋めるものです。両者は異なる言語を使いますが、Mergeのようなテクノロジーによって、デザインと開発の間のコミュニケーションが簡単になります。

デザインチームは視覚的なUI要素に取り組み、エンジニアはそれらを支えるコードに取り組むという、同じコンポーネントを２つの視点から見ていると思います。

そこで、デザインシステムで作業しているチームは、この「Code-to-Design」でのワークフローが最も有益です。

「Design-to-Code」のワークフローでは、チームは以下の２つのバージョンのデザインシステムで作業します：

• デザインツール用の画像ベースUIキット
• プログラミング用のUIコンポーネントライブラリ

「Code-to-Design」は、デザインチームとエンジニアが同じレポジトリから同じコンポーネントライブラリを使うため、このような分離をなくすことから、真の「信頼できる唯一の情報源（Single source of truth）」を作り出します。

「Code-to-Design」と「Design-to-Code」についてさらに読む。

「 Code-to-Design 」のユースケース

「Code-to-Design」が素晴らしいことはわかりましたが、実際の製品開発にはどのように反映されるのか？と思っているかもしれません。

ここでは実際に、企業が製品開発で『Code-to-Design」でのユースケースを４つご紹介します。

Paypal

２０１９年、PayPalは UXPin Mergeを使って社内の製品開発プロセスを完全に再デザインしました。PayPal内のUXチームは、６０以上の製品を管理する１０００人以上のエンジニアに対して５人のデザイナーという独自の課題を抱えており、どの製品も同じようには見えず、それぞれにユーザビリティやデザインの一貫性の問題がありました。

PayPalのUXリードEPXであるエリカ・ライダー氏は、この問題の解決するよう言われました。さらに大変なことに、彼女はPayPalのプロダクトチームが製品をデザイン、テスト、提供できるようなワークフローを作る必要がありました。しかしながら、プロダクトチームはデザインスキルに乏しい上に、デザインツールの経験もほとんどなかったのです。

従来の画像ベースのツールを使ったソリューションをいくつか試した後、ライダー氏は UXPin Mergeと出会いました。そこでPayPalのUXチームはMergeを使って、カスタマイズしたFluent UIのデザインシステムをUXPinに同期させました。

PayPalのステークホルダーは、この新しい「Code-to-Design」への投資の有効性を検証したいと思っていたので、ライダー氏は、１ページのプロトタイプの２つのバージョンを作成する実験を行いました。１つは画像ベースのツールで、もう１つは UXPin Mergeを使い、すると結果は以下のようになり予想以上でした：

• 画像ベースのツール：所要時間１時間以上
• UXPin Merge：所要時間 ８分

Mergeのプロトタイプは、忠実度と機能性がはるかに優れており、Paypalのプロダクトチームも指導を受けることで、同じ結果を得ることができたのです。

Paypalのケーススタディについて全文を読む

Iress

ソフトウェア開発会社の Iress は、下の画像のようにシステムの成熟度をデザインするために４つのプロセスを踏んでいました。

• ステップ１：PDF のスタイルガイド
• ステップ２：CSSによる HTMLパターンライブラリ
• ステップ３：UIキットとコンポーネントライブラリ
• ステップ４：完全に統合された「信頼できる唯一の情報源（Single source of truth）」で、リリースに必要なデザインやコードがない

Iressはステップ３の時点で、デザインと開発のギャップをどう埋めれば最終的なゴールにたどり着けるかわからず、行き詰まっていました。

当時のIressにとって、このワークフローは、以下の条件をすべて満たすものでした：

• デザイナーやエンジニアが製品を作り、リリースするのに必要なコンポーネントを提供する単一のリポジトリである。
• シームレスなデザインハンドオフによって、デザイナーとエンジニアのよりよい連携が行われる。
• デザインやフロントエンドのプログラミングをゼロからする必要がない。
• デザインドリフトや組織間の不整合がない。
• リアルでインタラクティブなプロトタイプが、ユーザビリティテストの参加者やステークホルダーに最終製品の正確な表現を提供する。
• ダークモードやマルチブランドのデザインシステムなど、テーマの切り替えを試す機会がある。

Iressの事例を全文読む

TeamPassword

上の２つのユースケースは、大規模企業の製品でしたが、スタートアップや小規模なチームに対して、「 Code-to-Design 」でどんなことができるのでしょうか。

TeamPasswordは、競争の激しいパスワード管理市場で事業を展開しているスタートアップで、「UXデザイナー不在」は最大の課題でした。

パスワードや機密データを預かるスタートアップ企業にとって、ユーザビリティの問題やデザインの矛盾は会社の信頼を失い、評判が落ち、さらには解約につながってしまうのです。

TeamPasswordのエンジニアは、コードでのプロトタイプを使って設計とユーザーテストを全て行いました。このようなプロトタイプは製品の機能とUX（ユーザーエクスペリエンス）を正確に表現していますが、アイデアを構築して反復するのは時間を食うものでした。

２０２２年、TeamPassword はMUIデザインシステムに切り替え、Merge を使って UXPinに同期させました。そこでエンジニアは、プロトタイプの開発の代わりに、UXPinでカスタムMUI Reactライブラリを使いました。そしてこの「 Code-to-Design 」のワークフローにより、市場投入までの時間が大幅に短縮され、ユーザビリティの問題やデザインドリフトが解消されたのです。

TeamPasswordのデベロッパーがデザインシステムのレポジトリを更新すると、その変更箇所が自動的にUXPinに同期されるため、常に最新バージョンの状態になります。また、Mergeのバージョンコントロール機能によって、チームは変更の追跡や、テスト中にバージョンを切り替えることができるようになりました。

TeamPasswordのケーススタディを全文読む

dotSource

dotSourceは、ドイツに拠点を置くデジタル製品のコンサルティングと開発を行う会社であり、複数のデザインシステムを用いて、製品やソリューションをクライアントに提供しています。

dotSourceでは、「デザイン用のUI キット」と「開発用のコンポーネントライブラリ」の２つのデザインシステムを持っているためプロセスや作業が重複してしまうことが、製品を提供する上での最大の問題点でした。また、デザインシステムのドキュメントは、「デザイン用のUIキット」と「開発用のコンポーネントライブラリ」につづき、チームが維持しなければならない３つ目のピースとなっていました。

つまり、dotSourceの「信頼できる唯一の情報源（Single source of truth）」は、実は「唯一」ではなく「３つの情報源」だったのです。そしてこれは、多くの企業が抱えるデザインシステムに関する問題でもあります。

dotSource は、「信頼できる唯一の情報源（Single source of truth）」をコードベースにする必要があると認識していましたが、UXPin Mergeと出会うまでは、従来の画像ベースのデザインツールでこのワークフローを実現する方法を知りませんでした。

dotSourceは現在、MergeのStorybook 統合を使って、デザインシステムをUXPinに同期させており、そうすることで、リリースごとにデザインシステムのレポジトリ、ドキュメント、UXPinのコンポーネントがStorybookによって更新されます。

「コードベースのデザインワークフローに切り替えることが、このような画像ベースの制限を回避する唯一の方法です。UXPinのようなコードベースのプロトタイピングツールとMergeテクノロジーによって、ベクターグラフィックスではなくブラウザのようにコードをレンダリングすることでこのワークフローが実現します。UXPinでは、UIコンポーネントがデベロッパーと同じように見え、動作するため、デザインと開発の間のギャップを効果的に埋めることができます。これが真の「信頼できる唯一の情報源（Single source of truth）」ですね。」 – dotSource

dotSourceの事例を全文読む（英文）

UXPinが提供する「 Code-to-Design 」ソリューション

製品チームは、コードコンポーネントをUXPinにインポートする際、以下のように選択肢が２つあります：

• 製品のデザインシステムを取り込む
• オープンソースのUIライブラリ（MUI、Bootstrap、Ant Designなど）を取り込む

そして、このようなライブラリをUXPinに取り込むには、以下の３つの方法があります：

• Git 統合：レポジトリから UXPinにReactコンポーネントライブラリを同期させる
• Storybook 統合：React、Vue、Angular、Web Components、Emberなど、多くのフロントエンドフレームワークをチームで同期できるようにする。（Storybookのドキュメントの全リストはこちら）
• npm 統合：デザイナーが、MCM（Merge コンポーネントマネージャー）を使って、npmレジストリからのオープンソースライブラリからUIコンポーネントをインポートできる。

npm統合とコンポーネントマネージャーを使うためのチュートリアルは以下の３つになります：

• React-Bootstrap
• Ant Design
• MUI

GitとStorybookの統合はもう少し複雑になってしまいますが、UXPinのテクニカルサポートチームと共に Mergeのセットアップを完了するには技術的なスキルが必要です。

UXPinのPattern機能を使ったコンポーネントの組み合わせ

UXPinのPatterns（パターン）機能を使えば、デザイナーはUI コンポーネントを組み合わせて新しいUIパターンやテンプレートを作成することができます。これは、デザインシステムに特定の要素がない場合で特に便利です。

例えば、製品に分析ダッシュボードを追加する必要があるのに、デザインシステムにはチャートがないとします。npmレジストリでオープンソースのUIライブラリを見つけ、MCMを使ってパッケージをインポートし、チャートのコンポーネントを追加すれば、同じ忠実度と機能を維持しながら新しいパターンを作成することができます。そしてチームは、このパターンのデザインシステムに組み込むことも、一度だけの使用もできます。

UXPinパターンについてのチュートリアルをさらに読む。（英文）

「 Code-to-Design 」を始めませんか？今回紹介した革命的なコードベーステクノロジーへのアクセス方法は、こちらのページからぜひリクエストください。

The post Code-to-Design 完全ガイド（２０２３年版） appeared first on Studio by UXPin.