まりこの部屋dx for ネクスト様
DESCRIPTION
http://www.slideshare.net/uioroom/dx-for-8500727 で資料が見切れていたので個人アカウントでアップしましたTRANSCRIPT
![Page 1: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/1.jpg)
A/Bテスト事例のご紹介、他
![Page 2: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/2.jpg)
目次
1. 自己紹介2. A/Bテスト事例ご紹介3. A/Bテストをし続けるには?
![Page 3: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/3.jpg)
自己紹介職種
• デザイナー
やりたいこと
• 実際に使えるものを作る• 作り手と使い手のギャップをなくす
やってること
• 使い手の立場からデザインを考えて、 A/Bテストで効果を検証
• 1年弱で約 50テスト実施・監修
@marippe_
山口磨理子
![Page 4: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/4.jpg)
A/Bテスト事例ご紹介コントラスト比の改善テスト
![Page 5: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/5.jpg)
A/Bテストとは
![Page 6: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/6.jpg)
コントラストとは
色と色の差。コントラストが高いほどクッキリ見えます。
![Page 7: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/7.jpg)
コントラスト比が高いとより多くの人が見える
○見える
×見えない
×見えない
○見える
○見える
○見える
![Page 8: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/8.jpg)
見える人にとっても、より見やすくなる
○見えづらい
◎見やすい
見えるけど
![Page 9: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/9.jpg)
コントラスト比の基準は?
WCAGが定めている基準があります。
最低限のコントラスト より十分なコントラスト
3 : 1 4.5 : 1
※文字のサイズが大きい場合
![Page 10: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/10.jpg)
本当に効果があるのかをテスト
ボタンのコントラスト比を上げることでクリックされやすくなるか。
オリジナル コントラスト比変更
![Page 11: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/11.jpg)
結果
クリックされやすくなりました。
36.0%
35.2%
コントラスト比変更
オリジナル
![Page 12: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/12.jpg)
別のサイトのボタンでも同様のテスト
オリジナル コントラスト比変更
![Page 13: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/13.jpg)
結果
こちらもクリックされやすくなりました。
43.5%
41.7%
コントラスト比変更
オリジナル
![Page 14: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/14.jpg)
さらに地図でもテスト
オリジナル コントラスト比変更
![Page 15: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/15.jpg)
結果
またまたクリックされやすくなりました。
63.3%
62.5%
コントラスト比変更
オリジナル
![Page 16: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/16.jpg)
ということは…
コントラスト比の改善でCTR改善が期待できる!
![Page 17: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/17.jpg)
厳密には
どちらの効果なのかはわかりません。
どちらにせよ、コントラスト比改善はユーザーにとって使いやすくするための 1つの手法であると思います。
見えなかった人が見えるようになった(アクセシビリティ)
見えてた人がより見やすくなった(ユーザビリティ)
![Page 18: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/18.jpg)
A/B テストをし続けるには?
![Page 19: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/19.jpg)
真の目的はコントラストではない
ユーザビリティやアクセシビリティの重要性を証明するための 1テストです。
人間中心設計の重要性の証明大目的
小目的アクセシビリティ・ユーザビリティの重要性の証明
コントラスト比のテスト
![Page 20: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/20.jpg)
大きな目的を持ちましょう
大きな目的がないと、失敗した時・反対された時にやめてしまう。
目的がある
目的がない
![Page 21: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/21.jpg)
例えば
•ユーザーに愛されるサイトにしたいので、テストをし続けてユーザーアクションや満足度を上げ続ける
•デザイン /デザイナーの重要性をアピールしたいので、デザインによって CTRや CVRや収益が変わることを訴え続ける
•指示された内容をこなすんじゃなくて自分でデザインしたいので、指示された版と自分版をテストし続けて信頼を得る
![Page 22: まりこの部屋Dx for ネクスト様](https://reader035.vdocuments.site/reader035/viewer/2022081513/557c2fe2d8b42aad418b4db8/html5/thumbnails/22.jpg)
ありがとうございました