Webアプリ・2026年

PCゲームライブラリ管理アプリ

数百本に増えた所有ゲームが、どこに何があるか分からず、遊ぶものを選ぶのに時間がかかる

想定した利用者
数百本のゲームを所有し、次に遊ぶ1本を選びたい人
取り組んだ工程
  • 企画
  • 設計
  • デザイン
  • 実装

画面

ゲーム一覧の画面。パッケージ画像のカードを4列で並べ、上部に検索ボックス、並び替え、367件の表示がある
一覧(タイトル順)
ゲームの詳細モーダル。画像、タイトル、メタスコア89、発売日、ジャンル、概要を表示し、左右に前後移動のボタンがある
詳細モーダル
「ホラー」で検索した結果の一覧。36件に絞り込まれ、ホラー作品のカードが並ぶ
検索結果(36件)

目的

所有ゲームを一覧で見渡し、遊びたい1本を短い時間で選べるようにする

課題

ゲームが増えるほど、タイトルや発売時期、ジャンルを覚えきれず、買ったことを忘れて重複して持つこともある。表計算ソフトの一覧では、パッケージ画像がなく選びにくい

進め方

  • パッケージ画像のカードで一覧を作り、タイトルを知らなくても見た目で探せるようにした
  • タイトル・ジャンル・メモを対象にした検索を、入力と同時に絞り込む形にし、件数をバッジで示した
  • 並び順をタイトル順・発売日順・メタスコア順から切り替えられるようにした。検索結果にも同じ順序を適用した
  • 詳細をモーダルで開き、発売日・ジャンル・概要・メタスコアを1画面で確認できるようにした
  • モーダル内で前後のゲームへ移動でき、左右ボタンとスワイプに対応した。移動の順番は一覧の並びに合わせた

工夫した点

  • 追加時は、発売日・ジャンル・メモ・メタスコアをAIが自動で入れるようにし、タイトルと画像を入れるだけで登録できるようにした
  • 追加・編集はパスワード認証をバックエンド側で検証し、閲覧だけの人は操作できないようにした
  • メタスコアは編集時だけスライダーで変更できるようにし、誤って入力されにくくした

使用した技術

React
検索・並び替え・モーダルなど画面の状態が多く、部品ごとに管理しやすいため
Vite
開発中の表示確認が速く、静的ファイルとして書き出せるため
Google Apps Script / スプレッドシート
サーバーを用意せずに、データの保存と管理者認証を持てるため
Cloudflare Pages
GitHubへのpushで自動公開でき、運用の手間がかからないため

関連リンク