SmartHR サービスサイト運用

「SmartHR」サービスサイトは、人事労務クラウドサービス「SmartHR」の機能紹介だけでなく、オンラインイベントやお役立ち資料のご案内などサービス全般の情報を提供するサイトです。ビーワークスは、デザイン、開発、進行管理、業務フローの提案など、サービスサイト運用に関わる業務をトータルにサポートしています。

運用をよりスマートに。効率化のためのツール＆フロー設計

運用を開始するにあたり、これまでの課題だった先祖返りなどのミスの懸念や、進行上のボトルネックを解消するため、新たな業務フローを検討しました。従来の進め方をヒアリングした上で、案件発生からご依頼、制作・レビュー、承認・公開などの工程をフロー図に起こし、それぞれの担当者やタスクの順序を整備。あわせて、すでにSmartHR様が使われていたタスク管理ツールも含めて複数のツールを改めて調査・比較し、新たな業務フローに適したツールと活用方法をご提案しました。

最適な設計を見直し、ページをリニューアル

運用においては、情報の更新だけでなく、新規ページ制作やリニューアルに際してのデザイン・開発も担当しています。

トップページ

リニューアル前のトップページは、プロダクトにさまざまな機能が追加されていくなかで導線が増え続けており、機能の全体像がイメージしづらい状態にありました。機能をどう分類して掲載するべきか、改めてSmartHR様にワイヤーフレームとして作成いただいた上で、ビーワークスでデザインとフロントエンドを担当しました。

デザインにおいては、SmartHRを導入するメリットを多面的に示せるよう、それぞれのブロックで訴求する内容がレイアウトそのものから伝わるような見せ方を意識しました。また、プロダクトの特長であるUIデザインの使いやすさを示すため、キャプチャ画面の表現は複数案をもとに検討しました。

トップページは多くの役割を担うページになるため、デザインをご提案する際はブロックごとに複数の案を用意し、担当者様ひとりひとりの意図をすり合わせながら協議を進めていきました。ブロックごとの目的や優先される情報はもちろん、直線的にするか動きをつけるか、アイコンをつけるか否かといった細かいデザインのニュアンスに至るまで、ブロックごとに議論を尽くしました。

グローバルナビゲーション

グローバルナビゲーションについても、ビーワークスでリニューアル後のデザインを担当しました。今後さらに機能が追加されていくことを念頭に置き、数が増えても破綻せず、見やすさを担保できるようなデザインを検討しました。また、Webアクセシビリティの向上も課題だったため、コントラスト比やTabキーを用いた際のフォーカス順序も考慮した上でデザインをご提案しました。リニューアル後、SmartHR様の社内でも情報を探しやすくなったとご好評をいただいています。

機能紹介ページ

SmartHRの主要機能である「SmartHR労務管理」の扉ページも、トップページと並行してリニューアルを行いました。以前はやや淡々とした印象だったページのレイアウトを見直し、ひとつのランディングページのように、メリハリをもって情報を見ていけるように改修しました。その下層となる各機能の紹介ページについても、追加・更新にあわせてデザインや図版制作、フロントエンドを担当しています。今回作成したテンプレートを活かし、今後の更新に際しても効率的に新規ページを展開していく予定です。

開発面からも効率化に貢献

開発面では、個々のページ制作にともなう開発だけでなく、運用全体を効率化するための環境・システムの改善も行っています。開発環境全体のライブラリのバージョンアップや、コンポーネント統一のための整理のほか、Webアクセシビリティ対応のためのフォントサイズ設定の改修や、コンテンツ変更にともなうmicroCMS改修なども行っています。

運用におけるコミュニケーションの工夫や意識してきたことについては、プロジェクトチームで座談会を実施したケーススタディの記事もぜひご覧ください。

2社間の垣根を超えたチームワークを発揮。品質もスピードも両立したサイト運用を目指して