2026.06

SpanCue

YouTubeの必要な区間だけを繰り返し練習できるWebアプリ

Skills

概要

SpanCue は、YouTube動画の必要な区間だけを繰り返し再生できるWebアプリです。

動画内のA地点とB地点を指定し、その範囲をループ再生することで、語学学習、楽器練習、ダンス、講義動画の復習など、同じ場面を何度も見返したい用途を想定しています。

YouTubeで学習や練習をしていると、動画全体ではなく数秒から数十秒の一部分だけを繰り返したい場面があります。

通常の再生UIでもシークバーを動かせば戻ることはできますが、毎回手動で同じ位置に戻す必要があり、練習そのものより操作に意識を取られやすくなります。そこで、反復したい区間を一度指定すれば、その範囲だけを自然に繰り返せるツールとして作りました。

単独で企画、UI設計、フロントエンド実装、デプロイまで担当しました。

小さなツールとして素早く使えることを重視し、機能を増やしすぎず、動画を読み込み、区間を指定し、繰り返すという中心体験に絞って設計しています。

技術選定では、短時間で使えるWebツールとして公開しやすいこと、クライアント側の操作感を素直に作れること、今後機能を足す場合にも構成を複雑にしすぎないことを重視しました。

動画の再生状態と、ユーザーが指定したA-B区間の状態を分けて扱うようにしました。

再生位置、開始地点、終了地点、ループ中かどうかが混ざると、少し機能を足すだけでも状態管理が複雑になります。そこで、ユーザーが設定する値と、再生中に変化する値を分離し、UIから見ても実装から見ても追いやすい構成を意識しました。

また、練習用途では操作回数が少ないことが重要です。画面上の情報量を増やしすぎず、URL入力、区間指定、再生操作に集中できるようにしています。

公開URLとして利用できる形まで実装し、動画の一部を繰り返し練習したい場面に特化した小さなプロダクトとしてまとめました。

個人開発では、機能を多く見せるよりも、解決したい課題を明確にして体験を絞ることが重要だと感じました。SpanCue では、動画学習における「同じ場所に戻る手間」を減らすことに目的を絞ったことで、実装範囲とUIの判断がしやすくなりました。