中村将明/ 制作事例/ Aster Shift：夜勤シフトのモバイルアプリ

SHIFT WORK APP / UI・UXコンセプト

Aster Shift：夜勤シフトのモバイルアプリ

CONCEPT

一つのシフトの登録から、そこから決まる睡眠ウィンドウの提示、健康データの読み取り、チェックイン、回復アクションの実行までを6画面で通した、実際に操作できるスマートフォンアプリのプロトタイプ（制作サンプル）。

カテゴリ

SHIFT WORK APP / UI・UXコンセプト

想定業種

交替勤務・夜勤シフト

担当範囲

情報設計・デザイン・実装（自社）

状態

コンセプトサンプル（デモを公開／実在の受託案件ではありません）

勤務時間が動く働き手が「まだ働いていないシフト」を基準に睡眠を置く、という問題を題材に、6画面と3つのエッジ状態を「操作できるプロトタイプ」として実装したモバイルアプリのコンセプトワークです。390×844のスマートフォンを主として設計し、430×932でも監査しています（幅430px以上では390を拡大するのではなく、430用のレイアウトへ切り替わります）。デモのケーススタディ本文から実物のプロトタイプを開けます。公開28状態を2ビューポート計38レンダで機械監査（重なり・見切れ・省略・タップ領域・余白・コントラストの6検出）にかけ、重なり・見切れ・省略・コントラストはいずれも0件（コントラストの判定不能も0件）。残るタップ領域5件は React Aria が role を載せる不可視のプロキシ input の寸法で、指が実際に触れる対象が44px以上あることは別のテストで両ビューポートとも検証済み、余白11件はシート内の空きです。いずれも内容を作って埋めることはせず、記録として残しています。受け入れテスト Playwright 146件が通過し、axe-core（wcag2a / wcag2aa / wcag21a / wcag21aa / wcag22aa ＋ best-practice）は28状態×2ビューポートの56回すべてで違反0件、Storybook は24件すべてで play() を実行しています。UIは React Aria Components 1.19.0 のコンポーネント20個を src/ 配下の9ファイルで直接使用し、React 18 + TypeScript + Vite で実装しています。この製品は診断も医学的な助言もしない方針で作られており、読み取り値に触れる文はすべて、利用者自身の直近の記録との比較か、次に取れる行動の提示にとどめています。登場する人物・シフト・数値はすべて架空で、実在の企業・商標・受託案件を示すものではありません。