ヤフー株式会社 テクノロジーグループ サービス統括本部 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を提供していきたい」と述べて、セッションを締めくくった。
