アプリ画面（ブラウザ）

アプリ画面（スマートフォン）

csv出力イメージ

Web制作や業務委託の現場で発生しやすい「契約・更新期限の管理」を想定し、実務での使いやすさと視認性を重視して設計・実装したフロントエンド完結型のWebアプリです。

HTML / CSS / JavaScript のみで構成し、バックエンドや外部APIに依存せず、ブラウザの localStorage を用いてデータを管理しています。

契約情報は更新日を基準に自動判定され、
「通常 / 注意（30日以内）/ 警告（7日以内）/ 期限切れ」の4段階で可視化されます。ダッシュボードで全体状況を即座に把握できる点も、実務を意識した設計です。

また、

  • CSV形式での契約一覧エクスポート
  • サンプルデータの表示／非表示切替
  • 種別フィルタ、並び替え、期限切れ非表示

など、業務で実際に求められる操作性を最小限のUIで実装しています。
UIデザインは、長時間利用を想定し、
過度な装飾を避けた落ち着いた配色・コントラストに調整しました。
機能追加や保守を見据え、ロジックと描画処理を分離し、
初心者でも追いやすいコード構成を意識しています。
https://stanv.shop/apps/contract

使用技術

  • HTML / CSS / JavaScript
  • Tailwind CSS
  • localStorage
  • CSV生成（JavaScript）

制作ポイント

  • 実務シーンを想定した機能選定とUI設計
  • 「作りすぎない」ことを意識した現実的な仕様
  • デモ用途と実運用を両立するサンプル管理設計

制作時間：4.5時間
使用ツール：ChatGPT、Gemini