Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Rettyとオレンジの歩み
Search
yuri
August 09, 2023
Design
0
990
Rettyとオレンジの歩み
yuri
August 09, 2023
Tweet
Share
Other Decks in Design
See All in Design
Bulletproof Design System with TypeScript
takanorip
6
3.5k
オリジナルのデザイン地図を作ってみた!〜OpenMapTilesとMaputnikを活用した地図スタイル〜
hjmkth
1
570
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
680
私とデザインの10年
iflection
0
140
PF_濵村ひろみ_202503
maru_design78
0
180
An Early Spring | Storyboard | Scenes 1-18
giofortuna_story
0
260
オープンデータを利用して色々なものを作った話
hjmkth
1
110
BPStudy#213〜ビジネスアナリシスとDDD(ドメイン駆動設計)パネルディスカッション資料 / BPStudy213-panel
haru860
0
410
Cyber Heart Online Book
hjnasby
0
110
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
370
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.6k
Crisp Code inc. ブランドガイドライン
so_kotani
1
190
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Adopting Sorbet at Scale
ufuk
77
9.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
How STYLIGHT went responsive
nonsquared
100
5.6k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Automating Front-end Workflow
addyosmani
1370
200k
Site-Speed That Sticks
csswizardry
10
660
Mobile First: as difficult as doing things right
swwweet
223
9.7k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
53k
Fireside Chat
paigeccino
37
3.5k
Transcript
Rettyとオレンジの歩み 2023.8.8 デザイナー 松園 友里
自己紹介 松園 友里 2022年8月にジョイン。 ネット予約チームでweb上の店舗トップや 予約フォームの体験改善を行っている。 仮説から施策立案、デザインまで関わり 体験はもちろん、数値(CVR)も右肩に上げることに貢献。 前Q、チームとしてMVPを受賞。
None
目次 ・Rettyのオレンジ ・オレンジとの付き合い方 ・オレンジの前にやるべきことがある! ・オレンジと向き合ってみた! ・まとめ
Rettyのオレンジ
#FFA014 2.04.....
オレンジとの付き合い方
オレンジの前に やるべきことがある!
コントラスト比 < 周りの情報との コントラスト Rettyが力を入れていること
周りの情報との コントラスト Rettyが力を入れていること
オレンジが画面内に たくさんある問題 Topic 1
コースカセットの予約ボタン削除 CVボタンであり数値に絡んでくるため なかなか削除に踏み切ることができていなかった Before 画面内にCVボタンが多く、みてほしいコ ンテンツに集中できていないのでは.... そもそもコースは詳細を見てからじゃない と、予約に踏み切れないのでは....
CTRは下がったものの、完了率としてはほぼ横ばい。 体験的には良くなったのでポジな結果に 各コースの比較がしやすく、 コンテンツに集中しやすくなった コースエリアでの体験も 詳細→予約へとシンプルでスムーズに コースカセットの予約ボタン削除 After
Before After ヘッダーをオレンジから白に
CVボタンの色が緑とオレンジの 2種類存在する問題 Topic 2
ボタン色の統一 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 店舗ページ 予約ページ
ボタン色の統一 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 店舗ページ 予約ページ
ボタン色の統一 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 店舗ページ 予約ページ
ユーザー視点で 押しやすさのコントラストを Topic 3
ユーザーがこの画面でしてほしいことが わかりにくいのでは? ボタンにシャドウを加えた Before ◆事実 予約フォームの日時/人数選択画面の 遷移率がPCよりも低い ◆PCとの違い PCは選択すると下に進んでいく(=次にコースを 選択することがその画面で明示されている)のに対し、
SPはステップごとに画面が変わる
Before ボタンにシャドウを加えた After
Before ボタンにシャドウを加えた After 前Qの予約フォーム内での施策で 効果が一番高かった!!!!
1. ノイズになっているオレンジの削除 2. コンテンツのプライマリーカラーの統一 3. ボタン自体の強調 周りの情報とのコントラストまとめ
オレンジと 向き合ってみた!
コントラスト比 Rettyが力を入れていること
グラデーションで 打倒!コントラスト比
アプリアイコン 〜2016年 2017年リニューアル 重厚感、高級感、 大人っぽい、落ち着いた シャープで洗練された、 新しい、研ぎ澄まされた #000000 に #000000
に グラデーション グラデーション
人気店ラベル 人気店ラベル そのジャンルに詳しいユーザーさん達のオススメから 厳選されたお店のみにつくラベル Rettyの人気店とは? Rettyのユーザーさんの中には特定のジャンルに詳しい方々 がいる。Rettyの人気店は、食に詳しいユーザーの皆さんの オススメが集まることで作られる。 ※ 投稿数・好きなジャンルは2021年11月時点のものです
人気店ラベル 人気店ラベル=独自のコンテンツ ・コンテンツの中で重要なポジション ・ジャンルに目が行きやすいように
1. Rettyの体験として重要なものは コントラスト比を保つように工夫 2. グラフィックのテクニックで 視認性を確保する 配色によってオレンジの弱点を克服 ボタンはかなりハードルが高いので、他の部分から改善していく コントラスト比のまとめ
現状、最適解ではなくまだまだ発展途上 Rettyとオレンジの歩み 引き続き、ブランドカラーとの付き合い方は模索していきます to be continued....
ありがとうございました! ぜひRetty使ってみてください!