TSUDOWATETSU WORKSCLIENT SERVICES
相談する
MENU
SHIP / CHECK確かめた舟から、灯台へ出ていく。イメージイラスト
← 制作例一覧

SELF-INITIATED DEMO / 自主制作

SHIP / CHECK — QA / 納品工程DEMO

OVERVIEW

つくって終わりにしない。手の確認と、機械の記録を分けて残す。

Next.jsReactTypeScriptCSS
Live Demoを操作する

自主制作のデモです。チェックリストは手の確認の記録で、チェックを付けても自動テストは実行されません。自動検査の表は保存済みの記録で、ページを開いたときに走るものではありません。各行に再現手順を書いています。

AI
使っていません計算と決まった規則だけで動きます。
保存先
保存しないチェックの状態はページの中だけにあり、再読み込みで最初の状態に戻ります。
外部送信
なし入力した内容は、このブラウザの外へ送られません。
MAIN VISUAL / LIVE DEMO
SHIP / CHECKの実装済みDesktop画面
実際に操作できる自主制作デモ
SCOPE
Design + Build + QA
EST. DELIVERY / 納期目安
対象範囲確認後に提示
PRICE GUIDE / 参考価格
要件により見積

01THE PROBLEM

何を確認し、何が納品されるのかを曖昧にしないこと。

想定したクライアント
公開前の確認と納品の整理を任せたい発注者（架空）
想定依頼
公開前のチェック内容と、納品時にもらえるファイルを具体的に確認したい。
起きていること
「テストしました」と言われても、何を確かめたのか、何が渡されるのかが分からない。
困りごと
納品後に、確認していなかった画面や手順が見つかる。
制作コンセプト
品質を宣言するだけでなく、確認と引き継ぎの手順を見せる。

想定のクライアントと依頼は、この自主制作のために設定した架空のものです。実在の企業・店舗からの受託ではありません。

02SIGNATURE JOURNEY

作って終わりにしない。手の確認と機械の記録を分けて渡す。

受入チェックの操作と納品マニフェストの生成に加え、実際に走った自動検査の記録を、再現手順つきで別枠に並べました。

  1. SHIP / CHECKの自動検査の記録

    自動検査の記録を読む

    保存してある自動検査の結果を、対象コミット・日時・再現手順つきで表示します。古い記録には警告が出ます。

  2. SHIP / CHECKのチェックリスト

    手で確認する

    工程ごとのチェックリストを、実際に確かめた順に付けていきます。

  3. SHIP / CHECKで納品マニフェストを出力できる状態

    全項目でマニフェストを出す

    すべてにチェックが付いたときだけ、納品マニフェスト（JSON）を書き出せます。

画像は、公開しているデモを実際に操作して撮影した画面です。同じ手順を自分で試す

VISUAL DIRECTION

確認から納品まで、見える形に。

  1. CHECK表示・操作を確認
  2. RECORD結果と注意点を記録
  3. DELIVERソース・READMEを整理

デモでは比較切替・チェック操作を実際に試せます。数値成果や外部テスト結果を示すものではありません。

03KEY INTERACTIONS

触って確かめられる操作

見た目だけのボタンは置いていません。押すと状態が変わり、関連する画面にも反映されます。

04BEHIND THE SYSTEM

画面の裏で、何が決まっているか

データの持ち方、状態の進み方、事故を防ぐための決まりごと。本番化するときに引き継ぐ設計です。

データ

  • 手の確認のチェックリスト（8項目）
  • 保存済みの自動検査の記録
  • 納品マニフェスト

状態の流れ

  1. 未確認
  2. 確認中
  3. 全項目確認
  4. マニフェスト出力

安全のための決まりごと

  • チェックを付けても自動テストは実行されない、と明記する
  • 失敗や未実施の記録も、そのまま表示する

05RESPONSIVE & ACCESSIBILITY

ひとつの体験を、どの画面でも。

PCは情報の比較しやすさ、タブレットはカラム幅、モバイルは読む順番とタップ領域を調整。下の画像は、実際のデモを各画面幅で撮影したプレビューです。

QA / 納品工程DEMO / Desktop Preview
Desktop Preview
QA / 納品工程DEMO / Tablet Preview
Tablet Preview
QA / 納品工程DEMO / Mobile Preview
Mobile Preview

06SCOPE & BOUNDARIES

できること・していないことを、先に書く

自主制作のデモと、実際の案件で納品するものの差を、項目ごとに分けています。

実装済み

このデモで実際に動くこと

  • チェックリストと進捗
  • 全項目確認後のマニフェスト出力
  • 保存済みの自動検査の記録の表示

デモ限定

見せ方のために簡略化していること

  • 自動検査の表は保存済みの記録で、ページを開いたときには実行しない

未接続

公開版では接続していないもの

  • CIサービスとのリアルタイム連携

本番化に必要なこと

実案件で追加で設計・実装するもの

  • 案件ごとの受入条件の合意と、それに対応した検査
  • CIでの自動実行と、結果の保存場所

07DELIVERY & QUOTE

納品物と、見積もりの目安

参考価格 要件により見積／納期目安 対象範囲確認後に提示。範囲と素材が決まってから、正式なお見積もりと納期をお出しします。

もっと詳しく見る？使用技術・実装した機能・納品物・確認項目
TECH STACK / 使用技術

Next.js / React / TypeScript / CSS

対応範囲

設計・デザイン・実装・内部QA・ドキュメント整理

制作期間目安

対象範囲確認後に提示

参考価格

要件により見積

実装した機能
  • 工程別チェックリストと進捗表示
  • 全項目確認後のマニフェスト出力
  • 実行済みの自動検査の記録（対象コミット・日時つき）
  • 未実施の検査を理由つきで表示
DELIVERABLES / 納品可能物
  • ソースコード・設定ファイル
  • 起動・更新手順のREADME
  • 画面仕様・検証項目一覧
QA内容・確認項目
  • PC / Tablet / Mobile表示
  • キーボード操作・コントラスト
  • リンク・入力・エラー状態

見積もりが変わるところ

  • 確認する画面・端末・ブラウザの数
  • 自動テストを新しく書くか、手の確認だけか
  • READMEや引き継ぎ資料の範囲

参考価格・期間です。ページ数、機能、デザイン、素材、API・外部サービス、修正範囲で変動します。仕様と素材の確定後に正式なお見積もり・納期を提示します。 納品物は契約範囲に合わせて確定します。QA内容は確認対象を示すもので、実運用環境の適合保証ではありません。

RELATED SERVICES

この制作に近いサービス

テスト / QA / 納品Webアプリ / 管理画面TypeScript / Next.js

08CONTEXTUAL CONTACT

このデモのような制作を相談する

近いと感じた機能に印をつけてください。相談フォームに「SHIP / CHECKを参考にした」ことと、選んだ機能が入った状態で開きます。送信前にすべて編集・削除できます。

参考にしたい機能（任意・複数可）

この時点では何も送信されません。フォームを開くだけです。

MESSAGE-ONLY OK

メッセージだけでも、進められます。

仕様確認・進捗共有・修正確認・納品まで、クラウドソーシング上のメッセージを中心に対応。Zoom / Google Meetは必須ではありません。

相談内容をまとめる
A GOOD PLACE TO START / TETSU WORKS

つくりたいものを、
聞かせてください。

まだ要件が曖昧でも大丈夫。
いま困っていることから、一緒に整理します。

相談内容を入力する ↓
まずは文章で。
打ち合わせの前に、相談できます。
  1. 01相談を送信
  2. 02内容を確認
  3. 03メールで返信
  4. 04合意して制作開始

金額・納期・制作範囲は、内容を確認してご相談。
送信した時点で契約や発注にはなりません。

案件サイトからのご相談は、そのサービス内メッセージでも進められます。

YOUR NEXT PROJECT必須はお名前・メール・ご相談内容
01 何を相談したいですか？ 未定でも大丈夫
02 いま、考えていること

困っていること、つくりたいものを自由に。10〜2,000文字。秘密情報・パスワードは入力しないでください。

予算・希望時期・参考資料を添える 任意

予算・時期はご希望の目安です。制作範囲を確認してお見積もりします。

03 お返事先

送信内容はお問い合わせ対応のために利用します。

受付状況を確認しています。

案件サイトのメッセージで相談したい方へ

入力内容をコピーして、ご利用中のサービスへ貼り付けられます。ここからは送信しません。