はじめに
アイドルに限らず「自分の探している動画がなかなか見つからない」という経験をしたことがある方は多いのではないでしょうか。近年ではAI生成コンテンツの増加もあり、目的の動画が埋もれてしまうことも少なくありません。
今回は、K-POPアイドル同士のコラボダンスチャレンジ動画を簡単に検索・視聴できるサービスSeeKPOPを開発しました。
この記事では、サービスの紹介と開発の過程についてまとめます。
SeeKPOPについて
サービス概要
SeeKPOP は、YouTubeに投稿されているK-POPアイドルのコラボダンスチャレンジ動画を検索・視聴できるサービスです。「Seek（探し求める）」と「K-POP」を掛け合わせて命名しました。
コンセプトは 「探しているK-POPがすぐ見つかる」 です。
ターゲットユーザー
ダンスチャレンジ動画は新曲のリリースと同時に投稿されることが多いですが、ショート動画の性質上、能動的に検索されることは多くありません。
-
今回は以下のような、よりコアなK-POPファンをターゲットとしています。
-
K-POPが好きでよく動画をチェックしている人
ダンスチャレンジ動画を見る習慣があるファン
提供内容（2025年11月時点）
-
曲数：10曲
-
グループ数：10組
-
総動画数：130本
まずは最小構成でスタートし、ユーザーの反応を見ながら今後データを増やす予定です。
開発経緯
K-POPの世界では「ダンスチャレンジ」が欠かせない文化です。特にアイドル同士のコラボダンスは普段見られない組み合わせが実現するため非常に人気があります。
ただし、こうした動画を探す際には以下の課題がありました。
-
一般ユーザーの投稿で公式動画が埋もれてしまう
-
「曲名＋ダンスチャレンジ」のように長い検索キーワードが必要
-
推しのコラボ動画を探すまでに時間がかかる
これらを解決し、「見たいコラボ動画にすぐ出会える」 体験を目指してSeeKPOPを開発しました。
技術スタック一覧
フレームワーク
- Next.js: 15.3.5
ライブラリ
- React: 19.0.0
- react-dom: 19.0.0
- react-hook-form: 7.61.1
- swr: 2.3.4
- embla-carousel-react: 8.6.0
- lucide-react: 0.525.0
データベース
- @supabase/supabase-js: 2.50.4
CSS
- Tailwind CSS: 4.1.11
- daisyUI: 5.0.46
デプロイ
- Cloudflare Pages (@cloudflare/next-on-pages): 1.13.12
テスト
- Vitest: 3.2.4
- @testing-library/react: 16.3.0
- @testing-library/jest-dom: 6.8.0
- @testing-library/dom: 10.4.0
- @vitest/coverage-v8: 3.2.4
- jsdom: 26.1.0
開発ツール
- ESLint: 9.x
- Prettier: 3.6.2
- prettier-plugin-tailwindcss: 0.6.14
技術の選定理由と用途
Next.js
-
選定理由
-
SSR/SSGによる高速表示が可能
-
App Routerによる最新の開発体験
-
ルーティングが直感的
-
-
用途
-
フロントエンド全体
-
ページ遷移
-
画像最適化
-
React + TypeScript
-
選定理由
-
型安全によりバグを減らせる
-
メンテナンス性が高い
-
-
用途
-
UI構築
-
型定義
-
Tailwind CSS + daisyUI
-
選定理由
-
開発スピードが速い
-
コンポーネントスタイルの適用が簡単
-
-
用途
-
UIスタイリング
-
レスポンシブ対応
-
SWR
-
用途
-
動画一覧の取得
-
キャッシュと再検証処理
-
Supabase
-
用途
-
動画データ保存
-
グループ・曲データの管理
-
Cloudflare Pages
-
用途
-
デプロイ
-
エッジ配信による高速化
-
アーキテクチャ図
YouTube APIから取得した動画データをSupabaseに保存し、アプリ側で取得して一覧表示しています。
テーブル構成
機能
検索機能
グループ検索
グループ名をクリックすると該当する動画が一覧表示されます。
現在は10組のヨジャドルが対象です。
曲検索
楽曲名から検索することもできます。
詳細閲覧
動画カードをクリックすると詳細ページに遷移し、自動で再生が始まります。
タグをクリックすれば、検索画面で自動的に絞り込みも行われます。
工夫したところ
サービスの設計
最小構成でのリリースを意識し、動画投稿機能や認証機能は削りました。
ショート動画は受動的に視聴されるケースが多く、投稿機能は不要と判断しました。
デザインコンセプトとUIの工夫
ピンクやパープルを基調にした柔らかいデザインを採用し、K-POPらしい世界観を意識しました。
また、SNSのハッシュタグ検索のように、タグクリックで検索できる設計にしました。
検索機能の最適化
ユーザーが検索で迷わないよう、あえて検索条件は最小にして「単一グループ」または「楽曲名」で絞り込むシンプルな設計にしました。
苦労した箇所
検索機能の要件定義で最も悩みました。
初期案では「aespa × IVE」のようなAND検索にも対応しようとしていましたが、実装もUXも複雑になり、途中で方向転換しました。
「ユーザーが本当にそこまで細かい検索をするか？」と考え直した結果、今のシンプルな検索設計に落ち着きました。
反省点
サービス設計の甘さ
初期段階で動画投稿や認証機能を作り込みすぎてしまい、本来の目的から外れてしまいました。その結果、リリース時点で最新曲の収録が間に合わない部分も出てしまいました。
リリース時点での目標を明確にする大切さを実感しました。
制作期間の長さ
約3ヶ月、平日は1〜2時間というペースだったため、途中でモチベーションが下がることもありました。
もっと小さな単位でリリースし、ユーザーの反応を見ながら改善すべきだったと感じています。
コンポーネント設計の不足
共通化が十分にできず、ファイルが肥大化してしまいました。次回はより細かく分割し、保守しやすい構成を目指します。
今後の展望
今回は、今人気のあるヨジャドル（女性アイドル）と、私自身が特に好きな10組のグループに絞って最新曲（制作時点）を検索できるようにしました。ただ、現状はデータ量がまだまだ少ないため、まずは動画・曲・グループのラインナップを増やすことを優先しています。
第1弾として、ナムジャドル（男性アイドル）の追加を予定しており、より幅広いファンの方が楽しめるサービスにしていきたいと考えています。
また、機能面ではアカウント作成機能を導入し、自分の推しグループや推しメンの動画が優先的に表示されるような仕組みも検討中です。ユーザーごとに最適化された画面を提供することで、検索の手間をさらに減らし、もっと直感的に動画に出会える体験を作っていきたいと思っています。
自身の成長と気づき
私はほんの1年半前まで、運用案件しか経験がなく、開発経験がほとんどないマークアップエンジニアでした。それが今では、自分でサービスの企画から開発、そしてこれからの運用まで見据えて動けるようになりました。
今回のサービスが成功するかどうかは正直分かりません。それでも、*自分の手でゼロから価値を考え、形にし、公開まで持っていく経験は、業務の中ではなかなか得られないものです。多くのプロジェクトは役割が細かく分担されているので、設計から開発、運用まで一貫して経験できる機会は多くありません。規模は小さくても、すべての工程を自分自身で担ったことは大きな財産になりました。
その中で気づいたのが、技術力だけでは足りないということです。日常の中で「今何が流行っているのか」「人はどんなことで困っているのか」といったアンテナを張る姿勢がとても大事だと感じました。
私の場合はK-POPがそのきっかけでした。K-POP界で流行しているダンスチャレンジ動画、そして現代人が日常的に消費しているショート動画。この2つを掛け合わせることで今回のサービスの着想が生まれました。
もちろん、常にアンテナを張りながら生活するのは簡単ではありません。しかし、自分の好きなジャンルなら自然と続けられますし、興味が湧かない分野でアイデアを出すのはそもそも難しいものです。私の場合はK-POPという好きなジャンルを軸にすることで、プログラミング学習へのモチベーションも大きく高まりました。
プログラミングを学ぶ上で、何かを実際に作ってみるのが最も力になります。もし「作りたいものが見つからない」と感じているなら、まずは自分の好きなものの中から課題やアイデアを探してみるのも良いと思います。
終わりに
今回は、初めてマネタイズまで意識したサービス開発に挑戦しました。ユーザーに使ってもらえるサービスを作る難しさを知ると同時に、非常に良い経験になりました。
今後も継続的に改善を重ねていきたいと思います