microCMS

【SmartHR様】文言修正にかかる工数が1/10に!非エンジニアだけで修正できる仕組み作りに成功

工藤 港
SmartHRの年末調整機能は、企業の年末調整業務を効率化・自動化するためのサービスで、登録企業数は50,000社以上(※)を誇ります。

労務担当者の業務を遂行する機能と、従業員が年末調整用の申告書を作成・提出する機能があり、従業員がアンケート形式で回答することで申告書を簡単に作成できます。

※SmartHR上で事業所登録を完了しているテナント数(但し、退会処理を行ったテナント数を除く)
SmartHR年末調整機能
プロダクトエンジニアの近藤さんとプロダクトマネージャーの三好さんに、microCMSの導入経緯や導入後の変化についてお話を伺いました。

導入の背景:Webアプリケーション画面の文言修正対応の工数が多く発生していた

導入前に抱えていた課題を教えてください。

- 近藤さん

2021年までの年末調整機能の従業員向けアンケート画面は、UXライターがGoogleスプレッドシート上で文言を検討したものをエンジニアが実装していました。しかし、出来上がった実際の画面を見てみるとスプレッドシートにて検討した際のイメージと異なり、文言をリライトする必要がありました。

アンケート形式で提供しているため、回答に応じて次の質問を条件分岐したり、1画面の質問内容を変更すると他の画面も変更する必要があったりと、修正や手戻りが頻発する課題がありました。
SmartHR近藤さん

- 三好さん

スクラムで開発が行われているため、非エンジニアは修正したい画面ごとにチケットを切り、毎週リリース時にエンジニアに修正を行ってもらったものをチェックし、さらに修正が必要な場合は新しいチケットを切る、といった作業も発生していました。

年末調整機能のアンケートは100画面近くあり、そのうち30画面ぐらいは修正が必要です。小さい修正でも画面数が多いため、エンジニアの対応工数がかかり、非エンジニアから気軽に依頼をしづらいといった精神的負荷もあり、エンジニアの手を煩わせずに精度の高い文言修正を行う方法を模索しました。

その中で、非エンジニアが開発環境を構築してプルリクエストも投げる体制を試みましたが、環境構築に時間がかかり、コード品質を確保するためにエンジニアとのやり取りが多く発生したため断念しました。
SmartHR三好さん

導入のきっかけ・決め手はなんでしたか?

- 近藤さん

上記の課題から、ブラウザ上で文言をプレビューし、コンテンツデータやデザインを動的に変更・保存できる「オレオレCMS」のようなものを作って、非エンジニアが使いやすい環境を構築することを検討していました。

microCMSについては以前から知っていましたが、本格的に導入を検討を始めたきっかけは、「フロントエンド開発効率化」をテーマにした登壇イベントでZOZOテクノロジーズの武井さんが紹介していたmicroCMSを使用した開発事例が、実現したかったことと方向性が近かったことです。

参考動画:「ZOZO・Quipper・SmartHRのフロントエンド開発効率化/MidasTechStudy#2


参考記事:ZOZO Technologies テックブログ「React + microCMSで実現するZOZOTOWNキャンペーンページのノーコード化

そこで、microCMSの使い心地を確認するために、テスト的にHobbyプランでアカウントを作成し、スキーマやAPIプレビューを試してみた結果、使いやすいと判断し、導入を決めました。
JavaScriptのSDKがnpmで公開されている点も、決め手の1つになりました。

利用箇所:SmartHR 年末調整機能のアンケート画面でmicroCMSをフル活用

microCMSをどこでご利用いただいていますか?

- 近藤さん

SmartHR 年末調整機能アンケート画面で使用しています。
SmartHR年末調整機能
(画像:microCMS導入済みのSmartHR 年末調整機能アンケート画面)

SmartHR 年末調整機能の管理画面イメージ
(画像:SmartHR 年末調整機能アンケート項目を設定しているmicroCMSの管理画面)

microCMSを導入にあたって、本番環境に影響を与えないように設計しました。お客様の環境によっては特定のドメインしか通信できないケースや、バージョン管理の問題などを考慮する必要があったためです。
SmartHR 年末調整機能の構成図
(画像:SmartHR 年末調整機能構成図)

Storybookでプレビューするようにしているのは、本番環境であるアプリケーションのプロダクトコードの中で、microCMSのAPIを直接呼び出す処理を避けたかったためです。

加えて、SmartHRではより良い文書を書くための校正ルール「textlint(テキストリント)」を全社的に使っていて、文言をファイルに落とすことで確実にテキストをチェックできる恩恵を受けたいという背景がありました。
参考:SmartHRがオープンソースで公開しているtextlintのルールプリセット

その他の技術的な経緯や設計詳細は、下記SmartHRのテックブログ記事で詳しく解説しています。
参考:「SmartHRのペーパーレス年末調整」のアンケート画面の文言をmicroCMSで管理して、Storybookでプレビューできるようにした話

導入の効果:microCMSを使い始めて文言修正工数が1/10に!

使ってみてmicroCMSの良さは感じられましたか?

- 近藤さん

文言修正作業が2,3日→3時間程度に短縮し、非エンジニアだけでほぼ完結できてます。またエンジニアの反映作業も、以前は手戻りや修正のやりとりが複数回、トータル期間で1ヶ月ほどかかっていましたが、microCMSの導入でやりとりが不要になり、5分程度で1回の反映作業が完了しています。

非エンジニアがmicroCMSでアンケート項目を更新すると、コンテンツWebhook設定でSlackチャンネルに通知が飛ぶようにしています。エンジニアが通知を見て、本番に反映する必要があると判断した場合、スクリプトを用意して、ローカルに落としたものをコミットしてプッシュで反映しています。本番反映がフットワーク軽く対応できるようになって助かっています
SmartHR 年末調整機能のアンケート画面プレビューデモ
( 動画:microCMSで文言を修正しながら年末調整機能アンケート画面のプレビュー確認作業を行う様子)

また、ヘルプページブログドキュメントがわかりやすかったことや、問い合わせをした際に解決策を提示してもらえることで解決につながったことなど、サポートが充実しているのでスムーズに開発を進められました

- 三好さん

非エンジニアからエンジニアに修正依頼をする際の精神的な負荷が軽減し、文言決めの精度が増しました
Slack会話のやりとり
(画像:プロジェクト内でのmicroCMS導入後の会話)

プロジェクト全体でみると、アンケート画面の文言を検討する時期が開発の佳境のタイミングと重なることもあり、エンジニアの手を煩わせることがなくなったことが大きな成果です。

また、管理画面が直感的でわかりやすく、学習コストが低く非エンジニアでもすぐに使えたので助かりました。
SmartHR近藤さんと三好さん

今後の活用計画はありますか?

- 近藤さん

microCMSは使用感が良く満足度が高いため、年末調整機能今後も使用し続けたいと考えています。年末調整機能は、サービスの特性上利用されるシーズン中の改善が難しく、フィードバックサイクルが困難ですが、今回のような課題解決がユーザーの価値向上につながると考えています。

まだ使っていない機能で気になっているのは、外部データ連携(iframe)機能です。柔軟性が高そうなので、将来的に課題が発生した場合の解決策や選択肢として活用したいですね。

今後microCMSに期待してることはありますか?

- 近藤さん

ロードマップに今後予定されている機能として掲載されていますが、リッチテキストをシームレスにテキストに変換できるようになることを期待しています。現状は、テーブル(表)を扱う際にHTMLで入力しているため、ここが改善されると修正速度やアクセシビリティの向上につながりそうです。

ロードマップは定期的にチェックしていますが、公開されているのがとてもいいですね!

(画像:microCMSプロダクトロードマップ画面イメージ)

- 三好さん

弊社ではmicroCMSのレビュー機能を活用しています。管理画面上で複数人で修正をし、レビューのやり取りをして承認されたものから公開する流れです。
そのため、修正箇所・メンバーの詳細履歴や、メンションや通知の仕組みがあるとチームで更新をしたり、業務を進めるのがよりスムーズになると思います。GitHubのプルリクエストのようなイメージで、複数人での編集がより使いやすくなる機能が増えると嬉しいですね。

(編集注:直近では、ロードマップにてレビューのWebhook通知を予定しています。乞うご期待ください。)

-----------------------

引き続きmicroCMSがお役立ていただけるよう改善を進めてまいります。近藤さん、三好さん、貴重なお話をありがとうございました!

導入事例集 - 課題・ケース別編

microCMSを導入いただいた企業の様々な用途の活用方法を課題やケース別にまとめた資料です。導入前に抱えていた課題、microCMS導入後の効果をご覧いただけます。

無料で資料請求する

ABOUT ME