DUOLABS
ポートフォリオ

音楽ストリーミングのウェブプレーヤー

音楽サービスが特定ジャンルの利用者向けに別途提供した専用ウェブプレーヤーを作りました。利用者はWebブラウザですぐに音源を聴くため、再生操作と今の状態がひと目で分からないと、聴いている途中で画面を探し回ることになります。再生・停止・移動・状態表示といった基本操作、再生リストの画面と順序の管理、ボタンと状態の表現まで、プレーヤー画面全体を開発しました。

Launch
2009
Client
韓国の音楽サービス企業
Type
メディア・コミュニティ

01 / 04

Webブラウザですぐ聴けるジャンル専用プレーヤー

ジャンル専用ウェブプレーヤーは、音楽サービスが特定ジャンルを楽しむ利用者のために別途用意したサービスです。利用者がWebブラウザですぐに音源を聴けるよう、ブラウザの中で再生されるプレーヤー画面を実装しました。Webページの中にありながら、インストール型の音楽プログラムのように動くプレーヤーを目指しました。

Webブラウザですぐ聴けるジャンル専用プレーヤー
02 / 04

再生・停止・移動と状態表示を備えた基本操作

ウェブプレーヤーの基本操作は、再生、停止、移動、そして今の状態を知らせる表示です。メディアプレーヤーの基本操作の流れを一つずつ開発し、利用者がボタンを押したとき、プレーヤーが何をしているかを画面がすぐ知らせるようにしました。 再生状態がすぐ画面に見えてこそ、利用者は音が出るのを待ちながら同じボタンをもう一度押さずに済みます。

再生・停止・移動と状態表示を備えた基本操作
03 / 04

曲目を見ながら順序を決める再生リスト

再生リストは、利用者が聴く曲を確認し、再生順を管理する画面です。曲目を見せる画面と、再生順を管理する操作を一緒に実装しました。リストの中で今再生中の曲と次の曲が区別できてこそ、利用者は順序を追えます。

曲目を見ながら順序を決める再生リスト
04 / 04

押したボタンと選んだ曲がすぐ分かる状態表現

音楽プレーヤーは、今再生中かどうか、どの曲を選んだかが画面にはっきり表れなければなりません。操作ボタン、再生状態、選択状態を直感的に表現するよう、プレーヤー画面と反応を設計しました。Webの中でもインストール型のプログラムのように反応するプレーヤーになるよう、画面の動きを整えました。

押したボタンと選んだ曲がすぐ分かる状態表現

この仕事のポイント

01

ブラウザですぐ聴けるジャンル専用ウェブプレーヤー

02

再生・停止・移動と再生状態の表示

03

曲目を確認し再生順を管理する再生リスト

インサイト

ブログをすべて見る