CA_BASE_NEXT_LP_の品質を担保するために行ったアクセシビリティ対応とパフォーマンス改善

Muddy Web #3 で発表した登壇資料です。
https://cyberagent.connpass.com/event/261115/

2022年7月28,29日に、サイバーエージェントの20代のエンジニア・クリエイターが中心となって創り上げる技術カンファレンス "CA BASE NEXT" が開催されました。

一般的に「パフォーマンスの質」と「CV数」には正の相関がある（参考: https://web.dev/vitals-business-impact/ ）と言われており、本カンファレンスサイトにおいても、より多くの方にご試聴いただくためには「パフォーマンスの質」を担保することは重要でした。また、さまざまな方にご視聴いただくためには「アクセシビリティの質」を担保することも重要だと言えます。

技術カンファレンスサイトの開発を担う一時的な開発チームにおいて、いかにパフォーマンスとアクセシビリティへの関心を維持しつつ、開発速度を落とさずに品質を担保していったのか。という "Muddy" なお話ができたらと思います。

Transcript

1. CA BASE NEXT LP の 品質を担保するために⾏った アクセシビリティ対応と パフォーマンス改善 shinya fukimbara
2. 1.⾃⼰紹介 2.本⽇お話しすること 3.CA BASE NEXT とは 4.CA BASE NEXT と アクセシビリティ 5.CA BASE NEXT と パフォーマンス 6.まとめ
3. ⾃⼰紹介 1
4. shinya fukimbara 吹⾦原 榛耶 progriro
5. 本⽇お話しすること 2
6. アクセシビリティとパフォーマンスを ⼀時的な開発チームに浸透させるためにやったこと ✨ 開発速度を維持しつつ LP の品質を担保するためにやったこと 🚀
7. CA BASE NEXT とは 3
8. CA BASE NEXTとは、サイバーエージェントの20代のエンジニア・クリエイターが 中⼼となって創り上げる技術カンファレンスです。 独⾃の3DCGバーチャルステージなど次世代の技術を⽤いた新しい体験と共に、 弊社の持つ多様な技術・クリエイティブ・モノづくりの⽂化をお届けします。 約6,000⼈ 昨年度の来場者数 約14,000回 (当⽇) 昨年度の総視聴数
9. CA 若⼿流を轟かせる。⼀流を驚かせる。 CA BASE NEXT 2022 全体⽬標 カンファレンスへの期待感が⼀瞬で⾼まる LP をつくる LP 開発チーム ⽬標
10. CA BASE NEXT と アクセシビリティ 4
11. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 7⽉ A11y 対応期間 A11y 集中期間 意識づくり A11y 基盤整備 チームへの周知 試験・評価 残り A11y 対応 A11y 試験実施 １ ２ ３ 7⽉28⽇ 7⽉29⽇
12. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 7⽉ A11y 対応期間 A11y 集中期間 意識づくり A11y 基盤整備 チームへの周知 試験・評価 残り A11y 対応 A11y 試験実施 １ ２ ３ 7⽉28⽇ 7⽉29⽇
13. １ ⽬的・⽬標設定 1.1 ⽬指すゴールを整理 1.2 A11y の重要度を決定 1.3 A11y の指標を決定
14. １ ⽬的・⽬標設定 1.1 ⽬指すゴールを整理 1.2 A11y の重要度を決定 1.3 A11y の指標を決定 CA 若⼿流を轟かせる。⼀流を驚かせる。 [再掲] CA BASE NEXT 2022 全体⽬標 カンファレンスへの期待感が⼀瞬で⾼まる LP をつくる [再掲] LP 開発チーム ⽬標 A11y 対応が本当に必要かを考えるための軸 来場者数↑ 視聴数↑ YouTube 登録数↑
15. １ ⽬的・⽬標設定 1.1 ⽬指すゴールを整理 1.2 A11y の重要度を決定 1.3 A11y の指標を決定 重要度の整理 ・ A11y Expert の⽅が在籍 ・ A11y ガイドラインを公開（Ameba） ・ A11y について、Developers Blog や Event にて外部発信 → A11y の質を担保することは 企業ブランディング としても重要 重要度の結論 ⽬指すゴールの達成には A11y は重要。 ただし、開発速度の低下 / スケジュールへの影響 / チーム全体の負担 に ならないような “A11y 指標を決定” すると共に、“チェックリストの作成” と “改善サイクルの環境を整える” 必要がある。 ⼀流を驚かせる 😲「若⼿が開発した LP でもしっかり A11y の質が担保されている」 期待感が⼀瞬で⾼まる 🥸「こだわりが強い LP だから、セッションも期待できる」 → A11y の質に⽐例して、より良い結果が⽣まれると期待できる ※社内 Developer Experts 制度
16. １ ⽬的・⽬標設定 1.2 A11y の重要度を決定 1.3 A11y の指標を決定 1.1 ⽬指すゴールを整理 ※ 開発速度の低下 / スケジュールへの影響 / チーム全体の負担 は NG ※ プロダクト仕様 / デザイン(デザイナー) / 開発(エンジニア) で分割 A AA AAA 最低限レベル より良いレベル より発展的なレベル 達成できていないと、 スクリーンリーダーや拡⼤鏡などの ⽀援技術を⽤いてもサービス利⽤不可 達成できれば、 ⽀援技術なしでもサービスを 利⽤できることが多くなり、 より多くのユーザー・状況で使⽤可能 達成できれば、 よりサービスを利⽤しやすくなる 場合があるが、達成が難しいため サービスによって検討が必要 100％ 達成を⽬指す 50〜100％ 達成を⽬指す 余裕があれば達成を⽬指す
17. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 7⽉ A11y 対応期間 A11y 集中期間 意識づくり A11y 基盤整備 チームへの周知 試験・評価 残り A11y 対応 A11y 試験実施 １ ２ ３ 7⽉28⽇ 7⽉29⽇
18. ２ 意識づくり 2.1 チーム状況の整理 2.2 チームへ周知 2.3 Linter / CI の整備 2.4 A11y チェックシート作成
19. ２ 意識づくり 2.1 チーム状況の整理 LP 開発チーム 組織体制 PM︓１名 エンジニア︓４名 デザイナー︓４名 🎩 🖥 🖥 🖥 🖥 🎨 🎨 🎨 🎨 😊 A11y に詳しい⽅がチームに在籍 😊 チーム全員が A11y の重要性を認識している 😵 本業と並⾏して LP 開発を⾏う必要がある 😵 全員が同期的に作業する時間がない ⾮同期に A11y 対応できる環境をつくる 2.2 チームへ周知 2.3 Linter / CI の整備 2.4 A11y チェックシート作成
20. ２ 意識づくり 2.1 チーム状況の整理 2.2 チームへ周知 2.3 Linter / CI の整備 2.4 A11y チェックシート作成 Slack (⾮同期) チームミーティング (同期)
21. ２ 意識づくり ※ 必要最低限で A11y の質を担保する ※ 開発速度の低下 / スケジュールへの影響 / チーム全体の負担 は NG 2.3 Linter / CI の整備 2.4 A11y チェックシート作成 2.1 チーム状況の整理 2.2 チームへ周知
22. ２ 意識づくり 2.4 A11y チェックシート作成 2.1 チーム状況の整理 2.2 チームへ周知 2.3 Linter / CI の整備
23. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 7⽉ A11y 対応期間 A11y 集中期間 意識づくり A11y 基盤整備 チームへの周知 試験・評価 残り A11y 対応 A11y 試験実施 １ ２ ３ 7⽉28⽇ 7⽉29⽇
24. ３ 試験・評価 3.1 試験 3.2 残り A11y 対応 3.3 評価
25. ３ 試験・評価 3.1 試験 3.2 残り A11y 対応 3.3 評価 試験対象 ・トップページ ・セッション閲覧ページ ・プライバシーポリシーページ ・⾏動規範ページ ・エラーページ
26. ３ 試験・評価 3.1 試験 3.2 残り A11y 対応 3.3 評価 ⼀部抜粋 Header Logo が隠れている際は マウス・キーボードでクリック できないように修正 TopicCard に focus 時に outline が表⽰されるように修正 outline-offset でスペースをとり focus ring を視認しやすく修正 スケジュール追加ボタンが消えた後に フォーカスが当たらないように修正
27. ３ 試験・評価 3.3 評価 3.1 試験 3.2 残り A11y 対応 トップページ セッション閲覧ページ A 達成︓13 / 15 AA 達成︓6 / 6 AAA 達成︓2 / 3 プライバシーポリシー / ⾏動規範ページ A 達成︓13 / 15 AA 達成︓5 / 5 AAA 達成︓2 / 2 A 達成︓11 / 11 AA 達成︓5 / 5 AAA 達成︓2 / 2 A 達成︓11 / 11 AA 達成︓5 / 5 AAA 達成︓2 / 2
28. CA BASE NEXT と パフォーマンス 5
29. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 6⽉ Perf 対応期間 Perf 改善期間 意識づくり Perf 基盤整備 チームへの周知 改善・評価 Perf 改善 Perf 評価 １ ２ ３ 7⽉28⽇ 7⽉29⽇
30. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 6⽉ Perf 対応期間 Perf 改善期間 意識づくり Perf 基盤整備 チームへの周知 改善・評価 Perf 改善 Perf 評価 １ ２ ３ 7⽉28⽇ 7⽉29⽇
31. １ ⽬的・⽬標設定 1.1 ⽬指すゴールを整理 1.2 Perf の重要度を決定 1.3 Perf の優先度を決定 1.4 Perf の指標を決定
32. １ ⽬的・⽬標設定 1.1 ⽬指すゴールを整理 1.2 Perf の重要度を決定 1.3 Perf の優先度を決定 CA 若⼿流を轟かせる。⼀流を驚かせる。 [再掲] CA BASE NEXT 2022 全体⽬標 カンファレンスへの期待感が⼀瞬で⾼まる LP をつくる [再掲] LP 開発チーム ⽬標 Perf 対応が本当に必要かを考えるための軸 来場者数↑ 視聴数↑ YouTube 登録数↑ 1.4 Perf の指標を決定
33. １ ⽬的・⽬標設定 1.1 ⽬指すゴールを整理 1.2 Perf の重要度を決定 1.3 Perf の優先度を決定 重要度の整理 ・ Web Perf Expert の⽅が在籍 ・ Web Speed Hackathon の開催 ・ Perf について、Developers Blog や Event にて外部発信 → Perf の質を担保することは 企業ブランディング としても重要 →「Perf の質」と「CV 数」には正の相関がある 来場者数↑ 視聴数↑ YouTube 登録数↑ 【事例１】 iCook は CLS を 15% 改善し、広告収⼊が 10% 増加した 【事例２】 Tokopedia は LCP を 55% 改善し、平均セッション時間が 23% 増加した 参考︓https://web.dev/vitals-business-impact/ ・ ページの読み込み時間が1秒から3秒に増加すると、直帰率は 32% 増加する ・ ページの読み込み時間が1秒から6秒に増加すると、直帰率は 106% 増加する 参考︓https://support.google.com/webmasters/answer/9205520 → ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼす 1.4 Perf の指標を決定 ※社内 Developer Experts 制度
34. １ ⽬的・⽬標設定 1.1 ⽬指すゴールを整理 1.2 Perf の重要度を決定 1.3 Perf の優先度を決定 重要度の整理 パフォーマンス改善のメリット ・ サイト直帰率が低くなり、詳細ページへの流⼊が増加する ・ 再訪問の機会損失を⼩さくできる ・ SEO にも良い影響を与える パフォーマンス改善のデメリット ・ 開発速度に影響が出る ・ 開発メンバーが考えることが多くなる ・ 厳しい指標を⽴ててしまうと、本来の⽬的を⾒失う可能性がある 重要度の結論 ⽬指すゴールの達成には Perf は重要。 ただし、開発速度の低下 / スケジュールへの影響 / チーム全体の負担 に ならないような “Perf 指標を決定” と “改善サイクルの環境を整える” 必要がある。 1.4 Perf の指標を決定
35. １ ⽬的・⽬標設定 1.2 Perf の重要度を決定 1.3 Perf の優先度を決定 1.1 ⽬指すゴールを整理 昨年度 CA BASE NEXT で計測した結果をもとに パフォーマンス改善を⾏う優先度を決定 1.4 Perf の指標を決定 🖥 📱 ＞ トップページ ＞ セクション閲覧 ＞ ⾏動規範 ≒ プラポリ ＞ エラーページ Desktop Mobile
36. １ ⽬的・⽬標設定 1.2 Perf の重要度を決定 1.1 ⽬指すゴールを整理 ※ A「必ず達成したい」 ※ AA「できる限り達成したい」 ※ AAA「達成できたら最⾼のユーザー体験を提供できる」 ※ 開発速度の低下 / スケジュールへの影響 / チーム全体の負担 は NG A AA AAA 遅くはないが ストレスを感じる 遅さなどは 気にならない 快適 1.4 Perf の指標を決定 1.3 Perf の優先度を決定
37. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 6⽉ Perf 対応期間 Perf 改善期間 意識づくり Perf 基盤整備 チームへの周知 １ ２ 7⽉28⽇ 7⽉29⽇ 改善・評価 Perf 改善 Perf 評価 ３
38. ２ 意識づくり 2.1 チーム状況の整理 2.2 チームへ周知 2.3 CI の整備
39. ２ 意識づくり 2.1 チーム状況の整理 LP 開発チーム 組織体制 PM︓１名 エンジニア︓４名 デザイナー︓４名 🎩 🖥 🖥 🖥 🖥 🎨 🎨 🎨 🎨 😊 Perf に詳しい⽅がチームに在籍 😊 エンジニア全員が Perf の重要性を認識している 😵 本業と並⾏して LP 開発を⾏う必要がある 😵 全員が同期的に作業する時間がない ⾮同期に Perf 対応できる環境をつくる 2.2 チームへ周知 2.3 CI の整備
40. ２ 意識づくり 2.1 チーム状況の整理 2.2 チームへ周知 2.3 CI の整備 Slack (⾮同期) チームミーティング (同期)
41. ２ 意識づくり 2.3 CI の整備 2.1 チーム状況の整理 2.2 チームへ周知 Check Bundle Size Check Lighthouse Score dangerfile.ts Compress Images
42. 3⽉ 開発期間 4⽉ 6⽉ Perf 対応期間 Perf 改善期間 改善・評価 Perf 改善 Perf 評価 ３ 7⽉28⽇ 7⽉29⽇ ⽬的・⽬標設定 なぜやるのか 何をやるのか １ 意識づくり Perf 基盤整備 チームへの周知 ２
43. ３ 改善・評価 3.1 改善 3.2 評価
44. ３ 改善・評価 3.1 改善 3.2 評価 ⼀部抜粋 サポートされていれば backbround-image に avif, webp を使⽤する 圧縮率の⾼い webp, avif に置き換え CLS が発⽣しないように 各所に Placeholder を設置 ・Resource Hints を指定 ・font-display: swap を指定 ・picture タグと srcset 属性を使⽤ ・Below the fold にある image に lazy を指定 ・etc…
45. ３ 試験・評価 3.1 改善 3.2 評価 トップページ セッション閲覧ページ Perf Score︓達成できず FCP︓AAA 達成 LCP︓達成できず CLS︓AAA 達成 TTI︓A 達成 TBT︓AAA 達成 SI︓AAA 達成 Perf Score︓AAA 達成 FCP︓AAA 達成 LCP︓AAA 達成 CLS︓AAA 達成 TTI︓AAA 達成 TBT︓AAA 達成 SI︓AAA 達成
46. まとめ 6
47. アクセシビリティとパフォーマンスを ⼀時的な開発チームに浸透させるためにやったこと ✨ 開発速度を維持しつつ LP の品質を担保するためにやったこと 🚀 ⽬的・⽬標設定 なぜやるのか 何をやるのか 意識づくり A11y / Perf 基盤整備 チームへの周知 試験(改善)・評価 A11y 試験 (Perf 改善) 評価 １ ２ ３
48. ありがとうございました