中村将明/ 制作事例/ Acreline：サプライチェーン排出量の推計SaaS

SAAS WEB APP / UI・UXコンセプト

Acreline：サプライチェーン排出量の推計SaaS

CONCEPT

表計算ファイルの取り込みから、列の対応付け、判断が要る行の解消、合計とその幅の提示、2案の比較、出所を名指しする監査パックの書き出しまでを6画面で通した、実際に操作できるデスクトップ業務アプリのプロトタイプ（制作サンプル）。

カテゴリ

SAAS WEB APP / UI・UXコンセプト

想定業種

サプライチェーンの排出量推計・監査証跡

担当範囲

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

状態

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

「一つの数字を出したあと、その数字を測定値と読ませないために製品の残り全部を使う」という方針を題材に、6画面と3つのエッジ状態を「操作できるプロトタイプ」として実装したデスクトップ業務アプリのコンセプトワークです。1440×900のデスクトップを主として設計し、1280×800・768×1024でも監査しています（768では左ナビが56pxのアイコンレールへ、複数ペインが縦積みへ、2つのドロワーが接地するボトムシートへ組み替わり、タップ領域の下限も44pxへ上がる、拡大縮小ではないレイアウト切り替えです）。デモのケーススタディ本文から実物のプロトタイプを開けます。公開34状態を3ビューポート計64レンダ（1440が34・1280が13・768が17）で機械監査（重なり・見切れ・省略・タップ領域・余白・コントラストの6検出）にかけ、重なり・見切れ・省略・コントラストはいずれも0件（コントラストの判定不能も0件）。残るタップ領域1件は React Aria が role を載せる13×13pxの不可視プロキシ input で、指が実際に触れる対象（ラベル要素、414×58px）が基準以上であることは別のテストで担保しています。余白95件のうち64件は「6項目のナビレールが画面の高さより短い」という一つの事実を64レンダそれぞれで1件ずつ数えたもので（空きは1440×900で530px・1280×800で430px・768×1024で682px）、残る31件は8つの別ペインに分散しています（本文領域そのものは1件も出していません）。監査結果のJSONが持つ合計欄は主ビューポートのみの58件を指すこと、全64レンダの合計は96件であることも、ケーススタディ本文に明記しています。同一の量を述べる表示どうしの突き合わせは、44種の量×3ビューポート＝132行を実際に保持したファイルで行い、513回の表示読み取りに対して食い違い0件です。受け入れテスト Playwright 288件（7スイート96テスト×3ビューポート）が通過し、axe-core（wcag2a / wcag2aa / wcag21a / wcag21aa / wcag22aa）は17の画面・状態×3ビューポートの51回すべてで、重大度を問わず違反0件（ルール無効化・除外セレクタ・免除リストはいずれもなし）、Storybook は6スイート52件すべてで play() を実行しています。UIは react-aria-components 1.5.0 を導入し、コンポーネント27種と型2種を src/ 配下の8ファイルで直接 import しています（うち16種は仕様が名指しした部品で、キーボード操作は14テスト×3ビューポートの42件で検証しています）。React 18 + TypeScript + Vite で実装しています。ケーススタディには27.80秒・1440×900の操作動画（字幕13件、字幕は1件ずつ出荷した動画から抜いた実フレームと突き合わせ済み）と、監査キャプチャとバイト一致する12枚の図版を同梱しています。この案件は視覚レビューを1回目で通過しており（採点11項目のうち基準が設定された9項目すべてが基準以上。製品らしさ93点で基準85点、構成87点で基準84点、汎用テンプレらしさは10点で上限20点、重大な不合格0件。残る2項目には基準が設定されていません）、6件中2件目・最後の1件です。未解決の弱点も伏せていません。768向けに仕様が書いた組み替え2件（比較画面のラベル列の見出し化と、56pxの横帯）が未実装であること、事前見積りが余白7件と予測したのに実測は95件だったこと、機械では見えないとして書き出した11項目のうち5項目が人手確認のまま（数字の桁揃えはCSSプロパティとしてしか検査しておらず、図版内部の明度は一度も実測していない）であることを、いずれもケーススタディに残しています。この製品は排出係数の数値を画面に一切出さず、合計に対する内訳も「704 t of 1,284 t」という対で示して、合計100%になる百分率の組を印字しません。Acrelineは炭素会計ツールではなく、登場する企業・人物・拠点・素材・係数セット・数値はすべて架空で、実在の企業・商標・受託案件を示すものではありません。