UXPinとStorybook.

皆さま、こんにちは！UXPinです。今回は新しくリリースする「Storybookとの連携」についてお伝えしようと思います。

プロダクトチームがデザインハンドオフの効率化と一貫性を実現する方法はたくさんあります。

UXPinでは、デザイナーと開発者の間の円滑なコミュニケーションが、ビジネスにおいて効率的でスケーラブルなDesignOpsプロセスを設定する上で最も重要な要素の一つであると考えています。理想的な世界では、デザイナーと開発者が共にデジタル製品を構築する際に、共通の言語を話すべきです。

デザインの一貫性を保つための課題

デザインと最終製品の間に漂う問題は、しばしば1つの問題に集約されます。UI要素を表示するためのデザインツールの技術と、エンドユーザーのために製品を作るために開発者が使用する技術は、全く別の技術なのです。多くのデザイナーが行っているのは、デジタル製品を視覚的に表現して絵を描くことです。

長方形でテキスト入力を描き、別のレイヤーにテキストを追加する代わりに、デザイナーがネイティブの入力コンポーネントを使って何かを入力できたらどうなるか考えてみてください。また、ボタンを模した円を描くのではなく、状態が変化するラジオボタンのインタラクティブなコンポーネントを使うのはどうでしょうか？

UXPinのようなデザインツールでは、コードベースのコンポーネントをビルディングブロックとして提供しています。UXPinのようなデザインツールでは、コードベースのコンポーネントがビルディングブロックとして提供され、デザインエディタ上でも最終製品としても同じように見え、同じように動作します。コードの書き方を知っている必要はありません。ただ、開発者とよりよく仕事をするための共通の語彙を与えてくれるのです。素晴らしいですが、それだけではありません。

会社や製品が成長するにつれ、さまざまなUIパターン、要素、タイポグラフィが生まれます。これらはデザインシステムによって標準化され、開発者のGit Repoに整理されます。これは、何度もリビジョンを重ねて最終的に完成した、すべての輝くコンポーネントの究極のソースです。これは、大量のリビジョンを経て最終的に完成したコンポーネントの究極のソースです。

では、開発者用のリポジトリからコード・コンポーネントを取り出し、それを使って製品の新しい部分を作ることを想像してみてください。それはとても意味のあることだと思いませんか？

共通言語としてのコードコンポーネント

PayPal は、Merge によってデザイン プロセスを 6 倍以上高速化し、ハンドオフ時の製品ドリフトを最小限に抑えることができたと測定しています。Merge はデザイナーと開発者がひとつの言語で会話するのに役立ちました。デザイナーが UI を構築するためにプロトタイプで使用したものは何でも、開発者は同じコンポーネントとしてすでに自分のリポジトリに持っています。

他の企業と話をしているうちに、多くの企業が同じような問題に直面していることに気づきました。そのため、私たちはMergeテクノロジーを2つの方法で拡張し、より包括的なデザインイノベーションを市場に提供することを決定しました。

まず最初に取り組んだのは、既存のGit統合にさらにフレームワークを追加することです。2つ目は、UIエンジニアが開発したコンポーネントの代替ソースを見つけることでした。より迅速なセットアップを可能にし、より幅広いフレームワークをサポートするもの。ここでは、Storybookとの連携が自然な選択だと思いました。

STORYBOOKとは

もしあなたがStorybookを知らないのであれば、そろそろ知ってもいい頃です。この素晴らしいツールは、開発者がUIコンポーネントやページを分離して構築するのに役立ちます。また、テストやドキュメントの作成も簡単です。開発者やUIエンジニアが、デザインスタイルガイドやデザインシステムを整理されたコード化されたコンポーネントに変えたいと思っているなら、Storybookはそのための完璧な場所です。

Storybookは、公開されているデザインシステムとコンポーネントライブラリの本当に素晴らしい例のリストを共有しました。すべてStorybookで構築されたもので、中には以下のような企業のものもあります。Audi、Shopify (Polaris)、IBM (Carbon)、またはAirbnb (with date components)などです。そして、これらのライブラリをUXPinに持ってきて、プロトタイプでそれらのコンポーネントを使用することができます。

連携のメリット

高度なUIをすばやく構築

Storybookの連携により、コードコンポーネントをキャンバスにドラッグ＆ドロップするだけで、忠実度の高いプロトタイプを素早く構築できます。プロトタイプは完全にインタラクティブで、最終製品のように動作します。さらに、UXPinのインタラクションを追加することで、異なるUIパターンをユーザーテストのための真に没入感のある体験にまとめ、製品がどのように見えるべきかをチームに示すことができます。このプロセスは非常に高速です。

また、スピードだけでなく、デザインの一貫性も向上します。Storybookのコンポーネントは制作基準に沿っているので、正しい色やフォントを合わせたり、UIの一部を作り直したりするのに時間を費やす必要はありません。

1つのライブラリだけを管理

UXPinとStorybookのライブラリを別々に管理する必要はありません。コンポーネントは常に同期しているので、ストーリー（Storybookコンポーネント）が変更されると、UXPinのデザインとライブラリも自動的に更新されます。これらのコンポーネントは、Storybookライブラリと同じコードを使用しているので、Storybookで動作するものはUXPinでも動作します。

ハンドオフ革命

デザイナーと開発者の間で行われるやりとりには、時間とコストがかかります。Single Source of Truthを使用することで、サイロを取り除き、製品開発プロセスをスピードアップすることができます。デザインやインタラクションの不一致を伴うハンドオフ・ドリフの居場所はありません。プロトタイプが完成したら、開発者はデザイナーが使用したコンポーネントをStorybookで見つけるだけでいいのです。これで完成です。デザインのためのコードがすでにある製品の開発は、より速く、より明確になります。

15種類のフレームワーク

UXPinのインテグレーションは、Storybookが対応している15のフレームワークすべてをサポートしているので、React、Vue、Angularのどれを使っていても、UXPinにインポートされたライブラリは問題なく動作します。

実際の製品のように動作するプロトタイプを作成し、製品開発プロセスを短縮しましょう。

最後まで読んでいただき、誠にありがとうございました！