「AIで作った」は言い訳にならない――2026年に見直すアクセシビリティとレスポンシブの基本原則

2026年8月10日

「AIでサイトを作れば速く仕上がる」——その裏で、Webの使いやすさ自体は静かに後退している。WebAIMのMillion調査の2026年版によれば、上位100万件のホームページの95.9%に検出可能なアクセシビリティ上の欠陥があり、1ページあたりの平均エラー数は56.1件と前年から10%以上増えた。低コントラストのテキストは83.9%のページで見つかっている。今日は生成AIやサイトビルダーで作る前提のWebデザインだからこそ押さえておきたい、アクセシビリティとレスポンシブ設計の基本原則を整理する。

なぜ今、基本に戻る必要があるのか

WebAIMは今回の悪化について、サードパーティ製フレームワークへの依存拡大と「バイブコーディング」と呼ばれる自動・AI支援のコーディング習慣の広がりを一因として挙げている。ホームページはより大きく複雑になり、それに比例してARIA属性の誤用や構造上の欠陥も増えているという。AIツールは見た目のよいコードを素早く生成できるが、コントラスト比やフォーカス順序、キーボード操作までは保証してくれない。作る速度が上がった分だけ、確認する工程を意識的に組み込む必要がある。

主な欠陥	影響を受けるページの割合
低コントラストのテキスト	83.9%
代替テキストの欠落	約55%
フォームのラベル欠落	約48%

詳しい内訳と各項目の解説はForasoftの「Accessible Design in 2026」が7つの観点でまとめている。ポイントは「デザインシステムの中にアクセシビリティを一度だけ埋め込む」という考え方だ。配色・フォーカス・タイポグラフィ・余白をトークン化しておけば、新しい画面を作るたびにゼロから確認し直す必要がなくなる。QA工程で見つけて直すコストは、設計段階で仕込むコストの何倍にもなるという指摘も紹介されている。

レスポンシブの土台を更新する——コンテナクエリと流体タイポグラフィ

ビューポート基準の@mediaだけに頼るレスポンシブ設計は、もう十分ではない。コンテナクエリは要素を「画面幅」ではなく「自分が置かれた親要素の幅」に応じて変化させられるため、同じカードコンポーネントをサイドバーでもメインカラムでも破綻なく再利用できる。2026年時点のモダンCSSガイドでは、コンテナクエリ・:has()・subgrid・カスケードレイヤーはすでに主要ブラウザで安定して使える「Baseline」機能として、ためらわず採用してよいと位置づけられている。

手法	基準にするもの	向いている場面
メディアクエリ（`@media`）	ビューポート全体の幅	ページ全体のレイアウト・ナビゲーションの切り替え
コンテナクエリ（`@container`）	親コンテナの幅	カード・サイドバーなど再利用するコンポーネント
流体単位（`clamp()`・`vw`）	連続的な画面幅の変化	見出しサイズや余白を段階的でなく滑らかに変化させたいとき

見出しのサイズをブレークポイントごとに書き分けるのではなく、clamp()で最小値・可変値・最大値を一度に指定してしまう方法も定着してきた。

h1 {
  font-size: clamp(1.5rem, 1rem + 3vw, 3rem);
}
.card {
  container-type: inline-size;
}
@container (min-width: 400px) {
  .card { display: flex; }
}

実務での使い分けは、ページ全体の骨格はメディアクエリ、コンポーネント内部の見た目はコンテナクエリ、という組み合わせが定番になりつつある。

レスポンシブWebデザインのレイアウトを示すイメージ — Photo: luc legay / CC BY-SA 2.0, Openverse経由

モーションの原則——prefers-reduced-motionを前提にする

リッチなスクロール演出やパララックスは目を引く一方、めまいや吐き気を引き起こす人が一定数いる。前庭障害を持つ成人は年間で20人に1人程度とされ、CSSのprefers-reduced-motionはまさにこの層のために用意された仕組みだ。2026年時点で共有されている実務上の目安は次の通り。

300ms を超えるアニメーションには、クロスフェードや瞬時切り替えなど「動きを減らした版」を必ず用意する
自動再生の動画はデフォルトで停止、または2タップ以内で一時停止できるようにする（WCAG 2.2.2）
ループするアニメーションには停止ボタンを付ける
パララックスはprefers-reduced-motion: reduce時に無効化する
1秒に3回を超える点滅は行わない（光過敏性発作のリスク、WCAG 2.3.1）

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

装飾的なモーションは「デフォルトで無効、ユーザーが好むなら有効」という順序で設計するのが安全だ。2026年のWebデザイントレンドを検証した記事でも、装飾的な動きはCSSのスクロール駆動アニメーションを使い、prefers-reduced-motionでラップした「プログレッシブ・エンハンスメント」として扱うべきだと指摘されている。

測るためのツール——AIが手伝う配色・コントラストチェック

基準を知っているだけでは実装のたびに見落としが出る。デザインの段階でチェックできるツールを組み込んでおくと確認漏れが減る。

ツール	使う場面	特徴
Stark	Figma / Sketch でのデザイン中	コントラスト・フォーカス順序・ランドマーク・タッチターゲットをAIが自動でチェックし、代替色まで提案
WAVE	公開後のページ検証	WebAIM Million調査の元になっている無料の可視化ツール。エラー箇所をページ上に直接表示
axe DevTools	実装中・CI組み込み	ブラウザ拡張とテスト自動化の両方に対応、開発フローに組み込みやすい

いずれも「作った後にまとめて直す」のではなく、デザイン段階・実装段階それぞれで小さく確認する使い方が前提になっている。AIでレイアウトやコードを速く生成できるようになった今、チェックを後回しにしない仕組みの方が、チェックリストの精度そのものより効いてくる。

まとめ

コンテナクエリやclamp()による流体タイポグラフィ、prefers-reduced-motionを前提にしたモーション設計、そしてデザインシステムに一度だけ埋め込むアクセシビリティ基準——どれも目新しい技術ではないが、AIが生成するコードの量が増えるほど、こうした「土台」を人間が意識的に守る役割は重くなる。派手な演出の前に、まずページが誰にとっても開けて読めるかを確認したい。

主な情報源

各ツール・サービスは提供元の規約に従ってご利用ください。情報は各情報源の公開時点のものです。収集・要約はAI、公開判断は人。