スライド

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型）、スマートフォンの色覚シミュレーションアプリを使う。

スライド固有のルール

• 背景は白〜淡い色にして黒〜濃いグレーの文字を置くか、濃い色の背景に白の文字を置く。中間の明るさの背景を使わない。

  ✕ 中間の明るさの背景

  黒い文字も白い文字も、背景との差が小さく読みにくい。

  ◯ 白地に濃い文字、または濃い地に白い文字

  背景と文字の明度差が大きく、投影しても読める。

• 淡い色の文字や細い線は投影で見えなくなる。淡い色は面を塗るときだけ使う。
• グラデーションや写真を背景全面に敷かない。
• 赤いレーザーポインターの光は、P型の人に見えにくい。〔川崎市カラーUDガイドライン〕 緑のレーザーポインターか、スライド上のポインター機能を使う。
• 蛍光顕微鏡画像などの疑似カラー画像は、各チャンネルをグレースケールで並べる。〔伝わるデザイン〕
• 赤と緑を重ねた疑似カラー画像は、マゼンタと緑の組み合わせに置き換える。〔Okabe & Ito〕

  ✕ 赤と緑の重ね合わせ

  P型・D型では、赤・緑・重なりの黄を区別しにくい。

  ◯ マゼンタと緑の重ね合わせ

  重なった部分が白になり、色覚にかかわらず区別できる。

1.2 コントラスト

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

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

スライド固有のルール

• 投影では画面上で計算したコントラストより下がる。4.5:1は最低ラインとして扱い、本文には余裕のある組み合わせを使う。

1.3 文字

文字サイズ

• 会場が広いほど、またオンラインで小さく表示されるほど、文字を大きくする。
• 図やグラフの中の文字（軸ラベル・凡例・数値）も、本文と同じ最小サイズを守る。

書体と組版

書体と組版の共通ルール

• 小さな文字や遠くから読む文字は、ゴシック体（サンセリフ体）にする。明朝体の細い横線は、視力の低い人には見えにくい。〔伝わるデザイン〕
• 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ガイドライン〕

• タイトルなど大きな文字は、文字サイズの5%程度の字間を入れる。〔伝わるデザイン〕

1.4 図・アイコン・画像

• 図・写真・グラフに代替テキストを付ける。〔Microsoft〕
• グラフの凡例を離して置かず、線や棒の横に系列名を直接書く。〔伝わるデザイン〕
• 折れ線にはマーカーと線種、棒グラフには塗りのパターンを併用する。〔伝わるデザイン〕
• 3D表示、影、光沢などの装飾をグラフに使わない。
• 図の中の要素に番号や記号を付け、口頭で「③の部分」のように指し示せるようにする。

  ✕ 「この赤いところ」と色で指す

  赤が見分けにくい人や、後方の席の人には、どこを指しているかわからない。

  ◯ 番号を付けて指す

  番号と名前で指すので、色が見えなくても、口頭だけでも伝わる。

1.5 レイアウト

• すべてのスライドに、固有のタイトルを付ける（画面に表示しなくてもよい）。スクリーンリーダーの利用者はタイトルの一覧で移動する。〔Microsoft〕
• オブジェクトの読み上げ順序を、見た目の順序と一致させる。読み上げは追加した順になるため、PowerPointの「読み上げ順序」ウィンドウで確認する。〔Microsoft〕
• 1枚に1つのメッセージにする。

  ✕ 情報を詰め込む

  何を伝えたいのかがわからない。後方の席から読めない。

  ◯ 1枚に1つのメッセージ

  見出しを読むだけで要点が伝わる。

• 見出しは左上に置く。〔伝わるデザイン〕
• 関連する要素を近づけてまとめ、グループの間に余白をとる。
• 画面の端いっぱいまで要素を置かない。投影や画面共有で端が切れることがある。

1.6 動き・点滅

• 画面切り替え効果やアニメーションを多用しない。
• 点滅は1秒間に3回を超えないようにする。〔WCAG 2.3.1〕
• スライドを自動で送らない。

1.7 光・照明

• 投影面に照明が当たると、淡い色や細い線が消える。会場の照明とスクリーンの位置を事前に確認する。

1.8 音

• スライドに埋め込んだ動画に字幕を付ける。〔Microsoft〕
• 話の要点をスライドにも文字で表示する。
• 「これ」「この赤いところ」ではなく、「右上の売上の棒」のように位置や名前で指し示す。
• マイクを使って話す。質問者の発言は、発表者が繰り返してからマイクで答える。
• 手話通訳者や文字通訳（要約筆記）の表示は、スライドと同時に見える位置に配置する。

2. 操作

2.4 時間

• 1枚のスライドを、読み終わるのに十分な時間表示する。
• 手話通訳・文字通訳が追いつけるよう、話す速さに配慮する。

3. 理解

3.1 言葉

文の書き方

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

言葉の選び方

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

スライド固有のルール

• 箇条書きは短い句にし、1項目を2行以内に収める。

3.2 情報構造

• 最初に全体の構成を示し、各スライドのタイトルで現在の位置がわかるようにする。

3.3 一貫性

• タイトル・本文・注の位置と書式を、全スライドで統一する。
• 同じ意味の色・記号を、全スライドで同じ意味に使う。

3.5 表記

数字

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

日付・時刻

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

ふりがな・漢字

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

記号

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

3.6 多言語

• 外国人の聴衆がいる場合は、主要な用語に英語を併記するか、英語版のスライドを事前に配布する。
• 機械翻訳しやすいよう、配布資料では文字を画像にしない。

4. 使用環境

• 会場の最後列から読めるか、事前に投影して確認する。

5. 支援技術・代替形式

• スライドを事前に配布する。聴衆が手元で拡大したり、読み上げたりできる。
• PowerPointの「アクセシビリティチェック」で、代替テキストの不足、低いコントラスト、読み上げ順序の問題を検出する。〔Microsoft〕
• 表はデータだけに使い、見出し行を指定する。セルの結合・分割・入れ子を使わない。〔Microsoft〕
• リンクの文言で行き先がわかるようにする。「こちら」「詳しく」だけのリンクにしない。〔Microsoft〕
• PDFで配布する場合は、タグ付きPDFとして書き出す。

6. 法規・規格

7. チェックリスト

1. 本文が18pt以上あるか。
2. 最後列やオンラインの小さな画面で読めるか。
3. グレースケールと色覚シミュレーションで、情報が区別できるか。
4. 強調やグラフの系列を、色以外（太字・マーカー・直接ラベル）でも示しているか。
5. すべてのスライドに固有のタイトルがあるか。
6. 図・写真・グラフに代替テキストがあるか。
7. 読み上げ順序が見た目の順序と一致しているか。
8. 埋め込み動画に字幕があるか。
9. 口頭で「この赤いところ」のような色による指示をしていないか。
10. 配布資料を事前に用意したか。

8. 出典

• Microsoft「Make your PowerPoint presentations accessible to people with disabilities」↗（新しいタブで開く）
• 伝わるデザイン「配色のバリアフリー」↗（新しいタブで開く）
• 伝わるデザイン「書体・フォント」↗（新しいタブで開く）
• 伝わるデザイン「文字組み」↗（新しいタブで開く）
• W3C, WCAG 2.2↗（新しいタブで開く）

• 川崎市総務局「公文書作成におけるカラー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).（色覚シミュレーションの計算方法）

• 内閣府「合理的配慮の提供が義務化されました」↗（新しいタブで開く）