文字起こし | チームインタビュー＃6 サイボウズ アクセシビリティサイト制作裏話

オープニング（00:00）

篠原／こんにちは。デザイナーの篠原です。この番組はサイボウズデザイン＆リサーチグループのメンバーが、日々の活動や取り組みを雑談形式で紹介するコンテンツです。デザイン・リサーチ・アクセシビリティを軸に、サイボウズデザイン＆リサーチグループの今をお届けしつつ、メンバーの人柄やチームの雰囲気をお伝えします。
今回は「サイボウズアクセシビリティサイト制作裏話」をテーマに、小林さん、和馬くん、kotanoriさんの3名にお話を聞いてみたいと思います。よろしくお願いします。

全員／よろしくお願いします。

[歓声]

篠原／いえーい！こんな感じで、今回から歓声を入れていきたいと思います。

小林／効果音がしていい感じですね。

篠原／ちょっとずつ、この番組も進化していけたらなと思います。
はい。それでは、まず簡単に自己紹介をお願いします。

メンバーの自己紹介（00:54）

小林／はい。私は小林大輔といいます。今はデザイン＆リサーチのアクセシビリティチームというところでリーダーをしています。アクセシビリティの啓発活動とか製品の改善に取り組んでいます。よろしくお願いします。

[拍手]

篠原／よろしくお願いします。

西藤／はい、新卒で入社して4年目の西藤和馬です。普段はこのPoca11y（ポカリ）のチームと、他に、サイボウズOfficeとかリモートサービスという製品のデザインを担当するチームも兼務しています。よろしくお願いします。

[拍手]

篠原／よろしくお願いします。

kotanori／はい、kotanoriです。普段は、システムコンサルティング本部というところで、いわゆるSEをしてて、週2日、デザイン＆リサーチのアクセシビリティチームの活動も兼務でやっています。よろしくお願いします。

篠原／よろしくお願いします。

[拍手]

kotanoriさん新加入（01:56）

篠原／ありがとうございます。それでは、早速最初のトピックにいってみたいと思います。最初のトピックは「kotanoriさん新加入」です。実は新メンバーとして、kotanoriさんがデザイン＆リサーチグループのアクセシビリティチームに加わりました。

[歓声]

篠原／いえーい！ということで、kotanoriさんにいろいろ聞いてみたいと思います。まず最初にデザイン&リサーチグループに所属することになったきっかけを教えてください。

kotanori／はい。私、サイボウズに入社してもう5年過ぎて6年目なんですけど。

篠原／わぁ、長いですね。

kotanori／入社当時から、アクセシビリティ活動はしたいなっていう気持ちはあったんですけど、なかなか機会がなくって。で、同じメンバーのSUGIさんが入社される前のタイミングで、そういう話があるよ、ということでちょっとお話をいただいて、小林さんとお話をしている中で、社内啓発の勉強会をしようということになって、そこでいろいろ準備をしたりとか、というところが一番のきっかけですかね。それが昨年くらいで。

篠原／はい。

kotanori／あとは、このチーム自体が立ち上がるというタイミングもあって、そのタイミングで、社内で体験入部というのができるので、その体験入部をしまして、3ヶ月間体験入部して、それを経て、入部期間完了後に「兼務したいです」ということで、今年の5月からめでたく兼務となりました。

篠原／おー！

[拍手]

篠原／ありがとうございます。新しい仲間が増えて本当に嬉しいです。体験入部と、実際に兼務となって働いてみて、何かギャップとかってあったりしました？

kotanori／やってること自体は特に無いんですが、やっぱり兼務なので、もともとのやっていた仕事のSEの部分の部署の人にも「今何をやってるよ」っていうことを強くアピールするようになったことが、兼務になった大きな違いですかね。

篠原／なるほど。ありがとうございます。次はですね。kotanoriさんは、ロービジョン、弱視ということですが、どんな見え方なんでしょうか。

kotanori／大まかに言うと、左目は視野が狭かったり、欠けてたり、歪んでたり、視力自体も低かったりして、ほぼほぼ左目では文字が認識できる状態ではないので、ほぼ右目だけで見てて、で、右目も、まぁメガネとかいろいろな補正をしても、ほとんど補正が効かないような状況なので、それでロービジョンということになるんですけども。で、文字がとっても大きければ見える、小さいと潰れちゃってよく見えない、という感じですね。例えるなら、皆さんが、近眼とかいろいろあるとは思うんですけれど、普通の人が見てるのが、フルハイビジョンのテレビとかでいうと、私はもう、ふるーいブラウン管の昔のちっちゃーいテレビみたいな感じで、色も滲んでるし、残像も残るし、細かいものはよく見えないし、みたいな感じの見え方をしますね。

篠原／なるほど。今日雨が降ってますけど、天気によって見えやすいとか見えづらいとか、そういうことってあったりするんですか。

kotanori／ありますね。夜、夜目がきかないし、あと、どピーカンの日も眩しくて見えないし、実はこれぐらい曇っている日の昼間っていうのが、一番視認性が高いですね。

篠原／あ！そうなんですね。

kotanori／はい（笑）ちょっと薄暗いぐらいが一番外を歩くのにはちょうどいいです。

篠原／おー。

kotanori／ただ雨が降っていると、雨自体に反射した光とかが、乱反射して残像として残るので、雨がいっぱい降っているときはそれはそれで見づらいとか。

篠原／あー、なるほど。

kotanori／そんな感じです。

小林／じゃあ、曇りの日が、結構kotanoriさんにとっては好条件みたいな感じなんですかね。

kotanori／はい。晴れてる日だと信号がよく見えないとかあるんですけど、信号もはっきり見えるし、曇っている方が。

篠原／なるほど。kotanoriさんの見え方として、トイカメラ風にもちょっと見えるみたいなことを伺ったことがあるんですけど。

kotanori／そうですね（笑）

篠原／雨の日はなんか、すごく綺麗な美しい風景を見ていると聞いて。

kotanori／そうですね。たぶん、目がいい人に比べたら、ファンタジーな世界が広がっていると思います（笑）色もちょっと滲んだ感じで。

篠原／ちょっとレトロな感じが。

kotanori／そうですね。

篠原／kotanoriさん的に、その見え方みたいなものは、美しいと感じますか？

kotanori／そうですね。うち、屋上があるんですけど、よくちょっとした霧雨の日とか、外を見ると、実はとても綺麗に見えたり、あと夕焼けとかも、他の人にはわからない滲みというか、それこそトイカメラで撮った写真みたいな、綺麗な風景が広がっていると思います。

篠原／なるほど。

小林／面白いですね。色数もたぶん少ないですし、周りもたぶん暗くなるみたいな感じですかね。視野の周囲というか。

kotanori／若干暗く感じたり霞んで見えたりするので。綺麗に見えると思います。

篠原／我々よりも美しい世界をkotanoriさんは見ているという。

kotanori／そうですね（笑）はい。

篠原／ありがとうございます！えーっと、兼務になって、これから具体的にどういったことをしていきたいなって思ってますか？

kotanori／はい。えーっと、チームとしてやることとかっていうのはコンセプトとかあるんですけども、あのー私個人としては、あの、私は元々は、目が見えていて、中途で視覚障害になった、それにプラス、ロービジョンであるということで、私が発信する情報というのは恩恵を受ける人は、多分たくさんいるんだけども、そこにたどり着くことがなかなか難しい人たちでもあると思うので、その辺を積極的に情報発信していきたいなと考えています。

篠原／なるほど。

kotanori／はい。

篠原／私、今、近視なんですけど、今までは眼鏡なしでも見えたものが、最近見えづらくなってきていて、見づらいみたいなとこが、他人事ではなくて、自分事だなって感じるように、最近なったんですよ。

kotanori／ほう

篠原／で、ふと、もっと見えづらくなっちゃったら、生活していけるのかなとか、

kotanori／そうですね

篠原／仕事やっていけるのかなとか、結構急に不安になってきてしまって、

kotanori／うんうん、はい

篠原／なので、今のkotanoriさんの中途で視覚障害になった人に役立つ情報を発信していきたいっていうのはすごくありがたいなと私感じていて、見えづらくなった後の、生きやすさみたいなものが絶対変わってくると思うんですよね。

kotanori／そうですね。はい。

篠原／安心するというかこうすればいいんだ、みたいなことがわかると思うので。

kotanori／そうですね。そういう意味では、あの、エクストリームな近眼の人と同じと思ってもらえたら。

篠原／うんうん

kotanori／極端な、はい。なので、どんどん発信していきたいと思っています。

篠原／はい、すごく、私とても楽しみにしてます。

kotanori／はい。

サイボウズ アクセシビリティサイト制作裏話（10:09）

篠原／ありがとうございます。それでは次のトピックに行きたいと思います。
次のトピックは、サイボウズ アクセシビリティサイト制作裏話です。先日、サイボウズアクセシビリティサイトが公開されました。

サイボウズ アクセシビリティサイト
https://a11y.cybozu.io/

[歓声]

篠原／はい。今日は、制作の舞台裏について聞いていきたいなと思います。よろしくお願いします。

一同／よろしくお願いします。

篠原／サイボウズ アクセシビリティサイトですが、これは誰に向けて、どんなサイトなんですか？

小林／そうですね。まぁ、えっと、コンセプトとしては大きく二つあって、一つはサイボウズ製品を使っている、特にアクセシビリティが必要な方、障害者の方とか高齢者の方とか、えー、あとは製品を導入を検討しているんだけれども、周りに今障害者の方がいるとかそういう場合の製品の担当者の方に対して、サイボウズ製品のアクセシビリティの対応状況とかをどんどん発信していきたいなっていうコンセプトがまずあります。はい。

篠原／うんうん。

小林／で、もう一つはサイボウズ以外の会社にお勤めで、アクセシビリティを自分の会社でも啓発していきたいとか、製品改善をしていきたいんだけれども、周りの人にどう伝えていったらいいかわからないとか、どんな風に勉強会とか啓蒙活動していったらいいか、わからないっていう人に対して、えー、サイボウズでは、社内でこういう啓発活動してますよっていう、啓発コンテンツをどんどん発信していこうっていうのが、もう一つのコンセプトになります。

篠原／ありがとうございます。アクセシビリティ活動を自分の所属している会社でも広めたい、みたいなとき、確かに何をやったらいいのかって迷う人がいるので、確かにこういうサイトがあると、ここ参考にすればいいんだってなるので、ありがたいですよねとちょっと私は思いました。

小林／そうですね。何か結構このサイトについて、いろいろみんなで議論していたときに、単なる、単なると言ったらあれですけど、アクセシビリティで、技術的にこういうことを守らなければならないとか、こういうデザインをした方がいいっていう、そういうノウハウは結構やっぱりネットにはたくさんあるんですけど、

篠原／はい。

小林／それをこう、組織的にというか、チームでどう守ったりとか、どういうふうに守ってもらうか、みたいな視点の文書になると、そこまでもしかしたらないかもしれないねっていう話をしていて、自分たちがやってきたことを発信していこうっていう話になりました。

篠原／おー、そういう経緯だったんですね。

小林／そうですね。

篠原／確かに、どうチームに浸透させていくかみたいなのって、あんまり確かに見たことないです。

小林／そうですね。そこら辺もちょっとやっていけるといいかなっていう感じですね。

篠原／いいですね。えーっと、次に立ち上げることになったきっかけについても教えてもらえますか。

小林／はい。もともとアクセシビリティチーム、ポカリチームっていうふうに呼んでますけども。前提になっていることとして、社内でアクセシビリティを啓発して、それをもとに製品の開発とか、改善活動を進めて、最終的にはその情報を社外に発信して、お客様からまたフィードバックを得てまた啓発とか、改善活動を進めるっていう、そういうぐるぐるぐるぐる、ループを回していくっていうのが、このアクセシビリティチームの活動の前提にあります。そうすることによってアクセシビリティがどんどん社内で強化されていくんじゃないかなっていう考え方があります。

篠原／はい。

小林／そういう意味で、今、社内啓発とか、開発改善活動をしているっていうのを社外発信に繋げたいっていう気持ちがまずありました。で、このタイミングで、サイボウズOfficeていう製品があるんですけど、このアクセシビリティの改善が社外にリリースできる形が整いましたと。というところがあったり、あとはこの、5月の段階でGAADっていう、Global Accessibility Awareness Dayっていう、アクセシビリティの啓発デーがあるんですけど、これに合わせて、国内でアクセシビリティのイベントが多数開催されていて、じゃあこれにアクセシビリティの改善のリリースとか、社内の啓発情報とか、この辺をサイトの形式にまとめて出せるといいんじゃないかなっていう話がありました、という感じです。なので、この5月に向けてやってこうって話になりました。

篠原／ありがとうございます。前回、音声コンテンツを収録したときに、啓発、改善、社外発信のループを回すっていうこと、確かにおっしゃっていたなって、覚えていて、ばっちりそれを今、ガンガン回しているっていう状況なわけですね。

小林／そうですね、なんかそうですね、社内啓発とかは、結構それこそkotanoriさんの勉強会だったり、あとは製品改善についても、サイボウズOfficeをはじめ、色々な製品で進んできつつあるので、ここで社外発信もやってみよう、みたいな感じになりました。

篠原／やあ、いい流れですね。ありがとうございます。それでは裏話ということなので、チャレンジしたこととか、大変だったことをぜひ教えてください。

小林／そうですね、まあ、今、なんかこのイベントに間に合わせるように作ろうっていうふうに思ったっていうふうに言ってたんですけれど、これを考えたのが、そもそも思いついたのが4月20日とかだったので、ものすごい短い期間で途中ゴールデンウィークも挟まったので、和馬くんにたぶんこれは計算してもらった感じでしたよね？多分5営業日ぐらいみたいな。

和馬／そうですね。もともとそのイベントまでに公開するっていう、したいねって話をしていて、じゃあいつだって言ったら、5月20日ぐらい？21日か。なって、おお、1ヶ月で作るんだ！と思ったんですけど、このアクセシビリティチームって、メインで活動してるのって週2日だけで、しかも、まぁ、今さっき言ったようにゴールデンウィークもあり、他のその改善活動、さっきも言ったサイボウズOfficeの改善活動だったり、他の製品とかもやってるので、実稼働5営業あったのかな？ぐらいで確かやった気がします。

篠原／おお〜、すごいですね。

和馬／何で作るの？から、どういう形にするの？から、何出すの？っていうのを、みんなでどれやるー？って言いながらやった気がします。

篠原・和馬／（笑）

小林／そうですね。

篠原／このサイトの制作メンバーっていうのは、小林さん、和馬くん、konotanoriさん3名ということですかね？

小林／そうですね。3名でやりました。

篠原／モブで作ったんでしたっけ？

小林／あ、そうです。これは結構こう、みんなで一つの画面を共有するというか、そういうコードを共有できるツールがあるんですけれど、それをもとにしてみんなで一つの画面を見て編集しながら作るみたいな方法をやりました。テレビ会議で全員つないで、一つの画面を見て、ここをこうした方がいいとかっていうのを議論しながら作ったっていう感じですね。

篠原／いいですね。ちなみにどういった技術を使って今回は作られたんですか？

小林／いろいろ最初にちょっとだけ相談はしたんですけれど、今回はReactっていう、UIライブラリというか、UIの仕組みとGatsbyっていうサイトジェネレーターツールを使って作りました。はい。結構新しめな技術を使えたかなあと思いますね。普段の製品改善よりは結構新しめのツールだったかなと思っています。

篠原／kotanoriさんは確かデザイン＆リサーチグループに所属して初めてのプロジェクトにこれがなった感じですか？

kotanori／そうですね、ほぼほぼ初めてで。

篠原／どうでしたkotanoriさん、やってみて？

kotanori／私もともと、サイボウズ入る前は、OSとかデバイスとかの、すごくレベル低いっていうの、あの、低レベルっていう意味じゃなくて仮想のレベルのことをずっとやってて。あの、上のこのHTMLとかCSSとかjavascriptとかっていうのほとんど知らない所から始めたので。

篠原／おお〜、ゼロベースで！？

kotanori／そう、ゼロベースで。いちいち「うんと、この括弧は何の括弧ですか？」みたいな状態で。はい。で、それでずっとやって。はい。あの、お二人に全部いちいちレクチャーしてもらいながら。はい。（笑）

篠原／おお〜、モブでやったんですよね。

kotanori／そうです。はい。

和馬／先にkotanoriさんに、その、いわゆるモブで言うドライバーって言って実際に動かしてもらう人、書いてもらう人っていうのをkotanoriさんにお願いして、僕とか小林さんが「次こうしていきましょうか？」とか、その、まあ、アドバイスって言っていいのか、ナビゲートって言っていいのかわからないですけど、しながらやっていく感じで作っていきました。

篠原／楽しかったですか、皆さん？

kotanori／私はすっごい楽しかったですよ（笑）

篠原／あ〜よかったです。和馬くんはどうでした？ド短期でしたけど。

和馬／そうですね…一応なんかその、とりあえず何かサイト作るのに一応デザインみたいな、最低限やっておかないと、あの、ただの白黒のページになっちゃうので、そこを自分が担当しながらやっていたので、結構パニックになりながらやってましたね。「あれ？次これやるって言ってるけど、そのデザイン何もないけどどうしよう」と思いながら（笑）

kotanori／ここで、私と小林さんがしゃべっている間に、和馬くんが「作ってみてみたんですけど」（笑）

小林／すっごい勢いでたぶん作ってもらったので（笑）

和馬／「こうしたいよね〜。」って言っている時に後ろでもうツールでバーっと作って「こんな感じで大丈夫ですか？」って言って「じゃあいきましょう！」

kotanori／「それでいいんじゃない？」みたいな（笑）

和馬／なので、まだまだ改善しないといけない所がいっぱい残ってはいるんですけど。そんな感じで、みんなわたわたしながらやっていたイメージがあります（笑）

篠原／そうなんだ。打ち合わせしながら、しつつ、作って、その場で確認とってみたいな。

kotanori／そうですね。

篠原／すごいですね。

小林／いや、もうちょっと思いつくのが早ければ時間をかけてもらえたかもしれないんですけど、ちょっと今回そういうわけにいかなかったので、ちょっと和馬くんには申し訳ないんですけど、サクッと作ってもらった感じでした（笑）

篠原／いや〜いいですね。できるもんですね！

小林／本当に助かりました！

篠原／うんうん。じゃあ、結構こう最低限の所にフォーカスして、まあ、選択と集中みたいなところやってたって感じなんですかね？

小林／そうっすね。

和馬／かたっぱしから切り落としていった感じはあります（笑）

篠原／ああ、そうなんだ（笑）

和馬／（笑）

篠原／けど、とりあえずできた！まず、バージョン1はできたみたいな、そんな感じですかね。

和馬／そうですね。

篠原／いいですね。じゃあ、これから多分もっと改善をしていくと思うんですけど、どんなサイトにしていきたいですか？

小林／今後そうっすね、やりたいこととしては大きく三つぐらいあって、一つはまあ、製品情報はサイボウズOfficeの今回ニュース記事を一つ入れてるんですけど、多分発信できるものはまだありそうなので、どんどん発信していきたいなっていう風に思っています。

篠原／いいですね。

小林／はい。あとは今回啓発コンテンツっていうことで、サイボウズの勉強会で使ってるスライドとかは入れたんですけど、もうちょっと勉強会の実際の動画とかを撮ったりして「こんな感じでやってますよ」っていうのをより伝えられるといいかなっていう風に思っていますね。

篠原／いいですね。

小林／もうちょっとコンテンツは増やしていきたいっすね。あとはもともとの前提になってる話なんですけど、啓発・改善・社外発信でループを回すって言ったんですけど、ループを回すためにはお客様の声を聞かないといけないので、ちょっとお問い合わせのページとかも、もうちょっときちんと整えたいかなあと思っています。今の段階だと、サイボウズの本当に公式サイトのお問い合わせページにリンクするみたいな形式にしちゃってるんですけど、もうちょっとそれを変えて、きちんとアクセシビリティについてフィードバックというか、ができるような窓口を用意できると良いかなあと思ってます。そのくらいですね。

篠原／ありがとうございます。いいですね。和馬くんははどうですか？個人的にここやってみたいとか、改善したみたいなところあります？

和馬／そうですね。まあ、全体的にデザイン周りがとってつけた感じになっちゃってしまっているので、そこの改善はやっていきたいなとは思ってます。

篠原／おお～、楽しみです。

小林／もうちょっと時間をかけて（笑）

篠原／あ、もうちょっと時間をかけて（笑）いやー、もう進化、伸び代しかないってことですね。

小林／そうですね。（笑）いや、これからどんどんやっていきましょう。

和馬／はい。

篠原／kotanoriさんはありますか？

kotanori／私はどちらかというと、発信する情報をもっと増やしていきたい。もっと深掘りするとか。そっちの方にちょっと注力したいなとは思っていますね。

篠原／ありがとうございます。それぞれメンバーが、フォーカスしているところがこう、いい意味で違っているので、いろんな所に向けての改善ができていていくと思うので、何かすごくいいサイトにもなってきそうだなって思いました。あ、最後に一言何かありましたら、ぜひアピールをお願いします。

小林／そうですねぜひ、今言ったサイトを是非見ていただきたいなっていう話があるのと、多分近々でサイボウズOfficeの改善は継続的にできているので、これからもどんどんニュースが発信されていくと思うので、ぜひ見てもらえれば良いかなって思います。またできたタイミングでSNSとかで告知をすると思うので、ぜひ注目していただければいいかなと思います。

エンディング（24:47）

篠原／ありがとうございます。今日は「サイボウズ アクセシビリティサイト制作裏話」というテーマでお話を伺いました。皆さんありがとうございました！

小林・和馬・kotanori／ありがとうございました。

篠原／はい。この番組では、皆さんからの質問を大募集中です。サイボウズ デザイン&リサーチのメンバーに聞いてみたいことがありましたら、noteのコメント欄にコメントをよろしくお願いします。メンバーがお答えします。質問内容によっては、この番組内でメンバーと一緒に回答したいと思います。それでは、また〜。

小林／さようなら〜。またね〜。

kotanori／さようなら〜。

篠原／またね〜。

リンク
・kotanoriさん自己紹介note
https://note.com/kotanori/n/n1246affd76ae

・サイボウズ アクセシビリティサイト
https://a11y.cybozu.io/