freeeのデザインシステム「vibes」をみた
vibes
freeeはアクセシビリティに力を入れている印象で、そのあたりのフロントエンド開発のノウハウが詰まったデザインシステムらしい
一番上のnewsになぜ、freeeはアクセシビリティに取り組むのかが記載されていた
理由は以下
- freeeは、「スモールビジネスを、世界の主役に。」というミッションのもと、「アイデアやパッションやスキルがあればだれでも、ビジネスを強くスマートに育てられるプラットフォーム」の構築を目指している
- スモールジネスに関わる方には様々な方がいて、たとえば高齢であったり、心身に障害を持っている方もいる
- そうした多様な背景を持つスモールビジネスの存在が社会をより良い方向に変えていくと信じており、そのためには、「だれでも」使いやすいアクセシビリティの高いシステムを構築することは不可欠と考えている
- 社会全体がそのような方向に向かうことが、ユーザーにとって本質的な価値があると自信を持って言えるのではないかと考えている
アクセシビリティは企業によっては優先度が低くなってしまい、やる理由を探しがち
freeeがこのように理由を提言してくれるおかげで、見直すきっかけになるのではと思った
作成経緯
気になる作成経緯はこちらのスライドに載っていた speakerdeck.com
問題点
- 「とにかく動く」ものを高速に大量に作れる組織
- デザイナーがエンジニアに渡すが、デザイナーごとにデザイン差異が生まれていた
- エンジニアのレベルの違いによってデザインと実装にも差異が生まれていた
- CSSのコピペ
- CSSや書き方に指針がない
- 見た目が揃ってなかったり、同じ見た目でも違う挙動をするUIが大量発生
- それっぽいcssを毎回書いたり、探したりして生産性が低い
この問題に対して
- これを解決するためのチーム(AG部)を発足
- 10%の工数を好きなことに使って良いというルール
vibeとは
目指すもの