本文へスキップ
HELLO!
HIGASHIYUKI®.COM
0   /   100

音楽配信プラットフォーム「MVVD™︎ by WVVD™︎」を企画・開発しました。

MVVD™︎ のサイトを、デスクトップのモニター(トップページ)とノートパソコン(レーベルプランのページ・ダークモード)に表示した様子
Start Reading

配信の申請から売上の報告まで、音楽配信の仕事をひとつのサイトにまとめました。

クラブミュージック専門の音楽配信代行サービス「MVVD™︎ by WVVD™︎」を、企画から VI/CI、Web サイト、会員向けのシステムまで、私が一人で設計・開発しました。

この記事では、見た目よりもシステムの中身を中心に書きます。WordPress で業務システムをどこまで作れるのか、その一例として読んでいただければと思います。

MVVD™︎ のトップページとレーベルプランのページの画面を、赤い背景の上に浮かべて並べた様子
MVVD™︎ の料金・運営者の紹介・アーティストプランのページの画面を横に並べた様子
MVVD™︎ のリリース申請・マイページ・ロイヤリティの案内のページの画面を重ねて並べた様子
MVVD™︎ のよくある質問・ガイドライン・ナレッジベースなどの画面を、赤い背景の上に敷き詰めた様子
MVVD™︎ のトップページとレーベルプランのページの画面を重ねて浮かべた様子
MVVD™︎ の申し込みフォーム・問い合わせ・SNS の投稿の一覧などの画面を、格子状に並べた様子

業務の仕組みは、WordPress の中に自分で書きました。

WordPress と WooCommerce を土台に、業務の機能は独自テーマの中に組み込みました。プラグインは、WooCommerce、WooPayments(Stripe のカード決済)、Contact Form 7、Yoast SEO、管理者用の 2 段階認証など、必要最小限に絞っています。

外部のサービスとは、カード決済の Stripe、音源を受け付ける DSP のサーバー、郵便番号から住所を補う API とつないでいます。自分で書いたコードは、PHP が約 46,000 行、JavaScript が約 18,000 行です。

MVVD™︎ のシステムの構成図。会員と運営、WordPress と独自テーマと WooCommerce、Stripe・DSP・住所検索 API のつながり
MVVD™︎ のシステム構成。会員の操作から DSP への受け渡しまでを、WordPress の中で完結させています。

申請から配信までは、人の手を通さずに進みます。

リリースの申請は、送ってから 48 時間は会員が自分で取り消せます。運営への通知は、その 48 時間が過ぎてから送ります。取り消しのたびに運営が振り回されないようにするためです。

申請が「処理中」に変わると、音源(WAV)を DSP の受付サーバーへ自動で転送します。いったん仮の名前で送り、届いたサイズを確かめてから正式な名前に変えるので、途中で通信が切れても、壊れたファイルが DSP に渡ることはありません。DSP へ出す申請表(46 列)も、ボタン一つで書き出せます。

2027 年 1 月から DSP で必須になる「生成 AI 利用の申告」にも、先回りして対応しました。

申請から配信までの 6 つの手順を並べた図
申請から配信までの流れ。取り消せる 48 時間と、音源の自動転送が要です。

1GB の音源も、途中で切れたら続きから送れるようにしました。

音源のアップロードは、8MB ずつに分けて送り、通信が途切れても届いたところから続きを送れる仕組みを自作しました。試したときは、1GB の WAV が 128 回の通信、16.6 秒で届いています。

もとは有料のプラグインを 2 本(フォームの条件分岐用と、複数ファイルのアップロード用)使っていました。ところが調べてみると、アップロードのプラグインは実際には分割して送っておらず、サーバーの上限によっては大きな音源が届かない作りでした。

16 本の申請フォーム(条件の組み合わせ 60、ルール 67、複数ステップ 15)は、中身を書き換えないまま、新しい仕組みで動くようにしました。全フォームを新旧の両方で送信し、届いたメールまで突き合わせて一致を確かめています。本番の切り替えは、79 ファイルを約 5 秒で入れ替えて終えました。

分割アップロードの仕組みの図。8MB ずつ送り、途切れた所から再開する
分割アップロードの仕組み。1GB の WAV を 128 回の通信、16.6 秒で届けました。

ロイヤリティは、売上の CSV を取り込むだけで計算できます。

DSP から四半期ごとに届く売上の CSV を取り込むと、ドルから円への換算、支払いの基準額(100 USD)に届いたかどうかの判定、年ごとの繰り越しのリセットまでが自動で済みます。会員はマイページで明細を確かめ、CSV でダウンロードできます。

ロイヤリティレポートの計算の流れを 5 つの手順で示した図
ロイヤリティレポートの自動計算。CSV を取り込むだけで、換算と支払いの判定まで済みます。

会員の安全のために、2 段階認証と口座情報の暗号化を入れました。

会員全員に、メールで届く 6 桁のコードによる 2 段階認証を必須にしました。口座・住所・メールアドレスを変えるときは、もう一度コードを求めます。振込先の口座情報は、改ざんも検知できる暗号方式(XChaCha20-Poly1305)で暗号化して保存しています。

公開の前に、約 6.5 万行のコードをすべて読み通して監査し、見つかった問題は残らず直しました。

2 段階認証の手順と、再確認・口座情報の暗号化を示した図
会員の安全を守る仕組み。ログインのたびに届くコードに加え、口座などを変える前にも、もう一度確かめます。

見た目は変えずに軽くし、検索でも正しく出るようにしました。

見た目は 1 ピクセルも変えずに、使っていない CSS とアイコンのフォントを削りました。CSS は 226KB から 10KB に、アイコンのフォントは 153KB から 2KB に。スマホ用の動画も 7.1MB から 2.5MB まで軽くし、PageSpeed Insights のモバイルの点数は 64 から 72〜73 に上がりました。

「MVVD」で検索したときに正しく表示されるよう、ページの題名をサービス名にそろえました。あわせて、運営会社、レーベル、配信サービスの 3 つのサイトを、構造化データ(Organization)で互いに結び付けています。

CSS・アイコンのフォント・動画を軽くした量と、PageSpeed Insights の点数の変化を示した図
見た目を変えずに軽くした結果。スマホの PageSpeed Insights は 64 から 72〜73 に。

MVVD™︎ by WVVD™︎

MVVD™︎ のロゴ

クラブミュージック/エレクトロニックミュージックに特化した、日本発の音楽配信代行サービス。Beatport・Traxsource などの提携ストアへ年間定額制で配信し、リリース数・アーティスト数に制限はありません。

前身の「WMDディストリビューション」から通算して、2007 年から 600 以上のレーベル・20,000 作品以上を配信。