---
title: 開運研修2026 アクセシビリティ
tags:  #開運研修  
author: [サイボウズ開発本部](https://docswell.com/user/cybozu-tech)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/KJ4WL5WY71.jpg?width=480
description: 2026年エンジニア新人研修の資料です。
published: August 13, 26
canonical: https://docswell.com/s/cybozu-tech/ZL3NE9-Training2026_Accessibility
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/KJ4WL5WY71.jpg)

開運研修
アクセシビリティ
杉崎 信清
サイボウズ株式会社 開発本部
プロダクトデザイン部


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LE1YLWYN7G.jpg)

自己紹介
杉崎 信清
• 視覚障害（全盲） スクリーンリーダー・キーボードネイティブ
2020年
新卒入社→アクセシビリティチーム
・アクセシビリティの啓発
・開発チームの支援
2022年
プロダクトデザイン部 デザインテクノロジスト
・デザインシステムの開発・保守・普及


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GEWGV61MJ2.jpg)

講義のコンセプト
誰に
サイボウズに新しく入社した開運メンバーに
何と言ってほしい
開発者として、アクセシビリティに取り組むマインドセットがわかった！
アクセシビリティを自学する方法がわかった！
今日から始めてみよう


# Page. 4

![Page Image](https://bcdn.docswell.com/page/47ZL4YPMJ3.jpg)

講義のスタンス（全体像）
メインテーマ：マインドセットの話
⚫開発者として、アクセシビリティに取り組む意義・向き合い方
⚫アクセシビリティにの効果・影響
サブテーマ：アクセシビリティの学び方
⚫自学する方法


# Page. 5

![Page Image](https://bcdn.docswell.com/page/YJ6W3DM5JV.jpg)

講義のスタンス（位置づけ）
なぜマインドセットの話をするのか
⚫興味・学ぶモチベーションを高めてほしい
⚫日々の業務・キャリアに自然に取り込んでほしい
⚫一過性ではなく、継続的に取り組んでほしい
技術的な学習コンテンツは充実しています。
私含めアクセシビリティに明るいメンバーへの質問相談も大歓迎です！


# Page. 6

![Page Image](https://bcdn.docswell.com/page/GJ5ML3ZGJ4.jpg)

Agenda
⚫アクセシビリティとは？（復習）
⚫アクセシビリティを高める考え方
⚫アクセシビリティが損なわれると生じる問題
⚫アクセシビリティの学び方


# Page. 7

![Page Image](https://bcdn.docswell.com/page/LE3WL69PE5.jpg)

アクセシビリティとは？
（復習）


# Page. 8

![Page Image](https://bcdn.docswell.com/page/8EDKNVG37G.jpg)

アクセシビリティの定義
「すべての人」が支障なく
製品・サービス・情報を利用でき、目的を達成できること


# Page. 9

![Page Image](https://bcdn.docswell.com/page/V7PK5V3PJ8.jpg)

すべての人＝多様な環境・ツール・特性
環境
▌ 在宅勤務
▌ 海外勤務
▌ 副業
▌ 時短勤務
▌ 電車の中
▌ 工場の中
▌ 図書館
▌ カフェ
▌ 屋外
▌ 夜間
ツール
▌ PC
▌ スマートフォン
▌ タブレット
▌ モニター
▌ マウス
▌ キーボード
▌ トラックパッド
▌ 音声入力
▌ スクリーンリーダー
▌ 拡大鏡
▌ リアルタイム字幕
個人の特性
▌ 年齢
▌ 性別
▌ 国籍
▌ 人種
▌ 能力
▌ スキル
▌ 色覚多様性
▌ 視覚障害
▌ 聴覚障害
▌ 肢体不自由
▌ 精神障害
▌ 発達障害


# Page. 10

![Page Image](https://bcdn.docswell.com/page/2JVVPZ4VJQ.jpg)

（参考）UXハニカムピラミッド


# Page. 11

![Page Image](https://bcdn.docswell.com/page/5EGLP411JL.jpg)

サイボウズにとってのアクセシビリティ
すべての人がチームにアクセスできる能力


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4JQY2GDN7P.jpg)

アクセシビリティを確保することは
「チームに参加したい」という
すべての人のねがいを尊重すること


# Page. 13

![Page Image](https://bcdn.docswell.com/page/K74WL5Z3E1.jpg)

アクセシビリティを高める考え方


# Page. 14

![Page Image](https://bcdn.docswell.com/page/LJ1YLWRZEG.jpg)

設計段階からアクセシビリティを考えよう
• アクセシビリティのよしあしは、設計段階で決まる
• デザイン、実装、テストと、下流工程に行くほど取りうる選択
肢が狭まる
• 後回しにするほど、コストが高くなる


# Page. 15

![Page Image](https://bcdn.docswell.com/page/GJWGV61672.jpg)

困難を抱えるユーザーを巻き込む（インクルーシブデザイン）
• ユーザーを「想像」するだけでは足りない
• 多様なニーズを持つ人と一緒にプロダクトを作っていく
• ヒアリングでフィードバックを得る
• 一緒に開発する
• Nothing about us without us! 私たちのことを私たち抜きで
決めないで


# Page. 16

![Page Image](https://bcdn.docswell.com/page/4EZL4YPR73.jpg)

マシンリーダブル・ヒューマンリーダブルにしよう


# Page. 17

![Page Image](https://bcdn.docswell.com/page/Y76W3DM17V.jpg)

コンテンツがユーザに届くまで
ハードウェア
（PC・スマホ…)
入出力
機器
ソフトウェア
(ブラウザ・支援技術)
制作者
ユーザ
Webコンテンツ
感覚情報
(HTML・CSS・JS…)
（視覚・聴覚・触覚…）


# Page. 18

![Page Image](https://bcdn.docswell.com/page/G75ML3ZL74.jpg)

アクセシビリティを高める2つの要素
マシン
リーダブル
制作者
ヒューマン
リーダブル
ユーザ


# Page. 19

![Page Image](https://bcdn.docswell.com/page/9J29LZR3ER.jpg)

マシンリーダブルにする考え方
標準が最もアクセシブル
• 適切なセマンティクスを持つHTML要素を利用する
• OS標準のUIコンポーネントを利用する
• アクセシビリティを考慮したライブラリを採用する
• 例：dnd kitというライブラリは、キーボードやスクリーンリー
ダーでもD&Dできるように設計されている


# Page. 20

![Page Image](https://bcdn.docswell.com/page/DEY4QRD8JM.jpg)

ヒューマンリーダブルにする考え方
多様な感覚特性を想定する
多様な操作方法を想定する
色を見分けにくい
マウス操作
まぶしい、暗い
タッチ操作
音が出せない
キーボード操作
音が聞こえない
拡大・縮小
細かい作業が苦手
印刷
記憶が困難


# Page. 21

![Page Image](https://bcdn.docswell.com/page/VJNYKD6978.jpg)

具体例：色のみに依存しない表現
• 色以外の別の視覚情報を組み合わせる(テキスト、アイコン、記号など)


# Page. 22

![Page Image](https://bcdn.docswell.com/page/YE9PVGL3J3.jpg)

具体例：拡大しても閲覧できる
• 位置が固定された要素に要注意（ヘッダー・フッターなど）
header
footer
header
footer
• フォントサイズ・フォントサイズに連動して変化する箇所には
相対値（％, em, rem）を使う


# Page. 23

![Page Image](https://bcdn.docswell.com/page/GE8DPVXLED.jpg)

アクセシビリティを損なうと生じる問題


# Page. 24

![Page Image](https://bcdn.docswell.com/page/LELM158Q7R.jpg)

サイボウズユーザーへの影響
サイボウズのグループウェアを利用しているチームの中に
アクセシブルではないために製品を使えないメンバーがいたら
それはチームワークあふれる状態といえるでしょうか


# Page. 25

![Page Image](https://bcdn.docswell.com/page/4JMYW3XKJW.jpg)

コラム：ある視覚障害者のFacebookのコメント
（グループウェアのアクセシビリティに問題があるときに）
切ないのは、「システムやアプリケーションを改善しよう」とは
ならずに、「システムやアプリケーションを使わなくてもできる
ような仕事をしてもらおう」というふうに話が進んでいくこと。
結局社内で仕事が見つからず、籍はあるけど一日中ネットしてた
り、それに耐え切れず退社したりなんて話も聞きます。


# Page. 26

![Page Image](https://bcdn.docswell.com/page/PJR9YQN679.jpg)

サイボウズの例：kintoneのアプリ作成画面
D&Dでアプリを作成できる


# Page. 27

![Page Image](https://bcdn.docswell.com/page/PEXQG5NDJX.jpg)

アプリ作成画面で困る人
⚫キーボード操作ではアプリを作成できない
⚫モバイル端末は非対応
⚫マウスが使えない・使いにくい状況では作業がしにくい（子供
をあやして片手がふさがっている、上肢に障害がある、十分な
作業スペースがない、交通機関の中など）


# Page. 28

![Page Image](https://bcdn.docswell.com/page/3EK946NDED.jpg)

アプリが作成できないということは…
アプリ作成業務をこなせない、こなしにくい、アサインされない
アプリを作るとき、周囲にお願いしなければならない
簡単に作って改善するというkintoneのよさの恩恵を受けられな
い、実感できない


# Page. 29

![Page Image](https://bcdn.docswell.com/page/L73WL6VP75.jpg)

より多くの人がアプリを作成できるようにするには
特定のデバイスに依存せず、複数の手段を提供する
⚫キーボード操作
⚫D&Dの代わりに、ワンクリック・タップで部品を配置できるUI
⚫AI活用
後付けではなく設計段階から検討できているのがベスト


# Page. 30

![Page Image](https://bcdn.docswell.com/page/87DKNV83JG.jpg)

サイボウズの例：kintoneのルックアップフィールド
拡大していくと、テーブルヘッダーが画面の大部分を占める
データセルがつぶれて閲覧困難になる


# Page. 31

![Page Image](https://bcdn.docswell.com/page/VJPK5V8PE8.jpg)

ルックアップフィールドで困る人
画面や文字を拡大する状況で困難を生じる
⚫会議で画面共有をするとき
⚫小さなディスプレイを使っているとき
⚫ブラウザを縦長で表示しているとき
⚫ロービジョンや高齢者で視力が低下しているとき
⚫小さなディスプレイで閲覧しているとき


# Page. 32

![Page Image](https://bcdn.docswell.com/page/2EVVPZNVEQ.jpg)

閲覧しにくいということは…
スクロールを何度も行わなければならず、かなりのストレス
目的のデータを探すのにかなりの時間がかかる
最悪、データを探すのをあきらめる


# Page. 33

![Page Image](https://bcdn.docswell.com/page/57GLP4K1EL.jpg)

閲覧しやすくするには
⚫ヘッダーを固定するかどうかユーザーが制御できる
⚫ある程度の画面サイズになったら、固定ヘッダーを解除する
⚫そもそも固定しない


# Page. 34

![Page Image](https://bcdn.docswell.com/page/4EQY2GNNJP.jpg)

随時改善中
Kintoneではフロントエンド基盤の刷新とともに問題を改善中


# Page. 35

![Page Image](https://bcdn.docswell.com/page/KJ4WL5G371.jpg)

サービス提供側（サイボウズ）への影響
• 後回し対応によるコスト
• 訴訟のコスト
• ブランドの評判とダメージに対応するコスト
（参考）アクセシビリティに取り組まないと、企業はどれくらい「損」をする？
https://goodpatch.com/blog/2024-10-accessibility-cost


# Page. 36

![Page Image](https://bcdn.docswell.com/page/LE1YLWDZ7G.jpg)

後回し対応によるコスト
設計段階の修正コスト ＝ 1 とすると
リリース後の修正コスト ＝ 最大 150倍！
問題発覚後のデザインリニューアル：
少なくない金額＋多くの時間
他プロジェクトの遅延・チームの士気低下につながる


# Page. 37

![Page Image](https://bcdn.docswell.com/page/GEWGV6Y6J2.jpg)

訴訟のコスト
• 米国：2023年だけで 2,281件 の訴訟
• 近年は4000件程度で推移
• 日本は遅れているが、法整備が徐々に進行中
• サイボウズはグローバル展開しているので他人事ではない


# Page. 38

![Page Image](https://bcdn.docswell.com/page/47ZL4YXRJ3.jpg)

ブランドの評判とダメージに対応するコスト
利用しづらいサービス → SNS・口コミで拡散
→ ブランドイメージの低下 → 売上・市場シェアへの悪影響
信頼度の回復には時間とお金がかかる


# Page. 39

![Page Image](https://bcdn.docswell.com/page/YJ6W3D41JV.jpg)

サイボウズのお問い合わせ事例
⚫Kintoneはスクリーンリーダーや画面拡大で利用できますか？
⚫アクセシビリティ方針についてまとめた資料はありますか？
⚫JIS規格にどの程度適合していますか？
⚫米国リハビリテーション法にどの程度対応していますか？


# Page. 40

![Page Image](https://bcdn.docswell.com/page/GJ5ML3QLJ4.jpg)

設計段階からアクセシビリティを考えよう
開発の上流、設計段階からアクセシビリティを検討することで
ユーザーにとっても、開発者にとっても、企業にとっても
三方よしにしていくことができる


# Page. 41

![Page Image](https://bcdn.docswell.com/page/9E29LZP37R.jpg)

アクセシビリティの学び方


# Page. 42

![Page Image](https://bcdn.docswell.com/page/D7Y4QR58EM.jpg)

デザイナー向け：書籍・サイトを読もう
⚫アクセシビリティ学習の手引きとしての入門講座
全体像をつかもう、参考情報や書籍もたくさん紹介されている
⚫見えにくい、読みにくい「困った！」を解決するデザイン
デザイン業務に役立てる実践的な内容
⚫Webアプリケーションアクセシビリティ
1→4→2→3→8→7章の順に読もう
⚫駒瑠市〜アクセシビリティ上の問題の体験サイト
アクセシビリティの問題を疑似体験してデザインに生かそう


# Page. 43

![Page Image](https://bcdn.docswell.com/page/VENYKDN9J8.jpg)

デザイナー向け：ツールを活用しよう
⚫Spectrum
さまざまな色覚を再現できるChrome拡張
⚫Color Contrast Analyzer
2つの色のコントラスト比を測定できる


# Page. 44

![Page Image](https://bcdn.docswell.com/page/Y79PVGR3E3.jpg)

エンジニア向け：書籍・サイトを読もう
⚫アクセシビリティ学習の手引きとしての入門講座
全体像をつかもう、参考情報や書籍もたくさん紹介されている
⚫Webアクセシビリティ確保 基本の「キ」
実装時まず意識すること
⚫HTML解体新書
正しいHTMLを書くことでアクセシブルになる
⚫Webアプリケーションアクセシビリティ
1→2→3→5→7→6章の順に読もう
⚫駒瑠市〜アクセシビリティ上の問題の体験サイト
アクセシビリティの問題を疑似体験してデザインに生かそう


# Page. 45

![Page Image](https://bcdn.docswell.com/page/G78DPVWL7D.jpg)

エンジニア向け：ツールを活用しよう
⚫Axe DevTools
コードベースの自動チェックツール（機械的に検出できるのは
問題の３割程度）
⚫Markuplint, Eslint-plugin-jsx-a11y
マークアップのlinter


# Page. 46

![Page Image](https://bcdn.docswell.com/page/L7LM15NQJR.jpg)

社内リソースを活用しよう
⚫サイボウズ共通アクセシビリティガイドライン
アクセシビリティのガイドラインをかみ砕いて紹介しています
⚫Kintone Design System(kDS)
ガイドラインやコンポーネント実装の参考に
⚫アクセシビリティ質問相談箱
デザイン・実装方針の相談、レビューなど気軽に登録してください
⚫どこでも @accessibility でメンションできます