UI/UX for Complex Systems

医療向け 検査データ入力システム

ROLE

プロダクトデザイナー

Product Designer

MY CONTRIBUTION

ユーザーリサーチ、UI設計、プロトタイプ制作、デザインシステム構築、デザイン仕様書

User research, UI design, prototyping, design system, design specifications

TEAM

PdM、歯科医師、歯科衛生士

PdM, dentists, dental hygienists

DURATION

2021/10 〜2022/4

Description

歯科検査の時間を短縮し、生産性を向上

歯科衛生士向けのタブレット (iPadOS) アプリを開発。
歯周病検査の結果を紙に書き取るオペレーションをDX化、プロセスを標準化することで、業界のデファクトスタンダードを目指す。
KPIは紙よりも短時間・確実に検査を完了できること。手の位置を動かさない数値入力UIと、現在入力中の歯を即時に示すプレビューUIで、紙比で24%短縮を達成した。

Shorten dental exam time and improve productivity

Developed an iPadOS app for dental hygienists. Digitized the paper-based charting workflow for periodontal exams and standardized the process to aim for an industry de facto standard. KPI: complete exams faster and more reliably than paper. A number-entry UI that keeps the hand anchored, plus a preview that shows the tooth in focus, achieved a 24% time reduction vs. paper.

Background

チェアタイム短縮=生産性向上

歯周病検査1件につき記録する項目は 、192点にも及ぶ。

従来の歯周病検査では、歯周ポケットの深さをチェックし、数値を紙にメモ、電子カルテに転記する作業を5分以内に終える必要がある。現場は非常に逼迫し、歯科衛生士はお昼ご飯を食べる暇もない状態。
歯科医療では保険点数が時間比例で増えないため、チェアタイム短縮=生産性向上であり、紙よりも入力が早いことが導入条件となる。

Shorter chair time = higher productivity

A single periodontal exam requires up to 192 recorded items. Traditionally, clinicians probe pocket depths, write values on paper, then transcribe to the EMR—work expected to finish within five minutes. Schedules are extremely tight; hygienists often have no time even for lunch.
Because reimbursement does not scale with time in dental care, reducing chair time directly raises productivity, making “faster than paper” a practical adoption threshold.

Approach

0.1秒単位で操作時間を削り切る

Ver.1

入力値を選択後「次へ」ボタンを押すタイプ。押下に0.5秒はかかり、入力値192項目で90秒以上のロスになるためボツ。

After selecting a value, users tapped “Next.” Each tap cost ~0.5s, adding 90+ seconds across ~192 fields—discarded.

Ver.2

同時にまとめて3点を入力してから「次へ」を押下。
指のストロークが多く入力に時間がかかること、入力の際に画面をジッと見ないと目的のボタンが探せないことが判明。

Entered three points at once, then “Next.” Longer finger travel and searching for buttons increased time; gaze had to fixate—discarded.

Ver.3

「次へ」の押下が不要な、数値を入力すると自動で次の数値入力に切り替わる「自動送り」。歯科衛生士に高く評価され、自動送りを採用。

Introduced auto-advance: entering a value moves focus to the next field without “Next.” Hygienists strongly preferred it - adopted.

Ver.4

電卓のようにボタンをテンキー配置にすることで、同じ位置に指を固定し、手早くリズミカルな入力を可能に。

Ten-key layout enables anchored fingers and a quick, rhythmic cadence.

Ver.5

ボタンサイズを検討し、96pxとした。女性が多い歯科衛生士に最適化し、人差し指〜薬指を置きやすいサイズ感。

Optimized button size to 96px - comfortable for index-to-ring finger spans, fitting the predominantly female hygienist workforce.

Fixed

入力頻度が低く、かつ異常値とも言える数値のボタンは小さくすることで、誤タップを低減。歯周病対象の4mm以上には警戒色を当て、一覧性を高めた。

Low-frequency/abnormal values use smaller buttons to cut mis-taps; values ≥4 mm use alert colors to improve scanability.

紙の一覧性を継承。誤入力を防ぐUI

Ver.1

従来の紙の検査表をそのままデジタル化したものの、「見慣れてはいるが、この形の必要はない」とのフィードバック。タブレット入力に最適化した見せ方を探る。

A direct digital copy of the paper chart felt familiar but unnecessary; we explored tablet-native presentation.

Ver.2

顎をそのままイラスト化してみたが、歯のどの面を検査しているのかわかりにくいと評判は悪い。

Jaw illustrations looked nice but made it hard to tell which tooth surface was in focus—poor ratings.

Ver.3

歯の面はわかるようになったが、上顎・下顎を両方同時に視認する必要があるとのフィードバック。

Surface identification improved, but clinicians needed to see maxilla and mandible at once.

Ver.4

横に歯を並べ、上下の顎を一覧表示。入力値のフィードバックが多すぎると視認性が下がるため、最低限を探る。

Laid out teeth horizontally with both arches visible. Minimized feedback clutter to keep visibility high.

Fixed

視認性の高い青が、入力中の歯の面をハイライト。入力済みの値は最小限にとどめ、歯周病リスクになる4mm以上を強調表示。

紙と同様の一覧性が担保され、「今どの歯の入力をしているか・どう入力したか」がパッと見で確認でき、安心して操作可能。

High-visibility blue highlights the active surface; entered values stay minimal, with ≥4 mm emphasized. Like paper, the overview is intact—users can see what tooth they’re on and what was entered at a glance, enabling confident operation.

実装フェーズとも密接に連携。エンジニアと課題共有し、仕様まで落とし込む

Close collaboration with engineers to translate design intent into implementable specs.

UIのポイント共有

現場リサーチの結果や検討過程をエンジニアへ共有。
「手動入力の負荷をどう下げるか」を中心に、操作導線とデータ構造の対応関係を整理し、開発チームが実装理由を理解できる形で伝達。

Remove the operation itself

Simply plug the device into the vehicle’s USB to acquire and send your location.

動作プロトタイプ

Figma上で実際の操作感を再現したインタラクティブプロトタイプを作成。
エンジニアに手触りを体験してもらい、データ構造やトランジションの整合性を事前に検証。「実装しやすく、壊れにくいUI」を目指した。

Remove the operation itself

Simply plug the device into the vehicle’s USB to acquire and send your location.

画面仕様書

入力値とフィードバックの全パターンを整理し、視認性を検証した上でコンポーネント化。
Figma上で変数名・ステート・エラー条件を定義し、デザイン仕様書を作成。

Remove the operation itself

Simply plug the device into the vehicle’s USB to acquire and send your location.

Result

紙よりも検査速度が24%向上

定量効果

  • 検査結果の入力速度を24%向上

定性効果

  • 歯科医師/歯科衛生士から、「紙より使いやすい」との評価を得た

  • 手と視線の移動が最短、連続入力のリズムを維持

  • 24% faster input for exam results

  • Rated “easier than paper” by dentists and hygienists

  • Minimal hand and eye travel; the rhythm of continuous entry is maintained