ケーススタディ：UXPin MergeとTeamPassword

本記事は、UXPin Mergeを使ってコードコンポーネントを使ったデザインを始めた、シンプルで使いやすいパスワード管理ツールのTeamPasswordとのコラボレーションで書かれています。

__________________________________________________________________

デザインシステムの代表的なものを見ると、それを構築する時間とリソースがあるビッグブランドだけのものだという印象を受けるかもしれませんが、そんなことはありません。今日のソリューションでは、どのような規模のチームでもデザインシステムの構築、維持、サポートができます。

TeamPasswordもそういった企業の一つです。私たちがTeamPasswordと出会ったとき、開発スタッフは2人で、デザイナーは一人もいませんでしたが、 UXPin Mergeさえあれば、これからも彼らはデザイナーなしでやっていけるようです。

TeamPasswordについて

TeamPasswordは、ログイン名とパスワードをすべて一箇所にまとめて管理する、チーム向けのパスワード管理ツールです。メールやチャットアプリなどの安全性の低い通信経路でパスワードを伝える代わりに、チームは、簡単に共有ができるクリーンなインターフェースを介して、いつでもログイン情報にアクセスできます。このツールは使いやすく、非常にわかりやすいので、アクセスセキュリティのケアが本当に身近になります。

課題

マシュー・チギラ氏は、チームのデベロッパー2名のうちの1人として、フルスタックデベロッパーとしてTeamPasswordに参加しました。彼は古いフレームワークと比較して、維持が簡単なReactにツールを切り替えることを提案しました。

また、インターフェースの構成要素を保存・記録するデザインシステムでアプリを作成することが、いかに便利であるかということも知っていました。スタイルガイドや複数のライブラリから取得したコンポーネントでインターフェースを構築せずに、最初からデザインシステムを使用するブランドには、他にも多くの利点があります。デザインシステムの早期構築の利点としては、作業の迅速化、ハンドオフの改善、そしてもちろん一貫したUIが挙げられます。

MVP（Minimum Viable Product）の構築だとしても、デザインシステムに従うことを頭に入れておきましょう。デザインプロセスがスムーズになり、チームの規模が大きくなったときにUIのスケーリングに関する問題を回避できます。さらに、ルック＆フィールに一貫性がないと、潜在顧客のアプリに対する印象に影響を与える可能性があります。

ブランドはこの市場において不可欠であると主張する、TeamPassword のオペレーションディレクターであるトニー・カッチョボ氏 は、「お客様は我々に、ログイン記録にある機密情報を託しますので、一貫性のない或いは時代遅れのデザインだと、情報の安全性を保つのに十分な最新の技術があるのか、一部のお客様に疑問を抱かせる可能性があります。

フロントエンドの開発は、バックエンドのパフォーマンスの中に信頼と信用を築くのです。」と述べています。 機能の出荷も同様です。もしチームが迅速に行動しなければ、誰かに先を越されてしまいます。とはいえ、デザイナー不在の製品開発では、わかりやすく一貫性のあるユーザーインターフェースを実現できません。 多くのチームが同じような問題に直面しています。優秀なエンジニアが在籍しているにもかかわらず、開発をどんどん進めないといけないので、UIの一貫性やわかりやすさに影響が出てしまうのです。これでは、競合に差をつける強力なブランドを簡単に作れません。

したがって、デザインシステムはTeamPasswordにとって必須のものでしたが、ただデザインの決定に役立っただけで、それですべての問題が解決されるわけではありませんでした。その上、シンプルで効果的なフロントエンドデザインを作成できるツールも必要だったのですが、そこで登場したのがUXPin Mergeです。

小さなチームで大きな成果

TeamPasswordはUXPin Mergeとそのコードコンポーネントライブラリ、特にオープンソースのMUIとの統合については知っていました。初日から自分たちのブランドに基づいたテーマバージョンのMUIを得られるのは大きなセールスポイントであり、彼らには、MUIコンポーネントをインポートし、UIコンポーネントをキャンバス上にドラッグ＆ドロップするだけでプロトタイプを作成できるデザインツールが必要でした。

UXPin Mergeは、何通りかの方法で、Reactコンポーネントで埋め尽くされたMUIライブラリをUXPinエディタに取り込むことができます。TeamPasswordはGitレポジトリからインポートするか、Storybookの統合を使えます。UIコンポーネントのコードレスインポートにより、コード化されたコンポーネントのインポートも可能です。（Merge Component Managerへのアクセスは、こちらからリクエストしてください。）

Mergeの顧客の皆さんと同じように、UXPinはTeamPasswordとワークショップを計画し、コードコンポーネントを使用したデザイン方法を紹介しました。マシュー 「ジャックとのトレーニングセッションは本当に貴重でした。また、ツールのセットアップやエディタの使い方を学びました。また、コンポーネントを調整する方法も教えてもらいました。」と言っています。

UXPin Mergeを使用すれば、TeamPassword は現実的なプロトタイプを組み立てるためのデザイナーは要りません。さらに重要なのは、Merge は実際の React コンポーネントを使用しているため、UI デザインは、まだコーディングする必要がある前述のコンポーネントの画像表現というよりは、プロフェッショナルに見えるだけでなく、開発された製品のように動きます。

TeamPassword は、開発とデザインの両方において、信頼できる唯一の情報源（Single source of truth）の恩恵を受けることになります。

完成したデザインを製品にするまでのプロセスも、ずっと速くなりました。プロトタイプの仕様と製品化可能なコードを書き出しがとても速くできます。これで、フロントエンドのコードを書くのにチームに通常かかっていた時間が節約されるのです。

今後の展望

TeamPasswordには、UXPin Mergeをどのように使用したいのか、完全な戦略が用意されています：

• 選択したデザインシステムに基づいたウェブサイトの再デザインから始動：現在のウェブサイトは少し古く見えるので、一部の潜在的な顧客の購入意思決定に影響を与える可能性がある上に、デザインに一貫性がありません。TeamPasswordは、このサイトを一新したいと考えています。
• MUIとUXPin Merge を使ったアプリのインターフェースの再構築：次のタスクは、アプリケーションのフロントエンドのデザインのやり直しです。Reactに切り替え、アプリのコンポーネントライブラリとしてMUIを使いたいと考えています。デザインと開発で同じビルディングブロック、つまりReactコンポーネントを使うので、タスク全体はそれほど長くはかからないはずです。
• 新機能の構築とTeamPasswordの成長：プロトタイピングの新しいアプローチは、統一されたユーザー体験を提供するアプリのデザインと開発をサポートし、市場投入までの時間を短縮します。

まとめ

UXPin Merge を使用することで、TeamPassword は UI デザインを作成し、その背後にあるコードを短時間でエクスポートすることができます。デザイン会社を雇うことなく、デザインの拡張、ワークフローの整理、一貫したインターフェイスの作成が可能になります。小規模なチームは、適切な場所でスケーリングできるデザインベロシティを手に入れることができます。これは、新しいレベルの仕事です。

UXPin Mergeの技術で、Git、Storybook、またはNPM（Node Package Manager）パッケージ経由で保存されたライブラリから、誰でもUIコードコンポーネントをインポートすることができます。チームは、製品やチームを拡張する準備が整う前から、デザインと開発のための信頼できる唯一の情報源（Single source of truth）を得ることができます。

UXPin Merge へのアクセス権をリクエストして、プロトタイプ作成がどれほど速くなるかを体験してみてください。プロトタイプとコード化された製品に違いはありません。どのような規模のチームでも、時間を大幅に節約することができます。コードコンポーネントをデザインツールに取り込み、デザインと開発のワークフローを接続します。