URL　　https://saikyoxrea.shop/renew

「契約の管理も、期限の見落としもこれ一つで完結」

Web制作会社向けに開発した契約・更新期限管理アプリ。契約やサブスクリプションの更新日を自動で計算し、残り日数に応じて色で視覚的に判別。一覧画面から編集や削除も可能で、検索・期限フィルターも搭載。ブラウザのLocalStorageと同期してデータを永続化し、PC・スマホ問わず快適に操作できるレスポンシブ設計です。

制作時間：5時間
使用ツール：Visual Studio Code、FileZilla、ブラウザ（Chrome / スマートフォン実機）
使用技術：HTML、CSS、JavaScript（Vanilla JS）、ローカルストレージ

■　構成・工夫点
【UI / UX面の工夫】 情報の網羅性と「一覧性」の最大化。 カレンダーやデータをタブで切り替えず、1ページ内でシームレスに確認できるレイアウトを採用しました。視線の移動やクリックの手間を最小限に抑え、すべての情報を即座に目視できる構成にこだわっています。 管理作業の導線短縮 一覧画面から直接編集・削除操作が行える構成とし、別ページへの遷移をなくすことで、管理作業のストレスを軽減しました。


↓　キーワード検索　　
　①　例）検索窓に「クラウド」と入力→　一覧に検索結果のみが表示さ
　　　　　れ、検索窓に検索クリアボタンが表示されます。

↓　②　検索クリアボタンをクリックすると、一覧表示へ即座に戻れる操作
　　　　性を実現しています。

↓　削除・メモ　　
　　各契約カラムをクリックすることで、削除・メモ編集の画面が表示され
　　る設計としています。管理作業を効率的に行えるよう、一覧画面から
　　直接操作できる導線にしています。

↓　スマホ画面
　　スマートフォン表示時に各契約情報が画面幅に最適化されるよう、
　　レスポンシブ対応としてカード型UIを採用しています。