ヨハク技研_DigLoop

Transcript

1. Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. UI/UX CASE STUDY 「運任せの偶然」を「意思ある探索」へ。 音楽発見のプロセスを再設計する。 Role : Planning, UI / UX Design, Development
2. 背景：発見が「運任せ」になっていた 2 Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. いつ出会えるかわからない「運」と、膨大な時間を消費する構造。 アルゴリズムに流されるだけで、自分の意志で探し進めることができないもどかしさ。 偶然だけに依存せず、能動的に発見する体験を得たい。 新しい好きなアーティストに出会う方法が、YouTubeのおすすめ頼みになっていました。 確かに素晴らしい出会いはありますが、そこには「再現性」がありません。
3. 気づき：「再生」中心のアプリ設計 3 Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. 詳細を見ようとすると画面が切り替わ り、元のリストに戻るのが手間。 「再生」に特化しているため、アーティ スト同士の関連性が見えにくい。 だからこそ「再生」ではなく「探索」に特化させた体験が必要でした。 偶然にまかせず、 能動的に新しいアーティストを見つける（＝ディグる） ためのツールを作ることを決意。 既存の音楽アプリにも「おすすめ」や「関連」はありますが、中心機能はあくまで「再生」です。
4. 制作プロセス：アイデアを「動くもの」に 4 Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. 企画・設計・実装を一気通貫で行います。アイデアを最短で「触れるプロダクト」にするため、 プロトタイプなどを利用し、最小工数でフィードバックと改善が実施できる仕組みを採用。 要件定義とプロトタイプ Focus : Core Experience Result : Figmaで「体験の核」を可視化。実装 前にプロトタイプを作成して実際に触 れることで、少ない工数でコア体験の 作り込みが可能に。 作り込まれた「コア体験」が、プロダ クト品質の最低ラインを底上げさせ る。 要件定義とプロトタイプ Focus : Core Experience Result : Figmaで「体験の核」を可視化。実装 前にプロトタイプを作成して実際に触 れることで、少ない工数でコア体験の 作り込みが可能に。 作り込まれた「コア体験」が、プロダ クト品質の最低ラインを底上げさせ る。 コア機能の実装 Focus : Always Playable Result : 機能を小分けにして実装・デプロイ。 開発プロセスをブラックボックス化せ ず、常にブラウザで動く最新版が触れ る状態を維持。 コア機能の実装 Focus : Always Playable Result : 機能を小分けにして実装・デプロイ。 開発プロセスをブラックボックス化せ ず、常にブラウザで動く最新版が触れ る状態を維持。 ブラッシュアップ Focus : Feedback Cycle Result : 触って初めて気づく違和感を、次の実 装時（スプリント）で即座に反映する よう仕組み化。 このサイクルがコア体験を支えるUI品 質を高め、構築したプロダクトが手に 馴染むプロダクトへ。 ブラッシュアップ Focus : Feedback Cycle Result : 触って初めて気づく違和感を、次の実 装時（スプリント）で即座に反映する よう仕組み化。 このサイクルがコア体験を支えるUI品 質を高め、構築したプロダクトが手に 馴染むプロダクトへ。 このプロセスは、仕様が固まっていない新規事業やPoC開発に最適です。 小さく作る→触る→改善するというサイクルで、アイデアを最短距離で形にできます。 このプロセスは、仕様が固まっていない新規事業やPoC開発に最適です。 小さく作る→触る→改善するというサイクルで、アイデアを最短距離で形にできます。
5. PHASE1：要件定義とプロトタイプ 5 Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. アイデアを要件定義に落とし込みます。 要件定義によってアイデアを明文化することで、あいまいだったプロダクトの全体像が形作られていきます。 アイデアを「要件定義」に 「新しいアーティストを発見することに特化したツールを作りた い」というアイデアから ・プロダクトの目的とゴール ・ターゲットユーザの属性 ・機能要件/非機能要件 ・初回実装時の作業範囲 などを明文化します。 アイデアを「要件定義」に 「新しいアーティストを発見することに特化したツールを作りた い」というアイデアから ・プロダクトの目的とゴール ・ターゲットユーザの属性 ・機能要件/非機能要件 ・初回実装時の作業範囲 などを明文化します。 1. 概要 本ドキュメントは、新しい音楽発見ツール「DigLoop」の初期開発における要件を定義するものである。DigLoopは、 ユーザーが信頼する一人のアーティストを起点として、関連性の高いアーティストを次々と掘り下げていく「ディグる」体 験 に特化したWebアプリケーションである。 2. プロジェクトの目的とゴール - 目的: - 従来のアルゴリズム推薦型の音楽サービスでは難しい、文脈に基づいた能動的な音楽探索のフローを提供する。 - 複数のアプリやタブを往復する必要がある非効率な音楽探索プロセスを、単一のインターフェースで完結させる。 - ゴール: - ユーザーが音楽探求に没頭できる「フロー状態」を実現する。 - ユーザーが1回のセッションで、最低でも1組の新しい「好みのアーティスト」を発見できる。 - 最初のバージョン（MVP）を3ヶ月以内にリリースする。 3. ターゲットユーザー - 音楽に対して探究心旺盛なリスナー（例: DJ、音楽ライター、熱心なコレクター）。 - 特定のジャンルやアーティストを深く掘り下げることを楽しむ人。 - アルゴリズムによる受動的な推薦よりも、自分で発見するプロセスを重視する人。
6. PHASE1：要件定義とプロトタイプ 6 Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. 要件定義した内容を元にプロトタイプを作成。 実装前にプロトタイプを作成することで、要件定義の品質をすばやくチェックすることができます。 プロトタイプの作成 ・プロダクトの目的とゴール ・機能要件 を踏まえて、プロトタイプを作成します。作成したプロトタイプ を触りながら ・プロダクトの目的とゴール を主として、要件定義と触った印象を照らし合わせ、要件定義の 改善点を洗い出していきます。 プロトタイプの作成 ・プロダクトの目的とゴール ・機能要件 を踏まえて、プロトタイプを作成します。作成したプロトタイプ を触りながら ・プロダクトの目的とゴール を主として、要件定義と触った印象を照らし合わせ、要件定義の 改善点を洗い出していきます。
7. PHASE1：要件定義とプロトタイプ 7 Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. アイデアから作った要件定義を、プロトタイプで確認する作業を繰り返します。 要件定義の修正とプロトタイプの更新を繰り返すことで、コア体験をブラッシュアップしていきます。 ブラッシュアップサイクルを通じて要件定義の精度が向上し、プロダクトのゴールが一層明確になります。 アイデアを「要件定義」に 「新しいアーティストを発見することに特化したツールを作りた い」というアイデアから ・プロダクトの目的とゴール ・ターゲットユーザの属性 ・機能要件/非機能要件 ・初回実装時の作業範囲 などを明文化します。 アイデアを「要件定義」に 「新しいアーティストを発見することに特化したツールを作りた い」というアイデアから ・プロダクトの目的とゴール ・ターゲットユーザの属性 ・機能要件/非機能要件 ・初回実装時の作業範囲 などを明文化します。 プロトタイプの作成 ・プロダクトの目的とゴール ・機能要件 を踏まえて、プロトタイプを作成します。 作成したプロトタイプを触りながら、 ・プロダクトの目的とゴール を主として、要件定義の見直し→改善のサイクルを実施します。 プロトタイプの作成 ・プロダクトの目的とゴール ・機能要件 を踏まえて、プロトタイプを作成します。 作成したプロトタイプを触りながら、 ・プロダクトの目的とゴール を主として、要件定義の見直し→改善のサイクルを実施します。
8. 8 Goals Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. 自分の好みに刺さる「新しいアーティスト」を、テンポよくたどって楽曲を試聴し、 偶然ではなく自分の意思で”刺さる”アーティストを新しく発見する。 ブラッシュアップされた要件定義により、ターゲットユーザの属性（ペルソナ）が明確に。 これらのペルソナに基づいて、プロダクトの真の目的とゴールを導き出します。 人物像 人物像 新しいアーティストを見つけること自体が趣味 で、週にまとまった時間を使って探索する人 行動 行動 関連アーティスト/レーベル/プレイリスト/ライ ブ映像などをたどって深掘りする 環境 環境 移動中は短時間、週末や夜に1〜2時間まとめて 探索する つまずき つまずき 発見がYouTubeのおすすめなどの偶然に依存し ている/タブ移動でフローが途切れる/視聴コス トが高い 理想の状態 理想の状態 関連アーティスト検索→試聴→再検索...のルー プがテンポ良く回り、偶然ではなく自分の意思 で発見できる
9. PHASE1：要件定義を踏まえたプロダクト設計 9 Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. 明確になったプロダクトの目的を踏まえて、コア機能の設計を行います。 目的を実現する手段を検討し、コア体験の実現方法に落とし込んでいきます。 自分の好みに刺さる「新しいアーティスト」を、テンポよくたどって楽曲を試聴し、 偶然ではなく自分の意思で”刺さる”アーティストを新しく発見する。 探索を止めない 新しいアーティストをテンポよくたどる仕 組みを構築。 ・短い検索時間 ・再検索までの行程の短縮 探索を止めない 新しいアーティストをテンポよくたどる仕 組みを構築。 ・短い検索時間 ・再検索までの行程の短縮 “刺さる”かどうかを素早く判断できる 素早い判断をサポートする仕組みを構築。 ・同一ページ内での視聴体験 ・複数楽曲が視聴可能 ・関連度合いの数値化 “刺さる”かどうかを素早く判断できる 素早い判断をサポートする仕組みを構築。 ・同一ページ内での視聴体験 ・複数楽曲が視聴可能 ・関連度合いの数値化 失敗しても戻れる 関連アーティストとサンプル楽曲の取得に 失敗した場合の対応方法の策定。 ・アーティスト名の推測 ・サンプル楽曲を外部サービスでも試聴 　 できる動線を用意 失敗しても戻れる 関連アーティストとサンプル楽曲の取得に 失敗した場合の対応方法の策定。 ・アーティスト名の推測 ・サンプル楽曲を外部サービスでも試聴 　 できる動線を用意
10. PHASE2：UX『探索ループを1クリックで回す』 10 Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. 新しいアーティストを発見するときは、「関連をたどる」行為の反復です。 DigLoopはこの反復作業を迷わず最短で回る形を構築します。 1 探索の起点をユーザが選べる動線 以降のフローは同一ページ内で完結できるよう技術面でサポート 2 起点となったアーティストに対する類似度合い その場で試聴可能なサンプル楽曲3つ
 ※YouTube上で試聴できる動線も用意 3 ユーザが”刺さった”と感じたアーティストを起点として、クリック1つで再探索が可能に 常にユーザが「次の探索」フローを自ら選択できるように 1 3 2
11. PHASE2~3：実装を支える品質と公開の仕組み 11 Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. 作って終わりにならないように、最低限の公開と保守の入り口を仕組みで用意。 実装時にはこれらの仕組みを維持しながら、プロダクトの構築完了を目指して作業を進めます。 Preview→本番 作業内容はプレビュー環境で確認を 義務化。本番環境での不具合発生を 低減。 Preview→本番 作業内容はプレビュー環境で確認を 義務化。本番環境での不具合発生を 低減。 フォールバック設計 アーティストや楽曲情報が外部APIか ら取得できない場合でも、体験がと まらないように。 フォールバック設計 アーティストや楽曲情報が外部APIか ら取得できない場合でも、体験がと まらないように。 ログ / 切り分け 問題が発生した時に、いつでも原因 を辿れるような状態を維持。 ログ / 切り分け 問題が発生した時に、いつでも原因 を辿れるような状態を維持。 CI（GitHub Actions） PR時にlint / typecheck / testを自動 実行する仕組みを導入。 CI（GitHub Actions） PR時にlint / typecheck / testを自動 実行する仕組みを導入。
12. 評価計画 12 Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. 公開後に以下の項目を計測し、プロダクトの目的を達成できているかどうかの確認と、 パフォーマンスの改善を目的としてネクストアクションの検討を進めます。 ※現在リリース初期のため、分析に使える十分なサンプル数が集まっていないため、継続して計測中の段階です。 探索が回っているか KPI : セッションあたりの検索回数 探索が回っているか KPI : セッションあたりの検索回数 目的に到達できているか KPI : 検索→表示→サンプル楽曲再生率 目的に到達できているか KPI : 検索→表示→サンプル楽曲再生率 止まっている箇所はどこか KPI : 0件検索率 APIエラー率 サンプル楽曲の取得率 止まっている箇所はどこか KPI : 0件検索率 APIエラー率 サンプル楽曲の取得率
13. 参考：この制作プロセスが効く領域 13 Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. DigLoopで実施したUX設計×迅速な実装×品質担保のプロセスは、以下のビジネス領域にも応用可能です。 まずは、いま抱えているお悩みの無料相談からお申し込みいただけます。 「誰の・何を・どう変えるか」を整理し て、要件を言語化 主要フローをプロトタイプで一通り触れる ものを作り、触りながら要件をブラッシュ アップする スコープを制限して実装→公開までを最速 で実施し、公開してから改善のサイクルを 回す 運用ルールを画面に埋め込んで、迷い・漏 れ・手戻りを減らす 状態・必須項目・履歴・例外時の復帰動線 までを踏まえて設計 現場が回る「一覧→詳細→最新」の最短動 線で構築 迷う ポイントを潰して、最短で完了できる 動線を設計 エラー/入力ミス/例外でも止まらない「回 復できるUX」を用意 UI/文言/状態遷移まで含めて、実装とセッ トで整える
14. 14 Copyright © 2025 YOHAKU GIKEN. All Rights Reserved. DigLoopは「再生」ではなく 「探索」体験にフォーカスしたプロダクトです。 回復設計・品質ゲートまでを含めて 公開・改善できる状態に落とし込みました。 まずは、主要フローが一通り試せるプロトタイプを 作成し、小さな単位で実装と改善を繰り返し 公開まで持っていきます。 アイデアを”動くもの”にするところから伴走します。 Project Links DigLoop Production URL | Vercel DigLoop Prototype File | Figma Design File Thank You