RYO.dev

最終更新日:

制作ポリシー

  1. 概要
  2. Googleのガイドライン
  3. アクセシビリティ
  4. Twitterカード
  5. CSP
  6. AMP
  7. クロスブラウザテスト
  8. 包括的なパフォーマンス
  9. 最後に

概要

あなたはなんのためにWebページを作りたいのでしょうか?

自社の事業について知ってもらうため。料理の写真と値段をお客さんに教えるため。自分の作品を公開するため。目的は人それぞれ違います。しかし、1つだけ共通点があります。

それは、ユーザーを想定していることです。ユーザーに何かを伝えたい、公開したい、提供したい、そのためにWebページを作ろうと考えているはずです。

まぁこれは当然のことなのですが。だって、ユーザーを想定していないのなら、日記に書くなりスマホのメモ帳に書くなりすればいいんです。わざわざWebページを作って世界中に公開するということは、ユーザーに利用してもらうことに何らかの意味があることを示しています。

Webページを作る目的は、ユーザーに利用してもらうことで達成できます。

しかし、私たちは経験的に知っています。ある種のWebページはユーザーをイライラさせ、はたまたすぐに離脱させてしまうことを。読み込みが遅いページ、開いてすぐに広告が表示されるページ、文字がやたら小さいページ、セキュリティが緩そうなページ、…。

これでは目的を達成できません。
ではどのようなWebページならユーザーに快適に利用してもらえるでしょうか?

それは、使いやすいWebページであると考えます。
僕は使いやすいWebページを作ります。

「使いやすい」というワードは抽象的です。なにが「使いやすい」かは人によって解釈が異なります。万人にとって使いやすいWebページを作るのは不可能です。けれども、なるべく多くの人にとって使いやすいWebページを作ることならできます。

この記事ではいくつかのガイドラインとWebページをテストするためのサービスを紹介します。ガイドラインを遵守して作成し、Webページテストサービスによる検査で一定の基準をクリアしたWebページは多くの人にとって使いやすいWebページになるはずです。

Googleのガイドライン

Googleは、Webページを検索結果に表示させるための指針として、上の4つのガイドラインを公開しています。各ガイドラインの簡単な説明は、ガイドラインの概要で確認できます。

これらのガイドラインでは例えば次の項目についての方針や推奨の方法について説明しています。

  • SEO
  • 構造化データ
  • SSL化
  • モバイルフレンドリー
  • 読み込み速度

アクセシビリティ

あらゆる人が利用できるWebページを作るためにはアクセシビリティを考慮する必要があります。あらゆる人とは例えば、障害者、高齢者、スマホユーザー、PCユーザー、図書館にいる人、遅いインターネット接続を使用している人などが含まれます。いかなる状況に置かれているユーザーでも制限なく利用できるWebページは「アクセシビリティが考慮されている」と言えます。

ウェブアクセシビリティのガイドラインはJISとして制定されています。規格番号は「JISX8341-3:2016」になります。

ウェブアクセシビリティ基盤委員会が作成した「JIS X 8341-3:2016 達成基準 早見表(PDF)」にまとめられたすべての達成基準をクリアします。

Twitterカード

Twitterカード専用のコードを含めたWebページのURLをTwitterで投稿すると、画像やページタイトルなどが表示されます。

下の画像は、「https://developer.twitter.com/en/docs/tweets/optimize-with-cards/overview/abouts-cards」のURLを投稿したツイートのスクショです。このページにはTwitterカード専用のコードが含まれているため、URLを投稿するとTwitterカードが表示されます。
Twitterカードの例

Card validatorは、Twitterカード専用のコードが正確に指定されているかを確認するサービスです。

Twitterカード専用のコードを含めた場合、Card validatorでエラーが検出されず、想定通りのTwitterカードを表示させます。

CSP

クロスサイトスクリプティングXSSはバグの一種です。このバグがWebページに存在する場合、攻撃者は悪意のあるコードをWebページに挿入することができます。このコードが被害者のブラウザによって実行されると、Webページの見た目を変更したり、個人データを盗んだり、ユーザーに代わってアクションを実行したりする可能性があります。

コンテンツセキュリティポリシーCSPを導入することで、XSSによる攻撃を軽減できます。セキュリティが上がるということです。

CSP Evaluatorを使用すると、導入したCSPがXSS攻撃の緩和策として十分に機能するかどうかを確認できます。

CSPを導入した場合、CSPのすべてのコードがCSP Evaluatorで「All good」と評価されるようにします。

AMP

AMPを導入したWebページは、高速で読み込まれ表示されます。また、Google検索結果での表示が強化されます。

The AMP Validatorを利用すると、WebページがAMPを適切に導入できているかどうかを確認できます。

AMPを導入した場合、The AMP Validatorでエラーが検出されないようにします。

クロスブラウザテスト

クロスブラウザテストとは、できるだけ多くのデバイスやブラウザでレイアウト崩れや機能の欠陥などがなく、誰もが同じようにWebページを利用できるようにするために行うテストのことです。

クロスブラウザテストのガイドラインを遵守します。

包括的なパフォーマンス

Lighthouseは、Webページのパフォーマンス・アクセシビリティ・PWA・SEO・その他のベストプラクティスを改善する方法について、個別のアドバイスを提供します。

Lighthouseの各スコアを90以上にします。

最後に

ご意見やお聞きしたいことがございましたら、TwitterのDMメールにご連絡ください。