国内最大級デジタル情報アクセシビリティカンファレンス「Japan Accessibility Conference vol.2」に登壇してきた

f:id:ryo_abe:20190720164412j:plain
Japan Accessibility Conference vol.2 に登壇するfreeeのメンバー(©noblejasper

こんにちは、freeeでiOSアプリ開発をしているabeです。

2019年7月20日にAbema Towersで開催された Japan Accessibility Conference digital information vol.2 (以下、JAC)に、freeeのアクセシビリティーおじさん達(nakaneさん, ymrlさん, melonさん, abe)で登壇してきました。 (iharaさん、nobjasさんは運営スタッフとして参加)

japan-a11y-conf.com

prtimes.jp

Japan Accessibility Conference(JAC)とは

Japan Accessibility Conference vol.2 のメイン画像

JACは、アクセシビリティに関わっている人やコミュニティにスポットライトをあてたいという思いから、企業内でアクセシビリティに関わっている人などの有志によって運営されているイベントです。 日本におけるアクセシビリティの盛り上がりを可視化する目的で、2017年11月に開催された第一回目に続き、二回目となる今回は、「デジタルインフォメーション」をテーマに、デジタルアクセシビリティに軸をおいた会となりました。

【イベントレポート】日本最大級のアクセシビリティイベント「Japan Accessibility Conference - digital information」開催|freeeのプレスリリース

日本最大級のアクセシビリティーイベントとのことで、当日は約300名が来場され、日頃企業内でアクセシビリティーにまつわる活動に取り組れている方々の話や障がい者当事者の話など、24名のスピーカーによる14のセッション がありました。 freeeは前回のvol.1に引き続きスポンサー もさせていただきました。

(前回の様子) developers.freee.co.jp

freeeはこんなことを話してきました

nakaneさんがファシリテーターをしている様子
nakaneさんがファシリテーターをしている様子(©noblejasper

freeeでは全盲エンジニアがiOS/Android/WebUIエンジニアにダメ出しした結果と題し、nakaneさん: ファシリテーター、パネラー: ymrlさん/melonさん/abeで、日頃のアクセシビリティー対応を進める過程でnakaneさんから受けたフィードバックや、それぞれのエンジニアのアクセシビリティーにかける思いなどをパネルディスカッション形式で話してきました。

www.youtube.com

スライド

(以下、各テーマごとにパネルディスカッションの内容)

これまでどんなフィードバックが(nakaneさんから)ありましたか?

  • ymrl(WebUI)
    • アイコンに代替テキストがセットされていないためスクリーンリーダーで読み上げられない(社内用語:「虚空を探る」
    • フィードバック:「チェックボックスがある(らしい)んだけど読み上げられない。スタイルの問題かな?」
    • スタイルシートでチェックボックスの幅を0にして、独自のチェックボックスを実装するテクニックがある
    • だが、NVDAでは幅0のチェックボックスを読み上げらなくなるということにnakaneさんからのフィードバックで気がついた
  • abe(iOS)
    • フィードバック:「iOSの人事労務アプリで半休って取れないの?まだ未実装なのかな?」
    • 半休の機能は実装されており、VoiceOverも対応済みだった
    • セルをタップすると半休や出勤などの勤怠の種類を選べるセレクトボックスが表示されるのだが、タップできることにnakaneさんは気づけず、その機能がないと思ったとのこと
    • (後日談だが、そのセルがタップできることはaccessibilityHintというヒントを使って読み上げられていたが、nakaneさんはヒントをoffにしていたため読み上げられていなかったことが判明した。とはいえ、セルのタイトルがデフォルトで「出勤」となっていためボタンと認識しにくかったのが原因とも言える)
  • melon(Android)
    • フィードバック:「Androidの人事労務アプリが全然読み上げられないみたいなんだけど、なんでだろ??」
    • 読み上げは正しくできていたが、読み上げるまでに1秒ほどかかっていたため読み飛ばしてしまっていた
    • 読み上げる文字量が多いと読み上げるまでに時間がかかる模様。読み上げる文字量をバラして調整した

開発の中でアクセシビリティーを意識するようになったのはいつ頃からですか?

パネルディスカションで melon さんが話している様子
パネルディスカションでmelonさんが話している様子(©noblejasper

  • melon(Android)
    • 去年の夏ころにAndroidの人事労務freeeのTalkBack対応を初めたのがきっかけ
    • それまで意識したことがなかったためそんな世界があるのかとハッとした
  • abe(iOS)
    • アクセシビリティーはお金がある海外の企業が取り組むものだと思い込んでいた
    • iharaさんやnakaneさんがjoinされたことがきっかけに
    • 調べてみると情報量が少なかったため、自分が情報を発信していくと界隈で目立てそうだなと思った
  • ymrl(WebUI)
    • freeeに入った5年半前から出来ることは取り組んでいた
    • ただ、「手を加えることでどれくらいのことが出来るようになるのか」や「やれていないとどれくらいの人が困るのか」といった実感はなかった
    • そのため気になるところにaria-labelを差し込んでみたりなどはしていたが、周りに強くやろうよと言ってこなかった
    • そんな中、nakaneさんが入社される前にダメ出し会をやってもらった際に、「ここがダメだとこれが出来ないのか」、「ここが出来てるからここが使えてるのか」といったことが見えてきて、そこから急激にちゃんとやらんとあかんと思い始めた
  • nakane
    • やはり近くに当事者がいるというのは影響が大きいと言えそうです
    • 当事者は使えないというフィードバックだけでなく、ここは使えてるよというフィードバックも大事そうですね

アクセシビリティーを意識した開発に必要な情報はどのように集めていますか?

  • ymrl(WebUI)
    • 自分が狙った情報が無いのでnakaneさんに聞いてしまう
    • あとは自分でとにかく試す
    • また、ほとんど場合、jsを使わずにHTMLのみで構成されているものであればReactでも出来るはずなので、Reactでの実装といった観点では調べてない
    • そもそもReactをやってる人でアクセシビリティーに興味がある人はあまりいなさそう
  • abe(iOS)
    • VoiceOverにおける情報というのはほとんどない
    • やはりApple公式のAPIリファレンスや、WWDCのaccessibilityのセッションが情報源になる
    • 標準的な画面ではなく、カスタムされた画面だと途端に読み上げられなかったりする
    • 会計iOSアプリのとある画面のVoiceOver対応に困っていたら、解決したいことがWWDCでまんま話されていた
  • melon(Android)
    • Google公式のリファレンスを情報源に対応している
    • 基本的にはこれである程度読み上げられる
    • だが、nakaneさんに見せると「これでは良くないね」といったフィードバックをもらう
    • そこからは情報は無いのでnakaneさんに確認してもらいながらトライアンドエラーで試していく

アクセシビリティー改善に取り組んでみて直面した難しさはどんなところですか。また思っていたより簡単だったことはありますか?

  • ymrl(WebUI)
    • 難しさ
      • MacのVoiceOverで検証しているが、nakaneさんはNVDAを使用しているため挙動が異なることがあった
      • 一方では大丈夫だが一方ではうまく動かない、といったことがあって一筋縄ではいかないなと感じた
    • 簡単さ
      • 前述の虚空についてはパターン化されているため、やり方が分かればあとは展開していくだけ
  • abe(iOS)
    • 難しさ
      • アクセシビリティー対応にのみ時間を割けるわけではなく、OKRタスクやbugfix等の通常業務ももちろん抱えているため、作業時間の確保が難しい

最近取り組んだことで自慢したいことありますか?

パネルディスカションでymrlさんが話している様子
パネルディスカションでymrlさんが話している様子(©noblejasper

  • ymrl(WebUI)
    • ブランディングチームが作った配色パレットを使って、2色の全組み合わせからコントラスト比を計算する巨大なGoogleスプレットシートを作った
    • これによりコントラスト比が足りていない組み合わせがひと目で分かるようになった

最近悩んでることはありますか?

  • melon(Android)
    • デザイナーやエンジニアなど、皆のアクセシビリティーに対して意識合わせが難しい

最後に一言

パネルディスカションでabeが話している様子
パネルディスカションでabeが話している様子(©noblejasper

  • ymrl(WebUI)
    • デザインシステムを使ってコンポーネントを配置したら勝手にアクセシブルになっているような仕組みを実現するぞ
  • abe(iOS)
    • iOSのVoiceOver対応は簡単だぞ!凝ったような画面になると途端に読み上げられなくなったりするのでコマ目に確認すると良いですよ
    • VoiceOverは健常者にとっても便利だよ。記事を読んだりするのが捗ります
  • melon(Android)
    • 人事労務freeeのTalkBack対応はできているが、会計がまだなので完璧にしていきたい
    • 親切だねと言われるようなアプリにしていきたい

他にも様々なセッションがありました

当事者への質疑応答セッションの様子
当事者への質疑応答セッションの様子(©︎shizooo85

精神・発達障がい者が社会活動に参加するにあたっての課題や取り組みについての紹介や、色弱の方が語る色の重要性についてのお話であったり、障がい障当事者との質疑応答など、さまざまなアクセシビリティーに関連するセッションがありました。

(ぞくぞくと動画が上がっているようです。その他の動画はこちら

懇親会がメインと言っても過言ではない

懇親会の料理
懇親会の料理(©︎cure_tomoki

懇親会では障がい当事者の方々との交流はもちろん、普段アクセシビリティーに取り組まれてる人同士の悩みの相談やセッションでは聞けなかった細かな取り組みについてなどお酒を交わしながら伺うことができました。

懇親会で交流している人たちの様子
懇親会で交流している人たちの様子(©︎cure_tomoki

JACでは各セッションの最後には質問タイプはもちろんありますが、懇親会ではより突っ込んだ話が聞くことができるため、むしろ懇親会の方が重要なのではと感じました。

まとめ

我々は他のセッションとは異なり、パネルディスカッションという形式でやったことで、あまり型にハマらず各々が思い思いに話したいことを話せたかなと思います。また日頃社内の方々とアクセシビリティーについて話すことはありますが、JACを通じて社外のアクセシビリティーに取り組んでる方々のお話や、さまざまな障がいを抱える方々のお話を伺うことができ、とても刺激になりましたし、やってかなければならん!という気持ちがより強くなりました。 アクセシビリティーやってくぞーーー!!

トロントで行われた Strive. The 2019 UX Research Conference に参加してきました

UXチームの @toofu__ です。以前オンライン英会話の先生から「いまこんな感じのシューティングゲーム作ってるんだ、何かアドバイスくれよ」と言われ、良い感じの英語が出てこなくて「more zombies.」とだけ返事したことがあります。

普段は会計freeeのUI設計やデザインシステム構築をメインで行いつつ、ユーザーインタビューやデータ分析などのリサーチ業務も行ったりしています。リサーチに関する知見を集めるべく、6月6日〜7日の2日間、カナダのトロントで行われた Strive. The 2019 UX Research Conference に参加してきました。

uxresearchto.com

トロントの風景
トロント、英語とフランス語しかない品川みたいな感じでした。

UX Research Conference って?

トロントを拠点に活動しているUXリサーチャーのコミュニティ「UX Research Collective」が主催するオフラインカンファレンスで、年一回行われています。学生やUXリサーチ初心者向けのものから、UXリサーチチームのマネージャー向けのものまで、ワークショップを含めて32のセッションが行われ、約1,000人が参加したとのことです。

ちなみに日本人は自分以外に見かけませんでした(「日本からの参加者がいる」というので会場から拍手を受けたくらいです)。

会場内の写真。ステージ両脇には書き起こしされた発表内容が表示されている。
アクセシビリティにも配慮されており、リアルタイムの書き起こしテキストも表示されています。英語ヒアリング苦手マンが助かる

どんな感じだったか

セッションはいくつかのコースに分かれており、自分は1日目の "Leadership in Research" コースと2日目の"Main Stage" コースに参加しました。

1日目のLeadership in Researchコースは比較的小規模なセッションで、参加者も150人くらいでした。「UXリサーチのインパクトを組織の中でどのように高めていくのか」に焦点が置かれ、LyftやGroupon、Googleといったテック企業のリサーチ部門リーダーやシニアリサーチャー的な人たちが各自のテーマで45分ほどの講演をしてくれました。

講演の様子。窓をバックにスクリーンが用意されている
IDEOのDesign Research LeadであるOvetta Sampsonによる「データサイエンスとUXリサーチの融合に向けて」

休憩時間の参加者の様子
休憩時間に軽食をとりながら参加者同士でコミュニケーションを取る感じでした。

2日目のMain Stageコースはイベント参加者すべてが参加する大規模なカンファレンスで、AtlassianやSalesforce、Slackなどのテック企業のリサーチャーや、カナダ政府のデジタル専門組織であるCanadian Digital Serviceのリサーチャーといった様々な登壇者による9つの講演がありました(ボリューム多くて正直疲れた)。

講演の様子
SlackのDirector of Research & Analytics、Christina JanzerとStaff Researcher、Michael Massimiによる「Slackでのリサーチ体制構築」。ケーススタディとして、Slackの日本ローカライズプロジェクトにおけるリサーチが紹介されていました。

客席の中にグラフィックレコーディングのブースが用意されていて、大きな白いボードにグラフィックレコーディングが行なわれている
会場でグラフィックレコーディングも行われていました。

セッション自体のまとめはUXR Collectiveのブログでも公開されているので、ここでは私なりのまとめを簡単に書いてみます。

数十人規模のUXリサーチチームを有する企業がゴロゴロしている

カンファレンス以外に休憩時間に参加者同士で会話した内容も含まれるのですが、まずリサーチチームが組織としてだいぶ完成されている事例をよく耳にしました。

Airbnbは100人規模のリサーチチームを有し、そのうち50人がUXリサーチャー。Googleでは単体のプロダクト(Google Maps)のリサーチに従事するUXリサーチャーが60人以上いるなど、組織全体の規模の違いはあるものの、UXリサーチという役割が組織の中に浸透している様子を感じました。

また、そういった組織はUXリサーチ業務の効果を最大化するためのResearchOpsも発展してきており、すでにResearchOpsチームを立ち上げて数年経つ企業がいくつも存在しています。Atlassianでは30人規模のリサーチチームに対して、リクルーティングやリサーチ結果のアーカイブ、リサーチ技術の収集検証を専門的に行うResearchOpsチームを6人有しているそうです。

UXリサーチャーはプロダクトの未来を理解するエキスパートである

「UXリサーチャーは未来のニーズやインサイトを自分たちで見つけ出していくプロフェッショナルである」という話がSlackのDirector of Research & AnalyticsであるChristina Janzerからされました。

当然、リサーチ自体が専門スキルです。Grouponではコンバージョンと同列に扱われる信用(trust)を計測するため、心理学の博士を持つリサーチャーが1年かけて心理測定尺度を用いた計測体制を構築したという話が紹介されていました。参加者同士の会話では「心理学やHCI(Human Computer Interaction)の学位を持った優秀なリサーチャーを採用するのが難しく、リサーチチームの体制を整えられていない」というような話もされていました。

スキルだけでなく働き方においても、「リサーチ業務が社内下請けになってはいけない」という話がありました。プロフェッショナルである自負をリサーチャーが持ち、組織から裁量を与えられ、未来のニーズやインサイトを見つけ出すことが重要ということです。

古風な建物の写真。煉瓦作りで中央には大きな塔がある
会場の眼の前に古風な屋敷?があった

freeeもUXリサーチチームをつくりました

UXリサーチ組織の先進事例を見てきた感じになるのですが、freeeも7月からUXリサーチチームを立ち上げました。ざっくり言うと、プロダクト成長に向けたユーザー理解をミッションとした専門チームです。これまでUXデザイナーがデザイン業務と並行して行ってきましたが、専門チームをつくることで、よりユーザーにとって本質的に価値のあるプロダクトづくりを目指します。

というわけで、freeeではUXリサーチャー、およびリサーチに強みのあるUXデザイナーを募集しています。ご応募お待ちしています。

jobs.freee.co.jp

アクセシビリティの祭典 2019 に参加してきました

こんにちは。freee 関西支社でアプリケーションエンジニアをしている @kumatch です。 2019年5月16日に神戸で開催されたアクセシビリティの祭典 2019 に参加してきました。 アクセシビリティの祭典は、アクセシビリティについて考える日である「Global Accessibility Awareness Day (GAAD)」の5月第3木曜日にあわせて毎年神戸で開催されているイベントです。

freee はアクセシビリティ向上を日々取り組みしており、本イベントへは昨年に引き続き今年もスポンサーとして協賛させていただきました。 ちなみに freee 東京本社の方でも GAAD にあわせてイベントをやりたい!ということで同日にアクセシビリティ LT を開催しておりました。こちらも多岐にわたる発表があり大盛況だったとのことです。

connpass.com

togetter.com

とにかくイベントがアクセシブル

さて本イベント、アクセシビリティの祭典という名前だけあって、イベント最中はとてもアクセシブルな対応でいっぱいでした。

会場ではセッションの発表すべてに手話通訳が用意されているのはじめ、UD トーク による多言語リアルタイムな字幕の提供が行われており、会場前面のステージ横スクリーンに表示がされていました。加えて各自スマートフォン内に UD トークを導入しておけば、手元で同じテキスト字幕の参照をすることも可能。音声の誤認識によるミステキストがどうしても表示されてしまうこともあったのですが、それもスタッフの方々が即時に補正をしてくださっていました。

発表内容にあわせて手話通訳が行われている様子 発言にあわせてUDトークを使ってリアルタイム字幕が前面スクリーンに表示されている様子

リアルタイム字幕は、聴覚障碍のある方のみならず健常者であっても聞き逃しや聞き慣れない言葉による不明瞭な理解をサポートしてくれますので、とても素晴らしい設備だと思いました。

セッション

当日のセッションでは11個の発表があり内容も様々で盛りだくさんでした。弊社からは yoshi こと竹田が登壇し、 freee のアクセシビリティへの取組みを発表しました。

freeeのアクセシビリティの取り組みを発表する yoshi

本発表では、freee がなぜアクセシビリティに取り組んでいるのかの理由、そしてプロダクト開発の中でアクセシビリティ対応を実際にどのようにして進めているかをお話しさせていただきました。freee では所属チームを横断したアクセシビリティ対応のためのワーキンググループが結成されており、日々の活動報告や情報共有を行なっています。グループの活動の1つにアクセシビリティQAというものがあり、リリース前の機能に対してしっかりとアクセシビリティチェックを行い適切に対応している流れを事例と共に紹介しました。

speakerdeck.com


その他、様々なお話がありました。その中でいくつか抜粋してご紹介させていただきます。

インクルーシブ対応としての字幕のトレンド

先程も紹介しました本イベントの発表をリアルタイム字幕表示させている「UDトーク」の機能として、音声認識によるリアルタイム字幕出力をはじめ、翻訳、議事録、さらにはカメラを通して字幕部を表示してくれるシアターモード、ウェアラブル端末を使った利用方法などを順に紹介。字幕にはふりがなも振られるため海外の方にも好評とのことで、ご自身が地域活動として行なっておられる Code for Nerima でも有効的に活用されているとのこと。ここで本イベントのタイトルにもある「インクルーシブな世界」とはどういうものかという説明として、exclusion (多数派だけが使える), separation (多数派・少数派がそれぞれ専用で使える), integration (多数派が使えて、あわせて少数派も専用で使える), inclusion (全員が同じように使える) の4つを示した上で、先程の Code for Nerima にも多種多様な人たちが1つの事柄(= 練馬区)を元に集まっているこの状態こそが inclusion な世界であると紹介されました。 アクセシビリティとは「体験と想像力」であり、初めて知って考える事が増えたこと、そしてそれが活動のエネルギーになるという点を挙げられており、これはまさしくそのとおりであると深く感じました。

また、コミュニケーションバリアフリープロジェクトという、障碍により情報が正しく受け取れないことで疎外感を感じてしまいコミュニケーションバリアが出来てしまうことの改善を目的とした活動を紹介。登壇者同士の質問の1つで、「音声認識によって生活はどうかわったか?」という問いに対して、以前まではその場の自分は置いてけぼりを受けている感覚であったのが、自身のリアル感を高めてくれているようで本当に感謝しているとお答えされていたのが印象的でした。

ウェブアクセシビリティ最新動向 2018-2019

「品質への社会的要求」「アクセシビリティ/UX デザイン」「WCAG 2.1」の3つの視点でのお話をされていました。 Web ユーザの多様化とインフラ化を背景に海外では法規制による品質要求が高まっていることを挙げられ、日本でも品質基準の担保を求める、より適切な法規制があるべきでは?という問いかけと共に、これを仕方なく対応するのではなくユーザを守るための基準として有効的に利用しようという旨の提案がありました。

アクセシビリティとUXデザインの実践的な取り組みが多くみられるようになってきたという事例として、デザインシステムを通じたアクセシビリティ向上という観点より freee が取り組んでいるデザインシステム vibes を紹介していただくという場面もありました。

インクルーシブなサービス改善

Yahoo!天気・災害のアクセシビリティ改善として、社内におられるロービジョンの方々に協力をいただいたユーザーテストを実施したという事例の紹介をされていました。

ユーザーテスト参加者の方々から変更前後の様々な感想・フィールドバックをもらったものの、人によって全然違った(わかりやすい・わかりにくいなどの真逆の感想)という結果だったとのこと。それに対し、天気・災害サービスとして伝えるべき情報にプライオリティをつけ、その中で重要な要素の情報がロービジョンの方に向けて必ず伝わるよう改善を進めていったそうです。

最後に障碍を持つ方々が本改善に参加した感想のまとめをお話しされていたのですが、自社で提供しているサービスの UI/UX 改善に貢献できたということに対し喜びがとても大きかったという旨をあげられていた点がとても印象に残っています。

アクセシビリティの未来を考える

アクセシビリティにより未来はどうなるか、それを踏まえて今私たちが取り組むべきことは何かというテーマの元パネルディスカッション形式で進められました。

アクセシビリティによる明るい未来の1つの側面として、これから未来に向けて生産年齢人口は減少するという見込みがあるものの、その問題に対してロボティクスや AI といった技術が有効であり、これまで人が行っていた作業をロボットやAIに置き換えることによる代替、あるいは障碍者、高齢者を補助するパワードスーツ、遠隔操縦(アバター)、情報変換の仕組みを駆使することで多くの方が無理なく働くことができるようになり、結果生産力をカバーすることができるだろうという点をあげられていました。

しかしその一方で、海外ではアクセシビリティの観点で拘束力の強い法規制で権利がしっかりと守られている(前述のウェブアクセシビリティ最新動向でも触れられていた点ですね)のに対し日本では障害者差別解消法が施行されてから3年経ってもまだまだ進んでいないという点に触れ、アクセシビリティを推進していくにはもっとしっかりした法制度を施行しなければならないという課題も。

最後に今の私たちがすべきこととして、まずはアクセシビリティを一人ひとりが認識し多様性の理解をすること、その上でデジタルなもの (= Web で扱えるもの) は加工がしやすく人にあわせやすいものであるのでしっかりと対応を進めていくこと、また Web 以外のもの (新しく出てきたデバイスなど) については今は Web アクセシビリティの延長でやってきているものの、それぞれにあわせて、より良い対応を考えていけるのではないかという点があげられました。

展示について

会場ではセッションと共に、障碍を持つ方へのサポートを目的とするハードウェア、ソフトウェアが多く展示されており、実際に触れられるようになっていました。タイムスケジュールの中に「展示ブースを見学する時間」が設けられているなど、一人でも多くの方に関心を持ってもらえるよう取り込みされているのが良かったと思います。実際にその時間の展示ブースは大盛況でした。

1階の展示ブースに人が集まる様子 2階の展示ブースに人が集まる様子 展示ブースに置かれていた点字ディスプレイ

最後に

私自身、アクセシビリティ関連のイベントへの参加は初めてだったのですが、とても良い影響を受けることができたイベントでした。とにかく「優しい世界がそこにある」というのが率直な感想です。

これまでコツコツと活動を続けてこられた方の、成果といえる喜びであったり、これからもしっかり推進していくぞという意気込みであったり、あるいはまだまだ良くならなくてもどかしさの思いといった気持ちをひしひしと感じることができましたし、それを受けた私自身もどんな小さなことでもできることから1つずつ積み重ねていこうと思う気持ちがまた強く思えるようになった一日でした。未来の自分と仲間と、これから生まれてくる子供たちのためにも、アクセシビリティやっていくぞ。

デザインシステムの勉強会『designsystems.tokyo』を開催しました

会計 freee のUI設計や、プロダクト横断のデザインガイドライン整備を担当している @toofu__ です。ゴールデンウィークは10日間で7回UberEatsを注文し、先日は土日2日間で4回注文しました。

少し間が空いてしまいましたが、ゴールデンウィーク前、4月24日にデザインシステムに関する勉強会『designsystem.tokyo』を、弁護士ドットコム株式会社様と合同で開催しました。 designsystems.connpass.com

designsystem.tokyoって?

昨今、Webサービスやアプリの開発において「デザインシステム」が注目を集めています。「多くの人数で長期間にわたって設計・開発を行う際に、一貫性を保てるようにデザインパターンやルールなどを定めたもの」とされており、公開されているものだと GoogleのMaterial DesignSalesforceのLightning Design System などが有名です。弊社でもその構築を進めていますが、いざやってみるとなかなかに大変です。

去年末にデザインシステムの構築と運用手法をまとめた書籍である『Design System - A practical guide to creating design languages for digital products』の日本語版が刊行されました。それをきっかけに、監訳者の佐藤伸哉さんが旗振り役となり、「日本でデザインシステムの実践を進めている企業が集まり、その知見を交換するコミュニティをつくろう」という目的で生まれたのがdesignsystem.tokyoです。

note.mu

コミュニティに所属する企業が持ち回りで主催する形で勉強会が行われており、その第2回として弁護士ドットコム様と弊社主催の会を行わせていただきました。 会場入り口に設置された看板

各社のデザインシステム実物を肴に酒を飲む会

弁護士ドットコム様との事前の打ち合わせにおいて決まったことは「各自がつくっているデザインシステムの実物を見ながら議論を行おう」ということでした。デザインシステムはその性質上、企業のプロダクト開発の内情にかかわることが多く、なかなか一般に公開しづらいものであります。しかし現場のリアルな議論をするためにはつくっているデザインシステム実物を囲むことが重要と考えたため、参加者をコミュニティ所属企業に限定して成果物を開示することにしました。

弊社はデザインシステムとしてUI/UXガイドライン「Groove」UIコンポーネントライブラリ「Vibes」を整備しています。経緯や概要については先日行った弊社主催のイベント『freee Tech Night』で簡単に触れましたが、designsystems.tokyoではその中身であるGrooveの社内Googleサイトや、VibesのSketchファイルおよびStorybookをプロジェクタに映しながら構成について説明させていただきました。

現物をみながら、参加者の方たちと下記のような観点で議論を行うことが出来ました。

  • ガイドラインで定義されるべき内容
  • アトミックデザインを用いたUIコンポーネントの現実的な運用
  • デザインシステムを作成するコストはどのようなロジックで捻出するのか
  • 人間を信じるか信じないか

後ろのほうから会場を写した写真。テーブルの上にはビールとピザがある。
ピザとビールを片手にデザインシステムについて語る

speakerdeck.com
先日の『freee Tech Night』で弊社エンジニアが発表したデザインシステム構築の経緯と概要

お酒が入っていることもあり、トピックによっては「ウチはこうやってる」「いや弊社は」といった感じで議論が白熱する感じでした。(会自体がクローズなものであったので具体的な中身は書けないのはすみません。気になる方はコミュニティへご参加を!)

弁護士ドットコム様はFigmaを利用した既存UIのインターフェースインベントリを開示してくださり、複数並行しているブランドとデザインシステムの関わり方についての説明をしてくださりました。巨大なインベントリがプロジェクタに映し出されたときのどよめきが印象的でした。

デザインシステムの知見交換したい人はdesignsystems.tokyoへ

弊社でデザインシステム構築に本格的に取り掛かり始めて1年余が経ちますが、まだ完全に運用に乗り切っているとは言えない状況です。参加企業にもそういうところが多く、みんなの知見を合わせてお互いのプロダクトをよりよくしていくのが大事かなと思います。勉強会参加に興味のある事業会社の方がいましたら、designsystems.tokyo公式Twitterアカウントまでご連絡いただくか、connpassのグループでイベント予定をご確認ください。