【React × Tailwind CSS】医療系アプリで学ぶ基準値UI設計：④ 見やすさ重視のUI設計！基準値判定をわかりやすく表示する

📘 はじめに

Next.js + TypeScript + Tailwind CSSを学習しながら、
看護現場で役に立ちそうな「看護師向け計算ツールアプリ」の開発を進めております。

このアプリでは、「数値をただ表示する」だけでなく、“ひと目で状態がわかるUI”を意識しています。

今回紹介するのは、
React + Tailwind CSS で実現した
基準値判定UI（高値↑・低値↓の視覚表示）です。

🩺 Before → After

状態	Before	After
高値	147	147 🔺
低値	3.2	3.2 🔻
正常	140	140

ほんの少しの工夫で、データが“数値”から“情報”に変わります。

🧩 1. UI設計の基本方針

医療アプリのUIでは、派手さよりも
「読みやすさ」「一貫性」「安心感」が最優先です。

目的	デザイン方針
状態を一瞬で伝える	矢印アイコン（色で視覚化）
目に優しいコントラスト	明るすぎない赤・青
医療らしい落ち着いた印象	白×グレー×差し色の配色

🎨 2. Tailwindで作る基準値アイコンUI

アイコンは lucide-react を使用。
Tailwindでサイズ・色・余白を整えるだけでシンプルに仕上がります。

import { ArrowUp, ArrowDown } from "lucide-react";

export const getStatusIcon = (value: number, range?: { min: number; max: number }) => {
  if (!range) return null;
  if (value > range.max)
    return <ArrowUp className="w-4 h-4 text-red-500 ml-1 inline-block" />;
  if (value < range.min)
    return <ArrowDown className="w-4 h-4 text-blue-500 ml-1 inline-block" />;
  return null;
};

✅ ポイント

• inline-block：文字の横に自然に配置
• ml-1：一定の余白で整える
• w-4 h-4：サイズを固定してUI崩れを防ぐ

🧱 3. 数値と矢印を整列させる

<li key={i} className="flex items-baseline gap-2">
  <span className="text-base">{item.label}:</span>
  <strong className="text-2xl flex items-center font-semibold">
    {item.value}
    {getStatusIcon(Number(item.value), item.range)}
  </strong>
  <span className="text-sm">{item.unit}</span>
</li>

💡 items-baseline により、
数値とアイコンの下端を揃えて自然な見た目を維持します。

📏 4. 文字とアイコンのバランスを整える

<strong className="text-2xl flex items-center font-semibold leading-none tracking-wide">
  140
  <ArrowUp className="w-4 h-4 text-red-500 ml-1" />
</strong>

プロパティ	効果
leading-none	行間をなくして数字と矢印を詰める
tracking-wide	数字の読みやすさを上げる
font-semibold	安定感のある太さ
text-2xl	見出しより少し小さく強調に最適

🧩 5. カラー設計（医療UIらしさ）

Tailwind標準の text-red-500 はやや強めの赤。
彩度を抑えて“医療らしい落ち着き”を出します。

状態	クラス	印象
高値	text-red-400	注意喚起だが優しい赤
低値	text-blue-400	清潔感・冷静さ
正常	text-gray-600	落ち着いた視認性

全体背景を bg-gray-50 にすることで、
数字と矢印が柔らかく浮き立ちます。

🧠 6. 医療アプリらしい「安心感のUI」Tips

視点	工夫
🧩 一貫性	全ページで矢印の色・位置を統一
👁️‍🗨️ 視認性	数値の隣にアイコンを配置
🌿 柔らかさ	グレーと白を基調に安心感を演出
⚖️ バランス	数字とアイコンの高さ・間隔を揃える
🧠 誤解防止	数値単体でも意味が通るUIにする

医療UIでは「ぱっと見て安心できるデザイン」がとても重要。
派手さよりも、正確さ × 柔らかさを両立しましょう。

🧠 まとめ

項目	内容
🎨 配色	赤青を抑えた彩度で安心感を演出
⚙️ レイアウト	flex + items-baselineで自然な整列
🧩 再利用性	getStatusIcon()を共通関数化
🩺 医療的配慮	見やすさ・一貫性・心理的安心感を重視

🔗 シリーズ案内

🩺 【React × TypeScript】医療系アプリで学ぶ基準値UI設計シリーズ

1.基準値より高い・低いを矢印で表示する方法
2.normalRanges.tsで基準値を一元管理する設計パターン
3.型安全に基準値を扱う！比較ロジックを安全設計する方法
4.見やすさ重視のUI設計！基準値判定をわかりやすく表示する ←（この記事）