こんにちは、デザインマネージャーの青柳です。
あらゆるプロダクトにとって、最良のUXを目指すことは必然だと思います。 私たちもまた、お客様により快適な体験を提供するため、継続的なUX改善に取り組んでいます。
今回ご紹介するのは勤怠管理システム「楽楽勤怠」のUI/UX改善プロジェクト。
シリーズを一貫する体験設計と、顧客満足につながる独自性の両立を目指して、プロダクトの体験を一歩進める取り組みに挑みました。
今回はプロジェクトの背景・工夫・成果だけでなく、デザイン組織が実現したい未来像や、そこに挑むデザイナーたちの姿についてもお話しできればと思います。
- 目指すのは「一貫した体験の提供」と「使いやすさの向上」
- 視認性と導線改善を支える標準UIの力
- 限られたスペースに最適な導線を
- 実際に対応したデザイナーたちからのコメント
- 「使うのが楽しみになる」プロダクトへ──伸びしろだらけの組織でつくる、UXの未来
目指すのは「一貫した体験の提供」と「使いやすさの向上」
私たちは現在、バックオフィス向けプロダクトである「楽楽シリーズ」（楽楽精算、楽楽明細、楽楽販売、楽楽勤怠、楽楽電子保存、楽楽請求）のUI刷新に取り組んでいます。
バックオフィス業務は複雑で、多くの法令が関係します。そこで、ユーザに対応いただく操作も煩雑になりやすい側面があります。 ユーザに業務をスムーズに進めていただくためには、機能の充実はもちろん、直感的で迷わない操作性が欠かせません。
この目的や方針の詳細は、以下のブログも参照ください。
UI刷新には、二つの目的があります。
- UI統一による一貫した体験の提供
- UIの見直しによる使いやすさの向上
まずは、それぞれの目的についてご説明します。
- UI統一による一貫した体験の提供
ラクスのプロダクトは顧客の業務ドメインにあわせ、深く課題解決に踏み込むベスト・オブ・ブリード型の開発を行っており、各プロダクトのUIも、各業務ドメインごとに個別性が高いものとなっていました。
Before
今後はお客様が複数のSaaSを利用することも想定し、どのプロダクトを利用しても共通体験を提供できるようにします。
具体的には、同じ機能を持つボタンの形状や位置、コンポーネントの使い方、余白の取り方などをシリーズ間で統一します。ユーザーが各プロダクト間で感じる「メンタルモデル」の差をなくすことで、お客様は詳細な説明や長期のオンボーディングの負担なく複数のプロダクトを利用できるようになると考えています。
After
- UIの見直しによる使いやすさの向上
長い歴史を持つラクスのプロダクトの中には、当時の体験設計が古くなり、UI/UXに課題を抱えるものも少なくありません。 今回UI刷新を行った「楽楽勤怠」についても、レガシーなUI設計を踏襲しており、新機能も既存のUIを延長して実装されている状況でした。
この背景には、お客様の業務課題を確実に解決するために、機能を優先して充実させる戦略をとってきたことが背景にあります。今回のUI統一を機に、残っている古いデザインを進化させることを目指しています。 新しいUIコンポーネントは、視認性や可読性、アクセシビリティにも配慮し、どのユーザーにとっても直感的な操作ができるよう設計されています。
視認性と導線改善を支える標準UIの力
今回の「楽楽勤怠」UI/UX改善プロジェクトは、まず第一歩としてログイン画面、ヘッダー、トップページの改修を行いました。主な狙いは以下の通りです。
- 視認性の向上
- 直感的な操作性の確保
- 必要なコンテンツへのアクセス改善
ここで、改修後の変化をご紹介します。
ログイン画面：視認性向上と標準UIコンポーネント適用
（左：Before、右：After）
ヘッダー：利用頻度の高いメニューを厳選しデフォルト表示
Before
After
トップページ：視認性向上と標準UIコンポーネント適用
（左：Before、右：After）
この改修はリリースされたばかりですが、視認性や業務で頻繁に使うメニューへのアクセスが高まり、使い勝手向上への期待感を持っていただけるような改善を実現できたと考えています。
また「楽楽シリーズ」のプロダクト共通のデザインシステムをベースとして適用したことも、デザイン面の大きな成果です。
今後は、各プロダクトが持つUXやコンポーネントに関する知識を共有しやすくなったため、プロダクトデザイナー同士が密に連携しながら、全シリーズのUXをより一層高めていく一歩となりました。
限られたスペースに最適な導線を
顧客に最も使われるメニューを企画・検討
メニュー構成の変更は、現在利用いただいているお客様への影響が非常に大きい改修です。
そこで、どの機能をメニューに掲載すべきかの判断にあたっては、日々幅広い顧客をサポートしており最適化された視点を持っているCSチームと、顧客課題への解像度の高いPdMへの確認・協議を行いました。
従業員側が使うメニューは比較的少ない一方で、管理者側のメニューは非常に多岐にわたります。CSは、管理者側の複雑な設定メニューに関する顧客からの問い合わせが多く、知見が集約されています。そのフィードバックをもとに整理を進めました。
メニュー実現のため、デザインシステムを拡張
これまでの「楽楽勤怠」では、サイドメニューやハンバーガーメニューの中に多くの項目が並び、スクロールすることでアクセスできていました。
しかし、今回のUI刷新では、ヘッダーにメニューを厳選して配置する必要があります。
限られたヘッダー領域に効率的に収めるため、類似する機能をカテゴリとしてまとめ、デザインシステムを拡張して新しいコンポーネントを開発しました。
実際に対応したデザイナーたちからのコメント
実際に取り組んだデザイナーたちに、改修の実現に向けて挑戦したポイントや、成長できたポイントを聞いてみました。
「顧客のために」その一言で、私は腹をくくった（デザイナー Aさん）
「これまで自身の担当プロダクトである「楽楽勤怠」の開発に閉じていた視座が、UI刷新を通じて大きく高まりました。 『顧客のためになるか？』『なぜそのデザインにするのか？』 他プロダクトのデザイナー、プロダクトマネージャー（PDM）、CS、事業部など多様なステークホルダーとの連携を通じて、判断する影響範囲が広がり、情報収集量も増えました。これにより、デザイナーとしての視座が大きく高まったと感じています。」
また、ステークホルダーが増えると、誰が主体的にボールを持つのか？という状況が発生します。ここでデザイナーとして自ら判断し、対応し、交渉するのは大きな挑戦でした。最初はPdMからの質問に対して回答が難しいこともありましたが、その後、自ら腹をくくって判断し、対応・交渉するよう動けるようになりました。」
統一性 vs 独自性──標準UIコンポーネントに宿す、“プロダクトらしさ”のさじ加減（デザイナー Bさん）
「入社して間もなくプロジェクトに関わり、『右も左も分からない状態』でのスタートでした。
UI/UX改善プロジェクトを通じて、デザイナーの視点とフロントエンドエンジニアの視点の違いを理解しデザインに取り組めたことが成長につながりました。
特に標準UIコンポーネントを使いつつも、勤怠独自の調整をしたいというデザイン面の要望と、実装面での統一性も重視する開発側の視点の間で、細かな調整を行う難しさと学びがありました。
今後はデザインシステムにも積極的にかかわり、ルールの作成やコンポーネント設計にも貢献していきたいです。 」
「使うのが楽しみになる」プロダクトへ──伸びしろだらけの組織でつくる、UXの未来
今回の楽楽勤怠のUI/UX改修事例を通じて、ラクスの継続的なUX改善への取り組みをご紹介しました。 今後もお客様にとって本当に使いやすいプロダクトを追求し、継続的にアップデートを重ねることで、「業務を効率化するだけでなく、使うのが楽しみになる」存在へと育っていくことを目指しています。
ラクスのデザイン組織は、まだまだ成長途上で、整っていない部分も多くあります。 しかし、それは逆に、デザイナーが自身の力を発揮し、やりがいのある仕事や成長を目指せる環境を一緒に作り上げていくことができる魅力でもあります。 新しいことにも積極的にチャレンジできる環境が整っており、実際にUXリサーチやデザインをやる機会も作っていくことができています。ラクスで、顧客志向のプロダクトデザインを共に推進し、ユーザー体験の未来を創造していきませんか？
