React を使ったおすすめの プロトタイピングツール

ReactアプリまたはWebサイトを構築しているなら、プロトタイプで実際のReactコンポーネントを使うことをおすすめします。

その方法などについて、こちらの記事で詳しくご紹介していきます。

主なツール

• UXPin Merge
• Framer
• Storybook
• React-Proto

Git、Storybook、またはnpmからインポートしたコンポーネントを使って、Reactのプロトタイプを構築しませんか。

UXPin Mergeを試して、魅力的で制作準備の整ったレイアウトを１０倍速く作成しましょう。UXPin Mergeをぜひご覧ください。

UXPin Merge

UXPin Merge技術では、レポジトリからコードコンポーネントをデザインプロセスにインポートします。

製品のデザインシステムやオープンソースのライブラリをインポートして、高忠実度で完全に機能するReactプロトタイプを構築できます。

Mergeを使うと、ネイティブ アプリケーション、Webアプリケーション、さらにはテレビまで、クロスプラットフォームアプリケーションのプロトタイプを作成できます。

その際プロトタイプはブラウザ、または iOS およびAndroidアプリケーション用のUXPin Mirrorを介して確認できます。

Mergeを使ってコードコンポーネントをUXPinにインポートするには、以下の３つの方法があります：

• Git統合では、Reactコンポーネントを Gitレポジトリから直接インポートでき、Mergeの機能をフルに利用することができる。
• Merge の Storybook統合で任意のStorybookを接続できることから、React、Vue、Angularなどのより多くのフロントエンドテクノロジーにアクセスすることができる。
• npm統合では、Mergeコンポーネントマネージャーを使って npmレジストリ上のオープンソースのデザインシステムから各UI要素をインポートできる。

主な機能

• バージョン管理（Git 統合のみ）：デザインシステムのレポジトリに変更があると、自動的に UXPin に同期され、デザイナーに最新リリースが通知される。
• パターン（Git 統合のみ）：デザインシステムのコンポーネントを使った新しいパターンの作成や、他のデザインシステムの要素の取り入れなどで、ライブラリを増やすことができる。
• ドラッグ＆ドロップのワークフロー：UXPin のデザインライブラリからコンポーネントをキャンバスにドラッグして UI（ユーザーインターフェース）を作成する。また、プロパティパネルで定義済みのプロパティを調整して、スタイルやインタラクションなどを変更できる。
• 連携：製品チームは、UXPinの有料アカウントを持っていなくても、UXPinのコメントを通じてステークホルダーと連携できる。
• スペック モードとドキュメント： Mergeを使うと、デベロッパーはすでに同じレポジトリにアクセスできるため、デザインハンドオフがよりスムーズになる。その際、デベロッパーはSpecモードを使って、プロパティの検査、距離の測定、本番環境のコンポーネント CSS および JSXのコピー（Git 統合のみ）、製品のスタイル ガイドおよびドキュメントの表示を行うことができる。

料金体系

年間払いの場合では、１ヶ月あたり１１９ドル〜（Companyプラン）

また、AI機能などの新機能を搭載したMerge AIの提供を開始しました。

長所と短所

長所：

• 信頼できる唯一の情報源（Single source of truth）：UXPin Merge を使うと、デベロッパーが最終製品に使うのと同じ React コンポーネントをデザインプロセスでインポートして使えるため、デザイナーとデベロッパーの間のギャップを効果的に埋めることができる。
• 実際のデータ：デザイナーは、JSON、Google Sheets、または CSV を使って実際の製品データを組み込むことができる。また、変数を使ってユーザーの入力をキャプチャし、そのデータを使ってプロファイルアカウントの入力や、動的でパ個別化された UX（ユーザー エクスペリエンス）の提供もできる。
• インタラクティブなプロトタイプ：Reactコンポーネントをプロトタイプに使うことで、デザイナーは最終製品と見分けがつかないインタラクティブなレプリカを作成できる。

短所：

• Javascript に限定される： UXPin Merge は Javascript ライブラリおよびフレームワークでしか動作しない。
• 技術的なセットアップ：製品チームは、コンポーネントライブラリのレポジトリを Merge と互換性のあるものにするのに技術的な支援が要る。ただし、UXPin には ボイラープレートがあり、この作業のお手伝いをすべくテクニカルサポートが提供される。そしてデザイナーは、設定不要な MUI、Material UI、Ant Design、Fluent UI などのビルトインライブラリを使うことができる。

Storybook

StorybookJS は、デベロッパーがコンポーネントを分離して構築できる UI 開発環境です。デベロッパー、デザイナー、ステークホルダーは、各 UI要素のさまざまな状態を可視化できることから、コンポーネント駆動型の開発環境を構築できます。また、React などの様々なフレームワークに対応しています。

Storybookは社内のプロトタイプやコンポーネント主導の開発には優れていますが、ユーザーテストのためのツールや機能はありません。

なので、MergeのStorybook統合を使って、UXPinでプロトタイプを行うために組織の Storybookプロジェクトをインポートするのがおすすめの回避策となります。

Storybook と UXPin Merge を組み合わせることで、デザイナーとデベロッパー間のギャップを効果的に埋めながら、組織全体で「信頼できる唯一の情報源（Single source of truth）」が作られるのです。

主な機能

• コンポーネントストーリー： コンポーネントのさまざまな状態を表示するストーリーを作成できる。
• アドオンエコシステム： 強固なプラグインのエコシステムで Storybook の機能を拡張できる。
• コンポーネント駆動型の開発： 一度に１つのUI要素を開発し、それによってプロパティ、インタラクション、バリアントがすべて表示される。
• ドキュメント： ストーリーとコンポーネントに基づいたドキュメントを自動生成できる。
• 自動テスト： リリース前に複数のテストを実行し、コンポーネントがコード構文、デザイン原則、アクセシビリティ、その他のカスタム要件を満たしていることを確認できる。

料金体系

StorybookJS はオープンソースで無料で利用できますが、アドオンや統合には費用がかかる場合があります。

長所と短所

長所：

• フレームワークにとらわれない：Reactコミュニティでは著名だが、さまざまなJavascript フレームワークに対応している。
• 豊富なエコシステム： 多種多様なアドオンや統合により、Storybook をニーズに合わせてカスタマイズできる。
• 連携： デザイナー、デベロッパー、ステークホルダーが連携できるため、一貫した UI/UX が実現する。

短所：

• 技術的な専門知識： Storybook はデベロッパー向けツールであり、使用にはプログラミングと Javascript のスキルが必要。
• 設定： プロジェクトの複雑さによっては、すべてを正しく設定するのに時間がかかる場合がある。
• 習得： コンポーネント構造と使っているフレームワークの理解が必要。

Framer

Framer は、React Web サイトと Web アプリのためのノーコードデザインツールです。

このプラットフォームの最新のAI機能により、ちょっとしたキーワードでレスポンシブなスターターテンプレートを作成することができます。

主な機能

• コードに裏打ちされたデザイン： React コンポーネントでデザインすることから、プロトタイプから開発への移行が効率化される。
• Figma のプラグイン： Framer で使うために、Figma デザインを HTML に変換する。‐ ただ、その HTML は React に変換されないといけない。
• コードのようなアニメーション：コードを書くことなく、Javascript のようなアニメーションやエフェクトを追加できる。
• プロダクション対応コード： デベロッパーは、ReactのWeb サイトや Webアプリケーションを構築するために、Framer からコードをエクスポートすることができる。

料金体系

年払いの場合、１サイト（プロジェクト）につき１ヶ月あたり５ドルから。

長所と短所

長所：

• インタラクティブなデザイン： 現実的なインタラクションを実現するためのコードコンポーネントを使ったデザイン。
• ノーコード開発： コードを一切記述することなく、制作可能な Web サイトを作成できる。
• スターターテンプレート：Framer には、すぐに始められる Web サイトおよびランディング ページ テンプレートの膨大なライブラリがある。‐ 平均２９〜９９ドルのサードパーティの有料テンプレートもある。

短所：

• コスト：小規模なプロジェクトでは費用対効果が高いが、複数のサイトを運営する場合には、サイトごとの価格モデルは高くつく。また、スターターテンプレートを購入する場合は、コストが上がる。
• Web 専用：FramerはノーコードのWebサイトデザインツールであるため、プロトタイプの範囲が制限される。
• コンポーネントをインポートできない： UXPin Mergeとは異なり、デザインシステムや UIライブラリのインポートはできない。

React-Proto

React-protoは、Reactのデベロッパーのために特別にデザインされた プロトタイピングツール であり、Reactコンポーネントとその関係を作成するための視覚的なインターフェースを提供します。

デベロッパーは UI要素をドラッグ＆ドロップすることで、コードを記述することなくコンポーネント間の親子関係を確立し、それによってステートの場所やプロップの関係を指定することができます。

主な機能

• コンポーネントツリーの可視化：アプリケーション全体の構造とコンポーネントの関係を視覚化する。
• インタラクティブ性：プロトタイプを操作して、ビジュアルツリーに反映された変更を確認する。
• ステート管理：ステートの場所を指定し、データの流れを把握する。
• コードのエクスポート：ビジュアル デザインを機能的なReactコードに変換して、フロントエンド開発を開始する。

料金体系

React-protoはオープンソースなので、無料で使えます。

長所と短所

長所：

• より速いプロトタイプ：React-protoのドラッグ＆ドロップ インターフェースにより、デベロッパーはコードを書くよりも早くコンポーネントとプロトタイプを編集できる。
• コスト効率が高い：オープンソースであるため、全デベロッパーおよびデザイナーにとってコストに優しいオプションとなる。
• コード生成：デザインのコードへの変換がしやすいことから、デザインと開発の間の壁が低くなる。

短所：

• 技術的なスキルが必要：React-protoはデザイナーにとって使いやすいツールではなく、効果的に使うには、React の深い経験などの技術スキルが必要。
• 機能が制限されている：React-protoにはオープンソースツールとしての機能があるが、ユーザー テストには不向き。
• サポートなし：React-protoには、Github のコミュニティ以外でのサポートやオンボーディングがない。

Reactを使用したWebサイトとアプリケーションのプロトタイプ

素晴らしいReactプロトタイピングツールはありますが、デザイナーにとって使いやすく、使い慣れた作業環境を提供しているプラットフォームは UXPinしかありません。

UXPinは、見た目も操作感も他のデザインツールと同じですが、UXPinでデザイナーが React、Vue、Angular などのコード コンポーネントを使ってプロトタイプを作成できるようになることで、プロトタイプの幅が広がります。

Git レポジトリ、Storybook、またはインポートされた npm パッケージからの React コンポーネントを使って、本番環境に対応したレイアウトを構築しませんか。

UIを作成して生産性を向上させましょう。 UXPin Mergeをぜひご覧ください。