UI改善に新機能追加。日々スクラップ＆ビルドを繰り返しているサービス開発現場では、一つのデザインを創り上げるまでに数十を超えるデザイン案を作成することも少なくありません。本連載では"お蔵入りUIデザイン"と題して、現在のデザインに至るまでにお蔵入りとなったデザインにフィーチャーし、「なぜお蔵入りになってしまったのか？」をオクラくんと共に担当デザイナーがご紹介していきます。

オクラくん

ネバにちは！ 
今回は、8月にリリースしたばかりのヘルステックアプリ『CARTE（カルテ）by CyberAgent』の開発現場にやってきたよ。どんなお蔵入りデザインが見られるネバかな〜。 
それでは早速デザイナーさんを呼んでみよう！ デザイナーさーん！

鈴木 彩夏（以下、鈴木）

オクラくんこんにちは。『CARTE（カルテ）by CyberAgent（以下、CARTE）』デザイナーの鈴木です。

オクラくん 
初めまして、お蔵入りのデザインを存分に堪能できると聞いてワクワク、いや、ネバネバしながらやってきたオクラくんだよ！

鈴木 
今回私は、自律神経のセルフコントロールをサポートし、カラダの内側からキレイを目指すアプリ『CARTE』の測定前チュートリアルのUIについてご紹介したいと思います。順天堂大学との産学共同プロジェクトとして開発されたアプリです。

オクラくん 
スマホで自律神経を測定！？もうそんな時代になったネバ！？

鈴木 
スマホのカメラに60秒間指を当てるだけで、心拍の変動を解析して自律神経の状態を0～100の数値で算出するアプリなんです。まずは是非オクラくんも、“チュートリアルを見ずに”測ってみてください！

オクラくん 
測ってみるネバ！ な、なんか緊張するネバ！

鈴木 
ちゃんと測れてますね、オクラくん！

オクラくん

絶不調らしいネバ。 

そのショックと共に、僕のカラダに自律神経という概念があったことへの衝撃に対して動揺を隠せないネバ。それもこれもお蔵入りをまだ見せてもらってないからネバ！ 早くお蔵入りUIを見せるネバ！！！

鈴木 
それは大変！ では早速この測定前のチュートリアルUIに関してお話しします。

UIデザインのセオリー"コアな体験をより早く"に則したチュートリアル 

鈴木 
最初、『CARTE』では従来のアプリの手法として多く見られる"コアな体験をより早く”という考え方に基づいて、測定にいち早く行けるチュートリアルのステップを作成していました。 

オクラくん 
ふむふむ、測定まですぐいけそうネバね。

鈴木 
この場合なら、カメラの使用許可などの確認も含めて、アプリを起動してから最短6タップで測定に進めるんですよ。

オクラくん 
ふむふむ、それなら割と早くて良さそうネバ。なにが問題だったネバ？

鈴木 
『CARTE』では、こうしたUIの制作と測定データの正確性を上げる技術検証を同時並行で進めていました。その結果、このフローは手軽ではあったもののそれ故の問題も浮き彫りになったんです。 

・技術検証の結果、測定体勢の不備による結果への悪影響が思ったよりも大きく、不正確なデータがたくさん出てしまった。 

・１分間かけた測定の結果がまるまるエラーになることもあり、ユーザーの機会損失が大きかった。 

そのため、測定において最低限以下の4点はユーザーに守ってもらう必要があることがわかりました。 

 

オクラくん 
こう見ると守らなきゃいけないことが結構あるネバね。説明不足だったってことネバ。これじゃあダメネバ！  

手軽さと丁寧さを両立させようとした結果、中途半端なUIに

鈴木 
そうなんです…。 
そのため、次はステップはそこまで増やさず、先ほどの4つの測定ポイントを促そうと考えました。それがこちらになります！

鈴木 
先ほど挙げた、最低限守ってもらいたい4つのポイントを一画面にまとめ、チェックしてもらう方式にしました。4つにチェックをいれて確認ボタンを押さなくてはいけないので先ほどより2ステップ増えています。 

測定のポイントが全部「〜ない」になっているのは、「押さない・駆けない・しゃべらない」のような昔から慣れ親しんでいる標語の語呂をイメージして考えました。

オクラくん 
手軽さは保ちつつ、詳しく知りたい人は「もっと詳しく見る」で詳細を見られるようになってるネバね。

鈴木 
ここから簡単にユーザーテストを実施し、ヒアリングをおこないました。すると、次はこんな問題が起きたんです。 

・画面の文字情報が多過ぎたため、あまり内容を見ずに4項目をチェックした上に、そのまま「次回から確認しない」を押してしまう。 

・「もっと詳しく見る」を見ずに進んだ人は、不正確な結果やエラーが返ってきたため離脱してしまう。

オクラくん 
なるほど。これはUIデザイナーがよく陥る罠ネバ！ 
読んでもらいたい文章なんて大抵読んでもらえないネバ！ そんなお蔵入りを何万回も見てきたネバよ！！

鈴木 
手軽さと丁寧さを両立させようとした結果、情報を詰め込みすぎてしまいました。反省です。その一方で、テストの中で意外なこともわかったんです。 

・「もっと詳しく見る」を見る人はほぼいなくなるかと思っていたが、わざわざタップし詳細を読み込む人が一定数いた 

タップした方々に理由を聞くと、ヘルステックアプリなので自分の数値をできるだけ正しく測りたいという気持ちがあったからという回答がありました。ユーザー自身も自らデータの信頼性をあげたいと思っているケースがあったのには、少し驚きました。

オクラくん 
...！！ 
そうか、ヘルステックならではのユーザーのモチベーションがあるネバね...！ いい発見ネバ。 

フローが多くなってしまっても、正しい測定方法を丁寧にシンプルに

鈴木 
そういったユーザーテストの結果から私たちは、"コアな体験をより早く"よりも結果の信憑性やサービスの信頼性を高める方が重要とヘルステックアプリならではの結論を出しました。 

そうして作った現在のチュートリアルがこちらです。

・1ページに1情報のみ。フローが多くなってしまっても正しく丁寧に測定方法を伝えるチュートリアルに。 

さらに、何がOKで何がNGなのか、両方を各項目で見せるようにしました。

あああああああああわかりやすくなったネバァァ！ 

OKとNGの見せ方、工夫が効いてて好きネバ。

鈴木 
ありがとう、オクラくん…！ 

『CARTE』は無事リリースできましたが、これで終わりではありません。今後たくさんの測定データが集まり、さらに技術検証が進めば、そもそも測定体勢をユーザーに頼り過ぎない方法の創出などまだまだ改善の余地があると考えています！

オクラくん 
なるほど。これもまたいつかお蔵入りする日が来ると…。オクラはいつまでも終わらないってことネバね。

鈴木 
そうですね…！ 世の中の素敵なプロダクトは、常にお蔵入りと共にあります…！ 『CARTE』もそう、この連載もそう、どんどん素敵になるためにお蔵入りを繰り返して生まれ変わっていくんです！

オクラくん 
いい心意気ネバ！

鈴木 
というわけでオクラくん！ この連載も最終回です。オクラくんもお疲れ様でした！ 

ちなみに… 
オクラのネバネバには腸内環境を向上させ、腸から自律神経を整える効果があるんですよ。（にっこり）

オクラくん 
…！？！？！？ 
だ！ だめネバ！ 何を考えてるネバ！！

鈴木 
…なんて、冗談ですよ！（笑）

オクラくん 
ネッバァァァアアアアアアアアア！！！！ 
連載の最後に、オクラ自身がお蔵入りさせられるところだったネバ！ こりゃあ一本取られた☆

鈴木 
連載はこれで終了ですが、オクラくんはこれからも沢山のお蔵入りUIデザインを見て、立派なUIデザイナーになってくださいね！

オクラくん 
ありがとうネバ！僕も頑張っていくネバ！ 
 

【連載 第一回】そのデザイン過剰です！ FRESH！新機能『ライブファンディング』のお蔵入りUIデザイン 
【連載 第二回】そのデザインやりなおし！ 360°自由だからこそ難しい『AbemaTV VR』のお蔵入りUIデザイン 
【連載 第三回】タップル誕生「おでかけ機能」のワクワクする仕組み 
【連載 第四回】iOSとAndroidではどう違うの？ Androidの特性を活かしたナビ設計とは…… 
【連載 第五回】2つのサービスをつなぐ埋め込みモジュール ～スキルシェアリングサービス「REQU」編～ 
 

株式会社サイバーエージェント 
インターネットというフィールドで「Ameba事業」「インターネット広告事業」「スマートフォンゲーム事業」「その他メディア事業」「投資育成事業」の5つの事業を展開。インターネット総合サービス企業として、企業・インターネットユーザーに対し有益なサービスを提供している。

●株式会社サイバーエージェント：https://www.cyberagent.co.jp/ 

『CyberAgent Developers Blog』

https://developers.cyberagent.co.jp/blog/