1
/
5
This page is intended for users in Japan. Go to the page for users in United States.

リニューアルPJから見えるVoicyでの働き方。デザイナーとエンジニアが語る開発のこだわりやチームを越えたコミュニケーション方法とは

こんにちは。Voicyカンパニークリエイターの “はる” こと高森はるなです。

この度、Voicyスマートフォン版のWEBページがリニューアルいたしました〜〜!

というわけで今回は、プロジェクトに関わったデザイナーざっきーとフロントエンドエンジニアこばしゅんにリニューアルの詳細やプロジェクトについて聞いてきました。

デザインや開発におけるこだわり、リモート下でのコミュニケーション方法などなど、Voicyの最新プロジェクトがどのように進行したのか、その裏側をお伝えします!

パーソナリティとの新たな出会いを

ざっきー、こばしゅん今日はよろしくお願いします。まず、今回はどんなメンバーでこのプロジェクトを進めたのですか?

ざっきー&こばしゅん

今日はよろしくお願いします!

こばしゅん

今回のプロジェクトは「ユーザー体験の向上」という会社の大きな目的に対して、デザインはざっきーが、そして実装は僕が行いました。

ざっきー

僕はこの4月に新卒として入社したばかりだったので最初はびっくりしましたが、上司でデザインチームリーダーの京谷さんの支えもあってやり切ることができました!

新卒入社直後にプロジェクトを任されるなんて凄い…。ところで、リニューアルではどんなところが変わったんですか?

ざっきー

6月15日にVoicyのスマートフォン版Webページ(Safariなど)をリニューアルしたのですが、変わった点は、『再生しやすくなった』『チャンネルページでのシェアがしやすくなった』『人気の放送に出会いやすくなった』の大きく3つです。

まず再生の部分ですが、これまではスタートとストップしかできなかったものが、今回のリニューアルで倍速での再生機能と15秒戻す機能が追加されました。倍速機能によってより短時間で効率良く放送を聴けるようになりましたし、ちょっと聞き逃してしまった場合も15秒戻す機能で簡単に聞き直すことが出来るようになりました。

次にチャンネルページ上でのシェアがしやすくなった点に関してですが、各放送ページからパーソナリティのチャンネルページへの導線がわかりやすくなったことで、放送だけでなくチャンネルそのもののシェアがすごく簡単になりました。Twitterなどでシェアしてくださる方も多いので、さらに便利になったシェア機能をぜひ使ってもらいたいです。



( ↑ 放送ページからチャンネルページへ飛ぶボタン)

ざっきー

最後に、放送ページをスクロールしていくと下部に“人気の放送”が表示されるようになりました。
Voicyでよく聞かれている放送の中から、ランダムで表示される仕組みになっています。Voicy内のチャンネル数が着々と増えていく中でも、人気の放送は逃さずキャッチしておきたいと感じているリスナーにぜひ活用してもらいたいですね。

ざっきー

このように、リスナーに対してパーソナリティや放送との新たな出会いを提供する部分については、今後特に力を入れていきたい部分です。

より使いやすく、また新たな出会いに繋がる機能が追加されたんですね!


細かなコミュニケーションで心強いチームに

さて、ここからはお二人に、“今だから言えるプロジェクトの裏話”を聞いていきたいと思います。本プロジェクトを進行していくにあたって、特にこだわった部分はどこですか?

こばしゅん

スケルトンローディングを追加した点ですね。

もともとのデザインには入っていなかったのですが、より良いユーザー体験を考えたときに、少しの待ち時間でもその先のコンテンツを予想させることでその待ち時間をアップデート出来るのではないかと思い、追加で実装することにしました。

あと、放送が聞けるページで、その放送を聞いた秒数に応じてパーソナリティアイコンがゲージで囲まれていくデザインを追加したのですが、そこはこだわりポイントです。実はこの実装がめちゃくちゃ大変だったのですが、ゲージを溜めていく達成感なども感じながら新デザインを楽しんでもらいたいです!


確かに、ゲージが溜まっていくとコンプリートしている感じがしてなんだか嬉しいですね! ざっきーはどうでしょうか。

ざっきー

僕はデザインを任せてもらったのですが、温かみだったり親しみを感じてもらえるように全体的に丸みを強めに出したデザインにし、Voicyの世界観を表現するという部分にかなりこだわりました。ボタンにもグラデーションを追加し、立体感をプラスしています。

また、ひとつの要素にこだわり、その要素を様々な場所で繰り返し使うことで、統一感を出したり、作業の効率を上げるという部分も意識して行っていましたね。

入社直後にも関わらず大きなプロジェクトを任せてもらい、デザインについて上司や代表と一緒に議論しながら進めていけたという裁量の大きさが嬉しかったです。

きなプロジェクトで色々大変だったと思うのですが、特に苦労した部分などあれば教えて下さい。

ざっきー

実は僕、新型コロナウイルスの状況があり、入社初日からフルリモートだったんですよね。今回が初めてのプロジェクト参加だったのですが、それこそ誰とも対面してない状態でのスタートということで不安はありました。

それこそ、こばしゅんさんとは4月〜6月のプロジェクト期間中、一度も直接対面することなくリニューアルを迎えましたよね。笑

一方で、だからこそオンライン上でのコミュニケーションやメンバーとの信頼関係を構築していく部分はかなり意識的に行っていました。

こばしゅん

確かに。会社自体が3月の終わりからフルリモートになり、環境が大きく変動していた中でさらに新メンバーが加わったのもあり、コミュニケーションの部分が一番大変だったかもしれません。

そんな中でも課題を明確にし、一つ一つ乗り越えていったことで、心強いチームになっていったと感じています!

そんな課題感に対して、どのような方法で乗り越えていったのですか?

こばしゅん

オンラインによってコミュニケーション量が減ると、適切な情報共有の場も減りそうだと思ったので、常に最新の情報を持てる場を作ってましたね。具体的には、デザインが出来上がる背景を上からきちんと吸い上げるために、社長室のメンバーとのオンラインミーティングを積極的に行うようにしていました。

また、僕はエンジニア、ざっきーはデザイナーなので、もともとの部署が異なるんですが、同じプロジェクトを一緒に進行していくにあたってしっかりと意思疎通を図る必要がありました。

ただ、リモートだと雑談が発生しませんし、細かいコミュニケーションが取りにくかったこともあり、それを解決するために短い時間でのオンライン会議を2人でめちゃくちゃやってましたね。

細かいデザインの確認や修正など、テキストではなく口頭ベースで常に会話していました。

ざっきー

やってましたね、懐かしい!

テキストでやり取りするのも勿論良いのですが、わからないことが出てきたときなどに10分程度でもオンラインで繋いで、直接コミュニケーションを取りながら進めていけたのが個人的には良かったなーと思ってます。こういったコミュニケーションの取りやすさはVoicyの魅力ですよね。頼んでも嫌な顔をする人がいないので、働きやすいです。

こばしゅん

そのデザインにおいてどんなユーザー体験を想定しているのかや、ざっきーがこだわった部分を、細かいコミュニケーションを取る中で常に伝えてもらえていたので、僕はフロントエンドエンジニアとしてそれを実現するという部分をより意識することが出来ました。

なるほど、小さなコミュニケーションの場を意識的に用意し、細かい部分までしっかりと擦り合せを行い続けることで、最強のチームになったんですね!

ざっきー、こばしゅん、お話ありがとうございました!

・・・

入社して約半年のこばしゅんさんと、入社して2ヶ月のざっきー、短い期間で既に大きなバリューを生み出してくれています!

これからのVoicyがどうアップデートしていくのか、ますます楽しみです!

Voicyに興味を持ってくださった方、ぜひぜひ話を聞きたいボタン、またはVoicyの採用サイトからご応募お待ちしております!

株式会社Voicyでは一緒に働く仲間を募集しています
16 いいね!
16 いいね!
同じタグの記事
今週のランキング