病院経営ウェブマガジン“Healthcare Compass (ヘルスケア・コンパス)”

Healthcare Compass (ヘルスケア・コンパス)。病院経営ウェブマガジン。病院経営の中でも急性期病院の経営・運営に携わる人のためのメディアです。

Healthcare Compass (ヘルスケアコンパス)

医療機器のUI/UXデザイン〜デザインプロセスの全容〜

私は株式会社ジャイロで医療機器の画面や教育コンテンツのUI/UXデザインおよびディレクションを行なっています。医療機器のデザイン業務は、主にメーカーから受注しています。

10年前に心臓カテーテル用検査装置の画面デザインを受注して以来、心電計、血圧脈波検査装置、産婦人科用ECGモニタ、歯科用CTスキャナ装置、手術室用統合表示モニタなど、いろいろな機器の画面表示部のUI/UXデザインに取り組んできました。

f:id:massy535:20190709095921p:plain
デザイン実施例:手術室用統合表示モニタ(AMEDからの支援プロジェクト「安全性と医療効率の向上を両立するスマート治療室の開発(SCOT:Smart Cyber Operation Theater)」

今回は、医療機器画面のUI/UXデザインについて、どのような流れで受注から納品までの業務を進めているのか、ステップを追ってご紹介します。

ステップは大きく分けると3つあります。

  1. 依頼から契約まで
  2. ヒアリングと画面構成・ビジュアルデザイン案の作成
  3. UI/UXの磨き込み

 

依頼から契約まで

仕事の依頼を受けるきっかけには2パターンあります。インターネット検索から問い合わせが入るケースと、誰かの紹介で連絡をいただくケースです。

前者は、全く面識のない会社からのコンタクトで、UI/UXデザインの依頼先を探している企業が、私の会社のホームページを見つけてお問い合わせいただくことによって話がスタートします。医療機器を専門としているデザイン会社がまだ少ないこともあり、私の会社は検索サイトからヒットしやすいようです。

後者の場合は、以前私が電機メーカーに在籍していたため、そのつながりからお声がけいただくパターンとなりますが、最近は検索からのお問い合わせが圧倒的に増えています。

いずれのケースでも、一度仕事をさせていただくと、継続的に依頼されることが多いのですが、なぜかお付き合いしている会社の方が、また別の会社を紹介してくださることもあります。医療機器は開発期間が長いため、設計担当の方とは「同志」のような感じになり、信頼関係が出来上がるからかもしれません。そんな時、つながりのありがたさを感じます。

さて、新しい会社の方から声をかけていただくと、まずは顔合わせをし、今まで手がけた業務の事例を紹介し、デザインプロセスなどをご説明します。契約の関係で、サイトに具体例を掲載することができない案件が多いので、対面で実際の画面やデモなどをお見せしています。

最初の打ち合わせで必ずお話しているのは、「私たちは見た目だけのデザインをするわけではない」ということです。UI/UXデザインというのは、操作手順が大きく絡みます。どのような順番で操作するか、どの機能をよく使うかによって、情報の見せ方が変わり、それが見た目のデザインにも影響を及ぼすということを説明します。

なぜ、このような説明をしているかというと、UI/UXデザインという分野が以前よりも世間に浸透してきたとはいえ、まだまだ「デザイン」というのはただ「かっこよく今っぽくすること」だと考えている人が多いからです。ふた昔くらい前は「デザイナー」と言うとファッションデザイナーだと思う人が多かったのですが、今は紙媒体のグラフィックデザイナーをイメージする人が多い印象です。同じデザインでも分野により、プロセスも成果物も全く異なります。

また、全く新しい機器のデザインは、ある程度自由に考えることができますが、既存の機器をリニューアルする場合は、設計上の都合で仕様変更がしづらいこともあります。すでに使っているユーザーにとっては、使い勝手が変わると戸惑うため、あまり操作性を変えたくないと言われるケースもあります。どこまでの範囲をデザインするかについては、相談して決めていきます。

話を進めることになったら、次にほぼ全てのケースで、見積書を提出します。先に機密保持契約書を交わすこともあります。コンペ形式で見積書を比較して発注先を決める会社、話し合いや実績で判断する会社など、発注に至るまでのプロセスは会社によって少しずつ違います。

f:id:massy535:20190709100253p:plain

 

ヒアリングと画面構成・ビジュアルデザイン案の作成

受注が決まると、必ず行うのは、詳しい仕様の確認です。ソフトウェアの仕様書や遷移図があれば提供していただき、機器やプロトタイプがあれば貸し出しをお願いしています。

ある程度使い込まなければ、機器の仕様が理解できないため、私の会社では、必ずデザイナー自身が機器を使って初期画面からの流れを確認し、操作につまずく点があれば書き出していくようにしています。

機器の使用場面や使用者のペルソナ(医師なのか技師なのか看護師なのかなど)についてもヒアリングし、どんな状況で使われるものなのか、理解を深めます。可能な限り手術や治療の現場を見学したり、診療のプロセスについて勉強したりすることも欠かせません。

一通り仕様が理解できたら、画面の骨組みとなる「ワイヤーフレーム」を作成します。建築でいう土台や基礎作りのようなものです。基礎がきちんとできていなければ、いくらきれいな外観やインテリアの家でも倒れてしまうのと一緒で、画面デザインにも骨組みは重要です。空間には「導線」があるように、画面の場合には「遷移」があります。あるボタンを押すと画面がどう変化するのか、元に戻るのにはどのボタンを押せばよいのか、など、ルールを考えながら骨組みを作ります。

次に、いよいよ「見た目」のビジュアルデザインに入ります。あらかじめ、依頼元の会社の方々に目指したいデザインテイストをヒアリングし、「先進的」「クール」「飽きが来ない」「患者に不安感を与えない」などなど、キーワードやイメージをできるだけ挙げていただくようにします。コーポレートカラーや製品のテーマカラー、ハードウェア本体のスケッチなども提供していただき、なるべくたくさんの周辺情報を集めることが、デザイン案の方向性のズレを減らすことにつながります。

ビジュアルデザイン案の提案数はケースバイケースですが、社内ではかなりたくさんのバリエーション案を作って検討し、そこからいくつかのタイプに絞って提案します。デザイン提案のコンセプトを明確にすることも大切なので、なぜそのデザインを提案するのか、ということを伝えるために、デザイントレンドやマーケット分析などの裏付けの資料も準備します。

最初のデザインは、主要な数画面で作成し、方向性が決まったら、他の画面にも配置などのルールを適用して展開していきます。ビジュアルデザインとはいえ、静止画の状態だけでは操作手順が伝わらないので、最近はXDなどのプロトタイピングツールを使い、流れのわかる状態で確認していただくことが多いです。

f:id:massy535:20190709100501p:plain
ビジュアルデザインのカラーバリエーション例

 

UI/UXの磨き込み 

最初に提示したデザイン案であっさりデザインの方向性が決まることもありますが、別の提案が求められることもあります。最初は特に要望がなかったのに、実際に見える状態になると、いろいろな意見が出てくることもあります。細かい調整で済めば、大きな作業ロスは発生しませんが、根本的なやり直しや度重なる修正が続くと、デザイナーのモチベーションが下がり、コンセプトが崩れてきます。このような状況になることを避けるためにも、最初のヒアリングは非常に重要です。

デザインの基本イメージが決まると、あとは、他の画面にイメージを展開していくだけのはず。。。しかし、最初に全ての仕様が決まっていることは滅多になく、ソフトウェアの宿命と言うべきか、途中から新たな仕様が追加になったり、変更になったりすることも多々あります。その都度柔軟に対応するようにしていますが、軸がぶれないように注意をはかり、集中力を切らさないようにしなければなりません。操作性のルールは、ソフトウェア全体に影響するものなので、1箇所を修正すると、他の場所で矛盾が起こり、整合性が取れなくなることがあるからです。ぼんやりしていて、とんでもない「抜け」に後で気づいて青くなる。。。ということが起こらないように気を引き締めます。

UI/UXの操作性の検討には、細かい「気づき」がとても大切です。

たとえば、ある患者用ベッドの表示画面のデザインを行なっていたとき、借りてきた既存の機種の画面を操作していて、なんとなく引っかかる点があることがありました。なぜ引っかかるのか、最初はよくわかりませんでした。なんとなく使いにくい、なんだかわかりにくい。なぜだろう。。。
何度も操作してみたところ、二つ並んだボタンのうち一つは「患者がベッドにいるときに押す」、もう一つは「ボタンを押してから患者がベッドに寝る」という機能のボタンであったため、手順がわかりづらくなっていたことに気づきました。設計担当の方にそれを伝えたところ、その機器の操作に慣れてしまっていたので、使いにくさに気づかなかったとのこと。しかも、設計の都合上、その手順を変えることができないというのです。それで、ちょっとした誘導のアニメーションを入れ、ボタンを押すタイミングがわかるようにしました。

派手な見た目の変更ではないので、デザイナーがこのような些細な点に配慮したことを気づくユーザーはいないかもしれません。でも、このような改善により、ユーザーが「なんとなく使いにくい」と感じたストレスが軽減され、ほんの何秒かの迷いの時間が削減される可能性があります。このような積み重ねが使いやすさにつながると考えています。

一通りの画面デザインができたら、ユーザーテストを行うこともあります。これについてもたくさんの話がありますが、また機会があればお伝えしたいと思います。

全ての画面が完成したら、設計の実装ができるようにパーツを書き出し、座標指定を行います。

詳細なデータの作り方は設計のやり方によって異なりますが、多くの場合、ボタンやパーツなどを一つ一つの部品として書き出し、それぞれの部品が画面の中のどこに配置されるのかをX座標とY座標で指定します。

f:id:massy535:20190709100725p:plain
座標指定のサンプル

一つのボタンも、ふだんの表示の状態、マウスを重ねた状態、押して凹んだように見せる状態など、状態によって別のパーツとして書き出す必要があるので、納品するボタンやパーツの数は何百、何千にのぼることもあります。

 

最後に

先日、大学でUI/IXデザインのプロセスについて講義を行った際、「デザイン案を出すとき、クライアントをどのように説得しているのですか?」と質問した学生がいました。デザイナーの中には、自分のデザインを「ベストな答え」として押し付けるように提案する人もいるようですが、私はそうは考えていません。

UI/UXデザイナーの仕事は、いかに依頼元の会社の方々の思いや設計条件をきちんと汲み取れるか、それをいかにわかりやすく、美しく表現できるか、が全てだと思います。よく話を聞くこと、よく考えることがデザインの質を高めると信じて知恵を絞ります。だから、「クライアントを説得する」という立場ではなく、「クライアントに寄り添い、一緒に製品づくりを行なっていく」というスタンスでいたいと思っています。

人間には「慣れ」があり、長いことずっと一つの機器を使っていると、ちょっとした矛盾やおかしな動作も「当たり前」のものとなり、見過ごしてしまうこともあります。しかし、初めて使う人が、その機器をミスなくスムーズに操作できるでしょうか?
UI/UXデザイナーは、ユーザーの目線になって、クリティカルな見方も忘れないようにしながら、「本当にそれでよいのか」を常に問う必要があります。

医療機器は、操作ミスがあってはならず、個性や表現よりも、間違いのない操作ができるデザインを心がけることが最も大切です。しかし、それだけでよいのか、と思うところもあります。ここ10年、医療機器のデザインに関わってきて、マイナスをゼロにするだけではなく、プラスにするのが、これからのデザインの役目なのではないかと考えるようになりました。もっと病院の環境や患者、そして医療従事者の「快適さ」や「楽しい気持ち」などにも目を向けるべきだと思います。

デザイナーとしてできることがまだまだたくさんあるはず。そう考えて、これからも学び、考え、医療環境の向上に貢献していきたいと思います。

 

--筆者--
安原七重
株式会社ジャイロ取締役/ディレクター/デザイナー
東洋大学ライフデザイン学部/情報連携学部 非常勤講師
武蔵野美術大学卒業。在学中に1年間フランス・パリに留学、国立高等美術学校(エコール・デ・ボザール)で学ぶ。同大学研究室を経てソニー株式会社入社、製品/ソフトウェア企画やUIデザインを手がける。my first Sony「グラフィックコンピュータ」(ソニー在籍時)、スマートフォンアプリ「ピクニーニョ」グッドデザイン賞など受賞多数。2019年現在大阪大学国際医工情報センターMEIプロフェッショナルコース在籍中。

 

Healthcare Compassでは皆様からの投稿をお待ちしております。

こんなことを伝えたい、書いてみたい、という方は healthcare_ops@yahoo.co.jp にまずはお知らせ下さい。もう書いてみた、という方はそのままお送りください。編集部で頂いた内容を検討し、ご連絡します。

 

“Healthcare Compass”では過去に公開した記事をまとめて、メールで配信しています。

登録はこちらから