スタイルガイド からデザインシステムに移行するには

多くの企業がそうであるように、ジョンソン・エンド・ジョンソンもかつてはスタイルガイドを利用して、デザイナーが承認された言語やコンポーネントを使用するようにしていました。スタイルガイドは今でもブランドのUX向上に役立ちますが、大企業のニーズとは必ずしも一致しません。また、新しいテクノロジーを使えば、中小企業でも スタイルガイド からデザインシステムへの移行が可能になります。

2021年4月のウェビナーでは、J&Jエクスペリエンス・デザイン・エキスパート・サービス・リーダーのBen Shectmanが、彼と彼のチームが、企業の既存のスタイルガイドを使って、どのようにしてインタラクティブなデザインシステムを構築したかを語っています。これは、適切なプロセスとソフトウェアを採用することで、デザイン部門をより効果的かつ効率的にすることができるという教訓です。

なぜ スタイルガイド ではなくデザインシステムが必要なのか

Johnson & Johnson社では、長年にわたり、PDFファイルで保存されたスタイルガイドを使用していました。静的な スタイルガイド のデメリットは、インタラクティブなデザインシステムのメリットを知っている経験豊富なUXデザイナーには明らかでした。

スタイルガイドをデザインシステムに変換することで得られるメリットには、次のようなものがあります。

• コンポーネントの標準化されたバージョンをすべて保存する場所を作ることができる。
• 製品に一貫性を持たせることで、ユーザーが新機能に遭遇したときに何を期待すればよいかがわかる。
• 社員がアクセスできるデザインコンポーネントを管理し、プロトタイプに追加することができる。
• 誰もが承認されていない機能を追加できないように、あるいは少なくとも極めて困難にするためのガードレールを確立する。
• 設計者が作業中にドラッグ＆ドロップできるコンポーネントを提供することで、効率化を図る。

デザインシステムを導入することで、担当者は製品の設計・開発をよりコントロールできるようになる。一方、設計者は、標準化された承認済みの部品を使って仕事をすることで、設計者や開発者の仕事が楽になる。

スタイルガイドからアトミックデザインによるデザインシステムへ

Ben Shectmanと彼のチームは、J&Jのスタイルガイドをアトミックデザインを用いたデザインシステムに変換することを選択した。アトミックデザインは、ジョンソン・エンド・ジョンソンのような大企業に効果的です。アトミックデザインの利点は以下の通りです：

• デザイナーが部品を組み合わせて新しい製品を作ることができる。
• 製品全体の一貫性を維持するために、一貫性のある定義済みの部品を使用することができる。
• 既存のデザインを更新するのに、それほど手間がかからない。

アトミックデザインを用いてデザインシステムを構築する場合、5つの複雑なレイヤーに焦点を当てることができます：

• 原子—最も基本的で必要不可欠な要素であり、すべてのものを作るために使用される。
• 分子—複数の原子から構成される、より複雑な構造体。
• 生物—分子が組み合わさってできたもの（検索フィールドやナビバーなどの例）。
• テンプレート—デザイナーが生物を配置するための管理された環境。
• ページ—デザイナーのアプローチが期待通りの結果をもたらしたかどうかを示す最終製品。

これらのレベルの複雑さはいずれも重要な役割を果たしていますが、多くのデザインマネージャーはチームにテンプレートを与えることに集中しています。

デザイナー、開発者、その他の従業員のためのテンプレートを作る

デザインシステムには、ユーザーの潜在的なニーズを満たすために、できるだけ多くのテンプレートを用意するのが理想的です。デザイナーは、適切なテンプレートを開き、そこに生物をドラッグすることができるべきです。テンプレートによっては、生物の機能に応じて特定の場所にはめ込むことができます。

J&JのデザイナーであるGil Gerard Austria氏は、テンプレートを使用して、古い社員検索ツールを会社の好みに合った、優れた機能を持つデザインに変えた例を紹介しています。

UXPinでインタラクティブなデザインシステムを構築

UXPin makes it easier than UXPinを使えば、時代遅れのスタイルガイドからインタラクティブなデザインシステムへの移行がこれまで以上に簡単になります。J&JのチームがUXPinを選んだ理由のひとつは、クリック可能なコンポーネントをすべて表示するインタラクティブデザインシステムの構築に役立ち、ユーザーテストにも大いに役立つからです。

インタラクティブなデザインシステムは、不正確さ、インタラクションに反応しない静的なデザイン、各コンポーネントがどのように見えるか、どのように動作するかを確定するまでの開発者とのやりとりの回数など、画像ベースのデザインで起こりがちな多くの問題を解決します。

デザインシステムを次のレベルへ

コンポーネントと最終製品の整合性を保ち、デザイナーと開発者の行き来を減らし、ハンドオフ・ドリフトをなくしたいなら、コード・コンポーネントを使ったデザインを選択すべきです。

当社のMergeテクノロジーにより、デザイナーは開発者がすでに作成し、コード化されたデザインシステムに保存されているUIコードコンポーネントを使用することができます。これにより、製品チーム全体にとって、究極の単一情報源となります。デザイナーは、製品化可能なコンポーネントをデザインに使用し、後に開発者は製品を構築するためにライブラリを検索するだけです。さらに、インポートされたコンポーネントは完全にインタラクティブなので、プロトタイプが最終製品と同じように見え、動作することになります！

デザインシステムやコードベースのデザインの利点について書かれていても、UXPin Mergeのようなツールがどれほど効果的であるかは必ずしも伝わりません。UXPin Mergeへのアクセスをリクエストして、その利点を体験してください。