HP社はDev Modeを活用してデザインからコードまでのワークフローを1.5時間短縮

HP社は、エレクトロニクス業界の真の巨大企業で、プリンター、ノートパソコン、ゲーミングシステムなどのテクノロジーを開拓してきました。実際、同社の出発点であるパロアルトの小さなガレージは、「シリコンバレー誕生の地」としてカリフォルニアの歴史的ランドマークになっています。しかし、サービスの範囲が広大し、それぞれに独自の顧客基盤があるため、イノベーションを継続しつつユーザーすべてに一貫した体験を維持するのは困難となっています。そこに、HP社のデザインシステムVeneerが登場します。HP社の担当チームに、以下をどのように実現したかを伺いました。

• 70以上の製品に対応する多層のデザインシステムを構築して、チームの分断を解消
• Dev Modeを使用して、開発者とデザイナーが週平均で98分を節約
• Code Connectを実装して、 Veneerの採用を拡大し、開発者のコンテキスト切り替えを削減
• 年間の作業時間短縮で500%のROIを達成し、Veneerで開発時間を50%短縮

あなたのチームについて、そしてHP製品の品質維持についてのお考えを教えてください。

HP社のデザインシステムストラテジスト、Gilson Hoffmeister氏: 私たちのチームは、デザインの有効化から、Android、iOS、Windows、ウェブのような特定のプラットフォームまで、HPデザインシステムのエンドツーエンドのエクスペリエンスを管理しています。

HPのチームがあらゆるお客様のために、高品質で一貫性のある優れた体験を効率的に作成できるよう注力しています。しかしこれは大変なことです。HPは100を超える製品ラインを扱っている大企業です。HP製品それぞれに独自のDNAがあります。業務用PCには、日常使用を楽にする機能が求められます。ゲーミングアクセサリには、ユーザーが自慢できるような楽しくて高品質のものが求められます。

HP社のシニアデザインマネージャー、Andrei Garcia氏: HPの多くの事業部門には課題があり、それぞれが独自に仕事をして独自のニーズに取り組んでいました。単独で仕事をすることも少なくなく、HPのデジタル的なイメージがどのようであるべきかについて、あまり調整がされませんでした。意図的にそうしたわけではないにしても、1つの基準の下に皆をまとめる必要がありました。

HP社のデザインシステム、Veneerについて教えてください。

Gilson氏: HPの第一の目標は顧客満足です。Veneerを使用することで、すべてのソフトウェアに一貫性が感じられ、うまく協調できるようになります。さまざまなお客様にとってすべてが簡単になる、同じデザインガイドラインを全員が使用できます。

Andrei氏: Veneerは、デザイナー、開発者、ライターなど、全員に開始のベースラインを示して、ソフトウェア開発工程の全体にわたってサポートします。単なる「フロントエンドのコンポーネントライブラリ」として開始されたものが、時間を節約して不必要な作業をなくし、まとまりを生み出す多面的なシステムへと進化しました。

Veneerの採用をどのように測定していますか?

Gilson氏: Veneerの採用は、量的な指標と質的な指標の両方で測っています。Figmaのライブラリアナリティクスのエンゲージメントデータを分析し、当社の開発パッケージのダウンロード数を追跡することで、このシステムがどのくらい広く効果的に使用されているかについて分析情報を得ています。たとえば、アイコンライブラリでは、HP全体で320のチームにより915のアイコンコンポーネントが利用されて、週平均で85,000回の挿入があります。広く使用されている証しです。面白い事実として、省略アイコンが最も多く使用され、120万回挿入されています。

採用を推進することがなぜ重要なのですか?

Gilson氏: VeneerによりHP全体の製品開発が迅速になりすべての一貫性が保たれるため、その使用が鍵になります。Veneerは、デザイナーや開発者の出発点になります。コンポーネントを一から作るには時間がかかりますが、その作業が取り除かれます。さまざまな状態やアクセシビリティのベストプラクティスが組み込まれており、Veneerでテスト済みのことを担当チームが開発してテストする必要がありません。その結果、ビジネスについて考える時間的余裕が生まれ、本当に必要なことに専念できます。

Gilson氏: たとえば、2023年の1月から12月までに、Veneerを使用することで、コンポーネントを作っていたときと比べて、プロジェクトの時間を500%節約できました。各プロジェクトでは自分たちで構築するのではなく、Veneerの作成済みコンポーネントを利用しました。Veneerがコスト削減と効率の向上に大いに役立ち、投資に対する価値を5倍にしたことを示しています。

Andrei氏: チームがVeneerを使用しなければ、製品の一貫性や拡張性、開発効率が大きく下がります。エンジニアリング担当VPのGaurav Royによると、いくつかのプロジェクトでは、Veneerを使用することで開発時間を50%短縮できたということです。このベンチマークは外部での比較にも表れています。たとえば、デザインシステムを使用した場合、ゼロからのスタートと比較してシンプルフォームの開発にかかる時間が47%短縮したというIBMの調査があります。

Dev Modeの利用前、Veneerの採用促進であなたのチームにはどのような課題がありましたか?

Andrei氏: 大きな問題だったのは、これは現在も続いていますが、HPのサブブランドが多数あることです。1つの層のデザインシステムでこの状況に対応するのは不可能です。マルチブランドの戦略に合うようにVeneerを柔軟に構成するのには時間がかかりました。マルチレベルで採用しなければ、さまざまな製品や分野全体で連携と一貫性を推進することはできなかったでしょう。

Gilson氏: デザイナーにVeneerを使ってもらうのは簡単ではありませんでした。彼らは製品とユーザーのことを非常に気にかけているからです。構築してきたものを外部の何かが動かそうとすると、待ったがかかります。そのアプローチによりユーザーとの関係が傷つけられるかもしれないと彼らは考えるからです。

大きな課題は、統一されたデザインシステムがいかに役立つかを示すことでした。どのコンポーネントを使うか、どの色を選択するかなど、デザインを自分で決めることに多くの人が慣れていました。このようなタスクを手放してVeneerを使用すれば、ビジネスロジックやデザインパターンといった、プロジェクトのより創造的で独自の部分に専念できることを示す必要がありました。

開発者はコード再利用のメリットを理解していたので、Veneerを採用することは比較的容易でしたが、課題はまだありました。HP内で使用されていた40を超えるUIフレームワークとフロントエンドテクノロジーの全体で、Veneerが効果的であるようにすることです。

HP社のチームでは、デザインシステムと一緒にDev Modeをどのように利用してきたか教えてください。

Dev Modeは、開発者がFigma内のデザイン仕様に効率良くアクセスできるようにしました。広範囲で堂々巡りの議論やミーティングが減って、デザインからコードへの移行がこれまでになくスムーズになりました。

Andrei氏: たとえば、楕円形コンポーネントの対応を追加した場合、パディングとマージンの調整が必要になります。Dev Modeのアノテーションを使えば、デザイナーは開発に変更内容を簡単に指し示すことができ、フローが効率的です。

変更内容を比較する機能は、あるデザインバージョンが別のバージョンにどのように変わったかを確認するのに非常に便利です。特に既存の製品をアップデートしている場合です。全員が同じページを見ることができ、アップデートがスムーズに進みます。

その他の便利な機能は、デザインの部分を「Ready for Dev」とマークできることです。作業を開始できる部分が開発者に正確に伝わるため、混乱が少なくなり、全員が仕事の遂行に集中しやすくなります。

マルチプロダクトの提供に伴う課題に対処するために、Dev Modeのバリアブルをどのように利用していますか?

Andrei氏: バリアブルを使用して、プリミティブトークンやセマンティックトークンにリンクしています。これにより、さまざまなテーマや、ライト、ダーク、ハイコントラストなどのモードで、見事に拡張できます。

さらに重要なのは、これらのバリアブルがデザイン要素とコーディング環境間に不可欠のリンクを作っていることです。当社の基盤チームは、自動化を促進してデザインからコードへの移行を効率化するなど、Veneerの核心要素を管理しています。Figma APIを使用してこれらのバリアブルをデザインから直接読み取ることで、デザインと開発をつなぐ堅牢な橋渡しができています。デザインで使用されたバリアブルが比率を変えずにコードに変換されるため、デザイナーと開発者の両方が文字どおり同じ言語を使えるということです。

この連携は、開発工程を効率化するだけでなく、チーム間のコミュニケーションも強化するため、デザイン仕様の実装がより正確になります。このようにデザイン要素とコード間の直接のやり取りを維持することで、不整合を大幅に減らして、デジタル製品の全体的な品質と拡張性を向上させています。

Code Connectの早期導入者として、ご意見をお聞かせください。

Gilson氏: Code Connectは、これまでで最も期待した機能です。セットアップは非常に簡単で、1人のエンジニアが2週間かけただけです。

さらに時間を短縮するために、コンポーネントの変更などの工程をさらに自動化しています。たとえば、すべてのアイコンが「編集可能」の状態 (複数レイヤーと、線、長方形、円などのさまざまな要素を使用) にあるソースファイルがあるのですが、このソースファイルの変更内容を自動化により監視しています。変更内容をフラットにしてSVGコードで辞書を作成します。これを使用してFigmaのアイコンライブラリを作成し、開発と共有して開発ライブラリに追加します。このソースファイルにアイコンが追加されるたびに、自動化によりアイコンライブラリとCode Connectに自動的に追加されて、開発ライブラリに転送されます。

Gilson氏: 当社には各コンポーネントに関するドキュメントが掲載された巨大なウェブサイトがあり、開発者はそこでプロパティの確認や、コードスニペットが含まれるライブデモの入手もできます。以前なら、コードスニペットを探すために、時間をかけてウェブサイトにアクセスする必要がありました。今はCode Connectを使用して、Figmaのコンポーネントをクリックするだけで、すべてが適切に設定されたコードスニペットを確認できます。これにより、Veneerの開発と統合が非常にスピードアップします。

Andrei氏: Code Connectはデザイナーにも大いに役立っています。コーディングの仕組みがわかりやすくなるため、より正確なプロトタイプを作りやすくなります。Figmaのプロトタイプ機能だけを使用するより効果的です。

Dev Modeに対してあなたのチームはどのような反応をしていますか?

Gilson氏: HPでDev Modeを使用している400人を対象に、アンケートを実施しました。その大多数は開発者です。アンケートのフィードバックは、圧倒的にポジティブなものです。「Dev Modeによりルーティンタスクに費やす時間を削減できるので、機能の強化に専念できる」と回答している開発者もいれば、「コードスニペットを直接生成して使用できるので、開発サイクルがかなりスピードアップしている」と言っている開発者もいます。

コンテキストを変更することなく、さまざまなウェブサイトにアクセスして適切なコードスニペットを入手できることで、1人当たり週平均で98分の時間節約もしています。

こうした数字は、Dev Modeの導入によりチームの大多数のワークフローが大きく改善したことを示しており、かなりの割合で、仕事の効率、スピード、質が向上したとレポートされています。この定量的フィードバックは、Dev Modeの目に見えるメリットを明らかにし、HPの開発工程にもたらす価値を強めています。

Andrei氏: Dev Modeを使用することで、我々の意識も大きく変わりました。デザイナーと開発者が同じ言語を使えて、製品のビルド工程を見直すうえで役立っています。ハンドオフという考えがなくなり、デザインと開発のワークフローについて話し始めています。そのワークフローはより流動的になり、製品の開発工程が加速しています。