Slide 1
Slide 1 text
UX Cafe: チームで取り組む！
サイボウズのアクセシビリティ
TCチームのアクセシビリティ
山本絵理・近藤有紀
Slide 2
Slide 2 text
こんにちは、TCです。
• TC（てぃーしー）
• 正式名はTechnical Communication
• マニュアル制作
• 製品文言の制定 など
• 多言語対応している製品は、翻訳対応もあり
こんにちは
Hello
你好
Slide 3
Slide 3 text
こんにちは、TCです。
• 東京、松山、上海の三拠点
• ライター、コーダー、翻訳者が所属
• たまにプログラミングしたりするメンバーもいる
• ゆるーい英語の勉強会があったりする
• 日報はほぼ、ご飯の話
白クマピース
上海
東京 松山
Slide 4
Slide 4 text
自己紹介
• ライティング担当が書いたものをコーダーがHTML化してWeb
に公開するスタイル。
• アクセシビリティについては、それぞれの担当分野でまず大ま
かなアクセシビリティのルールを考えた。
• 最後は話し合って決定。悩んだら一緒に考える。
山本
ライティング担当
近藤
コーディング担当
Slide 5
Slide 5 text
サイボウズ Officeとは
企業内の情報共有やコミュニケーションを活性化などを支援する
グループウェア。
11年連続シェアNo.1の使いやすい、すばらしい製品です。
https://products.cybozu.co.jp/office/
Slide 6
Slide 6 text
の、ヘルプサイト
• 「ユーザーの状況や環境に左右されないアクセシブルなサイト」を
コンセプトに、導入する人、管理する人、操作する人…など、あら
ゆるユーザーに思いを寄せ、「ほしい情報にたどりつけるように」
を目指したサイトです。
https://jp.cybozu.help/ja/o/
https://jp.cybozu.help/ja/of10/
Slide 7
Slide 7 text
ヘルプサイト
• アンケートもありますのでぜひ「お役に立ちましたか？」
「はい」をクリックしていただけるとうれしいです
https://jp.cybozu.help/ja/o/
https://jp.cybozu.help/ja/of10/
Slide 8
Slide 8 text
きっかけ
Slide 9
Slide 9 text
アクセシビリティを知った
勉強会 小林さんのお話に衝撃を受ける
気持ち アクセシビリティと小林さんに興味がわく
勉強会 理解を深めるために勉強会に参加・発表、チームに共有
決意 マニュアルに取り入れよう
Slide 10
Slide 10 text
リニューアルのチャンス
チャンス サイボウズ Officeのリニューアルがある
チャンス 製品とマニュアルは連動している
チャンス マニュアルリニューアルのチャンス
Slide 11
Slide 11 text
現状を分析した
Google
Analytics
・モバイルからのセッションが増加している
➡レスポンシブ未対応であるため閲覧しづらいのではないか
・トップページの直帰率が高い
➡トップページの探索性が悪いのではないか
ユーザー
アンケート
・マニュアルにどのような改善を希望するか？
➡検索性（探しやすさ）を回答する割合が多い
・マニュアルの希望媒体は何か？
➡スマートフォン対応を回答する割合が増加している
・製品の使いかたがわからないときどうするか？
➡マニュアル、FAQを調べると回答する割合が多い
Slide 12
Slide 12 text
やりたいことを実現するために
アクセシビリティが最適解だった
ユーザーの状況や環境に左右されないアクセシブルなサイト
気持ち
コンセプト
アクセシビリティやるぞと心に決めてはいたものの
現状のサイトを分析した結果を素直に読み解くと
アクセシビリティの観点を取り入れることが
解決策になる分析結果だったから
殊更にアクセシビリティやるぞと強調する必要がないのでは…
Slide 13
Slide 13 text
何をどこまでやるか
Slide 14
Slide 14 text
WCAG基準リストアプリを作った
気持ち なんか難しい…レコードにまとめたい
Slide 15
Slide 15 text
WCAG基準リストアプリを作った
アプリ化 ほかのチームの対応を真似してアプリ化した
Slide 16
Slide 16 text
要件を決めた
アプリ化 WCAG基準アプリと対応させて要件化した
Slide 17
Slide 17 text
スタイルガイドに取り込む
Slide 18
Slide 18 text
スタイルガイド（参考資料）
Slide 19
Slide 19 text
スタイルガイドに取り込む（手順）
昔
今
Slide 20
Slide 20 text
スタイルガイドに取り込む（表）
昔
Slide 21
Slide 21 text
スタイルガイドに取り込む（表）
今
Slide 22
Slide 22 text
スタイルガイドに取り込む（alt属性）
昔
今
Slide 23
Slide 23 text
スタイルガイドに取り込む（参照リンク）
昔
今
Slide 24
Slide 24 text
デザインとマークアップ
Slide 25
Slide 25 text
HTMLきれいきれい
• 可能な限りHTMLのsemanticsに従ったタグを使用したい。
• 見出しに背景画像、リストに背景画像、手順に背景画像、タイ
トルに背景画像…悪いことではないけれどこれが本当に必要？
• divタグ書きすぎじゃないの？？
Slide 26
Slide 26 text
同じ一つの手順だと本当に判断できる？
- 「詳細設定」タブをクリックする
- 個人フォルダをクリックする
Slide 27
Slide 27 text
こうした
- 「詳細設定」タブをクリックする
- 個人フォルダをクリックする
Slide 28
Slide 28 text
文字
• ヘルプは製品からリンクされている。
• 製品からヘルプへ移動した時、フォントの大きさや間隔があま
りにも違うとユーザーは戸惑うのでは？
• 製品のイメージとあまり離れすぎないように考慮が必要。本来
なら製品にすべて合わせるのがよい。
• けれど製品が歴史あるもの。どうしても変わらないところがあ
る。
ゴゴゴゴゴ
Slide 29
Slide 29 text
タイミングよくサイボウズの
企業サイトがリニューアル中
• 全てを製品に合わすことができない。
• ちょうどサイボウズの企業サイトがリ
ニューアルの最中。
• サイボウズの企業サイトもアクセシビリ
ティ化に取り組んでいたのでこれを参考
にしよう！
• ヘルプはWebに公開しているのでサイボ
ウズのサイトの一部でもある。
https://cybozu.co.jp/
Slide 30
Slide 30 text
キーボード対応
• サブナビゲーション、メガドロップダウン、アンカーリンクの
表示、アンケートはキーボードでも操作できるように対応。
• 「ここは操作できて、ここは操作できない」というのはしない。
• 当時自分たちのやりたいことに一番近かったのは、アクセシビ
リティを頑張っていた、Target（https://www.target.com/）。
とても勉強になった。
• ここは特に大変だったので、何度か小林さんに見ていただいた。
enter
return
Slide 31
Slide 31 text
当時の様子
↓解読頑張っている
↑うまくいくと山本さん褒めてくれる
←壊れた
Slide 32
Slide 32 text
他チームの存在
• 先行してアクセシビリティを取り入れたチームが、スレッドを
立てて情報を発信。
• いつも覗いてた。取り入れられるものは取り入れた。
• 形に残して共有することはとても大切。たとえ実装することが
違っていても、情報があるのとないのでは大違い。
• 当時これを「神々の投稿」と呼んでいた（個人的に）。
Slide 33
Slide 33 text
つらみ
Slide 34
Slide 34 text
リライト
クラウド版 999ページのリライト、3464枚の画像のalt指定
1377ページのリライト、3572枚の画像のalt指定
もう無理＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜＜サイボウズ Office 愛
やりきったことに悔いなし
パッケージ版
Slide 35
Slide 35 text
色の調整は最初にやろう
• 神様（河内山さん）は言いました。「リンクの色が基準を満た
していませんよ。」
• 平民はこう言いました。「わかりました！タスクとして修正す
るようにします。」
• しかし平民はリンクの色の変更を最後のタスクにしてしまいま
した。
• さて、リンクの色を変えてみました。ところが背景の色と合わ
せると基準を満たしていません。
• ではその背景の色を変えました。今度は本文のテキストの色と
の基準を満たしていません。
• ではでは、そのテキストの色をかえｔ・・・
地獄
あっちを直すと
こっちも直す
Slide 36
Slide 36 text
最後に
Slide 37
Slide 37 text
アクセシビリティに終わりはない
• ルール制定、取り入れたコードはテンプレート化。
次に活かせる！
• 残念ながらまだヘルプサイトはほんの一部しか対応できていな
い。
今後どんどん広げていく予定！
• 状況は日々変わるが、焦らず長い目でこつこつやっていく。
Slide 38
Slide 38 text
ご静聴ありがとうございました。