デザイナー がコーディングなしでReactベースのプロトタイプ作成するには？

デザイナー のためのReact学習というと -「本当に必要なのか？」「コードを学ばずにコードのプロトタイプを作ることはできるのでしょうか？」などの質問が、製品開発チームやデザイナーの間でよく出ます。

大抵のデザイナーは、コードを学びたがりません。まぁそれは当然でしょう。Reactや、HTML、CSS、Javascriptの基本を学ぶだけでも、かなりの時間を要しますからね。デザイナーの時間は、UX（ユーザーエクスペリエンス）への投資や、デザインの課題解決に費やしたほうがいいのです。

ユーザビリティテストやUXの改善には、最終製品のように見える高品質のプロトタイプが必要ですが、画像ベースのツールではそれが簡単ではないため、八方塞がりのようになってしまいます。なので多くのデザイナーにとって、プロトタイプ作成能力の向上は、Reactを学ぶ動機付けとなります。

エンジニアに頼らず、自分でコードを書かずに、プロトタイピングとテストのためにReactの利点を全て得られるとしたらどうでしょうか。実はUXPin Mergeには既にそのソリューションがあるんです！

UXPin Mergeは、レポジトリからUXPinのデザインエディタにコードコンポーネントを同期させ、React、Vue、Angularなど、エンジニアが開発で使うのと同じUI要素をデザイナーが使えるようにするものです。Merge ページで、詳細とこの革新的なテクノロジーへのアクセスリクエスト方法についてぜひご覧ください。

React とは

  Reactは、Facebookが開発したオープンソースのフロントエンドJavascriptライブラリです。２０２２年８月の調査によると、Reactは今でも最も広く使われているフロントエンドフレームワークであり、その地位は数年間維持されています。  

Reactのコンポーネントベースのワークフローで、エンジニアがコードを１行書くだけでユーザーインターフェースのどこからでも呼び出せる、再利用可能なコンポーネントを作成することができます。このコンポーネントベースのアプローチにより、Reactはコンポーネントライブラリやデザインシステムのための優れたフレームワークとなります。

ReactとReact Nativeの違い

  Reactは、DOMと対話するWebベースの技術です。つまり、Webブラウザでレンダリングし、モバイルのOS（オペレーティングシステム）では動作しないということです。一方、React Nativeは、クロスプラットフォームのネイティブアプリケーションとウェブアプリケーションに使われる ReactJS のモバイル版です。

まとめると：  

• ReactJS：WebサイトとWebアプリケーション
• React Native：ネイティブアプリケーションとWebアプリケーション

  React Nativeよりもブラウザーのパフォーマンスが良いため、多くの組織がWebサイトやWebアプリケーションにReactを使っています。

『React for Designers』とは

「React for Designers」は、Reactやその他のフロントエンドフレームワークについてデザイナーを教育する運動です。Reactを学ぶことで、デザイナーは基本的なプロトタイプ作成したり、少なくとも技術的な制約や開発プロセスをよりよく理解できるようになるという考えです。

デザイナー はReactを学ぶべきか

  Reactの入門コースは、デザイナー にとってプラスになることばかりです。ただ、どんな言語でもそうですが、定期的に練習しなければ、身につかなくなります。つまり、デザイナーがReactを学ぶべきかは、Reactを学ぶ目標や動機によりけりです。

ここでは、デザイナーがReactを学ぶ3つの一般的な理由をご紹介します：

キャリア開発：プログラミングの専門知識は、出世街道まっしぐらの企業にとって有利です。昇進すればするほど、連絡、連携、意思決定のために製品開発の技術的側面を学ぶことがより重要になります。

より高収入な仕事：コーディングを行うUXデザイナーがフロントエンドデベロッパーやUXエンジニアに転身するのは自然な流れです。Glassdoorによると、米国ではUXデザイナーの平均収入は１０万ドル未満、UXエンジニアの平均収入は１２万ドル以上です。平均すると、エンジニアの方がデザイナーよりも高い収入を得ています。デザインと開発の専門知識で、組織に対するあなたの価値が上がり、収入を得る可能性が上がります。

スキル開発：デジタル製品開発のエンジニアリング的側面を理解することで、部門を超えた連携を改善することができます。また、Reactを学ぶことで、デザイナーがUXに対する技術的な影響や、デザインプロセスにおいてこのような問題を解決する方法を理解することができます。

プロトタイプの向上：残念ながら、画像ベースのデザインツールは、デザインプロセスでデザイナーがテストできる内容を制限しています。プロトタイプの機能を上げるには、エンジニアがコードベースのプロトタイプを作成する必要がありますが、これは時間とコストのかかるプロセスです。しかし、デザイナーがコードを書ければ、自らプロトタイプを作成し、ユーザビリティテストを強化することができます。

Reactを学ばずにReactアプリのプロトタイプをデザインできるか

  簡単に言うと、UXPin Mergeを使えばできます。UXPin Mergeを使えば、デザイナーはReact（およびその他のフレームワーク）のコンポーネントライブラリをUXPinにインポートして、完全に機能するReactプロトタイプを構築することができます。コードは一行も書きません！

デザイナー は、他のデザイン ツールのように UXPin でこれらの React コンポーネントを使い、UI コンポーネントをドラッグ ＆ ドロップしてUI （ユーザー インターフェース）を構築します。唯一の違いは、Merge コンポーネントは完全にインタラクティブで、色、間隔、タイポグラフィー、サイズ、およびコンポーネント ライブラリやデザイン システムで確定されたその他のプロパティが含まれている点です。

UXPinでReactコンポーネントはどんな感じになるのか

  MUI のコンポーネント ライブラリにあるこのテキスト フィールドには、デザイナーが UXPin で React コンポーネントを表示および編集する方法が示されており、このテキストフィールドは、完全に機能し、すぐにプロトタイプを作成することができます。

UXPinのプロパティパネルに表示されるプロパティは、コンポーネントライブラリのレポジトリからReact propsに関連しており、デザイナーはモードを切り替えて、コンポーネントの React props を JSX で表示することができます。

また、このJSXを使うことで、フロントエンドの開発では、エンジニアがコードをコピー＆ペーストするだけで済むので、デザインハンドオフがずっと楽になります。

コードベースとイメージベースのデザインツール

  画像ベースのデザインツールは、プラグインやエクステンション機能を使って同様の結果を得ることができますが、このコードはエンジニアにとってほとんど使い物になりません。なぜか？このようなプラグインはUIをスキャンして、コードがどうあるべきかを「推測」しているからです。Reactコンポーネントを開発する方法はたくさんあるので、このコードはたいてい冗長であり、エンジニアにとってはプラグインが生成したコードを再構築するよりも、ゼロからコーディングする方が速いということです。

Merge はコードベースの技術です。つまり、UXPin はベクター グラフィックスではなく、レポジトリに記述されたコードをそのままレンダリングします。エンジニアはすでに自分のレポジトリに正確なバージョンのコンポーネントを持っているので、プロジェクトの依存関係としてコンポーネント ライブラリを追加し、UXPinからJSXをコピーして最終製品を開発することができます。

Reactを学んだら得られるであろう利点を、デザイナーはReactを学ぶことなくUXPin Mergeで全て得られるのです!

Reactコンポーネントを用いたプロトタイピングを行う企業の事例

  スタートアップから代理店、企業のデザインチームまで、デザインプロセスでReactコンポーネントを使ったプロトタイプを行っている企業の事例をご紹介します。

PayPal

PayPalの社内製品開発チームは、２０１９年にUXPin Mergeに切り替わりました。PayPalのUXリードEPXであるエリカ・ライダー氏は、６０以上の製品にサービスを提供して１,０００人以上のエンジニアをサポートする、５人構成のUXチームを拡張するためのツールやシステムを探しているときにMergeを発見しました！UXPin Mergeは、PayPalのUXリードEPXである彼女が開発したものです。

PayPalは、カスタムコンポーネント、パターン、テンプレートを用いたReact Fluent UIのデザインシステムを使っており、エリカと彼女のチームは、デザインの決定を最小限に抑えるためにライブラリを構築し、製品チームはユーザーの問題を解決するための製品作りにのみ集中できるようにしました。

このシステムは非常にうまく機能しており、PayPalの製品チームは、画像ベースのツールを使う経験豊富なUXデザイナーが以前行ったよりも８倍速く１ページのプロトタイプを作成することができます。

『以前は、限られたリソースとデザイナーで、１ページの製品を作るのに、モックアップのデザインだけで２〜３ヶ月かかっていましたが、今はプロダクトチームが同じ期間内にプロダクトをデザインして提供できるようになりました。』 – PayPalのUXリードEPX　エリカ・ライダー氏 

TeamPassword

TeamPassword は UXPin Merge を少し違った形で使っています。この会社にはUX チームがないため、TeamPassword のエンジニアがすべてのプロトタイプとテストを行う必要があり、２人で構成されるこのチームでは、以前はそれをコードで行っていましたが、テスト、編集、イテレーションに多くの時間がかかっていました。

TeamPassword のエンジニアリング チームは現在、カスタム MUI コンポーネント ライブラリを使った新製品の開発とテストに UXPin Merge を使っています。製品化可能な React コードにより、TeamPassword のエンジニアリング チームは、新製品と UI の更新を行うためにフロントエンド コードを書く必要がなくなり、リソースを大幅に節約することができます。

dotSource

ドイツに拠点を置くデジタル製品のコンサルティングおよび開発会社である dotSource は、UXPin の Storybook統合 を使って、React、Vue、Angular、Ember など、複数のフレームワークのライブラリをインポートしています。つまりdotSourceのデザインチームは、この柔軟性によって、同社が共同開発するほぼすべてのクライアントと製品でUXPin Mergeを使えるということです。

UXPin Mergeを使う最も大きな利点の1つは、デザインシステムのプロパティがすべてのコンポーネントに『組み込まれている』点です。さまざまな組織やその内部チームと連携している代理店として、このような組み込まれたReactプロパティは、究極のUI一貫性を保証する制約を作成するのです。

また、デザインプロセスでコードコンポーネントを使うことで、dotSourceのチームは部門を超えた連携がしやすくなり、外部の請負業者と仕事をする際に通常より大変になるデザインハンドオフが、スムーズで楽に行うことができます。

Iress

金融サービスのソフトウェア開発会社であるIressは、UXPin Mergeを使って、組織のデザインシステムのための『信頼できる唯一の情報源（Single source of truth）』を作成しました。デザイナーとエンジニアが同じコンポーネントライブラリを使うことで、部門を超えた連携と技術的制約の理解を深めることができるのです。

『UXPin Mergeによって、よりインタラクティブでリアルなプロトタイプの作成ができるようになります。ユーザーは、実際のアプリで期待するように、タブを移動したり、ホバー スタイルやアニメーションなどの同じインタラクションを表示したりでき、それによって、より洞察力のあるユーザーテストの実施や、プロセスのかなり早い段階でのユーザビリティの問題の発見が実現します。』- デザインシステムプロダクトオーナー、Iress社プロダクトデザイン地域責任者、ニック・エリオット氏  

PayPalと同様、UXPin Mergeは、非デザイナーにもメリットがあります。『非デザイナーもツールにアクセスできるようになり、実験を行ったり、同じデザイン上の考慮事項に触れたりすることができます。』

UXPin MergeでReactコンポーネントを使ってデザインしよう

  UXPin Mergeを使ってReactコンポーネントのデザインを始めるには、以下のような３つの方法があります：

• npm統合：npmパッケージとして提供されているオープンソースのReactコンポーネントライブラリを、Merge コンポーネントマネージャを使ってUXPinにインポートするものであり、デザイナーとして最も早く、簡単に始められる。
• Git統合：ReactのレポジトリをUXPinに直接同期するが、セットアップにはエンジニアの協力が必要。
• Storybook統合：Vue、Angular、React、Emberなど、Storybook経由でより多くのフロントエンドフレームワークをサポート。

  デザイナー は、Merge の全プランに標準装備されているUXPinのMUI 統合を利用することもできます。  

準備はいいですか？詳細とアクセスリクエスト方法については、Mergeのページをぜひご覧ください。