音声テクノロジーで新しい音声体験を提供するボイスメディア「Voicy」の埋め込みプレイヤー機能のUI/UXを担当しました。
Voicyは、ビジネスの専門家やインフルエンサーなどの声のブログや、ニュースなどの情報を無料で配信している声のサービスで、様々な記事にプレイヤーを埋め込むことで、ウェブ上でよりシームレスにコンテンツを楽しむことができるようになります。

プロジェクトビジョン

今回の埋め込みプレイヤー機能を作るにあたって、ビジョン、ビジネスゴール、定量的な目標、関わるユーザーとそれぞれのメリットデメリットなどを整理し、チームで認識を揃えるところから始めました。Voicyは放送を配信するパーソナリティや、放送を聴くリスナー等様々なユーザーが関わるため、どんなユーザーをターゲットにするのか、ユーザーにとって大きくデメリットになる部分はないかを確認しました。
認識を合わせることで、優先する要件や削る要件をはっきりさせ、UIの中で「どのくらい強くアプリダウンロードを押し出すか」など細かい部分の指針にすることができました。

ユーザーインターフェイス

リスナー側のUIは、VoicyのアプリのUIに慣れていない人でも操作が分かりやすいように、「倍速再生」「チャプターを戻る」などの機能は削り、シンプルになるようにしました。
Voicyのコンテンツの構造は、チャンネル＞放送＞チャプターという3階層になっており、放送単位で埋め込むので、そこの情報の分かりやすさも意識しました。

プレイヤーを埋め込むためのUIは、スマートフォンでは複雑なiframeタグでの埋め込みではなく、noteなどへのURLでの埋め込みを想定し、URLコピーのみを表示しました。パソコンではiframeタグとプレビューの表示をするなど、デバイスによってユーザーの使い方が異なることを考慮し、表示を分けています。

最後に、わたしのおすすめの放送をご紹介します。感覚体験を軸にしたデザイン教育を欧州の様々な大学で展開する阿部雅世さんの放送です。今の時代に非常に大切なデザインの考え方に、とても感銘を受けました。ぜひ聞いてみてください。