【ヤフー名古屋TechMeetup#5】参議院選挙2019特集のデザインリニューアルについて #ヤフー名古屋

選挙特集のデザインリニューアル ーユーザー体験改善のプロセスー 小股由莉子 ヤフー名古屋 TechMeetup #5 / 2020.01.28 1

自己紹介 Omata Yuriko 小股 由莉子 ヤフー株式会社 Yahoo!ニュースデザイナー ・長野県上諏訪市出身 ・2016年にヤフー株式会社に入社 ・Yahoo!ニュースで特集ページの新規作成などUIデザイ ン〜ビジュアルデザインまわりを担当 2

「選挙、正直よくわからない」 という課題を ユーザー体験に向き合って解決した というお話 3

話す内容 ・はじめに ・どのように制作を進めたの？ ・どこをリニューアルしたの？ ・リニューアルの効果 ・まとめ 4

はじめに 5

Yahoo!ニュースについて ・サービス開始年月 1996年7月 ・ニュースメンバー 200人 ・記事配信数 15万本/月 ・PV数 約150億PV/月 （約67％がスマホ） ・記事配信社数 6 約360社、約570媒体 ※2020/01/28時点のデータを利用

Yahoo!ニュースについて ユーザー 記事配信社 記事を提供 7 記事を配信

Yahoo!ニュースについて 提供いただいた記事を配信するほかに、自社制作のコンテンツも配信 年末企画特集 8 ノンフィクション本大賞 選挙特集

Yahoo!ニュースについて 提供いただいた記事を配信するほかに、自社制作のコンテンツも配信 年末企画特集 9 ノンフィクション本大賞 選挙特集

Yahoo!ニュースの選挙特集 国政選挙に合わせ2009年頃からリリース を開始🎊 候補者リスト、政党公約比較、相性診断 など時に合わせた多様なコンテンツを配信 10

みなさん、 選挙に対して どんなイメージを持っていますか？ 11 画像：アフロ

およそ38％の人が ・関心がない ・よくわからない と回答 12 ※明るい選挙推進協会『第23回参議院議員通常選挙全国意識調査 調査結果の概要』(2014年)8頁抜粋 http://www.akaruisenkyo.or.jp/wp/wp-content/uploads/2011/07/23sannsen.pdf

• http://www.akaruisenkyo.or.jp/wp/wp-content/uploads/2011/07/23sannsen.pdf

よくわからない 結局のところ誰に投票したらいいかわらない・・ そもそも仕組みが難しい・・ 13 画像：アフロ

そんな私が前回の選挙特集を見てみた 結局誰に 投票すればいいか わからない なんだか全体的に デザインが古い 用語の意味が わからない バナー バナー バナー なぜこの政党と マッチしたんだろう 14 バナー 具体的な施策が わからないので 決め手にかけるなあ

選挙特集はリニューアルしました🎉🎉 いままで（2016年） 15 2019年

すると、、 16

見やすい！わかりやすい！の声多数👏 17

どのように制作を進めたの？ 18

プロジェクトメンバー ・デザイナー 3名 ・エンジニア 2名 ・編集 19 1名

開発スケジュール 開発 ユーザーフロー作成 コンセプト設計 コーディング 競合調査 理想ブレスト ビジュアル作成 ワイヤー作成 リリース 2019 1月 20 2月 3月 4月 5月 6月 7月

開発スケジュール 開発 ユーザーフロー作成 コンセプト設計 コーディング 競合調査 理想ブレスト ビジュアル作成 ワイヤー作成 リリース 2019 1月 21 2月 3月 4月 5月 6月 7月

制作を進める上で意識した点 ①企画段階からデザイナー主導で仕様検討をすすめる ②アウトプットのスピードにこだわる ③開発・デザイナー間の密なコミュニケーション 22

制作を進める上で意識した点 ①企画段階からデザイナー主導で仕様検討をすすめる ②アウトプットのスピードにこだわる ③開発・デザイナー間の密なコミュニケーション 23

①企画段階からデザイナー主導で仕様検討をすすめる ・現特集ページの課題だし、競合調査を経て理 想のUXについてみんなでじっくり議論 ・ユーザーフローを作成。要件検討をする上 での指針となり、認識のズレが少なかった ✔ユーザーフローとは？ ゴールへ至るまでのユーザー行動を可視化したもの。 今回「投票」をゴールとおいて、ユーザーがいつどのページで どういう情報が欲しいのか？という情報を可視化しました。 24

制作を進める上で意識した点 ①企画段階からデザイナー主導で仕様検討をすすめる ②アウトプットのスピードにこだわる ③開発・デザイナー間の密なコミュニケーション 25

②アウトプットのスピードにこだわる ・ある程度仕様が固まってきたら、モックを作 成してそれを元に議論 ・メンバー間でのイメージの乖離を防ぎ、意思 仮 パターンを複数作成の上議論 26 決定がスムーズにおこなえた

制作を進める上で意識した点 ①企画段階からデザイナー主導で仕様検討をすすめる ②アウトプットのスピードにこだわる ③開発・デザイナー間の密なコミュニケーション 27

③開発・デザイナー間の密なコミュニケーション ・slackでデザイナーと開発の部屋を立ち上 げてやり取りを行う ・近くの座席に座り物理的な距離を減らす ・新たな課題が発見できたり、無駄なコストを 削減しスムーズに開発ができた 28

どこをリニューアルしたの？ 29

ターゲット 選挙について知識がないユーザー 30

２つの目指すべきゴール ユーザーゴール ヤフーの選挙特集を見れば、 自分が誰に投票すべきかわかる 31 ビジネスゴール ログイン率の向上

リニューアルした部分 ・コンテンツ追加と情報整理 →ユーザーフローをもとに、ユーザーニーズに合ったコンテンツの追加と見直し ・ビジュアルデザインを刷新 →ムードボードを作成。フォントや色などを決め、ビジュアルに一貫した ルールを設定 32

候補者詳細 Before 33 After

Before 候補者詳細 ▼課題 候補者の人柄や施策がなく、投票の判断材料にしづらい 人柄が伝わらない 遷移先が同一なSNS テキストだらけで 情報が見づらい が同画面に複数ある 候補者のおこなう具体的 な施策が分からない 34

After 候補者詳細 ▼改善後 重点施策や一問一答で人柄が分かり、投票の判断材料になる 人柄が分かる アイコンの使用や余白 をとり、可読性を向上 候補者のおこなう具体的 な施策が分かる 情報（SNS）がまと まり分かりやすい 35

相性診断 Before After 夜風 三郎 36 夜風 花絵

Before 相性診断 なぜこの診断結果 なのか理由が分か らない テーマ毎の解説で 理解しづらい 37 ▼課題 結果が直感的でない、政党と自分の何の考えがマッチしたかが分 からない マッチ度が直感的 に分からない

After 相性診断 自分の地区の候補者が 分かる グラフや色でマッチした 政党が直感的に分かる 38 ▼改善後 政党とのマッチ具合が分かるようになり、さらに党毎に自分の地区 の候補者も知れるので投票する候補者を決めやすい どの質問の回答が 政党とマッチして いたかが分かる

他ページもすべてリニューアル！ 39

２つの目指すべきゴール ユーザーゴール ヤフーの選挙特集を見れば、 自分が誰に投票すべきかわかる 40 ビジネスゴール ログイン率の向上

リニューアルした結果 41

選挙についてわかりやすくなり、投票のきっかけを作る特集に 42

なかでもTwitterで相性診断が大拡散 2700以上のツイート コンテンツに対して 43

インフルエンサーたちも拡散 中村佑介さん（イラストレーター） ブルゾンちえみさん （お笑いタレント） 44 中田クルミさん（モデル） ファーストサマーウイカさん（歌手・女優・タレント）

ログイン率が高まり事業に貢献 参議院選挙2019特集 ログイン数 ログインユーザー 非ログインユーザー 7/21 投開票日 非ログインユーザーの 2倍を獲得 約 6/14 20 （期間2019/6/14〜7/31） 45 30 1 5 10 15 20 25 31

リニューアルした結果 １ サイトの利便性向上＆選挙についてわかりやすいサイトに ２ 相性診断をきっかけに、ログイン率が増加 事業目標にも貢献しつつ、 ターゲットに特集を届け、投票につながりやすい体験を生んだ 46

まとめ 47

ユーザー体験に向き合うことが大事 情報たくさ んある 相性診断は、前回と比較して「わかりやすい」とい 何の情報をどう見せたら ターゲットに伝わる‥？ うツイートが約3倍に 見せ方や伝え方が変わるだけで、ユーザーに届け られる価値が全く異なる デザイナー ターゲット 48 わからない‥ ターゲット わかりやすい！

ユーザー体験改善のプロセス 課題の把握 ユーザーゴールを決定 理想の体験を定義 （ユーザーフロー作成） 最適な見せ方を検討、実施 ユーザー体験が改善！ （ユーザーゴールが達成した状態）