Version 1
「次へ」を押す
数値を選択した後、「次へ」を押して入力を確定する案。1回の操作に約0.5秒かかり、192項目では90秒以上のロスになるため不採用とした。
03Prototype and Iterate
歯科医師と試作を重ね、
紙より速い操作を実現
最大192項目を5分以内に入力する、歯周病検査のタブレットUIを設計した。「紙より速いこと」を導入条件とし、プロトタイプを作るたびに歯科医師と検証。実際に入力を担う歯科衛生士の評価も反映しながら、手と視線の移動を削り、紙と比べて検査速度を24％向上させた。
検証体制歯科医師と反復
改善対象入力・結果表示
検査速度24%向上
※紙による入力と、プロトタイプを用いた同一検査項目の入力時間を比較
01 Performance Requirement
紙より速くなければ、導入する理由がない
見慣れた紙をデジタル化するだけでは足りない。
紙より速く、確実に入力できることをプロダクト要件とした。
Context
歯周病検査では、歯周ポケットの深さなど最大192項目を記録する。従来は、検査結果を紙へ記入し、その後電子カルテへ転記していた。これらを5分以内に終える必要があり、現場にはほとんど時間の余裕がなかった。
Business Requirement
歯科医療では、検査に時間をかけても一件あたりの保険点数は変わらない。検査時間、すなわちチェアタイムの短縮が、そのまま生産性につながる。
02 Iterate the Input
0.5秒単位で操作を削る
Validation Loop
プロトで高速に改善を回す。
入力方法と結果表示のプロトタイプを作るたび、歯科医師に操作してもらった。臨床上の正しさだけでなく、指と視線の動き、入力のリズム、現在地を迷わず認識できるかを確認。フィードバックを受けて作り直し、次の案を再び触ってもらうサイクルを繰り返した。
実際に入力を担う歯科衛生士の評価も反映し、机上の使いやすさではなく、現場で紙より速く使える操作を探った。
Version 2
3点をまとめて入力する
3点を入力してから、まとめて次へ進む案。指の移動が増え、目的のボタンを探すために画面を見続ける必要があることが分かり、不採用とした。
Version 3
入力後、自動で次へ送る
数値を入力すると、自動で次の項目へ移動する方式へ変更した。「次へ」の操作がなくなり、歯科衛生士からも高く評価されたため採用した。
Version 4
指の位置を固定する
数値ボタンをテンキーのように配置。指を同じ位置に置いたまま、リズムを止めずに連続入力できる形へ変更した。
Version 5
ボタンを96pxまで調整する
人差し指から薬指を自然に置けるサイズを検討し、ボタンを96pxに調整した。指の移動量を抑えながら、押し間違いを防げる大きさを探った。
Final
使用頻度から、ボタンの強弱を決める
使用頻度が低く、異常値でもある数値のボタンを小さくすることで、誤タップを抑えた。歯周病リスクとなる4mm以上には警戒色を使用し、入力時に識別できるようにした。
03 Iterate the Feedback
入力速度と操作の安心感を両立させる
入力速度を高めるだけでは、安心して検査を進められない。入力中の歯と入力済みの結果を、視線を大きく動かさずに確認できる表示を検討した。
紙の検査表の高い一覧性を、デジタルに落とし込んだ。
Version 1
紙の検査表を、そのまま再現する
見慣れた紙の検査表を、そのままタブレット上に再現した。しかし、「見慣れてはいるが、この形である必要はない」というフィードバックを受け、タブレットに適した表示を探ることにした。
Version 2
顎をイラストで表示する
顎の形をそのままイラスト化した。見た目は直感的だったが、現在どの歯の、どの面を入力しているか判別しにくく、不採用とした。
Version 3
入力中の歯面を表示する
入力対象となる歯面を表示し、現在地を確認できるようにした。一方で、検査中は上顎と下顎を同時に確認する必要があることが分かった。
Version 4
上下の歯を、横一列に並べる
上下顎を同時に一覧できるよう、歯を横一列に配置した。情報を増やしすぎると視認性が下がるため、表示するフィードバックを絞り込んだ。
Final
現在地と異常値だけを強調する
入力中の歯面を青く表示し、入力済みの数値は必要最小限に抑えた。歯周病リスクとなる4mm以上だけを強調し、「今どこを入力しているか」「どのように入力したか」を一目で確認できるようにした。
04 From Prototype to Specification
検証した操作を、実装できる仕様へ
プロトタイプを検証で終わらせず、専門家と確かめた操作を、実装可能な仕様までつないだ。
このときFigmaで行っていた動作検証は、現在はClaude Codeによるコードベースプロトタイプへ、画面仕様書はStorybook上の実装へ発展させている。
Interactive Prototype
Figma上で実際の入力操作と画面遷移を再現した。歯科医師との検証だけでなく、エンジニアにも操作の手触りを共有し、データ構造やトランジションとの整合性を実装前に確認した。
Design Specification
入力値、選択状態、自動送り、フィードバック、エラーなど、操作中に発生する状態を整理した。Figma上で変数名とステートを定義し、視認性を検証した上でコンポーネント化。開発チームが設計意図を理解し、実装できる仕様書へ落とし込んだ。
05 Impact
入力時間を24％短縮し、「紙より使いやすい」へ
Quantitative Impact
検査速度を24％向上
手の位置を動かさない入力UIと、現在地を即座に確認できる結果表示によって、紙と比べて検査結果の入力速度を24％向上させた。
Qualitative Impact
「紙より使いやすい」と高評価
歯科医師・歯科衛生士から「紙より使いやすい」という評価を得た。手と視線の移動を抑え、連続入力のリズムを維持しながら、現在地と入力結果を確認できる体験を実現した。