BtoB SaaSでダークテーマのUIを採用したら5ヶ月でクビになった
こんにちは。Flatt Securityの豊田です。
自分はこの会社の共同創業者でありフェーズごとにさまざまな業務を受け持ってきたのですが、あくまで本職はデザイナーだという矜持だけは持ち続けているつもりです。
PdMと分担しながらではありますが、実際今現在もSaaSプロダクトのUIデザインを担当していますので、今日はひとつデザイナーとしてブログを書こうと思います。
🎉 KENRO(ケンロー)正式版をローンチしました！
実は先週火曜日(2021年4月13日)に弊社から初のSaaSプロダクトをローンチしました！名前をKENRO(ケンロー)と言います。
営業のメンバーが考えた名前も、自分がデザインしたロゴも人気を博しており嬉しい限りです。
どのようなプロダクトなのか、軽く説明します。
このブログを読まれるような方の所属企業ではWebプロダクトを開発するエンジニアを複数抱えていらっしゃる場合が多いと思うのですが、そのようなWebエンジニアを対象としたeラーニングのサービスです。
KENROは、脆弱性を生まないようにプロダクトを実装する「セキュアコーディング」を効率的に学習できるよう、脆弱性の含まれたソースコードを修正したり、実際のハッキングに近い攻撃をデモ環境で行ったりできる、ハンズオンの実践演習が主体となっています。
弊社はお客様のプロダクトに脆弱性がないか調査する「セキュリティ診断」というサービスも提供しており日頃から沢山のプロダクトを調査しますが、残念ながら世の中のプロダクトの多くは脆弱性に溢れています。
少しでも脆弱性のない世界を作れるよう、学習によって「事前に」セキュリティ対策を行えるのがこの「KENRO」なのです。
詳しくは以下のサービスページよりご覧ください 💁
🚧 5ヶ月間のβ版期間
サービスページを訪れていただくと、上のスクリーンショットの通りローンチしたばかりにしては錚々たる実績ロゴが並んでいるな…嘘松か？とお思いになるかもしれません。
そういうわけではなく、実はKENROは2020年の11月よりβ版を提供していたのです。上記の企業様はβ版期間からプロダクトを評価いただき、正式導入を決めてくださった皆様なのです。本当に感謝しかありません。
ということで、KENROは5ヶ月間のβ版期間を経てリリースされたわけですが、実はβ版期間は違うサービス名称でした。その名も、「Flatt Security Learning Platform」です。
こちらの名前が変更になった理由は想像に難くないでしょう。お客様が覚えづらい、呼びづらい、商談でも略される始末…さらにはSEO的にもGoogleがプロダクト名だと正しく解釈してくれない…
これらの課題があり、正式版リリースのタイミングで名称が変更されました。
しかし、同じタイミングでクビになったのは名称だけではありませんでした。そう、僕が丹精込めて作り上げた「ダークテーマUI」もクビになったのです。
😢 R.I.P. ダークテーマ
新旧のデザインカンプを並べてみました。見事に全ての色が置き換わっています。何がこのような悲しい事態を招いてしまったのでしょうか。
ダークテーマを採用した経緯、そしてクビになった理由を順に見ていきます。
🦏 採用した経緯
ダークテーマを選んだ理由を箇条書きであげてみます。
- セキュリティのサービスなので、世界観的にはマッチしている。(ハッカーという呼称などはあまり望ましくないですが、フィクションの中ではよくそのような世界観で扱われると思います。)
- 海外類似サービスでは採用しているものもある。
- 演習が主体とはいえ、テキストコンテンツも豊富に用意しているのでダークテーマなら目が疲れにくいのではないかという仮説。
- サービスのアイデンティティを確立しやすくなるという仮説。
- （やってみたかった。デメリットなさそうならいいじゃん！）
これだけ見るとそこそこ納得感はあると思います。実際、今もこれが大きく間違っていたとは思っていません。
しかし、これらの理由を覆すに足るデメリットが複数出てきたのです。
😇 想定外だったデメリット
詳細な実機検証を経ているわけではないので、ここから先は推測も含む論を展開するのでご了承ください。
ユーザはMacのような見やすいディスプレイを利用しているとは限らない
まず、「見づらい」という声をユーザー様より多くいただきました。
自分としては文字の大きさや、WindowsとMacでの游ゴシックの違いなども意識したフォント指定など、最低限のことはきちんとやっていました。かつ、自分の手元では問題のない表示だったのでこのような心配はしていませんでした。
しかし、実際に複数のフィードバックをいただけばそれは間違いなく課題です。そこで理由として一つ推測されたのはディスプレイの違いでした。自分はMacBookの「綺麗な」発色がよく解像度の高いディスプレイでデザインをしていましたが、ユーザの使用する、企業の社用PC/外部モニタのディスプレイがそうであるとは限らないでしょう。
ダークテーマ以外の問題もあるのでは（フォントなど）とも思うのですが、「自分でホワイトテーマを当てたら見やすくなった」というフィードバックもいただいたため、少なくともダークテーマがいい印象を与えていないことがわかりました。
実際、文字色が膨張色である白だったときにアンチエイリアスの効いていないディスプレイでは読みづらい…などはあるのかもしれません。
アクセシビリティをこのような観点で考えるのも大事なことですね。
【追記】
明朝体やコントラストがダメなのでは？と言うコメントをいくつかいただきました。それは一定正しくて、実装の上ではデザインカンプから変えて改善などしています（カンプ古くてごめんなさい）。ただ、それでも似たような要望はいただきましたし、根本的に拭えない課題として存在したのが次に書いてある内容です。
ユーザはダークテーマに慣れていないかもしれない
僕も6月で25歳になるので四捨五入すれば30になりますが、まだギリギリ20代前半の若者です。discordとか全然使います。スマホやデスクトップアプリをバンバンダークモードに切り替えます。
しかしユーザはどうでしょうか？ありがたいことにKENROは年齢層の若いベンチャーだけでなくエンタープライズのお客様にも導入いただいております。そのような企業のユーザ全てが自分と同じような価値観かというと、それはNoでしょう。
そもそもダークテーマに慣れていないかもしれないし、そうでなくとも業務中に触るツールとしては違和感を感じるかもしれません。根本的にダークテーマに抵抗感があるユーザも存在するというのは、フィードバックを通じて見えてきた事実でした。
これはまさに「ユーザが見えていなかった」ということなので、デザイナーとしては恥ずべき点だと思います。
🙅 ユーザの意見をそのまま聞き入れるのは危険だけど…
タスクベースUIを良いと主張するユーザを「それは初回、特定の機能を使う時にそう思うだけです。さまざまな機能を使いこなす上で学習効率の良いオブジェクトベースUIのほうがいいんですよ」と説き伏せるような活動は生産的だと思います。
そのようなパターンもあるので、（プロダクト開発の常識ですが）安易にユーザの声を反映するのは危険です。
しかし残念ながら、ダークテーマがユーザービリティやビジネス上の利益に具体的につながる目算は現状ないですし、カラーテーマ選択機能なんて優先度の低いものを実装するリソースなんてありません。
そして、企業の複雑な意思決定のフローのファネルを一つ一つ通過していかねばならないBtoBプロダクトにおいて、その妨げになるような要素は極力排除しなければいけません。
🏁 まとめ
ということで、KENROはホワイトテーマUIへと変更されました。
もちろん、N=1ですので、BtoB SaaS において絶対にダークテーマを採用してはいけないかというとそのような話ではないと思います。
しかし、ユーザの使用する端末や年齢・価値観を具体的に想像してみて、懸念が思い浮かぶようであれば一度立ち止まった方がいいかもしれません。
この失敗にも価値があったなと思えるので、ぜひ僕の反省を生かしてもらえれば幸いです😇
そして、いいなと思ったら是非この記事を社内Slackなどに展開して、KENROをエンジニアや人事の方におすすめしていただけると嬉しいです！弊社の最強セキュリティエンジニア陣が作り上げた学習コンテンツで、絶対に損をさせることはありません。
無料トライアルも可能ですので、是非サービスページよりお問い合わせを！
また、セキュリティ診断に関しては以下よりどうぞ！どちらもお待ちしてます！
