ADHDの方にも使いやすいWebサイトとは｜集中を妨げない情報設計

申込みフォームを入力している途中で広告が現れ、閉じたらどこまで進めたかわからなくなった。説明を読んでいる間に画面が切り替わり、入力内容も消えてしまった——。Webサイト上の割込みや複雑な手順は、利用者の集中を途切れさせ、目的の達成を難しくします。

ADHDのある人にとって、こうした中断から元の作業へ戻ることが大きな負担になる場合があります。大切なのは、刺激をすべてなくすことではありません。目的と関係のない刺激や割込みを減らし、途中で迷っても再開しやすくすることです。

この記事では、ADHDの方にも使いやすいWebサイトを作るための情報設計、動き、フォームの工夫を具体的に解説します。

ADHD（注意欠如・多動症）とは

ADHDは、不注意、多動性、衝動性を主な特徴とする神経発達症の一つです。国立精神・神経医療研究センターは、成人では作業のミス、計画的に順序立てて行うことの難しさ、落ち着かなさなどとして現れる場合があると説明しています。

Webサイトの利用では、たとえば次のような負担につながることがあります。

• 目的と関係のない動きや通知へ注意が移る
• 長い説明の途中で、最初に読んだ内容を見失う
• 手順が多いと、現在地や次の操作がわからなくなる
• 複数の選択肢から優先順位を決めにくい
• 中断されたあと、作業をどこから再開するか迷う
• 確認する前にボタンを押し、入力ミスに後から気づく

困難の現れ方や程度には個人差があります。ADHDのある人が常に集中できないわけでも、動きのある表示をすべて苦手とするわけでもありません。Webサイト側では、利用者が注意を向ける場所と操作の流れを把握しやすくし、不要な中断を避けます。

ADHDの人がWebで感じやすい負担

場面	起こり得ること
動画や音声が自動再生される	本来読んでいた内容から注意がそれる
バナーやスライダーが動き続ける	視線が繰り返し引きつけられる
ポップアップや通知が何度も現れる	作業が中断され、元の位置を見失う
ボタンや情報が同じ強さで並ぶ	何を優先すべきか判断しにくい
ページごとにメニューや用語が変わる	操作方法を覚え直す負担が生じる
長いフォームに現在地の表示がない	あと何項目あるのかわからず、離脱しやすい
入力エラーで内容がすべて消える	最初からやり直す必要があり、作業を続けにくい
短い時間制限や自動ログアウトがある	読む・確認する前に操作を打ち切られる

派手なデザインだけが問題なのではありません。見た目が静かでも、情報の優先順位や操作手順がわかりにくければ、大きな負担になります。

情報の優先順位を明確にする

利用者が「このページで何ができるか」「次に何をすればよいか」を短時間で判断できるようにします。

1. ページの目的を最初に示す

ページタイトルと冒頭で、内容と利用者ができることを簡潔に伝えます。長い背景説明のあとに申込み条件や期限を置かず、重要事項を先に示します。

2. 主な操作を絞る

同じ画面に目立つボタンがいくつもあると、判断の負担が増えます。主要な操作を一つ決め、補助的な操作とは色、位置、文言で区別します。ただし、重要な情報を隠し、契約や購入へ誘導するような設計は避けます。

3. 情報を小さなまとまりに分ける

長文を見出し、短い段落、箇条書きに分けます。詳細情報は必要なときに開けるようにしつつ、料金や条件など意思決定に必要な情報は最初から確認できるようにします。

4. ナビゲーションと用語を統一する

同じ機能を「予約」「申込み」「エントリー」のようにページごとに言い換えず、同じ名称と位置で示します。見慣れた操作方法を使い、独自のジェスチャーやアイコンだけに頼らないようにします。

5. 現在地と次の手順を示す

複数ページにわたる手続きでは、「全4ステップの2：連絡先入力」のように現在地を表示します。開始前に必要な書類や所要時間を案内すると、途中で探し物をして集中が切れるのを減らせます。

たとえば、申込みページは次のように見直せます。

改善前： 長い説明、広告、三つの目立つボタンの下に申込みフォームがあり、全体の手順数は表示されない
改善後： 冒頭に期限と必要書類を示し、「申込みを始める」を主な操作に絞り、開始後は現在のステップと残りの手順を表示する

自動再生・アニメーションを利用者が制御できるようにする

動きは、変化や操作結果を伝えるために役立つこともあります。問題になりやすいのは、目的と関係なく動き続け、利用者が止められない表示です。

WCAG 2.2の達成基準2.2.2「一時停止、停止、非表示」（レベルA）では、ほかの内容と並行して表示される、次のようなコンテンツに利用者が制御できる仕組みを求めています。

• 自動で始まり、5秒を超えて動く・点滅する・スクロールする情報
• 自動で更新される情報

本質的に必要な動きなどを除き、利用者が一時停止・停止・非表示にできるようにします。カルーセルや広告が複数ある場合は、一つずつ止めさせるのではなく、ページ内の動きをまとめて止められる方法も検討します。

実装では次の点を確認します。

• 動画や音声は、原則として利用者の操作で再生を始める
• 自動で切り替わるスライダーには停止ボタンを用意する
• アニメーションGIFや背景動画も停止対象に含める
• OSの「視差効果を減らす」「動きを減らす」設定を尊重する
• 動きを止めても、情報や操作が失われないようにする
• 読み込み中など必要な動きは、状態を伝えつつ過度に目立たせない

操作をきっかけに起こるアニメーションについても、機能上必須でなければ無効化できる仕組みを用意することが、WCAG 2.2の達成基準2.3.3「インタラクションによるアニメーション」（レベルAAA）で示されています。

ポップアップと通知で作業を中断しない

ページを開いた直後の会員登録案内、画面を覆う広告、繰り返し表示されるチャットなどは、利用者が始めた作業を中断します。

• 緊急性のない案内を、操作中に割り込ませない
• 閉じるボタンを見つけやすくし、キーボードでも操作できるようにする
• 一度閉じた案内を同じ訪問中に何度も表示しない
• 通知は必要なもに絞り、まとめて確認できるようにする
• 画面全体を覆わなくても伝えられる案内は、ページ内へ配置する
• 重要な警告と広告を、同じ見た目で混在させない

ポップアップを閉じたあとに、読んでいた位置や入力欄へ戻れることも重要です。単に閉じられるだけでなく、中断前の作業を再開できるかまで確認します。

フォームは中断・ミスから戻りやすくする

注意がそれたときにも、作業をやり直さず再開できる設計にします。

入力内容を失わせない

エラーや画面遷移で、それまでの入力が消えないようにします。長い手続きでは途中保存や再開機能も検討します。セッション切れが近い場合は事前に知らせ、可能なら延長できるようにします。

一度に求める情報を減らす

サービス提供に必要のない項目を削り、関連する項目ごとに分けます。複数ステップにする場合は、戻って修正しても入力内容を保持します。

エラーを具体的に伝える

「入力に誤りがあります」だけではなく、「電話番号は半角数字で入力してください」のように、問題のある項目と修正方法を示します。

送信前に確認・修正できるようにする

購入、予約、契約など重要な操作では、内容を確認してから確定できるようにします。確定後も、可能な範囲で取消しや修正方法を案内します。

時間制限を避ける、または調整できるようにする

セキュリティなどの理由で時間制限が必要な場合を除き、利用者が解除・延長できるようにします。残り時間を知らせるだけでなく、入力内容を保ったまま延長できることが大切です。

動きを抑える補助機能の位置づけ

閲覧者側でアニメーションを一時停止したり、動画を無効化したりできれば、刺激を減らして読み進めやすくなる場合があります。ただし、補助機能で止められるのは、サイト上の問題の一部です。

次のような問題は、サイト本体の設計を見直す必要があります。

• 情報の優先順位がわからない
• 操作手順が長く、現在地が示されない
• ポップアップが何度も作業を中断する
• 入力エラーで内容が消える
• 時間制限を延長できない
• ボタン名やエラーメッセージが曖昧

まず不要な刺激と操作を減らし、短く明確な導線を作ります。そのうえで、利用者自身が動きや表示を調整できる選択肢を加えます。

公開前に確認したい5つのポイント

1. ページの目的と主な操作がすぐわかるか

タイトル、冒頭、ボタンを見て、このページで何ができ、最初に何をすればよいか判断できるか確認します。

2. 読んでいる間も不要な要素が動き続けていないか

動画、スライダー、広告、自動更新を確認し、必要のない自動再生をなくすか、停止・非表示の操作を用意します。

3. 割込みを閉じたあとに作業へ戻れるか

ポップアップや通知を閉じ、元のスクロール位置、フォーカス、入力内容が保たれているか確認します。

4. 手続きの現在地と残りがわかるか

申込みや購入を最初から最後まで試し、必要な情報、現在のステップ、次の操作が各画面で明確か確認します。

5. ミスや時間切れから回復できるか

わざと入力エラーやセッション切れを起こし、内容を失わず修正・延長・再開できるか確認します。

可能であれば、実際にADHDのある人にも主要な操作を試してもらいましょう。刺激の感じ方や集中しやすい方法には個人差があるため、当事者による確認は有効です。

まとめ：集中を求めるのではなく、再開しやすくする

ADHDの方にも使いやすいWebサイトを作るポイントは、次の3点です。

• 目的と情報の優先順位を明確にし、操作手順を短くする
• 自動再生や割込みを減らし、利用者が動きを止められるようにする
• 入力内容と現在地を保ち、中断やミスから再開しやすくする

利用者に集中を求めるのではなく、集中が途切れても迷わず戻れる設計を目指しましょう。これはADHDのある人だけでなく、移動中にスマートフォンを使う人や、仕事の合間に手続きをする人にも役立ちます。

情報設計を整えたうえで、動きを選べるように

使いやすさの土台は、情報の優先順位、短い操作手順、割込みや時間制限の見直しなど、サイト本体の設計です。そのうえで、閲覧者が動きや表示を自分に合わせて調整できる手段を加えると、配慮の幅を広げられます。

MyLikingは、サイトに1行のタグを追加することで、アニメーションの一時停止・動画の無効化・文字や配色の調整など約20の補助機能を導入できるツールです（月1,650円／年19,800円・税込）。本格改修の前に取り組める、低コストな補助策の一つとして活用できます。

※ MyLikingの導入だけで、障害者差別解消法への対応や、WCAG・JISへの適合が保証されるものではありません。情報の優先順位、ポップアップ、フォームの手順、入力内容の保持、時間制限など、サイト本体の問題を自動修正するものでもありません。

※ サイトや外部サービスの実装によっては、すべての動画・アニメーションを停止できるとは限りません。導入時は、実際のページと利用環境で動作を確認してください。

本格的な見直しの代わりではなく、対応範囲を確認したうえでご活用ください。まずは2週間、無料でお試しいただけます。