【React × Tailwind CSS】見やすさ重視の基準値判定UIを作る

職場にあったら便利だなと思い開発を始めた「看護師向け計算ツールアプリ」。
今回は Tailwind CSS で実現した「高値↑・低値↓」のわかりやすいUI設計を紹介します。

要約

• 医療UIでは「派手さ」より「安心感」「一貫性」が大事
• 矢印アイコン＋色で状態を即時可視化
• items-baseline＋ml-1で数値とアイコンを自然に整列
• 彩度を抑えた text-red-400 / text-blue-400 が視認性◎

実装例

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-400 ml-1 inline-block" />;
  if (value < range.min)
    return <ArrowDown className="w-4 h-4 text-blue-400 ml-1 inline-block" />;
  return null;
};

---

📘 詳細なUI設計・配色の考え方はZennで公開中👇
👉 【React × Tailwind CSS】医療系アプリで学ぶ基準値UI設計④（Zenn）