Webアプリ（契約・更新期限管理アプリ）

契約やサブスクリプションの更新管理を想定し、 更新期限までの残日数を自動計算して可視化する、フロントエンド完結型の管理アプリを作成しました。

URL：https://www.otomoko.shop/subs/

目的：契約・サブスクリプション・保守契約などの更新期限を管理し、更新期限までの日数を自動計算し、 期限が近い契約を分かりやすく表示すること

想定利用シーン（実務想定）

• Web制作会社の保守契約管理
• ドメイン・SSL・サーバー更新管理
• サブスクリプション契約管理

使用技術・言語等

• HTML / CSS / JavaScript
• 外部ライブラリ：使用しない
• データ保存：画面内配列、localStorage

機能

• 契約を登録・削除できる
• 契約一覧を表示（PC版は表形式、スマホ版はカード形式）
• 契約の残り日数が自動計算され、状態によって表示（色）が変わる
• 項目別の並び替え、契約種別のフィルタリング、期限切れ契約のみ表示させるチェックボックスなどの機能を実装

工夫した点

• 残り日数を自動計算し、「通常／注意／警告／期限切れ」を色分け表示することで、優先度が直感的に分かるようにした
• ライト／ダークモード切替と配色調整により、文字が埋もれない・目が疲れにくいUIを意識した
• PCでは表、スマホではカード表示に切り替え、画面幅が狭くなっても情報が読みやすいレスポンシブ対応を行った
• 画面内配列を基本としつつ、必要に応じて localStorage保存をON/OFF切替できる仕様にした
• 初回起動時はデモデータを表示し、操作方法や表示結果がすぐ理解できるよう配慮した（削除可能）

作業時間：5時間。ChatGPTにて作成