Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

COVID-19 下でも、誰もがウェブサイトにアクセスできるようにします

ウェブサイトのコア機能が常に利用可能、アクセス可能、安全、使用可能、検出可能、高速であることを確認する方法。

このページでは、ウェブサイトが常に利用可能で、アクセス可能で、安全で、誰でも利用できるようにするためのガイダンスを提供します。

このページのガイダンスは、Google 内の部門横断的なチームが、COVID-19 の状況下で人々の安全を支援するウェブサイトをサポートするために、短期的な焦点をシフトしていることから生まれたものです。これらの Google 社員は、重要な情報を探しているユーザーからの需要が、サイトでかつてないほど増加していることを目の当たりにしました。その多くは、これまでウェブをほとんど、またはまったく使用したことがないユーザーでした。この期間中にサイトを確実に利用できるようにし、すべてのユーザーがアクセスできるようにすることは、困難な場合があります。

ガイダンス

可用性、信頼性、復元力、安定性

サイトでトラフィックが急増して障害が発生している場合や、障害の発生を防ぎたい場合は、以下のガイダンスに沿って問題を迅速に修正するか、大きな問題になる前に検出してください。

トラフィックの急増を検出、軽減、防止する方法については、過負荷状態のサーバーを修正するをご覧ください。
不要な画像、動画、スクリプト、フォントを削除します。各ページが、サイトを使用するユーザーが本当に必要とする機能の提供に重点を置いていることを確認します。
画像はウェブ上の肥大化の最大の原因であるため、画像を最適化すると、サーバーの帯域幅の使用量を大幅に削減できる可能性があります。
静的コンテンツをできるだけ CDN にオフロードします。一般的なプロバイダの詳細: AWS、 Azure、 Cloudflare、 Google Cloud、 Firebase。
CDN に、動的画像圧縮、テキスト圧縮、JS リソースと CSS リソースの自動縮小など、簡単に有効にできる最適化機能があるかどうかを確認します。
HTTP キャッシュを最適化すると、コードの変更を最小限に抑えながら、サーバーの負荷を大幅に軽減できます。概要については HTTP キャッシュ: 最初の防御線、具体的な推奨事項については HTTP キャッシュとキャッシュのベストプラクティスをご覧ください。Lighthouse の効率的なキャッシュポリシーを使用して静的アセットを配信する監査は、キャッシュされていないリソースを迅速に検出するのに役立ちます。リソースの種類が異なれば、鮮度の要件も異なるため、異なるキャッシュ戦略が必要になります。
Service Worker は、サーバーの負荷を大幅に軽減するもう 1 つの方法ですが、多大な技術投資が必要になる場合があります。また、ウェブサイトをオフラインで動作させることができるため、接続していないリピーターに営業時間、電話番号などの情報を表示できます。Workbox は、ウェブサイトに Service Worker を追加する際におすすめの方法です。多くのボイラープレートを自動化し、ベストプラクティスに沿って簡単に実装できるようにします。また、低レベルの ServiceWorker API を直接使用する場合によく発生する、見つけにくいバグを防ぐことができます。
サイトの使用量が大幅に増加している場合は、DDoS 攻撃に対する適切な保護が施されているかどうかを確認してください。サイトが攻撃の対象としてより魅力的になっている可能性があるためです。一般的なプロバイダの詳細: AWS、Azure、Cloudflare、Google Cloud。

詳細については、ネットワークの信頼性をご覧ください。

ユーザー補助

さまざまなニーズを持つ多くのユーザーがサイトにアクセスしている可能性があるため、アクセシビリティに重点を置くことがこれまで以上に重要になっています。ウェブサイトのコア機能にすべてのユーザーがアクセスできるようにするには、以下のガイドラインに沿って対応してください。

アクセシビリティはチームの取り組みであり、全員が役割を担っています。まずは、Google のチーム向けユーザー補助ガイドと、米国デジタルサービスのチームガイドをご覧ください。これらのガイドでは、各チームメンバー（プロダクトマネージャー、エンジニア、デザイナー、QA など）が貢献できることについて説明しています。
ユーザー補助のレビューを行い、うまく機能している点と改善が必要な点を特定します。WAVE ブラウザ拡張機能は、サイトのユーザー補助機能の手動監査に役立ちます。
ユーザー補助ガイドを読んで、キーボードナビゲーションやスクリーンリーダーのサポートなどの特定のトピックについて理解を深めます。
Lighthouse 監査を実行して、ユーザー補助に関する一般的な問題を検出します。このレポートには、サイトの操作性を改善するために実施できる手動チェックのリストも表示されます。ユーザー補助スコアが 100 であっても、サイトがユーザー補助に対応しているとは限りません。Lighthouse では自動的にテストできない重要な問題が多数あるため、手動レビューを行うことも重要です。その他の自動監査ツールには、WAVE API や AXE 拡張機能などがあります。
egghead.io の Start Building Accessible Web Applications Today コースを修了するか、Udacity のウェブアクセシビリティコースをご覧ください。
特定のユーザー補助トピックに関する簡単なヒントについては、A11ycast の再生リストをご覧ください。

ID、セキュリティ、プライバシー

重要な修正をリリースするために近道をしたくなるかもしれませんが、そうすることでセキュリティホールが生じないように常に注意してください。ユーザーは、非常にプライベートなトピックに関するコンテンツにアクセスする必要があります。ウェブサイトは、この機密性の高いユーザーデータを何としても保護し、個人を特定できる情報（PII）が安全であることをユーザーに納得してもらう必要があります。

機密性の高い PII データを扱うウェブサイトだけでなく、すべてのウェブサイトを HTTPS で保護する必要がある理由を理解する。
デフォルトで HTTPS を使用するホスティングプロバイダに切り替えるか、Let's Encrypt などのサービスを使用してサーバーで HTTPS を有効にします。
Cookie の使用をより安全にする方法については、SameSite Cookie の説明をご覧ください。SameSite Cookie のラベル付けの適用は一時的にロールバックされています。

詳しくは、安全とセキュリティをご覧ください。

ユーザビリティ、UI、UX

基本的なニーズを満たすためにウェブに依存する傾向が強まっています。こうしたユーザーの多くは、ウェブを頻繁に使用しません。サイトのコア機能のユーザビリティを監査し、できるだけシンプルで使いやすいものにすることをおすすめします。

ウェブサイトの上部に、サービスに関する最新情報を明確に伝える目立つバナー（[X] ボタンで削除可能）を追加することを検討してください。バナーに行動を促すフレーズを使用して、ユーザーをより具体的なリソースに誘導します。ページの他のコンテンツから目立つように、異なる色やフォントを使用することを検討してください。共感を示し、ユーザーのニーズに焦点を当て、どのようなサービスが期待できるかを明確に伝えるようにします。
クリティカルユーザージャーニー（CUJ）で物理的な操作を最小限に抑える機会を探し、それらの変更をプロダクトチームに提案します。たとえば、配送サービスで通常は署名が必要な場合は、それを回避する方法がないか確認してください。
CUJ ができるだけシンプルで直感的であることを再確認し、改善の余地がある場合は、プロダクトチームに変更を提案します。
優れたモバイル設計の原則を確認し、さまざまなモバイルデバイスで CUJ を試して、目立った問題がないことを確認します。普段はウェブをあまり使わないものの、突然ウェブに頼らざるを得なくなったユーザーは、モバイルデバイスからサイトにアクセスしている可能性があります。
可能な限りレスポンシブデザインパターンを使用するようにサイトをリファクタリングします。
フォームが効率的で適切に設計されていることを確認します。

SEO

ユーザーは、健康や仕事に関する重要な情報を求めています。すべての検索エンジンでサイトが検出可能であることを確認することが重要です。Lighthouse SEO 監査は、基本的な問題の検出に役立ちます。検索エンジンの公式ブログで、最新のガイダンスと更新情報を確認してください。 Google、 Bing、 Baidu、 DuckDuckGo、 Yandex。 COVID-19（新型コロナウイルス感染症）に関連する最近の投稿:

詳しくは、検出可能をご覧ください。

パフォーマンス

一部の ISP（インドなど）では、家庭でのインターネット使用量が急増しており、増加した需要に対応するためのインフラストラクチャが不足しています。このような状況では、ウェブサイトの速度が低下する可能性があります。読み込みパフォーマンスを最適化することで、帯域幅の減少による影響を相殺できる可能性があります。つまり、ページを読み込むためにネットワーク経由で送信する必要があるバイト数を減らすことで、帯域幅の減少によるパフォーマンスへの影響を相殺できます。

画像は、ウェブの肥大化の最大の原因です。画像を最適化することで、ウェブサイトの帯域幅の使用量を大幅に削減できる場合があります。Squoosh は、画像をすばやく圧縮できるシンプルなオープンソースの画像圧縮ツールです。
WebPageTest または Lighthouse を実行して、パフォーマンスを改善する機会を特定します。
テキスト圧縮を有効にして、テキストリソースのネットワークサイズを削減します。これは、多くの場合、技術的な投資を最小限に抑えながら、パフォーマンスを簡単に向上させることができる方法です。
部門横断的にウェブサイトの速度を修正するを読んで、他の部門と協力して賛同を得る方法を学びます。
画像の標準化された遅延読み込みを使用して、ユーザーが実際には見ない可能性のある画像のリクエストを最小限に抑えます。ブラウザの互換性は 100% ではありませんが、この機能はプログレッシブエンハンスメントとして扱うことができます。つまり、特定のブラウザが標準化された遅延読み込みをサポートしていない場合、画像は通常どおり読み込まれます。
サイトに、より非同期的に読み込むことができる A/B テストまたはパーソナライズスクリプトがあるかどうか、またはスクリプトに無効にできる重要でない機能があるかどうかを確認します。A/B テストとパーソナライズのスクリプトは、通常、完全に非同期で読み込むことはできません。ページコンテンツが読み込まれる前に実行する必要があるためです。ただし、スクリプトの一部をより非同期で読み込むことができる場合があります。クリティカルレンダリングパスを参照して、一般的な同期スクリプト（レンダリングをブロックするスクリプトとも呼ばれます）とページの読み込み時間の基本的なトレードオフを理解し、レンダリングをブロックするスクリプトをページの読み込み時間よりも優先する必要があるかどうか、またはその逆を判断します。
ほとんどのウェブサイトでは、サードパーティコードが全リクエストの約半分を占めています。サイトの運営に不可欠でないサードパーティコードを最適化するか、一時的に削除または無効にすることを検討してください。
機能リリースの優先度が低い場合は、クリーンアップに最適なタイミングかもしれません。タグマネージャーからタグを削除し、肥大化した CSS と JS をクリーンアップして、非推奨の機能やコードを削除します。Chrome DevTools の [Coverage] タブと Puppeteer の Coverage クラスを使用すると、未使用のコードを検出できます。

詳しくは、読み込み時間の短縮をご覧ください。