「モダンなWeb」とは何を指すのか——速度・アクセシビリティ・運用性の3つで測る

「モダンなサイトにしたい」という依頼を受けたとき、私は見た目の話を一度脇に置いて、速度・アクセシビリティ・運用性の3つに言い換えるようにしています。この3つはどれも公式の基準や数値があり、作った後に測れるからです。流行のレイアウトは数年で変わりますが、「速く表示され、誰でも使え、担当者が更新し続けられる」という条件は変わりにくい。この記事では、その3つをどんな基準で測り、制作の会話にどう持ち込むかを書きます。

「モダン」は見た目ではなく、測れる条件に置き換える

打ち合わせで「モダン」という言葉が出たとき、相手の頭の中にあるのは、余白の広いレイアウトだったり、スクロールで動く演出だったり、ばらばらです。そのまま進めると、デザインカンプの段階で「思っていたのと違う」が起きやすい。

そこで私は、「モダン＝今の基準を満たしている」と定義し直して、次の3つの問いに分けています。

観点	問い	測り方の例
速度	スマホで開いたとき、待たせていないか	Core Web Vitals
アクセシビリティ	見えにくい・操作しにくい人も使えるか	WCAG 2.2
運用性	公開後、担当者が自分で更新を続けられるか	更新手順の数、依存している技術の寿命

見た目のトーンは、この3つを満たした上で選ぶ「味付け」として扱います。順番を逆にしないことが、後の手戻りを減らすコツだと感じています。

速度：Core Web Vitalsの3つの数値

速度の基準として、私はGoogleが公開しているCore Web Vitalsを使っています。指標は3つで、良好とされるしきい値は次の通りです。

指標	何を測るか	良好の目安
LCP（Largest Contentful Paint）	主要コンテンツが表示されるまでの時間	2.5秒以内
INP（Interaction to Next Paint）	操作してから画面が反応するまでの時間	200ミリ秒以下
CLS（Cumulative Layout Shift）	表示中にレイアウトがずれる量	0.1以下

同じページで、モバイルとデスクトップに分けて、ページ読み込みの75パーセンタイルで評価するのが推奨とされています。「速いときもある」ではなく「4分の3の訪問で基準内」という見方です。

検索順位との関係については、Googleのページエクスペリエンスのドキュメントに、Core Web Vitalsはランキングシステムで使われている一方、良いスコアが上位表示を保証するものではない、と書かれています。私はクライアントに対して「順位のためというより、待たされて離脱する人を減らすための基準」と説明しています。

アクセシビリティ：WCAG 2.2と、国内の法律の変化

アクセシビリティの基準は、W3CのWCAG（Web Content Accessibility Guidelines）です。2.0が2008年、2.1が2018年、2.2が2023年10月に公開され、2.2では「ターゲットサイズ（最小）」「フォーカスが隠れない」など9つの達成基準が加わっています。新しい版は古い版を含むように作られているので、現時点で基準にするなら2.2のAA、という選び方で迷いません。

日本国内では、改正障害者差別解消法が2024年4月1日に施行され、事業者にも合理的配慮の提供が義務となりました。Webサイトがそのまま義務の対象になるという単純な話ではありませんが、「アクセシビリティは余裕があればやる項目」という扱いは、少なくとも企業サイトでは通りにくくなっていると感じます。

私が設計の初期に確認しているのは、次の4点です。

• 文字と背景のコントラストが十分か
• キーボードだけで主要な操作が完了するか
• 画像に代替テキストを入れる運用が決まっているか
• 動く演出を止める手段があるか

全部を一度に満たそうとせず、まずこの4点を「仕様」として要件定義に書くところから始めています。

運用性：公開後に「更新できる」状態を残す

3つ目の運用性は、公式の数値がない分、見落とされやすい観点です。私は「担当者が、制作会社に頼まずに更新できる範囲はどこまでか」を公開前に言葉にしてもらうようにしています。お知らせの追加、画像の差し替え、ページの追加、それぞれ誰がどの画面でやるのか。

技術選定にも運用性の視点が要ります。ブラウザ対応の判断には、Googleが提供するBaselineという指標が使えます。Chrome・Edge・Firefox・Safariの主要ブラウザすべてで使えるようになった機能を「Newly available」、そこから30か月経ったものを「Widely available」と呼び分けていて、公開後に長く触らないサイトほど後者に寄せる、という判断がしやすくなりました。

もう1つ、公開から1年後に「この仕組みを直せる人がいるか」を自問しています。珍しいライブラリや独自の仕組みは、作るときは楽しくても、更新の担い手を限定してしまいます。

明日から試せる一手

今担当しているサイトのトップページを、スマホでPageSpeed Insightsにかけて、LCP・INP・CLSの3つの数値をメモしてください。次に、キーボードのTabキーだけでトップページから問い合わせ完了まで進めるか試します。最後に、「お知らせを1本追加する手順」を担当者に口頭で説明してもらってください。この3つの結果が、そのサイトの「モダンさ」の現在地です。見た目の議論は、その数字を並べた後で始めると噛み合いやすくなります。