SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

ProductZineオンラインセミナーは、プロダクト開発にフォーカスし、最新情報をお届けしているWebメディア「ProductZine(プロダクトジン)」が主催する読者向けイベントです。現場の最前線で活躍されているゲストの方をお招きし、日々のプロダクト開発のヒントとなるような内容を、講演とディスカッションを通してお伝えしていきます。

次回のオンラインセミナーは鋭意企画中です。準備が整い次第、お知らせいたします。

ProductZineオンラインセミナー

ProductZineオンラインセミナー

特集記事(PR)

慎重かつ確実に――月間2400万ユーザーが使う「PC版Yahoo!メール」はどうリニューアルされたのか

 ヤフーは、2021年9月に「PC版Yahoo!メール」をリニューアルした。月間2400万ユーザーという大規模なユーザーを抱えるサービスの改善にあたり、ヤフーではどのような目標を立て、どんなプロセスをとったのだろうか。2022年2月3日、4日に開催されたオンラインイベント「Yahoo! JAPAN Tech Conference 2022」では、リニューアルを担当した星野美佳氏が「PC版Yahoo!メールリニューアル~サービスのUI/UX統合と改善プロセス~」と題して、その舞台裏を紹介した。

ヤフー株式会社 テクノロジーグループ サービス統括本部 PIM本部
/デザイナー 星野美佳氏

現在はYahoo!メール WebのUI/UXを担当。兼務でYahoo! JAPANの新機能・サービスをリリース前にウォークスルー形式でチェックする「品質管理コミッティ」の運営を担当。

趣味はものづくり、漫画・映画・美術鑑賞など。よく使うソフトウエアはSketch、Photoshop。

ヤフー全体やアプリ版Yahoo!メールとの「一貫性」の確保が課題に

 2021年9月に実施された「PC版Yahoo!メール」のリニューアルは、同サービスの大規模な改善としては、実に10年ぶりだったという。PC版Yahoo!メールは、日本におけるインターネットサービスの黎明期である1999年に提供を開始。現在では、月間2400万ユーザーに利用されている、国内有数の大規模ネットサービスの一つだ。

 前回のリニューアルから、長い時間がかかった主な理由として、星野氏は「規模の大きさ」と、長くサービスを提供してきたことによる「構造の複雑さ」を挙げる。

 「PC版Yahoo!メールは、ユーザー数が非常に多く、それゆえに、変更に伴う影響範囲も極めて大きくなる。また、長い歴史の中でサービス自体も多機能で複雑な作りになっており、近年ではスマートフォンアプリ版に、開発スピードの面で追従できない状況が続いていた」(星野氏)

 そうした状況の中、Web版とスマートフォンアプリ版(以下、アプリ版)との間で、UIや機能面での差異が大きくなり、Yahoo! JAPANが提供する他のサービスとの、デザイン面でのかい離も進んでいたという。

 Yahoo! JAPANでは、2016年に「ヤフーらしさ」をビジュアル面から表現することを目指した「Yahoo! JAPAN Visual Identity」を定義している。Yahoo! JAPANの各サービスは、この定義に準じたデザインで統一が進められてきたが、PC版Yahoo!メールについては対応が遅れ、アプリ版との間でも、デザインの一貫性が失われている状況だったという。

 PC版Yahoo!メールのこうした「課題」を解消できる機会をうかがう中、Yahoo! JAPAN全体で、改善作業を容易にするための技術刷新を図る取り組みがスタートする。PC版Yahoo!メールは、この機会に、よりモダンな開発環境への移行と、特にアプリ版との機能面、デザイン面での一貫性向上を目指したリニューアルを実施することになる。

PC版Yahoo!メールがリニューアルで目指した「4つの改善ポイント」

 リニューアルでの改善ポイントに挙げられたのは、大きく「全デバイスのUI/UXを統一」「Yahoo! JAPAN全体のデザイン方針への追従」「アクセシビリティの向上」「Webメールアプリとしてのトレンドへの追随」の4点だ。

 「全デバイスのUI/UXを統一」するというのは、主にiOS/Androidアプリ版Yahoo!メールと、PC版との使い勝手の統一を指す。色合いやアイコンのようなデザイン要素だけでなく、機能名やその説明文についても、全デバイスで統一していくことに取り組んだ。これまでアプリ版でのみ利用できた「メール一覧の文字サイズ変更」「メール移動時のフィルタ自動作成」といった機能も、PC版に取り入れた。

 「Yahoo! JAPAN全体のデザイン方針への追随」は、「Yahoo! JAPAN Visual Identity」や、UIガイドラインに準拠したデザインの導入だ。各ガイドラインを参照し、定義がない要素については、ガイドラインのとりまとめを行っているチームにリクエストを出し、新たに追加してもらうプロセスを踏んだという。一方で、リニューアルに伴う既存ユーザーの違和感を減らすため、「既存機能や要素の配置は可能な限り変更しない」「色合いについては、旧デザインに準じたものを『きせかえテーマ』として提供する」などの対応を行った。

 多くのユーザーが日常的に利用するツールとして配慮すべきポイントとして「アクセシビリティの向上」にも取り組んだ。W3Cの提唱する「WCAG(Web Content Accessibility Guidelines) 2.0」へ準拠するよう、コントラストなどを調整した上で、ヤフーに在籍する色弱の社員に新しいデザインを見てもらい、そのフィードバックも反映したという。メールへの「スター」に分かりやすく縁取りをし、オンとオフがわかりやすくなるように色を変更するなども、その一環として実装された。

 4つ目のポイントとなる「Webメールアプリとしてのトレンドへの追随」では、他社のWebメールサービスなども研究しながら、現在、標準的となっているモダンなデザインを取り入れた。例えば、従来のPC版では、画面上で一覧できるメールの件数をより多くすることを目的に、マージンやパディングなどでタイトなデザインが行われていたが、リニューアルでは、それらにゆとりを持たせることで、読みやすい画面にすることを重視した。また、ユーザー操作の結果を知らせるフィードバックの表示も、ポップアップでより分かりやすく表示するようにしたという。

「慎重かつ確実に」進めたリニューアルのプロセス

 ここからは、具体的なリニューアルの工程について説明された。星野氏は「PC版Yahoo!メールは、大規模で複雑なプロダクトであり、リニューアルは慎重かつ確実に進める必要があった」とする。

 プロセスは、「調査」「設計」「開発」「テスト」「リリース」「改善」「統合(旧版のクローズ)」の各フェーズに沿って、段階的に進められた。

 「調査」は、ログ分析やユーザーアンケートなどから、現状のサービスの使われ方を把握するフェーズだ。アンケートは、同社が運営するYahoo!メールファンのコミュニティ「Yahoo!メールサポーターズクラブ」の協力を得つつ実施した。

 「Yahoo!メールサポーターズクラブ」は、2016年7月から運営されている、ヤフーとYahoo!メールユーザーとの間で、双方向のコミュニケーションを行うコミュニティだ。ブログ形式の会報発行やメールマガジンの配信、イベント開催などを定期的に行っており、今回のリニューアルにあたっても「特にヘビーユーザーにとって重要な機能が何なのかを開発側が知るうえで、有用なフィードバックを受けた」(星野氏)という。

 次のフェーズとなる「設計」では、調査フェーズの結果をもとに、UI/UXの統合および一貫性の向上と、使い勝手の維持、向上を目指したリニューアルの方針を策定した。前出の「4つの改善ポイント」は、特にプライオリティの高いゴールとして設定されている。

 「開発」フェーズでは、ヤフー全体で推進している「よりモダンな開発環境」で、職種を超えた共同作業を行ったという。具体的には「React+TypeScript」による全面的なリファクタリングであり、将来的な改善も、迅速かつ容易に行える環境整備を意識したとする。

 「以前、PC版Yahoo!メールについては、静的なテンプレートとロジック入りのテンプレートが別々に管理されており、それぞれに触る職種が異なっていた。リニューアル以降は、Reactによるコンポーネントベースの開発となり、デザイナーとエンジニアが共同で設計、管理を行えるようになった。これにより、開発と改善のスピードアップを実現した」(星野氏)

特に念入りに進められた「テスト」「リリース」「改善」フェーズ

 「テスト」フェーズでは、ユーザビリティと機能の両面からテストを行った。特にユーザビリティの検証には「ユーザーへのオンラインインタビュー形式でのテスト」「社内のエキスパートによるウォークスルー形式のレビュー」「サービス担当者によるウォークスルーテスト」「有志の社員によるアドホックなテスト」といった形で、さまざまなケースとシナリオに対応できるよう、入念なテストを実施したという。

 ユーザーへのオンラインインタビューは、前出の「Yahoo!メールサポーターズクラブ」のメンバーに、新しいPC版Yahoo!メールを実際に見てもらったり、使ってもらったりしながら、その感想をフィードバックしてもらうというものだ。

 「社内のエキスパートによるウォークスルーレビュー」は、今回のPC版Yahoo!メールのリニューアルに限らず、新規サービスの立ち上げや、ユーザー体験が大きく変わるような既存サービスへの機能追加がある場合などに実施されているもので、ヤフー社内で体系化が行われている。

 エキスパートレビューでは、1つの案件に対し、担当サービス外の社内エキスパート4名が、担当者が用意したウォークスルーシナリオを実施し、課題を抽出する。エキスパートによるチェックは「効果」「効率」「満足」の3つのポイントを中心に行われ、抽出されたそれぞれの課題についてはユーザーへの影響度を「大・中・小」の3段階で判定する。その結果を元に、サービス担当者が対応方針を検討し、事業責任者による承認を受けた後に、リリースが可能になる。なお、エキスパートレビューの結果は、定期的に経営層にもレポートされており、必要に応じて、サービス横断的に対応指示が出るケースもあるという。

 また、機能テストについては人の目による見落としを避けるため「自動テスト」「スクリーンショットテスト」なども並行して行っているとした。

 リニューアル後の「リリース」も、ユーザーがなるべく戸惑わないよう、配慮しながら実施された。新UIのリリースは、全ユーザーを8つのグループに分けたうえで、3か月をかけて段階的に行った。また、提供開始後も、ユーザーの希望に応じて従来のデザインで利用できる併用期間を設定した。

 リリース後の併用期間には、ユーザーの反響を見ながら「改善」を行うフェーズを設けている。通常の問い合わせフォームに加えて、画面上の目立つ部分にアンケートフォームを設置し、そのフィードバックから、従来のデザインをクローズする前に実施すべき改善のポイントを検討した。

 「新しいUIには『見やすくなった』『古くさくなくなった』といったポジティブな反応があった一方で、『以前にあった機能がなく、使いづらくなった』というネガティブなフィードバックも寄せられた。リニューアルで削除した機能もあるため、そうしたフィードバックに対しては、代替で利用できる機能があれば案内し、代替できる機能がなく必要性が高いと判断したものについては、追加の改善を実施している」(星野氏)

 2021年12月までにフィードバックに基づいて改善した機能としては「特定条件によるメッセージの絞り込み」「メールボックスを切り替える左カラム部の折りたたみ」「右ペインのメール一覧と本文表示部を一緒にスクロールする機能」などがあるという。

 「ユーザーの声を聞き、開発側の想定と大きなギャップがあった部分については、迅速に改善を行う取り組みを継続している」(星野氏)

 星野氏は「PC版Yahoo!メールのリニューアルは、ユーザーの多い大規模なサービスに、他のサービスと一貫性のある機能やデザインを持たせながら、従来の使い勝手についても、できる限り壊さないようにすることが求められた点で、絶妙なかじ取りが必要なプロジェクトだった。今後も、ヤフーのサービスとして一貫性のある、より使いやすいUI/UXを提供していきたい」と述べて、セッションを締めくくった。

この記事は参考になりましたか?

この記事は参考になりましたか?

この記事をシェア

ProductZine(プロダクトジン)
https://productzine.jp/article/detail/905 2022/03/30 21:50

イベント

ProductZineオンラインセミナーは、プロダクト開発にフォーカスし、最新情報をお届けしているWebメディア「ProductZine(プロダクトジン)」が主催する読者向けイベントです。現場の最前線で活躍されているゲストの方をお招きし、日々のプロダクト開発のヒントとなるような内容を、講演とディスカッションを通してお伝えしていきます。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー

アクセスランキング

アクセスランキング