audiobook.jpが生まれ変わるまでの舞台裏 / #02 デザイン

おつかれさまです！広報の佐伯です👩🏻‍💻
2007年からサービスを開始し（当時名称は「FeBe」）、2018年に全面リニューアルした音声コンテンツ配信サービス「audiobook.jp」。リニューアルを契機により急拡大した需要に向けて、より多くの方がサクサクと楽しめるアプリとすることを目指して、「audiobook.jp」アプリは「Rebornプロジェクト」を行いました。

「Rebornプロジェクト」がどんな背景で行われ、どのようにサービスが変わっていったのかを実際に携わったメンバーにお話を伺い、noteにまとめました。アプリ開発のリアルな現場トークをお送ります。

第二回は、「Rebornプロジェクト」のデザイナーチームの責任者を務めたkotanis（小谷）さんです。

▼kotanisさんプロフィール
ゲームデザイナー→UIデザイナー。オトバンクのデザイナーとして2020年5月より勤務、現在は大阪からフルリモート中。デザインチームを立ち上げ、マネジメントを担当。好きなデザインはシンプルでフラットなもの。開発にもユーザーにも優しいモダンなデザインを目指しています。新しいもの、サービスが好き。

ユーザーにわかりやすく楽しんでもらえるように。複雑な枝葉を切り、幹を太くする作業を繰り返したUIUX

佐伯：前回の現場トークでは責任者の飯泉さんから、Rebornの目指すところは、「多様なコンテンツを多様な状況でサクサク聴ける状況」というお話がありました。それは大上段として、デザイナーチームとしてはどんなことを目指して取り掛かっていたんでしょうか？

kotanis：同じくデザインチームとしても、「サクサク聴ける」という体験を目指して取り組みました。

サクサクというのは操作性だったり体験だったりが、よりスムーズに提供できるということだと考えています。そのためには一貫性が保たれたデザインを提供し、ユーザーが期待する機能性やユーザビリティをより「サクサク」届けることが必要になりました。

現状のアプリのデザインは画面ごとに様々なデザインパターンがあり、一貫性が保たれたルールがなかったので、まずはそのルールづくりから進めました。開発用語っぽくいうと「デザインシステムの導入」です。

佐伯：デザインシステムっていうのはどんなものですか？

kotanis：会社によって別の言葉だったり定義が違ったりしますが、今回はプロダクトデザインのスタイルガイドみたいなものとさせてください。

チームに共有されたaudiobook.jpのスタイルガイド

デザインシステムを導入するということは、テキストサイズだったり色だったりボタンだったりの使用ルールを決めたり、それらをつかった配置パターンの整理整頓をすることになります。

過去のアプリでは、「検索結果画面」や「ブックリスト画面」、「お気に入り画面」、「ライブラリに追加された作品一覧画面」などは同じリスト化された商品一覧だったのに、テキストサイズや色がそれぞれの画面で別のスタイルになっていて、一貫性がなく同じアプリのものなのに別物みたいで認知負荷がかかっているという課題がありました。

今のアプリでは情報を整理し、統一された配置、同じサイズのテキスト、同じ色を使って一貫性をだすことで認知負荷が減り、結果「サクサク」した体験に繋がっています。

それと、デザインシステムを導入することはユーザー側だけに価値のあることではなく、開発側にもメリットがあります。パターンを整理整頓したことで画面のデザインを制作する時間が短縮されたり、デザイナー、プロダクトマネージャー、エンジニアの間でデザインの前提知識が共有できたりするので、コミュニケーションが圧縮され簡単になります。ユーザーだけではなく開発も「サクサク」になるという感じです。

佐伯：その過程で、どんなところが難しかったですか？

kotanis：アプリ上にはスタイルが無数にあったので、それらを洗い出し、減らして洗練化させていくという作業ですね。できるだけ少なく、シンプルにはしたいと考えていましたがなかなかうまくはいかず、共通化してどこをそのまま保つかという判断がとても難しかったです。

佐伯：微調整を繰り返して快適なところを見つけていく、ような。

kotanis：そうですね！

佐伯：デザインシステムの導入のあと、実際にアプリのUIなどを変えていくフェーズにようやく来た、というときに、具体的にどんなところをアップデートされましたか？

kotanis：ダークモードの対応ですかね。ユーザーからずっとリクエストがあったことをようやく実装まで至れて感無量です。

佐伯：最後に、デザイン分野でRebornに関わる際に何を大事にされてましたか？

kotanis：木を剪定していくように、複雑な要素や必要構造などの枝葉を切り、できるだけ太い幹に整えていくということを意識していました。シンプルで直感的に分かりやすいものを作るということですね。

佐伯：なるほど。理由なく装備されていたようなものを切っていって整理していくということですね。できるだけ複雑にしないで、できるだけシンプルにっていうのを心がけて。

kotanis：そうですね。UIデザインは、ユーザーとシステムを繋ぐお仕事だと考えているので、システム上の処理が複雑でユーザーにもとめる行動がたくさんあったとしても、我々が太い幹でシステムとユーザーを繋げばユーザーは目的を迷うこと無く「サクサク」使えます。Rebornではそうなるように取り組みました。

佐伯：とても職人的で、すてきなお話です。

*****

Rebornプロジェクト、[企画・総括][エンジニア]の記事はこちらから

デザイチームでは一緒に働くメンバーを募集しています
「まずは話を聞いてみたい」という方はカジュアル面談も受け付けています。
応募時にカジュアル面談希望とお伝えください。