freee + Product Design FY24 Q3

P.3 freeeブランドムービーについては【freee】ブランドムービー2021「スモールビジネスを、世界の主役に。」

P.16 エクスペリエンスデザインチームの詳細については「freeeの『成果を生み出すエクスペリエンスデザインチーム』の秘密」,
freeeエクスペリエンスデザインチームのその後,
freeeデザインリサーチチームの現在地もご参照ください。

P.24のリンクは以下です。
・freee Design Magazine
・freeeの中途デザイナーって何やってるの①
・freeeの中途デザイナーって何やってるの②
・freeeの中途デザイナーって何やってるの③

P.25のリンクは以下です。
・Webアプリケーションアクセシビリティ
・デザイニングWebアクセシビリティ: アクセシブルな設計やコンテンツ制作のアプローチ
・コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション
・インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン
・freeeの福利厚生と働き方について

登壇動画はこちらでもご覧いただけます。
https://www.youtube.com/watch?v=AYTh0pTXKYA

Transcript

1. 　 freee + Product Design freee株式会社
2. 　 freee株式会社について
3. 3 使命 Mission スモールビジネスを、 世界の主役に。 freeeは「スモールビジネスを、世界の主役に。」をミッションに掲げ、統合型 経営プラットフォームを開発・提供し、だれもが自由に自然体で経営できる 環境をつくっていきます。 起業やビジネスを育てていくことを、もっと魅力的で気軽な行為に。個人事 業や中小企業などのスモールビジネスに携わるすべての人が、じぶんらしく 自信をもって経営できるように。 大胆にスピード感をもってアイデアを具現化できるスモールビジネスは、今 までにない多様な価値観や生き方、新しいイノベーションを生み出す起爆剤 だと私たちは考えています。スモールビジネスが大企業を刺激し、社会をさ らにオモシロク、世の中全体をより良くする流れを後押ししていきます。（freee ブランドムービー）
4. 4 会社情報 Company Profile 会社名 フリー株式会社（本社：東京） 設⽴年⽉⽇ 2012年7⽉9⽇ freee会計リリース年⽉⽇ 2013年3⽉19⽇ CEO 佐々⽊ ⼤輔 証券コード：4478（市場区分：グロース市場） 事業内容（短⽂） 「freee会計」「freee⼈事労務」「freee販売」などの開発‧販売 資本⾦は最新の有価証券報告書（IR）からご確認ください Webサイト  https://www.freee.co.jp（短縮表記→ freee.co.jp）
5. 5 グループ会社情報 会社名 フリーファインナンスラボ株式会社 ※フリー株式会社100%出資⼦会社 設⽴   2018年10⽉ 本社住所   〒141-0032 東京都品川区⼤崎⼀丁⽬2番2号 アートヴィレッジ⼤崎セント ラルタワー20F 事業者登録：適格請求書発⾏事業者（登録番号：T7010701036533） 会社名 フリービズ株式会社 ※フリー株式会社100%出資⼦会社 設⽴   2020年3⽉ 本社住所   〒141-0032 東京都品川区⼤崎⼀丁⽬2番2号 アートヴィレッジ⼤崎セント ラルタワー 20F 事業者登録：適格請求書発⾏事業者（登録番号：T8010701039064） 会社名 フリーサイン株式会社 ※フリー株式会社70％出資⼦会社  設⽴   2013年4⽉ 本社住所  〒141-0032 東京都品川区⼤崎⼀丁⽬2番2号 アートヴィレッジ⼤崎セント ラルタワー18F 事業者登録：適格請求書発⾏事業者（登録番号：T2011001094747） 会社名 Likha-iT Inc  ※フリー株式会社100％出資⼦会社 設⽴   2019年7⽉ 本社住所  フィリピン共和国マカティ市 (11th Flr. 142 Amorsolo Bldg., 142 Amorsolo St., San Lorenzo, Makati City 1229) 会社名 sweeep株式会社  ※フリー株式会社100％出資⼦会社 設⽴   2011年6⽉ 本社住所  〒150-0002 東京都渋⾕区渋⾕2-24-12 渋⾕スクランブルスクエア39F  WeWork 事業者登録：適格請求書発⾏事業者（登録番号：T5010401094081） 会社名   透明書店株式会社 ※フリー株式会社100％出資⼦会社 設⽴     2022年11⽉ 本社住所  〒141-0032 東京都品川区⼤崎1-2-2 アートヴィレッジ⼤崎セントラルタワー 21階 事業者登録：適格請求書発⾏事業者（登録番号：T1010701043477）
6. 　 製品・サービス
7. 7 　 人事労務 電子契約 固定資産 請求管理 請求管理 債権債務 管理 経費精算 工数管理 販売管理 会計 会計・人事労務・販売管理を核とした 統合型経営プラットフォーム
8. 8 スモールビジネス向けに統合型クラウド※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」より
9. 　 freeeにおける Product Design
10. 10 Product Manager Product Designer User Business System Technology Product Designerの役割 Roles of Product Designer ユーザー、ビジネス、テク ノロジー、法制度を理解 し、解決する課題と優先 順位を決め、ソリューショ ンを設計し、提供する
11. 11 計画 調査・分析 要求・要件定義 設計・作成 評価 開発 品質保証 Product Designerの仕事の流れ Workflow of Product Designer HCD（人間中心設計）プロセスをベース にProduct Designを行っていま す
12. 12 Product Designerの仕事の流れ Workflow of Product Designer 調査・分析 ユーザーインタビュー等を行い、利用状況の調査し分析する 要求・要件定義 ユーザーの要求（ニーズ）を特定し、それに対しプロダクトとして提供する価値、 内容を定義する 設計・作成 定義された要求・要件を満たす構造、フロー、画面の設計を行う。狭義の情報設計・IA 評価 設計に基づき、プロトタイピングを行い、各種専門家によるヒューリスティック評価や、ユーザーテストを行い、 妥当性を評価する 開発 開発段階で様々な事情で実装できる機能が変化していく中で、要件を満たすべく取捨選択に関与し、 必要に応じて再設計を行う 品質保証 QAと共に開発したプロダクトをテストして、動作を保証する
13. 13 デザイナー体制 Designers デザイナーは各事業部に所属します。特定のプロ ダクトのデザインを行っている『プロダクトデザイ ナー』と、新領域探索・企画を行う『エクスペリエン スデザイナー』、特定のプロダクトに紐づかずに Product Designの全体的な品質向上を目指す 『デザイン基盤』という3つの役割で構成されてい ます。 基盤 事 業 部 事 業 部 事 業 部 事 業 部 事 業 部 プロダクト・エクスペリエンス デザイナー デザイン基盤
14. 14 freeeのデザイナーの働き方について 各デザイナー職種は、全⽇原則出社となります。 週5出社とすることで⼩さいお⼦さんの⼦育てや近親 者の介護などの理由で⽇常⽣活との両⽴が困難にな る⽅については、重要なMTG等は極⼒出社して参加 することを前提として、週1~2⽇の在宅勤務は可能で す。その他の事情についても、⼈事部⾨の判断で在宅 勤務を可能とするケースもあります。 加えて、ご⾃⾝、ご家族の体調不良やお⼦さんの学 校⾏事など、突発的な事情があった場合は在宅勤務 は可能です。
15. 15 プロダクトデザイン品質向上 HCDプロセスを各プロダクト、プロジェクトで実践 し、ユーザーの課題、使いにくさを解決するUIデ ザインを提案し、プロダクトへ反映していきます。 また、プロダクトデザインチーム内でプロダクト、 プロジェクトを越えたナレッジ共有、相互レビュー を行うなど、スキル向上を図ったアクションも実施 しています。 UI設計 業務要件を取り入れ、デザインシステムおよびア クセシビリティ基準に則ってUI設計を行います。 プロダクトデザイナー Product Designer 共通仕様の方針やプロダクト・事業部を跨るプロダクトデザインの方針決定するチームです。新た に作るだけでなく継続して改善し、プロダクトをより良い方向へ導いていきます。 情報設計 プロダクト全体におけるユーザーシナリオを整理 し、プロダクト内のサイト構造を最適化していきま す。 例 • 様々なレイヤーの情報の是正 • プロダクト・サービス間の一貫性、相互の確 保 • カテゴリの再整理
16. 16 リサーチプロセスの整備 リサーチ実務に加えて、リサーチの環境づくりも チームの役割の一つです。 他チームでもリサーチは実施されており、リサー チステップの効率化が求められています。講習や フォーマットの整備などを通して、リサーチしやす い環境を作っています。 コンセプト検討 プロジェクトチームと共同でコンセプトデザインを 行います。メンバーによっては直接プロトタイピン グを実施するケースもあります。 リサーチ結果を右から左に「渡す」ことはせず、 チームでユーザーを理解し、共にデザインするこ と。freeeの強みはここにあります。 調査分析 テーマに応じて、事業企画、プロダクトマネー ジャー、プロダクトマーケ、プロダクトデザイナーら と共同で調査・分析を実施します。 リサーチを特別視せず、適切に分担して行いま す。原理主義ではなく、現場にハマるリサーチを 追求していきます。 エクスペリエンスデザイナー Experience Designer ユーザーリサーチによる課題の発見、調査結果に基づくコンセプト検討、およびプロジェクトの計画 立案サポートを実施するロールです。また、チーム内のユーザー理解の促進や、社内におけるユー ザーリサーチの環境作りも行っています。
17. 17 アクセシビリティ基準 プロダクトだけでなく freee が世に出すアウトプッ トすべてが満たすべきアクセシビリティの基準を WCAG2.1 に沿って策定しています。 また、デザイナーに限らず開発チーム全体でアク セシビリティの高いプロダクトが作れるよう、チェッ クリストの整備などのプロセス整備もしています。 プロダクト横断の共通機能 各プロダクトが共通で利用するアカウントやマス ターデータ、申請承認のような共通機能のデザイ ンを通して、ユーザーがプロダクトを横断して効率 的に業務ができる状態をつくっています。 高い速度で高いデザイン品質の開発サイクルを回していくことを目的に、ガイドラインやUIコンポー ネントや共通機能の整備を行う専門チームです。freeeのプロダクト全体を横断して一貫した高品質 のUIを提供していくための基盤づくりをしています。 デザイン基盤 Design System デザインガイドライン 画面パターンや操作パターンを類型化して、それ ぞれの設計方針を定義し、デザイナーやエンジニ アが少ない労力でそれらの機能を実現する仕組 みを整備しています 例 • 一覧画面、詳細画面の設計方法 • 一括編集UIの配置方法 • モーダルダイアログの利用パターン
18. 　 デザイン事例
19. 19 事例① freee人事労務での給与計算ロジックの可視化 • 従来の課題 ◦ ユーザーが入力した勤怠や従業員情報をもとに、 システムで給与計算を行った結果のみを表示して いた ◦ 他ソフトから乗り換える際に結果のみでは金額ズ レの要因を特定できず、導入までのハードルになっ ていた • 解決策 ◦ 給与の計算ロジックを表示し、金額ズレの発生要 因を特定しやすくした ◦ 関連する設定に1クリックで辿れるようにした
20. 20 事例① freee人事労務での給与計算ロジックの可視化 • リリース後のユーザーの声 ◦ 「給与の計算式は複雑で、端数で一円ズレるようなことがある。これまではズレの原因を見つけるのに 大きな労力を割いていたが、この機能でどこに原因があるか一目でわかるようになった。」 ◦ 「特にソフトを移行する際にはそのソフトが本当に信用できるのか不安になるが、計算式が見えている ことで安心してソフトを利用できます。従業員の給与明細にも展開してほしい！」 • インパクト ◦ 新たにfreee人事労務導入ユーザーの稼働早期化に貢献
21. 21 事例② freee請求書の書類リアルタイムプレビュー • 従来の課題 ◦ freee会計の請求書機能では入力後、PDFダウン ロードしないと出力される形にならないため、都度 確認の手間がかかっていた ◦ 書類に直接入力しているような体験であったため、 入力エリア・方法に制約があり、入力のしやすさが 担保できていなかった • 解決策 ◦ 書類情報の入力しやすさ向上と、出力される書類 をいつでもプレビューできることを両立できるように した Before After
22. 22 事例② freee請求書の書類リアルタイムプレビュー • ユーザビリティテストでのユーザーの声 ◦ 「請求書作成時は相手にどう請求書が見えるのか気にする。例えば、明細の改行の位置だったり、相 手にとって見やすいか、細かいところまでこだわっている。入力時にプレビューできたり拡大表示できる と確認のしやすさが上がって良い。」 ◦ 「freee会計の請求書機能と比べて、入力すべき項目が集まっているので入力しやすい。」
23. 　 おまけ
24. 24 freeeのデザイナーたちが投稿した記事をお読みいただけます。 どういうふうに仕事に取り組んでいるのか、どんな人達が働いているのか、ぜひ一度覗いてみてく ださい。 freee Design Magazine 中途での転職をご検討中の方に参考になるかもしれない記事をいくつか抜粋します。 • freeeの中途デザイナーって何やってるの① • freeeの中途デザイナーって何やってるの② • freeeの中途デザイナーって何やってるの③ freee Design Magazine
25. 25 書籍 • Webアプリケーションアクセシビリティ • デザイニングWebアクセシビリティ: アクセシブルな設計やコンテンツ制作のアプローチ • コーディングWebアクセシビリティ - WAI-ARIAで実現するマルチデバイス環境のWebアプリケーション • インクルーシブHTML+CSS & JavaScript 多様なユーザーニーズに応えるフロントエンドデザインパターン freee デザイナーが書いた本 freeeの福利厚生と働き方について ミッションにワクワク、信頼できる仲間との繋がりを築く、インパクトを通じて成長する、という 3軸を基に、福利厚生を拡充しております。ボトムアップで作られた制度なども多く存在しています。
26. 　 　 Thank you!