UXや新機能の取り組みを振り返り！　「ヤフーデザイナー 年末報告会」レポート

こんにちは！ ヤフーの大阪オフィスで毎週開催しているイベント「Mix Leap」の企画・運営を担当している中嶋です。

今回は2019年12月19日に開催された「Mix Leap Study #54 - ヤフーデザイナー 年末報告会」から、ヤフーの3つのサービスのデザイナーが語ったこの1年の取り組み事例を、このイベントの企画者であり過去10年ほどデザイナーをしていた私が紹介します。

と、その前に...改めてMix Leap Studyと今回のイベントの概要説明から。

Mix Leap Studyとは

ヤフーの大阪オフィスで毎週開催しているMix Leapでは、これまで2年間にわたり数々のイベントを開催してきました。
その中でもMix Leap Studyは、さまざまなヤフーの独自技術や業界の最先端テクノロジーに触れることで関西のクリエイターがともに学び、ともに成長できる場を作ることを目的にした勉強会です。

東京に比べると関西はクリエイター向けの勉強会やセミナーがまだまだ少なく、とくにデザイナー向けのイベントは（私がデザイナーをやっていた頃から）数が少ないと感じていました。
そこでMix Leapの場を使いヤフーのデザインに対する取り組みを知ってもらいながら、関西のデザイナー同士の交流の場になれば...と思い企画したのが、今回の「ヤフーデザイナー 年末報告会」でした。

新機能「リアルタイム震度」のリリースと取り組み

一人目の登壇者は大阪オフィスで「Yahoo!天気・災害」のUIデザイン、ビジュアルデザインを担当する赤木 祥平。
昨年までEC事業会社のインハウスデザイナーとして勤務していた赤木は、今年ヤフーに中途入社し、現在の天気・災害サービスを担当しています。
今回はYahoo!天気・災害がリリースした新機能「リアルタイム震度」の紹介と、このプロダクトのデザイナーとしての取り組みについてお話してもらいました。

このイベントのほんの数週間前、11月28日にリリースされたばかりのリアルタイム震度は、これまで静的な情報でしか伝えていなかった地震情報を、視覚的にリアルタイムで伝える機能です。
地震発生後、今までは時間がかかっていた地震情報が「毎秒どの程度揺れているか」や「いつ揺れがくるか」を視覚的に確認することで、その後の行動判断に生かすことが可能になります。

この機能を作成する上で、デザイナーがとくに意識して取り組んだのがアクセシビリティー（情報へのアクセスのしやすさ）だったそうです。

• 揺れの大きさを表す震度カラーの色使いや、明度差のコントラストの取り決め
• 多様な環境（PC、スマホ、タブレット...など）でのテストケースの作成
• 検証パターンを絞ってからの、さまざまな人を対象にしたユーザビリティーテスト

などのアクセシビリティー向上への取り組みを、実例を交えながら紹介してもらいました。

最後に赤木は「ヤフーサービスとして新しい地震の見せ方を提供することで、災害に強いヤフーと思ってもらえる一つになったのでは」と話していました。
多くのユーザーに利用していただいているヤフーのサービスの中でもとくに重要で、より早くより正確な情報を伝えなければいけない天気・災害だからこその、デザイナーの想いを感じました。

「ユーザーの力を借りて」がっかり体験を減らすための第一歩

二人目は「Yahoo! MAPアプリ」のデザイナー 林田 香乃。
2015年にヤフーに新卒デザイナーとして入社した林田からはYahoo! MAPアプリでの振り返りに加え、ヤフーならではのデザイナーの働き方についてお話してもらいました。
林田はデザイナーになってから受講したコピーライター養成講座をきっかけに「言葉を支えるために、デザインをつかう」を普段から心がけているんだとか。

行きたいところへ、迷わず行こうをコピーにしているYahoo! MAPアプリでは、大阪・名古屋・東京の3拠点に分かれて、毎日オンラインでコミュニケーションをとりながら開発をしています。
またYahoo! MAPアプリのデザイナーは、「画面のデザインをするデザイナー」という役割を超えた領域でアプリの改善に取り組んでいるそうです。戦略マネジメント型から調査立案型、企画マネジメントデザイン型、さらにはそれらすべてを担当するオールマイティー型など、実にさまざまなタイプのデザイナーがいて、それぞれ強みを発揮しながらアプリの開発に携わっているとのことでした。

本題ではMAPアプリが以前から抱えていた課題を、ユーザーの力を使って解決するための試みの事例を紹介してもらいました。

Yahoo! MAPアプリでは「アプリで調べてお店に行ったら閉店していた...」「お店の場所が違っていた...」などのユーザーにとってのがっかり体験が起きていました。

そこで「MAPの徒歩案内機能を使って実際にお店に行った際、お店が閉店していた」など、がっかりをしたタイミングでそれを報告してもらうというネガティブな体験の受け口を用意。同時に「誤ったお店の情報」を集める機能を開発することにしたそうです。

そのために

1. 間違った施設情報の中から何を集めるか
2. どのタイミングで「1」の情報を集めるか
3. どうやって実現するか

を、それぞれ詳しく話してもらいました。この機能をリリースした結果、ユーザーが実際に反応/回答した率は想定の4倍も高かったそうです。

また林田は「今回のプロジェクトでは企画段階から入ったため、当初の依頼よりチャレンジングな体験を提案することができた」と話していました。
これは私がデザイナーをやっていた頃から感じていたことですが...ヤフーには「◯◯から◯◯までがクリエイターの役割」といったルールがありません。本人が強くやりたい気持ちを持っていれば職種の領域を超えた仕事ができることがヤフーの働き方の良さであり、林田はしっかりと体現しているな感じました。

PayPayモールのSERVICE IDENTITYについて

ラストの三人目は「PayPayモール」でアプリ・ウェブのUIデザインを担当している木村 汐里。
2017年にヤフーに入社した新卒3年目の木村はYahoo!ショッピングのUXやUIの改善を担当しています。
木村からは10月16日にリリースしたECサービス「PayPayモール」についてお話してもらいました。

はじめにPayPayモールの概要と、既存サービスであるYahoo!ショッピングとのコンセプトや世界観の違いについて説明してもらいました。
そのPayPayモールを立ち上げるにあたり、デザイナーやエンジニア、企画や営業など...異なる職種の人が同じ目線で一貫したサービスづくりをするために必要な「共通言語」＝「SERVICE IDENTITY（サービスアイデンティティー）」を作る取り組みが木村の本題です。

今回、PayPayモールチームはサービスアイデンティティーを構築するために、サービスが創り出すブランドの価値とユーザーのニーズを結びつける「ブランドピラミッド」を用いたそうです。
ブランドピラミッドを作ることでサービスのバリューを言語化、さらにそれを元にサービスをビジュアル化する流れを、実際の事例を説明しながら紹介してくれました。

このサービスアイデンティティーが構築できたことで「デザイン上の見た目や振る舞いを含めて議論がしやすくなった」や「開発の優先度を決めやすくなった」など、さまざまな効果があったとのことです。
また今回はPayPayモールの開発と同時並行でサービスアイデンティティーを作成したそうなのですが、それにより開発のスピードを止めずに相互にブラッシュアップすることができたそうです。

クリエイターにとって新規サービスの立ち上げに企画から関わる機会はなかなかありませんが、それだけに具体的な事例紹介を交えた木村のお話はとても貴重に感じました。

さいごに

イベント終了後はMix Leap恒例の懇親会。登壇者を含めたヤフーのデザイナーと一般の参加者の方が交流し合い、大いに盛り上がっていました。
とくに登壇してくれたデザイナー3人は、ひたすら参加者の方から話しかけられていたようです。
私も何人かの参加者と話をしましたが「とても参考になった」「ぜひまたやって欲しい」とうれしい感想をたくさんいただきました。

ちなみに私が個人的に感じた「3人の登壇者に共通する点」として（デザイナーならではなのか）スライド資料がとにかく見やすくて分かりやすいというのがありました。懇親会では登壇者に「綺麗な資料の作り方のコツ」を聞きに行く学生さんがいたほどです。

参加者の人数も100名を超える大盛況となった今回のイベントですが、最初に書いた「ヤフーのデザインに対する取り組みを知ってもらいながら、関西のデザイナー同士の交流の場になれば」は無事に達成できたと思います。

ヤフー大阪のMix Leapでは今回のようなクリエイター向けのイベントを今後もどんどん開催していくので、興味を持たれた方はぜひconnpassをチェックしてみてください。

登壇してくれた皆さん、そしてこの記事を最後まで読んでくれた皆さん、ありがとうございました！