PC版Yahoo!メールリニューアル ～サービスのUI/UX統合と改善プロセス～ #yjtc
485 Views
February 02, 22
スライド概要
2021年9月、PC版Yahoo!メールを10年ぶりにリニューアルしました。 技術刷新を機にweb・アプリのUI/UXを統合し、Yahoo! JAPANのサービスとしての一貫性あるデザインにしました。 大規模リニューアルの改善ポイントとそのプロセスについてご紹介します。
Yahoo! JAPAN Tech Conference 2022は2022年2月3日、4日に開催しました。
https://techconference.yahoo.co.jp/2022/
アーカイブ動画はこちらからご覧ください。
https://youtu.be/zuE6IysVsNw
2023年10月からSpeaker Deckに移行しました。最新情報はこちらをご覧ください。 https://speakerdeck.com/lycorptech_jp
関連スライド
各ページのテキスト
PC版Yahoo!メール リニューアル ~ サービスのUI/UX統合と改善プロセス ~ ヤフー株式会社 テクノロジーグループ サービス統括本部 PIM本部 ©2022 Yahoo Japan Corporation All rights reserved. 星野 美佳
星野 美佳 サービス統括本部PIM本部 現在はYahoo!メール WebのUI/UXを担当 兼務でYahoo! JAPANの新規機能・サービスをリリース前 にウォークスルー形式でチェックする「品質管理コミッ ティ」の運営を担当。 趣味はものづくり、漫画・映画・美術鑑賞など よく使うソフトウェアはSketch,Photoshop ©2022 Yahoo Japan Corporation All rights reserved.
このセッションについて 10年ぶりのPC版Yahoo!メールのリニューアルについて 注⼒ポイントやプロセスなどをご紹介します ©2022 Yahoo Japan Corporation All rights reserved.
©2022 Yahoo Japan Corporation All rights reserved.
アジェンダ 1. 従来のYahoo!メールの課題 2. 改善のポイント 3. リニューアルの進め⽅ ©2022 Yahoo Japan Corporation All rights reserved.
アジェンダ 1. 従来のYahoo!メールの課題 2. 改善のポイント 3. リニューアルの進め⽅ ©2022 Yahoo Japan Corporation All rights reserved.
従来のYahoo!メールの課題 巨⼤サービスであるがゆえの動きづらさ 写真：アフロ Yahoo!メールの全ユーザー数は⽉間2400万 ⼈※と影響範囲が⼤きい上に、 PC版は多機能で複雑な作りになっており、ア プリの開発スピードに追いつけない状態に なっていました。 ※1か⽉に1回以上「Yahoo!メール」にログインした利⽤者数の年間平均値。 1つのYahoo! JAPAN IDにつき1⼈の利⽤者とした場合（2021年4⽉現在） ©2022 Yahoo Japan Corporation All rights reserved.
従来のYahoo!メールの課題 Web版とスマートフォンアプリとのUI・機能の乖離 写真：アフロ Yahoo!メールはWeb版とスマートフォン アプリを提供していますが、 Webは⻑年⼤きなUI改修ができないま ま、スマートフォンアプリとのUI差・機 能差がどんどん広がっていました ©2022 Yahoo Japan Corporation All rights reserved.
従来のYahoo!メールの課題 Yahoo! JAPAN全体のデザインとの乖離 写真：アフロ また、Yahoo! JAPANとして新たにVI （Visual Identity）が設定されたあとも なかなか追随できておらず、⼀貫性があ まりない状態になっていました Yahoo! JAPAN トップページ 従来のYahoo!メール ©2022 Yahoo Japan Corporation All rights reserved.
改善を容易にするために技術刷新を実施 それを機に、シンプル化と スマートフォンアプリやYahoo! JAPAN全体と 体験が揃った新デザインにリニューアルへ
アジェンダ 1. 従来のYahoo!メールの課題 2. 改善のポイント 3. リニューアルの進め⽅ ©2022 Yahoo Japan Corporation All rights reserved.
改善のポイント Before After 従来のデザイン ©2022 Yahoo Japan Corporation All rights reserved. 新しいデザイン
改善のポイント 全デバイスのUI/UX統⼀ どのデバイスからお使いいただいても違和感なく使っていただけるようにしました ©2022 Yahoo Japan Corporation All rights reserved.
改善のポイント アプリにしかなかった機能の追加 アプリと同じ体験ができるように、機能の拡充もおこないました ⼀覧の⽂字サイズ変更 ©2022 Yahoo Japan Corporation All rights reserved. 移動時にフィルター⾃動作成
改善のポイント Yahoo! JAPAN の⽅針追随 Visual IdentityやUIガイドラインに沿うように改修、 定義がないものについてはYahoo! JAPANのライブラリにフィードバック ©2022 Yahoo Japan Corporation All rights reserved.
改善のポイント 従来のデザインとのギャップ低減 • 使い勝⼿を変えないよう、既存の機能や配置は極⼒変更しないよう設計 • ⾊合い従来のデザイン⾵のきせかえテーマを提供 従来のデザイン ©2022 Yahoo Japan Corporation All rights reserved. 従来⾵のきせかえテーマ
改善のポイント アクセシビリティの向上 普段使うツールとして⼤事なことは「読みやすさ」 WCAG2.0のコントラスト⽐に準拠するよう、カラーを調整 社内の⾊弱の⽅にも⾒てもらい、フィードバック内容を反映しました ©2022 Yahoo Japan Corporation All rights reserved.
改善のポイント メールwebアプリとしてのトレンドの追随 他社サービスのUIも研究、現在標準となっているものを採⽤しました ゆとりを持たせて読みやすく ©2022 Yahoo Japan Corporation All rights reserved. わかりやすいフィードバック
アジェンダ 1. 従来のYahoo!メールの課題 2. 改善のポイント 3. リニューアルの進め⽅ ©2022 Yahoo Japan Corporation All rights reserved.
リニューアルの進め⽅ 全体の⼯程 1.調査 ログ分析 アンケート 2. 設計 3.開発 UI/UX ビジュアル マークアップ フロントエンド 4.テスト 5.リリース 6.改善 7.統合 ウォークスルー/インタビュー 段階展開 反響ウォッチ 従来版クローズ ⾃動・⼿動テスト 並⾏稼働 改善リリース 新に⼀本化 ©2022 Yahoo Japan Corporation All rights reserved.
リニューアルの進め⽅ 1.調査 – 現状の使われ⽅を把握 ログ分析 • 現状の機能の利⽤状況を調査 • ユーザーへの影響度を判断し、要件を設定 ユーザーアンケート • 機能の使われ⽅を⼀般の⽅から募集しているヘビーユーザーのコミュニティ 「サポーターズクラブ」を対象にアンケートを実施 • 規模感だけでなく、ユーザーにとっての重要度も加味 ©2022 Yahoo Japan Corporation All rights reserved.
リニューアルの進め⽅ 2.設計 – サービスのUI/UX統合と使い勝⼿の維持・向上 • 全デバイスのUI/UX統合 • Yahoo! JAPANの「Visual Identity」「UIガイドライン」への準拠 • 従来のデザインとのギャップ低減（使い勝⼿を変えない） • アクセシビリティの向上 • メールwebアプリとしてのトレンド追随 ©2022 Yahoo Japan Corporation All rights reserved.
リニューアルの進め⽅ 3.開発 – モダンな環境と職種を超えた協業 • 現在メジャーである、React/Type Scriptを採⽤し、改善性を向上 • デザイナー・エンジニア共同で設計・開発をし、スピードアップを実現 ©2022 Yahoo Japan Corporation All rights reserved.
リニューアルの進め⽅ 4.テスト – ユーザビリティと機能の両⾯からのテスト ユーザービリティ検証 • 「サポーターズクラブ」でのオンラインインタビュー形式のテスト • 社内のエキスパートによるウォークスルー • サービスメンバーによるウォークスルー • 別サービスの有志社員によるアドホックテスト 機能テスト • テスト漏れを防ぐために、 ⾃動テスト・スクリーンショットテストを実施 ©2022 Yahoo Japan Corporation All rights reserved.
提供⽅法の⼯夫 5.リリース - 段階的な提供と併⽤期間の設定 全ユーザーを8分割し、３ヶ⽉かけて段階的に展開を実施。 提供完了後も従来のデザインと併⽤期間を設け、ユーザーにより慣れて使えるよう にしています。 継続運⽤・新デザインへの切り替え誘導 従来のデザイン 新しいデザイン に統合 新デザイン 段階的な提供・機能改善 ©2022 Yahoo Japan Corporation All rights reserved. 並⾏期間・機能改善
提供⽅法の⼯夫 6.反響ウォッチ・改善 – 開発者⾃ら数・内容をチェック 通常のお問い合わせ・ご意⾒フォームに加え、よく⽬⽴つところにアンケート フォームを定常的に設置。 開発者⾃らがユーザーの声を聞いて、従来のデザインをクローズする前にするべき 改善ポイントを⾒定めて実施しています。 ©2022 Yahoo Japan Corporation All rights reserved.
リリース後の改善 リリース後に来たご意⾒ ポジティブ︓「⾒やすくなった」「古臭くなくなった」 ネガティブ︓「従来にあった機能がなくなり使いづらい」 代替できない機能について、追加の改善を実施 ©2022 Yahoo Japan Corporation All rights reserved.
リリース後の改善 12⽉時点で対応した機能 絞り込み機能 ソートとは別に、 選択する際に必要な機能 ソート機能 絞り込み機能 ©2022 Yahoo Japan Corporation All rights reserved. 左カラム折り畳み 画面狭い人向けに、 広げる機能が必要 スクロール範囲 画面狭い人向けに、 メール一覧ごとスクロール可能に
最後に… ©2022 Yahoo Japan Corporation All rights reserved.
今後もYahoo!メールとして⼀貫した、 より使いやすいUI/UXを提供していきます ©2022 Yahoo Japan Corporation All rights reserved.
©2022 Yahoo Japan Corporation All rights reserved.