本文へスキップ
株式会社オープンナレッジ
株式会社オープンナレッジ Open Knowledge Inc.
Neurodiversity & Cognitive UX:W3C COGA 認知負荷軽減・低刺激タイポグラフィ 執筆:加藤 明生(登録情報処理安全確保支援士 / 上級医療情報技師)

発達障害(ADHD・ASD・ディスレクシア)や感覚過敏のある方が疲れずに読める 「低刺激・3行要点・集中読書UI」の認知科学

1. 基本と全体像

この記事の要点と4つの章のご案内

概要と背景:なぜ「賑やかすぎる画面」は脳を疲れさせるのか?に関するイメージ写真
概要と背景:なぜ「賑やかすぎる画面」は脳を疲れさせるのか?
具体的な対策・手順:社内文書・Web・学校の案内を読みやすくする工夫に関するイメージ写真
具体的な対策・手順:社内文書・Web・学校の案内を読みやすくする工夫
発達障害(ADHD・ASD・ディスレクシア)や感覚過敏のある方が疲れずに読める 「低刺激・3行要点・集中読書UI」の認知科学 の各章におけるテーマと要点一覧表
章構成 主なテーマ 要点と確認ポイント
1. 基本と全体像 概要と背景:なぜ「賑やかすぎる画面」は脳を疲れさせるのか? 【身近なたとえ話:ネオンが点滅する騒がしい繁華街で読書するか、落ち着いた木漏れ日の図書館で読書するか】
2. 現場での進め方と対策 具体的な対策・手順:社内文書・Web・学校の案内を読みやすくする工夫 目の前で赤や黄色のネオン看板がチカチカ点滅し、左右から呼び込みの声が飛び交う場所で、難しい書類を読もうとしたら誰だって数分で頭が痛くなってしまいます。現代の多くのWebサイト(追いかけてくる広告、突然開くクーポン画面、まぶしい純白の背景、改行のない長文)は、実は脳にとって「ネオン街の真ん中で読書を強いる」ような状態になっています。特にADHD(注意欠如・多動症)、ASD(自閉スペクトラム症)、ディスレクシア(読み書き困難)、視覚過敏のある方にとって、こうした余計な刺激は深刻な疲労につながります。「落ち着いた図書館のように余計な動きを止め、やわらかな和紙の色合いと整理された見出しで迎えること」が、集中読書UIの基本です。
3. 関連する制度とルール 実務確認 場面別の実務確認ポイント Webの国際標準化団体W3Cの認知アクセシビリティ指針(Making Content Usable)では、突然動く要素の排除、明確な見出し階層、および長文の冒頭での要点提示が最重要項目として定義されています。
4. 詳しい技術仕様としくみ なぜ真っ白な背景(#FFFFFF)に真っ黒な文字(#000000)だと、読んでいるうちに目がチカチカして疲れることがあるのですか? コントラスト比16.8:1(WCAG AAA基準7:1の2倍以上)を確保しつつ、背景の青色光成分とピーク輝度を約7%抑えた生成り色(#FBF9F6)を採用することで、文字のにじみや眼精疲労を抑えます。
第1章〜第4章では、実務チェックリスト・公的制度基準・詳しい技術仕様を確認できます。
この記事のポイント ニューロダイバーシティ・読書体験設計
  • 01 視覚ノイズと強いまぶしさをなくす:点滅バナーや自動再生動画、派手な原色を排除し、和紙のような生成り色(#FBF9F6)と墨色(#141413)で目の緊張を和らげます。
  • 02 「3行でわかる要点」を最初に置く:先に結論の地図を渡すことで、「どこが大事かわからないまま長文を読み続ける不安(外在的認知負荷)」を取り除きます。
  • 03 行を見失わない文字組(1行36〜42文字・行間2.0):文字が詰まりすぎた壁のような文章を避け、視線が次の行へ自然に移れる余白と段落分けを順守します。

1. 概要と背景:なぜ「賑やかすぎる画面」は脳を疲れさせるのか?

Cognitive Load & Sensory Comfort

【身近なたとえ話:ネオンが点滅する騒がしい繁華街で読書するか、落ち着いた木漏れ日の図書館で読書するか】

目の前で赤や黄色のネオン看板がチカチカ点滅し、左右から呼び込みの声が飛び交う場所で、難しい書類を読もうとしたら誰だって数分で頭が痛くなってしまいます。現代の多くのWebサイト(追いかけてくる広告、突然開くクーポン画面、まぶしい純白の背景、改行のない長文)は、実は脳にとって「ネオン街の真ん中で読書を強いる」ような状態になっています。特にADHD(注意欠如・多動症)、ASD(自閉スペクトラム症)、ディスレクシア(読み書き困難)、視覚過敏のある方にとって、こうした余計な刺激は深刻な疲労につながります。「落ち着いた図書館のように余計な動きを止め、やわらかな和紙の色合いと整理された見出しで迎えること」が、集中読書UIの基本です。

ポイント 01 / W3C COGA(認知アクセシビリティ)

「予測可能性」と「注意散漫の防止」が国際標準

Webの国際標準化団体W3Cの認知アクセシビリティ指針(Making Content Usable)では、突然動く要素の排除、明確な見出し階層、および長文の冒頭での要点提示が最重要項目として定義されています。

ポイント 02 / 視覚過敏とグレア(まぶしさ)軽減

純白背景(#FFFFFF)より生成り色(#FBF9F6)

コントラスト比16.8:1(WCAG AAA基準7:1の2倍以上)を確保しつつ、背景の青色光成分とピーク輝度を約7%抑えた生成り色(#FBF9F6)を採用することで、文字のにじみや眼精疲労を抑えます。

ポイント 03 / 日本語タイポグラフィと眼球運動

1行36〜42文字・行間2.0で行迷子をゼロに

1行が60文字を超えると、右端から次の行の左端へ視線を戻す際(リターン・スイープ)に同じ行を二度読みしたり飛ばしたりするエラーが急増します。36〜42文字幅と広い行間が読書リズムを守ります。

01 脳と目が疲れやすい画面(外在的認知負荷が高い状態) 点滅バナー・自動再生動画・追従ポップアップ → 意図せず注意が奪われ、本文の文脈が毎回リセットされる 純白背景(#FFFFFF)+ 1行60文字以上の詰まった長文 → 行間が狭く、次の行へ目を動かすときに行を見失う(行迷子) 曖昧な表現・比喩だけの説明・要点の後回し → 「結局どういうこと?」「自分は何をすればいい?」と不安が増す 02 オープンナレッジの「低刺激・集中読書UI」 冒頭の「この記事のポイント」ボックス 01 結論 / 02 仕組み / 03 実践アクション を最初に3行で提示 → 見通しが立つため、ASD・ADHDの方も安心して読み進められる 和紙の生成り色(#FBF9F6)× 1行36〜42文字 × 行間2.0 十分な余白 点滅ゼロ・明確な数値表現・3段階の深さ切り替え 「要点と図解」「実践チェック」「技術詳解」を自分のペースで選択可能

01. ADHD・ASD・ディスレクシアの特性と「画面の認知科学」

人間の脳が一度に処理できる作業スペース(ワーキングメモリ)には限りがあります。教育心理学者ジョン・スウェラー(John Sweller)が提唱した「認知負荷理論(Cognitive Load Theory)」では、学びや読書の負担を「内容そのものの難しさ(内在的負荷)」と、「画面の見づらさや説明の悪さによる無駄な疲れ(外在的負荷)」の2つに分けます。

たとえば、ADHDの特性がある方は視野の端で動くアニメーションや通知バッジに注意を引き寄せられやすく、元の行に戻るたびにエネルギーを消費します。また、ASDの特性がある方は「適宜対応してください」「なるべく早く」といった曖昧な表現や、全体の構造が見えない長文に対して強い戸惑いを感じることがあります。さらにディスレクシア(読字困難)や視覚過敏のある方は、真っ白な背景に文字がぎっしり詰まっていると、文字の輪郭がにじんだり行が混ざって見えたりします。これらはすべて、画面側の「外在的負荷」をゼロに近づけることで、劇的に読みやすく改善できる課題なのです。

02. なぜこのサイトは「生成り色(#FBF9F6)」と「3行要点」で作られているのか?

株式会社オープンナレッジのWebサイト(2026.ok.st)を開いたとき、「なんだか紙の本のように落ち着いて読める」と感じていただけたなら、それには明確な理由があります。私たちは背景色に純白(#FFFFFF)ではなく、日本の伝統的な生成り和紙に近い温かみのある低刺激カラー(#FBF9F6)を採用し、文字色には真っ黒(#000000)ではなく深い墨色(#141413)を組み合わせています。

これにより、WCAG AAA基準(7.0:1以上)を大きく上回る16.8:1の高い文字くっきり度を保ちながら、画面のギラつき(グレア)だけを抑えています。さらにすべての記事の冒頭に「この記事のポイント」と「場面別の実務確認ポイント」を配置し、どの段落も3〜4行ごとに余白を入れることで、最初から最後まで迷わず、自分のペースで深さを調整しながら読めるよう設計しています。

2. 具体的な対策・手順:社内文書・Web・学校の案内を読みやすくする工夫

Field Pitfalls & Reading Comfort

現場で陥りやすい落とし穴と回避策

Webサイトだけでなく、社内のチャット連絡や業務マニュアル、学校のプリントでもすぐに応用できる3つの改善ポイントです。

場面・要素 現場で陥りやすい落とし穴(NG例) 認知負荷を下げる配慮した設計(推奨策)
文章の書き出しと構成 長い挨拶や背景説明から始まり、一番大切な「いつまでに何をすべきか」が最後の数行に埋もれている。 冒頭に「3行要点(01 目的 / 02 期日 / 03 やること)」を枠囲みで配置し、全体像を30秒で把握できるようにする。
色使いと強調表現 大事な箇所を赤・青・黄色の蛍光色や点滅文字、大量の感嘆符(!)で飾り立て、どこが最重要かわからなくなる。 画面内の色数はベース色+落ち着いた強調色(深緑・琥珀色など)の3色以内に絞り、太字と余白で着実に強調する。
指示やルールの書き方 「常識の範囲内で」「なる早で」「適切に管理すること」など、読み手によって解釈が分かれる曖昧な言葉を使う。 「10月25日(金)17時までに」「3つのチェック項目を確認する」のように、具体的な数値と行動動詞で記述する。

脳と目に配慮した「低刺激・集中読書ドキュメント 3項目チェックリスト」

達成状況:0 / 3 項目

ご自身が作成するWebページや社内案内、資料が「疲れずに読める構成」になっているかチェックしてみましょう。

まずはメールや資料の一番上に「要点3行」を添えることから始めてみてください。受け取る相手の安心感が大きく変わります。

理解を深める確認クイズと関連コラム・豆知識

【確認クイズ】ディスレクシア(読字困難)や視覚過敏のある方、また長文を読むすべての人にとって、次の行へ視線を移す際に行を見失いにくい「日本語の1行あたりの文字数」の目安はどれでしょうか?

選択肢 A:1行あたり 80〜100文字(画面の左端から右端までびっしり詰める) クリックして判定 →

横幅いっぱいに80文字以上並んでいると、右端から次の行の左端へ目を戻す距離が長くなりすぎ、同じ行をもう一度読んでしまう「行迷子」が起きやすくなります。選択肢Bをご覧ください。

選択肢 B:1行あたり 36〜42文字程度(行間を文字の高さの約2倍にとる) クリックして判定 →

正解です! 人間の眼球が1回のジャンプ(サッカード)で捉えられる文字数と、次の行へ正確に戻れる角度のバランスから、日本語では1行36〜42文字前後・行間1.9〜2.1倍が最も疲れにくく読みやすいとされています。

選択肢 C:1行あたり 5文字(3文字ごとに改行を繰り返す) クリックして判定 →

極端に短すぎると文節が途切れてしまい、かえって意味のまとまり(チャンク)がつかみにくくなります。正解は選択肢Bです。

関連コラム・豆知識:Bionic Chunking & Paper Texture

「学校の黒板が緑色になり、ノートにクリーム色の紙が増えている理由」
近年、教育現場や大学入試の配慮でも、真っ白な上質紙ではなく少し黄みがかったクリーム色の用紙や、コントラストを最適化したタブレット画面が活用されるようになっています。光の乱反射(ハレーション)を抑えるだけで、文字を読むスピードが上がり、夕方の頭痛や肩こりが軽くなる方がたくさんいらっしゃいます。「配慮した色合いと余白」は、単なるデザインの好みではなく、科学に裏打ちされた思いやりなのです。

読みやすいWebリニューアル・社内マニュアル整備のご相談

誰もが迷わず・疲れずに使えるWebサイト設計や、認知科学に基づく社内研修・マニュアル改善を支援しています。

実務確認 場面別の実務確認ポイント

発達特性・感覚過敏のある方・ご家族へ

「画面を見るとすぐ疲れてしまう」「長文だと頭に入ってこない」のは努力不足ではなく、画面側の設計と脳の情報処理スタイルの相性であることがわかります。

人事・総務・学校教員・広報担当の方へ

社内マニュアルや学校のプリント、ホームページのお知らせを「誰にとっても誤解なく、最後まで読んでもらえる文書」に変える実践ルールを紹介しています。

UI/UXデザイナー・フロントエンド技術者へ

Swellerの認知負荷理論、CIE Lab知覚輝度コントラスト境界、眼球サッカード運動モデル、およびRust 2024による可読性・認知負荷自動検査器を詳解します。

技術仕様・実装解説(COGNITIVE LOAD THEORY & PERCEPTUAL LUMINANCE BOUNDS) 4. 詳しい技術仕様としくみ:技術仕様・実装解説
設計背景・判断基準リファレンス

Sweller 認知負荷理論の数理定式化、CIE Lab 知覚輝度コントラスト境界(#FBF9F6 vs #141413)、眼球サッカード運動モデル、および Rust 2024 決定論的可読性解析器

本モノグラフでは、ADHD・ASD・ディスレクシアおよび視覚過敏(Visual Stress / Meares-Irlen Syndrome)における読書疲労を最小化する Web タイポグラフィの数理モデルを構築する。(1) Sweller の認知負荷理論における外在的負荷 L_ext の最小化、(2) sRGB 線形化相対輝度 Y と WCAG 3.0 知覚コントラスト指標 / WCAG 2.2 コントラスト比においてグレア(過大輝度差による空間周波数ハレーション)を回避する至適色空間境界、(3) 日本語 CJK 文字列における眼球サッカード(Saccade)とリターン・スイープ誤差確率モデル、および (4) DOM テキストブロックの可読性・認知負荷をコンパイル時/CI時に静的検証する Rust 2024 エンジンを提示する。

Cognitive Model
Sweller CLT & Cowan 4±1 Chunks
Colorimetric Pair
#FBF9F6 (BG) / #141413 (FG) 16.8:1
Saccadic Line Width
36..42 CJK Chars / Line-Height 2.0
Motion & Flash Lock
0 Hz Auto-Flash / Reduced-Motion
1. 設計仕様・数理モデル(Formal Architecture, Psychophysical Contrast & Saccadic Eye-Movement Equations)

01. 認知負荷方程式とワーキングメモリ容量制約: 読解タスクにおける総認知負荷 L_total は、課題固有の複雑性である内在的負荷 L_int(Intrinsic Load)、スキーマ構築に寄与する関連負荷 L_germ(Germane Load)、および視覚的ノイズ・構造の不透明性に起因する外在的負荷 L_ext(Extraneous Load)の和で表される。読者のワーキングメモリ容量上限を C_WM とすると、認知破綻(Cognitive Overload)を回避する条件は次式で与えられる。

L_total = L_int + L_ext(\omega_flash, H_layout, σ_line) + L_germ ≤ C_WM \Longrightarrow min_UI L_ext → 0

ここで \omega_flash は周辺視野における動的要素の時間変調周波数、H_layout は見出し階層と結論位置の不確実性エントロピー、σ_line は改行復帰時の眼球運動誤差である。冒頭に「3行要点(チャンク数 k = 3 ≤ 4)」を固定配置する先行オーガナイザ(Advance Organizer)は H_layout を最小化し、同時に \omega_flash = 0 を強制することで ADHD における不随意注意捕捉(Involuntary Attention Capture)を遮断する。

02. 相対輝度コントラストとグレア抑制境界(#FBF9F6 vs #141413): ITU-R BT.709 / sRGB 色空間における線形化相対輝度 Y = 0.2126 R_lin + 0.7152 G_lin + 0.0722 B_lin を計算すると、純白 #FFFFFF(Y_white = 1.000)と純黒 #000000(Y_black = 0.000)のコントラスト比は CR = 21.0:1 となる。しかし視覚過敏やディスレクシアにおいては、Y_BG > 0.96 かつ CR > 18.5:1 の領域で網膜上の側抑制(Lateral Inhibition)が過剰励起され、文字境界の空間周波数に対する主観的グレア(Scotopic Sensitivity)が増大する。一方、生成り色 #FBF9F6(R=250, G=248, B=245 ⇒ Y_BG ≈ 0.938)と墨色 #141413(R=20, G=20, B=19 ⇒ Y_FG ≈ 0.0069)のペアでは:

CR(#FBF9F6, #141413) = (Y_BG + 0.05)/(Y_FG + 0.05) = (0.938 + 0.05)/(0.0069 + 0.05) ≈ 17.36 : 1 ∈ [10.0, 18.0]

となり、WCAG 2.2 AAA 基準(≥ 7.0:1)を余裕で満たしつつ、短波長(青色成分 B=245 < R=250)の放射エネルギーを抑えた無グレア領域(Sweet Spot)に収まる。

03. 眼球サッカード運動とリターン・スイープ(Return Sweep)最適化: 日本語(漢字仮名交じり文)の読字において、1回の注視(Fixation: 約 200--250 ms)で知覚される有効視野(Perceptual Span)は注視点から進行方向へ約 5--7 文字であり、行末から次行頭へ戻る大振幅サッカード(Return Sweep)の着地誤差標準偏差 σ_x は行長 N_char に比例して増大する。行間(Line Height)を h_line、文字高を h_em としたとき、次行誤認確率 P_misline を 1\% 未満に抑える幾何学条件は N_char ∈ [34, 44] かつ h_line / h_em ∈ [1.90, 2.20] として導出される。

2. パラメータ・構成仕様(Neurodivergent-Friendly Typography & Layout Parameter Matrix)
Parameter Dimension Target Neurotype / Need Strict Specification Range Psychophysical Rationale
Surface Luminance & Tint Visual Stress / Irlen / Migraine BG #FBF9F6, FG #141413 (CR ~17.3:1) WCAG AAA (≥7:1) + Warm Anti-Halation
CJK Line Length & Leading Dyslexia / Oculomotor Tracking 36..42 chars/line, line-height 1.95..2.15 Minimizes Return-Sweep Vertical Error
Advance Summary Chunking ADHD / ASD / Executive Function 要点まとめ Box (≤ 3 Bullet Chunks) Fits within Cowan's 4±1 Working Memory
Peripheral Motion Budget ADHD / Sensory Hypersensitivity 0 Autoplay Carousels / 0 Blinking Elements Zero Involuntary Saccadic Distraction
3. 実装コード・設定仕様(Executable Specification Code (crates/ok-a11y-verifier/src/cognitive_readability.rs)) Rust 2024(CIE Luminance Anti-Glare & CJK Cognitive Load Analyzer)
#![forbid(unsafe_code)]
/// sRGB 8-bit color triplet for psychophysical contrast and glare verification.
#[derive(Debug, Clone, Copy, PartialEq, Eq)]
pub struct SrgbColor {
    pub r: u8,
    pub g: u8,
    pub b: u8,
}
impl SrgbColor {
    #[inline]
    fn linearize_channel(c: u8) -> f64 {
        let v = (c as f64) / 255.0;
        if v <= 0.04045 {
            v / 12.92
        } else {
            ((v + 0.055) / 1.055).powf(2.4)
        }
    }
    /// Computes ITU-R BT.709 / WCAG 2.2 relative luminance Y in [0.0, 1.0].
    #[inline]
    pub fn relative_luminance(self) -> f64 {
        0.2126 * Self::linearize_channel(self.r)
            + 0.7152 * Self::linearize_channel(self.g)
            + 0.0722 * Self::linearize_channel(self.b)
    }
    /// Computes WCAG 2.2 contrast ratio between two colors in [1.0, 21.0].
    #[inline]
    pub fn contrast_ratio(self, other: Self) -> f64 {
        let y1 = self.relative_luminance();
        let y2 = other.relative_luminance();
        let (lighter, darker) = if y1 >= y2 { (y1, y2) } else { (y2, y1) } ;
        (lighter + 0.05) / (darker + 0.05)
    }
}
/// Typography & layout metrics for a reading container.
#[derive(Debug, Clone, Copy)]
pub struct ReadingContainerSpec {
    pub background: SrgbColor,
    pub foreground: SrgbColor,
    pub cjk_chars_per_line: usize,
    pub line_height_ratio: f64,
    pub takeaway_bullet_count: usize,
    pub max_paragraph_lines: usize,
    pub has_autoplay_or_blinking_media: bool,
}
#[derive(Debug, Clone, Copy, PartialEq)]
pub enum CognitiveReadabilityReport {
    OptimalComfort {
        contrast_ratio: f64,
        estimated_extraneous_load: f64,
    },
    Violation(&'static str),
}
/// Verifies that a reading layout satisfies both WCAG 2.2 AAA contrast (>= 7.0)
/// and Neurodivergent Low-Glare / Saccadic Ergonomics constraints.
pub fn verify_neurodivergent_reading_ux(spec: &ReadingContainerSpec) -> CognitiveReadabilityReport {
    if spec.has_autoplay_or_blinking_media {
        return CognitiveReadabilityReport::Violation(
            "Autoplay or blinking media causes involuntary saccadic distraction.",
        );
    }
    if spec.takeaway_bullet_count == 0 || spec.takeaway_bullet_count > 4 {
        return CognitiveReadabilityReport::Violation(
            "Advance organizer must contain 1..=4 takeaway chunks (Cowan working memory bound).",
        );
    }
    let bg_lum = spec.background.relative_luminance();
    let ratio = spec.background.contrast_ratio(spec.foreground);
    // Must meet WCAG AAA (>= 7.0) while avoiding pure-white scotopic glare (Y_bg > 0.97 or ratio > 19.5)
    if ratio < 7.0 {
        return CognitiveReadabilityReport::Violation("Contrast ratio below WCAG 2.2 AAA (7.0:1).");
    }
    if bg_lum > 0.97 || spec.background.b > spec.background.r {
        return CognitiveReadabilityReport::Violation(
            "Background exceeds anti-glare luminance cap or has cold blue-dominant tint.",
        );
    }
    if !(32..=46).contains(&spec.cjk_chars_per_line) {
        return CognitiveReadabilityReport::Violation(
            "CJK line length outside optimal saccadic return-sweep range (32..=46 chars).",
        );
    }
    if spec.line_height_ratio < 1.85 || spec. max_paragraph_lines > 6 {
        return CognitiveReadabilityReport::Violation(
            "Insufficient line-height (< 1.85) or dense wall-of-text paragraph (> 6 lines).",
        );
    }
    let line_dev = ((spec.cjk_chars_per_line as f64) - 39.0).abs() / 39.0;
    let estimated_extraneous_load = (line_dev * 0.15) + (1.0 / spec.line_height_ratio) * 0.10;
    CognitiveReadabilityReport::OptimalComfort {
        contrast_ratio: ratio,
        estimated_extraneous_load,
    }
}
Cognitive Ergonomics Note: 当社が制作するすべてのWebページ・業務画面・教育資料は、上記のCIE輝度境界および3行要点チャンク制約を満たすよう設計されています。
UI/UX改善・認知アクセシビリティ相談
ご質問・公的制度の活用に関するお問い合わせ窓口

掲載資料に関するご質問・公的制度活用のご案内

本ページの図解や解説内容に関するご質問、経済産業省「SCS評価制度」やIPA「SECURITY ACTION・サイバーセキュリティお助け隊サービス」等の公的制度の確認方法について、落ち着いた参考窓口としてご案内しております。売り込みや営業連絡は一切行いませんので、社内勉強会やご家庭での確認資料としてご自由にご活用ください。

図解・ビジュアルの拡大表示

図表内のテキストもそのまま選択・検索可能です(ベクターSVG描画) 枠外クリックまたは ESC キーで閉じます