パソコン版を10年ぶりにリニューアル、ユーザーと対話をしながら進化するYahoo!メール

2012年12月に提供を開始したパソコン（PC）版Yahoo!メールは、10年を迎える今年、フルリニューアル。スマホ版やアプリ版とアイコンや色合いを統一することで、どのデバイス（PC・スマホ・アプリ）からでも一貫した体験を提供、違和感なくご利用いただけるようになりました。このリニューアルで特にこだわった点、工夫した点などについて、担当デザイナーに聞きました。

PC版Yahoo!メールを10年ぶりにリニューアルした理由
Yahoo!メールリニューアルのポイント
ユーザーと対話しながら進めたリニューアル

星野美佳（ほしのみか）

2008年入社。カテゴリ検索やモバイルサービスを中心に担当後、音声アシスト、Yahoo!かんたん写真整理、Yahoo!かんたんバックアップなどのデザインを担当。現在はYahoo!メール（ブラウザ版）のUX/UIデザインを担当している。

PC版Yahoo!メールを10年ぶりにリニューアルした理由

スマホの普及でYahoo!メールアプリを使ってくださる方も増えたため、PC版を使ったときの使い勝手にギャップを感じてしまうという点が課題となってきていました。スマホがかなり普及している今でも、PC版のYahoo!メールを使ってくださっている方がいらっしゃるため、PC版も今の技術を使ったりデザインを見直したりしたい、というのがメンバーの総意でした。

近年は、PC版のメールサービスでもアプリのような感覚で使っている方が多いと思いますが、これまでのYahoo!メールでは、たとえば、最新のメールを表示し、さらに過去のメールを閲覧するには「ページ送り」ナビゲーションをクリックする必要があったため、このような部分は今の通信速度や技術を踏まえると改善できる部分があるのではないかと感じていました。

Yahoo!メールリニューアルのポイント

・見やすく、読みやすいデザイン
・操作ステップを減らした快適な操作感
・全デバイスで統一されたデザイン

見やすく、読みやすいデザイン

より見やすい配色への変更や、メール一覧の文字サイズ変更機能の追加により、どなたにも見やすく読みやすいデザインになっています。
配色は、Web技術の標準化を行っている団体W3C（※1）が提唱するアクセシビリティガイドライン（WCAG2.1）におけるコントラストのAA基準に準拠しています。
※1 W3C：
Web（World Wide Web）技術の標準化を行っている非営利団体「World Wide Web Consortium」の略称。HTML、CSSなどの技術を標準化し互換性を確保するために1994年に設立された。 W3CにはIT関連企業を中心に400近い団体が加入、世界18の地域に支部があり、各地域のWebコミュニティと協力してW3Cの標準化技術の普及に努めている。

これまでのバージョンでは、メールの件数をできるだけ多く一度に見たいユーザーを意識して作っていたので、例えば、受信メールなどを一覧で表示している際に、文字サイズを変えたいと思っても「設定」画面からでしか変えられませんでした。ただ、PC版を使っていただいている方の中には、メールを一覧表示している際に、文字を拡大したいなどのニーズが出てきているので、簡単に文字サイズを変更したり、メールとメールの表示間隔も簡単に調整できたりして見やすくするなどの改善を行いました。

操作ステップを減らした快適な操作感

メールアドレスのコピーやフィルター設定など、よく使われる機能を1クリックで使えるようにするなど、操作の手間を減らせるようにしました。
また、「返信」、（メールの）「移動」などについては、アプリなどに合わせてアイコン化しようという話も出たのですが、これは文字で認識しているユーザーが多かったので変えずに、少し強調したい「送信」「作成」ボタンにだけアイコンをつけました。さらに、「送信完了」の画面を無くしてスナックバー（※2）だけで「送信完了」を通知するようにしたのも特徴のひとつです。
※2 スナックバー（snackbar）：画面の下から現れて、短いメッセージを表示できる機能。

全デバイスで統一されたデザイン

スマートフォン版やアプリ版とデザインを統一することで、どのデバイスからお使いいただいても違和感なく使っていただけるようになったと思います。

最もこだわったのは、配色です。ヤフー社内の弱視の方にもプロトタイプの色の見え方についてチェックしてもらい、要素が判別しづらいものは調整を行いました。
たとえば、既読メールの既読の文字色と背景色とのコントラスト比が4.5:1になるように調整し、ほかのメールと区別するためのスター（目印）がオンのとき黄色が見やすいように茶色いアウトラインを追加しています。

また、セーフティーアドレス（※3）という、サブアドレスが作れる機能があるのですが、アドレス別にフォルダの色を変えることもできます。この、フォルダ別に設定する色合いもこれまではかなり似たような色が並んでいたので、今回、見分けられる色にしっかり修正しています。
※3 セーフティーアドレス：
サブアドレスとして無料で作成できるメールアドレス。メインで利用しているYahoo!メールアドレスと同じ受信箱で確認ができ、いつでも追加・削除できる。

細部まで細かく調整

左カラムのエリアで、数が多くなるとフォルダが見えなくなるという声をいただいたので、フォルダなどの間隔を少し狭めています。また、以前はメールアドレスのところに「メールアドレス」という題字もあったのですが、それを削除して数ピクセル上げるという調整もしています。

ユーザーと対話しながら進めたリニューアル

リニューアルにあたってまず、ユーザーの皆さんがどの機能をどれだけ使っているのか、どのような設定でご利用いただいているのかなどの状況や利用の割合などを細かくデータで調べました。使われていない機能も多かったので、それらを消した状態でプロトタイプを作り、ユーザーの方からフィードバックをいただきながら調整を繰り返し、なるべくこれまでと使い勝手は変わらないようにすることを念頭に置き、ボタンの順番や位置などはできるだけ変えないように設計しました。

ただ、頻繁に使うサービスだからこそ、これまでの画面と少し変わるだけでも、ネガティブな印象をもつ方もいらっしゃるので、一部変えたところへの違和感がないかをていねいにチェックしながら進めました。その結果、リニューアル版のプロトタイプをユーザーに見ていただいたところ、「とても見やすくなったね」と多くの方に言っていただけました。2021年の6月リリース直前まで、フィードバックをいただいて改善することを繰り返しています。

これからリリースを予定しているのは、メールの絞り込み機能です。リニューアルで、ソート機能や検索機能だけにしたところ、これまでは未読メールだけを簡単に絞り込みできたので「対象メールを選択するときにとても不便」という声をいただきました。「未読のメールは不要なので、それをまとめて選択して消したい」というニーズがあることがわかりました。