プロダクトデザイナーがUIのプロへ。ユーザビリティの追求によるサービス品質向上への取り組み

国内シェア6割以上を誇る建築用錠前のリーディングカンパニーとして、機械式の鍵から最新のIoTサービスまでトータルに手掛ける美和ロック株式会社。
「モノ売りからコト売り」へのビジネス変革を推進する同社は、サービスの根幹を支えるUIデザインの品質向上を目指し、ガイドラインの策定やデザインツール（Figma）のスキル習得などを踏まえたUIデザイン改善に取り組みました。
プロダクトデザインを専門としてきたチームが、いかにしてデジタル領域のUIデザインを自らの専門スキルとして確立させていったのか、サービスビジネス開発部デザイングループの皆さまにお話を伺いました。

お客さまのニーズ

錠の遠隔制御アプリ・マンション用ポータルサイト等のUIデザイン改善案の提案から、デザインレビュー、ガイドラインの整備、UIデザインのスキル獲得支援までトータルに伴走支援できるUIの専門家を探していた。

NCDCの役割

アプリ・サービスに対する改善案の提案やガイドライン作成、UX/UIデザインコンサルティング、内製デザインのレビュー、Figma研修の実施など、UIデザイン全般における包括的な伴走支援を実施。

プロダクトデザインのプロが取り組むUIデザイン
サービスのクオリティを担保するガイドライン作成
業務効率化に繋がったFigmaのスキル習得
UIデザイン改善から得られる効果と、変わる社内の意識

プロダクトデザインのプロが取り組むUIデザイン

はじめに、貴社について教えてください。

加治屋氏：美和ロックは機械式の鍵メーカーとしてスタートしました。時代とともに電池を使ったり、電気仕掛けになったりと変化を続けて、今では機器のIoT化が進んできています。手に持って回す方の「鍵」と、それを受け入れる方の「ロック」と呼ばれるものをトータルに手掛けています。鍵屋さんというと、お手持ちの鍵に「MIWA」と書かれているものを思い出してくださる方も多いかと思いますが、建築用錠前^※1が主力商品となっています。

建築用錠前：扉などに取り付けられている施錠・解錠のための装置全体を指す言葉。美和ロックは建築用錠前の生産・販売において国内シェア6割以上を誇る。

貴部署についても伺えますか。

加治屋氏：我々の所属するサービスビジネス開発部は、デバイスと組み合わせたIoTサービスを提供する部門です。先ほど、機器のIoT化が進んでいるとお伝えしましたが、例えばスマートホームの一部としてスマートロックを使っていただくことで、APIで連携して、錠の施解錠と連動させてスマートスピーカーや部屋の照明、カーテンの開閉などを管理できるようなサービスを実現しています。
また、デザイングループではプロダクトデザイン、カタログやパンフレットなどのグラフィックデザイン、それからUIデザインの大きく分けて3つのデザインを行っています。

UIデザイン専門の部署というわけではないのですね。

加治屋氏：福田と宮澤はもともとプロダクトデザインの担当をしていました。UIデザインは我々にとっては結構新しい分野という感覚です。私の学生時代は、UIデザインはまだグラフィックデザインの一部として扱われていて、専門の研究室はなかった記憶があります。美和ロックとしても、従来UIデザインはプロダクトデザインの一部として扱っていたのですが、デバイスやアプリの重要性が増してきたため一分野として確立したというような経緯ですね。

どういった経緯で、プロダクトデザインのプロがUIデザインに取り組むようになったのでしょうか。

加治屋氏：サービスビジネス開発部の目標は、お客様により良いサービスを提供することです。人口減とともに新規住宅着工件数^※2が減ってきているので、継続的な収益化がキーポイントになっているんですね。そのため、事業範囲がモノ売りに加えてコト売りへと拡大しています。
システムが良くても、UIが悪いとシステムそのものがチープに見えてしまうことがあるかと思うのですが、美和ロックにはシステム開発のメンバーはいても、お客様の接点となるUIの専門家がいませんでした。そこで、プロダクトに関するノウハウがあり、アプリの開発にも関与している我々デザイングループがUIを学んでいくことになりました。

新規住宅着工件数：国内で着工された新設住宅（戸建てや集合住宅など）の件数のこと。

NCDCをパートナーに選んでいただいた理由を伺えますか。

加治屋氏：我々の上司がUI改善を非常に重要な課題だと捉えていたのですが、その上司が展示会でお話したのがきっかけでNCDCさんと接点ができたと聞いています。もともと、ユーザビリティテスト専門のパートナーや、一部アプリの画面デザインをお願いしているパートナーとの関わりはあったのですが、UI改善やデザイン品質を保つためのガイドライン整備なども含めて、UIデザインに関する幅広い相談ができるということでNCDCさんにお願いをしました。

今回ご支援させていただいたアプリ「MIWA Support」について教えてください。

福田氏：「MIWA Support」は、スマートロックの設定・制御が簡単に行えるアプリです。施錠解錠の遠隔操作ができる「MIWA Supportの wiremo（ワイレモ）機能（以後wiremo）」や、機器のファームウェアアップデートなどを行うリモートメンテナンス機能を備えています。

加治屋氏：ロックはセキュリティ機器なので、安全性を確保するためにもアップデートが欠かせませんが、「MIWA Support」ができるまではスタッフが現地に行って更新作業を実施していました。今はアプリを活用していただければお客様が寝ている間にアップデートが完了するので、簡単に最新のセキュリティを使っていただけるというメリットがあります。

サービスのクオリティを担保するガイドライン作成

改善案のご提案をしたフェーズ1から、ガイドライン作成やUX/UIデザインコンサルティングを行ったフェーズ2、社内で制作されたUIデザインへのレビュー等を継続実施するフェーズ3と、長期に渡ってご支援をさせていただいています。本格的にUI改善に取り組むことになった経緯について伺えますか。

プロジェクトの概要

施錠管理アプリ・ホームセキュリティアプリのUX/UIデザイン改善案のご提案、デザインレビュー、デザインガイドライン作成およびデザインツールスキル習得研究の実施。

Phase1：アプリ「MIWA Support」に対し、UI改善を目的とした改善案のご提案、ガイドライン作成
Phase2：Phase1に引き続きアプリ「MIWA Support」ガイドライン作成、新たに「wiremo」のUX/UIデザインコンサルティング、ガイドライン作成
Phase3：週に一度の定例会議・Backlogを通じたコミュニケーションの中でUX/UIデザインコンサルティングの継続（UI改善を目的とした改善案のご提案、社内でFigmaにてご検討・作成された改善案やUIデザインへのレビューなど）
スポット：デザインツール（Figma）スキル習得研修の実施

加治屋氏：先ほどもお伝えした通り、UIデザインに専門的に取り組む部署というのがありませんでした。企画者が画面イメージを作ってデザイングループに依頼して、UIデザインの専門家ではないものが主要な画面案だけを作成する。あとはアプリの開発担当者任せというような状況だったので、UIの品質はあまり高くありませんでした。
ある程度時間が経ってサービスが普及した際にそれらを見直そうという動きがあって、まず着手したのが施錠解錠の遠隔操作ができる「wiremo」のUI変更です。これはユーザビリティテストを実施していた会社さんに依頼して、だいぶ洗練されたというか、それなりの成果が得られたと思っています。

NCDCが参画させていただく前に、一度UIのリニューアルに取り組まれていたのですね。

加治屋氏：そうですね。ただ、その取り組みは単発で外部に依存していたため、それを継続していくノウハウがありませんでした。そこで、NCDCさんにユーザビリティテストの結果を引き継いでもらって、リニューアル時に取り決めた内容を整理したり、他のプロダクトへの展開を検討したりしてガイドライン化していったのがフェーズ１です。フェーズ１では、この他に実装時に使えるスタイルガイドも作成してもらいました。

ガイドラインやスタイルガイドを作成したことで、何か変化はありましたか。

ガイドライン作成を経て、標準化されていなかったサービスのUIコンポーネントを整理。実装時に使えるスタイルガイドも作成した。

福田氏：まず、基本的なデザインテイストがしっかり整ったと感じています。我々がUIデザインの学習を始める前は、「長年の経験がある開発者（エンジニア）の方が、我々よりも理解しているだろう」という考えがありました。そのため、例えばエラーの表示位置といった細かな部分はおまかせしていたんですね。ですが、それではUIの品質が維持されず使いにくさに繋がってしまうこともありました。今回、実装時に使えるスタイルガイドを共有したことで、クオリティを維持できるようになったと思います。

加治屋氏：自分のことでいうと、バリデーション^※3のバの字も知らなかったので、入力欄ひとつ取っても、表層的な部分しか理解できていませんでした。ユーザーが入力するときにどうすれば心理的な負荷を減らせるか、誤りがあった際はどんな風にエラー表示を出せば解決しやすくなるか……そういったUXの観点からUIを検討する知見は、ガイドライン作りを始めた1年目から2年目くらいでNCDCさんに教育してもらった感じですね。

バリデーション：ユーザーの入力が正しい形式や条件を満たしているかをチェックする処理。

「教育」という言葉も出てきましたが、プロジェクトの中で、UX/UIデザインについてどのようなやり取りがあったのでしょうか。

宮澤氏：開発側や品質保証の担当者からデザインのフィードバックをもらった際に、具体的にどう改善すればいいか迷ったときは、NCDCさんにすぐ相談するようにしています。とてもレスポンスがよくて、的確なアドバイスがいただけるので。

加治屋氏：NCDCさんがいなかったときは、三人でああでもないこうでもないと話し合って……確信が持てないながらもこれで行ってみる？と結論を出すような感じでした。今は週に一度の定例会議でNCDCさんと話す機会があるので、こんな風な改善案を考えているんですけど、と相談すると理由や背景知識も含めてアドバイスがもらえる。こちらも納得して前に進めるので、かなり歯車を回していただいている実感があります。

宮澤氏：「MIWA-Link’s」という、共用施設を予約したり、宅配業者のゲート通過を許可したりといった機能が使える集合住宅向けサービスについて、カラールールを決める際のアドバイスも印象に残っています。美和のコーポレートカラーがすでにある中で、「MIWA-Link’s」というサービスのカラーをどう考えていくのか。どんなサービスの内容か、大事にしている価値観は何か、ユーザーにどんなイメージをもって使ってほしいかといったところまで掘り下げて検討するよう具体的に助言いただきました。

業務効率化に繋がったFigmaのスキル習得

継続的なご支援のほかに、スポットでFigmaのスキル習得研修も実施させていただきました。ご感想を伺えますか。

福田氏：私の中で一番大きかったのは、研修を受けて実務でFigmaが使えるようになったことですね。

宮澤氏：Figmaは導入したものの、研修を受けるまでは全然実務で使えていなくて、結局Illustratorで作業をしていました。2時間ずつ計3回という短期間のスキルトランスファーで実用レベルまで教えていただけたので、そこからはすべてFigmaでデザインをしています。

加治屋氏：Figmaでデザインを制作するようになって、精度が上がりました。Illustratorだと、スマートフォンの画面での表示を念頭に制作しているといっても、縦横比がこのくらいというレベルで設計するので、どの端末のどんなサイズを想定しているのか数値として具体化できていませんでした。それがピクセル単位で指定できるようになったので、実装側にも喜ばれていますね。

福田氏：最近はデザインだけでなく、プロトタイプもFigmaで作成して、自分たちでも挙動を確認するのはもちろん、企画や開発の担当者にも実際に触ってもらって、操作感を確かめるために活用しています。それから、品質保証チームにも共有して、一次ユーザビリティテストの実施にも役立てています。

Figma習得以前は、どのようにプロトタイプを作成されていたのですか。

福田氏：一時期はAdobe XDでプロトタイプを作成していたこともありましたが、その頃に比べると工数が削減されました。開発者が作成していたXDのプロトタイプと比較しても、デザイナーがFigmaで作成するプロトタイプは精度が上がっていると実感しています。

UIデザイン改善から得られる効果と、変わる社内の意識

現在のプロジェクトの進捗状況について教えてください。

加治屋氏：今は先ほどお話にも出てきた集合住宅向けサービス「MIWA-Link’s」のUI改善に取り組んでいます。福田を中心とした第一弾の改善版がすでにリリースされていまして、宮澤を中心とした第二弾の改善版が今春リリースを目指しているところです。良いものができていると思います。

福田氏：実際のユーザー様の声というのはなかなか直接お聞きする機会がないのですが、第一弾に関して、デベロッパーさんからは非常に使いやすくなったというお声はいただいています。

加治屋氏：我々の「MIWA-Link’s」は、エンドユーザーにとっては新築時に導入済みの設備で、使用する際に初めて目にするものです。UIの良し悪しを見てユーザーがサービスを選択するようなものではないのですよね。そのため、UIの改善により何が変わったかを数値化するのはすごく難しい。ただ、長期的に見ればエンドユーザーから「MIWA-Link’s」は良いと評価していただくことが、デベロッパーさんへの美和ロックブランドの信頼向上にも繋がります。時間はかかるけれど会社全体の売上にもいい影響を与えるはずだと思っています。

社内でもUIデザインに対する意識は変わってきているのでしょうか。

福田氏：社内でも、UIデザインに関して、だんだんと求められる期待値が上がってきているのを感じます。会社として、UIデザインに真剣に取り組む必要があると、みんなが気づき始めているんだろうなと。

最後に、今後挑戦していきたいことや、NCDCへの期待について教えてください。

加治屋氏：働き手も市場も減っている中でいいものを継続的に提供するためには、AI活用などの効率化を考えなければいけないと思っています。我々も研究はしているのですが、クリエイティブの仕事での活用に関してはまだ模索中です。自分たちの方がいいアイデアを出せる、AIにはまだ負けたくないという気持ちもあるので、部分的な活用も考えていますが、まだ最適解は見つかっていません。NCDCさんの知見を活かしたクリエイティブ系のAIサポートなんかあったら嬉しいですね。