UI/UX デザインプロセスの効率化と品質向上を実現した JEITA 最新 UI タスクグループとアドビの連携

一般社団法人 電子情報技術産業協会（JEITA）のデザイン委員会に属するヒューマンインタフェースデザイン（HID）専門委員会は、2020 年に 4 社のメンバー企業から構成される最新 UI タスクグループ（TG）を設置。初年度は、テレコミュニケーションをメインテーマに UI デザインツールの調査を行いました。関連ツールが多数あることから、利用状況を把握するために計 17 社の UI デザイナーの使用ツールを調査したところ、Adobe XD が多数の企業に様々な場面で使われていることが明らかになりました。

「活動の締め括りとなる 2021 年は TG 活動を通じて自分たちの役に立つ成果を出したいと考えていました。ほぼ全ての工程において Adobe XD が多くの企業に使われていたため、そこを深堀りすれば実際に業務に役立つ知見を得られるだろうと、活動方針が決まりました」と 2021 年のリーダーを務めた富士フイルム デザインセンターの末廣氏は語ります。

2020 年にアドビとつながりができた時からアドビとの協業は意識しており、ツールマップを作成してからは、協業がより有益になるだろうという確信が深まっていったと 2020 年のリーダーを務めたオムロン ヘルスケア グローバル事業統轄部 デザイン部の濱口氏は説明します。「UI デザインプロセスの中の困りごとがあるわけですが、XD で解決できるところを模索したいと言ったら応えてくれるだろうという期待がありました」。そこにアドビ側からの申し出があり、共同ワークショップが実現したのです。

アドビとの協業について、参加したメンバーは本当に良かったと振り返ります。「普通、ツールの使い方を調べる時はネット等で調べて自分で試してみるのですが、これが一番最適な方法なのか不安を持ちながら進めています。今回は、もっといいやり方があるのか適宜アドビの方に確認しながらできたので、自信を持って学べました」。

デザインデータ共有による開発チームとの関係改善

最新 UITG に参加した各社は、デザインプロセスから工程を一つ選択し、アドビとの共同ワークショップに臨みました。富士フイルムのチームの選択は『デザイン指示・データ共有』の工程です。

選択の理由として末廣氏は、「社内の他部署と仕様をすり合わせる機会が多く、コミュニケーションの齟齬や、仕様の共有方法が課題になっていた」ことを挙げています。この件に対するアドビからの提案は XD を使った情報共有でした。座標の指示、パーツ一覧、動きなど、従来は情報の種類ごとに存在していた資料が XD に集約されたため、開発からの問い合わせが減り、コミュニケーションコストが削減されたそうです。

「特に弊社では開発スピードに拘っているのですが、仕様を正しく理解して、より正確にデザインを実装してもらうことに、今まではすごく時間がかかっていました。そこに、XD で情報を共有する方法や、他のツールも含めてワークフローをより楽にする手段を教えていただきました。以前は凝り固まったイメージが頭にあって、デザインするツールとして XD を使っていたのが、今では柔軟な使い方ができるようになり、本当に開発チームとも上手く関係を築けていると実感しています」と富士フイルム デザインセンターの今道氏は語ります。

XD はノンデザイナーも使えることが、情報共有には大きいと末廣氏は指摘しています。「トレーニングは必要ですが、簡単なので慣れてしまえば皆使える状況になります。XD ドキュメントを共有するだけで、コミュニケーションが本当にとりやすくなりました」。

デザインシステム導入に必要な知識を習得

オムロン ヘルスケアのチームは、ハード中心のメーカーながら、サービス分野に拡大するビジネスの変化に対応すべく、『デザインガイドライン』の工程を調査対象に選びました。少数の UI/UX デザイナーだけで、企業としてのアイデンティティーを持ったソフトをコストをかけずに出すために、デザインシステムや UI キットの採用は必須だと感じていたそうです。

循環器疾患事業統括部 循環器疾患商品事業部の平澤氏は、「アドビから公開されている UI キットの情報を教えていただき、データの提供の仕方やコンポーネントの名前の付け方など、大いに参考になりました。他にも、デザインシステムの活用や他部署へ浸透させる戦略についてのレクチャーも受けることができ、デザインシステムの運用に活用できそうだと思いました」と話します。

濱口氏は XD でどこまでできるのかを学べたことがありがたかったと言います。「XD で何でもできますとか、できることだけ紹介されるのではなくて、XD でできるのはここまで、これはできない、足りないところはこういった補完の仕方がある、といったところまで話していただき、デザインシステム活用に欠かせない知識を学べたと思っています」。

プロトタイプ導入によりアイデアを素早く価値検証

日立製作所のチームは『プロトタイプ』の工程に取り組みました。サービスのアイディアを創出したとき、検証にプロトタイプを利用できれば、その案がうまく機能するか、価値があるかをもう少しアジャイル的に確認できるのではという思いからの選択です。

研究開発グループ 社会イノベーション協創センタ プロダクトデザイン部の大石氏は、「従来は検証にデバイスを使っていたため時間がかかっていて、画面だけでなくフィジカルなインタラクションについてもクイックに確認したいという思いがありました。物理的なコントローラーやデジタルデバイスと XD のプロトタイプを連動させた事例を共有していただいたおかげで、デジタルとフィジカル両方のインタラクションを短時間で構築できる手法を確立できたかなと思っております」と振り返ります。

プレゼンテーション作成から学んだ多くのヒント

東芝のチームは『プレゼン』をテーマに選びました。XD のデモ動画を見たときに、本当に XD でこれだけのプレゼンテーションが作成できるんだという驚きがあり、簡単に使えて魅力的に見せられる技を習得したいと思って臨んだそうです。

CPSx デザイン部 デザイン開発部 ユーザーインターフェイス担当の小林氏は、幅広い学びがあったことを強調します。「本当はこうしたかったんですけどどうすべきですか？とか、こんなふうに動いちゃうんですけどなぜでしょう？とか、一つひとつ一緒に根気強く解決してくださったのがすごくよかったです。結果として、プレゼンテーションだけじゃなく、日々の業務に役立つヒントがいっぱい自分に残ったので、ものすごく実のある活動になったと思っています」。

同じくユーザーインターフェイス担当の高橋氏もこれに同意します。「私もプレゼンテーションという XD の使い方を学んだことで、業務の中でも説明を入れやすくなったり、ワークショップで身につけた動かし方のおかげで、プロトタイプの動きを表現するスキルがとても向上したと感じています」。

東芝のチームは、XD でプレゼン資料をつくるために学んだ知識が業務で大いに活躍したことと、デザイナーの多くが XD を使えるだろうという考えから、習得した内容を note に記事として公開しました。「思った以上に反響があったので、共感して貰えたのではないか」と小林氏は話しています。

JEITA とアドビが協業を進める意味

最新 UITG に参加したメンバーが口を揃えるのは、日々の業務が忙しくツールの勉強に時間を割くことが難しい中、アドビから手厚い支援を受けられたおかげで、業務改善に直接役立つ成果を得られたという点です。また、末廣氏は「セキュリティ面など厳しいルールの中でツールを使っているインハウスデザイナーのことを、ツール提供側であるアドビに知っていただけたのが嬉しい。とても貴重な機会になった」と話しています。

2022 年 HID 専門委員会の委員長を務める日立製作所 研究開発グループ 社会イノベーション協創センタ プロダクトデザイン部の玉山氏は、JEITA がアドビと協業する意義について次のように語りました。

「エンタープライズが使用するソフトの条件を考えると、ちゃんと企業として使える体勢を整えていただいているのはアドビのすごく大きな価値だと思っています。製品とかサービスが少人数でつくれるものではなくなってきて、いろんな部署の合意が必要なところで、関係者みんなが使えるための条件をしっかりと揃えてくれる。また、エンタープライズ向けのサポートもしていただける。デザインツールには本当にいろんな機能があり、我々だけでそれを隅々まで使いこなせるようになるのは難しいと思いますので、昨年のような手厚いサポートが今後もあると、エンタープライズの現場としては助かるなと本当に思っています」。

最新 UI タスクグループ関係者の皆様（順不同 - 社名は五十音順）