以下の内容はhttps://uga-box.hatenablog.com/entry/2024/06/26/000000より取得しました。


【Design System】freeeのデザインシステム

freeeのデザインシステム「vibes」をみた

corp.freee.co.jp

vibes

vibes.freee.co.jp

freeeはアクセシビリティに力を入れている印象で、そのあたりのフロントエンド開発のノウハウが詰まったデザインシステムらしい

一番上のnewsになぜ、freeeはアクセシビリティに取り組むのかが記載されていた

理由は以下

  • freeeは、「スモールビジネスを、世界の主役に。」というミッションのもと、「アイデアやパッションやスキルがあればだれでも、ビジネスを強くスマートに育てられるプラットフォーム」の構築を目指している
  • スモールジネスに関わる方には様々な方がいて、たとえば高齢であったり、心身に障害を持っている方もいる
  • そうした多様な背景を持つスモールビジネスの存在が社会をより良い方向に変えていくと信じており、そのためには、「だれでも」使いやすいアクセシビリティの高いシステムを構築することは不可欠と考えている
  • 社会全体がそのような方向に向かうことが、ユーザーにとって本質的な価値があると自信を持って言えるのではないかと考えている

アクセシビリティは企業によっては優先度が低くなってしまい、やる理由を探しがち

freeeがこのように理由を提言してくれるおかげで、見直すきっかけになるのではと思った

作成経緯

気になる作成経緯はこちらのスライドに載っていた speakerdeck.com

問題点

  • 「とにかく動く」ものを高速に大量に作れる組織
  • デザイナーがエンジニアに渡すが、デザイナーごとにデザイン差異が生まれていた
  • エンジニアのレベルの違いによってデザインと実装にも差異が生まれていた
  • CSSのコピペ
  • CSSや書き方に指針がない
  • 見た目が揃ってなかったり、同じ見た目でも違う挙動をするUIが大量発生
  • それっぽいcssを毎回書いたり、探したりして生産性が低い

この問題に対して

  • これを解決するためのチーム(AG部)を発足
  • 10%の工数を好きなことに使って良いというルール

vibeとは

目指すもの

  • 高品質で統一感のあるUIを爆速で実装できること
    • freeeらしい統一されたUIをすぐに作れる
    • エンジニアがCSSを書かずにデザイナーの作ったUIを再現できる
    • WEBアプリケーションの複雑な挙動のコンポーネントが簡単に使える
  • デザイナーとエンジニアに同じものを提供し、両者の共通言語となる
  • 特別な対応しなくてもアクセシビリティが高い実装を作ることができる



以上の内容はhttps://uga-box.hatenablog.com/entry/2024/06/26/000000より取得しました。
このページはhttp://font.textar.tv/のウェブフォントを使用してます

不具合報告/要望等はこちらへお願いします。
モバイルやる夫Viewer Ver0.14