開運研修2026 アクセシビリティ
>100 Views
August 13, 26
スライド概要
2026年エンジニア新人研修の資料です。
サイボウズ株式会社の主に開発本部の資料を公開するアカウントです。
関連スライド
各ページのテキスト
開運研修 アクセシビリティ 杉崎 信清 サイボウズ株式会社 開発本部 プロダクトデザイン部
自己紹介 杉崎 信清 • 視覚障害（全盲） スクリーンリーダー・キーボードネイティブ 2020年 新卒入社→アクセシビリティチーム ・アクセシビリティの啓発 ・開発チームの支援 2022年 プロダクトデザイン部 デザインテクノロジスト ・デザインシステムの開発・保守・普及
講義のコンセプト 誰に サイボウズに新しく入社した開運メンバーに 何と言ってほしい 開発者として、アクセシビリティに取り組むマインドセットがわかった！ アクセシビリティを自学する方法がわかった！ 今日から始めてみよう
講義のスタンス（全体像） メインテーマ：マインドセットの話 ⚫開発者として、アクセシビリティに取り組む意義・向き合い方 ⚫アクセシビリティにの効果・影響 サブテーマ：アクセシビリティの学び方 ⚫自学する方法
講義のスタンス（位置づけ） なぜマインドセットの話をするのか ⚫興味・学ぶモチベーションを高めてほしい ⚫日々の業務・キャリアに自然に取り込んでほしい ⚫一過性ではなく、継続的に取り組んでほしい 技術的な学習コンテンツは充実しています。 私含めアクセシビリティに明るいメンバーへの質問相談も大歓迎です！
Agenda ⚫アクセシビリティとは？（復習） ⚫アクセシビリティを高める考え方 ⚫アクセシビリティが損なわれると生じる問題 ⚫アクセシビリティの学び方
アクセシビリティとは？ （復習）
アクセシビリティの定義 「すべての人」が支障なく 製品・サービス・情報を利用でき、目的を達成できること
すべての人＝多様な環境・ツール・特性 環境 ▌ 在宅勤務 ▌ 海外勤務 ▌ 副業 ▌ 時短勤務 ▌ 電車の中 ▌ 工場の中 ▌ 図書館 ▌ カフェ ▌ 屋外 ▌ 夜間 ツール ▌ PC ▌ スマートフォン ▌ タブレット ▌ モニター ▌ マウス ▌ キーボード ▌ トラックパッド ▌ 音声入力 ▌ スクリーンリーダー ▌ 拡大鏡 ▌ リアルタイム字幕 個人の特性 ▌ 年齢 ▌ 性別 ▌ 国籍 ▌ 人種 ▌ 能力 ▌ スキル ▌ 色覚多様性 ▌ 視覚障害 ▌ 聴覚障害 ▌ 肢体不自由 ▌ 精神障害 ▌ 発達障害
（参考）UXハニカムピラミッド
サイボウズにとってのアクセシビリティ すべての人がチームにアクセスできる能力
アクセシビリティを確保することは 「チームに参加したい」という すべての人のねがいを尊重すること
アクセシビリティを高める考え方
設計段階からアクセシビリティを考えよう • アクセシビリティのよしあしは、設計段階で決まる • デザイン、実装、テストと、下流工程に行くほど取りうる選択 肢が狭まる • 後回しにするほど、コストが高くなる
困難を抱えるユーザーを巻き込む（インクルーシブデザイン） • ユーザーを「想像」するだけでは足りない • 多様なニーズを持つ人と一緒にプロダクトを作っていく • ヒアリングでフィードバックを得る • 一緒に開発する • Nothing about us without us! 私たちのことを私たち抜きで 決めないで
マシンリーダブル・ヒューマンリーダブルにしよう
コンテンツがユーザに届くまで ハードウェア （PC・スマホ…) 入出力 機器 ソフトウェア (ブラウザ・支援技術) 制作者 ユーザ Webコンテンツ 感覚情報 (HTML・CSS・JS…) （視覚・聴覚・触覚…）
アクセシビリティを高める2つの要素 マシン リーダブル 制作者 ヒューマン リーダブル ユーザ
マシンリーダブルにする考え方 標準が最もアクセシブル • 適切なセマンティクスを持つHTML要素を利用する • OS標準のUIコンポーネントを利用する • アクセシビリティを考慮したライブラリを採用する • 例：dnd kitというライブラリは、キーボードやスクリーンリー ダーでもD&Dできるように設計されている
ヒューマンリーダブルにする考え方 多様な感覚特性を想定する 多様な操作方法を想定する 色を見分けにくい マウス操作 まぶしい、暗い タッチ操作 音が出せない キーボード操作 音が聞こえない 拡大・縮小 細かい作業が苦手 印刷 記憶が困難
具体例：色のみに依存しない表現 • 色以外の別の視覚情報を組み合わせる(テキスト、アイコン、記号など)
具体例：拡大しても閲覧できる • 位置が固定された要素に要注意（ヘッダー・フッターなど） header footer header footer • フォントサイズ・フォントサイズに連動して変化する箇所には 相対値（％, em, rem）を使う
アクセシビリティを損なうと生じる問題
サイボウズユーザーへの影響 サイボウズのグループウェアを利用しているチームの中に アクセシブルではないために製品を使えないメンバーがいたら それはチームワークあふれる状態といえるでしょうか
コラム：ある視覚障害者のFacebookのコメント （グループウェアのアクセシビリティに問題があるときに） 切ないのは、「システムやアプリケーションを改善しよう」とは ならずに、「システムやアプリケーションを使わなくてもできる ような仕事をしてもらおう」というふうに話が進んでいくこと。 結局社内で仕事が見つからず、籍はあるけど一日中ネットしてた り、それに耐え切れず退社したりなんて話も聞きます。
サイボウズの例：kintoneのアプリ作成画面 D&Dでアプリを作成できる
アプリ作成画面で困る人 ⚫キーボード操作ではアプリを作成できない ⚫モバイル端末は非対応 ⚫マウスが使えない・使いにくい状況では作業がしにくい（子供 をあやして片手がふさがっている、上肢に障害がある、十分な 作業スペースがない、交通機関の中など）
アプリが作成できないということは… アプリ作成業務をこなせない、こなしにくい、アサインされない アプリを作るとき、周囲にお願いしなければならない 簡単に作って改善するというkintoneのよさの恩恵を受けられな い、実感できない
より多くの人がアプリを作成できるようにするには 特定のデバイスに依存せず、複数の手段を提供する ⚫キーボード操作 ⚫D&Dの代わりに、ワンクリック・タップで部品を配置できるUI ⚫AI活用 後付けではなく設計段階から検討できているのがベスト
サイボウズの例：kintoneのルックアップフィールド 拡大していくと、テーブルヘッダーが画面の大部分を占める データセルがつぶれて閲覧困難になる
ルックアップフィールドで困る人 画面や文字を拡大する状況で困難を生じる ⚫会議で画面共有をするとき ⚫小さなディスプレイを使っているとき ⚫ブラウザを縦長で表示しているとき ⚫ロービジョンや高齢者で視力が低下しているとき ⚫小さなディスプレイで閲覧しているとき
閲覧しにくいということは… スクロールを何度も行わなければならず、かなりのストレス 目的のデータを探すのにかなりの時間がかかる 最悪、データを探すのをあきらめる
閲覧しやすくするには ⚫ヘッダーを固定するかどうかユーザーが制御できる ⚫ある程度の画面サイズになったら、固定ヘッダーを解除する ⚫そもそも固定しない
随時改善中 Kintoneではフロントエンド基盤の刷新とともに問題を改善中
サービス提供側（サイボウズ）への影響 • 後回し対応によるコスト • 訴訟のコスト • ブランドの評判とダメージに対応するコスト （参考）アクセシビリティに取り組まないと、企業はどれくらい「損」をする？ https://goodpatch.com/blog/2024-10-accessibility-cost
後回し対応によるコスト 設計段階の修正コスト ＝ 1 とすると リリース後の修正コスト ＝ 最大 150倍！ 問題発覚後のデザインリニューアル： 少なくない金額＋多くの時間 他プロジェクトの遅延・チームの士気低下につながる
訴訟のコスト • 米国：2023年だけで 2,281件 の訴訟 • 近年は4000件程度で推移 • 日本は遅れているが、法整備が徐々に進行中 • サイボウズはグローバル展開しているので他人事ではない
ブランドの評判とダメージに対応するコスト 利用しづらいサービス → SNS・口コミで拡散 → ブランドイメージの低下 → 売上・市場シェアへの悪影響 信頼度の回復には時間とお金がかかる
サイボウズのお問い合わせ事例 ⚫Kintoneはスクリーンリーダーや画面拡大で利用できますか？ ⚫アクセシビリティ方針についてまとめた資料はありますか？ ⚫JIS規格にどの程度適合していますか？ ⚫米国リハビリテーション法にどの程度対応していますか？
設計段階からアクセシビリティを考えよう 開発の上流、設計段階からアクセシビリティを検討することで ユーザーにとっても、開発者にとっても、企業にとっても 三方よしにしていくことができる
アクセシビリティの学び方
デザイナー向け：書籍・サイトを読もう ⚫アクセシビリティ学習の手引きとしての入門講座 全体像をつかもう、参考情報や書籍もたくさん紹介されている ⚫見えにくい、読みにくい「困った！」を解決するデザイン デザイン業務に役立てる実践的な内容 ⚫Webアプリケーションアクセシビリティ 1→4→2→3→8→7章の順に読もう ⚫駒瑠市〜アクセシビリティ上の問題の体験サイト アクセシビリティの問題を疑似体験してデザインに生かそう
デザイナー向け：ツールを活用しよう ⚫Spectrum さまざまな色覚を再現できるChrome拡張 ⚫Color Contrast Analyzer 2つの色のコントラスト比を測定できる
エンジニア向け：書籍・サイトを読もう ⚫アクセシビリティ学習の手引きとしての入門講座 全体像をつかもう、参考情報や書籍もたくさん紹介されている ⚫Webアクセシビリティ確保 基本の「キ」 実装時まず意識すること ⚫HTML解体新書 正しいHTMLを書くことでアクセシブルになる ⚫Webアプリケーションアクセシビリティ 1→2→3→5→7→6章の順に読もう ⚫駒瑠市〜アクセシビリティ上の問題の体験サイト アクセシビリティの問題を疑似体験してデザインに生かそう
エンジニア向け：ツールを活用しよう ⚫Axe DevTools コードベースの自動チェックツール（機械的に検出できるのは 問題の３割程度） ⚫Markuplint, Eslint-plugin-jsx-a11y マークアップのlinter
社内リソースを活用しよう ⚫サイボウズ共通アクセシビリティガイドライン アクセシビリティのガイドラインをかみ砕いて紹介しています ⚫Kintone Design System(kDS) ガイドラインやコンポーネント実装の参考に ⚫アクセシビリティ質問相談箱 デザイン・実装方針の相談、レビューなど気軽に登録してください ⚫どこでも @accessibility でメンションできます