サイボウズ株式会社で開催した「アクセシビリティを高めてみんなに伝わる発表資料のつくりかた」のスライド資料です。
以下のリンクから、PPT形式の資料を閲覧できます： https://cybozu-my.sharepoint.com/:p:/g/personal/daisuke-kobayashi_cybozu_onmicrosoft_com/EUw8uxvLxodNgXG0jVlv0O4B5LJ0eKa-jmYLrcWnTZkovQ?e=8W0TJm
アクセシビリティを⾼めてみんなに伝わる発表資料のつくりかた⼩林⼤輔デザイン＆リサーチ アクセシビリティエキスパート
View Slide
コンセプト誰にPowerPointを使って発表するサイボウズ社員に何を障害者・⾼齢者を含めて「すべて」の⼈に伝わる発表の仕⽅がわかった︕と⾔ってほしい
アクセシビリティとは︖障害者・⾼齢者を含めて「すべて」の⼈が製品やサービスに⽀障なくアクセスできること
よくある声障害者の⽅は⾃分たちとは全く違うんだな⼀部の⼈に配慮するのはコストが⾼そう
誰でも「⾒えない」「⾒えづらい」ことがある▌ モニターから遠い位置に座っていたら▌ 古いプロジェクターを使っていたら▌ スマホで資料を⾒ていたら▌ テレビ会議の画質が低下したら...
「特別な配慮の対象」ではなく「道しるべ」「極端」に⽬を向けることで「汎⽤」が獲得できる
よりよい発表をするには︖
よりよい発表のポイント1. 参加しやすい場所・時間を設定する2. 発表資料を事前に共有する3. 視覚だけに依存しない表現を使う
1. 参加しやすい場所・時間を設定する▌ 会場l 会場に到達するまでにサポートが必要か考えましょう▌ 座席l 参加者にあわせて座席を設定しましょう▌ 休憩l 余裕を持った休憩時間を設定しましょうl 参加者が休憩がとりやすいようにサポートしましょう
2. 発表資料を事前に共有する▌ 参加者が確認したい⽅法で確認できるようになるl スクリーンリーダーで読み上げるl 拡⼤したりハイコントラストモードで表⽰するl 理解できる⾔語に翻訳するl Office365 ではなく ファイル添付 で共有しようl PDF ではなく PowerPoint で共有しよう
3. 視覚だけに依存しない表現を使う▌ スライドに書かれた重要な情報は、すべて⾳声で伝える(タイトル・本⽂・画像・図表・グラフ)▌ 挙⼿アンケートしたときは、結果をフィードバックする▌ 指⽰語だけ・⾊だけを使った表現を避けるl 例︓「これとこれを⽐べると」l 指、ポインタ、マウスカーソルでスライドを指すときは要注意
4. ⾳声を聞き取りやすくする▌ マイクを使ってはっきりしゃべる▌ ⼝の形が⾒えるようにする▌ シンプルでわかりやすい⽇本語を使う▌ 参加者の質問は復唱する
発表資料のつくりかた
みんなに伝わる発表資料のガイドライン1. 読みやすいフォントを使う2. 情報を⾊だけで伝えない3. コントラストを⾼める4. 画像に代替テキストをつける5. ⼀意なタイトルをつける6. 読み取り順序を確認する
1. 読みやすいフォントを使う▌22ポイント以上のゴシック体を使う（UDフォントも有効）▌斜体や⽴体書体は避ける▌⾏の⾼さを⼗分にとる（⽂字の⾼さの1.2〜1.5倍）Why︖l ロービジョンや読字障害の⼈が読みやすくなるl 遠⽅からスライドを⾒ても読みやすくなる
22ポイント以上の⽂字を推奨する根拠▌Microsoftの資料によると、英数字については18ポイント以上が推奨されている▌⽇本語の全⾓⽂字の場合は、拡⼤教科書普及推進会議 第⼀次報告「第2章 拡⼤教科書の標準的な規格について」に基づき、22ポイント⼜は18ポイントの太字を「同等な」サイズとみなすのが妥当である (WCAG2.0より)▌24ポイント以上がよいという意⾒も多数あります。
やめよう こうしよう例︓読みやすいフォントを使うαΠϘζגࣜձࣾදऔకࣾサイボウズ株式会社代表取締役社⻑
2. ⾊だけで情報を伝えない▌⾊以外に「⽂字」「形」「配置」などで情報を伝えるWhy︖l ⼈の⾊覚によらず内容を理解できる（⾊覚多様性）l ⽩⿊印刷されても内容を理解できる
やめよう こうしよう例︓⾊だけで情報を伝えない（グラフ）アプリ スペース ピープル メッセージアプリスペースピープルメッセージ
⽩⿊印刷すると…アプリ スペース ピープル メッセージアプリスペースピープルメッセージ
やめよう こうしよう例︓⾊だけで情報を伝えない（⽂字の強調）多様なチームで働くために嘘のない⾵⼟を作る多様なチームで働くために嘘のない⾵⼟を作る
3 . コントラストを⾼める▌⽂字⾊と背景⾊との間に⼗分なコントラストを確保するWhy︖l ⾼齢者やロービジョンの⼈に⾊の違いが⾒やすくなるl 照明がついている部屋でも⾊の違いが⾒やすくなるl 品質の低いプロジェクターでも⾊の違いが⾒やすくなる
コントラストの⾼い⾊の選び⽅▌ ⽩⾊の⽂字に適切な背景⾊は、パレットのだいたい下2段の⾊厳密には、アクセシビリティチェック（後述）で調べる
やめよう こうしよう例︓テキストに⼗分なコントラストを確保するサイボウズ世界中にチームワークをサイボウズ世界中にチームワークを
4. 画像に代替テキストをつける▌画像・図表・グループ化したオブジェクトに「代替テキスト(代わりになる⽂章)」を⼊れるWhy︖l 全盲の⼈は代替テキストがないと画像を理解できない
代替テキストをつける⽅法▌ 画像を右クリック →「代替テキストの編集…」
どんな代替テキストをつけますか︖（製品ロゴ）
どんな代替テキストをつけますか︖（顔写真）
どんな代替テキストをつけますか︖（グラフ）
どんな代替テキストをつけますか︖（フローチャート）
代替テキストが思いつかない＆⻑すぎたら…▌ コンセプトを明確に (誰に何を伝えたい画像ですか︖)▌ ⼝頭で詳しく説明する▌ 発表者ノートに説明を書く▌ 別のスライドに説明を書く
5 . スライドの読み取り順序を確認する▌オリジナルのレイアウトを使う場合は、必ず順序を確認する（標準のレイアウトを使えば、読み取り順は問題ない）Why︖l スクリーンリーダーの読み取り順序が⾒た⽬と異なると全盲の⼈には意味が理解できなくなる
読み取り順序の確認⽅法▌「ホーム」→「整列」→「選択ウィンドウ」▌⾏をドラッグして読み取り順序を調整読み取り順序
ワーク︓読み取り順序を確認する▌ 以下の図表の読み取り順序を確認し、正しい順序に修正しよう理想を創る 役割分担する モチベーションが上がるノウハウを蓄積するコミュニケーションしながらワークする
6 . ⼀意なタイトルをつける▌タイトルを必ずつける▌タイトルはそれぞれのスライドで⼀意にするWhy︖l タイトルだけを辿って発表の概要を理解できるl タイトルをもとにスライドを⾒つけやすくなる
やめよう こうしよう例︓⼀意なタイトルをつける1. 会社情報2. 会社情報3. 会社情報4. …1. 従業員数2. グローバル展開3. ⼈事制度4. …
タイトルを省略したいときは︖1. タイトルは削除せず必ず⼊⼒する2. 「オブジェクトの選択の表⽰」でタイトルを「⾮表⽰」にl 「ホーム」→「整列」→「選択ウィンドウ」
ワーク︓このスライドはタイトルを「⾮表⽰」にしていますどんなタイトルがついているか確認してみよう「表⽰」→「アウトライン表⽰」※元に戻すには「表⽰」→「標準」
みんなに伝わる発表資料のガイドライン(再掲)1. 読みやすいフォントを使う2. 情報を⾊だけで伝えない3. コントラストを⾼める4. 画像に代替テキストをつける5. ⼀意なタイトルをつける6. 読み取り順序を確認する
わからないことがあったら…「アクセシビリティの質問・相談」スレッドがあります
参考アクセシビリティチェックツール
アクセシビリティチェックを開く▌ 「校閲」→ アクセシビリティチェック
アクセシビリティの検査結果
修正が必要な理由と修正⽅法
参考⽂献▌障碍のあるユーザーが PowerPoint プレゼンテーションにアクセスできるようにする▌How to Make Your Presentations Accessible to All
sukoyakarizumu
blakedg95
getonbrd
dieckg
uxevents
kawaiirailroads
strongeron
kubosaya
morganepeng
romanshamin
uxaustralia
y__ri9813
philhawksworth
jeffersonlam
lauravandoore
holman
62gerente
denniskardys
keavy
mraible
iamctodd
jmmastey
jennybc