📱

🩺看護師が医療現場で使う計算ツールの開発に挑戦してみた #2：計算ボタンの並びをスマホ向けに最適化！UIを改善した記録"

に公開
Next.js
React
TypeScript
Tailwind CSS
看護師
tech

💡 はじめに

現役看護師として働きながら、Next.js × TypeScript × Tailwind CSS を学習し、
そのアウトプットとして「看護師向け計算ツールアプリ」の開発に挑戦しています。

このツールは、投薬量・点滴速度・体液バランス・栄養計算など
医療現場でよく使う計算をひとまとめにした Web アプリです。

現場で使える実用性と、開発者としての再利用性・型安全性の両立を目指し、

実装の過程を1ステップずつ公開しています。

⚙️ 使用技術

  • Next.js 15（App Router）
  • TypeScript
  • Tailwind CSS
  • PWA対応（オフライン動作）

📈 これまでの進捗

  1. 投薬・点滴・栄養など主要計算機能の実装
  2. 履歴データの保存・表示
  3. PWA対応によるオフライン化
  4. 型ガードによる安全な履歴再利用

前回の記事では、
電解質補正機能（Na/K）を分割してタブ切替に対応し、型安全に再利用できるようにした工程
をまとめました。

📱 今回のテーマ：計算ボタンのUIをスマホ向けに最適化！

今回の記事では、ホーム画面の「計算ボタン」をスマホでも見やすく・使いやすくするため、
レイアウトの最適化（レスポンシブ対応） に取り組みました。

🎯 目的

看護師が片手で操作できるアプリを目指し、
PCとスマホでレイアウトを切り替えるUIを実装しました。

🪧 Before → After

Before After
📋 2列×4行の縦スクロールレイアウト 📱 スマホは2列×横スクロール対応
スクロールが長く一覧性が低い 横スワイプで直感的に操作可能
PCとスマホで同一構成 デバイスごとに最適化した配置

🧩 実装構成

対象コンポーネント：

components/
├─ CalcButton.tsx ← ボタン単体
└─ CalcNav.tsx ← ボタン群（ナビゲーション）

💡 CalcNav.tsx の変更内容

<div
  className="
    grid grid-cols-4 gap-4 
    max-w-3xl mx-auto
    sm:grid-cols-2 sm:overflow-x-auto sm:flex sm:flex-nowrap sm:gap-3 sm:pb-2
  "
>
  {calculators.map((calc) => (
    <CalcButton
      key={calc.id}
      calc={calc}
      active={activeCalc === calc.id}
      onClick={() => onSelect(calc.id)}
    />
  ))}
</div>

✅ 変更ポイント

クラス名 役割
grid-cols-4 PC時は4列固定で整列
sm:flex sm:overflow-x-auto スマホ時は横スクロール化
sm:pb-2 スクロール時の下余白を確保

Tailwindの " レスポンシブ修飾子（sm:）" を活用し、
1つのコードで「PCとスマホ両対応レイアウト」を実現しました。

🎨 CalcButton.tsx の改善

<button
  onClick={onClick}
  className={`
    flex flex-col items-center justify-center
    w-32 h-32 rounded-2xl shadow-sm
    ${active ? "ring-2 ring-offset-2 ring-gray-500" : ""}
    transition-transform hover:scale-105
  `}
>
  <Image src={calc.iconPath} alt={calc.name} width={40} height={40} />
  <span className="mt-2 text-sm font-medium">{calc.name}</span>
</button>

改善ポイント

  • hover:scale-105：ふわっと浮くようなアニメーション
  • ring-2：選択中のボタンにわかりやすいインジケータ表示
    この2つの変更だけでも、操作感とデザインの印象が大きく変化しました。

📷 UIイメージ

📱 スマホ：指でスワイプして計算ボタンを切り替え
💻 PC：横4列の整ったグリッド配置
🎨 白×グレー基調で清潔感を維持

医療アプリに求められる「即操作できる直感性と視認性」を意識しています。

🧠 学びと気づき

  • Tailwind CSSのレスポンシブ指定（sm:, md:）は非常に強力
  • grid＋flexの組み合わせで柔軟なレイアウト切替が可能
  • ボタン1つに「影」「アニメーション」「インジケータ」を加えるだけでUXが段違い

🚀 次回予告

次回は、履歴ページを見やすく！UIデザイン改善で直感的な操作へ進みます。
見た目を整えつつ、ユーザーが過去の計算を確認しやすい構成を目指します。

🩺 現場で働く看護師だからこそ見える課題を、
React × TypeScript で“ツール”として形にしていく試み。
引き続きシリーズでお届けします。

Discussion