タイムシート

Client

Sollective

Year

2025

Role

Lead Product Designer

Stack

Figma, Figma Make, TypeScript / React

Themes

B2B workflowsinternal toolsreportingprototyping

工数報告における B2B の複雑さをシンプルにする

Timeline: 8 weeks

Sollectiveは、審査を通過した優秀なフリーランスと、事業拡大を目指す企業とをつなぐ日本のフリーランスマッチングプラットフォームです。FreelanceOSは、タイムシート、請求、レポーティングなど、フリーランスが自身の案件を管理するためのSollectiveのツール群です。

2024年、チームは主にフリーランス個人を対象としたタイムシート機能をリリースしました。複数の案件にまたがって稼働時間を記録し、必要に応じて書き出せる仕組みです。ところがSollectiveの事業が拡大するにつれ、社内チームがこの機能を、フリーランスとクライアントのバックオフィスをつなぐ中核的な報告ツールとして使い始めました。フリーランスの自己管理に最適化された当初の設計は、新たに生まれたワークフローに合わず、フリーランスにも社内スタッフにも負担を生んでいました。

2025年、この新しい実態に合わせてタイムシートの体験を再設計しました。フリーランスにとってもSollectiveのバックオフィスにとっても等しく機能する月次の報告ツールでありながら、使い慣れた感覚と明快さ、そして効率性を保つことを目指しています。

背景と課題

当初のタイムシート機能は、明確なターゲットユーザーを想定して設計されていました。自分自身の事務管理者でもあるフリーランスです。インターフェースは次のような使い方に対応していました。

  • 週単位での稼働時間の記録。
  • 複数の案件を横並びで管理すること。
  • 必要に応じて保存・送付できる、柔軟な書き出し機能。

利用が広がり、社内のプロセスでもこのツールが使われるようになると、まったく別のユースケースが浮かび上がってきました。

  • フリーランスは、週単位ではなく月単位で稼働時間を記録していた。
  • Sollectiveのチームは、クライアントのバックオフィス担当者への主要な報告手段としてタイムシートを使っていた。
  • 最終的な目的が、一般的な記録管理から、構造化された報告と承認へと移っていた。

この設計と実態のずれが、いくつもの問題を生んでいました。

  • 案件ごとに月1枚のタイムシートを提出すればよいフリーランスにとって、複数案件を前提とした週単位の入力画面は煩雑でした。
  • フリーランスはタイムシートに記録し、PDFを書き出し、バックオフィスの担当者にメールで送る必要があり、手作業の工程とミスの余地が生まれていました。
  • 当初の設計にあった分析寄りの要素はあまり使われていませんでした。多くのユーザーはワークフロー全体をFreelanceOSに移行するのではなく、必要な用途に応じてツールを選んで使っていたのです。
  • Sollectiveのチームには、経費の記録、承認、照合といった追加の要件があり、当初の設計では対応できていませんでした。
  • つまりこのツールは、フリーランス起点で分析志向のワークフローのために設計されていたにもかかわらず、実際にはフリーランスとバックオフィスをつなぐ報告フローの中心になっていたのです。

目標

私たちは、社内プロセスをより適切に支えるかたちでタイムシートの基盤を作り直すことにしました。今回のイテレーションでは、プロダクトを実際のユーザーのワークフローに合わせることに焦点を当てています。

  • 複数案件の週単位入力ではなく、月次の報告と承認を軸にタイムシートを組み直す。
  • 入力の流れを整理し、フリーランスが最小限の手間で記入から提出まで完了できるようにする。
  • Sollective社内チームとクライアントのバックオフィスが必要とする機能(経費、承認、照合)を組み込む。
  • 不要な分析機能や複雑さを取り除きつつ、スプレッドシートに近い操作感を活かして親しみやすさを保つ。
  • AIを活用した高速プロトタイピングにより、創業者・エンジニア・オペレーションから素早くフィードバックを得る。

制約

主な制約は次のとおりです。

  • すでにフリーランスと社内スタッフが利用している本番稼働中の機能であること。既存のワークフローを壊さずに体験を改善する必要がありました。
  • オペレーションと開発の両方を担う、少人数のクロスファンクショナルなチーム(共同創業者+フロントエンド+バックエンド)であること。
  • 既存の技術スタックの範囲内に留まり、エンジニアリングの負荷を最小限に抑える必要があったこと。可能な限り既存のコンポーネントとパターンを再利用しました。
  • 社内チームからの運用要件を満たすことが、このリニューアルを成功と見なす条件だったこと。

リサーチと発見

既存インターフェースの棚卸し

最初のステップは、既存のタイムシートUIを体系的に見直すことでした。

  • 実際に使われている要素と、レガシーあるいは構想段階のまま残っていた要素(分析ウィジェットや広範なワークフロー機能など)を切り分けました。
  • ユーザーが事務ワークフロー全体をFreelanceOSに移していないこと、むしろタイムシートを含む特定のツールだけを選んで使っていることを確認しました。
  • 画面構成が、複数案件にまたがる頻繁な週単位入力を前提としており、大半のフリーランスの実際の行動と噛み合っていないことが見えてきました。

ユーザーへのヒアリング

フリーランスと社内の関係者へのインタビューから、いくつかの重要な発見が得られました。

  • 稼働時間の記録という文脈において、フリーランスがもっとも慣れ親しんでいるのはExcelやスプレッドシートのインターフェースであること。
  • 週単位・複数案件という入力構造が、シンプルな月次報告に対しては画面移動もデータ入力も必要以上に複雑にしていたこと。
  • 社内オペレーションが必要としていたのは、稼働時間の合計だけではなかったこと。
    • 月次を前提とした報告モデル。
    • 画面上で直接行える承認/差し戻しの機能。
    • 報告された時間が社内の記録と一致するかを確認できる照合機能。
    • フリーランスが日ごとの作業内容を記録できる、詳細なメモ欄。

これらの発見により、タイムシートは「柔軟で分析寄りのツール」から「構造化されたワークフロープロダクト」へと捉え直されました。予測可能な月次報告のプロセスを、ユーザーに迷わせず進めてもらうためのプロダクトです。

デザインアプローチ

月次報告に焦点を絞り直す

刷新した体験では、週単位・複数案件の入力から、月単位・案件ごとのモデルへと軸足を移しました。

  • 案件ごと・月ごとに1枚のタイムシート。フリーランスとバックオフィス担当者が実際に協働している単位に合わせました。
  • 当月または直近の対象月を優先して表示する、シンプルなナビゲーション。
  • 際限のない記録ではなく、「稼働を記録する」→「承認を申請する」→「承認/差し戻し」という明快な流れ。

当初は左サイドのナビゲーションパネルに月の一覧を置き、素早く切り替えられるようにしていました。しかしチームからのフィードバックで、これが画面を不必要に重くしていることが分かり、より焦点を絞った解決策を採用しました。

  • 対象期間を切り替えるための、シンプルな月選択ドロップダウン。
  • 初期表示を当該報告月に固定し、フリーランスの画面移動と判断を減らす。

これは、中心となる行動面での目標を支えるものでした。月次の提出を、期限内にできるだけ簡単に、負担なく行えるようにすることです。

スプレッドシートのメンタルモデルに寄せる

工数報告とスプレッドシートの結びつきが非常に強いことを踏まえ、インターフェースは意図的にそのメンタルモデルに寄せました。

  • 行が日付、列が稼働時間・経費・メモを表す表形式のレイアウト。
  • ExcelやGoogleスプレッドシートに慣れたユーザーが違和感なく使えるインライン編集。
  • フリーランスと社内チームの双方が、ひと目で正しさを確認できる明快な合計と集計表示。

インタラクションのパターンやエッジケースを検証するため、Figma Makeを使ってスプレッドシート風のプロトタイプを構築しました。これにより、開発工数を先に投じることなく、入力の挙動、画面遷移のパターン、状態の変化をシミュレーションできました。

運用要件をUIに組み込む

今回のリニューアルでは、社内およびクライアント側のニーズをUIに直接組み込みました。

  • 経費: タイムシート内に経費専用の領域を設け、別途メールや個別のスプレッドシートをやり取りする必要をなくしました。
  • 承認ワークフロー: 承認/差し戻しの状態を画面上で扱えるようにし、バックオフィスチームが一箇所で処理を完結できるようにしました。
  • 照合: フリーランスが報告した時間と社内の記録を照らし合わせやすいよう、専用の項目と表示を設計しました。
  • 詳細メモ: レコードごとにメモを残せるようにし、フリーランスが日々の作業内容を記述できるようにしました。透明性が高まり、確認のやり取りも減ります。

これらの要件が情報アーキテクチャと視覚的な優先順位の両方を導き、もっとも重要な操作(記録・確認・承認)が常に見えていて、迷わず行えるようにしました。

協働とAIを活用したプロトタイピング

このプロジェクトは、プロダクト、エンジニアリング、オペレーションの緊密な連携に支えられていました。Figma MakeのようなAIツールを活用したことで、チームメンバーは早い段階から具体的なフィードバックを出せるようになりました。関係者は静的なモックアップに対して意見を述べるのではなく、実際に近い挙動を早期に触ることができたのです。その結果、使いやすさ、技術的な実現可能性、運用要件のバランスが取れた解決策へと、チームが素早く収束できました。

  • 共同創業者:事業目標とフリーランス体験の観点からアプローチを検証。
  • フロントエンド/バックエンドエンジニア:技術的な実現可能性を評価し、制約のなかで実現できる範囲の定義を支援。
  • 社内バックオフィスチーム:実務上の要件を提示し、新しい画面が本当に手作業を減らすかどうかを評価。

最終的な体験

最終的なタイムシートのデザインが実現したのは、次の点です。

  • フリーランスとバックオフィスチームの実際の働き方に沿った、月次を軸とした無駄のない入力画面。
  • 使い慣れた感覚を保ちながら、タイムシート固有のユースケースに合わせて調整されたスプレッドシート的な操作モデル。
  • 経費、承認、照合、詳細メモを、ひとつのまとまった画面で扱える統合的なサポート。
  • あまり使われていなかった分析機能や、報告に直接寄与しない機能を取り除くことで実現した、視覚的なノイズの削減。

その結果、フリーランスと社内スタッフという2つの主要なユーザー層のどちらにも、面倒な回避策を強いることのないインターフェースが生まれました。

成果とインパクト

リニューアルしたタイムシートは、フリーランスとSollectiveチームの双方に具体的な改善をもたらしました。

  • 使いやすさの向上: フリーランスからもバックオフィススタッフからも、新しい画面は分かりやすく使いやすいと評価されました。とりわけ月次に焦点を絞った流れが好評でした。
  • 運用効率の向上: 社内の報告システムと連携したことで、手作業での書き出しとメール送付の工程がなくなり、繰り返しの報告業務にかかる時間が大幅に減りました。
  • フリーランスの負担軽減: 報告作業は、毎月数時間かかることもある面倒な仕事から、1人あたり月30分程度で終わる無駄のないワークフローへと変わりました。
  • 実際のワークフローとの一致: 不要な分析機能を取り除き、報告にプロダクトの焦点を絞ったことで、タイムシートはもっとも積極的に使うユーザーの実際の働き方により合うものになりました。

学びと振り返り

このリニューアルは、運用が複雑な環境におけるツール作りについて、いくつかの原則をあらためて確認させてくれました。

  • プロダクトは、当初の想定ユーザーを超えて広がっていくことが多い。リデザインは当初の意図ではなく、実際の使われ方から始めなければならない。
  • 既存のメンタルモデル(スプレッドシートなど)に寄せることで、とりわけ工数報告のような作業では摩擦を劇的に減らせる。
  • ツールが複数の当事者のあいだに立つとき、社内の運用要件(承認、照合、経費)は、フリーランス個人の体験と同じくらい重要になる。
  • AIを活用したプロトタイピングは探索を加速し、デザイン・エンジニアリング・オペレーションのすべてで機能するインタラクションパターンへとチームを収束させてくれる。

このプロジェクトは現在、FreelanceOSにおける今後のワークフローツールの参照点となっています。ひとつのペルソナ向けのユーティリティが、明快さと使いやすさを損なうことなく、複数の関係者が関わるプロダクトへと進化しうることを示す事例です。

Geoffrey Wu

Geoffrey Wuは、東京を拠点とするプロダクトデザイナー、フロントエンドエンジニア、クリエイティブテクノロジストです。

プロダクトチームが迷いなく、自信を持ってリリースできるよう、摩擦を取り除き、関係者間の調整を行い、ユーザー体験の価値を伝える役割を担っています。Web・モバイル向けのSaaSプロダクトから、コンバージョンを重視した複雑なブランドサイトまで、あらゆる新しい課題に対して常に丁寧で解決志向のアプローチを大切にしています。

Interested in working together?

© Copyright Geoffrey Wu 2026