見出し画像

SmartHR UIの3つの推しポイント

こんにちは。SmartHRプロダクトデザイングループに所属しているUIを主に考える人のnaoです。Advent Calendarに登録するのをすっかり忘れてしまい思い出すようにキーボードを叩いています。

今年、私は人事評価のUIを主に考えましたが、同時に10月に開催されたRubyKaigiのスケジュール閲覧アプリケーション「RubyKaigi Takeout 2021 Schedule.select」のUIのお手伝いを少しだけしました。

RubyKaigi Takeout 2021 Schedule.selectのスケジュール画面

「考えた」と言っても実はエンジニアのkinoppydさんに考えていただいたWFを整えるのが主な作業内容でした。開発期間も限られている中、社外に出せるほどのクオリティを担保する上で、弊社謹製のSmartHR UIのおかげでかなり工数を削減できました。

実際は1,2時間くらいでおおよそのUIのインタラクションやビジュアルデザインを決められたと記憶しています。また全然マークアップやコーディング詳しくない人間でもSmartHR UIを使ってある程度のUIのビジュアルデザインも実装できました。それもこれも全部SmartHR UIという共通言語のおかげです。

なので今回のアプリケーションも含め普段お世話になってるSmartHR UIの推しポイントを感謝の意味も込めて3つ紹介していこうと思います。

1. 充実のコンポーネントと開発体制

SmartHR UIは多くのコンポーネントを提供しています。

SmartHR UIのStorybook

ButtonやForm系コンポーネントなど原子的な物はもちろん、それらを組み合わせたコンポーネントも数多く提供されています。それらを組み合わせれば開発速度を向上させ、他プロダクトとのUIの統一を簡単にできます。おかげで私はもっと本質的なユーザー体験に思いを馳せられるので非常に愛しやすいですね。

余談ですが私の好きなコンポーネントは「Modeless Dialog」ですね。比較的新しいコンポーネントですが、文字通りモードレスなUIを提供でき、しっかり文脈に沿って通常のダイアログと使い分けることでユーザーの体験を向上させられます。

Modeless Dialogコンポーネントが動いている様子

なによりもグリグリ動かすのが楽しいし、他のUIコンポーネントライブラリではあまり提供しないようなコンポーネントを提供してるのも推しポイントですよね。

また開発にも多くの方が関わっており、多くのエンジニアやデザイナーが日々改善に励んでいます。そのような方々のおかげで私が素早く業務を行えるというわけです。本当に有り難いです。

2. アクセシビリティ対応

SmartHRでは日本全国全ての従業員の方が同じようにプロダクトを使用できるようにアクセシビリティを向上させることに力を入れています。またアクセシビリティ専門家の方々も開発に加わり定期的にSmartHR UIが基準をクリアしているかどうかの検査もしていますし、そこからの改善も盛んです。

SmartHR Design Systemのウェブアクセシビリティ方針

2021年12月に行われたウェブアクセシビリティ試験でも多くのコンポーネントが基準をクリアし、いくつかのコンポーネントも以前から改善されています。今後の改善例の一つとして、StatusLabelというコンポーネントの色が、より多くの方にとって見やすくなるように改善される予定です。

StatusLabelの事例と対応策

実際今回のRubyKaigiのアプリケーションではアクセシビリティに専門性を持つ同僚のmasuP9さんにアクセシビリティ監修を行っていただきましたが、ほとんど修正するところはありませんでした。

まだまだ修行中の私にとってはUIコンポーネントライブラリの時点でアクセシビリティが担保がされていると非常にありがたく、勉強にもなりますしより本質的なユーザー体験の考慮に時間を割けます。

3. いつでも改善できるチャンスあり

そんなSmartHR UIですが、普段開発に積極的に参加していない私でも、普段開発しているプロダクト経由で改善に寄与できます。

これが非常に愛しやすいポイントで、「UIに関する決め事をSmartHR UIを作っているチームが全部決めていて、我々使う側がそれに従う」という構図ではなく、「SmartHR UIを使ってる側からあがった改善の声を柔軟に受け入れる」というスタイルでUIの整備が進んでいます。

実際に自分が開発に参加しているプロダクトで独自実装したあるUIコンポーネントがSmartHR UIに逆輸入され目下開発中です。本当愛しやすいですし理想のUIコンポーネントライブラリの開発方法だと思います。

さいごに

私は今回のRubyKaigiのアプリケーションでも、メインで開発しているプロダクトでもSmartHR UI無しでは業務を進められませんでしたし、これからもお世話になっていきます!開発チームの皆様本当ありがとうございます!SmartHR UI大好き!

RubyKaigiのアプリケーションの詳しい開発模様についてはSmartHR Tech Blogでkinoppydさんはじめ開発チームの方々が色んな記事を書かれてますのでぜひ見てくださいね。(恐らく後々この記事もそちらに転載されるかも…?)


この記事が気に入ったらサポートをしてみませんか?