米UXPin社、アプリ開発におけるUXデザインとフロント開発を一体化　「Storybook統合」開始

　UXPin（アメリカ合衆国 ネバダ州、 CEO: Yuga Koda）は、DXにより増加する新規アプリ開発ニーズにおいて、ボトルネックになっているUXデザインから製品開発へのプロセスを改善すべく、コード基盤のデザインシステムもしくはデザイン資産をそのままUXデザインツール「UXPin」に実装できる「Storybook統合」機能を提供開始した。

　デザイン思考によるデザイン経営が求められているなか、DXをより加速化する基盤として、ウェブやアプリのデザインガイドラインである「デザインシステム」の構築が一般化されている。しかし、既存のUXデザインツールでは、デザインシステムの導入後にも、デザイン成果物（プロトタイプ）とフロントエンジニアが開発した本番用のコード資産との乖離があり、製品開発プロセスのボトルネックになっているという。そこで、UXPinでは、Mergeというテクノロジーにより、本番用のコードで生成されるものと同じデザインシステム資産（コンポーネント）を利用してプロトタイプを作成することで、デザインシステムの一貫性を保つ。

　今回の「Storybook統合」機能は、Mergeテクノロジーをより多くのエンタプライズ顧客に利用してもらうため、オープンソースUI開発サンドボックスであるStorybookとの統合により、既存のReact以外にもVueやAngularなど15種類のUIフレームワークにも対応する。

　Storybook統合の特徴は、次のとおり。

Storybookと容易に連携

　StorybookのリンクをUXPinエディター内の連携ボックスに貼り付けるだけで、統合が完了。コードを書くなどの作業は必要なく、統合は数秒で終わる。

コード・コンポーネントによるインタラクティブデザイン

　UXPinはノーコードデザインツールのため、UXデザイナーは統合されたデザインコンポーネントでプロトタイプを作成するのみ。インタラクティブなコンポーネントをキャンバスにドラッグ＆ドロップすることで素早くアプリのプロトタイプを作成できる。

15種類のUIフレームワークに対応

　Storybookがサポートするすべてのフレームワークに対応。一般的に多く使用されているReactだけではなく、VueやAngularなど、フロントエンジニアが現在使っているJavaScriptコードのままで統合作業を行える。これによりプロトタイプ完成後、エンジニアに対しても製品として実装できるコードを提供可能となる。

導入方法

1. UXPinエディター内の連携ボックスでStorybookのリンクを貼り付ける。
2. 正しくインポートされたかを確認するため、デザインコンポーネントをドラッグ＆ドロップ。
3. デザインコンポーネントが正しく動作すれば連携完了。