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
1k
Rettyとオレンジの歩み
yuri
August 09, 2023
Tweet
Share
Other Decks in Design
See All in Design
“ブロック”で作る、WordPress制作フロー変革のすすめ
koots2021
4
1.8k
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
660
【最新】マズロー安達の弟子実績(1期-4期の26人分)
maslow_akkun
0
450
Echoes Boomerang
artcloudyu
PRO
0
250
Saudade typeface
tiagoporto
0
330
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
170
エンジニアでも捗る デザイナー的思考入門
tinykitten
PRO
1
1.1k
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
560
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
330
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
Goodpatch Tour💙 / We are hiring!
goodpatch
31
860k
RAKSUL_DESIGN_DECK_20250319
raksulrecruiting
0
400
Featured
See All Featured
The Invisible Side of Design
smashingmag
301
51k
It's Worth the Effort
3n
185
28k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Become a Pro
speakerdeck
PRO
29
5.4k
How GitHub (no longer) Works
holman
314
140k
Code Reviewing Like a Champion
maltzj
524
40k
Testing 201, or: Great Expectations
jmmastey
43
7.6k
Producing Creativity
orderedlist
PRO
346
40k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
GitHub's CSS Performance
jonrohan
1031
460k
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使ってみてください!