こんにちは、
id:ymrl です。最近は昼間はfreeeでエンジニアを、夜はクマサン商会で漁業をしています。
先日、これまで「給与計算freee」だった製品をリニューアルし、「人事労務freee」としてリリースしました。リニューアルに伴っていくつか機能を追加したのでそちらの紹介もしたいのですが、今回は製品のロゴやUIの色も大きく変更した話をします。
広い視野で人事労務の業務をサポートできるサービスへ
人事労務freeeの前身である給与計算freeeは、元々freeeがクラウド会計ソフトで創業した会社だったこともあって、給与額や、そこから控除される税金や保険料など、お金の計算をメインとしてスタートしました。スモールビジネスの現場で人事労務を担当する方々にとって、どんな業務が大変で、何をするとより効率的に業務をしていけるようになるかを調べたり考えたりするうちに、お金の計算にこだわらずもっと広い視野で人事労務の業務をサポートできる機能を作っていくべきだという考えに至りました。
そこでサービスの名称を「人事労務freee」に変更することになりました。
給与計算freeeのベータ版をリリースしたのは3年前の5月ですが、このときは先行するサービスである会計freeeにあったものを「給与計算」に書き換えてそのまま使っていたような感じでした。それから3年のあいだに数多くの進化を遂げてきましたが、「会計freeeと同じようなロゴとUI」という状態はずっとそのままでした。
おかげさまで給与計算freeeは、この3年間で当初では想像できないほど多くの事業所に導入していただくことができました。しかしそれでも、会計freeeの知名度には遠く及ばず、なかなか「freeeは会計だけでなく、給与計算もやっている」と認識していただくことができていませんでした。そこで、今回のリニューアルを機に、会計freeeではないfreeeのもう一つのサービスとして人事労務freeeを知っていただくために、製品のロゴやUIの色合いも変更することにしました。
ロゴの色を決める
リニューアルにあたって、リリースに先行して3月に名称とコンセプトの発表を行う予定であったために、最初はとにかくロゴの色を優先的に決める作業が必要となりました。緑に限らずさまざまな色を検討したのですが、「会計freeeのロゴと並べたときに違和感がない ようにしつつ 会計freeeとの違いがハッキリとわかる」という条件から最終的に 緑色 が選ばれました。
4月には77歳の新入社員!?加藤一二三 人事労務への挑戦というサイトを公開したのですが、ここでも新しいロゴと色が使われています。
人事労務freeeが緑色になることから、このリニューアル作業は「緑化」と呼ばれるようになりました。
UIも緑に
サービスのUIについても、新しいロゴにあわせて違和感のないようにしたかったため、UI全体の色合いを変更しました。ロゴの緑色と調和しつつも、これまでのUIに親しんできたユーザーの方々や、会計freeeを使っていた人がこれから人事労務freeeも使い始めるという時に、使い方の面で戸惑ったりすることのないようにしなければなりません。これまでの給与計算freeeとも、freeeの他のサービスとも、地続きになっているUIデザインにする必要がありました。
ここでは、ロゴの色である #006939 に加えて #10B56C という少し明るい緑色も使い、それらの色を既存のUIのおもに青系の色が使用されている場所にあてはめていきました。
これらの多くは社内でサービスを横断して使用しているスタイルシートに使用されているため、ひとまずこれらを上書きする形で実現しました。freeeのサービスではほぼすべてのスタイルシートにSCSSを使用しているため、「共通のスタイルシートを @import した上で色を変えるスタイルを指定する」というやり方をとっています。
/* button.scss */ @import 'common_components/button'; /* サービス共通のスタイルが指定されているファイル。青い。*/ .button { /* 上記のファイルの内容を上書きして緑にする */ background: #006939; border-color: #006939; } .button:hover { background: lighten(#006939, 10%); border-color: lighten(#006939, 10%); }
SCSSファイルの構造を工夫すれば、スタイルの上書きをすることなく、CSSのビルド時に指定したカラーパレットを使うようにすることもできそうな気もしますが、今回は開発スピードを重視してこの方法をとっています。
ドッグフーディングする
これまでの長い間、「freeeのサービスは青っぽい画面」というのが常識だと思って開発をしてきたわけですが、そのおかげで大きく色を変えるのは開発者としては勇気が必要でした。ある日突然UIの色が変わって、そのことで使用感に大きな影響がでてしまうのは避けたい気持ちがありました。
また、製品のヘルプページに掲載しているスクリーンショットを変更する準備をしたり、セールス活動やマーケティング活動に使用する資料を作るためにも、社内にリニューアル後の状態のプレビューを展開しておいたほうが良いだろう、と考えました。
そこで、せっかく自社の給与計算もfreeeのサービスでドッグフーディングしていることを利用して、社内の全従業員の目を使ってあたらしいUIに問題がないかを確認してもらうことにしました。
確認も普段の操作と同じやり方でできるよう、社内の従業員がログインしたときだけ新しいUIが表示されるようにしていました。普通ならば別のURLを用意してそちらにアクセスしてくださいとお願いをしたりするところだとは思うのですが、確認のために身構える必要があるよりも、普段と同じように気軽に見てもらえるほうが社内の協力を得やすいだろうというのが理由です。
せっかくならこのプレビューの公開を楽しいイベントにしてしまおうということで、社内プレビュー公開の目標日を 給料日の前日 として、新しくリニューアルした画面で給与明細を確認してみよう というキャンペーンにしてみました。当日はメールやSlackで呼びかけて、とにかく新しいUIに触れてみましょうというアピールをしました。
おおきく色が変わったこと対してブーイングがないか心配でしたが、やってみた結果としてはとても好評で、社内で最も多く寄せられた意見は「目に優しそう」でした。
おわりに
そういうわけで、今回のリニューアルでいろいろなところの色を変えた話をご紹介しました。これまで青系の色で作るものだと思いこんでいたサービスのUIを、いきなり別の色にしてしまうというのは新しい試みで、先述したSCSSファイルの構造以外にも、webpackのcss-loaderによるスタイルシート入りの共通コンポーネントではどうするべきなのかなど、いろいろな課題が残っています。これらの課題も少しずつ解決していこうと思っています。
freeeでは色彩やCSSやSplatoonに造詣の深いエンジニア・デザイナーを募集しています。興味のある方はよろしくお願いします。
