10年以上の研究開発の末、UXPinは Figma、Sketch、Adobe XDなどのデザインツールを超える、従来デザイナーがエンジニアのバックグラウンドがなければ実現できなかった、高度なプロトタイピングによるエンドツーエンドのデザインソリューションを実現しました。  

こういった画像ベースのツールは、デザインチームへのより良いUX（ユーザーエクスペリエンス）を提供すべく進化してきましたが、エンドユーザーにとってのプロトタイピングやテストの改善にはほとんど何もされていません。デザイナーは、1つのツールですべてをまかなうのではなく、複数のプラットフォームを切り替えるか、フロントエンドエンジニアと連携して、最終的な製品体験を正確に再現するプロトタイプを構築しなければいけないのです。  

AdobeがFigmaを200億ドルで買収する意向を表明したことで、多くのデザイナーや組織は、このソフトウェア大手の製品エコシステムの一部になりたいかと疑問を抱いていますが、この件に関する考えがどうであれ、デザインツールの切り替えというのは、よりユーザー中心で、画像ベースのデザインによる制約を超えるものであるべきです。  

 UXPinでは、情報アーキテクチャやワイヤーフレーム、モックアップ、および忠実度の高いプロトタイプをデザインできます。また、FigmaからデザインをインポートしてUXPinでプロトタイプの作成といった、ニーズに合わせた柔軟なワークフローが可能です。

ブラウザまたはUXPinのミラーアプリ（iOSおよびAndroid）を使ってテストを行い、ステークホルダーやエンドユーザーから有意義なフィードバックを頂きましょう。

無料トライアルにサインアップして、ぜひ今すぐUXPinプロトタイプを作成してみよう！  

Figma のデザイン、UXPinでプロトタイプを作る

…わかります。Figmaでのデザインがいいんですよね。でもUXPinでのプロトタイピングで得ることができる、より高い忠実度と機能性も捨てがたい。

もしあなたがこのように感じたら、UXPinのFigmaプラグインには両方の長所がありますよ。

Figmaでモックアップをデザインして、プロトタイピングのために画面をUXPinにコピーすればいんです。  

このワークフローには両方の長所が備わっており、製品や状況に応じた最適なソリューションの導入を推奨していますが、UXPinですべてまかなえる場合、デザイナーは2つのツールの使用が必要です。

UXPinはデザインおよびプロトタイピングツールとして有効であり、画像ベースのツールでは不可能なUXを拡張する機能が満載です。  

Figma とUXPinでプロトタイプを作る意義

Figma、Adobe XD、Sketchなどは静的なベクターグラフィックスをレンダリングするため、デザイナーがコードを再現することはできませんし、再現するにしても多くの労力とワークアラウンド、そして追加ツールが必要です。

UXPinはコードベースのデザインツールですが、デザイナーがコードを操作するという意味ではなく、UXPinがHTMLやCSS、Javascriptを裏でレンダリングし、コードと同じ忠実度と機能性をデザイナーに提供します。

以下にある、コードによる4つの機能により、デザイナーはUXPinでより高度なプロトタイプを作成することができるのです。

ステート

UXPinの【ステート】では、デザイナーは1つのコンポーネントに対して複数のステートを作成することができます。たとえば、ユーザーのインタラクションによって引き起こされる異なるプロパティを含んだ「ステート」を、ボタンにいくつか付けることができます。

また、ステートによって、ドロップダウン・メニュー、ステッパー、カルーセル、アコーディオンなどの複雑なコンポーネントの作成もできます。

インタラクション

デザイナーは、デザインツールの制限ではなくコードに制約された複雑なUXPin【インタラクション】を作成することができ、またUXPinには、没入型のプロトタイプ体験をデザインするためのトリガー、アクション、アニメーションが数多くあります。

【if-then】と【if-else】の条件付きインタラクションにより、デザインチームはユーザーの入力やトリガーに反応するダイナミックなプロトタイプを作成することができ、このJavascriptのようなインタラクティブ機能により、デザイナーはデザイン上の決定がユーザー体験にどのような影響を与えるかがわかり、改善すべき領域をピンポイントで特定することができます。

このようなリアルなやり取りを行うことで、ステークホルダーとエンジニアはほとんど説明を必要とせず、フィードバックプロセスやデザインがハンドオフがより生産的に行われるようになります。

変数

Figmaを含むほとんどのデザインツールでは、フォームをテストすることができません。なぜか？フィールドが「入力」ではなく、「画像」になっているからです。UXPinでは、フォームフィールドはまるでエンジニアが開発したかのように機能し、デザイナーが【テキスト入力】や【チェックボックス】、【ラジオ】、【選択/ドロップダウン】、【複数選択】および【ボタン】をすぐに使えるようになっています。

【変数】があれば、例えば「サインアップ時にユーザーの情報を取得し、名前フィールドを使って個別化されたウェルカムメッセージを作成することができる」というように、デザイナーはプロトタイプからユーザーの入力を取得し、そのデータをアプリケーションの別の場所で使用することができます。

エクスプレッション

 UXPinの【エクスプレッション】で、デザイナーは他のデザインツールの可能性をはるかに超えてプロトタイピングを行うことができるようになり、パスワードやその他のフォームフィールドの検証、ユーザーインタラクションに基づいて更新されるショッピングカートのデザイン、動的なエラーメッセージの作成など、さまざまな機能を利用できます。  

ステート、インタラクション、変数などのUXPinの他の機能と組み合わせることで、デザイナーは、エクスプレッションによってコードと区別のつかないプロトタイプやユーザーフローの構築ができるのです。  

このような機能やその他の高度なUXPin機能については、UXデザイン界のインフルエンサーであるジェシー・シャウォルター氏によるチュートリアルのYouTubeビデオで詳しく説明されています。

FigmaのモックアップをインタラクティブなUXPinプロトタイプにする5つの理由

1. 高忠実度プロトタイピング

Figma：美しいベクターモックアップだが、あいにく実際の機能性や忠実度が再現されていないため、デベロッパーやステークホルダーがプロトタイプの解釈をしにくいものになっている。

UXPin：コードのような忠実度と機能性により、デザイナーは最終製品と見分けがつかないほど没入感のあるダイナミックなプロトタイプ体験を作成することができ、より少ないドキュメント、よりスムースなデザインハンドオフ、市場投入までの時間の短縮が実現される。

Figma、Sketch、Adobe XDなどが作り出すような高忠実度モックアップと、最終製品のような外観と感触を持つ高忠実度プロトタイプには大きな違いがありますが、UXPinは、プロトタイプがコードのようにユーザーのインタラクションに反応するため、ほとんど説明が必要ない、本物の高忠実度の結果をもたらします。

2. UIデザイン とリアルなプロトタイプのギャップを埋める

Figma：FigmaでのUIデザインのアイデアをデザイン・開発

UXPin：Figmaの限界を超え、UXPinで高度なプロトタイプを作成

Figmaは美しいデザインとモックアップを作成するための機能を備えていますが、デザイナーはプロトタイピングの段階で壁にぶつかります。UXPinのFigmaプラグインだと、デザインチームがUXPinで忠実度の高いプロトタイプを作成するために、両方のツールの優れた資質を活かせます。

UXPinでUIデザインの変更とイテレーションを行うか、Figmaでデザインと編集を行いプロトタイピング・ツールとしてのみ使用するかは、あなた次第なのです！  

3.  ユーザーテスト の強化

  Figma：基本的なクリック／タップ操作、ユーザーフロー、ナビゲーションに限定したテストの実施。  

UXPin：最終製品を正確に再現する没入型プロトタイプ  

Figmaのベクターベースの制約と制限は、正確なテストの妨げになります。デザイナーは、基本的なインタラクティブ性を実現するために複数のフレームを使用しなければならず、多くのコンポーネントの再現は不可能です。  

コードベースのデザインツールであるUXPinで、デザイナーがコードを一行も書かずに、デベロッパーが構築可能なものに限定してプロトタイプの構築ができます! そしてこのような複雑で動的なプロトタイプで、デザインチームはUXの向上とビジネスチャンスを特定するための貴重なインサイトを得られるのです。  

また、デザイナーはUXPinプロトタイプでテストする際に、重要なユーザビリティとアクセシビリティの問題をピンポイントで把握することができ、その結果、UX負債の減少や、より高品質なデザインプロジェクト成果につながります。  

4.  イテレーション の高速化

Figma：最終製品の動作を模倣するための複数のフレームとコンポーネント – 変更と再デザインには時間がかかる。

UXPin：レイヤーとステートを1つの画面で使用し、数回のクリックで変更可能 。

Figmaでプロトタイプを作成する際の課題の1つとして、コードのインタラクティビティの模倣のために、デザイナーは複数のフレームやコンポーネントの作成が必要という点があります。このようなインタラクションは、厄介で直感的でないように感じられ、デザインや変更に時間がかかります。  

UXPinでは、デザイナーは「ページ」と「レイヤー」で作業します。複数のフレームやページを切り替えるのではなく、1つのキャンバス上で作業を行い、プロパティパネルで変更を加えます。このワークフローは、より直感的で、イテレーションの高速化を促進し、デザイナーがより早く問題を解決できるようにします。

5. よりスムーズな デザインハンドオフ

Figma：多くのドキュメント、デベロッパーとのやり取り、インタラクションを模倣するビデオ/GIF、他のツールへのリンク

UXPin: プロトタイプが最終製品のエクスペリエンスとインタラクティブ性を再現し、長いドキュメントと追加ツールの必要性は削減される。

動きやインタラクションの再現に、デザイナーはAfter Effectsなどのツールをよく使います。

なぜか？デザインツールには忠実度や機能性が欠けているからです。技術的な制約からエンジニアが再現できないトランジションやインタラクションをデザイナーが作成することもあるし、複数のツールやファイル間での切り替えは、混乱を招き、時間がかかり、エラーを増加させます。

UXPinでは、コードを正確に模倣したコンポーネントやインタラクションをデザインできるため、デザイナーは追加のツールの使用は必要ありません。プロトタイプが何をするものかを説明するしたビデオやGIF、行ったり来たりのコミュニケーション、長ったらしいPDFは必要ないのです。

デザイナーはUXPinでプロトタイプに注釈を付けてドキュメントを作成できるため、エンジニアやステークホルダーは複数のファイルを切り替える必要がなく、すべてが一箇所に集約されます! さらに、デベロッパーやステークホルダーは、UXPinのプレビュー上のコメントを使用して、質問したり、チームメンバーをタグ付けしたり、編集にコメントを割り当てることができます。

リアルなプロトタイプやサポートドキュメント、コラボレーションが一箇所に集められていることで、UXPinではより少ない摩擦でよりスムーズなデザインハンドオフが実現します。

End – to – EndのデザインソリューションであるUXPin

Figmaのデザイン してUXPinでプロトタイプを作成するというのもできますが、そうなると1つで済むところを2つのツールを使ってしなければいけないことになります。

UXPinだと、コラボレーション、ワイヤーフレーム、情報アーキテクチャのデザイン、モックアップ、ゼロからのコンポーネントデザインなど、Figmaと同等のデザイン体験があります。

UXPinのエンドツーエンドのデザインソリューションでは、デザインシステムの構築、管理、共有など、すべてをUXPin内で行うことができるため、デザイナーはツールを切り替える必要がありません。

ツールが減ることによって、UXワークフローの効率化だけでなく、コスト削減や、デザインリーダーによる貴重なリソースの他への再配分が可能になります。

ステークホルダーには、画像ベースのプロトタイプとそれに付随するドキュメントを読み解くほどの時間や忍耐力はありません。その点UXPinのプロトタイプは説明が少なくて済むので、ステークホルダーは最終的な製品体験を楽しむことができ、この没入型体験は、ステークホルダーから有意義なフィードバックを引き出すとともに、デザインソリューションへの賛同を高めることができます。

画像ベースのデザインの限界は卒業して、UXPin を使って強化されたプロトタイピング、コラボレーション、デザインの成果を手に入れましょう。 無料トライアルにサインアップして、UXPin が製品デザインのワークフローに革命をもたらし、顧客に優れたUXを提供する方法をぜひご覧ください。

The post Figmaのデザインをインタラクティブなプロトタイプにしよう appeared first on Studio by UXPin.

デザインシステムは、製品のデザインプロセスを効率化し、チーム間の一貫性と拡張性を確保します。

Figma と UXPin には、それぞれさまざまなニーズに合わせた独自の機能を備えた、強固なソリューションがあります。

そこで本記事では、Figmaのチームライブラリやとその利点、そして潜在的な欠点についてお話します。

また、UXPinのデザインシステムとMergeの技術を使った、チームライブラリの代替案もご紹介します。

主なポイント：

• Figmaのチームライブラリで、デザインシステムの作成と共有がしやすくなり、それによって一貫性が保証される。

• Figmaのデザインシステムは先進的ではあるが、デザイナーとデベロッパー間のギャップを埋めるという点では課題がある。

• UXPin Mergeは、一元管理、究極の一貫性、複数のフロントエンド開発をサポートし、デザインと開発プロセスを統一するという点において、Figmaのプロトタイプ ・ チームライブラリを上回る。

UXPin の Merge技術で、組織・プロトタイプ全体 で「信頼できる唯一の情報源（Single source of truth）」を作成し、製品開発プロセスをシンプルにしませんか。詳しくはUXPin Merge をぜひご覧ください。

Figma でデザインシステムを作成できるのか

チームライブラリ機能により、デザイナーは Figma でデザインシステムを作成することができます。

さまざまなファイルやプロジェクト間で、UIコンポーネントやスタイルを公開し、共有することができます。

デザインの要素が更新されると、その要素が使われている各デザインファイルに一貫性と最新性が保たれ、それによって組織全体は最新リリースが同期された状態が保たれます。

アトミックデザインとは ‐ Figma のデザインシステムに適用するために

Figma は、ブラッド・フロスト氏の「アトミックデザインの原則」に基づき、チームライブラリを設計しました。

アトミックデザインは、UI （ユーザーインターフェース）を以下のように分解します：

• 原子： カラースタイル、ラベル、テキストスタイル、スペーシングなど、Web ページの基本的な構成要素。

• 分子： 例えばボタン、フォーム入力、チェックボックスなど、色のように原子をいくつか組み合わせ、ラベルと形をつけると分子になる。

• 有機体：複数の分子を結合させると有機体になる。サイドバーやヘッダーなど、より複雑な UI 要素になることもある。

• テンプレート： さまざまな生物を組み合わせると、ページ全体のレイアウトを形成するテンプレートができあがる。

Figma のアトミックユニット：コンポーネントとスタイル

コンポーネントとスタイルは、Figma のデザインシステムの原子単位です：

• コンポーネント： ボタンやアイコンのような再利用可能なデザイン要素

• スタイル： 色やタイポグラフィなどのデザイン仕様

この要素は、デザインシステムのチームが作成したオリジナルのファイルに存在しています。

さまざまなファイル間でアクセスできるようにするには、ファイルの所有者がチームライブラリに公開するといいでしょう。

Figma のチームライブラリにアクセスするには？

コンポーネントとスタイルを公開すると、Figma のチームライブラリで見つけることができます：

• デザインファイルを作成するか、開く

• Assets のタブから［Team Library（チームライブラリ）］をクリックして開く

• 目的のチームライブラリを検索または参照する

• ライブラリを有効にして、そのコンポーネントをアセットパネルで利用できるようにする

チームライブラリを有効にすると、デザイナーはそのコンポーネントのインスタンスをデザインファイルに簡単にドラッグ＆ドロップでき、それによってデザインの一貫性が確保されます。

Figma のデザインシステムの主な特徴

• スタイル： コンポーネントの色、文字、エフェクト、レイアウトグリッドを確定する

• 変数（ベータ）： 色値、数値、文字などの再利用可能な値を保存して、コンポーネントを半インタラクティブにしたり、明暗モードを切り替えたりできる

• バリアント： コンポーネントとパターンのバリアントとステートを作成する

• デザイントークン： デザインシステムチームが複数のデザインファイルで共有できる動的なスタイルで、変更と更新を一元管理する

• Storybook：デザイナーは、Figma のデザインをStorybookコンポーネントに埋め込むことができ、関連する Figma コンポーネントとともにストーリーをインポートして参照することができる

• ライブラリー分析： デザインシステムのチームがパターンやコンポーネントの使用状況や採用を監視できるようにする

• バージョン履歴： Figma ファイルのバージョン履歴を表示し、古いバージョンを復元する

Figma のチームライブラリを使うデメリット

Figma のデザインシステムは、デザインをシンプルにするために進化してきましたが、デザイナーとエンジニア間のギャップを埋めることはできません。

デザインシステムチームは、Figma 用とコード用の２つのライブラリを管理が必要になります。

UXPinは、２０２３年に Whitespaceと共同出版し、そこでデザインシステムの課題とその克服方法について、世界的に有名な１９社にインタビューをしたレポートを発表しました。

インタビューを行った企業では、Figma や Sketch のような画像ベースのツール を使用して いました。

筆者たちは、各組織にとっての主要な目標が「信頼できる唯一の情報源（Single source of truth）」であることがわかりました。

企業はこの目標を達成するためにプラグインやカスタムソリューションに依存し、コストを増加させ、フローを複雑にしているのです。

以下に、デザインシステムに画像ベースのツールが使われる場合での、主な問題点を挙げてみましょう：

• デザイナーと開発者は別々のライブラリ (Figma用のUIキットとデベロッパー用のコードコンポーネント) を使用するため、組織が「信頼できる唯一の情報源（Single source of truth）」を得ることはできない。

• 変更の更新には、デザインシステムレポジトリ、Figma、プロトタイピングツール、関連ドキュメントなど、複数の場所の変更が必要。

• 単一のUIライブラリを一元管理しないと、さまざまなバージョンを使っているチーム間でエラーが発生する。

• ハンドオフでは、インタラクションを説明するための長いドキュメントが必要であり、２０２３年のリリースでも、コードに匹敵するインタラクティブ性を実現できない。

• デザイナーは、プロトタイプやテストのために追加のツールやプラグインを使わなければならず、それによってコストや運用の負担、ミスの可能性が増大する。

UXPinのデザインシステムと Figmaのチームライブラリの比較

UXPinは、デザインシステムの成熟度に応じて２つのソリューションを提供しています：

• デザインシステム： コンポーネント、アセット、タイポグラフィ、ドキュメントを含むデザインシステムを作成する。

• Merge技術： レポジトリから UXPin にコードコンポーネントライブラリをインポートして、プロトタイピングとテストを行う。

UXPin のデザインシステム

UXPinのデザインシステムは、Figmaのチームライブラリと同じように機能します。

組織は、デザインシステムを作成し、チームメンバーと共有することができ、デザインシステムチームは、権限のない変更を防ぎ、システムの完全性を確保するために、権限 を設定することができます。

UXPin のビルトインデザインライブラリの活用

組織は、iOS、マテリアルデザイン、Bootstrap、Foundation など、UXPinのビルトインデザインライブラリのいずれかを基盤として使うことで、デザインシステムをサッと構築して拡張することができます。

インタラクティブ性の向上

FigmaとSketchは画像ベースのデザインツールで、デザイナーは最小限の機能しか持たない静的なプロトタイプしか作成できません。

一方、UXPinはコードで動き、ベクターグラフィックスを生成する代わりに、キャンバスは HTML、CSS、Javascript を裏でレンダリングします。

つまり、UXPinのようなコードベースのプラットフォームを使うことは、デザイナーが、完全に機能する入力要素、状態管理、複雑な UI パターンなど、最終製品のコンポーネントを忠実に模倣したインタラクティブ性を実現できるということです。

以下に、UXPinが他のデザインツールと一線を画す４つの特徴を挙げましょう：

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

• バリアブル：ユーザーの入力からデータを取得し、アプリバーに名前やプロフィール画像に表示され るなど、個別化された動的なユーザー体験を作成する。

• Expression： Javascript のような関数で、複雑なコンポーネントや高度な機能を作成できる

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

UXPinの高度なコードベース機能により、企業はプロトタイプやテストに外部ツールやプラグインを必要とせず、それによってコストや重複したワークフロー、運用タスクが削減されます。

UXPinのデザインシステムは、デザインシステム成熟の初期および中期段階を支援し、Merge の技術により、組織は最終段階である完全に統合された「信頼できる唯一の情報源（Single source of truth）」を達成することができます。

Merge の技術で「信頼できる唯一の情報源（Single source of truth）」を実現する方法

Mergeの技術は、デザイナーとデベロッパーがまったく同じコンポーネントライブラリで作業するという究極の成熟を実現します。

１回の更新で、ドキュメントを含むデザインとエンジニアリングの変更が同期されるのです。

真の 「信頼できる唯一の情報源（Single source of truth）」

Mergeを使うと、組織はレポジトリから UXPinにUIライブラリをインポートできます。

そのため、デザイナーはデザインプロセスで、エンジニアが最終製品を開発するのと同じデザインシステムコンポーネントを使うことができます。

レポジトリへの変更は自動的にUXPinに同期され、最新バージョンがチームに通知されます。

この新しい UXPin Mergeのアプローチにより、より連携しやすく統合的なデザインプロセスが実現します。

デザイン、プロトタイプ、開発を分離するのではなく、UXPinを使うことで、プロセス全体を通してエンジニアリングチームと製品チームを関与させる統合フローを構築することができます。

そしてその結果、製品の最終品質は劇的に上がりました。

ー エリカ・ライダー氏、プロダクト、UX、DesignOps のソートリーダー。

バージョン管理でチームの同期を保つ

デザイナーは UXPinのバージョン管理を使って、最新リリースに切り替えるタイミングを選択し たり、必要に応じて古いバージョンに戻すことができます。デザイナーとエンジニアが同じバージョン管理で同期しているため、混乱や伝達ミスがなく、デザインシステム全体の変更履歴が１つで済みます。

Merge が Figma のチームライブラリより秀でている点

Figmaのチーム ライブラリを使う場合、組織は 2 つのバージョンのデザインシステムを維持する必要があります。

さらにプロトタイプとテストにさまざまなツールを使う場合は、さらに多くのバージョンを維持することもあります。

一方、それがMergeの場合、管理するのはデザインシステムのレポジトリのみです。

一元管理

デザインシステムチームは、デザインチームとエンジニアリングチームのためのレポジトリを一元で管理します。

この一元管理によって、チームはコンポーネントライブラリ、更新、ガバナンス、ドキュメント化、パターンの推進を完全にコントロールできるのです。

究極の一貫性

デザインシステムを一元管理することで、コンポーネントライブラリへの不正な変更を防ぐことができ、インタラクティブ性やスタイリングなどのプロパティは、コンポーネントやパターンに織り込まれます。

デザイナーがコンポーネントを取り外して調整できる Figma とは違って、Merge の要素とそのプロパティは固定されます。

デザイナーは、UXPin のプロパティパネルに表示される、デザインシステムのレポジトリで定義されたプロパティのみを扱うことができます。

デザインシステムチームは、React propsまたはStorybook Argsを使ってコンポーネントのプロパティを確定でき、デザイナーは、プロパティパネルで確認および調整をすることができます。

このような制約は、デザイナーとエンジニアが常に同じパラメータと制限の中で作業するということであり、リリースのたびにピクセルパーフェクトな一貫性がもたらされます。

MergeはUX負債と技術的負債を大幅に削減しながら、ドリフトを排除するのです。

複数のフロントエンド技術に対応

ほとんどの Javascript フロントエンド技術を 以下２つの統合機能を使って UXPin と同期させることができます：

• Git統合： Reactレポジトリに直接接続

• Storybook 統合： React、Vue、Ember、Angular など、あらゆる Storybook ライブラリを同期する

Figmaの Storybookプラグインは、componentとStoryを視覚化させるだけですが、UXPinのStorybook統合は、エディター内で完全にインタラクティブなプロトタイプを構築するためにコンポーネントライブラリをインポートします。

デザイン、プロトタイプ、テストを１つのツールで

Figmaではインタラクティブなエフェクトやアニメーションなどの制限もまだあるため、多くの企業はデザインとプロトタイプに複数のツールを使わないといけません。（例：プロトタイプに Zeplin の使用など）

一方、Mergeテクノロジーの場合、１つのツールだけで完結するので、ワークフローはシンプルになり、同時にコストも削減されるでしょう。

デザインプロセスでコードコンポーネントを使うことは、デザイナーが最終製品のような外観と感触のプロトタイプを作成できるということであり、プロトタイプの幅は広がるため、ステークホルダーやユーザーテスト参加者からのより良いフィードバックの取得に繋がります。

オープンソースのコンポーネントライブラリを使ってプロトタイプを作成して進化させる

UXPinには、Fluent UI、Ant Design、MUI、UXPin BoilerplateなどのMergeライブラリがあります。これらの使用によって、完全に機能する高忠実度なプロトタイプやテストのための MVP（実用最小限の製品）を作成することができます。

また、MergeのGit統合を使っているチームは、上記のライブラリからコンポーネントを組み合わせて、新しいパターンの構築や新しいパターンの検証できるのです。開発者のサポートなしでもデザインシステムの進化が促進されるのです。

UXPinのコードベースのソリューションを使用することで、ワンランク上の製品設計をしてみましょう。

Mergeテクノロジーを使って、「信頼できる唯一の情報源（Single source of truth）」でデザインと開発をつなげましょう。

詳細とアクセス権については、Merge のページをぜひご覧ください。

The post FigmaとUXPin【 デザインシステム 徹底比較】 appeared first on Studio by UXPin.

このブログでは、UXPin Mergeにある「Patterns」機能をご紹介いたします。Patternsを使うことで、簡単に新しいコンポーネントや変数の作成や再利用が可能です。これによって、デザインプロセスでのスピード感と一貫性の向上につながります。さらに、新しいUI要素を試してみたり、デザインシステムの拡張したり、同じプロパティを何度も設定する時間を節約することもできるんです。

 Pattern を試してみたい方は、まずはUXPinの14日間の無料トライアルをお試しください。

UXPin Mergeが選ばれる理由

UXPin Mergeは、コードコンポーネントをUXPinのデザインエディタに取り込むことができる技術を提供します。この技術により、デザインチームは完全に機能する要素を使って、インタラクティブなプロトタイプを構築することができます。たとえデザイナーのよりもデベロッパーの数が大きく上回っていたとしても、UXPin Mergeを使用するチームはデザインの拡張だけでなく、デザインシステムの高い成熟度も実現できることがわかったのです。

UXPinはこのMergeテクノロジーを日々進化させており、デザイナーがUXPinにコンポーネントをインポートしたり、エディタで使用できる方法を研究しています。そこで、複雑なコンポーネントをUXPinで構築・保存可能にする機能「 Patterns 」を発表しました。

堅牢なデザインライブラリをスピーディに構築できる

UXPinでは、Storybook、Git、NPMパッケージ経由でコードコンポーネントライブラリをUXPinにインポートできるだけでなく、プロトタイプですぐに再利用可能で、定義済みのUIコンポーネントを備えたデザインライブラリがあります。

この新しいMerge機能によって、デザイナーの生産性を向上につながり、デザインシステムの拡張、コード化していない新しいコンポーネントのテストができます。これにより、以下のことがずっと楽になりました：

• コンポーネントのバリエーションとプロパティの保存及び再利用
• Mergeコンポーネントをより大きく、より高度な要素と結合
• まだコード化されていない、定義済みのプリセットを持つ新しいコンポーネントの作成及び共有

 Patterns は標準的なUXPinライブラリとして機能しますが、原子や基本的なコンポーネントだけではなく、より複雑なものを作成することができます。また、MergeコンポーネントとClassicコンポーネントと合わせて、開発者にコーディングを依頼することなく新しい要素を試すこともできます。

 Patterns の使い方

 Patterns は、Mergeのアカウントをお持ちの方で、Git、Storybook、およびNPMパッケージなどすべてのMerge統合にてお使いいただけます。

UXPin日本語公式ドキュメントにあるPatternsの使い方をご参照ください。

 Patterns はStorybook統合でお試しいただけます。UXPinの無料トライアルで、デザインプロセスでコードコンポーネントを使ってみて、そのスピード感と迅速さをぜひご体験ください。

The post コンポーネントを素早く構築 & 保存できる「 Patterns 」とは？ 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.

UXPinのnpm統合により、デザインチームはより忠実でコード同様の機能でプロトタイプが作成できるようになりました。これまではエンジニアにコーディング依頼が必要だったところを、UXPinが持つコンポーネント駆動型プロトタイピング機能によって、デザイナーでも高忠実度なプロトタイプ作成の実現が可能です。

npm統合で、簡単にコンポーネントライブラリをUXPinのデザインツールにインポートできます。これには、技術面での複雑な設定は不要で、共有コンポーネントのインタラクティブ性を最大限に活かすことができるのです。今回は、Mergeを使ってコンポーネントの統合が実際にいかに速く行えるのか見ていきましょう。

さっそくGitレポジトリ、Storybook、または最新のnpmからUXPinにコンポーネントを統合させてみましょう。UXPin Mergeテクノロジーついての詳細は、こちらのページをぜひご覧ください。

UXPin Merge とは

npmについてお話しする前に、UXPin Mergeの概要を説明します。UXPin Mergeはコンポーネント駆動型プロトタイプを実現するコードベースのテクノロジーです。デザイナーはゼロからデザインする代わりに、レポジトリからProduction ReadyなUI要素を使用して、高忠実度で完全に機能するプロトタイプを構築することができます。

デザイナーはビジュアル要素、エンジニアはその背後にあるコードに取り組むことで、製品開発チーム全体で「信頼できる唯一の情報源（Single source of turth）」が構築されます。これによって、実際に、UXPin Mergeを導入したPayPalやTeamPasswordのチームは、デザインの品質、スピード、一貫性向上に成功しました。

UXPin で「npm統合」って何？

UXPin Mergeを非公開のデザインシステムで使う場合、同期のためのレポジトリをセットアップする上で技術的な知識が必要になってしまうのですが、オープンソースのコンポーネントライブラリを使う場合だと、デザインチームは直感的なダッシュボードを使用して簡単にnpm統合を完了できます。

また、デザイナーはMergeコンポーネントマネージャー機能を使って、コンポーネントのインポートとプロパティを管理することができます。たとえば、 Bootstrapのコンポーネントライブラリまたは以下９つのVariants（変数）からButtonをインポートできます：

• プライマリー（primary）
• セカンダリー（secondary）
• 成功（success）
• 危険（danger）
• 警告（warning）
• 情報（info）
• 明るい（light）
• 暗い（dark）
• リンク（link）

これらのVariantsはUXPin上の画面右にあるプロパティパネル（Properties Panel）でドロップダウンとして表示されます。Mergeはほとんどのコンポーネントにホバーステートも含んでいるため、デザイナーはこのような詳細を気にせず、プロトタイピングにすぐに取り掛かれることができます。

デザインチームは、React Bootstrapのドキュメントから、インポートするコンポーネントのプロパティを探すことができ、全てのプロパティまたはプロジェクト関連のもののみをインポートすることもできます。

 Bootstrapを使うメリット

 BootstrapはReact、Vue、Angularで利用可能な最も有名なモバイルファーストのフロントエンドフレームワークです。

UXPinのnpm統合では、React Bootstrap のコンポーネントライブラリを使用しますが、VueまたはAngularのバージョンをインポートするにはStorybook統合で可能です。

BootstrapはレスポンシブなWebサイト・Webアプリ開発に最適ですが、モバイルアプリのデザインプロジェクトでもReactライブラリを使うこともできます。Bootstrapには、フォーム要素、レスポンシブテーブル、その他の関連コンポーネントが豊富に揃っているため、Webベースのエンタープライズ向け製品に適しています。

なお、Boostrapは総合的なフロントエンドフレームワークなので、Bootstrapのサンプルページでできることを見ておくことをおすすめします。

UXPin Mergeで Bootstrapの npm 統合

npmパッケージ（react-bootstrap）を使って、BootstrapのコンポーネントをUXPinのデザインエディタにインポートできます。Mergeコンポーネントマネージャーによって、各UI要素と利用可能なプロパティをインポートが可能です。

UXPinのコンポーネント駆動型のプロトタイピングで、要素は同じレポジトリから取り込めることから、デザインチームはエンジニアと同じ忠実度と機能性を手に入れることができます。エンジニアがレポジトリのコンポーネントでできることを、デザイナーも同様にUXPinのプロパティパネルで実現することができます。

また、フレームワークのドキュメンテーションにあるBootstrapのReact propsを使用することでこれらのプロパティを割り当てることができます。

Merge コンポーネントマネージャでプロパティの割り当て

Mergeコンポーネントマネージャーはnpmコンポーネントをインポートおよび管理するためのハブ的存在であり、プロジェクトを完成させるために必要な数だけインポートすることができます。

また、インポートするプロパティ数のコントロールも可能です。例えば、Bootstrap Buttonの［プライマリー］と［セカンダリー］Variantsのみを使いたい場合、全てのプロパティをインポートするのではなく、使いたいプロパティ２つのみをインポートすればいいだけです。

UXPinを React Bootstrapの npm パッケージにつなげる

ステップ１

UXPinのDashboard（ダッシュボード）画面に移動し、［+ New Project（新規プロジェクト ）］をクリックします。

ステップ２

プロジェクトに名前を付け、［Create New Project （プロジェクトの新規作成）］をクリックします。

ステップ３

［Design with Merge components （Mergeコンポーネントでデザインする）］と ［+ Add new Library （ライブラリの追加）］をクリックします。

ステップ４

［Import React Components with npm integration（npm統合でReact Componentsをインポートする）］を選択し、［Next（次へ）］をクリックします

ステップ５

ライブラリに名前を付けます。この名前は参考用のためだけなので、インポートには影響しません。

Mergeを動作させるには、npm統合に 『React Bootstrap（react-bootstrap）』と『 Boostrap（bootstrap）』という２つのBootstrapパッケージが必要です。

最後に、コンポーネントのプロパティをUXPinで動作させるには、BootstrapのCSSファイルへのパスが含まれてないといけません。（パスはReact-Bootstrap のドキュメントのCSSの下にあります。）

• bootstrap/dist/css/bootstrap.min.css

React Bootstrapコンポーネントのインポート

上記の手順を完了すると、UXPinはMergeのコンポーネントマネージャー にリダイレクトします。

ステップ１

左側のサイドバーから、［Open Merge Component Manager （Mergeコンポーネントマネージャーを開く）］をクリックします。

Mergeコンポーネントマネージャーが新規タブで開きます。

ステップ２

［Add new component （新しいコンポーネントの追加）］をクリックします。

ステップ３

インポートするコンポーネントの名前を入力します。

正しい命名規則は、React Bootstrapのドキュメントにあります。

このチュートリアルでは、Bootstrap Buttonをインポートして、［Components （コンポーネント）］という新しいカテゴリーを作成してみます。ここでは、デザイナーとエンジニアが同じ基準点持つためにReact Bootstrapのドキュメントと同じカテゴリを使うことをお勧めします。

１回のインポートで複数のコンポーネントを追加できるので、ステップ２と３の繰り返しは省略されます。

［Import Components（コンポーネントをインポートする） ］をクリックします。

ステップ４

右上の［Publish Changes（変更を公開）］をクリックして、インポート処理を初期化します。

新しいコンポーネントで初めてこの作業を行う際は、少し時間がかかるかもしれません。

ステップ５

インポートが完了したら、［Refresh Library （ライブラリの更新）］をクリックし、プロジェクトライブラリの変更を更新します。

ここまで進めると、左サイドバーのカテゴリーに[Components]、その中に[Button]があります。

ステップ６

［Button］をクリックしてプロパティを追加してみましょう。このReact propsは、React Bootstrapのドキュメントで、Components > ButtonのAPIの下にあります。

Mergeコンポーネントマネージャーでコンポーネントプロパティの追加

React Bootstrap のドキュメントを使って、Buttonプロパティをいくつか追加します。

Buttonラベル

ステップ１

React BootstrapのButtonラベルは、childrenプロパティを使って、次のように設定します：

• プロパティ名：「children」と入力（小文字を使用する）
• 表示名：（これは必須ではないですが）デザイナーとエンジニアの両方が使うわかりやすいものにする（ 統一感があるように 、ここでは『label』とします。）
• 説明：デザイナーに簡単な説明や指示を加える
• プロパティの種類：String（ストリング）型
• プロパティコントロール：『textfield（テキストフィールド）』
• デフォルト値：好みで設定 （ 今回は 『Button』を選択。）

コンポーネントのプロパティを完成させると、コンポーネントのプレビューが表示され設定した通りに変更されます。

ステップ２

すべての項目を入力したら、［Add property （プロパティの追加）］をクリックします。

そして［Save Changes（変更の保存）］

最後に［Publish library changes（ライブラリの変更を公開）］

コンポーネント 駆動型のプロトタイピングをご体験ください

実際にReact Bootstrapコンポーネントとプロパティをインポートしてみると、UXPinでのプロトタイピングはドラッグ＆ドロップでレイアウトを作成するのと同じくらい使いやすいんです。ちなみに、下画像のシンプルなデザインのメール登録フォームだと、３つの Bootstrapコンポーネントを使っただけで、１分もかからずに作成できました。

 Bootstrapコンポーネントを選択すると、Mergeコンポーネントマネージャーで作成したプロパティはUXPinのキャンバス画面右側にあるプロパティパネルで表示されます。

UXPinのnpm統合でコンポーネント駆動型プロトタイピングをさっそく試してみませんか？ Bootstrapのnpmコンポーネントをインポートして、いかに早く製品のアイデア出しから開発までできるかをご体験ください。開発時間を大幅に短縮できますよ。詳しくはMergeのページをご参照ください。

The post BootstrapコンポーネントをUXPinに追加する方法 – npm統合ガイド appeared first on Studio by UXPin.

Storybookではデザイナーと開発者がプロトタイプを構築する際に、コードコンポーネントを使用することで、サイロ化を解消しUIの一貫性を向上させることができます。（詳しくは「画期的なStorybookの魅力」に関するこちらのブログをご覧ください）

当社のMergeテクノロジーをベースにしたこの連携により、コードの力を利用して高度なプロトタイプを迅速に構築し、デザイナーも開発者も同じコンポーネントを使って製品を作ることが可能になりました。これにより、ハンドオフプロセスの複雑さを大幅に軽減することができます。

 Product Hunt にもStorybook 連携に関して載せておりますので、ぜひご覧ください！

製品チームが信頼できる唯一の情報源を必要とする理由

製品開発における信頼できる唯一の情報源 とは、製品を設計・製造するために必要なすべてのドキュメントや要素を保管する1つの場所のことです。理想では、信頼できる唯一の情報源 は簡単に共有、常に最新の状態、プロセスに関わるすべての人が使用できることです。

 デザインシステムは、製品チーム間で情報がバラバラになってしまうという問題を解決するはずでした。デザインシステムはUIやドキュメントをシステム化するための素晴らしい第一歩ではありますが、それだけではデザインと開発の作業において完璧には解決できないこともあります。

そこで、Mergeという革新的なテクノロジーが誕生しました。製品チームは、GitリポジトリやStorybookなどの開発ツールを活用して、DesignOpsプロセスを改善し、デザインとコードの同等性を維持することができます。その結果、デザイナーも開発者も同じUI要素、ドキュメント、コードを1つのソースから使用することができます。

開発ライブラリからコードベースの完全なインタラクティブコンポーネントを取り出し、キャンバスにドラッグ＆ドロップするだけで、デザインエディタで使用できることを想像してみてください。これが非常にエキサイティングな理由です:

もう 「あのコンポーネントはどこだっけ？」と悩むことはありません。

パズルのピースが散らばっているのと同じように、製品開発に必要なピースを探して作り上げることは、かなりの時間がかかります。コンポーネントやドキュメントを常に最新の状態に保つのは本当に大変なことです。しかし、すべての情報を１つに保管する場所があれば、正しいバージョンのコンポーネントやそのコードを探す必要はありません。

開発者用のライブラリからデザインエディタにUI要素を持ってくると、1つの場所でメンテナンスするだけでよく、ライブラリも自動的に同期されます。

デザイナーと開発者が共通のテクノロジーを使用

デザイナーが作成・開発者が作成したものの間で起こる問題の原因はそれぞれが異なるテクノロジーを使って仕事をしているということです。デザインツールは一般的にベクターやピクセルを使っているのに対し、アプリやウェブサイトは特定のプログラミング言語やフレームワークを使っています。

ベクトルやピクセルを使った手法は非常に限られたもので、最終製品を単純にイメージにしたものに過ぎません。例えば、プロトタイプに実際に動いたりなどの高度なインタラクションを追加したい場合、ベクターやピクセルでは変数や条件付きロジック、あるいは単純な入力フィールドを扱うことができないため、必ずしもそれが作れるとは限りません。しかし、開発者がUIコンポーネントにコードを使用すると、これらの障害はなくなります。

もし、デザイナーがコードに反映されるようなコードパワーのあるテクノロジーを使ってプロトタイプを作ることができれば、デザイナーと開発者は共通の言語でコミュニケーション、作業ができるのです。つまり、2つの異なる環境でUI要素を作成するのではなく、まったく同じ環境を使用することで、製品制作をスムーズにさせます。

10倍の成果

製品をデザインする際には、ユーザーがクリックしたときに何が起きてどのように動くのかを開発者に説明する必要があります。また、すべてのインタラクションを使用して製品の動きをより上手く説明するために、高再現性なプロトタイプを作成することもできます。通常だと、高度なプロトタイプの作成には多くの時間がかかり、詳細を正確に把握するためには、インタラクションやプロトタイプの機能性についてコメントで長い会話をする必要があります。

この流れはデザインオペレーションの観点から言うと、決して効率的なワークフローとは言えません。しかし、コード化されたUIコンポーネントをデザインエディターで使用することにした場合、デザインプロセス全体が決定的にスピードアップします。

完全にインタラクティブで、すべての制作基準に沿った要素を使って作業すると、従来の方法でプロトタイプを作るのに比べて、10倍以上のデザインにおいての成果が得られます。  節約できた時間をユーザーテストなど他の重要なことに回して、費やすことができます。

ユーザーテストの特典：最終製品と同じように動作するプロトタイプ

すべてのUIパーツが完全にインタラクティブでない場合、どうやってプロトタイプをテストする方法としてユーザーテストがあります。しかし、ユーザーテストでは、ユーザーが自身でクリックし、プロジェクトを進めることができなければ十分な信頼性が得られません。アコーディオンをクリックしたり、メニューにマウスを置いたりすると何が起こるかを説明しても、それを見せるのと同じ品質のフィードバックは得られません。

コードで作られたプロトタイプが最終製品とまったく同じように動作するようになれば、ユーザビリティテストで完全に没入感のある体験を提供して、リサーチチームをサポートすることができます。

コードでデザインする  Storybookの連携を試す

Storybook は、開発者がUIコンポーネントを構築し、保存するための唯一の場所です。また、要素をテストしたり、明確なドキュメントを作成するのにも最適なツールです。Storybookは、React、Angular、Vueなどの人気の高いフレームワークを含む多くのフレームワークをサポートしています。

UXPinで Storybook連携 

Storybook は、Merge 技術を使用してコード化されたコンポーネントをデザインツール UXPin と同期させる 2 つの連携のうちの 1 つです（Git repo が最初の連携です）。Storybookとの連携は約1分で完了し、コード化されたコンポーネントを使ってすぐにデザインすることができます。

プライベートまたはパブリック？

あなたのStorybookライブラリは、プライベート（あなたのサーバーにホストされ、選ばれたユーザーだけがアクセスできる）と、URLを知っている人が自由にアクセスできるパブリックのいずれかにすることができます。私たちの統合は両方のタイプをサポートしているので、どちらを使用するかは問題ではありません。

パブリックのライブラリでは、ストーリーブックのURLをコピー＆ペーストするだけで簡単に利用できます。プライベートライブラリでは、開発者は2つの簡単なコマンドを実行するだけです。プライベートライブラリをお試しになりたい場合は、ガイドツアーをご利用ください。

既にお持ちで、他社のパブリックライブラリを使用されたい場合は、オープンソースのStorybookのサンプルをお楽しみください。

コードで自由にデザイン

同期されたコンポーネントはコード化されているので、デザイナーは開発者の手を借りずに、UXPinエディタ内でプロパティ、入力、スタイルを自由に変更することができます。また、コードに埋め込まれた制約は、スタイルにミスマッチがないようにガイドしてくれます。

ノンデザイナーに権限を与え、より良いDesignOpsを実現する

コードを使ってデザインすることで、DesignOpsプロセスを再定義することができます。PayPalは、製品開発のデザインフェーズを変革することで、デザイナー以外の役割を持つ人々がUXPinのコード・コンポーネントを使ってアイデアを視覚化できるようにした素晴らしい例です。PayPalのErica様と彼女のチームはMergeとGit の連携を使用していますが、Storybookを活用しても同様の結果を得ることができます。

デザイナー以外の人は、コンポーネントをキャンバスにドラッグ＆ドロップして、必要に応じてコントロールを操作するだけなので簡単です。その後、デザインドラフトをもとにUIの専門家がプロジェクトを仕上げ、ユーザビリティに焦点を当てることができます。

コードの力を味わう

登録して、Storybookから直接コンポーネントが提供されている内蔵のマテリアルUIライブラリを試してみたり、ご自身で新しいライブラリを同期させたりすることができます。コードの力を実感し、信頼できる唯一の情報源を使用することで、製品チーム全体がどのようなメリットを得られるかをご覧ください。

The post Storybook連携を試してみましょう appeared first on Studio by UXPin.

リードデザイナーは、チームメンバーが正しい道を歩んでいるかどうかを確認する必要があります。マネージャーは目標を達成するために、パターンライブラリやスタイルガイドなど、いくつかの方法を試してきました。これらのオプションは、上手く活用している組織もある一方で、デザインの効率を最適化し、ミスを避けるために必要な唯一の真実の情報源とは限りません。

UXPin Mergeを使用することで、デザインと製品の一貫性とコラボレーションを促進する信頼できる唯一の情報源でプロトタイプを作成する方法をご覧ください。

信頼できる唯一の情報源とは？

今日のデザインおよびプロトタイピングツールは、信頼できる唯一の情報源としてデザインシステムに依存する傾向があります。デザインシステムには、製品開発に携わる社員が会社のブランドアイデンティティに適合し、すべての期待に応えるために必要なものがすべて含まれていなければなりません。

 デザインシステムを唯一の情報源 として使用する場合、承認されたものが多くなります:

• カラーパレット
• タイプスケール
• アイコン
• ボタン
• フォームス
• スライダー

既存のデザインシステムを利用することも、独自のデザインシステムを作ることもできることを覚えておいてください。新しいデザインシステムの構築には時間がかかるため、小規模なデザイングループの多くは、魅力的で機能的なコンポーネントのライブラリがすでに用意されており、デザインに簡単に追加できるMaterial Designのようなオプションを使用することにしています。 

他にも人気のあるデザインシステムは以下の通りです:

• Design Language (IBM)
• Fluent Design System (Microsoft)
• Human Interface (Apple)

これらのデザインシステムを使用することで、時間とエネルギーを節約できる一方で、美的感覚のコントロールが少し失われます。また、多くのデザイナーがこれらのデザインシステムをすでに使用しています。信頼できる唯一の情報源を開発することで、あなたのブランドが他から抜きん出ることができるかもしれません。

新しいデザインシステムを作る場合、アトミックデザインで構築することができます。UXPinには、アトミックデザインシステムの成功に役立つチェックリストがあります。また、Creating a Design System: The 100-Point Process Checklist（無料）をお読みください。

 信頼できる唯一の情報源 が必要な理由

信頼できる唯一の情報源を確立することは、デザイナーが使用するコンポーネント、アイコン、および配色を管理する以上の利点をもたらします。デザインシステムへの取り組み方やツールの選択次第で、チーム全員の作業をより簡単にすることができます。

デザイナーが製品を作るために必要なものを提供する

非常に緩やかな方法ですが、これは静的なスタイルガイドにすでに期待されていることです。ホームページの背景色をどうするか悩んだら、スタイルガイドを参考にします。また、テキストの行間をどのくらいにすればいいのかわからないときも、スタイルガイドが答えを教えてくれます。しかし、会社の基準に沿った要素を再利用したい場合には、インタラクティブデザインシステムが便利です。

さらに一歩進んで、デザイナーの信頼できる唯一の情報源と開発者の信頼できる唯一の情報源をリンクさせることもできます。完全にインタラクティブで開発されたコンポーネントをデザインエディターに持ってくることで、生産可能なコンポーネントを使ってすぐにプロトタイプを作ることができます。そして、承認されたコンポーネントのライブラリを手に入れ、それをデザイナーが自分のデザイン環境にドラッグ＆ドロップすることができます。 

従業員が休暇を申請できるような新しいアプリを作る必要がある場合、適切なインタラクティブ要素を見つけてデザイン環境に落とし込み、目的に合わせて個々のフィールドを微調整することができます。誰かが頻繁なニーズに応える再利用可能なコンポーネントを作成したため、ほとんどの作業はすでに完了しています。

また、ハンドオフ・プロセスの矛盾もすべて解消されます。デザイナーも開発者も同じコンポーネントを使用しているので、プロトタイプでそれらがずれてしまうことはありません。再利用可能なコンポーネントはすでにコード化されているため、製品チームにとって信頼できる唯一の情報源を使用することは、設計時間を短縮するだけでなく、開発プロセスも短縮することができます。

時代遅れのデザインシステムなど存在しない

かつてスタイルガイドが印刷されて使用されていた時代があったのはご存知ですか？優れたスタイルガイドには、新しいデジタル製品をデザインする際に必要な情報がほぼすべて記載されています。

企業がスタイルガイドのデジタル化を始めたときも、たいていはPDFファイル形式でした。

デジタル化されたスタイルガイドは素晴らしいものですが、それ以上の選択肢はありません。なぜなら、何ページもの説明書を印刷する必要がないからです。1つの文書をメールで全員に送ればいいだけなので簡単ですね。

とはいえど、年も変われば去年のスタイルガイドが今年の基準に合うとは限りません。先月のスタイルガイドでさえ、適合しないかもしれません。

誰もが何をすべきかを示す静的な文書を持っていると、間違った版を使ってしまうかもしれません。このような厳しい状況は、常に起こり得ることです。

しかし、デザインシステムを導入すれば、誰もが古いガイドを持つことはありません。ライブラリを更新すると、その瞬間からアクセスした人全員が変更を目にすることができるのです。UXPinでライブラリを作成し、全員が最新の状態に保つことができます。

デザインツールと開発者のGitリポジトリやStorybookを統合すれば、文字通り、信頼できる唯一の情報源は一つになります。開発者が要素を変更すると、デザインライブラリとプロジェクトが自動的に更新されます。また、デザインはコードで動くので、すべてが同期し、開発者のライブラリやリポジトリとまったく同じように表示されます。コンポーネント、色、タイポグラフィなどがずれていることを心配する必要はありません。

 信頼できる唯一の情報源 で時間を節約

信頼できる唯一の情報源となるデザインシステムを構築することで、デザイナーはスタイルガイドを参照することができるので確実に時間の節約になります。

しかし、デザインや開発にかかる時間を大幅に短縮したいのであれば、デザインエディタと開発者のリポジトリやライブラリを同期させることを検討すべきでしょう。PayPalでは、インタラクティブなコードコンポーネントとピクセルベースのコンポーネントを使ったデザインを比較したところ、前者の方が6倍以上も速いことがわかりました。複数の企業がコードアプローチを用いて製品設計や開発モデルを改善しています。PayPal が UXPin Merge のコードベースのデザインを活用して、小規模なデザインチームでの開発を効率化した方法をご覧ください。

UXPin Mergeですべてのステップが簡単に

UXPin Mergeは、信頼できる唯一の情報源を作成し、デザイナーが効率的に作業するために必要なインタラクティブで生産可能なコンポーネントを提供します。プロトタイプが開発者に届くまでの時間を短縮する、より良いオプションを提供します。14日間の無料トライアルをお試しいただき、製品開発を効率化できるコードベースデザインツールをご体験ください。

The post 信頼できる唯一の情報源（SSOT）とは？徹底解説 appeared first on Studio by UXPin.

コンポーネント駆動プロトタイプは、ユーザーテストを大幅に改善すると同時に、ステークホルダーに現実的な製品デザインの期待値を提供しますが、UXPinの npm統合 で、デザインチームは、完全に機能する高忠実度のプロトタイプのデザインに、オープンソースのコンポーネントライブラリを使うことができます。

UXPinのMergeテクノロジーと npm統合 で、コードベースのデザイン革命に乗り出しましょう。 デザインシステムを最大限に活用し、デザインハンドオフを改善し、デザインを大幅に拡張するコンポーネント駆動型プロトタイプの詳細をぜひご覧ください。

UIコンポーネントは、Gitレポ、Storybook、または最新の npm統合 によって提供されます。最後のオプションについては、ぜひこちらをご覧ください。

UXPin Mergeとは

UXPin Merge は、レポジトリ、Storybook、または npm パッケージとしてホストされているコンポーネントライブラリをUXPinのデザインエディタに同期できる、コードベースの技術であり、デザイナーは、このような UIコンポーネントを使って、最終製品のような外観と機能を持つプロトタイプを構築できます。

エンジニアやデザイン システム チームがレポジトリ内の機能コンポーネントに加えた変更は、自動的にUXPinに同期され、デザイン チームに更新が通知されます。Mergeにはバージョン管理が含まれており、チームメンバーは必要に応じて古いデザインシステム バージョンに切り替えることができます。

この『信頼できる唯一の情報源（Single source of truth）』は連携を強化し、「デザインツール」と「コード」という２つのデザインシステムを管理するDesignOpsとDSチームの負担を軽減します。

UXPinの npm 統合 とは

これまでUXPin Mergeは、セットアップ全般にはエンジニアリングの専門知識を必要としていましたが、セットアップのための貴重なエンジニアリングリソースがどのチームにもあるわけではないので、npmコンポーネントをUXPinに統合する方法を考え出しました。

Merge の npm 統合により、デザイナーは npm パッケージとして利用可能なオープンソースのコンポーネントライブラリのインストールと管理を完全に制御することができます。また、直感的なインターフェースを使って、プロトタイプのニーズに合わせてコンポーネントをインポートおよびカスタマイズすることができます。ちなみに、全設定においてコーディングスキルは不要です。

デザイナー向けのnpmについて学びたい方は、入門ガイドをお読みください：NPMと言うのは？把握しよう！

 Ant Design とは

Ant Designは、Alipay、華北、優慧宝など、中国に拠点を置くハイテク/金融企業のコングロマリットである Ant GROUPから生まれた製品です。

Ant Designは、B2B、B2C、エンタープライズ製品など、数多くのアプリケーションの構築に利用されており、この包括的なデザインシステムには、React、Angular、Vueのコンポーネントライブラリと、それを補完するアイコンセットが含まれています。また、ネイティブアプリケーションの構築に、Ant Design モバイルも入手できます。

UXPin Mergeを使った Ant Design の npm 統合方法

Ant DesignのReactコンポーネントライブラリは、 npm パッケージ（antd）として提供されており、デザイナーは、UXPinの  npm 統合を使った Ant React コンポーネントをインポートし、Mergeのコンポーネント管理でプロパティをカスタマイズすることができます。

デザインチームが Ant Design を他のデザインツールと併用する場合、 Ant Design の静的ベクターベースの UI キットをいずれか使う必要がありますが、UXPinの npm 統合 により、デザイナーはエンジニアが使う同じコンポーネントへのアクセスが可能です。

Ant Designのコンポーネント駆動型プロトタイプは、デザイナーとエンジニアの間に『信頼できる唯一の情報源（Single source of truth）』を作成し、UXチームと製品チームの間に最高の一貫性を確保します。

UXPinの  npm 統合 では、インポートする Ant DesignのReactpropsを色、サイズ、アイコン、ステートなど自由に選択することができます。

Merge のコンポーネントマネージャ でのプロパティの割り当て

  npm 統合 には、各 Ant Designのコンポーネントプロパティをインポートおよび管理するための一元管理である『Merge コンポーネントマネージャ』が含まれています。

UXPinの npm 統合はReactコンポーネントで動作するので、 Ant Design のReactドキュメントに従って、どのpropsをインポートするかを参照できます。これらを Merge のコンポーネントマネージャ で設定すると、コンポーネントのプロパティが UXPin のプロパティパネルに表示されます。

例えば、Ant のボタンには以下のように６つのタイプまたはバリエーションがあります：

• プライマリー
• ゴースト
• ダッシュ
• リンク
• テキスト
• デフォルト

これらのボタンタイプ（および他のすべてのプロパティ）は、デザイナーが選択できるようにプロパティパネルにドロップダウンとして表示されます。プロップは、コンポーネントによって、テキストフィールド、チェックボックス、コードエディタなどとして表示されます。

UXPinとAnt Designの npm パッケージの連携

ステップ１

UXPinのダッシュボードに移動し、【New Project（新規プロジェクト） 】をクリックします。

ステップ２

プロジェクトに名前を付けて、【Create New Project（新規プロジェクトの作成 ）】をクリックします。

ステップ３

【New prototype（新規プロトタイプ）】をクリックし、UXPinのデザインキャンバスにプロジェクトを開きます。

ステップ４

左サイドバーのDesign System Libraries（デザインシステム・ライブラリ）タブの下部にあるドロップダウンをクリックし、【New library （新規ライブラリ）】をクリックします。

お使いのサイドバーや利用可能なライブラリは、例と異なる場合があります。

ステップ５

【Import React Components （React コンポーネントをインポートする）】を選択し、【Next （次へ）】をクリックします。

ステップ６

ライブラリに名前を付けます。この名前は純粋にあなたの参考のためであり、インポートに影響を与えることはありません。

また、Ant Design のnpmページの「Install（インストール）」にある、npmパッケージのレポジトリ名を取得する必要があります。npmからインストール内容をコピーして、「Library Package name （ライブラリパッケージ名）」欄に貼り付けます（antdより前は削除）。

コンポーネントのスタイリングプロパティをインポートするために、Merge は Ant Design の CSS (antd/dist/antd.css) へのパスを要求します。これは、Ant Design の React インストール手順の 【Usage（使用） 】 に記載されています。

Ant Design コンポーネントをインポート

npm の統合が完了すると、UXPinは自動的にキャンバスにリダイレクトします。では、インポートしたいAnt Design のコンポーネントを選択してみましょう。

ステップ１

左側のサイドバーから、【Open Merge Component Manager（Mergeコンポネントマネージャを開く）】をクリックします。

Merge のコンポーネントマネージャが新しいタブで表示されます。

ステップ２

【Add new component（新しいコンポーネントを追加） 】をクリックします。

ステップ３

インポートするコンポーネントの名前を入力します。

正しい命名規則は、Ant Design のドキュメントの コンポーネント API にあります。Ant Designのコンポーネントは、例えば、「Date Picker」 は 「DatePicker」 となるように、スペースなしのキャメルケースを使い、常に最初の文字を大文字にします。

このチュートリアルでは、最初のコンポーネントとしてAnt Design のボタンをインポートし、「General」という新しいカテゴリに追加します。その際、Ant Design のドキュメントと同じカテゴリを使うことをお勧めします。そうすることでデザイナーとエンジニアが同じリファレンスポイントを持つことができますからね。

一度のインポートで複数の部品を追加できるので、手順の「２」と「３」を繰り返す手間が省けます。

【Import Components （コンポーネントをインポートする）】をクリックします。

ステップ４

右上の【Publish Changes（変更を公開する）」をクリックすると、インポート処理が初期化されます。

新しい部品に対して初めて行う場合は、１～２分かかるかもしれません。

ステップ５

インポートが完了したら、【Refresh Library（ライブラリを更新する）】をクリックして、プロジェクトライブラリの変更内容を更新します。

この手順を順を追って見ていくと、左サイドバーにカテゴリ【（General（一般）】と最初のコンポーネント（ボタン）があるのが見えます。

ステップ６

そのボタンをクリックして、プロパティの追加を開始します。このような Reactプロップは、Ant Design のドキュメントで、Components > General > ButtonのAPI で見ることができます。

Merge のコンポーネントマネージャを使ったコンポーネント プロパティの追加

ドキュメントにあるReact propsを使って、Ant Designのボタンのプロパティをいくつか追加してみましょう。

ボタンの種類：ステップ1

Reactのボタン型プロップは、Ant Designのボタンスタイル６種をインポートします。

• プロパティ名：「type 」と入力（propsは必ず小文字を使用）。
• 表示名：デザイナーとエンジニアの両方が使う説明的なもの（これは参照用であり、わかりやすように「Type」が使用されている）。
• 説明文：デザイナー向けの簡単な説明または指示を追加。今回は「ボタンの種類」を使用。
• プロパティの種類：「列挙型（enum）」 − スタイル６種を表示するドロップダウンを作成することができる。
• プロパティコントロール：「セレクト」
• オプション：Ant Design の API ドキュメントにあるオプションである「primary（プライマリ）」、「ghost （ゴースト）」、「dashed（破線）」、「 link （リンク）」、「 text （文字）」、「default （デフォルト）」 を追加。
• デフォルト値：お好みで。ここでは Ant Designのドキュメントにあるように「default （デフォルト）」とする。

プロフィールを完成させると、コンポーネントのプレビューが表示され、お好みに応じて変化することがわかります。

ボタンの種類：ステップ２

項目を全て入力したら、【Add property（プロパティを追加） 】をクリックします。

その後、【Save changes（変更を保存） 】します。

最後に、【Publish library changes（ライブラリの変更を公開）】します。

UXPinによるコンポーネント駆動プロトタイピング

Ant Designの必要なコンポーネントとプロパティをインポートすれば、UXPinでのプロトタイプは、ドラッグ＆ドロップでレイアウトを構築するのと同じくらい簡単です。３つのAnt Designのコンポーネントを用いて、以下のシンプルなメール登録フォームを１分足らずで作成しました。

Ant Designコンポーネントを選択すると、Mergeのコンポートマネージャ で作成したプロパティが右側のプロパティパネルに表示されます。

UXPinの npm 統合でAnt Designのプロトタイプを構築してみませんか。コンポーネント駆動のプロトタイプが、どのように製品開発のワークフローを改善し、より良いユーザー体験を顧客に提供するかぜひご体験ください。

The post 中国初の Ant Design とは？UXPin連携方法と npm 統合徹底ガイド 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.

UIコードコンポーネントをUXPinのエディターにインポートするための、デザイナーに便利な方法が発表されました。エンジニアの積極的なサポートがないチームでも Mergeにアクセスできるようにするための、新しい “npm 統合” です。

UXPin Mergeでデザインプロセスに革命を起こす

UXPinとMergeテクノロジーにより、プロトタイプでの新しいレベルの忠実度とインタラクション性を生み出し、スムーズなデザインハンドオフ、デザイナーとデベロッパーの作業の信頼できる唯一の情報源（Single source of truth）での統合が可能になります。まさに、製品開発プロセスを効率化するものです。

静的なデザインから完全にインタラクティブなデザインへ

静的なプロトタイプの時代は終わり、今は特にデザイン成熟度が高い企業で、より効率的なプロトタイピングの方法を探しています。動きのないアートボードをリンクさせ、不完全なツールでデザインをコードに変換し、ニュアンスの異なるインタラクションを何度も文書化することは、仕事を増やし、成長の妨げにもなるのです。

そこでMergeの出番です。この技術があれば、真の機能を持つ要素を組み込んだプロトタイプの作成ができるのです。Mergeは、PayPalのチームが行ったように、デザインをスケールアップさせます。

デザインと開発間の連携の効率化

Mergeでは、デザインチームと開発チームが、制作プロセス全体を通して同じインタラクティブなコンポーネントを使用して作業します。デザイナーはUIコンポーネントを使用し、一方、開発者は全く同じデザインから作成されたコードをコピーします。

デザインからコードへの変換はもう完了です。信頼できる唯一の情報源（Singe source of truth）を最大限に活かすことで、デザインとエンジニアリングが一体となり、デザインのハンドオフ段階がシンプルになります。つまり、デザイナーもデベロッパーもハッピーで、行ったり来たりのやりとりで時間を無駄にすることもありません。

デザインの一貫性を保証する正確なUIコンポーネントの使用

デザインプロセスで使用されるコード化されたUIコンポーネントは、プロトタイプを最初から最後まで一貫したものにします。デザイナーが意図したとおりに製品が作られていくのです。何よりも、デザイナーがコードを扱う必要ないことが1番ですね。

その結果、Mergeの技術ない場合、デザインと最終製品の外観や感触の間にずれがないため、非常に時間とエネルギーを消耗する結果になります。

UXPin MergeへのUIコンポーネントの新たなインポート方法

コンポーネントを使ってデザインする前に、コンポーネントのライブラリへのインポートが必要ですが、今までコード化されたコンポーネントをUXPin Mergeに取り込むには、2つの方法がありました。

• Gitの統合：デベロッパーはソースコードとその履歴をホストするためにGitを使いますが、コードコンポーネントをUXPinにインポートするには技術的なサポートが必要です。
• Storybookの統合： Storybookには、UXPinに持ち込むことができる公私でのコンポーネントライブラリが保存されています。

今回、UIコンポーネントをインポートする3つめの方法として、デザイナーにとって自由度が高いnpm統合機能が追加されました。

Merge npm統合で得られるもの

デベロッパーからの積極的なサポートがない場合、多くのデザインチームが大変な思いをしてMerge Git 統合をすることになります。そこで、本来Mergeが持つ威力を発揮するために、UXPinにコンポーネントライブラリをインポートする、デザイナーにとっても使いやすく新しい方法がリリースされました。

npm統合の使い方って？

では、npmの統合をどのように使うか見てみましょう。まずは、その方法を以下で文章でご説明します。

npmコンポーネントをUXPinにインポートする

npmは、プロジェクトで使用するためにダウンロードできる既製の開発要素を持つ、パッケージのレジストリです。最も使われるオープンソースのデザインシステムの一部は、この方法で配布されています。

Adele (UXPin のデザインシステムレポジトリ) を使って、どのデザインシステムが npm パッケージに含まれているかを調べることができ、最終列までスクロールすると、配布方法が表示されます。 または、独自のReactベースのコンポーネント ライブラリをnpmにアップロードして、UXPinで使用することもできます。

npmデザインシステムをUXPinに取り込む手順は次のとおりです。

1. 新しいライブラリをUXPin Mergeに追加する

どの React ベースのデザイン システムを使用するかがわかったら、それを UXPin Merge と同期します。そして UXPin ダッシュボードの【Merge】タブに移動し、npm パッケージを介してライブラリを追加します。 npm パッケージ名と使用するバージョンを指定する必要があり、 ドキュメントで必要な場合は、「assets location（アセットの場所）」のフィールドにスタイルを追加します。

2. UI コンポーネントを構成する

Merge Component Managerを開き、インポートするコンポーネントを指定しますが、必要に応じてコンポーネントを分類できます。 コンポーネントを作成した後、そのプロパティを管理し、インポートするものを確定します。 ライブラリの文書にアクセスして、プロパティの名前とタイプを確認しましょう。

3. 完全にインタラクティブなプロトタイプの作成を開始

最初のデザインを作成する時が来ました。デザインエディタ（design editor）に移動し、コンポーネントをキャンバスに置きます。 使用するコンポーネントのプロパティを簡単に変更できることをご覧ください。コンポーネントのインタラクティブ性（動きなど）を確認するには、【Preview（プレビュー）】モードに移動します。

プロトタイプは完成しましたか？ これで、プロジェクトのリンクを仲間のデベロッパーに渡すだけで、デザインからコードをコピーしてスペックをチェックできるようになります。

それでは実際にやってみましょう！

1. 統合の使用方法を説明するビデオをご視聴ください。

Youtubeで統合の流れについて一通り説明してくれるビデオをご用意しました。 npmデザイン システムをUXPinにインポートする方法については、この動画をご覧ください。

2. npmコンポーネントをMUI からUXPinにインポートする

MUIをUXPinにインポートしますか? 以下のブログ記事では、一連のプロセスについて説明しています。

MUIのコンポーネントをUXPinにインポートするには？

3. Ant DesignからUXPinにnpmコンポーネントをインポートする

Ant Designは、最も人気のあるライブラリの1つです。 UXPinにログインすると、npm を介してインポートした Ant Design コンポーネントの一部が表示されます。 すぐに使用できるので、 下の記事でUXPinへのインポート方法を確認してください。

 中国初の Ant Design とは？UXPin連携方法と npm 統合徹底ガイド

npm統合 + Patternsを使う

必要なものをすべてインポートし、変更を保存したら、基本的なものからより複雑なコンポーネントを作ったり、同じ手順を何度も繰り返さないように、コンポーネントをプロパティで保存したりすることができます。つまり、パターンを作るのです。

詳しく読む： Patterns（パターン）の使い方

npm統合を試してみよう

npmの統合により、コード化されたUI要素をUXPinに取り込むのにデベロッパーの手助けは必要なく、デザイナーはUIコンポーネントをUXPinに取り込み、好きな方法で自分で管理することができます。

npmの統合でUIコンポーネントを導入しましょう。デザインチームと開発チームを信頼できる唯一の情報源（Single source of truth）でつなぎ、組織のサイロを解消しましょう。14日間のトライアルにサインアップして、ぜひ統合をテストしてみてください。

The post UXPin Mergeで npm 統合するには？ appeared first on Studio by UXPin.

製品とそのデザインシステムは、常に進化し続けるプロジェクトです。製品の規模が大きくなるにつれ、デザイナーはユーザビリティの課題を解決しながら、ビジネス目標やユーザーニーズを満たすために、新しい UI パターンやコンポーネントを作成しないといけません。

デザイナーは新しいパターンを普及させる前に、まずはそれを作らないといけないんです！さらに、大抵の組織では、デザインシステムのガバナンスの手順に従っているため、新しいパターンがライブラリで利用できるようになるまでに時間がかかる可能性があります。

UXPinのPatterns（パターン）では、デザインチームが「既存のMergeコンポーネント」と「標準的なUI 要素」を組み合わせて新しいUIパターンを作成し、UXPinライブラリに保存することができます。

そこで本記事では、UXPin のPatterns（パターン）機能の使い方などをご紹介し、製品やデザインシステムをスケールアップするためどのように活用することができるかをみていきます。

UXPin Merge で完全に統合されたデザインシステムを構築し、製品開発チームに「信頼できる唯一の情報源（Singl source of truth）」を提供しませんか。この革新的なコードベースのデザインテクノロジーの詳細とリクエスト方法については、ぜひ Mergeのページをご覧ください。

UXPin Mergeとは、その仕組み

Merge によって、Gitレポジトリ、Storybook、npmパッケージでホストされているコンポーネントライブラリの要素を UXPin のデザインエディターにインポートして、チーム全体が同じデザインシステムを使えるようになります。そして、デザイナーはその要素を使って、最終製品と完全に一致するプロトタイプを作成することができます。

従来、多くのデザインシステムでは、以下の２つの UI ライブラリが搭載されています：

• デザインチームは静的なUIキットを使用
• エンジニアはコード化されたコンポーネントライブラリを使用

多くの組織は、この二重のシステムが「信頼できる唯一の情報源（Single source of truth）」であると主張していますが、その実現には多くの時間とリソースが必要です。

UXPin Merge は、コンポーネントライブラリが１つしかないため、純粋にそれが「信頼できる唯一の情報源」になり、デザイナーとエンジニアは、同じレポジトリから同じ UI 要素やパターンを使います。

また、Vue、Ember、Web Components、Angularなど、他の一般的なフロントエンド技術については、Merge for Git や UXPin の Storybook 統合を使ってReactコンポーネントを同期することができます。

さらに、デザイナーは Merge の npm 統合を通じて、MUI、Bootstrap、Ant Design、Lightning などのオープンソースのコンポーネントライブラリの npm パッケージをインポートして、完全に機能するプロトタイプまたは最小実行製品（MVP）を構築することもできます。

UXPin パターン（Patterns）とは

パターンとは、デザインチームが Merge コンポーネントと標準的な UXPin UI  要素を組み合わせて、より複雑な UI パターンを構築することができる Merge 独自の機能です。

ブラッド・フロスト氏の「アトミックデザイン」のコンテクストでは、デザイナーはパターンによって、基礎となる UI 要素やコンポーネントである原子や分子を使って、カード、フォーム、ナビゲーション、ヘッダー、フッターなど、有機体やテンプレートなどの大規模で複雑なデザインを構築できます。

UXPin パターンの代表的な使用例として、以下のようなものがあります：

• 現在のライブラリにはない高度なコンポーネントの作成
• よく使うコンポーネントのバリアントのプロパティの保存
• グループ化と保存 要素の大きなUIパターンへの統合
• 一貫性を上げるための新しい UI パターンのデザインチームとの共有
• エンジニアがコンポーネントライブラリに追加するための新しいパターンの推進

デザイナーは、複数のコンポーネントライブラリや UXPin の基本的なコンポーネントの UI 要素を組み合わせて、新しいパターンを作成することができます。この柔軟性は、新しい UI パターンに必要なパーツがデザインシステムにない場合に有益です。

例えば、ドロップダウン メニューを使ったヘッダー ナビゲーションを構築したいけど、現在のデザイン システムにはドロップダウン メニューがないとします。その場合は UXPin の npm 統合を使って、MUI（または他のオープンソースライブラリ）からドロップダウン メニューをインポートし、それを使って新しいナビゲーションのパターンを構築することができます。エンジニアは、MUIのドキュメントを読み、JSXコードを見ることで、新しいパターンのコーディング方法がわかり、それをデザインシステムに追加することができます。

UXPin Patterns（パターン）の３つのメリット

パターンは製品開発およびデザインシステムチームに対して 主に３つの利点があり、この３つは、Merge レポジトリに必要なものがない場合に、パターンが同等の代替手段を提供してくれる点が共通しています。

１．UI 要素を入れ子にして複雑なコンポーネントを構築できる

包括的なデザインシステムがあっても、デザイナーは製品の進化に伴って新しいコンポーネントやパターンを作らないといけないことがよくありますが、多くの場合、そのパターンはデザインシステムには存在しないため、デザイナーは毎回ゼロから構築しないといけません。

特にグラフやデータテーブルのようなものを作る場合、ゼロからデザインすると、貴重な時間がその作業に費やされることになります。その代わりに、このような複雑なパターンを一度作成し、UXPin のパターンライブラリに保存しておくといいでしょう。また、このパターンを他のデザイナーと共有することで、チームで作業が被ったり、矛盾が生じたりすることがなくなります。

多くのデザインツールがこの機能を提供していますが、コードコンポーネントを操作して組み合わせることができるものはありません。これがパターンだと、デザイナーはデザイナーとエンジニアのハイブリッドな役割を担い、１行のコードも書かずに、完全に機能する複雑なUIを構築することができます。

２．同じコンポーネントのプロパティを再利用できる

デザイナーは Merge によって、プロトタイプを画像ベースのデザインツールよりずっと速く構築できますが、より効率的に作成する余地は常に存在します。

例えば、デフォルト、エラー、警告、成功など、さまざまな Merge フォームの入力やボタンの状態についてパターンを保存したいと思うかもしれません。パターンだと、それを一度設定してパターンライブラリに保存し、次の UI（ユーザー インターフェース）のためにドラッグ ＆ ドロップする準備ができます。

このような構築済みのパターンは、デザインスプリントや、ステークホルダーとのミーティングやユーザーテスト中でのちょっとした変更がしたい場合に特に便利です。UXPin のプロパティパネルでプロパティを操作する代わりに、目的のパターンをキャンバスにドラッグするだけですぐに使えますよ！

３．新しいデザインシステムの UI 要素の推進とテストができる

新しい UI 要素は、デザインシステムで魔法のように現れるわけではなく、DSチームは、リリース前にこのパターンを構築してテストする必要があります。UXPin パターンを使えば、DSチームは既存のコンポーネントを 基本的な UXPin やオープンソースのライブラリと組み合わせて、より高い忠実度と機能性でテストおよびイテレーションを行うことができます。

また、UXPin Mergeとパターンを使ったコンポーネント駆動型のプロトタイプによって、デザイナーはエンジニアからのより少ないインプットでイテレーションを行い、エンジニアは最終コンポーネントの開発とデザインシステムのテクニカルバックログの処理に集中することができます。

パターンがあれば、デザインチームはエンジニアが新しいコンポーネントを開発するのを待つ必要がなく、DSチームが作成したプロトタイプのパターンを使うことで、忠実性や機能性を損なうことなく、デザインとテストのプロセスを継続できるのです。

UXPin パターンは、１回こっきりの UI コンポーネントやほとんど使われない UI コンポーネントを作成するのに素晴らしいツールです。このようなパターンは、デザインシステムに昇格するほどには使われていませんが、デザインチームはまだそこへのアクセスが必要な時がありますからね。

それを UXPin パターン ライブラリに保存すると、デザイン システムのレポジトリに追加されることなく、完全に機能する Merge コンポーネントの利点を得られ、エンジニアは、そのコンポーネントを別のレポジトリに保存して、必要なときに使えます。

UXPin Merge Patterns（パターン）の使い方

では、UXPinで新しいMerge パターンを作成するのがいかに簡単であるかをみてみましょう。MUI npm のチュートリアルでインポートしたものと同じコンポーネントを使用しているので、そちらもぜひご覧ください。

以下のパターンは、Merge の npm 統合 を使ってインポートした MUI コンポーネント３つと、UXPin の基本的な テキスト要素 ２つが使われています（デザイン賞はもらえないでしょうけど！）

でもこのようなシンプルなパターンでも設定が必要なので、再利用可能なパターンを作ることで、その繰り返しの作業をなくすことができたらいいですね。

ステップ１

パターンに必要なコンポーネントを追加して配置します。複数のコンポーネントライブラリや UXPin の基本的な要素を組み合わせることができることを忘れずに。

ステップ２

Merge コンポーネントのプロパティを設定します。

• アクセシビリティのために、プレースホルダーとヘルプテキストを備えたメール入力フィールドを作成しました。また、ユーザーが入力しないといけないことがわかるように、このフィールドは「必須項目」としました。
  
  
• 次に、MUIチェックボックスを追加しました。これはユーザーが当社からのメールを受信するためにチェックする必要があります。
• 最後に、ユーザーがメールフィールドとチェックボックスを完了した後にクリックしなければならない場所が明確になるように、MUIボタンを選択し、プライマリに設定しました。

以下は、メールコンポーネントのプロパティパネルの例です。

ステップ３

コンポーネントライブラリの上にある左サイドバーの「Patterns（パターン）」タブに切り替えます。

ステップ４

パターンとして保存したい UI 要素のグループまたは単一のコンポーネントを選択します。左サイドバーの大きな白い「＋Add（追加）」のボタンをクリックすると、新しいパターンが表示されます。

ステップ５

パターンの名前をクリックして、より分かりやすいものに変更したり、デザインシステムの命名規則と一致させます。複数のパターンを用意したら、UXPin の検索機能🔍を使って、必要なものを絞り込むといいでしょう。

パターンの削除

また、下の鉛筆のアイコン（「Enter edit mode（編集モードに入る）」）をクリックすると、古いパターンを削除できます。

削除したいパターンを選択して【Delete（削除）】をクリックします。

複数のステートの作成

デフォルトのパターンができたので、ワークフローをさらに最適化するために、追加のステートを作成したいと思うかもしれません。

例えば、ユーザーがメールアドレスを入力しなかったときに発生するエラーステートのパターンを設定するといいでしょう。

また、ユーザーが有効なメールアドレスを入力し、入力を確認した場合にのみ、ボタンが有効になるような無効ステートを作るのもいいですね。

これで、プロトタイプを始めるのに３つのニュースレターパターンの準備ができました。デザイナーは、プロパティの設定やパターンからの個々のコンポーネントの切り替えを気にすることなく、ドラッグ＆ドロップで簡単に変更することができます。

UXPin MergeとPatternsでワークフローを効率化する準備はできましたか？Merge へのアクセス権をリクエストして、さっそく使ってみましょう。

The post UXPin Merge Patterns（ パターン ）の使い方・チュートリアル appeared first on Studio by UXPin.

２０２１年１２月から２０２２年１月にかけて、UXPin と Whitespace は、約２０の企業レベルの組織のデザインシステムマネージャーにインタビューを行い、この調査を「Design Systems and DesignOps in the Enterprise（企業における デザインシステム とDesignOps）」と題した１万語の無料 レポート にまとめました。

 レポート は以下で無料でダウンロードできます：Design Systems and DesignOps in the Enterprise.

この記事は、本レポートの概要と、調査から学べることをまとめたものです。理想では、組織で共通のツール、文書、ガバナンスがあることが望まれますが、現状ではこれらの結果を効果的に達成できていないことがわかりました。

 レポート の目的

UXPin のチームは、組織がどのように デザインシステム を利用しているのか、そしてその利用を促進および効率化するために DesignOps がどのような役割を担っているのかを理解したいと考えていました。

このレポートを通じて、 デザインシステム に関する「組織の課題」を把握し、その課題を解決するためのツールやソリューションを明らかにしたいと考えました。

調査資料

UXPin は Whitespace と提携し、アメリカ、スイス、ドイツ、フランス、イギリス、インドネシア、オーストラリアの７カ国から１９の企業機関にインタビューを行いました。

その企業はそれぞれ、テクノロジー、ヘルスケア、輸送、小売、行政など、様々な業界へのサービスを提供しています。

インタビュー内容

各組織への取材では、以下の重要な６テーマを取り上げました：

1. これまでの デザインシステム の歩み
2.  デザインシステム の成熟度
3. ガバナンスとプロセス
4. デザイナーとデベロッパーの連携と課題
5. ロードマップとマイルストーン
6. 既存の市場調査との比較

企業の現状

デザインシステムに関する多くの企業の現状は以下のようになります：

• 「信頼できる唯一の情報源（Single source of truth）」が主な目標だが、サイロと不十分な文書によって、この理想的な成果への進歩が妨げられている
•  デザインシステム のガバナンスのサポートが欠けており、チームメンバーは自分の仕事の ROI （投資収益率）を示そうとリソースを浪費してしまう。
•  デザインシステム の導入が多くの組織で課題となっている
• デザインシステムの成熟度は組織や業界によって大きく異なり、多くの場合、リーダーシップやステークホルダーのサポートに左右される

無料ダウンロードはこちらより：Design Systems and DesignOps in the Enterprise.

各章の簡単な概要

デザインチーム

デザインチーム編では、組織構造や部門横断的な連携、そしてデザインシステム採用への影響について述べられています。

リーダーシップのサポートがあるケースでも、サイロや不十分なコミュニケーションチャネルにより、デザインシステムの導入が遅れたり大変になったりしています。そこで本レポートでは、以下のような解決策を概説しています：

• チーム間の透明性のあるコミュニケーション
• 「信頼できる唯一の情報源（Single source of truth）」の確立
• 測定可能な目標設定および、進捗確認のための KPI の設定
• 共通の目標に向けたチーム全体の責任の割り当て

デザインプロセス

デザインプロセス編では、作業標準、ハンドオフプロセス、チームの願望について見ていますが、デザイナーは新しいものを作るのを好み、デベロッパーは使い回せるだけ使い回したいということがわかりました。

多くのデザインシステムのワークフローやコンポーネントは時代遅れになっており、コンポーネントライブラリの更新、要素の追加、全体的な変更などは、企業にとって最大の懸念になっています。

もう一つの課題は、デザインハンドオフです。ほとんどの組織で、現在のデザインプロセスに対する懸念の声が聞かれましたが、より効果的にするための明確な道筋は示されていませんでした。しっかりとしたデザインシステムがあっても、デザインから開発への移行は大変であり、チームは、このハンドオフプロセスをシンプルにするためにツールを採用しますが、断片的なコミュニケーションと非効率がよく起こってしまいます。

ツール

ここでは、デザインおよび開発時に使うツールが、デザインシステムの採用や成功にどのような影響を与えるかを探ります。

多くの企業は「信頼できる唯一の情報源（Singe source of truth）」をもたらす直感的なツールが必要であると認識していますが、ツールを変えるのは、みんなの意識を変えるために時間とリソースを必要とする大変な仕事です。

 デザインシステム のドキュメント

デザインシステムを管理する上で最も大変な作業の１つは、その各部を常に最新の状態に保つことであり、ドキュメントは、デザイナーやデベロッパーが一貫した UI を提供するための労力をモデル化できるようにするための貴重なリソースになります。

組織は、適切なドキュメントなしには、製品のデザインと納品の成功はほぼあり得ないことがわかりましたが、デザインシステムのドキュメントの維持に必要な帯域は、特にリソースの少ない小規模なチームにとっては大変です。

適切なツールによって、文書化のための構造を提供しながら、デザインシステムの成熟を促進することができます。ツールについての詳細は、以下のレポートからご覧ください：Design Systems and DesignOps in the Enterprise.

デザインシステムの採用

デザインシステムの採用には、その価値と効率性をステークホルダーに理解してもらうための継続的な伝道（トレンドや新技術などをわかりやすく伝えること）とアウトリーチが必要です。

効果的な採用には、トップダウンのサポートと人事および DesignOps チームによる変更管理が必要であり、採用戦略は、組織が進捗をモニタリングし、成功したイニシアチブを特定できるように、測定できるものでないといけません。

理想的なモデル像

調査から得られた見解をもとに、理想のデザインシステムモデルのビジョンをまとめました。理想的なデザインシステムの枠組みは組織によって異なりますが、明確に共通しているのは、「より良い製品開発のための、より効果的なワークフローの構築 」でした。

組織は、以下のような目的達成のために、デザインシステムを導入します：

• 効率性を高め、要素やコンポーネントを複製する機能を使用した、大規模なデザインおよび開発作業の作成
• デザインリソースへの負担の軽減
• 統一されたデザイン言語の作成
• 製品、チャネル、部門を超えたビジュアルの一貫性の創出
• 明確な基準、プロセス、ドキュメントを備えたオンボーディングツールとしての提供

 レポート の活用法

この調査は、製品開発およびデザインシステムに関して、企業が同じような問題を抱えていることが示されています。なのでこの調査結果を共有することで、他の企業が同じような課題をどのように解決したか（あるいは解決する予定か）に基づき、企業が解決策をモデル化できるよう、また、デザインシステムの成熟度や製品デザインの未来をめぐる議論につながるよう期待しています。

 レポート を無料ダウンロードできます：Design Systems and DesignOps in the Enterprise.

The post 企業のデザインシステム活用とDesignOpsに関する レポート appeared first on Studio by UXPin.

皆さんご存知かと思いますが、 Storybook は開発チームの生産性を大きく向上させ、開発や作業のスケールアップや同じページでの作業をスムーズにしてくれるツールです。このツールは、UXPinでも活用できる新バージョンになります。今回のアップデートでは、いくつかの大きな改善点が加わり、 Storybook の機能が拡大されました。

 Storybook のコンポーネントをUXPinに取り込み、最終製品のような外観と機能を持つプロトタイプをデザインできます。デザインと開発間の一貫性を保ち、信頼できる唯一の情報源でチームをひとつにまとめましょう。UXPinのStorybook統合をこちらのリンクよりぜひお試しください。

 Storybook 7.0の魅力は？

Storybook 7.0の正式リリースは3月14日を予定しています。正式リリースに先立ち、ベータ版でお試しいただき、その効果を体験していただくこともできます。詳しくは、Storybookの2023年の予定についての記事でご紹介しています。

パフォーマンスの向上

Storybookのチームは、ツールの性能を大幅に向上させました。前バージョンに比べ、2倍以上のスピードを実現しました。

より多くの互換性のある統合を実現

Storybookの新バージョンでは、統合がより簡単になりました。Frameworks APIを提供開始に伴い、StorybookはVite、NextJSをサポートし、SvelteKitのサポートに取り組んでいます。また、Remix、Qwik、SolidJSなどの新しいフレームワークとの統合を検討できるようになったそうです。

より広範囲なテストが可能

コード・カバレッジ・レポートが追加されました。これで、コンポーネントやライブラリのどの行のコードが、ユーザーのストーリーによってテストされているかが見えるようになりました。

ドキュメントの改善

Storybookでは、ドキュメンテーションについてもいくつかのアップデートがあります。その1つとして、StorybookのチームがドキュメントをMDXのバージョン2にアップグレードしたことです。また、docsのストーリー（コンポーネント例）のインポート方法をより簡単にしたそうです。

Storybook 7.0とUXPinの連携

UXPinはすでにStorybook 7.0をサポートしています。StorybookのコンポーネントをUXPinと同期させましょう。とても簡単で、製品デザインや 開発プロセスを向上させる多くのメリットを得ることができます。

 Storybook のコンポーネントを使ったプロトタイプの作成

UXPinに持ち込まれたコンポーネントは、Storybookにあるものを単に視覚的に表現しているの だけではありません。これらは実際に機能し、実際のユーザーインタラクションをテストすることができます。これこそが、忠実度の高いプロトタイピングのあるべき姿なのです。

部門横断的なコラボレーションを促進

この統合では、製品設計と開発の間のサイロ化を解消することができます。チームは同じコンポーネントを共有することで、デザインと開発の間に起こる問題を防ぐことができます。

デザインハンドオフの効率化

完全に機能するコンポーネントでプロトタイプを作ることで、デザイナーはデザインのハンドオフプロセスを円滑に進めることができます。Storybookのコンポーネントは、チーム間で共有する信頼できる唯一の情報源となるため、大量のドキュメントを作成する必要がなく、ズレも生じません。

 Storybook との連携方法

統合には1分もかかりません。以下の動画でご紹介します。

使用したいStorybookライブラリへのリンク（パブリックまたはプライベート）が必要で、UXPinにログインし、フォームにリンクを貼り付けて新しいライブラリを追加します。

UXPinのStorybook統合のガイドツアーはこちらです。

UXPinと Storybook  7.0を試してみる

StorybookはUIコンポーネントの品質管理に最適なツールですが、UXPinと組み合わせることで、デザインシステムの維持と拡大につながります。Storybookコンポーネントを使ったインタラクティブなプロトタイプのデザインを始めましょう。

The post Storybook 7.0 – 待望のアップデート情報と注目すべきポイント appeared first on Studio by UXPin.

自分に合ったデザインツールをお探しですか？すでにリサーチされている方は、デザインツールは様々な機能があることはすでにご存知だと思います。数多くあるUXツールが多くの機能を提供しているなかで、今の自分に一番あったツールを選ぶことは難しいですね。1つのツールのみではなく他のツールも並行して使いこなす必要があるかもしれませんし ね。

製品開発やデザインプロセスでの効率性において、どのような機能をみるべきか、なぜそれが必要なのかをご紹介します。

開発とデザインの連携をサポートするツールをお探しですか？UXPin をぜひ無料でお試しください。

デザインプロセスにおいて、UX ツール がどのように役立つのか

最適なUX プラットフォームを探すために、おさえておくべき７つの主要な機能をそれぞれご紹介します：

１．リアルタイムでの連携が可能

  リアルタイムでの連携で、チームメンバーが同じ部屋にいるかどうかにかかわらず、同じプロジェクトでチームと一緒に作業することができるようになります。これにより生産性が上がり、リモートで作業している人も他のチームメンバーとリアルタイムでやり取りができるようになります。例えば、UXPin は高度な連携能力を備えており、プロジェクトに対するフィードバック取得や、コメント、プロトタイプの共有も可能です。

また、プロジェクトの保存や、過去に保存したバージョンをコマンドでめくることも可能ですし、連携の環境を充実させるために、Slackや Jiraとの統合もできます。チームのメンバーが編集した箇所も確認できるので、チーム全員の足並みを揃えることができます。

２．便利なデザインハンドオフ機能がある

  ご存知のように、プロトタイプが完成すると、次はデベロッパーにプロトタイプを渡し、完成品を作ってもらうことになりますが、残念ながらこのプロセスは単純ではありませんよね。

Adobe XD のようなハイエンドなツールでは、ユーザーが他のチームメンバーとデザインドキュメントを共有することができ、これは簡単なプロセスですが、デザインが通常「ベクター」でレンダリングされるという問題があります。

一方、UXPin はデザインを「コード」でレンダリングします。

デザインドキュメントが「ベクター」ではなく「コード」でレンダリングされるため、デベロッパーはデザインの各コンポーネントを明確に理解することができます。さらに、最終製品を作る際にも、デベロッパーはコード化されたデザインを参照することができ、より迅速で便利な開発プロセスを実現できるのです。コード化されたデザインで、チームは製品を市場投入プロセスでの誤解や混乱を回避することができるのです。

３．インタラクティブなプロトタイプ

  インタラクティブなプロトタイプは、アイデアを試すことができるインタラクティブな環境を作ることで、さまざまなデザインアイデアを探求できるため、ますます人気が高まってきています。また、デザインの説明やアイデアの売り込みの際にも、そのデザインの価値をより深く理解してもらうのに最適です。UXPinにはインタラクティブなプロトタイプ機能が搭載されており、それを利用することで、以下のことが実現します：

• 製品がどのようなものになるかを十分に理解し、体験することができるようにするための、エンジニアやステークホルダーに作成したデザインのよりインタラクティブな体験を提供
• ユーザーがどのようにデザインを使用するかについて、より正確なフィードバックとデータを収集するための、実際のユーザーでの製品テスト
• ステート、変数、高度なインタラクションなどの機能を用いて、完成品と同様の機能を持つプロトタイプのデザイン
• デザインに名前や画像などを追加してくれる自動生成機能を使って、プロトタイプをより完成品に近づけるための詳細の追加
• デザインの良さを最大限に引き出すための、ボタンのホバー（hover）や条件付きナビゲーションフローなどのインタラクティブなコンポーネントの作成

  UXPinがあれば、プロトタイプが静的でクリックもできないデザインにはなりません。その代わり、完成品の外観、UX、機能が正確に反映された動きのあるプロトタイプを作成することができます。  

４．ステークホルダーがデザインを理解できる 

ご存知のように、製品をデザインする際には、ステークホルダーや関係者とも足並みを確実に揃えるのが不可欠です。そのため、新しいアイデアのブレストからデザインのテストに至るまで、デザインプロセス全体を通じて彼らを関わらせることが重要です。

上記のことから、UXデザインツールで必要なことは：

• ステークホルダーがインタラクティブな体験を通じて、プロトタイプやデザイン・コンポーネントを体験・試用することができ、それによって、デザインとそれが完成したときにどのように展開するかがわかりやすくなる。
• デザインプロセスを通じて、ステークホルダーがデザインにフィードバックを残すことができる。ちなみにUXPinでは、comment機能から他の人がデザインにコメントや質問でき、その場にいなくても、フィードバックへの返答が簡単にできる。

５．デザイナーとデベロッパーのコミュニケーションをサポートする

  デザイナーは、デザインを作るだけでなく、デベロッパーに完成品を作る方法を伝える役割も担っています。特に、リモートワークが主流となりつつある現代では、コミュニケーションは非常に重要であるため、適切なコミュニケーションツールの導入は、デザインプロセスにおいて不可欠な要素となっています。  

そこで、UXPinのようなツールを使うと、デベロッパーとのコミュニケーションと理解を深めることができます。UXPinのMergeテクノロジーでは、Git レポジトリや Storybook との統合も可能で、デザイナーがデベロッパーと同じ技術を使うことで、２つのチーム間で一貫性を生み出せるようになります。

最終的に、Mergeはデベロッパーとデザイナーの両方が使えるツールであるため、複雑な問題が発生することなく、両者が一緒になってプロジェクトを進めることができるでしょう。

６．プラグインの購入が必要ないツール

  筆者のように、その機能の多くが有料であることに製品購入後に気付くと、イライラすることがあります。ただ残念ながら、市販のデザインツールには、そのようなものがけっこうあるんです。

世の中の多くのデザインソフトには、必要な機能が不足しており、そのため、デザイナーが製品を完成させるためにプラグインを購入しなければならないケースも珍しくありません。

UXPin を使う場合、ありがたいことに必要な機能はすべて組み込まれていて追加費用はかからないので、プラグインの購入は不要です。つまり、UXPinにはデザインを最初から最後まで行うために必要なものがすべて備わっているのです。

７．MacとWindowsの両方で利用でき、クラウドベースである

イメージベースのデザインツールはウェブベースでであるため、デザイナーはさまざまなデバイスを使用する際に、互換性の問題やさまざまな制限にぶつかることがあります。そこで、Mac、Windows、クラウドベースなど、複数のシステムで利用できる互換性のあるデザインツールを見つけることが重要になってきます。

UXPinはウェブ上だけでなく、デスクトップアプリケーションからも使えます。さらにいくつかのプラグイン機能を搭載しいるため、Figmaをお使いの方はデザインをUXPinにインポートすることで、より多くの機能を利用できるようになり、システム間での使い勝手もよくなります。

UXPinは、Finder/Explorerへのダウンロードも、ウェブベースのバージョンの使用も可能であり、ダウンロードしたソフトウェアを使うことで、オフラインの状態でもプロジェクトに取り組むことができる機能が追加されます。

さらに、UXPin はモバイルアプリのビューも備えていることから、モバイルデバイス用のプロトタイプを作成してテストすることができ、アプリの UX についての評価ができるようになります。

UXPin で UXデザインプロセスを実践しよう

  UXPinはすべてのデザイナーにとって、まさに「１つで全てをこなせるソリューション」です。様々なショートカットキーもあり、デザインを拡大縮小したり、インタラクティブなプロトタイピングを行うなど必要な機能はすべて備わっています。

UXPinには充実した連携機能も備えており、リモートで仕事をしているかどうかにかかわらず、全員がチームとシームレスに協働できます。さらに、デバイスやシステムに関係なく利用できるため、チームメンバー間の互換性の問題もありません。  

シンプルなデザインから複雑なシステムまで、UXPin にはプロジェクトの最初から最後まで必要な機能がすべて備わっています。UXPin の無料お試しでぜひご体験下さい。  

The post 自分に合ったUX ツール の選び方とは？注目すべき７つの機能 appeared first on Studio by UXPin.

UXPin とMergeの違いは何だろうと思われるかもしれません。そして、どちらが自身のデザイン チームに適しているのでしょうか？  

簡単に言うと、UXPinはデザインハンドオフを含む製品デザインプロセス全体を一緒にカバーするオールインワンデザイン「ソフトウェア」で、MergeはUXPinにインタラクティブなコンポーネントを持ち込み、それを使ってプロトタイプをデザインできるようにする「技術」です。  

  つまるところ、Mergeテクノロジーは、デザイナーとデベロッパーの両方が「信頼できる唯一の情報源（Single source of truth）」を共有して一貫したUIを作成できる、より協力的で迅速なデザイン プロセスにつながります。UXPin Merge の詳細はぜひこちらでご確認ください。  

画像ベースと コードベース のデザインツール

  UXPinとMergeについて見ていく前に、画像ベースとコードベースのデザインツールの違いを把握しておくことが重要です。  

コードベースのデザインツールと聞くと、デザイナーはデベロッパー向けのツールだと思ったり、コードを学ばなければ使えないと思ったりしますが、どちらも間違いです。  

コードベースとは、UXデザイナーがキャンバス上に作成したものを、ツールがどのようにレンダリングするかということを指し、従来の画像ベースのツールは静的なベクタグラフィックスを生成しますが、コードベースのツールはコードをレンダリングします。  

詳しく読む： Figmaのデザインをインタラクティブなプロトタイプにしよう

コードベースのツールには、インタラクティブ性のためのより多いオプションが大体あることを除けば、大抵はデザイナーはこの2つのインターフェースを比べても大きな違いを感じることはないでしょう。  

たとえば、画像ベースのツールを使って入力フィールドを作成した場合、それはキャンバス上のブロックに過ぎません。UXPinでは、入力は最終的な製品と同じように動作し、ユーザーが入力欄をクリックするとカーソルが表示され、テキストを入力することができます。そしてデザイナーは、UXPinのさまざまな機能によって以下ができるようになります：  

• 入力の有効性確認
• 文字、数字、記号などのパスワードの条件チェック
• ウェルカムメッセージの個別化
• ユーザープロファイルページの作成

UXPinとは

  UXPinは、高度なプロトタイプテストのためのエンドツーエンドのコードベースのデザインツールであり、デザイナーは、最終製品のインタラクションや機能を正確に再現するプロトタイプを作成できます。

UXPinは、他のデザインツールと同じように見えますが、UXワークフローやコラボレーション、プロトタイプ、およびテストを強化する機能を備えています。  

以下は主な機能の一部です：  

• 変数
• インタラクションと条件付きインタラクション
• エクスプレッション
• オートレイアウト
• デザインシステム
• コメント

変数

  変数によって、デザイナーは入力フィールドからデータを取得し、プロトタイプの他の場所で使うことができます。この例は、サインアップフォームのデモで、ユーザーのメールアドレスを取得し、確認ページを個別化する方法が表示されています。

インタラクションと条件付きインタラクション

UXPinで、プロトタイプへのインタラクションの追加が数回のクリックで簡単にできるようになり、デザイナーは、最終製品のインタラクティビティを正確に模倣するトリガー、アクション、アニメーションの豊富なリストを利用できます。

条件付きインタラクションは、Javascriptがデベロッパーに提供するのと似たような感じで、【if-then】と【if-else】の条件によって、インタラクションをさらに高いレベルに引き上げることができます。

デモのサインアップフォームに戻り、条件付きインタラクションを使って、ユーザーがメールアドレスとパスワードのフィールドを空白にした場合にエラーメッセージを表示する方法を見てみましょう。ユーザーが入力の条件を満たしたときのみ、確認ページに進むことができます。

エクスプレッション

エクスプレッションで、プロトタイプは次のレベルに上がり、それによってデザイナーはコードと同等のダイナミックなUX（ユーザーエクスペリエンス）を作成できるようになります。サインアップフォームのプロトタイプでは、メールと入力フィールドの条件を定めるために、以下のような【エクスプレッション】を使います：

• メールアドレス：@記号と、.com や.co.jp などの「ドメイン拡張子」が必要
• パスワード：8文字以上

デザイナーは、コンポーネントやプロトタイプに好きなだけエクスプレッションを追加し、それによってコードと見分けのつかないような結果が得られます。

オートレイアウト

多くのデザインツールにオートレイアウトがありますが、UXPinのオートレイアウトは、Flexboxの命名とプロパティを使って現実的な期待値を作り出し、デザイナーとデベロッパーの提携を向上します。

デザイナーは、オートレイアウトを使ってデザインのサイズ変更やフィット、配分、塗りつぶしを自動的に行い、それによって、手動で行ったら時間を食うような作業はなくなります。  

さらに読む：UXPinのオートレイアウト機能をご紹介  

デザインシステム

  デザインシステムは、文書化や権限の設定など、ゼロからデザインシステムを構築するための素晴らしい機能であり、これによってデザイナーは、デザインシステムで再利用可能なコンポーネントのライブラリの作成や、組織全体でのその共有ができるようになります。  

UXPinは、デザインシステムを以下のように自動的に分類します：  

• 色
• タイポグラフィ
• アセット
• UI（ユーザーインターフェース）のパターン

  左側のサイドバーにはライブラリ全体が表示されるので、デザイナーは要素をドラッグ＆ドロップするだけでUI（ユーザーインターフェース）を構築することができます。 

また、UXPinにはOS（オペレーティングシステム）、マテリアルデザイン、ブートストラップ、ファンデーション、ユーザーフローの5つの内蔵されたデザインライブラリがあり、チームはプロトタイプやMVP（Minimum Viable Product）をサッと作成して、デザインプロセスのあらゆる段階でアイデアや仮説を検証することができます。  

コメント

コメント機能によって、デザインチームやステークホルダーは、連携やフィードバックの共有、タスクの割り当て、デザインプロジェクトやプロトタイプのプレビューへのコンテキストの提供ができるようになります。

UXPinでは、誰でも【プレビューへのコメント】機能を使えるため、ステークホルダーやデベロッパーなどのUXPinのキャンバスへのアクセスが不要なユーザーのための、追加でのユーザー購入が必要ありません。また、デザイナーはデザインをパスワードで保護することができるので、許可された人しかデザインを見ることができません。  

UXPinの用途

  デザインチームは、デザインプロセスのあらゆる段階でUXPinを使います。高忠実度のプロトタイプはUXPinの最大の特徴ですが、既製のフォームを使うことでそれが優れたワイヤーフレーム作成ツールになります。  

以下は、画像ベースの競合他社よりもUXPinが一歩先行く一例です：  

• インタラクティブなプロトタイプ
• IFTTT（イフト）によるAPI 統合
• 高速なデザインイテレーション
• デザインチーム、エンジニア、ステークホルダーとの連携
• よりスムーズなデザインハンドオフ
• ゼロからのデザインシステム構築と拡張
• UXPinの機能に関する情報やチュートリアルを提供するUXPinのドキュメント
• UXPinの機能を実際に使用したインタラクティブなパターンとアプリの例

  コードベースのデザインがどのようなものかご覧になりませんか？今すぐ無料トライアルにサインアップして、UXPinでインタラクティブなプロトタイプ”第１号”を作成しましょう。  

UXPin Mergeとは

  UXPin Mergeは、レポジトリからUXPinのデザインエディタにコードコンポーネントを同期させる技術であり、組織は Merge をオープンソースのライブラリと一緒に使ったり、製品のデザインシステムをインポートしたりすることができます。

デザイナーは、このようなコードコンポーネントをビルディングブロックのように使い、ドラッグ＆ドロップで UI を構築しますが、Mergeのコンポーネントには、インタラクション、ステート、カラー、タイポグラフィー、サイジングなど、デザイン システムで確定されたプロパティが含まれます。  

そのプロパティはUXPinのプロパティパネルに表示され、そこでデザイナーはプロトタイピングの要件に応じて調整を行うことができます。  

この例では、MUIのデザインシステムで確定されたプロパティを使って、色、サイズ、変数を変更し、アイコンを追加する方法を説明しています。  

Merge はこのようなプロパティをレポジトリから取り出し、変更があれば自動的に同期します。たとえば、デザイン システム チームが原色を青から赤に変更した場合、Merge はその更新を検出し、デザイン チームにその新しいリリースを通知します。  

さらに、バージョン管理により、デザイナーは最新のリリースに切り替えるタイミングを選択でき、いつでも初期のバージョンに戻すことができます。  

UXPin Mergeでデザインシステムを同期させる方法

  UXPin Mergeでデザインシステムを同期させるには、以下の３つの方法があります：

• Git統合：Reactのコンポーネントライブラリのみ対象
• Storybook統合：React、Angular、Ember、VueなどのStorybookのライブラリ向け
• npm統合: npmレジストリで利用可能なオープンソースライブラリからコンポーネントをインポート

この 3 つの統合は、それぞれ異なるプロトタイプとチームのニーズに対応します。Git と Storybook の統合では、Merge 用のコンポーネントとレポジトリをセットアップするのに技術的な知識が必要ですが、UXPin はエンジニアのためにボイラープレートを提供し、当社の技術チームがセットアップ プロセスを指導します。  

Storybookは、エンジニアがコンポーネントを単独で構築し、プロトタイプを作成・テストしてからデザインチームのUXPinにプッシュできるため、プライベートのデザインシステムとしてはおそらくベストな選択肢でしょう。  

npm 統合と Mergeコンポーネントマネージャー により、デザイナーはインポートするコンポーネントとプロパティをもっとコントロールできるようになります。デザイナーはデザイン システムのドキュメントに従うことができ、UI 要素をインポートするのにエンジニアを必要としません。  

Mergeの主な利点

  Merge の主な利点は、デザインと開発の間に「信頼できる唯一の情報源（Single source of truth）」を作成することです。デザイナーとエンジニアは同じレポジトリから同じコンポーネント ライブラリを使い、以下のようにしてシームレスなデザインハンドオフ プロセスを作成します。  

1. エンジニアは、ただコンポーネントライブラリをインポートする
2. UXPinがコンポーネントプロパティから生成するJSXの変更をコピーする
3. そして、デザインチームのプロトタイプに従って、最終製品を開発する

  この効率化されたワークフローは、以下のような多くの製品開発の効率化を生み出します：

• 高速プロトタイプ（Paypalは速さが８倍アップ）
• 市場投入の時間短縮
• ゼロからのデザインが不要
• フロントエンドのコーディングが全くまたは殆どない
• デザインドリフトがない
• UXとフロントエンドの負債の減少
• 少ないコミュニケーションとドキュメントでのシームレスなハンドオフ
• 完全なまとまりと一貫性
• ステークホルダーからのより質の高いフィードバック
• テスト中の有意義で実用的な結果
• 質の高い結果　=　よりよいUX（ユーザーエクスペリエンス）

UXPinからMergeへ – 拡張性の高いデザインソリューション

  UXPinは、成熟期のあらゆる段階でワークフローをサポートするツールと機能を備えた、拡張性のあるデザインソリューションを企業に提供します。

UXPin Standardは、デザインシステムを使っていないスタートアップや企業にとってとてもいいソリューションであり、デザイナーは、正確なテストのために、完全に機能するインタラクティブプロトタイプやMVPを構築することができます。  

UXPin Standardには、UXPinのデザインシステム機能も含まれているため、デザイナーは製品のコンポーネント、カラーパレット、タイポグラフィー、アセットの保存・共有ができます。  

Mergeでの拡張

  急成長中のスタートアップ企業であれ、多国籍企業であれ、Merge で企業のデザイン業務の拡張が可能になります。  

FinTechの大手であるPayPalと大手ソフトウェア開発会社のIressは、UXPin Mergeに切り替えることでワークフローの最適化と連携が強化されたことを経験しています。

企業レベルでは、Mergeには製品開発チーム全体にわたって「信頼できる唯一の情報源（Single source of truth）」があるため、チームがより速やかに行動できるようになります。デザイナーとエンジニアが同じ言語で話し、同じ制約の中で作業するため、摩擦が少なく、より良い連携が可能になるのです。

Merge のデザイナーが UXPin でボタンなどの UI コンポーネントを作成する際に使うのは、エンジニアが最終製品を開発するためにレポジトリから取得するのとまったく同じボタンか何かです。  

また、筆者たちはMerge がスタートアップ段階の企業をどのようにサポートしているかも見てきました。例えば、スタートアップ企業である TeamPassword には UX チームがないため、エンジニアはプロトタイピングとテストに UXPin Merge を使っています。また、Merge はドラッグ＆ドロップの環境を作るので、従来のデザインツールに比べ、学習曲線が大幅に短縮されます。  

TeamPassword のエンジニアは、プログラミングしたコンポーネントを使って UXPin でプロトタイプを作成するため、テスト、変更、イテレーションを速やかに行うことができます!  

Merge のパワーでプロトタイピングとテストを次のレベルへステップアップしませんか。詳細およびアクセス要求方法については、Mergeのページをぜひご覧ください。

The post UXPinとMergeの違いをわかりやすく解説！ appeared first on Studio by UXPin.

  UXPinの npm統合 があれば、デザイナーはnpmコンポーネントライブラリをインポートして、完全に機能するプロトタイプを構築することができ、このような忠実度の高いプロトタイプにより、従来のベクターベースのデザインツールでは実現できなかった特徴やインタラクション、機能をテストすることができます。

UXPinの npm統合 とは

最初に、当社のnpm 統合は革新的なテクノロジーの最新のイテレーションであることから、まずはUXPin Mergeの理解が重要です。

Mergeでは、デザインシステムのコンポーネントライブラリをGitレポジトリまたはStorybookからUXPinのデザインエディタに同期できるので、デザイナーはデザインシステムから来る完全にインタラクティブなコンポーネントを使ってプロトタイプを作成することができます。

このコンポーネント駆動型のプロトタイピングにより、デザイナーとエンジニアが同じデザインシステムで作業する信頼できる唯一の情報源（Single source of truth）ができ、レポジトリへの変更は自動的にUXPinに同期されるため、チームは常に最新バージョンを使うことができます。

npm統合 の入力

デザイナーが Merge を接続して同期する際、以前はエンジニアの助けが必要でしたが、UXPinの npm統合 があれば、デザイナー（またはDesignOpsがあれば）はコードを書かずに直観的なユーザー インターフェースを使用して統合を完了できます。

コンポーネント ライブラリが npm パッケージとして存在する場合、Merge でUXPin に接続し、プロトタイプ作成を始めるのに必要な UI 要素をインポートすることができます。MUIのようなオープンソースのデザインライブラリは、命名規則、ファイル構造、ドキュメントが一貫しているため、npm統合と相性抜群です。

MUIを使うメリット

MUIは、GoogleのマテリアルデザインUIをベースにしたReactコンポーネントライブラリです。包括的なデザインシステムで、UIの速やかな構築に必要なものがすべて揃っているため、プロトタイピングに最適です。

MUI チームは、コンポーネントが基本的なユーザビリティとアクセシビリティの問題を確実に解決できるように素晴らしい作業を行い、そのおかげですぐに使用できる製品開発ソリューションを提供できるのです。

MUIはテーマに対応しているので、デザインシステム構築の基盤として利用したり、製品のコンポーネントライブラリに新しいパターンを見つけようとする際に、UI要素のテストに包括的なライブラリを活用することができます。

MUI npmとUXPin Mergeの統合

MUIには、いくつかの画像ベースのデザインツール用のデザインキットがありますが、UXPinでは、エンジニアが開発に使用するのと同じ基本コンポーネントであるコンポーネントライブラリを完全にインポートすることができます。

UXPinのMUIコンポーネントは、他の静的コンポーネントとまったく同じように見えますが、コードと同じ忠実度と機能を備えており、UXPinはベクトルグラフィックではなく、バックエンドでHTML、CSS、Javascriptをレンダリングします。

UXPinにUIエレメントをインポートすると、MUIのコンポーネントステートもそのまま利用することができます。画像ベースのデザインツールでこの設定をしたことがあれば、基本的なステートを追加してプロパティパネルに割り当てるのがいかに時間がかかり、複雑かわかると思います。でもUXPinの npm統合 があれば、数回のクリックでこういったステートをインポートすることができるんです！

Merge Component Manager でのプロパティの割り当て

Merge Component Managerでは、各MUIコンポーネントのプロパティの設定ができます。

各コンポーネントにインポートするReact propsの選択には、MUIのドキュメントが使えます。このようなインポートされたReact propsは、UXPinの右側のプロパティパネルに表示され、個々のUI要素をカスタマイズすることができます。

例えば、MUIボタンには、以下のような色のプロパティがあります：

• 原色
• 二次色
• 成功
• エラー
• 情報
• 警告

このようなプロップをMerge Component Managerでインポートすると、プロパティパネルにドロップダウンが表示され、必要なカラーの選択ができます。同じことが、バリアント（付属、輪郭、テキスト）、サイズ（小、中、大）、およびその他の複数オプションのプロップにも当てはまります。

プロパティの種類は、二択、関数、文字列、配列、列挙など、いくつかあり、プロトタイピングのニーズに応じて、ドキュメントにあるMUI React propsをインポートすることができます。

UXPinとMUI npmパッケージの接続

ステップ1

UXPinのダッシュボードに移動し、【New Project（新規プロジェクト）】をクリックします。

ステップ2

プロジェクトに名前を付けて、【Create New Project（新規プロジェクト作成）】をクリックします。

ステップ3

【New prototype（新しいプロトタイプ）】をクリックし、UXPinのデザインキャンバスにプロジェクトを開きます。

ステップ4

左サイドバーの【Design System Libraries（デザインシステムライブラリ】タブの下部にあるドロップダウンをクリックし、【New library （新しいライブラリ）】をクリックします。

お使いのサイドバーや利用可能なライブラリは、例と異なる場合があります。

ステップ5

【Import React Components （Reactコンポーネントをインポートする）】を選択し、【Next（次へ）】をクリックします。

ステップ6

ライブラリに名前を付けます。この名前は純粋にあなたの参照のためであり、インポートに影響を与えません。

そして、MUI Materialのnpmページの【Install】にある、npmパッケージのレポジトリ名を取得する必要があります。npmからインストール内容をコピーして、【Library package name（ライブラリパッケージの名前】欄に貼り付けます。

記号の前をすべて削除して、@mui/materialのみ残し、他はデフォルトのままにして、【Next（次へ）】をクリックします。

MUIコンポーネント のインポート

npmの統合が完了すると、UXPinは自動的にキャンバスに誘導されます。さて、いよいよインポートしたいMUIコンポーネントの選択です。

ステップ1

左側のサイドバーから、【Open Merge Component Manager（Merge Component Managerを開く）】をクリックします。

Merge Component Manager は新しいタブで表示されます。

ステップ2

【Add new component（新しいコンポーネントを追加）】をクリックします。

ステップ3

インポートするコンポーネントの名前を入れます。

正しい命名規則は、MUIドキュメントのComponent APIに記載されています。MUIのコンポーネントは、スペース無しの「キャメルケース」を使用しています。最初の文字は常に大文字にするので、例えば、ボトムナビゲーションは 「BottomNavigation」 となります。

最初のコンポーネントとしてMUIの【Button（ボタン）】をインポートし、【Inputs（インプット）】という新しいカテゴリに追加してみましょう。デザイナーとエンジニアが同じ参照ポイントを持てるように、MUIのドキュメントと同じカテゴリの使用をお勧めします。

一度のインポートで複数の部品を追加できるので、ステップ2と3を繰り返す手間が省けます。   Import Components（コンポーネントをインポートする）】をクリックします。

ステップ4

右上の【Publish Changes（変更を公開）】をクリックすると、インポート処理が初期化されます。

新しいコンポーネントに対して初めて行う場合、1～2分かかるかもしれません。

ステップ5

インポートが完了したら、【Refresh Library（ライブラリを更新）】をクリックして、プロジェクトライブラリの変更内容を更新します。

この手順を順を追って見ていくと、左サイドバーにカテゴリー（Inputs）と最初のコンポーネント（Button）があることがわかると思います。

ステップ6

【Button（ボタン）】をクリックして、プロパティの追加を開始します。このようなReactプロップは、MUIのドキュメント【Component API（コンポーネントAPI） > Button（ボタン）】で確認できます。

Merge Component Manager でコンポーネント プロパティの追加

ドキュメントにあるReact propsを使って、MUIボタンのプロパティをいくつか追加してみましょう。

ボタンのラベル：ステップ1

MUIのボタンラベル（またはコンテンツ）は、【children】というReactプロパティを使用します。

• プロパティ名：”children “と入力（propsは必ず小文字を使用）。
• 表示名：これは参考までにですが、デザイナーやエンジニアが使うような説明的なものです。ちなみに筆者達は “Label（ラベル） “にしました。
• 説明文：デザイナー向けの簡単な説明や指示を追加します。筆者たちは「Buttons’ label（ボタンのラベル）またはCTA（Call To Action）」を使います。
• プロパティの種類：MUIのドキュメントにあるように「node（ノード）」
• プロパティコントロール：“textfield”（注：このフィールドは、プロパティの種類を選択すると表示され、選択内容によって異なります。）
• デフォルトの値：お好みでどうぞ。ここでは 【Button（ボタン）】とします（注：MUIはボタンラベルを大文字で表記します）。

コンポーネントのプロパティが完成したら、コンポーネントのプレビューが表示され、好みに応じて変更されることがわかります。

ボタンのラベル：ステップ2

すべての項目を入力したら、【Add property（プロパティを追加 ）】をクリックします。

その後、【Save changes（変更を保存）】します。

最後に、【Publish library changes（ライブラリの変更）】を公開します。

UXPinによるコンポーネント駆動型プロトタイピング

必要なMUIコンポーネントをインポートしたら、UXPinでのプロトタイピングは、ドラッグ＆ドロップでレイアウトを構築するのと同じくらい簡単です。ちなみに筆者たちは、3つのMUIコンポーネントを使用して、このシンプルなメールサインアップフォームを1分もかからず作成しました。

MUI コンポーネント を選択すると、Merge Component Manager で作成したプロパティが右側のプロパティパネルに表示されます。

UXPinのコンポーネント駆動型プロトタイピングの可能性を発見する準備はできましたか？MUIの npm 統合 （またはnpmで利用可能なその他のオープンソースコンポーネントライブラリ）をぜひお試しください。

The post npm統合 – MUIコンポーネントのUXPinへ導入のご案内 appeared first on Studio by UXPin.

  マテリアルデザインは、最も人気のあるデザインシステムの一つです。Android端末をお持ちの方は、毎日Material Designを使用していることでしょう。多くの企業が、モバイルおよびウェブアプリケーションを構築するための基盤として、マテリアルデザインシステムを使用しています。

このシステムの包括的なコンポーネントライブラリと、マテリアルアイコン（現在はマテリアルシンボル）を含むリソースには、組織やスタートアップ企業がゼロからデザインすることなく製品を無限に拡張するための構成要素があります。

本記事では、次の製品開発プロジェクトで使用できるマテリアルシンボルやその他のマテリアルリソースについて見ていきます。

UXPinの各プランには、マテリアルデザインのUIとアイコンが標準装備されています。無料トライアルにサインアップして、今日からUXPinとマテリアルデザインで美しいアプリを構築しましょう。

マテリアルデザインとは

マテリアルデザインは、Googleが開発したデザインライブラリで、UIコンポーネント、アイコン、タイポグラフィなどが含まれます。すべてのマテリアルコンポーネントには、実装、使用方法、構造、動作などのガイドラインが含まれており、デザイナーやエンジニアが高品質なユーザー体験を提供しながら最高の成果をあげられるようサポートします。

Googleは、2014年のGoogle I/O会議でマテリアルデザインの最初のバージョンを発表しました。2021年5月、GoogleはDynamic Color、折りたたみ可能なデバイスコンポーネント、デザイントークンなどの注目すべき機能を含むMateri Design 3（M3）を発表しました。

マテリアルシンボルの発表

マテリアルデザインの最もワクワクするアップデートの1つは、5つのスタイルで2,000以上のオープンソースのアイコンを含む、カスタマイズ可能なアイコンセットである「マテリアルシンボル」の発表でした。お気に入りのマテリアルアイコンをすべて見つけることができますが、製品やブランドの要件に合わせて、より柔軟にカスタマイズできるようになりました。

マテリアルアイコンはまだ利用可能ですが、シンボルのようなカスタマイズはできません。そしてシンボルでは4つの可変オプションがありますが、サイズと密度しか調整できません。

マテリアルアイコンセット

Googleは、シンボルのカタログより少ないとはいえ、旧マテリアルアイコンを残しており、アイコンは、【Outlined】、【Filled】、【Founded】、【Sharp】、【Two-tone】の5つのスタイルで利用できます。

マテリアルシンボル：最新情報

マテリアルアイコンは、Google Fontsの下に移され、【Outlined】、【Rounded】、【Sharp】の3つのスタイルで可変のアイコンセットがあります。また、デザイナーは、以下の4つの変数または軸でアイコンセットをカスタマイズすることができます：

• 塗り：塗りつぶしまたは塗りつぶしなしの外観
• 太さ：シンボルの線を100から700のウェイトで確定
• グレード：強調を伝えるのにシンボルの太さを細かく調整
• 光学サイズ：アイコンのサイズを20、24、40、48ピクセルに設定可能

可変方式では、エンジニアは複数のバリエーションを複数のファイルではなく、1つのフォント（またはアイコン）に保存することができます。ファイルサイズとファイル数を減らすことで、エンジニアにパフォーマンスの向上と管理すべきアセットの削減がもたらされるのです。

3種のスタイル

Googleは、ブランドのアイデンティティやUIデザインに合わせた3つの新しいスタイルの導入もしました。

• 輪郭：クリーンで軽やか。デザイナーは、製品のフォントを補完するのにアイコンの重さを調整することができる。
• 丸み： 曲線の美しさは、丸みを帯びたロゴと重厚なフォントと相性がいい。
• 鋭さ：直線的なエッジと90度のコーナーのスタイリングを持つUIにマッチするようにデザインされている。

マテリアルアイコンを作成する

マテリアルシンボルの膨大なカタログの中から必要なアイコンを見つけられない場合、Googleは下記のようなカスタムアイコンをデザインするためのガイドラインを用意しています：

• デザイン原則：ユーザーにとって意味があり、役に立つ明確な図像を作成するためのベストプラクティス
• アイコンのサイズとレイアウト：デザインツールを使ってアイコンをデザインする際のグリッドサイズとレイアウトの設定方法
• グリッドとキーライン図：一貫したアイコンセットを作成するためのテクニック
• アイコンメトリクス：コーナー、ウェイト、ストローク、複雑さなど、アイコンのデザイン構造

このようなガイドラインに従うことで、マテリアルの包括的なアイコンセットを活かしながら、自身のブランドに関連するアイコンをいくつか追加することができます。

Googleのマテリアルアイコン＆シンボルの使用方法

デザイナーやエンジニアがマテリアルアイコンやシンボルを使用する方法はいくつかあります。

SVGまたはPNGをダウンロードする

アイコンとシンボルは、SVGまたはPNG形式でダウンロードすることができますが、パフォーマンスとカスタマイズの利点を考慮し、SVGを使用することをお勧めします。PNGファイルはサイズが大きく、デザイナーやエンジニアが編集したりサイズを変更するのがより複雑になります。

Googleでは、ダウンロード前にアイコンやシンボルをカスタマイズできるため、プロジェクトで使用する最終的なアセットが得られます。

CSS/CDN

マテリアルシンボルには、Google Fontsに使用するものと同様のウェブサイト設置用のCSSファイルがありますが、この方法は、ウェブサイトに追加のリクエストを行う必要があり、パフォーマンスに深刻な影響を与える可能性があるという問題があります。

なので、複数のマテリアルシンボルを使用する場合は、別の方法で設置した方がよいでしょう。

運営システムとフレームワーク

マテリアルアイコンとシンボルには、プロジェクトのアセットとしてインストールするためのAndroidとiOS用のダウンロードがあり、実装のためのコードスニペットも用意されています。マテリアルデザインには、Flutter（Googleが開発したプログラミング言語）とAngularの説明書があり、Reactの説明は、MUIのドキュメントに掲載されています。

デザイナーの使用方法

大抵のデザインツールには、マテリアルアイコン用のプラグインやエクステンションがありますが、UXPinをご利用の場合、すべてのプランにマテリアル アイコン セットが標準装備されています。

また、自分で作成したSVGアイコンをインポートしてUXPinで編集し、デザインシステムに保存して他のチームメンバーと共有することも可能です。

マテリアルアイコンやシンボルをタイポグラフィと一緒に使う

GoogleのMaterial 3（M3）ドキュメントには、アイコンとタイポグラフィの組み合わせに関するヒントとベストプラクティスが紹介されています。

ウェイト

アイコンとテキストに別々のウェイトを絶対に使わないでください。 Googleは、こういったアセットをマテリアルシンボルのウェイトカスタマイズ変数と簡単に組み合わせられるようにしています。クリーンで一貫した美しさを実現させるべく、確実にフォントのウェイトとアイコンのウェイトを常に一致させましょう。

（正）フォントのウェイト

（誤）フォントのウェイト

サイズと配置

アイコンのサイズと配置は、常にテキストと一致させましょう。ユーザーは両方を読んで、それらが関連していると認識できなければいけません。Googleは、デザイナーに「シンボルのベースラインを、文字サイズの約11.5%にシフトダウンする」ことを推奨しており、このやり方でアイコンやテキストが統一され、整列した状態に保たれます。

マテリアルアイコンのアクセシビリティ

Googleは、アイコンのアクセシビリティについて、デザイナーに簡潔ながら有益なアドバイスを提供しています。デザイナーは、特にナビゲーションのために、常にアイコンに有意義でよく説明されたラベルを使わなければいけません。テキストラベルのないアイコンは、ユーザーにとってあいまいで混乱を招く可能性がありますからね。また、スクリーンリーダーやその他の補助的な技術のための「代替（Alt）テキスト」も含めなければいけません。

アイコンは、対象サイズも重要な要素です。指の大きな人や手の不自由な人は、間違ってアイコンのボタンを押してしまい、混乱やフラストレーションの原因になりかねません。

Googleは、デザイナーに最小ターゲットサイズ48ピクセルの使用を推奨しています。20ピクセルのアイコンを使用する場合は、ターゲット領域の合計が48ピクセルになるよう、十分なパディングを設けましょう。

UXPinでマテリアルデザインのアイコンを使ってデザインする

マテリアルアイコンを含め、UXPinで予めインストールされた複数のアイコンセットがあれば、デザイナーはプラグインのインストールや、外部ファイルのアップロードが必要ありません。以下のように、プロジェクトへのアイコン追加は簡単です。

ステップ1：アイコン要素をクリック

キャンバスの左側にあるクイックツールパネルで、アイコン要素をクリックします。または、キーボードショートカットの【OPTION】+【I】（Macの場合）や【ALT】+【I】（PCの場合）でもできます。

ステップ2：キャンバスにアイコンを描く

アイコンを表示させたい場所をクリックして、四角くドラッグします。【SHIFT】キーを押しながらドラッグすると、幅と高さが等しくなります。

ステップ3：アイコンのプロパティパネル

アイコンを描画すると、右側のプロパティパネルにアイコンプロパティパネルが表示され、マテリアルアイコンや、Fonts Awesome、Retina Icons、UXPinセットなど、他のセットのいずれかを選択することができます。

ステップ4：アイコンの選択

利用可能なマテリアルアイコンをスクロールして、必要なものを探します。プロパティパネルで（キャンバス上でアイコンを選択した状態で）任意のアイコンをクリックし、選択状態にします。

ステップ5：アイコンのプロパティを調整

アイコンを選択したら、【アイコン】セクションの上にあるプロパティパネルを使用してスタイルを設定することができます。カラーピッカーの下には、マテリアルデザインを含む利用可能なデザインシステムのドロップダウンがあるので、デザイナーが他の場所からHEXコードをコピー＆ペーストする必要はありません。

ステップ6：インタラクションの追加

プロパティパネルの上部には、「インタラクション」があり、【インタラクション】、【アニメーション】、【トランジション】などを追加して、アイコンをインタラクティブにすることができます。例えば、このユーザーアイコンを使って、パーソナライズされたプロフィールページを開くとします。

UXPinのインタラクティブなUIパターンとアプリの例で、UXPinの機能の仕組みやコードベースのデザインでできることをご覧ください。

UXPinでプロトタイピングとテストを改善しよう

マテリアルアイコンは、UXPinで作業する際の1つの利便性に過ぎませんが、デザイナーが画像ベースのデザインツールとして、より機能的で忠実なプロトタイプをより早く構築できるようにすることが我々の目標です。

UXPinの内蔵デザインライブラリのいずれかを使えば、デザイナーは要素をドラッグ＆ドロップして、インタラクティブなプロトタイプを数分で構築できます。ウェブサイトから企業やB2C製品のウェブおよびモバイルアプリケーションまで、あらゆるタイプのプロジェクトに対応できるよう、人気の高い5つのデザインライブラリを収録しました

UXPinのすべてのプランには、マテリアルデザイン、iOS、Bootstrap、Foundation、ユーザーフローが含まれており、それぞれのライブラリのインタラクティブな要素、カラー、テキストスタイル、アイコンが用意されています。

UXPinのデザインシステム機能では、デザイナーがゼロからデザインシステムを構築し、ライブラリをカラー、アセット、タイポグラフィ、コンポーネントに自動的に分類することができます。また、権限の設定や、デザイナーやエンジニアが従うべきドキュメントを含めることができます。

UXPinのコードベースのデザインツールを使用して、最終的な製品エクスペリエンスを正確に再現する、より優れたプロトタイプを構築しませんか？無料トライアルにサインアップして、UXPinを使用したデザインの可能性を是非ご覧ください。

The post マテリアルデザインのアイコン： Webとアプリデザインの構成要素 appeared first on Studio by UXPin.

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

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

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

ユーザー分析とは

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ユーザー分析の方法

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

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

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

定量的データ

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

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

定性的データ

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

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

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

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

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

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

1. ユーザーペルソナ

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

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

2. ユーザーストーリー

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

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

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

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

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

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

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

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

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

4. タスク分析

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

The post ユーザー分析 – 質の高いインサイトを得る方法 appeared first on Studio by UXPin.

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

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

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

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

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

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

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

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

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

データの更新

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

高度なアニメーション

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

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

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

アクセシビリティ機能

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

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

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

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

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

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

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

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

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

The post UXPinでより速いデザインのための9つのヒントと機能紹介 appeared first on Studio by UXPin.

UXデザイナーにとって、プロトタイピングとテストの段階というのは、常にチャレンジングなものです。 コードの忠実性と機能性がなければ、画像ベースのプロトタイプはユーザビリティテスト中に正確な結果を生み出しません。 多くの場合、デベロッパーへデザインの引き継ぎ中にデザインにズレが生じたりデベロッパーとの摩擦が起こります。

UXPinのようなコードベースのデザインツールでは、もうそれは起こりません。 デザイナーは、完全に開発された製品を正確に表す忠実度と機能性を備えた、実体感のあるプロトタイプを作成できます。 エクスペリエンスの個別化（パーソナライゼーション）、データの取得、機能的な申込みフォームの作成、パスワードの検証などもできます！

この記事では、ステート、変数、式、API、デザイナーが完全に機能するプロトタイプを作成するために使用できるコードのようなインタラクションなど、UXPinの高度な機能をいくつか見ていきます。

  メジャーなデザインツールは大抵、インタラクションやアニメーションなどの素晴らしい機能を持っていますが、プロトタイプの忠実度や機能を強化するようなことは何もしません。

こういった画像ベースのツールは、静的なアートボードを組み合わせてプロトタイプを作成しますが、完成品がコードである場合はあまり意味がありません。 では、ユーザー入力、オンボーディングフロー、またはチェックアウトエクスペリエンスをどのようにテストするのでしょうか？

静的なアートボードの代わりに、UXPinはHTMLやCSS、Javascriptをレンダリングします。 したがって、フォーム入力などの要素はコードと同じように機能します。 デザイナーは、変数を使用してデータを取得し、それをウェルカムシーケンスの個別化やユーザーのアカウントページへの入力など、アプリケーションのどこか他の場所で使用できます。

式を使用すると、申込時にユーザー名とパスワードを設定し、ユーザーにそれらのクレデンシャルを再入力してアプリケーションにログインするように求めることで、プロトタイプを次のレベルに引き上げることができます。これは、アートボードを使用して複製することは不可能な標準シーケンスです。

画像ベースのツールでは、要素の状態を変更するような単純なことですらできません。デザイナーは、UXPinが数回クリックするだけで実現できるエクスペリエンスを模擬実験するのに、多くの場合、GIF、ビデオ、または複数のアートボードを使用しなければいけません。

プロトタイプを強化するための高度なコードベースの機能8つ

コードベースのデザインツールと画像ベースのデザインツールの基本的な違いがわかったところで、今度はUXPinの8つの高度な機能が、プロトタイピングをどのように強化するかを詳しく見ていきましょう。

1）変数を使用した実際のデータの処理

変数によって、プロトタイプは、ユーザーによるデータまたは動作を操作するといった、本物のプロダクトエクスペリエンスのように感じられます。

たとえば、ユーザーの名前やメールアドレスなどの情報を収集し、それを「ようこそ◯ジョン、お申込み頂きありがとうございます！」という挨拶メッセージなどの別のページに回すことができます。

キャメルケースかアンダースコアの名前を使用して、Javascriptの場合とまったく同じようにUXPin変数を設定します。 したがって、userNameまたはuser_nameで申込みフォームの名前入力はできるでしょう。 その際は、エンジニアと同じ名づけの規則を使用して、デザインと開発の間に一貫性を持たせることをお勧めします。

UXPinの変数に関して詳しく知りたい方はこちら  

2) ステートを使ったコードのようなインタラクション

ステートは、デベロッパーにとって重要な考慮事項です。 UIの読み込み時に各コンポーネントのデフォルト状態を設定しなければならず、それでシステムの変更またはユーザインタラクションに基づいてプログラムが変更されます。

UXPinのプロトタイプは、ユーザーがホバー、クリック/タップ、スワイプなどをトリガーにUIを変化させることで、実体型のインタラクティブなステートを実現します。
最も一般的なステートの例は、ボタンのデフォルト、ホバー、アクティブ、および無効の状態です。

ただし、コンテンツカルーセル、ドロップダウンナビゲーション、濃淡モード間のインターフェースの切り替えなど、より複雑な操作に状態を使用することもできます。

３）条件付インタラクション

条件付インタラクションで、デザイナーはJavascriptのような「if-then文」や「if-else文」などの条件を設定して情報を有効化できます。

たとえば、if-thenの条件付インタラクションでは、ユーザーが有効な電子メール形式（@およびドメイン拡張子を含む）を入力したかどうかを確認したり、アカウントの作成時にパスワード（文字の包含/除外、長さなど）を確認したりできます。 入力情報がすべて正しければ、ユーザーは次の画面に進むか、ログインできます。

if-elseの条件を使用すると、デザイナーは、ユーザーがif-thenの要件を満たさない場合に何が起こるかをプログラムできます。たとえば、ユーザーが申込みフォームに正しく入力するまで、ボタンの状態を無効に設定したりできます。

４）式

式（Javascriptの基本的な関数）を使うと、デザイナーは、高度なフォームの有効化や機能的なショッピングカートのような計算コンポーネントの構築など、UXPinプロトタイプをさらに拡張できます。

UXPinでは、以下を使用して式を記述できます。

• 数字
• 文字列
• 変数
• 要素の内容
• 機能（数値、テキスト、日付、正規表現）
• ブール値

テキストベースのExpressionの典型的な使用例として、入力変数を使用して人の名前を確実に大文字にすることが挙げられます。上記の申込みフォームに戻ってみましょう。ユーザーが名前を小文字のjohnで入力し、userName変数を使用してその入力をキャプチャしたと仮定します。 ジョンの名前の最初の文字を大文字にするには、capitalize(“userName”）と記述します。

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

ウェブサイトのデザインでもアプリケーションのデザインでも、スクロールはユーザーエクスペリエンスの重要な要素です。 数回クリックするだけで、デザイナーは水平（横）か垂直（縦）のスクロールをどのコンテンツにも設定できます。

補足– UXPinのコンテンツとデータ機能を使用すると、JSON、CSV、GoogleスプレッドシートやUnsplashの実際のデータをワンクリックで要素に入力できます。 Match Content by Layer Nameを使ってキーワード（写真、日付、時刻、ログインなど）を認識し、関連するコンテンツをフィールドに入力することもできます。

６）APIを使って実際の製品と通信する

UXPinのコードベースのデザインツールのもう1つの利点は、第三者のサービスやアプリケーションに対してAPIリクエスト（GETまたはPOST）を実行できることです。 GoogleスプレッドシートやデータベースからデータをPOSTまたはGETするようなものです。 この機能は、家庭用照明システムなどのスマートデバイスを制御するアプリケーションのプロトタイピングに特に役立ちます。

APIをプロトタイプに組み込むと、機能が拡張され、ユーザビリティの参加者は実際のユーザーエクスペリエンスが得られます。

7) ビルトイン機能でアクセシビリティを向上させる

アクセシビリティは、時間がかかりますが、デザインプロセスの重要な部分です。 大抵のデザインツールでは、デザイナーが外部アプリケーションまたはプラグインを使用してUIをテストする必要があり、それによってUXワークフローに時間とコストが上乗せされます。

UXPinは、デザイナーがデザインキャンバスを離れることなくその場でUIをチェックできるように、コントラストチェッカーと色覚異常シミュレーターを備えた組み込みのアクセシビリティ機能を備えています。

8）ビルトインのコンポーネントライブラリを活用する

UXPinは、MUI統合を通じた、ビルトインデザインシステムとReactコンポーネントライブラリを特徴としています。 コンポーネントはすべて、UXPinのプロパティパネルを介して完全にカスタマイズ可能です。 デザイナーは、JSXに切り替えてReactコンポーネントを編集することもできます。

コードコンポーネントを使用してデザインすることの利点は、プロトタイプが完成品またはWebサイトと同じ忠実度と機能を備えているところです。 MUIのライブラリを基盤として使用して、独自のデザインシステムを構築および拡張することもできます。

UXPinのStorybook統合により、Shopify Polaris、Salesforce Lightning、IBMCarbonなどのパブリックStorybookデザインシステムを取り込むことができます。

UXPinのプロトタイピング機能を使用したサインアップフォームの作成

このシンプルなお申し込みフォームの例を使って、ステート、条件付インタラクション、インタラクティブ入力、ロジックなど、UXPinの高度なプロトタイピング機能の一部をご紹介します。

テンプレートには、お申し込みフォームと確認ページの2つのページがあります。お申し込みフォームには、次の3つの状態があります。

• ベース：静的なデフォルト状態
• 空欄：ユーザーが　[お申し込み]　ボタンをクリックし、いずれかの入力が空白の場合、エラーメッセージが赤で表示されます。 エラーには、「空欄にすることはできません」と表示されます。
• 誤り：ユーザーが@またはドメイン拡張子を使用していない場合、メールエラー「間違ったメールアドレス」と表示されます。 また、8文字未満の場合、「8文字以上である必要があります」というパスワードフィールドでのエラーも表示されます。  

確認ページにアクセスするには、ユーザーは次の4つの条件をすべて満たさなければいけません。

• メールが空欄であってはなりません
• パスワードが空欄であってはなりません
• メール入力が正規表現と一致します：^ \ w +（[-+。’] \ w +）* @ \ w +（[-。] \ w +）*\。\w +（[-。] \ w +）*
• パスワードが正規表現と一致します

ユーザーがこれらの条件を満たさない場合、UIは、関連する入力フィールドの下に【空欄】または【誤り】のエラーメッセージを表示します。

確認ページでは、電子メールフィールドの変数を使用して、確認メッセージを個別化します。 たとえば、example @ uxpin.comを使用した場合、メールのメッセージは「確認リンクをexample@uxpin.comに送信しました。メールをご確認ください。」となります。

このシンプルなメールのフォームを使うと、UXPinのコードベースのデザインツールでプロトタイピングの無限の可能性が段々わかってきます。この紹介が役に立った場合は、Calming Appテンプレートのウォークスルーをご覧ください。ここでは、コンポーネント、インタラクション、メディア（画像、ビデオ、オーディオ）、およびステートについて説明しています。

UXPinの無料トライアルでは、インタラクティブなUIパターンまたは4つのアプリの事例のいずれかを体験できます。 また、MUI統合を使用してMergeを味わうこともできます。14日間の無料トライアルにサインアップして、UXPinを使ったコードベースのデザインを体験してください。

The post UXPinでプロトタイピングスキルを極めよう appeared first on Studio by UXPin.