技術記事

医学部生向けという特殊な市場では、UI から伝わる「信頼感」がそのままアプリの選定基準になります。
メディカルサークルでは、デザインシステムを早い段階で固め、画面ごとに揺れない統一感を意識して作りました。
本記事では、その設計判断を共有します。

余白・角丸・色数を制限してUIを揃える

余白は 4 段階、角丸は 3 段階に限定し、画面ごとに独自の値を使わないルールを敷きました。
色はプライマリ（紺系）・セカンダリ・アクセントの 3 色＋テキスト 3 階調（メイン・サブ・ヒント）に絞り、エラーや警告色は破壊的アクション専用と決めています。
中立的な操作には必ずプライマリ系を使う配色ガイドラインで、画面が増えても見た目が散らない状態を維持しました。

メディカルブルーで信頼感を、アンバーで CTA を表す

プライマリには深めの紺（メディカルブルー）を据え、「医療×学術」の信頼感を色彩から感じていただけるようにしています。
この色を AppBar・ボタン・選択状態などアプリの骨格に使い、ブランドの中心トーンを固定しました。
アクセントのアンバーは有料プランのバッジやリワード的な要素にだけ限定的に使い、視覚的に「ここは特別」と分かるシグナルにしています。
色数を絞ることで、CTA の存在感を自然に強められる配色設計です。

Noto Sans JP と段階的ウェイトで読みやすさを作る

医学用語が多く、文字情報が密になりがちなアプリです。
フォントは日本語の可読性を重視して Noto Sans JP を採用し、本文 400・ラベル 500・見出し 600・強調 700 の 4 段階で使い分けています。
行間は本文系テキストに 1.45〜1.5 を設定し、長い科目名や教授名が詰まって読みにくくならないよう配慮しました。
フォント選定とウェイト選定は、地味ですが誠実さを伝える要素です。

共通ウィジェットを先に作り、画面は組み合わせで構成する

プロジェクト初期に、ダイアログ・セクションヘッダー・メニュータイル・ソフトカード・空状態表示・エラーバナーといった基本部品を共通ウィジェットとして先に作り切りました。
各画面はそれらを組み合わせるだけで構成するルールにしたことで、見た目と挙動を全画面で統一できています。
コンポーネント化によって、開発速度の向上ならびに不具合の発生率低下を実現しています。

空状態・エラー・ローディングを安心感に変える

空状態には必ず「次に何をすべきか」の CTA ボタンを添えるルールにしました。
「まだノートがありません」で終わらせず「ノートをアップロード」ボタンを置くことで、ユーザーにとって次のアクションが明確になり迷子にならないようにしています。
エラー表示はバナー型に統一し、フォーム上部に赤背景で目立たせつつ、具体的な対処法を含む文言にしました。
たとえば、ログイン失敗時は「メールアドレスまたはパスワードが正しくありません」、退会済みメアドの場合は「このメールアドレスは退会済みです。再登録は新規会員登録からお願いします」のように、次のアクションが分かるメッセージにこだわっています。
ローディングは処理の重さに応じて使い分け、画面遷移程度なら控えめなスピナー、アップロードや削除のような長時間処理は進捗パーセント付きのダイアログで操作をブロックして安心感を出しています。

ライトモード固定でもコントラスト比は妥協しない

ダークモードは現時点では未対応で、ライトモード固定の設計です。
アクセシビリティ面では、テキスト色とバックグラウンド色のコントラスト比を意識し、メインテキストには十分に濃い色、補助テキストにも読める範囲の中間色を使い分けています。
ダークモード対応は、ライト側の体験を仕上げきってから検討する方針です。

まとめ

デザインシステムは作って終わりではなく、運用で守られて初めて意味を持ちます。
メディカルサークルでは、ルール化・配色・タイポ・共通ウィジェット・空状態の作り方まで一貫させたことで、画面ごとに迷わない開発体験と、ユーザーから見て揺れないブランド体験を両立できました。