WORKS

島津製作所｜XDからFigmaへの移行を支援～より開発者体験の高いデザインシステムの構築・内製化をサポート～

島津製作所は、1875年の創業以来、分析計測機器・医用機器・航空機器・産業機器の4分野を中心に幅広い事業を展開し、最先端の科学技術で多様化・複雑化する社会課題を解決しながら、人びとの安全・安心なくらしや産業の発展を支えています。

ゆめみはこのたび、それら多種多様な分析計測機器の情報設計からグラフィックまで、あらゆるソフトウェアのUIデザインを一手に担われている島津製作所・総合デザインセンターの UIデザイングループに伴走し、Adobe XDからFigmaへのデザインツール移行を主軸とした、より開発者体験の高いデザインシステムの構築・内製化をサポートいたしました。

＜クライアント＞

株式会社島津製作所　

＜プロジェクト詳細＞

島津製作所ではユーザーがあらゆる分析計測ソフトウェアをスムーズに使いこなせるよう、デザイン部門のUIデザイングループがより分かりやすく操作性が高くなるように最適化し、統一したUIデザインを様々な製品に展開しています。

また、デザイン原則・ガイドラインの整備や、コンポーネントや実装コードの一元管理など、分析計測ソフトウェア用のデザインシステム構築を推進するなか、 Adobe XDからFigmaへのツール移行を検討。ゆめみの「デザインシステム構築・内製化サービス」についてご相談をいただきました。

ゆめみは共創型でサービスデザインやUIデザインなどの内製化支援を行ってきたこれまでのナレッジをベースに、XDからFigmaへのデザインツール移行を通じて複雑化したガイドラインを整理しながら、より開発者体験の高いデザインシステムを構築。導入後の運用フローの策定までを支援しました。

＜具体的施策とポイント＞

デザインシステムの土台づくり

◆ステークホルダーヒアリングとマップの作成
デザイナーと開発者という分類だけではなく、複数のデザインツールにまたがるデザイン資産やUIライブラリの管理法など、デザイナーごとに異なるXDデータの現状利用シーンに関して、調査・分析。その内容を元にデザインシステムを取り巻くあらゆる人物やグループの関係性をマップ上で視覚化し、整理しました。

◆ロードマップの作成
元々XDで定義されていたスタイル・コンポーネントなどのデザイン要素をFigmaへ移行するにあたって、どのような課題/対応事項があるかを把握。抽出した課題への対応の流れをロードマップとして整理。

◆デザイントークン・スタイルガイドの作成
コンポーネントに適用するための色やタイポグラフィなど、最小限のデザイン要素を拡張性ある設計のもと定義。

Figmaの導入から浸透までをサポート

◆コンポーネントの利用・更新方法をまとめたガイダンスページの作成
コンポーネントを利用する際に役立つTipsや、ライブラリに変更が生じた際の更新手順などの情報を集約。Figmaファイル内にガイダンスページとして配置することで、今後デザイナーがデザインシステムを活用する際に参照できるようにしました。

◆Figmaファイルテンプレートの作成と整理
Figma上での作業を効率化できるテンプレート機能を活用し、デザインシステムに適応しやすい形式でファイルやプロジェクトの整理を行うことでスムーズな製品開発を促進。

◆Figmaレクチャーの実施
本格導入前でFigmaに初めて触れる方も少なくないなか、Figmaの機能理解をはじめ、ステークホルダーの皆さまがデザインシステムとして主体的に更新し、かつ複数のデザイナーやチームメンバーがリアルタイムでプロジェクトを共有・編集できる理想的な運用法など、ポイントを押さえたテーマを抽出。
デザイナーやエンジニアなど職種の違いだけではなく、細かくはステークホルダーごとに担う役割や作業が異なるなど複雑性が伴うなか、各人のニーズに合致するようコンテンツを精査・工夫しながらレクチャーを実施しました。

コンポーネントの作成

バリエーション/点数共に膨大なコンポーネントを、Figmaの機能を活用し管理を効率化。破綻しにくいUIコンポーネントの分類や命名規則を行いました。
デザイントークンをベースにUI要素にスタイルをあて、実装や画面作画などで再利用できるよう整理・ドキュメント化することで、スケーラブルなUIコンポーネントの分類や情報設計を実現しました。
ボタンやテキストボックス、全31点の共通パーツをコンポーネント化しました。

【ご担当者様からいただいたコメント】

AdobeXD上で管理していた膨大な数のコンポーネントをFigmaへ移行するにあたって、
Figmaでどんなことができるのか具体的なイメージもあまりない状況で相談させていただきました。
私達の利用状況や独自のルールなどを踏まえて、Figmaの機能を活用した作成・管理方法を提案いただいたことで、利便性の高いデザインシステムを構築できたと感じています。

【ゆめみ担当者の声】

ツールを乗り換えるなかで、どのように既存のデザインシステムをアップデートしていくかご検討されているところから、プロジェクトでご一緒していくなかで島津製作所様の皆様と共にこれからさらに活用されるデザインシステム像を作り上げることができたと感じております。さらに様々なプロダクトに適応していけるよう発展フェーズでも共創できるよう全力で伴走してまいります！（PM・リードデザイナー）

・非常に多くのコンポーネントやルールのお取り扱いがある中でも、使用イメージ・使用頻度などを詳しくお聞きしながら進めることができたため、イメージがしやすかったです。XDとFigmaで異なる機能をうまく変換できるよう検討したり、Figmaの最新機能も活用しながらのご提案をさせていただいたりと、ゆめみとしても学びを深められるプロジェクトでした。ゆめみと島津製作所様双方のの強みを活かし、より良い関係性の中でデザインシステムを構築することができたと感じています。（プロダクトデザイナー）

・ツールを置き換えたデザインシステムの構造やルールは実際に運用してみないと理解しにくいポイントでもありましたが、質問させていただく度に、丁寧に回答いただき、また一緒に考えてくださったりと、最適解を探りながらプロジェクトを進めることができて、学ぶ事が多いプロジェクトでした。（UIデザイナー）

・島津製作所様はFigmaを使用するデザイナーから、その先にいるユーザーのことを踏まえたフィードバックをしてくださったおかげで、より良いデザインシステムが構築できたと感じています。また、島津製作所様は世界中で展開されているプロダクトを取り扱っているため、通常のプロジェクトとは違う角度からの学びを得ることができ大変刺激になりました。（UIデザイナー）