これは応募用のサンプルです。 クラウドワークス【ID:13435386】業務管理システムの画面設計・HTMLモックアップ制作 のご応募にあたり、 「画像ではなく実際に触れるもの」を先にお見せするため、架空の工事会社を想定して作りました(実データは一切含みません)。 作成:平山雄介/株式会社BFP 制作時間:約3時間(Claude Code併用)
モックアップ / ダミーデータ
株式会社サンプル建設 山田(工務)でログイン中

案件一覧

ホーム > 案件一覧
見積提出中3
受注・施工中4
今月完工予定2
未請求1
案件No工事名取引先状態金額(税抜)着工完工予定
行をクリックすると「案件登録・編集」画面に内容が引き継がれます。
この画面でお客様に確認したいこと(例)
・「案件No」は手入力か自動採番か。既存Excelの採番ルール(年度+連番など)をそのまま引き継ぐか
・一覧に出す金額は「見積金額」か「受注金額」か。変更契約が入ったときにどちらを正にするか
・完工予定日を過ぎた案件を色分けする必要があるか(現場からの要望が出やすい箇所)

案件登録・編集

ホーム > 案件一覧 > 案件登録・編集

基本情報

※ 入力内容はこのブラウザ内だけで保持します(サーバー送信なし)。保存すると一覧の1行目に反映されます。
設計上あえて分けている点
・「見積金額」と「受注金額」を1項目にまとめず、変更契約の履歴を後から足せる形にしています
・取引先はプルダウン+「新規で登録する…」を同じ場所に置き、現場で入力が止まらないようにしています
・備考は自由入力のままにしていますが、書かれた内容を見て後から定型項目へ切り出す前提です

工事日報入力

ホーム > 案件一覧 > 工事日報

本日の作業

モックのため無効化しています。実装時はスマホからの直接アップロード+案件・日付での自動仕分けを想定。

登録済みの日報(このセッション)

日付案件天候出面作業内容
まだ登録がありません。上のフォームから登録してください。

取引先マスタ

ホーム > マスタ管理 > 取引先

登録済み取引先

コード取引先名区分締日支払備考
T-001市原工業(株)元請20日翌月末請求書は郵送+PDF
T-002(有)東葉設備協力会社末日翌々月10日
T-003ナカムラ住建元請末日翌月25日担当:中村様
マスタ設計で最初に潰す表記ゆれ(Excel移行で必ず出る)
・「(株)」「株式会社」「㈱」の混在 → 正式名称+検索用カナを別項目に分ける
・同じ会社が支店ごとに別行で登録されている → 取引先コードと支店コードを2階層にする
・締日/支払サイトが人の記憶になっている → マスタに持たせて請求書側から参照する

ヒアリングメモ → 画面項目への落とし込み

この仕事の中心だと理解している部分を、そのまま見える形にしました

お客様の発言(断片)と、そこから起こした項目

打ち合わせで出た言葉画面への落とし込み状態
「金額はだいたい見積のまま。たまに追加が出る」受注金額とは別に「変更契約」を明細で持つ。一覧の金額は受注金額+変更契約の合計決定
「日報は現場から夕方スマホで送ってくる」日報はスマホ縦画面を基準に設計。入力は6項目まで。写真は後追いアップロード可決定
「請求はまとめる月とバラす月がある」案件単位/取引先単位の両方で請求書を起こせるようにする保留(経理の締め処理を要確認)
「協力会社さんの人工も入れたい」出面を自社/協力会社で分けて入力。原価集計は次フェーズ保留(原価管理をこの範囲に入れるか未決)
「Excelの案件番号はそのまま使いたい」案件Noは手入力可+自動採番の切替。既存データはCSVで取り込み決定
保留は「誰が・いつまでに・何を決めるか」まで書いて共有し、次回の打ち合わせで先頭に戻します。決定は決定した日付と発言者を残します。

項目定義(案件テーブル・抜粋)

項目名必須桁・区分備考
案件No文字12年度4+連番4。重複不可
工事名文字60
取引先コード参照取引先マスタ削除済み取引先は選択不可
ステータス区分見積提出中/受注・施工中/完工/失注失注時は理由を必須にするか要確認
受注金額数値整数・税抜税区分はマスタから引く
着工日/完工予定日日付完工予定<着工はエラー
備考文字500現場申し送り。定型化は運用後に判断

画面遷移図

モックアップと一緒に必ず出している成果物のひとつです
┌──────────────┐ │ 案件一覧 │◀────────────┐ └──────┬───────┘ │ 行クリック │ +新規 │ 保存 / キャンセル ▼ │ ┌──────────────┐ │ │ 案件登録・編集 ├─────────────┘ └──┬────────┬──┘ │ │「この案件の日報を入力」 │ ▼ │ ┌──────────────┐ │ │ 工事日報入力 │──登録──▶ 日報一覧(同画面下部) │ └──────────────┘ │「新規で登録する…」 ▼ ┌──────────────┐ │ 取引先マスタ │──登録──▶ 案件登録画面へ戻り、選択済みで復帰 └──────────────┘
  • 戻り先を必ず決める(マスタ登録から戻ったとき、入力途中の案件情報が消えないこと)
  • 現場が使う画面(日報)は、一覧を経由せず直接開ける導線を別に用意する
  • 保留になっている「請求」は今回の遷移図には描かず、決まってから足す

この形で進める理由

  • 画面を触ってもらうと「この項目いらない」「ここに○○も出したい」が打ち合わせのその場で出る。デザインカンプだと出てこない。
  • 作る側が迷った箇所を 保留 のまま見せられるので、決まっていないことを決まったことにしないで進められる。
  • HTMLのままなので、そのまま実装(PHP/Python)のテンプレートに転用できる。