Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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

 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" なお話ができたらと思います。

shinya fukimbara

October 11, 2022
Tweet

Other Decks in Programming

Transcript

  1. 1.⾃⼰紹介 2.本⽇お話しすること 3.CA BASE NEXT とは 4.CA BASE NEXT と

    アクセシビリティ 5.CA BASE NEXT と パフォーマンス 6.まとめ
  2. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 7⽉ A11y 対応期間 A11y

    集中期間 意識づくり A11y 基盤整備 チームへの周知 試験・評価 残り A11y 対応 A11y 試験実施 1 2 3 7⽉28⽇ 7⽉29⽇
  3. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 7⽉ A11y 対応期間 A11y

    集中期間 意識づくり A11y 基盤整備 チームへの周知 試験・評価 残り A11y 対応 A11y 試験実施 1 2 3 7⽉28⽇ 7⽉29⽇
  4. 1 ⽬的・⽬標設定 1.1 ⽬指すゴールを整理 1.2 A11y の重要度を決定 1.3 A11y の指標を決定

    CA 若⼿流を轟かせる。⼀流を驚かせる。 [再掲] CA BASE NEXT 2022 全体⽬標 カンファレンスへの期待感が⼀瞬で⾼まる LP をつくる [再掲] LP 開発チーム ⽬標 A11y 対応が本当に必要かを考えるための軸 来場者数↑ 視聴数↑ YouTube 登録数↑
  5. 1 ⽬的・⽬標設定 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 制度
  6. 1 ⽬的・⽬標設定 1.2 A11y の重要度を決定 1.3 A11y の指標を決定 1.1 ⽬指すゴールを整理

    ※ 開発速度の低下 / スケジュールへの影響 / チーム全体の負担 は NG ※ プロダクト仕様 / デザイン(デザイナー) / 開発(エンジニア) で分割 A AA AAA 最低限レベル より良いレベル より発展的なレベル 達成できていないと、 スクリーンリーダーや拡⼤鏡などの ⽀援技術を⽤いてもサービス利⽤不可 達成できれば、 ⽀援技術なしでもサービスを 利⽤できることが多くなり、 より多くのユーザー・状況で使⽤可能 達成できれば、 よりサービスを利⽤しやすくなる 場合があるが、達成が難しいため サービスによって検討が必要 100% 達成を⽬指す 50〜100% 達成を⽬指す 余裕があれば達成を⽬指す
  7. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 7⽉ A11y 対応期間 A11y

    集中期間 意識づくり A11y 基盤整備 チームへの周知 試験・評価 残り A11y 対応 A11y 試験実施 1 2 3 7⽉28⽇ 7⽉29⽇
  8. 2 意識づくり 2.1 チーム状況の整理 LP 開発チーム 組織体制 PM︓1名 エンジニア︓4名 デザイナー︓4名

    🎩 🖥 🖥 🖥 🖥 🎨 🎨 🎨 🎨 😊 A11y に詳しい⽅がチームに在籍 😊 チーム全員が A11y の重要性を認識している 😵 本業と並⾏して LP 開発を⾏う必要がある 😵 全員が同期的に作業する時間がない ⾮同期に A11y 対応できる環境をつくる 2.2 チームへ周知 2.3 Linter / CI の整備 2.4 A11y チェックシート作成
  9. 2 意識づくり 2.1 チーム状況の整理 2.2 チームへ周知 2.3 Linter / CI

    の整備 2.4 A11y チェックシート作成 Slack (⾮同期) チームミーティング (同期)
  10. 2 意識づくり ※ 必要最低限で A11y の質を担保する ※ 開発速度の低下 / スケジュールへの影響

    / チーム全体の負担 は NG 2.3 Linter / CI の整備 2.4 A11y チェックシート作成 2.1 チーム状況の整理 2.2 チームへ周知
  11. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 7⽉ A11y 対応期間 A11y

    集中期間 意識づくり A11y 基盤整備 チームへの周知 試験・評価 残り A11y 対応 A11y 試験実施 1 2 3 7⽉28⽇ 7⽉29⽇
  12. 3 試験・評価 3.1 試験 3.2 残り A11y 対応 3.3 評価

    試験対象 ・トップページ ・セッション閲覧ページ ・プライバシーポリシーページ ・⾏動規範ページ ・エラーページ
  13. 3 試験・評価 3.1 試験 3.2 残り A11y 対応 3.3 評価

    ⼀部抜粋 Header Logo が隠れている際は マウス・キーボードでクリック できないように修正 TopicCard に focus 時に outline が表⽰されるように修正 outline-offset でスペースをとり focus ring を視認しやすく修正 スケジュール追加ボタンが消えた後に フォーカスが当たらないように修正
  14. 3 試験・評価 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
  15. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 6⽉ Perf 対応期間 Perf

    改善期間 意識づくり Perf 基盤整備 チームへの周知 改善・評価 Perf 改善 Perf 評価 1 2 3 7⽉28⽇ 7⽉29⽇
  16. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 6⽉ Perf 対応期間 Perf

    改善期間 意識づくり Perf 基盤整備 チームへの周知 改善・評価 Perf 改善 Perf 評価 1 2 3 7⽉28⽇ 7⽉29⽇
  17. 1 ⽬的・⽬標設定 1.1 ⽬指すゴールを整理 1.2 Perf の重要度を決定 1.3 Perf の優先度を決定

    CA 若⼿流を轟かせる。⼀流を驚かせる。 [再掲] CA BASE NEXT 2022 全体⽬標 カンファレンスへの期待感が⼀瞬で⾼まる LP をつくる [再掲] LP 開発チーム ⽬標 Perf 対応が本当に必要かを考えるための軸 来場者数↑ 視聴数↑ YouTube 登録数↑ 1.4 Perf の指標を決定
  18. 1 ⽬的・⽬標設定 1.1 ⽬指すゴールを整理 1.2 Perf の重要度を決定 1.3 Perf の優先度を決定

    重要度の整理 ・ Web Perf Expert の⽅が在籍 ・ Web Speed Hackathon の開催 ・ Perf について、Developers Blog や Event にて外部発信 → Perf の質を担保することは 企業ブランディング としても重要 →「Perf の質」と「CV 数」には正の相関がある 来場者数↑ 視聴数↑ YouTube 登録数↑ 【事例1】 iCook は CLS を 15% 改善し、広告収⼊が 10% 増加した 【事例2】 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 制度
  19. 1 ⽬的・⽬標設定 1.1 ⽬指すゴールを整理 1.2 Perf の重要度を決定 1.3 Perf の優先度を決定

    重要度の整理 パフォーマンス改善のメリット ・ サイト直帰率が低くなり、詳細ページへの流⼊が増加する ・ 再訪問の機会損失を⼩さくできる ・ SEO にも良い影響を与える パフォーマンス改善のデメリット ・ 開発速度に影響が出る ・ 開発メンバーが考えることが多くなる ・ 厳しい指標を⽴ててしまうと、本来の⽬的を⾒失う可能性がある 重要度の結論 ⽬指すゴールの達成には Perf は重要。 ただし、開発速度の低下 / スケジュールへの影響 / チーム全体の負担 に ならないような “Perf 指標を決定” と “改善サイクルの環境を整える” 必要がある。 1.4 Perf の指標を決定
  20. 1 ⽬的・⽬標設定 1.2 Perf の重要度を決定 1.3 Perf の優先度を決定 1.1 ⽬指すゴールを整理

    昨年度 CA BASE NEXT で計測した結果をもとに パフォーマンス改善を⾏う優先度を決定 1.4 Perf の指標を決定 🖥 📱 > トップページ > セクション閲覧 > ⾏動規範 ≒ プラポリ > エラーページ Desktop Mobile
  21. 1 ⽬的・⽬標設定 1.2 Perf の重要度を決定 1.1 ⽬指すゴールを整理 ※ A「必ず達成したい」 ※

    AA「できる限り達成したい」 ※ AAA「達成できたら最⾼のユーザー体験を提供できる」 ※ 開発速度の低下 / スケジュールへの影響 / チーム全体の負担 は NG A AA AAA 遅くはないが ストレスを感じる 遅さなどは 気にならない 快適 1.4 Perf の指標を決定 1.3 Perf の優先度を決定
  22. ⽬的・⽬標設定 なぜやるのか 何をやるのか 3⽉ 開発期間 4⽉ 6⽉ Perf 対応期間 Perf

    改善期間 意識づくり Perf 基盤整備 チームへの周知 1 2 7⽉28⽇ 7⽉29⽇ 改善・評価 Perf 改善 Perf 評価 3
  23. 2 意識づくり 2.1 チーム状況の整理 LP 開発チーム 組織体制 PM︓1名 エンジニア︓4名 デザイナー︓4名

    🎩 🖥 🖥 🖥 🖥 🎨 🎨 🎨 🎨 😊 Perf に詳しい⽅がチームに在籍 😊 エンジニア全員が Perf の重要性を認識している 😵 本業と並⾏して LP 開発を⾏う必要がある 😵 全員が同期的に作業する時間がない ⾮同期に Perf 対応できる環境をつくる 2.2 チームへ周知 2.3 CI の整備
  24. 2 意識づくり 2.3 CI の整備 2.1 チーム状況の整理 2.2 チームへ周知 Check

    Bundle Size Check Lighthouse Score dangerfile.ts Compress Images
  25. 3⽉ 開発期間 4⽉ 6⽉ Perf 対応期間 Perf 改善期間 改善・評価 Perf

    改善 Perf 評価 3 7⽉28⽇ 7⽉29⽇ ⽬的・⽬標設定 なぜやるのか 何をやるのか 1 意識づくり Perf 基盤整備 チームへの周知 2
  26. 3 改善・評価 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…
  27. 3 試験・評価 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 達成