島津製作所 | デザイン品質と効率化を両立するための「Figmaプラグイン」開発。ご担当者様・ゆめみ担当者による特別座談会
創業150年の歴史を誇る株式会社島津製作所は、分析計測機器・医用機器・航空機器・産業機器の4分野を中心に、最先端の科学技術を通じた社会課題の解決に取り組んでいます。
そんな同社のソフトウェアデザインを担うUIデザイングループでは、限られたリソースの中でデザイン品質と業務効率の両立を図るべく、継続的な改善活動を推進。その一環として、ゆめみと連携し、コラボレーションデザインツール「Figma」を活用した取り組みを行ってきました。
今回のプロジェクトでは、グループ全体へのヒアリングを通じてFigma活用における課題を抽出。最終的には、「デザインシステム上でのカラー（色）の取り扱い」についての課題を解決するFigmaプラグインを開発しました。
結果として、従来は人の目で行っていたカラーの確認作業が自動化。作業効率の向上はもちろん、デザインシステムを正しく適用し、品質を担保するための一助となる仕組みを整えることができました。
本記事では、課題の抽出からプラグインの設計・開発、そして今後の展望までを、島津製作所とゆめみによる座談会形式でお届けします。
本事例のハイライト
島津製作所では、Figma活用に関する現場へのヒアリングを通じて、デザインシステム上でのカラー（色）管理の煩雑さという課題が浮かび上がりました。
その解決手段として、ゆめみとともにカラーの誤用を自動で検出できるFigmaプラグインを開発。
時間がかかっていた確認作業を効率化するとともに、デザインシステムの正しい運用とデザイン品質向上を後押しする成果につながりました。
クライアント
座談会参加メンバー
株式会社島津製作所
総合デザインセンター デザインユニット UIデザイングループ
主任 伊藤 由莉 様
副主任 片田 汰架 様
株式会社ゆめみ
フロントエンドエンジニア 飯沼 佑典
プロジェクトマネージャー 橋詰 嗣紀
デザイン品質と効率化の両立を目指し、よりFigmaを活用したい
——本日はどうぞよろしくお願いいたします。まずは、今回のプロジェクトの背景について教えていただけますでしょうか。
伊藤様：私たちUIデザイングループは、日々のデザイン制作業務に加え、デザインシステムの構築・改善など、中長期的な取り組みにも力を入れています。今回のFigma活用プロジェクトも、その一環としてスタートしました。
総合デザインセンター デザインユニット UIデザイングループ
主任 伊藤 由莉 様
片田様： ゆめみさんにはFigmaの導入時から支援をいただいており、単に依頼内容をこなすのではなく、本質を咀嚼してプロジェクトを前に進めてくださった点にとても信頼感がありました。
そこで今回は、Figmaをグループ全体でより効果的に活用することを目的として、ご相談させていただきました。
伊藤様：UIデザイングループには現在UIデザイナー8名・フロントエンドエンジニア2名の計10名が在籍していますが、当社が扱う製品の数を考えると、これは決して十分な人数ではないと思っています。
1人のUIデザイナーが3〜4つの製品開発を並行して受けもち、さらにそこにデザインシステムの管理などグループ内の業務も加わるため、グループのリソースは常に逼迫しています。加えて、顧客にいち早くソリューションを届けるためにも年々開発のスピード感が増しているため、品質と効率の両立は、グループにおいて重要なテーマのひとつでした。
片田様： Figmaについては、グループとして導入を行いデザインシステムの構築も行ったものの、我々がFigmaを使いこなせていなかったり、グループメンバー間でも習熟度の差があったりと、より活用を推進する必要を感じていました。個人的に、プラグインを作ることでFigmaの既存の機能だけでは解決しきれない課題を解決したい気持ちもあり、今回のプロジェクトを提案しました。
総合デザインセンター デザインユニット UIデザイングループ
副主任 片田 汰架 様
伊藤様：正直なところ、Figmaの導入を終えて一息つけたところでしたし、部全体のリソースが逼迫していたこともあり、私としては「なぜこのタイミングで新たなテーマを？」という思いもありました（笑）。ただ片田の強い思いに背中を押されて参加を決意し、結果的には非常に意義のある取り組みになったと感じています。
——実際のプロジェクトは、どのように進めていったのですか？
橋詰：最初に、「このプロジェクトは、将来を見据えた投資的な取り組み」という前提を共有いただいていました。そこで、単にプラグインを開発して終わりではなく、その先の活用や環境改善を見据え、まずは課題の可視化から着手する進め方をご提案しました。
飯沼：プロジェクトは半年間にわたり、前半は課題抽出と解決策の検討、後半はプラグインの設計・開発という二段構えで進めました。
まずはFigmaの利用状況をヒアリングし、UIデザイングループのメンバーの皆さまが感じている課題を整理。課題の解決策を検討していく中で、プラグインを開発することで解決できるかもしれない課題が見つかりました。
その後、開発対象となるプラグインの要件を明確にし、テクニカルプロトタイピングで最低限必要な機能を実装。週次の定例会議の場でプロトタイプのデモを評価していただき、作ったものが本当に課題を解決できるかを検証しながら開発を進めました。
現場へのヒアリングを通じて見えた「カラー（色）管理」の課題
——ここからは、プロジェクトの具体的なフェーズを振り返っていきます。まずは、課題抽出の段階について教えてください。
飯沼：Figma活用に関する課題を洗い出すために、「現在の課題」「その課題に対して試したアプローチ」など、5項目ほどのヒアリングフォーマットを用意しました。
片田さん、伊藤さんにそのフォーマットを基にグループ内へヒアリングを行っていただき、最終的に40〜50件の具体的な課題が挙がりました。そこから優先順位をつけて、解決策の検討を進めていきました。
伊藤様：プラグインの題材にとなった課題以外にも、多くの課題に対し解決策を提案いただけたことがありがたかったです。また、Figmaの標準機能や既存のプラグインで解決できる課題も多数あったことが印象的でした。
手間さえかければ対処できるような課題は、解決されず放置されてしまうことも多いので、この機会に棚卸しができ良かったと思っています。
片田様： ヒアリングの結果で特に印象的だったのは、最終的に今回プラグインを開発していただくことになった「デザインシステム上でのカラー（色）の取り扱い」に関する課題です。
島津製作所で開発しているソフトウェアは、主にWeb用とWindows用のプラットフォームがあり、それぞれカラーネームが異なります。そのなかで、Figma上でデータを作成する際に別の案件データを一部流用などしていると、別のプラットフォームのカラーが紛れ込んでしまうことがあるんです。
そうなると、プラットフォームはWebであるにも関わらず、実装者が参照する情報はWindows用のカラーネームになる、という食い違いが生じるわけです。
伊藤様： 現状この間違いに気がつくには、デザイナー自身がカラーネームのプロパティを確認するしかないのですが、正直手間がかかります。そもそも、カラーネームを読んだところで気がつけるかどうかも怪しいです。
デザインシステムを導入したものの、それが正しく運用されなければデザイン品質の向上にはつながらないので、課題意識を持っていましたね。
──この課題の解決策として、今回はFigmaのプラグインを使ったということですね。Figmaのプラグインは、どのような特徴をもったツールなのでしょうか？
飯沼：Figmaのプラグインは「上級者向け」という印象を持たれることもありますが、実際には多くのユーザーが日常的に活用しています。オープンコミュニティにも多数のプラグインが公開されており、島津製作所様でもすでに活用されていました。
ただ、自分たちのニーズに完全にマッチするものが見つからないケースもあるため、必要に応じて自作するという選択肢も出てきます。今回も、まさに「欲しいものがなければ作る」というところに開発の動機がありました。
とはいえ、開発にはエンジニアリングスキルが求められるので、開発経験の少ないデザイナーの方には、ハードルが高いこともあるかもしれません。
テクニカルプロトタイピングによって、スピーディーな開発を実現
——今回制作したプラグインは、どのようなものなのか教えてください。
飯沼：開発したプラグインは、対象のプラットフォーム以外のカラーが誤って使用されていないかをチェックすることができるものです。
プラグインを起動すると、Web用とWindows用のどちらのプラットフォームを基準としてカラーを検出するか選べるようになっていて、「実行」ボタンを押すと検出処理が実行されます。
適切でないカラーが割り当てられているレイヤーは一覧表示され、該当レイヤーをクリックすると、Figma上で対象をズーム・選択してくれるので、正しい色に修正できます。最終的に一覧からエラーがすべてなくなれば、ページ全体が適切なカラーで構成されていることになります。
実際に開発したプラグインのイメージ
——実際の開発プロセスはどのようなものだったのですか？
飯沼： 本格的な開発に入る前に、テクニカルプロトタイピングを2段階で行っています。
最初は、非常に簡易的なプロトタイプを用いて、実現したい機能の方向性が合っているかどうかを確認しました。見た目のデザインは最低限としつつ、主要な動作や仕組みが伝わるレベルで、「こういう動きを想定していますが、方向性として合っていますか？」という形で確認を行いました。
方向性が固まった段階で、より精度の高い仕様書の作成に着手しました。それと並行して、UIや挙動をより詳細に反映したプロトタイプも作成。初期のプロトタイプでは見えなかった細かな部分を設計し、実際の利用イメージを具体化していきました。
橋詰：このような初期プロトタイプがあったことで、方向性に大きなズレがないことを確認した上で、本格的な開発フェーズに進めることができましたね。
飯沼：その後は週1回の定例ミーティングにて、毎回デモをお見せしながらフィードバックをいただきました。「こんな感じはどうですか？」とその場で複数パターンをお見せしながら、最終的な仕様を決めていきました。
片田様： 開発は非常にスムーズに進めていただきました。週次の打ち合わせ開始時に、全作業に対する現状の進捗状況を可視化してくださったので、スケジュール感がわかり、安心して打ち合わせに臨むことができました。
伊藤様： フィードバックがその場で反映されるスピード感には驚きました。実物を見てみないと判断できないことは多いので、その場で話しながら修正をいただけるのはとても良かったです。
心配していたのは、定例の打ち合わせ以外に、こちらで作業がどれだけ発生するかという点でした。
しかしプロジェクトを進めてみると、フィードバックしやすいよう事前に情報を整理いただいたおかげで、ほとんどの議題は定例の時間内で消化できましたし、こちらの宿題作業も少なくスムーズに進めていただけました。
また、今回開発したプラグインは検出条件やエラーハンドリングなどの内部処理が肝でしたが、日々の製品開発業務では、UIデザイナーの私がその部分について決定権を持つ機会はなかなかありません。ソフトウェア開発の知識もあまり無いので、仕様の伝達やレビューを自分ができるのか正直不安もありました。
ただ、飯沼さんに仕様書の作成からレビューまで丁寧に進行いただくなかで、徐々に不安が解消されていきました。自分は普段Figma等で作成したラフスケッチなど絵を媒体に情報整理することが多いため、絵ではなくテキストベースで仕様を握っていくソフトエンジニア的なプロセスも新鮮で勉強になりました。
飯沼：今回はバージョン管理をしやすいGitHubのドキュメントで仕様書を管理し、打ち合わせでは前回からの差分を明示して共有しました。絵や図解するだけでは表現しきれない仕様も、効率的に伝えられる手法だと思います。
GitHubを活用し、仕様書ドキュメントの差分を確認
片田様： 今回は飯沼さん、橋詰さん、そして営業の猿渡さんという3名にご参加いただきましたが、私たちの課題にしっかりと向き合いながら丁寧にプロジェクトを進めていただきありがたかったです。
皆さんがとても良い雰囲気で意見を言い合ったりされているのを見て、こちらも気を遣わずにお話しすることができました。最終的にプラグインを作成することで解決したカラーの課題だけでなく、Figma運用時の多くの課題を解決することができて感謝しています。
実装者とのやりとりがスムーズになり、実装ミスや手戻りも削減
——完成したプラグインですが、実際に活用されてみていかがでしょうか。
片田様： 従来は手作業で一つひとつ確認していたカラー設定の誤りを、ツール上で一括で検出できるようになりました。結果、確認にかかる時間が減少したため、詳細なデザイン調整やプロトタイプを用いたユーザビリティテストの実施に時間をかけられるようになり、品質向上につながっている実感があります。
これまでは、用途の異なる色が混在しても見た目での判断が難しく、意図しない実装ミスや確認の手戻りが発生しがちでした。今回のプラグインがデザインシステムの正しい適用につながり、実装者とのやり取りもスムーズになりましたね。
現在は社内メンバーにツールを展開中で、デザイン制作の最終確認フェーズなどでの活用が進んでいます。
——今後に向けては、どのような展望をお持ちでしょうか。
片田様：Figmaを導入し活用が進んだことで、実装者との連携は以前より取りやすくなったと感じています。一方で、「齟齬なく、スピーディーにプロジェクトを進める」という観点では、グループ全体でもまだ課題があります。
現状では、メンバーそれぞれが自分のやり方で実装者と連携を取っている状態で、まだ標準的な方法が確立されているとは言えません。
個々の工夫やノウハウを属人化させず、組織の知見として蓄積・共有していくことで、開発現場とのコミュニケーション品質を高めていき、グループ全体のアウトプットの質向上につなげていきたいと考えています。
伊藤様： UIデザインは、デザイナーひとりで完結するものではありません。そのため、どのように作業を分担し、関係者と連携していくかに関心を持っています。
伊藤様：実装フェーズにおける実装者との連携は徐々に良い方向に向かっている実感がありますが、設計フェーズにおけるソフトウェア設計者との連携については、改善の余地がまだまだたくさんあると考えています。
多くのプロジェクトは、ソフトウェア設計者が検討した仕様をもとにUIデザイナーが画面案を作成し、設計者がそれをレビューする…というプロセスを踏みます。しかし、製品を理解する上では化学知識・装置仕様・ユースケースなど様々な背景知識が求められるため、仕様をUIに落とし込む際に度々齟齬が生じることがあります。
その齟齬をすりあわせてUIに落とし込むプロセスを早く回すため、現在担当しているプロジェクトでは、ソフトウェア設計者にもFigmaの編集権限を渡し、私が提案した画面に対して直接修正を加えてもらうという運用を2〜3カ月試してきました。結果として、改善サイクルが加速し、ソフトウェア設計者の意図や背景もより正確に伝わるようになったと実感しています。
事業部のメンバー自身がFigmaを活用し、簡単なサービス画面を自分で作れるような状態もひとつのゴールではないかと考えています。そのために私たちが何を提供できるか、考えていきたいと思っています。
——貴重なお話をありがとうございました。これからも長期的なパートナーとして、島津製作所様のお取り組みをお手伝いできればうれしいです。（了）
