推しアイデア
単におすすめされるだけでなく、自分で“ディグる”感覚が楽しい！
Diggraph Anime
アニメの関連作をグラフで辿り、新しい作品を発見できる探索アプリ
作った背景
多くのアニメ作品から自分の好みに合うものを見つけ出すのは大変なので、探索するプロセス自体が楽しかったらいいなと思ったから
推し技術
グラフ描画ライブラリである Unovis は、ノードクリック時の遷移アニメーションと配置がとても自然！
プロジェクト詳細
Diggraph Anime
Diggraph Animeは、アニメ作品同士のおすすめ度に基づく「つながり」をネットワークグラフで可視化し、ユーザーがノードをクリックしてグラフを“ディグる”ことで偶然の出会いを楽しめるWebアプリケーションです。
- 起点アニメから関連作品を芋づる式に探索
- 右側パネルで詳細情報表示
- 右下にトレーラー映像を埋め込み
開発背景と目的
課題
- 膨大な作品数に対して、未知の良作を見つけるのが困難
- 受動的なレコメンデーションでは偶発的発見が少ない
- 作品間の関連性がリストでは直感的でない
目的
- ネットワークグラフで“つながり”を視覚化
- ユーザー自身が能動的に深掘りできる探索体験
- 詳細情報→トレーラー視聴へのシームレスな導線
主な機能
- ネットワークグラフ（Dig）
- アニメノードをクリックするたびに関連作品を展開
- 最適なレイアウトに自動配置
- 詳細情報パネル
- Annict API から日本語タイトル、放送時期、キャスト、レビュー等を取得
- パネルはリサイズ可能
- トレーラー埋め込み
- Jikan API からトレーラーURLを取得し、画面右下に表示
- 気になった作品をその場でプレビュー可能
4. 技術スタック
- 言語: TypeScript
- フレームワーク: React, Next.js (App Router)
- グラフ描画ライブラリ: @unovis/react
- スタイリング: Tailwind CSS, shadcn/ui
- 認証: Auth.js, OAuth (Annict)
- API:
- Annict API (REST): 日本語詳細情報
- Jikan API (REST): レコメンデーション、トレーラーURL
- デプロイ: Vercel
- 開発支援:
- GitHub Copilot
- プルリクエストレビュー
- コード補完
- GitHub Copilot
5. 技術的チャレンジ＆工夫
AI活用による開発効率化
- GitHub Copilot でプルリクエストのレビューコメント生成とコードスニペット提案
- Copilot AgentやCursorを活用したAIコーディング
