ヘルスケアアプリのデザイン:診察予約アプリのホーム画面 ビフォーアフター

健康アプリを開く理由で最も多いのは、次の予約を確認することです。以下の初稿は、代わりに割引バナーで始まり、予約は画面下の細い帯に追いやられています。改善版では予約を最優先にし、それと競合していたものをすべて削りました。

機能は一つも減っていません。検索も、診療科の閲覧も、医師の予約も、クリニックへのメッセージも、これまで通り使えます。

画面全体のビフォーアフター

新人の初稿

修正後

左側で最初に目に入るのはオファーです。医師の写真、ボタン、リンクが付いたティール色のバナー。ユーザーが本当に求めているもの、火曜日のSarah Lee医師との予約は、画面上で一番小さなブロックで、他の2つのセクションの下にあります。

右側では、同じ予約が最大のブロックになり、医師、日付、時間、ビデオ通話を始めるボタンが載っています。ホーム画面からオファーは消えました。初回割引はまだ予約していない人向けのもので、この人はすでに予約済みだからです。

修正1:次の予約を最優先に

Before

After

「今すぐ初回予約を!」と初回ビデオ診察20%オフ、予約ボタン、詳細リンク、カルーセルのドットがあるバナーに対し、Sarah Lee医師(循環器科)、ビデオ通話ボタン、日付と時間を1行にした「次の予約」カード。

ホーム画面は、何よりも先に「次に何をすべきか?」に答えるべきです。再診の患者にとってそれは予約です。誰と、いつ、どうやって参加するか。初稿では、その答えは一番下の小さな文字と「詳細」リンクの中にあります。

改善版では予約をヒーローにしました。医師の顔と名前で誰かが分かり、日付と時間は1行にまとまり、ビデオアイコンは1タップで参加できます。バナーは閉じられるだけですが、ボタン付きのカードは使われます。

日付も短く、読みやすくなりました。「Tue, Oct 28, 2026 • 10:30 AM - 11:00 AM」は「Tue, 28 Oct」と「10:30 AM」になりました。年は疑いようがなく、行くかどうかの判断に終了時刻はほとんど要らないからです。

使い回せるルール:ホーム画面の上部は、人が戻ってくる目的のものに与えます。あなたが売りたいものではありません。

修正2:診療科は4つ、色は1つ

Before

After

8色の丸いアイコン8つ(Cardiology、Dentist、Eye Care、Pulmonology、Neurology、Orthopedic、Pediatrics、More)に対し、ティール色のアイコンが付いた白いタイル4つ:Cardio、Dental、Eyes、More。

8つのアイコンに8色もあると、目は止まる場所が8つになり、どこにも止まる理由がなくなります。色は信号なのに、ここでは何も語っていません。赤いハートが紫の目より緊急というわけではないのです。

改善版は色をブランドのティール1色にして、色が再び意味を持つようにしました。ラベルは短く(「Cardio」「Dental」「Eyes」)して、読みやすいサイズで1行に収まります。表示は4つだけにして「More」タイルを置きました。珍しい診療科が必要な人は、すぐ上にある検索を使うからです。

修正3:カードではなく行にした医師リスト

Before

After

写真、名前、「Cardiologist | City Heart Clinic」、星5つ、4.8(レビュー120件)、「Fee: $50」、「本日予約可」のピル、予約ボタン、ハートがあり、次のカードが途中で切れている1枚のカードに対し、小さな写真、名前、「Cardiologist · 1.2 km」、評価4.9(212)がある2つの行。

初稿のカードには9つの情報と2つのアクションが詰まっています。どれも単体なら妥当です。しかし合わさると、読み手が1行ずつ目で追うフォームになり、全カードにある予約ボタンが、閲覧画面を売り場に変えてしまいます。

改善版は3行だけ残しました。名前、次に診療科と距離(実際に行けるかを左右します)、そして1つの評価とレビュー数。料金、空き状況、予約ボタンは医師個人のページに移しました。そこなら説明する余地があります。シェブロンが「タップして開く」を示します。

行は横スクロールのカルーセルではなく縦並びです。端で切れたカードは「まだ続きがある」という悪くないヒントですが、リストなら2人の医師をひと目で比べられます。それこそが本来の作業です。

修正4:ヘッダーのアイコンは1つ

Before

After

「Hello, Leo!」と「How are you feeling today?」、検索・ベル・チャットのアイコンに対し、緑のイニシャルアバター、「Good morning, Leo Martins」、赤い点が付いたベル1つ。

初稿のヘッダーにはアイコンが3つあり、そのうち2つは重複です。ヘッダーのベルと通知タブは同じ場所を開き、チャットアイコンとチャットタブも同じです。2つのドアが同じ部屋に通じていると、どちらが本物か迷います。

検索アイコンは検索フィールドの代役です。改善版ではフィールドそのものを予約の1行下に出したので、開く手間がありません。ベルが残るのは、クリニックからのリマインダーやメッセージが、赤い点に値する唯一のものだからです。

細かな修正

• タブは5つではなく4つ。 ベルがすでに通知を担うので、通知はタブバーから外しました。「Chat」は「Messages」に変えました。多くの受信箱で使われる言葉です。
• イニシャル付きのアバター。 無地のティールの円にLMと入れて、誰のアカウントかを示します。他のアプリと同じやり方です。
• 余白は1種類。 初稿は左14、右12でした。改善版はすべての行で左右20、間隔は8、12、14、20です。
• シンプルなあいさつ。 「Hello, Leo! How are you feeling today?」は、画面が答えられない問いを投げていました。「Good morning, Leo Martins」ならそれがありません。
• オファーのカルーセルは廃止。 バナーにはドットが3つあり、ボタンの横に2つ目のリンクもありました。改善版ではこの画面からオファーを外し、ヒーローには明確なアクションを1つだけ残しました。

自分のヘルスアプリを点検する

Figmaファイルを入手

無料ファイルには、両方の画面、修正した各パーツのビフォーアフターコンポーネント、UIカラー変数、iOSのテキストスタイル、写真クレジット入りのREADMEが入っています。

無料のFigmaファイル

診察予約アプリのホーム画面 ビフォーアフター

両方の画面と、修正した各パーツをFigmaコンポーネントで収録。無料、閲覧専用、ドラフトに複製してお使いください。

Figmaで開く

FAQ

診察予約アプリのホーム画面は、最初に何を見せるべき?

次の予約です。医師、日付、時間、ビデオ通話に参加する手段を添えます。検索と診療科はその後です。

ヘルスアプリのホーム画面には、診療科をいくつ表示すべき?

4つ程度と「More」タイルです。珍しい診療科を探す人は検索を使うので、8つ以上の色付きアイコンが並ぶ長いグリッドはノイズになるだけです。

ヘルスケアアプリの医師カードには何を表示すべき?

名前、診療科、医師までの距離、レビュー数付きの評価1つです。料金、空き状況、予約ボタンは医師のページに置きましょう。

ヘルスアプリのホーム画面にプロモーションバナーを置いてもいい?

予定されている予約より上には置かないでください。初回向けのオファーはまだ予約していない人に合うもので、再診の患者は別の目的で来ています。

ヘルスケアアプリに必要なタブはいくつ?

4つで十分です。Home、Appointments、Messages、Profile。通知は、ヘッダーのドット付きベルに置けます。

出典

• 両方の画面は自社制作で、Figmaで設計・計測しました。
• 写真はUnsplashのJonathan Borba、Bruno Rodrigues、vaibhav vivianによるもので、Unsplash Licenseに基づきます。
• 最初にApp Brainyでカルーセルとして公開しました。