freee + Product Design FY24 Q2

　
freee + Product Design
freee株式会社

View Slide

　
freee株式会社について

View Slide

3
使命
Mission
スモールビジネスを、
世界の主役に。
freeeは「スモールビジネスを、世界の主役に。」をミッションに掲げ、統合型
経営プラットフォームを開発・提供し、だれもが自由に自然体で経営できる
環境をつくっていきます。
起業やビジネスを育てていくことを、もっと魅力的で気軽な行為に。個人事
業や中小企業などのスモールビジネスに携わるすべての人が、じぶんらしく
自信をもって経営できるように。
大胆にスピード感をもってアイデアを具現化できるスモールビジネスは、今
までにない多様な価値観や生き方、新しいイノベーションを生み出す起爆剤
だと私たちは考えています。スモールビジネスが大企業を刺激し、社会をさ
らにオモシロク、世の中全体をより良くする流れを後押ししていきます。（freee
ブランドムービー）

View Slide

4
会社情報
Company Profile
会社名
freee株式会社（フリー株式会社）
設立年月
2012年7月
従業員数
1,299人（※2023年6月末時点、連結会社の総数）
本社住所
東京都品川区大崎一丁目2番2号
アートヴィレッジ大崎セントラルタワー21F
支社
中部支社、関西支社、九州支社、沖縄支社、札幌支社
子会社
freee finance lab 株式会社（freee株式会社100%出資子会社）
freee biz 株式会社（freee株式会社100%出資子会社）
freeeサイン株式会社（freee株式会社70%出資子会社）
Likha-iT Inc（freee株式会社100%出資子会社）
sweeep株式会社（freee株式会社100%出資子会社）
透明書店株式会社（freee株式会社100%出資子会社）

View Slide

　
製品・サービス

View Slide

6
　
人事労務
電子契約
固定資産
請求管理
請求管理
債権債務
管理
経費精算
工数管理
販売管理
会計
会計・人事労務・販売管理を核とした
統合型経営プラットフォーム

View Slide

7
スモールビジネス向けに統合型クラウド※1 ERPを提供
Providing integrated cloud ERP for small businesses
統合型クラウド会計ソフト
2013年3月～
日本のクラウド会計ソフト市場
シェアNo.1※2
提供機能：
請求書
経費精算
決算書
予実管理
ワークフロー
内部統制
統合型クラウド人事労務ソフト
2014年10月～
スモールビジネスの人事管理市場
売上金額シェアNo.1※3
提供機能：
勤怠管理
入退社管理
給与計算
年末調整
マイナンバー管理
その他プロダクト
※1：クラウド＝クラウドサービスの略。ソフトウェアやハードウェアを所有することなく、ユーザーがインターネットを経由してITシステムにアクセスを行えるサービス
※2：リードプラス「キーワードからひも解く業界分析シリーズ：クラウド会計ソフト編」（2022年8月）より
※3：従業員100人未満および従業員100~300人未満の企業で売上金額シェアNo.1（2020年度）。ITR「ITR MARKET VIEW：人事・給与・就業管理市場2022」より

View Slide

　
freeeにおける
Product Design

View Slide

9
Product
Manager
Product
Designer
User
Business
System
Technology
Product Designerの役割
Roles of Product Designer
ユーザー、ビジネス、テク
ノロジー、法制度を理解
し、解決する課題と優先
順位を決め、ソリューショ
ンを設計し、提供する

View Slide

10
計画
調査・分析
要求・要件定義
設計・作成
評価
開発
品質保証
Product Designerの仕事の流れ
Workflow of Product Designer
HCD（人間中心設計）プロセスをベース
にProduct Designを行っていま
す

View Slide

11
Product Designerの仕事の流れ
Workflow of Product Designer
調査・分析ユーザーインタビュー等を行い、利用状況の調査し分析する
要求・要件定義ユーザーの要求（ニーズ）を特定し、それに対しプロダクトとして提供する価値、
内容を定義する
設計・作成定義された要求・要件を満たす構造、フロー、画面の設計を行う。狭義の情報設計・IA
評価設計に基づき、プロトタイピングを行い、各種専門家によるヒューリスティック評価や、ユーザーテストを行い、
妥当性を評価する
開発開発段階で様々な事情で実装できる機能が変化していく中で、要件を満たすべく取捨選択に関与し、
必要に応じて再設計を行う
品質保証 QAと共に開発したプロダクトをテストして、動作を保証する

View Slide

12
デザイン組織
Design Division
Product Designerはデザイン事業部に所属しま
す。デザイン事業部は、特定のプロダクト、プロ
ジェクトに紐づいた形でプロダクトデザインを行っ
ている『プロダクトデザイナー』と、特定のプロダク
ト、プロジェクトに紐づかずにProduct Designの全
体的な品質向上を目指す『デザイン基盤』、特に
新領域探索・企画を行う『エクスペリエンスデザイ
ナー』という3つの役割で構成されています。
プロ
ダク
ト
プロ
ダク
ト
プロ
ダク
ト
プロ
ジェ
クト
プロ
ジェ
クト
プロダクトデザイナー
デザイン基盤
エクスペリエンスデザイナー

View Slide

13
プロダクトデザイン品質向上
HCDプロセスを各プロダクト、プロジェクトで実践
し、ユーザーの課題、使いにくさを解決するUIデ
ザインを提案し、プロダクトへ反映していきます。
また、プロダクトデザインチーム内でプロダクト、
プロジェクトを越えたナレッジ共有、相互レビュー
を行うなど、スキル向上を図ったアクションも実施
しています。
UI設計
業務要件を取り入れ、デザインシステムおよびア
クセシビリティ基準に則ってUI設計を行います。
プロダクトデザイナー
Product Designer
共通仕様の方針やプロダクト・事業部を跨るプロダクトデザインの方針決定するチームです。新た
に作るだけでなく継続して改善し、プロダクトをより良い方向へ導いていきます。
情報設計
プロダクト全体におけるユーザーシナリオを整理
し、プロダクト内のサイト構造を最適化していきま
す。
例
● 様々なレイヤーの情報の是正
● プロダクト・サービス間の一貫性、相互の確
保
● カテゴリの再整理

View Slide

14
リサーチプロセスの整備
リサーチ実務に加えて、リサーチの環境づくりも
チームの役割の一つです。
他チームでもリサーチは実施されており、リサー
チステップの効率化が求められています。講習や
フォーマットの整備などを通して、リサーチしやす
い環境を作っています。
コンセプト検討
プロジェクトチームと共同でコンセプトデザインを
行います。メンバーによっては直接プロトタイピン
グを実施するケースもあります。
リサーチ結果を右から左に「渡す」ことはせず、
チームでユーザーを理解し、共にデザインするこ
と。freeeの強みはここにあります。
調査分析
テーマに応じて、事業企画、プロダクトマネー
ジャー、プロダクトマーケ、プロダクトデザイナーら
と共同で調査・分析を実施します。
リサーチを特別視せず、適切に分担して行いま
す。原理主義ではなく、現場にハマるリサーチを
追求していきます。
エクスペリエンスデザイナー
Experience Designer
ユーザーリサーチによる課題の発見、調査結果に基づくコンセプト検討、およびプロジェクトの計画
立案サポートを実施するロールです。また、チーム内のユーザー理解の促進や、社内におけるユー
ザーリサーチの環境作りも行っています。

View Slide

15
アクセシビリティ基準
プロダクトだけでなく freee が世に出すアウトプッ
トすべてが満たすべきアクセシビリティの基準を
WCAG2.1 に沿って策定しています。
また、デザイナーに限らず開発チーム全体でアク
セシビリティの高いプロダクトが作れるよう、チェッ
クリストの整備などのプロセス整備もしています。
プロダクト横断の共通機能
各プロダクトが共通で利用するアカウントやマス
ターデータ、申請承認のような共通機能のデザイ
ンを通して、ユーザーがプロダクトを横断して効率
的に業務ができる状態をつくっています。
高い速度で高いデザイン品質の開発サイクルを回していくことを目的に、ガイドラインやUIコンポー
ネントや共通機能の整備を行う専門チームです。freeeのプロダクト全体を横断して一貫した高品質
のUIを提供していくための基盤づくりをしています。
デザイン基盤
Design System
デザインガイドライン
画面パターンや操作パターンを類型化して、それ
ぞれの設計方針を定義し、デザイナーやエンジニ
アが少ない労力でそれらの機能を実現する仕組
みを整備しています
例
● 一覧画面、詳細画面の設計方法
● 一括編集UIの配置方法
● モーダルダイアログの利用パターン

View Slide

　
デザイン事例

View Slide

17
事例① freee人事労務での給与計算ロジックの可視化
● 従来の課題
○ ユーザーが入力した勤怠や従業員情報をもとに、
システムで給与計算を行った結果のみを表示して
いた
○ 他ソフトから乗り換える際に結果のみでは金額ズ
レの要因を特定できず、導入までのハードルになっ
ていた
● 解決策
○ 給与の計算ロジックを表示し、金額ズレの発生要
因を特定しやすくした
○ 関連する設定に1クリックで辿れるようにした

View Slide

18
事例① freee人事労務での給与計算ロジックの可視化
● リリース後のユーザーの声
○ 「給与の計算式は複雑で、端数で一円ズレるようなことがある。これまではズレの原因を見つけるのに
大きな労力を割いていたが、この機能でどこに原因があるか一目でわかるようになった。」
○ 「特にソフトを移行する際にはそのソフトが本当に信用できるのか不安になるが、計算式が見えている
ことで安心してソフトを利用できます。従業員の給与明細にも展開してほしい！」
● インパクト
○ 新たにfreee人事労務導入ユーザーの稼働早期化に貢献

View Slide

19
事例② freee請求書の書類リアルタイムプレビュー
● 従来の課題
○ freee会計の請求書機能では入力後、PDFダウン
ロードしないと出力される形にならないため、都度
確認の手間がかかっていた
○ 書類に直接入力しているような体験であったため、
入力エリア・方法に制約があり、入力のしやすさが
担保できていなかった
● 解決策
○ 書類情報の入力しやすさ向上と、出力される書類
をいつでもプレビューできることを両立できるように
した
Before
After

View Slide

20
事例② freee請求書の書類リアルタイムプレビュー
● ユーザビリティテストでのユーザーの声
○ 「請求書作成時は相手にどう請求書が見えるのか気にする。例えば、明細の改行の位置だったり、相
手にとって見やすいか、細かいところまでこだわっている。入力時にプレビューできたり拡大表示できる
と確認のしやすさが上がって良い。」
○ 「freee会計の請求書機能と比べて、入力すべき項目が集まっているので入力しやすい。」

View Slide

　
おまけ

View Slide

22
freeeのデザイナーたちが投稿した記事をお読みいただけます。
どういうふうに仕事に取り組んでいるのか、どんな人達が働いているのか、ぜひ一度覗いてみてく
ださい。
freee Design Magazine
中途での転職をご検討中の方に参考になるかもしれない記事をいくつか抜粋します。
● freeeの中途デザイナーって何やってるの①
● freeeの中途デザイナーって何やってるの②
● freeeの中途デザイナーって何やってるの③
freee Design Magazine

View Slide

23
書籍
● Webアプリケーションアクセシビリティ
● デザイニングWebアクセシビリティ: アクセシブルな設計やコンテンツ制作のアプローチ
● コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
● インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン
freee デザイナーが書いた本

View Slide

　
　
Thank you!

View Slide

freee + Product Design FY24 Q2

freee + Product Design FY24 Q2

freee

More Decks by freee

Other Decks in Business

Featured

Transcript