UXPinの新しいMUIライブラリ ：デザインをより速く
MUIは、フロントエンドエンジニアやデザイナーが製品の一貫性のあるユーザーインターフェースを作成するのに役立つ、トップクラスのReactコンポーネントライブラリの1つです。プロトタイピングの作業を大幅にスピードアップする、既製のビルディングブロックのコレクションを含んでいます。MUIをご体験されてみたい方は、UXPin MergeでMUI Core 5を試してみてください。
UXPin Merge の革命
UXPinとMergeテクノロジーは、インタラクション、ステート、および変数が組み込まれた実際のコードコンポーネントを使用するため、より速くプロトタイプを作成することができます。エンジニアは、React ベースのライブラリまたは Storybook を UXPin Merge と統合することもできます。そしてデザイナーは、エンジニアが開発した正確なビルディングブロックを使用してデジタル製品を作成し、必要に応じて、コンポーネントのルック＆フィールを大きく変えることが可能です。
UXPinのプロトタイプはただ完成品のように見えるだけでなく、実際に機能し動きます。デザイナーはユーザビリティテストにおいてより質の高いフィードバックを得ることができます。製品チームはステークホルダーの支持を得ることができ、デザインと開発のコラボレーションをより強固なものにします。つまり、製品チームのメンバー間の相互理解を得ることにつながります。
UXPinでは、ご自身が既に持っているReactコンポーネントをライブラリに同期して使用することも可能です。
UXPin Mergeでオープンソースライブラリを試してみる
Merge技術によってUXPinエディタに追加されたMUIを使用すると、プロトタイピングをさらに進化させることができます。開発者は、広く評価されているライブラリを使用できます。また、デザイナーもベスト UI プラクティスに従っているため安心することができます。
製品チームとしては、開発者のハンドオフの作業が改善されたことで、製品をより速くリリースし、デザインプロセスを効率的に行うことができます。
下準備のライブラリの中には、ボタン・ナビゲーションバー・コンテナ・テキストフィールドなど、あらかじめ組み込まれたコンポーネントだけでなく、色・タイポグラフィー・スペーシング・グリッドシステムなどといった調整可能なものが含まれています。
最も人気のあるライブラリは、BootstrapやMUIなどのオープンソースです。
UXPin Merge にMUIを追加した理由
MUIは、レスポンシブな製品を構築するための最も人気のあるReactコンポーネントライブラリの1つです。Googleが提唱するWebデザインの仕様であるMaterial Designをベースにしています。この仕様には、さまざまな要素が画面上でどのように表示されるべきかについてのヒントが含まれています。
MUIのクリエイターは、これらのガイドラインを基に、オープンソースのUIライブラリを作成しました。マテリアルUIのベストプラクティスに従ってユーザーインターフェイスを作成したい人は、誰でもMUIライブラリを使用することができ、時間を節約することができます。
プロトタイピングにMUIを使うメリット
UIコンポーネント、アイコン、スタイルの最大級のライブラリであるMUIで、デザイナー、開発者、プロダクトマネージャーにとって多くのメリットがあります。
ここでは、デザインにMUIを使用する5つの利点をご紹介します。
- 真のベストデザインプラクティスに基づく – 最も広く受け入れられているデザインガイドラインを中核として開発されたUIライブラリです。
- アクセシブルなUIライブラリ – マテリアルデザインのガイドラインに従っているため、MUIにはアクセシビリティが組み込まれており、あなたの製品を普遍的に使用することができます。
- カスタマイズ可能 – コードコンポーネントを適応させ、デザインに合わせて若干の調整をすることができます。
- デザインシステムの最適化に役立つ – その効率性により、アクセシブルで成熟したデザインシステムを短時間で実装するための優れたツールです。
- ドキュメントが充実している – 優れた、すぐに役立つコミュニティによって、アクセス可能なドキュメントが大量に提供されます。これらはすべて、明確でわかりやすい方法で書かれています。
MUIに基づいたプロトタイプの作成は、どのような規模のチームにとっても多くの利益をもたらします。UXPinはコードベースのプロトタイピングツールなので、MUIの機能を上手く活用すると、コードコンポーネントを使ったプロトタイピングのメリットをさらに得ることができます。これはコードベースのプロトタイピングツールだけがもつ魅力です。
コードによるプロトタイピングで、さらなる進化を遂げる
上記のメリット以外にも、プロトタイピングツールでReactベースのコードコンポーネントライブラリを使用することで、チームの作業効率を上げることができます。
- 真の機能的忠実度 – 実際のコードコンポーネントを使用してデザインするため、製品において実際の顧客エクスペリエンスをテストすることができます。
- より速く、リスクのない引き渡し – コンポーネントが完全にコード化されていれば、開発者は製品や機能をより速く、高品質で出荷することができます。
- 欲しいインタラクションをデザインする – ベクターベースのツールを使用した場合だと、インタラクションがあなたの考えていたものを十分に表現できていないことがよくあります。
動作の仕組み
MUIライブラリ は完全にインタラクティブなビルディングブロックを提供し、トライアルですぐにデザインすることができます。14日間の無料トライアルに登録し、UXPinのエディタでコードコンポーネントを使ったデザインの簡単さをぜひご体験ください。
トライアル版MUIへのアクセス方法
- トライアルアカウントを作成する – MUIキットは14日間利用可能です。
- UXPin Dashboardから新しいプロトタイプを開きます。
- 左側のツールバーのDesign System Librariesに移動します。
- MUIライブラリは、他のライブラリの中で「MUI 5」と名付けられています。
- ライブラリからインタラクティブなコンポーネントをドラッグ＆ドロップし、その動作をプレビューします。
- Spec Modeでコードを表示し、コピーする。
- MUIは、トライアルが終了するまで利用できます。
UXPin Merge でMUIにアクセスする方法
MUIのコードコンポーネントを使用してデザインするには、UXPin Mergeにアクセスする必要があります。UXPin Mergeのユーザーであれば、アカウントにサインインすると、ライブラリの1つとしてMUI 5が表示されます。
UXPin Mergeをまだお試しでない方は、UXPin Mergeへのアクセス権をリクエストして、MUI Core v5を使用して完全にインタラクティブなユーザーインターフェースを構築し、ユーザーとテストしたり、エンジニアに渡したりすることができます。開発チームはそのコードを使用することができ、デザイナーは製品の完全なインタラクティブUIを作成するためのビルディングブロックを用意することができます。
UXPin MergeはStorybookおよびGitリポジトリと統合し、コード化されたデザインシステムをUXPinに取り込むことができます。詳しくは、ブログポスト「UXPin Mergeのご紹介」をご覧ください。
UXPin Merge をMUIでテストする
MUIライブラリは、Webやデジタルデバイスのためのインタラクティブな体験を構築するための最も人気のあるReactライブラリの1つです。MUIをコード・コンポーネント・ライブラリとして使用することで、忠実度の高いプロトタイプを数分で設計することができます。一方、開発者は、あなたが使用するコンポーネントのコードを使用して、最終製品を作成することができます。UXPin Merge with MUI を試して、プロトタイプ制作におけるデザイン時間を節約しましょう！
