WorksDetail

データ分析ツール機能追加


Project Overview | 案件概要

継続的な機能追加と、それを支える骨格の整備

勤怠データを可視化し、組織内の状態や傾向を把握するための分析ツールに対し、機能追加に応じた画面設計を行いました。

本件で重視したのは、個別機能をその都度追加することではなく、比較 / 一覧 / 推移確認 / 個人詳細 といった複数の分析行為を、共通した構造で支えられる骨格を整えることでした。

対象範囲 / 分類軸 / 時間粒度 / 権限 の違いによって必要な見え方が変化する中でも、画面体系全体が破綻しないよう、継続拡張に耐える情報設計とUI設計を行いました。


Data
私の役割UI/UX設計 , 情報構造設計 , プロトタイプ制作 , 一部要件策定
成果物プロトタイプ , 構造図解
作業時期2019-2021年
ツールHTML , CSS , Illustrator

Issue | 課題

機能追加を重ねても破綻しない構造が必要だった

本件では、全体傾向の把握、組織間の比較、個人単位での確認、法令対応対象の抽出など、複数の閲覧目的が混在していました。 また、見る対象も全社、所属、個人へと切り替わり、さらに雇用区分などの分類軸や、年間、月別、日別といった時間粒度も加わります。

そのため、画面を個別に増やしていく方法では、 機能追加のたびに構造が複雑化し、整合や流用性を保ちにくい状態になる懸念がありました。 さらに、権限によって閲覧可能範囲が異なるため、見せ方の差をUIの分岐だけで吸収することも難しい状況でした。

そこで本件では、課題を次の3点に整理しました。

◇ 対象範囲の増加  :全社 / 所属 / 雇用区分 / 個人

◇ 分類軸や粒度の増加:年間 / 半期別 / 四半期別 / 月別 / 日別

◇ 権限差への対応  :閲覧可能範囲の違いをどう整理するか

この案件では、個別機能を増やす前に、これらを一貫して扱える骨格を整えることが重要でした。


Design | 設計

追加機能を支える共通骨格を先に定義した

まず、分析画面群を 対象範囲 / 分類軸 / 時間粒度 / 権限 の4つの切り口で整理しました。特に対象範囲については、全社 / 所属 / 個人 という単位を共通の骨格として扱い、時間粒度についても 年間 / 月別 / 日別 で揃えることで、画面ごとの構成をできるだけ共通化しました。

これにより、個別画面ごとに別の構造を持たせるのではなく、同じ骨格の中で条件や表示対象を切り替える設計を目指しました。

権限差を「別画面」ではなく「見える範囲の差」として整理した

権限によって閲覧可能な情報範囲は異なりますが、本件ではその差を画面単位の分岐として増やすのではなく、どの枝まで見せるか、どの単位まで掘り下げられるかという構造上の差として整理しました。

その結果、管理者権限向けと所属管理者向けで完全に別物の画面を作るのではなく、同じページ骨格を活かしながら、見せる対象や深さを制御する方針をとることができました。

骨格の上で個別機能を追加できるようにした

骨格整理の上で、分析トップ / 比較レポート / 雇用動向 / 個人詳細 / 法令対応一覧 など、役割の異なる機能を拡張していきました。

ここでは、追加された機能ごとに独立した画面体験をつくるのではなく、一覧 / 比較 / 推移確認 / 深掘り といった分析行為が連続するよう、同じ構造の中で役割分担させることを意識しました。

一覧から比較、詳細確認までつながる導線を整えた

分析トップで全体を俯瞰し、比較画面で傾向差を見つけ、必要に応じて個人詳細へ進む。こうした導線を自然につなげることで、単にデータを表示するだけでなく、業務上の判断につながる分析体験を設計しました。

そのため、画面単体の見やすさだけでなく、どこから入り、どこまで掘り下げられるかという遷移構造も重視しました。


Validation & Iteration | 検証と改善

構造の妥当性と流用性を確認した

設計途中では、関係者と図解や画面案を共有しながら、対象範囲や権限差を同じ骨格で扱えるか、また追加機能が既存構造の中で無理なく成立するかを確認しました。

この過程で見えてきたのは、個々の画面の見やすさだけでなく、情報の粒度、接続ルール、遷移の深さが揃っていることが、分析画面全体の使いやすさを支えるという点でした。

そのため改善では、機能単位の最適化に寄りすぎず、画面体系全体として破綻しないかという視点で、構造の整合を優先して調整を行いました。

外部記事でも、時間外労働や打刻差分を、グラフや表で直感的に把握しやすい点が評価されています。

Suggested Images

  • 分岐図の抜粋
  • 比較画面
  • 詳細画面

Outcome & Reflection | 成果と学び

機能追加に対応しながら、継続拡張しやすい基盤を構築すること

本件では、比較 / 一覧 / 推移確認 / 個人詳細 といった分析機能の追加に対応しつつ、それらを同じ骨格の中で扱える画面体系を整備しました。

その結果、個別の画面を都度増やすのではなく、対象範囲や分類軸、時間粒度を切り替えながら流用可能な構造をつくることができ、今後の機能追加や権限追加にも対応しやすい基盤につながりました。

機能単位ではなく、複数画面を支える骨格として整理した

この案件では、分析トップ / 比較レポート / 雇用動向 / 個人詳細 / 法令対応一覧 などを、それぞれ独立した画面として増やすのではなく、対象範囲 / 時間粒度 / 権限差 を共通ルールの中で扱えるよう整理しました。

そのため、追加された機能ごとの役割は異なっていても、画面体系全体としては破綻せず、一覧 / 比較 / 推移確認 / 深掘り といった分析行為を一貫した流れで扱える構造を実現しています。


Credits
  • 株式会社ヒューマンテクノロジーズ 在籍時の実務制作案件です
  • 掲載画像 / サービス名称等の権利は各権利者に帰属します
  • 内容は公開可能な範囲で再構成しています