Rettyとオレンジの歩み

Transcript

1. Rettyとオレンジの歩み
   2023.8.8
   デザイナー
   松園 友里
   

   View Slide

2. 自己紹介
   松園 友里
   2022年8月にジョイン。
   
   ネット予約チームでweb上の店舗トップや
   
   予約フォームの体験改善を行っている。
   
   
   仮説から施策立案、デザインまで関わり
   
   体験はもちろん、数値(CVR)も右肩に上げることに貢献。
   
   前Q、チームとしてMVPを受賞。
   

   View Slide

3. View Slide

4. 目次
   ・Rettyのオレンジ
   
   ・オレンジとの付き合い方
   
   　・オレンジの前にやるべきことがある！
   
   　・オレンジと向き合ってみた！
   
   ・まとめ
   

   View Slide

5. Rettyのオレンジ
   

   View Slide

6. #FFA014 2.04.....
   

   View Slide

7. オレンジとの付き合い方
   

   View Slide

8. オレンジの前に
   
   やるべきことがある！
   

   View Slide

9. コントラスト比 ＜
   周りの情報との
   
   コントラスト
   Rettyが力を入れていること
   

   View Slide

10. 周りの情報との
    
    コントラスト
    Rettyが力を入れていること
    

    View Slide

11. オレンジが画面内に
    
    たくさんある問題
    Topic 1
    

    View Slide

12. コースカセットの予約ボタン削除
    CVボタンであり数値に絡んでくるため
    
    なかなか削除に踏み切ることができていなかった
    Before
    画面内にCVボタンが多く、みてほしいコ
    ンテンツに集中できていないのでは....
    そもそもコースは詳細を見てからじゃない
    と、予約に踏み切れないのでは....
    

    View Slide

13. CTRは下がったものの、完了率としてはほぼ横ばい。
    
    体験的には良くなったのでポジな結果に
    各コースの比較がしやすく、
    
    コンテンツに集中しやすくなった
    コースエリアでの体験も
    
    詳細→予約へとシンプルでスムーズに
    コースカセットの予約ボタン削除
    After
    

    View Slide

14. Before After
    ヘッダーをオレンジから白に
    

    View Slide

15. CVボタンの色が緑とオレンジの
    
    2種類存在する問題
    Topic 2
    

    View Slide

16. ボタン色の統一
    retty.me/area/PRE00/ARE111/SUB22222/19981113/
    retty.me/area/PRE00/ARE111/SUB22222/19981113/
    onakapekkori
    retty.me/area/PRE00/ARE111/SUB22222/19981113/
    retty.me/area/PRE00/ARE111/SUB22222/19981113/
    onakapekkori
    店舗ページ
    予約ページ
    

    View Slide

17. ボタン色の統一
    retty.me/area/PRE00/ARE111/SUB22222/19981113/
    retty.me/area/PRE00/ARE111/SUB22222/19981113/
    onakapekkori
    retty.me/area/PRE00/ARE111/SUB22222/19981113/
    retty.me/area/PRE00/ARE111/SUB22222/19981113/
    onakapekkori
    店舗ページ
    予約ページ
    

    View Slide

18. ボタン色の統一
    retty.me/area/PRE00/ARE111/SUB22222/19981113/
    retty.me/area/PRE00/ARE111/SUB22222/19981113/
    onakapekkori
    retty.me/area/PRE00/ARE111/SUB22222/19981113/
    retty.me/area/PRE00/ARE111/SUB22222/19981113/
    onakapekkori
    店舗ページ
    予約ページ
    

    View Slide

19. ユーザー視点で
    
    押しやすさのコントラストを
    Topic 3
    

    View Slide

20. ユーザーがこの画面でしてほしいことが
    
    わかりにくいのでは？
    ボタンにシャドウを加えた
    Before ◆事実
    
    予約フォームの日時/人数選択画面の
    
    遷移率がPCよりも低い
    
    
    ◆PCとの違い
    
    PCは選択すると下に進んでいく（＝次にコースを
    
    選択することがその画面で明示されている）のに対し、
    
    SPはステップごとに画面が変わる
    

    View Slide

21. Before
    ボタンにシャドウを加えた
    After
    

    View Slide

22. Before
    ボタンにシャドウを加えた
    After
    前Qの予約フォーム内での施策で
    
    効果が一番高かった！！！！
    

    View Slide

23. 1. ノイズになっているオレンジの削除
    2. コンテンツのプライマリーカラーの統一
    3. ボタン自体の強調
    周りの情報とのコントラストまとめ
    

    View Slide

24. オレンジと
    
    向き合ってみた！
    

    View Slide

25. コントラスト比
    Rettyが力を入れていること
    

    View Slide

26. グラデーションで
    
    打倒！コントラスト比
    

    View Slide

27. アプリアイコン
    〜2016年 2017年リニューアル
    重厚感、高級感、
    
    大人っぽい、落ち着いた
    シャープで洗練された、
    
    新しい、研ぎ澄まされた
    #000000 に
    #000000 に
    グラデーション
    グラデーション
    

    View Slide

28. 人気店ラベル
    人気店ラベル
    そのジャンルに詳しいユーザーさん達のオススメから
    
    厳選されたお店のみにつくラベル
    Rettyの人気店とは？
    Rettyのユーザーさんの中には特定のジャンルに詳しい方々
    がいる。Rettyの人気店は、食に詳しいユーザーの皆さんの
    オススメが集まることで作られる。
    ※ 投稿数・好きなジャンルは2021年11月時点のものです
    

    View Slide

29. 人気店ラベル
    人気店ラベル＝独自のコンテンツ
    ・コンテンツの中で重要なポジション
    ・ジャンルに目が行きやすいように
    

    View Slide

30. 1. Rettyの体験として重要なものは
    
    コントラスト比を保つように工夫
    2. グラフィックのテクニックで
    
    視認性を確保する
    配色によってオレンジの弱点を克服
    ボタンはかなりハードルが高いので、他の部分から改善していく
    コントラスト比のまとめ
    

    View Slide

31. 現状、最適解ではなくまだまだ発展途上
    Rettyとオレンジの歩み
    引き続き、ブランドカラーとの付き合い方は模索していきます
    to be continued....
    

    View Slide

32. ありがとうございました！
    ぜひRetty使ってみてください！
    

    View Slide