Upgrade to Pro — share decks privately, control downloads, hide ads and more …

デザインシステムの設計とアクセシビリティの実現

ymrl
March 26, 2019

 デザインシステムの設計とアクセシビリティの実現

ymrl

March 26, 2019
Tweet

More Decks by ymrl

Other Decks in Technology

Transcript

  1. Company Profile 会社情報 4 会社名 freee株式会社(フリー株式会社) 設立年月日 2012年7月9日 代表取締役 佐々木

    大輔 資本金 161億603万円(資本準備金など含む) 従業員数 505名(2019年1月1日時点) 事業内容 クラウド型バックオフィスサービスの 開発・販売
  2. 7 freeeに入って5年間での変化 • 資金調達 3億円→160億円 • 従業員数 17人→500人超 • エンジニア・デザイナー

    11人→100人超 • 会計freeeのみ → 会計・人事労務・申告を筆頭に7つの製品 • 個人事業主が大半 → 数百人規模の上場企業にも導入
  3. 12 会社が大きくなってきた頃の Web UI 開発 • BootstrapベースのUIを徐々に卒業し、freee独自のUIに変化していった • 人事労務freeeがリニューアルし、ここだけカラースキームが緑系になった •

    エンジニアもデザイナーも増えたが、CSSが得意な人はあまり増えなかった ➔ UIデザイン・フロントエンド実装で求められる要件が複雑化する一方で、 それを支える環境整備の不備が目立つようになってきた
  4. 15 AG部 • 統一的なUIを作るためのチームとして発足 • AG部 = Atomic Design and

    Guideline 部 • Atomic DesignなUIコンポーネントとUIを作る上でのガイドラインを作る • デザイナー数名とエンジニア数名で組織
  5. 23 vibes とは • Atomic Designによる設計 • Sketchライブラリ と CSS

    / React Component実装 • 統一されたブランドイメージ、ユーザビリティ、アクセシビリティを担保
  6. 34

  7. 43 アクセシビリティチェック内容の定義 各フェーズにおいて誰が誰向けに何をチェックすれば良いのかを定義した 誰向けに 見えにくい(色覚) 見えにくい(弱視) 見えない (スクリーンリーダー使用) 上肢障害 (晴眼・キーボード操作)

    誰が 何を 製作者 第三者 製作者 第三者 製作者 第三者 製作者 第三者 デザイナー パーツ コントラスト チェッカー 具体的な画面 色覚シミュレー ション 社内当事者に よるチェック モックを拡大・ 反転してチェッ ク エンジニア パーツ (各OSでの確 認) lintツールに よるチェック 社内当事者に よるチェック キーボード挙 動のガイドライ ンを満たすか チェック キーボード挙 動のガイドライ ンを満たすか チェック
  8. 47 CSS / React Component の課題 • 配布方法の問題:現在CSSは1つのファイルにSCSSをトランスパイル ◦ 無秩序にオーバーライドされたり、治安の悪い使われ方をされそうで怖い

    ◦ CSS Modulesにするには設計の大幅な変更が必要 • ReactやFlowtypeへのロックイン問題 ◦ TypeScriptには一部最低限の対応はしたが不完全なまま ◦ Vue.jsなど、React以外を採用するプロジェクトが出現したら……