w

事例紹介

サイボウズの組織的な取り組みとビジュアルデザイン

自己紹介

小林 大輔

樋田 勇也

@sukoyakarizumu
アクセシビリティエキスパート@toi̲toi̲ykintoneデザイナー

情報システムこそクリエイティブに

チームが扱う情報を一元管理するWebデータベース

案件管理

問い合わせ管理日報

採⽤⾯接管理

タスク管理

交通費申請

サイボウズの理想

チームワークあふれる社会を創る

今日お話すること• チームで取り組むアクセシビリティ• kintoneモバイル版のリニューアルとアクセシビリティ

チームで取り組む
アクセシビリティ

デザイナー

プログラマー

マネージャー他に優先すべきタスクがある
開発者
開発者

私たちの制作物には関係ない

チームで取り組むための2つの要素

マインド

プロセス

なぜアクセシビリティに取り組むのか？

サイボウズの理想

チームワークあふれる社会を創る

Accessibility = Access + Ability

ユーザは、わたしたちの製品にアクセスすることで何にアクセスしようとしているのか？

ユーザ

サイボウズ製品チーム

サイボウズにとって、アクセシビリティとは「ユーザがチームにアクセスできる能力」

アクセシビリティを確保することは「チームに参加したい」というユーザの願いを尊重すること

「マインド」を伝える
1. グループウェアで啓発する
2. 勉強会を開催する
3. 当事者によるユーサビリティテストを開催する

1. グループウェアで啓発する

投稿した内容• アクセシビリティに配慮したHTML・CSS• スクリーンリーダーの使い方• ガイドラインや法整備の現状• サイボウズがアクセシビリティに取り組む理由2. 勉強会を開催する

Webアクセシビリティ勉強会• 輪講形式で章ごとに発表• 「マインド」を説明する• 参加メンバーが多様に•

プログラマー

•

デザイナー

•

プロダクトマネージャー•

ドキュメントライター

3. 当事者によるユーザビリティテスト

ユーザビリティテストの効果• アクセシビリティに取り組む価値を体感できる• アクセシビリティに取り組まないことによる問題を体感できる• 単なるデザインや実装の問題ではない• チームの「理想」と「現実」のギャップチームで取り組むための2つの要素

マインドプロセス開発プロセスに取り込むには？

要件定義

デザイン

実装テスト

アンチパターン「最後に一人で」

要件定義

デザイン

実装テスト

チームが「自力」で取り組めるように支援する

要件定義デザイン

実装

テスト

支援

支援

支援

支援

自力で取り組めるように支援する
1. 要件定義

ガイドライン作成

2. デザイン&実装

モブデザイン・モブプログラミング

3. テストアクセシビリティ検証会

要件定義

ガイドライン作成• アクセシビリティの品質要件をチームで合意できる• ガイドラインを守る方法や効果について、知見を深められる• 誰がどんな項目を守るべきか、議論できる

ガイドライン作成のポイント• チームメンバーと一緒につくる・運用する• ガイドラインそのものより、ガイドラインにまつわる議論が大切• シンプルにする• 最初から複雑なものを提供しても守りきれない• チームによって必要なガイドライン項目は異なる

サイボウズのアクセシビリティガイドライン

デザイン
ガイドライン

実装
ガイドライン

実装
ガイドライン
詳説

デザイン•実装 モブデザイン・モブプログラミング• 普段の制作を複数のチームメンバーで行う• アクセシビリティをはじめ、デザイン・実装に必要な観点を議論しながらつくるモブデザイン・モブプログラミング

モブデザイン・モブプログラミングの効果• 修正コストを低くおさえられる• 現実的な解決策を議論できる• アクセシビリティを考える習慣付けができるテスト

アクセシビリティ検証会• 週一回ペースで開催• 前週に作成した機能をスクリーンリーダーを使って操作• 操作できることを確認• 操作できなかった箇所があれば原因や対策を議論

アクセシビリティ検証会のポイント• チームメンバー自身に検証してもらう• 検証方法に慣れてもらう• 実装した直後に開催する• 原因や対策が議論しやすい

チームでアクセシビリティに取り組むためにマインドアクセシビリティに取り組む価値を共有する

プロセス

チームが自力で取り組めるように支援するkintoneモバイル版のリニューアルとアクセシビリティ

kintoneモバイル版のリニューアル• 7年ぶりの全面刷新

主にやったこと
1. 情報設計（IA）
2. ビジュアルデザインに落とし込む
3. ユーザビリティテストで検証する

「アクセシビリティ対応」は…?
• 「アクセシビリティ対応」という特別な対応はしていない• すべてのプロセスで、すべての人が使いやすいものを作ろうとしてきた「すべての人」にチームワークを

情報設計（IA）

リニューアル前の問題点• kintoneの情報構造をイメージしづらいリニューアル前の問題点• Kintoneの情報構造をイメージしづらいリニューアル前の問題点• 操作の「コツ」を覚える必要があるリニューアル前の問題点• デスクトップ版との差が大きい• デスクトップ版で行ったあの操作はモバイル版だと…？

リニューアルの指針• 誰かに特化しない• 誰かに特化しない = 無視する ではない
• みんなが使えるものを目指す• 作法を統一する• モバイルしか使えない人もいる• デスクトップ版を知らなきゃ使えないよ！はNGリニューアルの指針• 覚えることを減らす• 操作中の記憶の負荷を減らす

情報構造の改善• タブバーを廃止してハンバーガーボタンを使う

情報構造の改善
とりあえず左上の• タブバーを廃止してハンバーガーボタンを使う
ボタンを押したらOK

他のページに行くにはまずトップに戻って、他のタブを選択して…

情報構造の改善• 「チラ見」できるようにしてタスクを中断しない情報構造の改善• 構造のルールを作るグローバルな操作

情報構造の改善• 構造のルールを作る

コンテンツの表示を切り替える

コンテンツを操作する情報構造の改善• デスクトップ版とモバイル版を適度にそろえる

よりよい情報設計は「すべての人」にとって重要• 視覚障害のユーザ• 音声で読み上げても、情報構造が理解できる• 画面を拡大しても、情報構造が理解できる• 認知・記憶障害のユーザ• 操作を覚える必要がない• タスクを忘れても、すばやくタスクに復帰できるビジュアルデザインに落とし込むリニューアル前の問題点• トーンにメリハリがなく重要な箇所がわかりづらいコントラスト比を基に画面を設計する• 人間の目は明度を一番強く認識する• 強調のバランスは明度（コントラスト）を基本に考える方が理にかなっている• アクセシビリティのコントラストの基準を有効活用• 「自分」の目にとってコントラストが認識できても「みんな」の目にとってコントラストが認識できるとは限らない

WCAG2.0 最低限のコントラスト比A
21 : 1A A

A
4.5 : 1

A

A

A

AA A
1:1

色を有効に使う• 色をルール化する• 操作は青色、コンテンツは白、ナビゲーションは黒、など• 色の違いも含めたコントラストで重要な操作をすぐにわかるようにする

色を増やしすぎないようにする• 色を増やしすぎると使い方が複雑になる• 色だけで情報を伝えようとしてしまう• 大事なことが色で強調しづらくなる• ユーザーが覚えることが多くなる

同じ色として認識されているとは限らない

一般色覚

P型色覚

T型色覚

テキストをちゃんと使う• 大事な操作はテキストでも伝える

テキストをちゃんと使う• 大事な操作はテキストでも伝える

テキストをちゃんと使う• 開発者の用語を使わない• 「内容」は社内だと「レコード詳細」と呼んでいるけど….

テキストをちゃんと使う• タイトルや見出しで正しくコンテキストを伝える

壊れにくいUIを意識• いろいろな入力データ＆使用環境を想定• 文字を相対値で指定（rem,em,%）• 固定幅を使わない（リキッドレイアウト）• うまくオーバーフローする• 文字が溢れて省略、改行しても壊れないように壊れにくいUIを意識拡大縮小しても壊れない

WCAG2.0 1.4.4 テキストのサイズ変更• 以下のいずれかが満たせればよい• 画面（ブラウザ）全体を200%まで拡大できる• 文字の大きさを200%まで拡大できる• 文字サイズ調整ボタンは不要

小中大ユーザビリティテストで検証する

いろいろなユーザに対してテスト• エンドユーザー• プロジェクトリーダー• 管理者的な人• 高齢者の人（意思決定者に近い人）• ロービジョンの人• 全盲の人ユーザビリティテストで検証したこと• 情報設計は狙い通りになっている？
• 思わぬ落とし穴はない？
• テキストはちゃんと伝わる表現になっている？
• どんなユーザーでも使えるようになっている？

ユーザービリティテストでの結果
視覚的に認知しやすいように感じた

直感的に分かりやすかった

編集中だってことがわかりにくい
アプリ内検索だとわからなかった

保存ボタンに気づけなかった

実はユーザビリティテスト由来の改善がたくさんどこを検索するのか表示しよう

保存ボタンは下に配置しよう「編集中」を表示しよう思わぬ発見もあった• 色を反転すると見えない色があった思わぬ発見もあった• 音声読み上げでは、コンテキストが伝わらないことがあった• コンテキストが視覚的な位置に依存していたナビゲーション

1

タイトル

2

ナビゲーション

3

まとめ• アクセシビリティの「特別な対応」はしていない• だけど、よりわかりやすく使いやすくを目指した結果アクセシビリティの向上につながっているアクセシビリティは普段のビジュアルデザインの延長• 情報設計をちゃんとやる• 色やコントラストの使い方をちゃんと考える• いろいろな環境でデザインが崩れないようにする
普段のデザインとアクセシビリティ対応は地続き「特別な対応」ではない

今日お話したこと• チームで取り組むアクセシビリティ• kintoneモバイル版のリニューアルとアクセシビリティ

アクセシビリティは「つながっている」

今できることからはじめよう