---
title: 【ヤフー名古屋TechMeetup#5】参議院選挙2019特集のデザインリニューアルについて #ヤフー名古屋
tags:  #ヤフー名古屋  
author: [Yahoo!デベロッパーネットワーク](https://convert.docswell.com/user/ydnjp)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/V972569Q7R.jpg?width=480
description: 2020年1月28日(火)にヤフー名古屋オフィスで「ヤフー名古屋TechMeetup #5 -デザインを語ろう」が開催されました。 各セッションでは、デザイン的なアプローチで課題を解決した様々な事例が紹介されました。 プロダクトが抱えている課題に対するアプローチ方法やデザイン的な取り組みについて興味のある方はぜひご覧ください。  イベントの詳細については下記Connpassを参考にしてください。 https://yahoo-nagoya.connpass.com/event/159380/
published: January 31, 20
canonical: https://convert.docswell.com/s/ydnjp/KV22EK-2020-01-31-151934
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/V972569Q7R.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/5DJYK94YEM.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/2V7NRLYRJ8.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/GYJ9M4PZ73.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/5GJ8LQXY7D.jpg)

はじめに
5


# Page. 6

![Page Image](https://bcdn.docswell.com/page/MLJLLX89JR.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/547MML6V7W.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/ZP7RVKPWJ9.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/NPJXZL3V7X.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/63JK8LY57D.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/4LE32391J5.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/V8EDZ4GK7G.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4V7PDM3378.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/L2JV194N7Q.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/Z5EG2Z15EL.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/V4JQPLDL7P.jpg)

すると、、
16


# Page. 17

![Page Image](https://bcdn.docswell.com/page/DK74YDZ5J1.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/PLJ16ZR27G.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/8GJWW912J2.jpg)

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


# Page. 20

![Page Image](https://bcdn.docswell.com/page/W4EZ59P4J3.jpg)

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


# Page. 21

![Page Image](https://bcdn.docswell.com/page/KY769KMG7V.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/5G75NPZXJ4.jpg)

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


# Page. 23

![Page Image](https://bcdn.docswell.com/page/V9J256RQJR.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/5DEYK9DY7M.jpg)

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


# Page. 25

![Page Image](https://bcdn.docswell.com/page/2VJNRL6RE8.jpg)

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


# Page. 26

![Page Image](https://bcdn.docswell.com/page/GYE9M4LZJ3.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/5GE8LQWYJD.jpg)

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


# Page. 28

![Page Image](https://bcdn.docswell.com/page/MLELLXN9ER.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/54JMMLXVJW.jpg)

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


# Page. 30

![Page Image](https://bcdn.docswell.com/page/ZPJRVKNWE9.jpg)

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


# Page. 31

![Page Image](https://bcdn.docswell.com/page/NPEXZLNVJX.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/63EK8LN5JD.jpg)

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


# Page. 33

![Page Image](https://bcdn.docswell.com/page/4L7323V1E5.jpg)

候補者詳細
Before
33
After


# Page. 34

![Page Image](https://bcdn.docswell.com/page/V87DZ48KJG.jpg)

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


# Page. 35

![Page Image](https://bcdn.docswell.com/page/4VJPDM83J8.jpg)

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


# Page. 36

![Page Image](https://bcdn.docswell.com/page/L2EV19NNJQ.jpg)

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


# Page. 37

![Page Image](https://bcdn.docswell.com/page/Z57G2ZK57L.jpg)

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


# Page. 38

![Page Image](https://bcdn.docswell.com/page/V4EQPLNLJP.jpg)

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


# Page. 39

![Page Image](https://bcdn.docswell.com/page/DKJ4YDG5E1.jpg)

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


# Page. 40

![Page Image](https://bcdn.docswell.com/page/PLE16ZD2JG.jpg)

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


# Page. 41

![Page Image](https://bcdn.docswell.com/page/8GEWW9Y2E2.jpg)

リニューアルした結果
41


# Page. 42

![Page Image](https://bcdn.docswell.com/page/W47Z59X4E3.jpg)

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


# Page. 43

![Page Image](https://bcdn.docswell.com/page/KYJ69K4GJV.jpg)

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


# Page. 44

![Page Image](https://bcdn.docswell.com/page/5GJ5NPQXE4.jpg)

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


# Page. 45

![Page Image](https://bcdn.docswell.com/page/4LE323V4J5.jpg)

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


# Page. 46

![Page Image](https://bcdn.docswell.com/page/V8EDZ4857G.jpg)

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


# Page. 47

![Page Image](https://bcdn.docswell.com/page/4V7PDM8D78.jpg)

まとめ
47


# Page. 48

![Page Image](https://bcdn.docswell.com/page/L2JV19NG7Q.jpg)

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


# Page. 49

![Page Image](https://bcdn.docswell.com/page/Z5EG2Z5DEL.jpg)

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


