エンジニアもデザイナーに 開発スキームを大胆に変革

プロダクト開発の在り方を変える、Figmaの共創体験

ヤマトホールディングス傘下のグループ企業をはじめ、さまざまな業種業態の一般企業へのシステム開発・運用を担う「ヤマトシステム開発株式会社」。デザインに限らず「プロダクト開発ツール」としてのFigma本来の強みを余すところなく取り入れ、開発のスキームを大きく変えていったといいます。どのように導入が進んでいったのか、デジタル開発運用本部 グループシステム部マネージャーの吾田 秀樹氏、アソシエイトの堤 圭佑氏に伺いました。

吾田氏「Figmaを初めて使ったのは、関連会社であるヤマトオートワークスの車両管理システム改修プロジェクトです。2020年に同システムをリリースしたのですが、ユーザーにとって使いづらいUI/UXであったことから、機能追加に合わせてデザインも刷新することになりました。その際協力してくれたデザイン会社がFigmaを使っていたことがきっかけで、私たちもFigmaを使い始めたという経緯です。

同プロジェクトは、当社にとってチャレンジングなものでした。今までは要件定義から入ることが多く、その要件の背景にある意図がわからないまま開発が進んでいたため、実際に形にしてからイメージと違う、やりなおし、という繰り返しが起こっていました。しかし今回はエンドユーザーへのヒアリング、つまり要求定義から行い、それをFigJamで共有。マインドマップなどを活用して、本当に必要な機能をクライアントと一緒に決めるところからスタートし、要件を具現化していきました。また並行してFigmaでデザインをつくり、画面イメージのすり合わせも実施。当時２～３日に1回は対面で打合せをしていましたが、そのたびに前回の要望をふまえたデザイン案を共有し、オンライン・オフライン両方で会話しながら形にしていきました。結果的に、車両管理システム改修プロジェクトでは、27.8％もの生産性向上につながっています。アジャイル的に要件の具現化と合意形成を繰り返すことで要件定義を短縮するこの手法を使い、別のプロジェクトでも18.2％の生産性向上を実現しました」

吾田氏「この結果には、クライアントとのコミュニケーションコストが大きく削減できたことも寄与しています。お互いに資料をつくって持ち寄り、レビュー、フィードバック、という流れではなく、その場で一緒にFigJamを使いレビューできます。またドキュメントだけでは仕上がりの想像がつきにくいものですが、Figmaでつくった完成イメージを見れば『もっとこうしたら』というアイデアも浮かんできます。設計段階でクライアントの要望を吸収できるため、納得感があり、プロダクトのクオリティ向上や開発後半での工数削減につながったと感じています。

クライアントにも編集権限を付与していたので、FigJam上の画面イメージやメモを使って、先方内での検討や説明用の資料作成にも展開されていました。同じツールの中でさまざまな活用がしやすいFigmaならではの使い方ですよね。『こんなに便利なツールはない』と、非常に気に入っていただいています」

堤氏「ベースとなるデザインや難しいところは協力会社のデザイナーに対応してもらいましたが、このプロジェクトのほとんどの画面デザインは基本的に私と吾田で対応しました。私はエンジニアとして入社し、デザインの経験は全くありません。社内にもデザイナーはいませんので、一から覚えていく状態でした。しかし協力会社の方に数週間レクチャーを受けただけで、その後は自分で触ったものをレビューしてもらえるくらいにスキルアップできたのです。環境構築がいらない手軽さと、操作がしやすく、使っていて楽しいツールであることは、Figmaの大きな魅力です」

吾田氏「目指したのは、幅広い年齢層のエンドユーザーが、マニュアルを見なくても直観的に操作できるUI/UX。めざましく改善されたデザインが、そのまま実装されたことは革新的でした。改修後にエンドユーザーにヒアリングをすると、とても見やすく洗練されたデザインで、使いやすいと好評です。そのためクライアントにも大変ご満足いただいており、積極的に販売したいという姿勢に変わってきたそうです。経営層の方からも非常に高い評価をいただいています」

修正作業の削減でコーディング期間を短縮

デザインやコミュニケーション面でのメリットが注目されるFigmaですが、実装においてはどのような影響があったのでしょうか。エンジニア目線での効果を伺いました。

堤氏「開発面での課題の1つに、レビューでの手戻りの多さがありました。以前は要件定義段階での画面イメージをエクセルやパワーポイントでつくっていたため、そこからコーディングすることにまずパワーがかかります。さらに、実際に形にしてクライアントに見せたらイメージとギャップがあり、開発の終盤で修正が発生することも珍しくなかったのです。グループ会社の開発を手掛けることが多いという特性上、関係性が近く要望を言いやすいことも影響しているかもしれません（笑）。

Figmaでつくった画面イメージはCSSやコードの参考となる情報が表示され、プラグインも充実しています。デザインと実装のギャップが少なく、できあがったものもすでにクライアントと合意形成が取れているため、結果的に手戻りが少なく済むという効果は大きいですね。変更管理もエクセルなどを使っていたときよりずっと早く、クオリティの向上に寄与していると感じます」

吾田氏「フロントに立っている営業や企画のメンバーと、開発をするエンジニアとのコミュニケーションにも役立っています。同じプロジェクトのメンバーでも認識違いによる間違った実装、やり忘れが発生しがちでしたが、URL1つでつくってほしいものを共有できるFigmaは、関係者全員の目線合わせに非常に有用です」

堤氏「私はもともとバックエンドのエンジニアだったので、HTMLやCSSにあまり馴染みがなかったのですが、Dev Modeを活用することでコーディングが高速化しました。今ではもう欠かせない存在です。最近はデザイナーとしての仕事が増えてきていますが、オートレイアウトを使いエンジニア視点でプログラムしやすいデザインにするなど、開発全体のスピードアップを意識しています」

開発会社におけるデザインの重要性とは

現在ではUI/UX改善のアクションプランを立ち上げ、Figmaの活用が広まっている同社。堤氏のようにエンジニアからデザイナーへと活躍の場を広げるメンバーも登場しています。しかし導入時には、システム開発会社ならではの苦労もあったようです。

吾田氏「当社はシステム開発に特化した会社で、デザイナーという職種は今まで社内におらず、デザインに対してお金や時間をかけるという文化が根付いていません。上層部だけでなく、一緒に働くメンバーやパートナー企業も同様に、なかなか理解を得にくい環境でした。しかし上司に堤がデザインしたFigmaの画面イメージと実際の画面を見せて、同じクオリティのものが動いていること、改善されたデザインでプロダクトの価値を向上させたことを熱くプレゼンしたことが、Figma導入の決め手になったと思っています」

堤氏「当社のメンバーは慎重なタイプが多いので、『本当に使っていいの？』という反応もありました。Figmaのカラフルな画面を使ってデザインしたり、FigJamでわいわいコミュニケーションしていたりするのが『遊んでいるように思われないかな？』と不安になる人もいるようです。私は未経験からデザインができるようになり、今まで外部にデザインを発注していたコストを削減できている点でも、会社に貢献できていると感じています。Figmaでデザインする楽しさやメリットを若手のメンバーを中心に伝えていくことで、現場から社風を変えていこうとしています」

吾田氏「堤は新入社員向けにFigmaの勉強会を主催するなど、積極的に動いてくれています。ふたりでFigmaの標準ツール化を目指して、社内の上下からすそ野を広げているところです。Figmaは開発だけでなく、提案、企画、共有、フィードバックなど、どんな部署でも共通でやっている業務に活用できる汎用性の高いツール。会社全体での効率化によい影響を与えられるのではないでしょうか。

そのほかに苦労した点としては、パソコンのスペックですね。セキュリティの観点から通常シンクライアント端末を使用しており、端末自体にグラフィックボードが入っておらず、最初はFigmaが動かなかったんです(笑)。今は端末でもセキュアな運用ができるようになりましたが、開発会社ならではの盲点だったかなと思います」

開発の半自動化で競争力の強化を目指す

これからどのようにFigmaを活用していきたいのか、おふたりに展望を伺いました。

堤氏「車両管理システム改修プロジェクトはFigmaありきで始まった案件でしたが、確立された開発手法の中に新しいものを組み込むのは一筋縄ではいきません。すでにある一部のシステムでは専用の画面開発ツールを使っているため、Figmaは適用できないだろうという固定概念もあります。しかしコード化はできなくても、画面イメージをFigmaでつくってしまえば、今後の開発の要件定義などで活用できるはず。頭を柔らかくして新しいことを取り入れていくために、まずは標準ツール化を目指します。どうやったら一番効率的な使い方ができるのか、ルールを確立させながらFigmaの活用を広げていくことに力を入れていきたいです」

吾田氏「私が目指しているのは、開発プロジェクトの半自動化です。まずはじめの一歩として、デザインシステムをつくっています。今はUIカタログであるStorybookを使って各コンポーネント部品の開発を行っていますが、そのコードをCodeConnectで紐づけることができれば、コーディングまでをFigma上で完結できます。画面の切り替えなくデザインとコードを確認できることで、コーディングのスピードは格段に速くなるでしょう。次のステップとして、バックエンドのJavaプログラムのコーディングやテストについても、AIやテスト自動化ツールを取り入れることで、画面設計からテスト完了までの大半を自動で行うフローを目指しています。これができれば、通常のウォーターフォール的な開発でもクライアントの希望を実現するまでの時間が短縮でき、より高品質で安価にサービスを提供できます。ゆくゆくは、この手法を当社の強みとして確立させていきたいですね」