MVVD™︎ 音楽配信プラットフォームの企画・システム開発 » HIGASHIYUKI

0 / 100

Scroll Down

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

PRODUCTION: 企画・VI/CI・アートディレクション・UI デザイン・フロントエンド／バックエンド開発・運用設計
Specification: WordPress（独自テーマ）・WooCommerce・Stripe 決済・リリース管理・ロイヤリティレポート・分割アップロード・2 段階認証
CLIENT: HOUSE STUDIO-R（自社事業）
WEB SITE: mvvd.the-wvvd.com

MVVD™︎ のトップページとレーベルプランのページの画面を、赤い背景の上に浮かべて並べた様子

MVVD™︎ の料金・運営者の紹介・アーティストプランのページの画面を横に並べた様子

MVVD™︎ のリリース申請・マイページ・ロイヤリティの案内のページの画面を重ねて並べた様子

MVVD™︎ のよくある質問・ガイドライン・ナレッジベースなどの画面を、赤い背景の上に敷き詰めた様子

MVVD™︎ のトップページとレーベルプランのページの画面を重ねて浮かべた様子

MVVD™︎ の申し込みフォーム・問い合わせ・SNS の投稿の一覧などの画面を、格子状に並べた様子

企画から VI/CI、UI 設計、システム開発までを通して手がけ、配信の申請から収益の報告までを一つのプラットフォームにまとめました。

MVVD™︎ by WVVD™︎ は、クラブミュージック／エレクトロニックミュージックに特化した、日本発の音楽配信代行（ディストリビューション）サービスです。Beatport・Traxsource をはじめとする提携ストアへ、年間定額制で楽曲を届けます。

前身の「WMDディストリビューション」から数えると、2007 年から 600 以上のレーベル、20,000 以上の作品を配信してきた事業です。そのサービス名やロゴ、配色、書体から、Web サイト、会員向けのシステムまでを、私が一人で設計し直しました。

会員は、リリースの申請も、音源（WAV）のアップロードも、ロイヤリティレポートの確認も、マイページで済ませられます。申請を受け付けた音源は DSP へ自動で送り、四半期ごとの売上は CSV を取り込めば、為替の換算から支払いの判定まで終わります。

会員全員にメールでの 2 段階認証を必須にし、口座情報は暗号化して保存しています。

サービス名の表記からロゴ、配色、書体までをそろえて設計し、2007 年から続く事業を新しいブランドとして打ち出しました。

ロゴは、斜めの面を並べて MVVD の文字を組み、面ごとに濃淡を変えています。明るい背景用と暗い背景用の 2 つを用意し、Web サイトのヘッダーからファビコン、SNS の投稿画像まで、同じ形で通しています。

配色は赤（#D20010）と黒を軸にし、見出しには縦長の欧文書体 Big Shoulders Display、欧文の本文には Poppins を使っています。

ロゴ（明るい背景用） ― 斜めの面を並べて文字を組み、面ごとに濃淡を変えています。

ロゴ（暗い背景用） ― 白で抜いた形です。サイトのダークモードや SNS の投稿画像で使います。

ファビコン ― ロゴの斜めの面を切り出して作りました。

MVVD™︎ の配色。赤・黒・明るいグレーの 3 色 — 配色 ― 赤 #D20010・黒 #121212・明るいグレー #EFEDEA。

MVVD™︎ の書体。Big Shoulders Display と Poppins の「Aa」 — 書体 ― 見出しは縦長の欧文書体 Big Shoulders Display、欧文の本文は Poppins。

MVVD™︎ の SNS の投稿の画像を 3 枚並べた様子 — SNS の投稿 ― サイトと同じロゴ・配色・書体で作っています。

申請から売上の確認までを、会員のマイページ一つで完結させました。

契約後の手続きはすべてマイページに集め、メールや Excel でのやり取りをなくしました。

リリース申請 ― 音源（WAV）のアップロードと試聴、アーティスト名の予測入力、最後の確認まで、4 ステップで進みます。画面のデータは見本です。

マイページのダッシュボードの画面の見本。未読のお知らせ・足りない入力・契約更新の案内のカード — ダッシュボード ― ログイン直後に、未読のお知らせ・足りない入力・更新の案内など、「いま対応が必要なこと」だけを表示します。

リリース申請のフォームの画面の見本。4 つの手順の進み具合、アーティスト名の予測入力、音源の波形と再生ボタン — リリース申請 ― アーティスト名は 2 文字入れると候補が出て、音源はアップロードしたその場で試聴できます。

リリースアーカイブの画面の見本。カタログの一覧と、申請中・処理中・配信済みのステータス — リリースアーカイブ ― ステータスは自動で進み、送信から 48 時間は自分で取り消せます。すべてのリリースをまとめて検索でき、CSV にも書き出せます。

ロイヤリティレポートの画面の見本。獲得額・累積額・支払いの判定と、ストア別の棒グラフ、USD と JPY の切り替え — ロイヤリティレポート ― カタログ、アーティスト、ストア、国の 4 つの切り口で内訳を見られます。金額はワンクリックで USD と円を切り替えられます。

アーティストリストの画面の見本。所属アーティストの一覧と配信ストアへのリンク — アーティストリスト ― 所属アーティストの台帳です。申請フォームの予測入力はここから候補を出すので、名前の表記がぶれません。

確認コードの入力の画面の見本。6 桁のコードの入力欄と、暗号化して保存した振込口座 — アカウントの安全 ― 口座・住所・メールアドレスを変えるときは、もう一度確認コードを入力します。口座情報は暗号化して保存しています。

運営の作業を WordPress の管理画面にまとめ、取りこぼしの起きない業務の流れをつくりました。

朝、ダッシュボードを開けば、その日にやるべきことが分かるようにしています。

管理画面の「今日の運用チェック」の見本。対応が必要な項目と件数の一覧 — 今日の運用チェック ― 対応が要るものを件数で並べ、0 件の項目は表示しません。それぞれの作業の画面へは、ここから移れます。

管理画面のリリース管理の見本。検索、一括操作、収録曲を開いたカタログの一覧 — リリース管理 ― 申請を 1 つの画面にまとめています。行を開くと収録曲が並び、閉じたままでも曲のメタデータまで検索できます。

管理画面の書き出しと取り込みの見本。Excel とカバーの ZIP の書き出し、確定データの 2 段階の取り込み — DSP への書き出しと取り込み ― 46 列の Excel とカバーアートを、ZIP 1 つにまとめて書き出します。DSP から戻ってくる確定データは、中身を確かめてから反映します。

管理画面のロイヤリティ管理の見本。4 つの内訳のアップロードと検算の結果 — ロイヤリティ管理 ― 四半期ごとに 4 つの内訳のファイルをアップロードすると、検算したうえで台帳を計算し直します。

管理画面の会員の一覧と、選んだ会員へのメールの送信の見本 — 会員の管理 ― 絞り込んだ条件のまま Excel に書き出せます。選んだ会員には、ファイルを添付したメールをまとめて送れます。

管理画面の行動履歴と、更新の催促の日の見本 — 行動履歴と更新の催促 ― 操作の記録は 100 万件たまっても、すぐに表示できます。更新の期限が近づくと、60・30・14・7 日前に自動でメールを送ります。