Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザインシステムの設計とアクセシビリティの実現
Search
ymrl
March 26, 2019
Technology
13
24k
デザインシステムの設計とアクセシビリティの実現
freee Tech Night #2 2019/03/26
https://freee-tech-night.connpass.com/event/122276/
ymrl
March 26, 2019
Tweet
Share
More Decks by ymrl
See All by ymrl
いま求められるソフトウェアのアクセシビリティ / Essential Accessibility in Software Today
ymrl
0
250
アクセシビリティを意識したプロダクトづくり / Creating Products with Accessibility in Mind
ymrl
0
19k
「Webアプリケーションアクセシビリティ」著者の会社 (freee, サイボウズ, SmartHR) での取り組みは実際どんな感じ?
ymrl
2
19k
やっぱりやりたいのはUIデザインだった
ymrl
0
24k
freeeのアクセシビリティの取り組みの紹介
ymrl
0
20k
開発チームみんなで取り組むアクセシビリティ
ymrl
0
20k
アクセシビリティ アプリを企画する時点で考えること
ymrl
1
20k
Web技術基礎 for インターン
ymrl
1
7.3k
Webアクセシビリティ関連業務のためにブックマークレット書いてる
ymrl
0
180
Other Decks in Technology
See All in Technology
Qdrant を用いた検索改善施策の紹介 / Search Engineering Tech Talk 2024 Summer
visional_engineering_and_design
1
210
UE5の雑多なテク
ryuichikawano
0
410
【shownet.conf_】ShowNet伝送改めShowNet APN 2024
shownet
PRO
0
450
Vespaを利用したテクいベクトル検索
szdr
2
180
【shownet.conf_】ShowNet 2024 ~ Inter * Network ~
shownet
PRO
0
530
テクニカルライターのチームで「目標」をどう決めたか / MVV for a Team of Technical Writers
lycorptech_jp
PRO
3
100
CData Virtuality 日本ローンチイベントのKeynote
cdataj
0
230
Develop to Survive - YAPC::Hakodate 2024 Keynote
moznion
8
2.6k
【shownet.conf_】コンピューティング資源を統合した分散コンテナ基盤の進化
shownet
PRO
0
420
怖くないオフライン機能開発 〜基本的な技術で実現する現場向けオフライン機能 / Developing offline functions without fear ~ Offline functions for the field realized with basic technology
kaminashi
1
110
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
340
【㈱アイモバイル】エンジニア向け会社説明資料
imobile
0
470
Featured
See All Featured
Clear Off the Table
cherdarchuk
91
320k
Fireside Chat
paigeccino
32
3k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
26
4.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
362
19k
Making the Leap to Tech Lead
cromwellryan
131
8.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Testing 201, or: Great Expectations
jmmastey
38
7k
GraphQLとの向き合い方2022年版
quramy
43
13k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.6k
A Tale of Four Properties
chriscoyier
156
22k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
Transcript
freee 株式会社 デザインシステムの設計とアクセシビリティの実現 2019.03.26
慶應SFC大学院修了後、モバイルゲームベンチャーを経て 2014年に17番目の社員としてfreeeに入社。 インフラ以外はだいたいやる感じのエンジニア。 2015年からは人事労務freee(当初は給与計算freee)を開発。 現在は人事労務freeeのUI改善プロジェクトと同時並行で デザインシステムの開発もしている。 最近の趣味は自作キーボードだが、腕が2本しかないので 作ったキーボードを人に貸したりしている。 @ymrl Engineer
2
01 会社の成長によって起きたこと 3 Section
Company Profile 会社情報 4 会社名 freee株式会社(フリー株式会社) 設立年月日 2012年7月9日 代表取締役 佐々木
大輔 資本金 161億603万円(資本準備金など含む) 従業員数 505名(2019年1月1日時点) 事業内容 クラウド型バックオフィスサービスの 開発・販売
Products 製品・サービス 1/2 5 中小企業の経理業務を効率化。 帳簿や決算書作成・請求業務に対応。リアルタイムに数字を把握できる 給与計算や労務管理を大幅に効率化。 給与明細作成や年末調整、入社手続きから勤怠管理まで対応 税務申告書作成業務を効率化。 法人税・消費税・法定調書・申請届出や電子申告にも対応
Products 製品・サービス 2/2 6 低コストでマイナンバーの収集から保管、利用、破棄までが クラウド上で完結 画面に沿って入力するだけで、会社設立に必要なすべての書類を 5分で作成できる無料サービス 個人事業の開業手続きが無料、簡単、最速。 ガイドに沿って質問に答えるだけで書類作成が完了
Webで申し込みでき、最短4営業日で発行。 創業時でも本人確認書類だけで審査可能
7 freeeに入って5年間での変化 • 資金調達 3億円→160億円 • 従業員数 17人→500人超 • エンジニア・デザイナー
11人→100人超 • 会計freeeのみ → 会計・人事労務・申告を筆頭に7つの製品 • 個人事業主が大半 → 数百人規模の上場企業にも導入
02 サービス開発で変化したこと 8 Section
9 会社の成長の開発への影響: 品質 • アーリーアダプターの個人事業主や小規模法人がメインだったが、 数百人規模の法人までカバーするようになった • 尖ったサービスより普通のことができるサービスが求められるようになった • ユーザビリティやアクセシビリティが重要になってきた
10 会社の成長の開発への影響: 開発組織 • 開発に関わる人数が増え、誰がどこで何を作っているのか見えづらくなった • 製品が増え、求められるもの・満たすべきものがわかりづらくなった • 最初の頃に試行錯誤しながら作ったものが技術的負債となってきた
11 freeeのWebフロントエンド開発スタイル • UIデザインは主にデザイナーが行い、画面モックをエンジニアに渡す ◦ Sketchなどを使ってfreeeっぽい画面(の画像)を作る • HTML/CSS/JavaScriptコーディングは、ほぼ全部エンジニアが担当 ◦ エンジニアにサーバーサイド/フロントエンドの区別はないので
フロントエンドに不慣れなエンジニアでもやる
12 会社が大きくなってきた頃の Web UI 開発 • BootstrapベースのUIを徐々に卒業し、freee独自のUIに変化していった • 人事労務freeeがリニューアルし、ここだけカラースキームが緑系になった •
エンジニアもデザイナーも増えたが、CSSが得意な人はあまり増えなかった ➔ UIデザイン・フロントエンド実装で求められる要件が複雑化する一方で、 それを支える環境整備の不備が目立つようになってきた
13 陥ってしまった事態 • デザイナーごとに作る画面モックのUIの差異が大きくなっていった • フロントに不慣れな人も実装するので、画面モックと実装にも差が産まれる • 画面モックを再現するのにCSSが足りておらず、毎回書く(コピペする) • CSSの配置や書き方の指針がなく、stylesheetsディレクトリがカオスに
➔ 見た目が揃っていなかったり、同じ見た目でも違う挙動をするUIが大量発生 ➔ それっぽいCSSを毎回探したり書いたりコピペしたりしていて生産性も低下
14 これらの問題解消のためのチーム、AG部の誕生 group_inou / HEART (single mix) https://www.youtube.com/watch?v=w_os8HqfxHc
15 AG部 • 統一的なUIを作るためのチームとして発足 • AG部 = Atomic Design and
Guideline 部 • Atomic DesignなUIコンポーネントとUIを作る上でのガイドラインを作る • デザイナー数名とエンジニア数名で組織
16 AG部の目標 • どのデザイナーでも「freeeの統一されたUI」をデザインできるようにする • フロントエンドに不慣れなエンジニア、特にCSSに不慣れなエンジニアでも「freeeの 統一されたUI」を実装できるようにする • これらを通して生産性を向上して、爆速で機能開発できるようにする
03 ガイドラインとデザインシステム 17 Section
18 UI/UXガイドライン「Groove」
19 UI/UXガイドライン「Groove」 • もともとガイドラインは存在していたが、網羅性が高くなく、 あまりメンテも参照もされず放置されていた • AG部発足を機にしっかりとオーナーシップを持ってメンテしていくことに
20 ガイドラインの例
21 デザインシステム 「vibes」 服部昇大「日ポン語ラップの美ー子ちゃん 徳之島編」 https://twitter.com/hattorixxx/status/917720911914004481
22 vibes とは 服部昇大「日ポン語ラップの美ー子ちゃん 徳之島編」 https://twitter.com/hattorixxx/status/917720911914004481
23 vibes とは • Atomic Designによる設計 • Sketchライブラリ と CSS
/ React Component実装 • 統一されたブランドイメージ、ユーザビリティ、アクセシビリティを担保
24 Atomic Design DeNA DESIGN BLOG「Atomic Design を分かったつもりになる」 https://design.dena.com/design/atomic-design-を分かったつもりになる/ UIを化学物質に見立て、組み合わせによってデザインしていく考え方
25 SketchライブラリとCSSとReactコンポーネント デザイナー向けのSketchライブラリとエンジニア向けの実装をそれぞれ提供する
26 Sketchライブラリ UIコンポーネントがシンボル化されていて、これらを組み合わせてUIを作る
27 Storybook Sketchライブラリと同じ内容のコンポーネントカタログをStorybookで構築 挙動やコンポーネントの使い方を確認することができる
04 アクセシビリティ 28 Section
29 アクセシビリティとは 「企業サイトのWebアクセシビリティの今とこれから」 https://www.concentinc.jp/design_research/2018/03/btobcommunications-web-accessibility/
30 freeeにとってのアクセシビリティ • freeeが作っているのは「ビジネスのプラットフォームとなるサービス」 • 「freeeが使えない」ことで「ビジネスができない」になってほしくない ◦ 「経理作業ができないので個人事業ができません」とか ◦ 「freeeを使えないので従業員として雇えません」とか
• むしろアクセシビリティ対応を強みにしていきたい
31 法定雇用率 従業員45.5人以上の企業では2.2%以上の障害者雇用が義務 厚生労働省 https://www.mhlw.go.jp/stf/seisakunitsuite/bunya/koyou_roudou/koyou/shougaisha/04.html
32 色覚異常 日本人男性の20人に1人は色覚異常がある 滋賀医科大学 眼科学口座「色覚異常者の色の見え方」 http://www.shiga-med.ac.jp/~hqophth/farbe/miekata.html
33 中小企業ほど高齢者比率が高い 中小企業白書2016 https://www.chusho.meti.go.jp/pamflet/hakusyo/H28/PDF/h28_pdf_mokujityuu.html
34
35 freeeには全盲のエンジニアもいる • 中根雅文さん (Twitter: @ma10) • エンジニアとしてアクセシビリティを担当 • スクリーンリーダーと点字ディスプレイを使ってPCを操作
36 中根さんに聞いてみた「freeeって働きやすいですか?」 • 人事労務freeeの給与明細がWebやスマホアプリで見られるので 給与明細を誰かに読んでもらう必要がない • 自社サービスだけでなく、ありとあらゆる業務がペーパーレス化されていて色々な ものがWebにあるので困ることが少ない freeeはサービスを通してこういう世界をもっと作っていきたい
37 Webアプリとしてのfreeeがアクセシブルであるには • 機能がどんどん増えていくので少ない人数でやっていくのには限界がある • アクセシビリティ人材を確保するのが難しい ◦ いきなりWCAG準拠は難しいので、「いい塩梅」でやっていくしかない ◦ サーバー/フロントの役割分担がないので全員が教育される必要がある
➔ デザインシステムがアクセシビリティを担保して、 それを使って画面を組むとアクセシブルになるなら解決するのでは!!
38 デザインシステムがアクセシブルであるために • 視覚障害者へのヒアリングやコンポーネントの挙動についての議論 • eslint-plugin-jsx-a11y や @storybook/addon-a11y の導入 •
アクセシビリティチェックするべき内容の定義
39 ヒアリング・議論 • VibesのUIコンポーネント定義ができてきた段階で中根にヒアリング • UIコンポーネントごとにそのあり方について議論 ◦ スクリーンリーダーのユーザーへどういう配慮が必要か ◦ キーボード操作時にどういう挙動をすれば良いのか
◦ そもそもそのUIコンポーネントが使われるべきなのかどうか
40 議論したコンポーネントの例 タブ: もともとはTabキーによるフォーカスを全てのタブに対してやる予定だったが、 現在アクティブなタブへのフォーカス + 左右キーによる移動に変更 もちろん role=”tab” 属性を指定
41 eslint-plugin-jsx-a11y ReactのJSXに対してアクセシビリティ観点のlintをしてくれる
42 @storybook/addon-a11y Storybookの内容についてアクセシビリティチェックを自動でかけてくれる
43 アクセシビリティチェック内容の定義 各フェーズにおいて誰が誰向けに何をチェックすれば良いのかを定義した 誰向けに 見えにくい(色覚) 見えにくい(弱視) 見えない (スクリーンリーダー使用) 上肢障害 (晴眼・キーボード操作)
誰が 何を 製作者 第三者 製作者 第三者 製作者 第三者 製作者 第三者 デザイナー パーツ コントラスト チェッカー 具体的な画面 色覚シミュレー ション 社内当事者に よるチェック モックを拡大・ 反転してチェッ ク エンジニア パーツ (各OSでの確 認) lintツールに よるチェック 社内当事者に よるチェック キーボード挙 動のガイドライ ンを満たすか チェック キーボード挙 動のガイドライ ンを満たすか チェック
05 これから 44 Section
45 Vibesの現在 • Vibes自体の実装はほぼ完了したところ • freeeアプリストアなど一部サービスへの導入を始めている
46 Sketchライブラリの課題 • Sketchライブラリをどう共有して、各自が最新版を使えるようにするか ◦ GitHubで管理する→デザイナーに馴染みがない、Gitの旨みがない ◦ Abstractで管理する→全員がAbstract上のプロジェクトで作業する前提 ◦ 結局Sketch
Cloudで配布 • 将来的にFigmaやAdobe XDなどSketch以外のツールを使うかもしれない ◦ Figmaについてはインポートしての使用を試行中
47 CSS / React Component の課題 • 配布方法の問題:現在CSSは1つのファイルにSCSSをトランスパイル ◦ 無秩序にオーバーライドされたり、治安の悪い使われ方をされそうで怖い
◦ CSS Modulesにするには設計の大幅な変更が必要 • ReactやFlowtypeへのロックイン問題 ◦ TypeScriptには一部最低限の対応はしたが不完全なまま ◦ Vue.jsなど、React以外を採用するプロジェクトが出現したら……
48 アクセシビリティの課題 • Vibesを導入するまでのアクセシビリティ対応が属人的になってしまう ◦ 知識、技術、「いい塩梅」を知っている人しかなかなかできない ◦ 開発生産性を上げるためにもVibes導入を高速前進でやっていく • まだ取り組みを始めたばかりでわからないことが多い
◦ 「デザインシステムでアクセシビリティを実現する」が本当にできるのか ◦ 俺たちの戦いはまだ始まったばかりだ!
49 来週もイベントやります https://connpass.com/event/125166/
スモールビジネスを、 世界の主役に。