中村将明/ 制作事例/ Rill：個人事業主の資金予測モバイルアプリ

CASH FORECAST APP / UI・UXコンセプト

Rill：個人事業主の資金予測モバイルアプリ

CONCEPT

口座の接続から、今日使ってよい金額とその引き算の提示、14日間の支払いの並び、入金予定の請求、口座内に取り置く額の設定、読み取りが古くなったときの復旧までを6画面で通した、実際に操作できるスマートフォンアプリのプロトタイプ（制作サンプル）。

カテゴリ

CASH FORECAST APP / UI・UXコンセプト

想定業種

個人事業主の資金繰り・入金管理

担当範囲

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

状態

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

「結論だけを出さず、その金額を作った引き算ごと画面に出す」という方針を題材に、6画面と3つのエッジ状態を「操作できるプロトタイプ」として実装したモバイルアプリのコンセプトワークです。390×844のスマートフォンを主として設計し、430×932でも監査しています（430では余白16→20・内容幅358→390と組み替わり、文字サイズは変えていません）。デモのケーススタディ本文から実物のプロトタイプを開けます。公開37状態を2ビューポート計55レンダ（390が37・430が18）で機械監査（重なり・見切れ・省略・タップ領域・余白・コントラストの6検出）にかけ、重なり・見切れ・省略・タップ領域・コントラストはいずれも0件（コントラストの判定不能も0件）。残る余白16件（390が9・430が7）は、シートの上の覆いや、起きた出来事の数だけ行を持つ同期記録など、内容を作らなければ埋まらないものなので、そのまま記録として残しています。監査結果のJSONが持つ合計欄は主ビューポートの9件だけを指すこと、全55レンダの合計は16件であることも、ケーススタディ本文に明記しています。受け入れテスト Playwright 154件（7スイート・両ビューポート）が通過し、axe-core（wcag2a / wcag2aa / wcag21a / wcag21aa / wcag22aa）は14の画面・状態×2ビューポートの28回すべてで、重大度を問わず違反0件（ルール無効化・除外セレクタ・免除リストはいずれもなし）、Storybook は6スイート52件すべてで play() を実行しています。UIは React Aria Components 1.19.0 のコンポーネント25個を src/ 配下の8ファイルで直接使用し（うち8種は仕様が指定した部品で、キーボード操作のテストを個別に持っています）、React 18 + TypeScript + Vite で実装しています。ケーススタディには27.12秒・390×844の操作動画（字幕14件、字幕は1件ずつ対応する実フレームと突き合わせ済み）を同梱しています。この案件は視覚レビューを1回目で通過しており（採点11項目のうち基準が設定された9項目すべてが基準以上。構成は87点で基準84点、汎用テンプレらしさは11点で上限20点、重大な不合格0件、上流への差し戻し0回）、これはこのシリーズ5件で初めてのことです。未解決の弱点も伏せていません。金額入力欄は£999.99を境に文字サイズが48pxから20pxに落ちること、公開37状態のうち5つは押して到達できずデータの初期値でしか出せないこと、残高の小数点揃えは実測を取れていないことを、いずれもケーススタディに残しています。この製品は送金・振替・支払いの機能を一切持たず、金額を動かすのは利用者自身が取り置く額だけです。登場する人物・口座・請求・数値はすべて架空で、実在の企業・商標・受託案件を示すものではありません。