Medical Note

医療情報プラットフォーム「Medical Note」で、プロダクトのUIデザインを担当しています。疾患ページの導線、症状のセルフチェック、病院検索に加えて、症状を記録する「治療ノート」、疾患ページへの治験情報の掲載、学会と連携したウェビナーの視聴・配信の仕組みまで、患者や家族が受診・治療にたどり着くまでの機能を設計しています。

※ 施策の内容は守秘義務があるため、疾患名・企業名・医師の情報を除いた図で構成を再現しています。

課題

病気について調べに来た人は、症状の不安がある人、診断を受けたばかりの人、家族のために調べている人など、置かれた状況がさまざまです。記事を読んで終わりではなく、その人の段階に合った次の一歩（チェック、相談先の検索、症状の記録、治験やウェビナーへの参加）へ、プロダクトの機能としてつなぐ必要がありました。

受診・治療までを、5つの機能でつなぐ

「知る」「確かめる」「探す」「記録する」「参加する」の段階ごとに機能を分け、前の機能から次の機能へ自然に移れるように設計しています。データがある場合とない場合、判定の結果ごとなど、状態によって変わる表示もそれぞれ設計しました。

記事の中に、読む段階に合わせた入口を置く

記事ページの導線は、章の内容に合わせて選んでいます。概要を読んだ直後には症状のセルフチェック、原因の章には「なりやすい人」、症状の章には「その後どうなるか」。記事の終わりには、エリアから医療機関を探せる検索と、新着情報の受け取り登録を置いています。

チェック項目を、クリックする前に見せる

症状の記事やバナーには、疑いのある病気のセルフチェックへの導線がもともとありました。ただ、見られる数もクリックされる数も伸びず、原因も分かっていませんでした。

症状の名前だけでは、読む人はそこまで重く受け止めず、自分ごととして捉えていないのではないか。そう仮説を立て、どんなチェック項目があるかを、遷移先ではなくバナーや導線そのものに見せる設計に変えました。その後、見られる数は目標を大きく上回りました。

セルフチェックの結果を、状態ごとの案内に

セルフチェックは、診断歴・関連する症状・対象の症状の3問の組み合わせで結果を出します。改修前は、組み合わせが違っても同じ結果にまとめられていました。組み合わせごとに結果を分け、いまは症状がない人や、先に関連する病気の相談が必要な人にも、それぞれに合った相談先を案内しています。診断歴がある人には答える必要のない質問を出さない仕様にして、設問も減らしました。

診察で伝わる記録と、その先の選択肢

「治療ノート」は、発熱や症状、服薬をスマホから記録し、一覧にして診察で医師に見せられる機能です。対象の疾患に広げる際は、デザインレビューで画面と運用をそろえました。

疾患ページには、その病気の治験情報を掲載する機能を追加。募集中の治験がない場合の表示も用意し、どの疾患ページでも行き止まりにならないようにしています。

学会と連携したウェビナーでは、視聴画面のデザインに加えて、運営側が枠ごとの配信時間を設定したり、アーカイブを公開し続けたりできるように、配信の仕組みの機能要件を整理しました。

担当が替わっても、同じ品質で作れるように

バナーやウェビナーの案内枠は、入稿する素材と文字数を枠ごとに規格化し、Figmaとドキュメントにまとめました。視聴促進バナーは10規格に展開しています。ウェビナーの視聴画面や病院検索ページの運用ルールも同じ形式で整理し、担当者が替わっても同じ品質で制作できる状態をつくりました。

使っているツール

Figma、Photoshop、Illustrator、HTML、CSS