✦

Daily Film

個人開発•2025年秋学期•React · TypeScript · Vite · Tailwind · Framer Motion

プロダクトデザイン、フロントエンド開発、API統合

サイトを見る↗

アルゴリズム疲労への処方箋。100の選択肢ではなく、今日最も見る価値のある1本だけ。

Netflixのホーム画面には75以上のレコメンド枠、Spotifyは毎日6つのパーソナライズドプレイリストを生成。アルゴリズムが精密になるほど選択肢は増え、ユーザーはかえって決められなくなる——「選択のパラドックス」。Daily Filmはその逆を行く:毎日1本だけ、確定的アルゴリズムで世界中のユーザーが同じ1本を見る。「何を見よう?」の不安を「今日の映画は?」の期待に変える。

01

毎日のレコメンドアルゴリズム

バックエンドDB不要、ユーザー行動データ不要。日付をランダムシードとし、TMDBの高評価映画ライブラリから確定的に選出。世界中のユーザーが同じ映画を見る——真の「今日みんなが見ている映画」。

実装:日付文字列 → ハッシュ関数 → 映画ライブラリインデックス。アルゴリズムは完全にクライアントサイドで実行、サーバーコストゼロ。

毎日のレコメンドアルゴリズム
02

映画詳細ページ

Information Dossierスタイルの詳細ページ。従来の映画紹介ではなく、各映画を「情報ドシエ」として構成——基本情報、財務データ、キャスト・スタッフの3次元で、TMDB APIからリアルタイムに取得。

Stale-While-Revalidate戦略でページナビゲーション、SPAの画面遷移時の白画面を解消。

映画詳細ページ
03

ソーシャルシェアポスター

ワンクリックで高品質シェアポスター生成。映画ポスター + 評価 + 日付情報を自動レイアウト、Canvas APIで画像にレンダリング、カメラロールへの保存やSNSシェアに対応。

Canvasエンジンが画像トリミング、テキストレイアウト、グラデーションマスク、ブランド透かしを自動処理——バックエンド画像サービス不要。

ソーシャルシェアポスター
Cross-device showcase

確定的レコメンド

純クライアントサイドアルゴリズム。日付シード、バックエンド不要、運用コストゼロ。

SWRナビゲーション

Stale-While-Revalidate戦略。ページ遷移時の白画面ゼロ、スマートキャッシュ戦略。

Canvasポスター

クライアントサイド画像合成エンジン。自動レイアウトレンダリング、ワンクリック保存・共有。

TMDB API

映画メタデータ、ポスター、キャスト情報をリアルタイム取得。ローカルキャッシュで高速レスポンス。

PWA対応

Progressive Web App。ホーム画面にインストール可能、キャッシュコンテンツのオフラインアクセス。

Framer Motion

スムーズなページトランジションとマイクロインタラクション。プレミアムな閲覧体験。

最大の学び:「少ないことは豊かなことだ」はデザイン原則だけでなく、プロダクト判断そのもの。検索を削り、お気に入りを削り、パーソナライズドレコメンドを削る——引き算は足し算より難しい。コア体験への十分な確信が必要だから。

技術的に最も面白かったのは確定的レコメンドアルゴリズムの設計。多くのレコメンドシステムはパーソナライズを追求するが、Daily Filmはその逆:全員が同じ映画を見ることで「共有体験」を創出。この決定が全てを定義した——「今日の映画」からソーシャルシェアポスターまで。

継続するなら:「過去のピック」カレンダービューで見逃したレコメンドを振り返る機能、「映画日記」で視聴履歴を記録する機能を探索。


//