「Webアクセシビリティ対応」が「コアウェブバイタル」に好影響?!～弁護士ドットコム、ブランドカラー変更の効果と担当者が知っておくべきアクセシビリティ対応のポイント～ #webtan （2021.11.15）

Web担当者Forum編集部【公式】 @webtanforum

本日最後、17:10～17:55の講演紹介です。 【KA1-7】 「Webアクセシビリティ対応」が「コアウェブバイタル」に好影響?! ～弁護士ドットコム、ブランドカラー変更の効果と担当者が知っておくべきアクセシビリティ対応のポイント～ webtan.impress.co.jp/events/202111?… #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

ブランドカラー変更の背景にアクセシビリティが！ コントラスト比… #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

弁護士ドットコムのブランドリニューアルプロジェクト。 ミッションの確認、インタビューからペルソナ化、ブランドパーソナリティ→ブランドカラーの変更へ （しごく真っ当かつ丁寧な進め方！） #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

ブランドイメージのコントラスト比のせめぎ合い！ コントラスト比4.5対1を守ろうとするとオレンジではなくなってしまう。 3対1もあきらめ、2.82対1に。 →できる範囲で向上することには意味がある、とアドバイス（すばらしい！） #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

実装時にアクセシビリティは優先度をつけて対応。 アクセシビリティへの取り組みを一過性にしないため多く人を巻き込み、アクセシビリティが当たり前になるように（あくまで通過点）。 #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

いざ評価！ ユーザー行動系指標 回遊率アップ！ 流入ユーザー数の向上も！ （いいリニューアルだなあ…マイナスはなかったのだろうか？） #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

顧客の行動データを見る！ Clarityを利用して観察 （ユーザー理解が進む仕組み作り…！） #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

おわりに アクセシビリティは100か0ではない。 100％にできなくても、 できることを できるだけやる。 基準を満たしたからといっても誰でもアクセスできるようになるわけではない。継続的に取り組む！ #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

QAセッション Qアクセシビリティを関係者に理解してもらうには？ Aユーザーテストで当事者が使ってるところを見てもらう。サイトの問題がわかるし、困る人がいることを実感してもらえる。 ・実際に見て「これはやばいぞ！改善したい」と思った。 ・事業の目的ともかなってると説明 #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

Qユーザーテストで協力者がいないのだが… A個人的な知り合いに頼んだ。いないなら、ウェブアクセシビリティ系のイベントで当事者に知り合う。委託できるところも。 #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

Qトップベージでタブで移動させるとフォーカスがわからなくなるが… Aこれからリニューアルします！ #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

Qコントラスト比以外に重視した点とリニューアル効果を実感できたことは？ Aユーザビリティを意識して実装。普通のことを丁寧に。 #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

Q色変更以外のコアウェブバイタルに有効な施策は？ AHTMLをきれいに書くことや表示が重くなるCSSを書かないなど、パフォーマンスをよくする施策の積み重ね。 #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

Qマーケティングサイドと協力は？クリエイティブにも影響すると思うが… Aしてない…（笑）。ワークショップでクリエイター以外のメンバーを巻き込んで共有していった。 #webtan

づかっち（かわらづか）実況好きなマーケター @passionhack

弁護士ドットコムのtogetter用サムネイル #webtan pic.twitter.com/7IA4Uc7xVC

拡大