動画・音声

1. 知覚

1.1 色

避ける色の組み合わせ

必須 次の組み合わせで情報を区別しない。右3列は、左の2色がP型・D型の色覚でどう見えるかを示すシミュレーションである。〔WCAG 1.4.1、川崎市カラーUDガイドライン、国交省バリアフリー整備ガイドライン、伝わるデザイン〕

シミュレーションはMachadoら（2009）の2色覚モデル（強度）で算出した。実際の見え方には個人差がある。

高齢者（白内障）で見分けにくい組み合わせ

文字色と背景色の組み合わせ

必須 明度差のない文字と背景、混同しやすい色同士の文字と背景を使わない。色背景の上に色文字を重ねず、明るい背景には暗い文字、暗い背景には明るい文字を置く。〔WCAG 1.4.3、川崎市カラーUDガイドライン〕

色の選び方

• 赤は濃い赤ではなく、朱色やオレンジ寄りの赤を使う。〔川崎市カラーUDガイドライン〕
• 赤や茶と並べる緑は、青みの強い緑にする。〔川崎市カラーUDガイドライン〕
• 彩度の低いパステル調の色同士を組み合わせない。彩度の高い色同士か、彩度の高い色と低い色を組み合わせる。〔川崎市カラーUDガイドライン〕
• 暖色同士・寒色同士を並べず、暖色と寒色を組み合わせる。〔伝わるデザイン〕
• 3色を使うときは、明るい色・中間の色・暗い色を1つずつ選んで明度差をつける。
• 色数を絞る。多くの色を使うと、どこが重要かが誰にも伝わらなくなる。〔川崎市カラーUDガイドライン〕
• 赤い面を他の色と接するときは、境目に細い白線を入れる。〔国交省バリアフリー整備ガイドライン〕
• 色で区別させたいものは、面積を広く、線を太くする。〔川崎市カラーUDガイドライン〕
• 色名で指示される可能性がある場合は、色名を併記する（例：「ピンク（A票）」）。〔川崎市カラーUDガイドライン〕

色だけに頼らない

必須 色は情報を補強する手段として使う。色が見分けられない人や白黒コピーでも伝わるよう、次のいずれかを併用する。〔川崎市カラーUDガイドライン、WCAG 1.4.1〕

• 形（○△□、ピクトグラム、アイコン）
• 位置（凡例をデータの横に置く、並び順を固定する）
• 線種（実線・破線・点線）と線の太さ
• 塗りのパターン（斜線・ドット・ハッチング）
• 文字（ラベル、「必須」「エラー」などの言葉、太字、下線）
• 境界線（隣り合う面の間の線）

推奨カラーパレット

CUD推奨配色セット ver.4（カラーユニバーサルデザイン機構）は、一般色覚・P型・D型・弱視・白内障の人による評価を経て選ばれた20色である。20色のどの組み合わせでもよいわけではない。組み合わせるときは明度差をつけ、シミュレーションで確認する。

CUD推奨配色セット：アクセントカラー（サイン・グラフ・文字色向け）

CUD推奨配色セット：ベースカラー（地図・背景など広い面積向け）

CUD推奨配色セット：無彩色

印刷用のCMYK値と塗料用のマンセル値は、CUDOのガイドブックに記載されている。

Okabe–Ito パレット（国際的に使われる8色）

必須 どちらのパレットも、白背景の文字色に使うと4.5:1に届かない色が多い。文字色に使う場合は、個別にコントラスト比を確認する。〔WCAG 1.4.3〕

確認方法

• グレースケールに変換し、区別すべき要素が明度差だけで区別できるか確認する。
• 色覚シミュレーション（P型・D型）で確認する。ブラウザの開発者ツール（ChromeのRendering › Emulate vision deficiencies）、Adobe製品の校正設定（P型・D型）、スマートフォンの色覚シミュレーションアプリを使う。

動画・音声固有のルール

• 字幕の話者を色で区別する場合は、主な話者を黄、2人目を緑、3人目をシアン、それ以降の話者と複数人の同時発話を白にする。4人目にも色が必要な場合はマゼンタを使う。〔字幕付きCMハンドブック〕

• 話者が1人でナレーションもない場合は、白だけでよい。ナレーションは白にする。〔放送大学 字幕制作仕様書、BBC Subtitle Guidelines〕
• 話者を色だけで区別しない。初めて話すときに（話者名）を表示する。〔字幕付きCMハンドブック〕
• 図解やインフォグラフィックの動画では、色の区別に加えてラベルや形を使う。表示時間が短いため、静止画より色の判別が難しい。〔川崎市カラーUDガイドライン〕

1.2 コントラスト

コントラスト比はWCAGの相対輝度に基づく値で、1:1（同じ色）から21:1（白と黒）までの値をとる。Webの基準であるが、他の媒体でも判断の目安として使える。

• 必須 写真やグラデーションの上に文字を置くときは、文字の背後に単色の帯や縁取りを入れ、背景の最も明るい部分でも基準を満たす。〔WCAG 1.4.3〕
• 長文の本文は、純黒（#000）より濃いグレー（#1A1A1A〜#333）、背景は純白より淡いグレーやクリームにすると、まぶしさが減る。〔伝わるデザイン〕
• コントラスト比は、WebAIM Contrast Checker、Colour Contrast Analyser（TPGi）などのツールで確認する。

動画・音声固有のルール

• 字幕の背景には、半透明の黒の帯（座布団）を敷く。〔字幕付きCMハンドブック〕

  ✕ 映像に直接文字を載せる

  明るい背景の上では、白い字幕が読めない。誰が話しているかもわからない。

  ◯ 黒い帯を敷き、話者名と話者色を付ける

  背景が変わっても読める。話者名と色で、誰の発言かわかる。

• 背景の映像が変化しても読めるよう、テロップには帯・縁取り・影のいずれかを付ける。
• 字幕の色は背景の映像に合わせて決める。〔PEPNet-Japan〕

1.3 文字

字幕の分量と表示時間

• 話す速さに字幕が追いつかない場合は、意味を保って要約する。ただし、話者の口の動きが映っている発話は字幕にする。〔字幕付きCMハンドブック〕
• 改行は、文字数のバランスより意味のまとまりを優先する。〔おこ助Pro〕
• 1つの文節が次の字幕にまたがる場合は、行末に「→」を付ける。〔字幕付きCMハンドブック〕

字幕の表記

• 読点は少なくし、区切りは半角スペースで示す。〔字幕付きCMハンドブック、PEPNet-Japan〕
• 難読漢字や固有名詞にはルビを付ける。〔字幕付きCMハンドブック〕
• 表記のゆれを防ぐため、用字用語の基準（記者ハンドブック、NHK漢字表記辞典など）を決める。〔字幕付きCMハンドブック〕

書体

書体と組版の共通ルール

• 小さな文字や遠くから読む文字は、ゴシック体（サンセリフ体）にする。明朝体の細い横線は、視力の低い人には見えにくい。〔伝わるデザイン〕
• UDフォント（BIZ UDゴシック、BIZ UD明朝、イワタUDゴシック、モリサワUD新ゴなど）は、濁点・半濁点や似た字形が判別しやすい。BIZ UDゴシック・BIZ UD明朝は無料で使える。〔伝わるデザイン〕
• 過度な長体（縦長の変形）や極細のウェイトを使わない。細いウェイトを使う場合は、文字を大きくする。〔国交省バリアフリー整備ガイドライン、Apple HIG〕
• 欧文の全大文字・長いイタリック・装飾書体を本文に使わない。〔Microsoft〕
• 行送りは文字サイズの1.5倍以上にする。〔WCAG 1.4.8（AAA）〕 紙やスライドでは、行間を文字サイズの約0.7倍（行送り約1.7倍）にすると読みやすい。〔伝わるデザイン〕
• 左揃えを基本にする。センタリングを混在させず、揃え方を統一する。〔伝わるデザイン〕
• 両端揃えで字間が不均一になる場合は、左揃えにする。〔WCAG 1.4.8（AAA）〕
• 1行の長さは全角40字以内にする。〔WCAG 1.4.8（AAA）〕 1行が10字以下になると読みにくい。〔伝わるデザイン〕
• 強調は太字を使い、下線はリンクや重要箇所に限る。赤文字だけで強調しない。〔川崎市カラーUDガイドライン〕

• テロップの文字は、表示される最も小さい画面（スマートフォン）で読める大きさにする。

1.4 図・アイコン・画像

• 必須 映像だけで伝わる重要な情報（画面上の文字、図、動作）には、音声解説を付ける。〔WCAG 1.2.5（AA）〕
• 音声解説は、本編の音声の自然な間に挿入する。〔Apple HIG〕
• ナレーションで、画面に表示した文字や図の要点を読み上げる。音声解説を別に作らなくても済むことが多い。
• 画面上の文字（テロップ・スライド）は、読み終わるのに十分な時間表示する。

1.5 レイアウト

• 字幕の基本の位置は、画面下の中央にする。〔字幕付きCMハンドブック〕
• 字幕を、画面内のテロップや重要な映像と重ねない。重なる場合は位置を移す。〔PEPNet-Japan、字幕付きCMハンドブック〕

  ✕ テロップと字幕が重なる

  テロップも字幕も読めない。

  ◯ 字幕を画面の上に移す

  テロップと字幕の両方が読める。

• 手話通訳の映像は、手の動きと表情がわかる大きさで表示し、字幕と重ねない。
• SNS向けの縦型動画では、アプリのボタンやキャプション欄が重なる範囲に文字を置かない。

  ✕ アプリのボタンや説明欄に重なる

  重要な文字が、アプリの表示に隠れる。

  ◯ 重ならない範囲に置く

  点線の範囲に置けば、アプリの表示に隠れない。

1.6 動き・点滅

• 必須 1秒間に3回を超える閃光を含めない。〔WCAG 2.3.1（A）〕
• カメラのフラッシュ、雷、炎、爆発の映像は、点滅の基準を超えやすい。編集で確認する。〔民放連・NHK ガイドライン〕
• HDR映像は明るさの変化が大きくなるため、特に注意する。〔民放連・NHK ガイドライン〕
• 速いカメラの動き、激しい揺れ、急なズームを避ける。見る人が映像酔いを起こすことがある。〔Apple HIG〕

1.8 音

• 話者は聞き取りやすい速さで、はっきり話す。
• 重要な情報を効果音や音楽だけで伝えない。
• 高い周波数の音は高齢者に聞こえにくい。合図の音（報知音）は、基本周波数を2.5kHz以下にする。〔JIS S 0013〕

2. 操作

2.2 入力方法

• 必須 動画プレーヤーの再生・停止・音量・字幕の切り替えを、キーボードだけで操作できるようにする。〔WCAG 2.1.1（A）〕
• 字幕の表示・非表示、文字サイズ、背景を、視聴者が変更できるようにする。〔Apple HIG〕
• 再生速度を変更できるようにする。

2.4 時間

• 動画を自動再生しない。自動再生する場合は、停止ボタンを見つけやすい位置に置く。〔Apple HIG〕
• 重要な情報を含む画面は、一時停止して読めるようにする。

3. 理解

3.1 言葉

文の書き方

• 一文を短くし、一文に言いたいことを1つだけ入れる。〔公用文作成の考え方、やさしい日本語ガイドライン〕
• 3つ以上の情報を並べるときは、箇条書きにする。〔公用文作成の考え方、やさしい日本語ガイドライン〕
• 結論を先に示し、続けて理由や詳細を書く。〔公用文作成の考え方〕
• 「いつ」「どこで」「誰が」「何を」「どうした」の語順で書き、主語と述語の関係がわかるようにする。〔公用文作成の考え方〕
• 回りくどい言い方や不要な繰り返しを使わない（例：「調査を実施した」→「調査した」）。〔やさしい日本語ガイドライン〕
• 二重否定を使わない（例：「在留カード以外は必要ありません」→「在留カードを持ってきてください」）。〔やさしい日本語ガイドライン、公用文作成の考え方〕
• 受身形や使役表現をできる限り使わない。行動の主体がわかりにくくなる。〔やさしい日本語ガイドライン〕
• 係る語と受ける語、指示語と指示される語を近くに置く。〔公用文作成の考え方〕

言葉の選び方

• 難しい言葉や専門用語をできる限り使わない。使う場合は説明を添える。〔公用文作成の考え方〕
• 外来語（カタカナ語）は、ほかに適切な言葉がない場合だけ使う（例：スキーム→計画、コンセンサス→合意）。〔やさしい日本語ガイドライン〕
• 略語を使わない（例：「健診」→「健康診断」）。〔やさしい日本語ガイドライン〕
• 「くらい」「ごろ」「なるべく」などの曖昧な表現を使わない。時間や数字は具体的に書く。〔やさしい日本語ガイドライン〕
• 「結構です」のように複数の意味をもつ表現を使わない。〔やさしい日本語ガイドライン〕
• 「おそらく」「ようです」などの推測表現を避ける。断定できない場合は「〜かもしれません」を使う。〔やさしい日本語ガイドライン〕
• 言い換えが難しい重要な言葉はそのまま使い、説明を添える（例：余震＜＝後から来る地震＞）。〔やさしい日本語ガイドライン〕
• 外国人向けの文書では、文末を「です」「ます」にそろえ、尊敬語・謙譲語を使わない。指示は「〜してください」と書く。〔やさしい日本語ガイドライン〕
• 作成後、日本語教師や対象の外国人に、わかりやすいか確認してもらう。〔やさしい日本語ガイドライン〕

動画・音声固有のルール

• ナレーションは一文を短くし、話し言葉として自然な語順にする。
• 話し言葉のやさしい日本語は、出入国在留管理庁・文化庁の「話し言葉のポイント」を参考にする。〔やさしい日本語ガイドライン〕

3.2 情報構造

• 冒頭で動画の目的と長さを示す。
• 長い動画は章（チャプター）に分け、見出しを付ける。

3.5 表記

数字

• 横書きでは算用数字を使う。〔公用文作成の考え方〕
• 大きな数は3桁ごとにコンマで区切る（例：1,254,372人）。兆・億・万の単位は漢字で書く（例：30万円）。〔公用文作成の考え方〕
• 全角・半角の使い分けを文書内で統一する。〔公用文作成の考え方〕
• 概数や「一つ」「一人」などの言葉は漢数字で書く。〔公用文作成の考え方〕

日付・時刻

• 元号だけで書かず、西暦を使う。〔やさしい日本語ガイドライン〕
• 年月日を「/」で区切らず、「2020年6月4日」と書く。〔やさしい日本語ガイドライン〕
• 時刻は午前・午後を明記する（24時間表記でもよい）。〔やさしい日本語ガイドライン〕
• 期間は「〇〇から△△まで」と書く。「〜」は誤解を生むため使わない。〔やさしい日本語ガイドライン〕
• 「年度」は具体的な日付で書き換える。使う場合は最初に説明する。〔やさしい日本語ガイドライン〕

ふりがな・漢字

• 外国人や子どもが読む文書では、漢字の量を抑え、すべての漢字にふりがなをつける。〔やさしい日本語ガイドライン〕
• ふりがなは漢字の上か、漢字の後ろの括弧に入れる。〔やさしい日本語ガイドライン〕
• ふりがなを入れた文書とは別に、ふりがなのない版も用意する。ふりがなは機械翻訳を妨げる。〔やさしい日本語ガイドライン〕
• ローマ字で日本語を書かない。外国人がローマ字を日本語の発音どおりに読めるとは限らない。〔やさしい日本語ガイドライン〕

記号

• 括弧は（ ）と「 」を基本にし、他の括弧は用法を統一して使う。〔公用文作成の考え方〕

3.6 多言語

• 外国語の字幕（翻訳字幕）と、同じ言語のキャプションを区別して提供する。〔Apple HIG〕
• 字幕ファイル（WebVTTなど）を別に用意し、言語を選べるようにする。

5. 支援技術・代替形式

6. 法規・規格

7. チェックリスト

1. 字幕が付いていて、話者と効果音も示しているか。
2. 字幕は1秒4文字程度、1行12〜17文字程度に収まり、2秒以上表示されているか。
3. 字幕がテロップや重要な映像と重なっていないか。
4. 映像だけで伝わる情報を、ナレーションか音声解説で説明しているか。
5. 点滅が1秒3回以下で、鮮やかな赤の点滅や全画面の縞模様がないか。
6. 背景音が話し声を妨げていないか。
7. スマートフォンの画面で、字幕とテロップが読めるか。
8. 音声だけのコンテンツに書き起こしがあるか。

8. 出典

• 民放連「アニメーション等の映像手法に関するガイドライン」↗（新しいタブで開く）
• PEPNet-Japan「動画への字幕挿入の前に」↗（新しいタブで開く）
• おこ助Pro「バリアフリー字幕制作のガイドライン」↗（新しいタブで開く）
• 放送大学学園「字幕制作仕様書」令和4年度↗（新しいタブで開く）
• BBC, Subtitle Guidelines↗（新しいタブで開く）
• 電波産業会「ARIB TR-B32 デジタルテレビ放送番組におけるラウドネス運用規定」↗（新しいタブで開く）
• 総務省「視聴覚障害者等向け放送の普及促進」↗（新しいタブで開く）
• W3C, WCAG 2.2↗（新しいタブで開く）
• Apple, Human Interface Guidelines: Accessibility↗（新しいタブで開く）

• 川崎市総務局「公文書作成におけるカラーUDガイドライン」↗（新しいタブで開く）
• カラーユニバーサルデザイン機構（CUDO）「カラーユニバーサルデザイン推奨配色セット」↗（新しいタブで開く）
• 高橋佑磨・片山なつ「伝わるデザイン｜研究発表のユニバーサルデザイン」↗（新しいタブで開く）
• 国土交通省「公共交通機関の旅客施設に関する移動等円滑化整備ガイドライン（旅客施設編）」令和7年9月↗（新しいタブで開く）
• 出入国在留管理庁・文化庁「在留支援のためのやさしい日本語ガイドライン」↗（新しいタブで開く）
• 文化審議会「公用文作成の考え方（建議）」2022年↗（新しいタブで開く）
• 字幕付きCM普及推進協議会「字幕付きCMハンドブック」2019年↗（新しいタブで開く）
• JIS S 0013:2022 アクセシブルデザイン－消費生活用製品の報知音↗（新しいタブで開く）
• 岡部正隆・伊藤啓「Color Universal Design」（Okabe–Itoパレット）↗（新しいタブで開く）
• NC State University, The Center for Universal Design（7原則）↗（新しいタブで開く）
• Machado, G. M., Oliveira, M. M., & Fernandes, L. A. F. (2009). A Physiologically-based Model for Simulation of Color Vision Deficiency. IEEE TVCG, 15(6).（色覚シミュレーションの計算方法）