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

オクラくん
ネバにちは！
今日は、たくさんの生放送番組が見られる映像配信プラットフォーム『FRESH!』の開発現場にやってきたよ。
どんなお蔵入りデザインが見られるネバかな〜。
それでは早速デザイナーさんを呼んでみよう！　デザイナーさーん！

木村 直道（以下、木村）
こんにちは！

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

木村
初めまして！　『FRESH!』でiOS / Androidのデザインを担当している木村と申します。今日はよろしくお願いします〜。

オクラくん
こちらこそよろしくネバ！
今回はどんなデザインを見せてもらえるのかな？　ぁあッ、我慢ができないネバよ！

木村
今回紹介するのは、動画配信アプリ『FRESH!』の中で昨年末リリースされた新機能『ライブファンディング』のUIデザインです。
この機能は、配信主がファンから支援を募り、お金を集めることができる機能で、集まった支援で、よりクオリティの高い番組を配信できるようになります。
ここ何年かで話題のクラウドファンディングとライブ配信が融合したものですね。

オクラくん
早速びっくり！　面白い組み合わせですね！　あ、ネバね！
前置きはいいから肝心のUIデザインを見せておくれよ！

木村
これが『ライブファンディング機能』のUIデザインです。

オクラくん
ふむ、達成するまでの進捗がわかるゲージもあって、いかにも「クラウドファンディング」という感じだね。
でもさ...僕が見たいのはリリースされたUIデザインじゃなくてさ...
お蔵入りになってしまったデザインを見たいんだy...見たいんネバよ〜！

木村
（さっきから語尾が定まってないなぁ...）
それでは早速お蔵入りになってしまったデザインを見ていきましょうか！

木村
今回お見せするお蔵入りデザインは、実は採用された現在のデザインより後に、ブラッシュアップ案として作ったデザインなんです。

オクラくん
え！ブラッシュアップしたデザインの方が、お蔵入りになってしまったネバか！？

木村
そうなんです。現在のデザインを作った時にチームの中で
「動画アプリである『FRESH!』に、馴染みのないライブファンディングが現れるのは、ユーザーに違和感を感じさせてしまうのでは？」
という議論が起こりました。

それを踏まえて、“初めてライブファンディングを見たユーザーに、一目でどういう機能かが伝わる”ことに重点を置いたデザインにブラッシュアップしたものが、今回お見せするお蔵入りデザインです。

オクラくん

ブラッシュアップしたデザインがお蔵入りとは…
連載初回からゾクゾクするネバァ！！！

木村
そのデザインがこちらです。

オクラくん
え...ちょ...採用されたデザインとあんまり変わらない気が...。

木村
ぱっと見だとそう思うかもしれませんが、大きく3点異なるポイントがあります。

①「プロジェクト説明」の置き場所
②支援ポイントの達成状況を示すモジュールの有無
③支援モジュールの構成

オクラくん
ふむふむ...意外と奥が深そうネバ。

木村
まずは、①「プロジェクト説明」の置き場所についてです。

お蔵入りデザインでは、タイトルのすぐ下にプロジェクト説明を配置しています。
さらに、「もっと見る」ボタンを置いて表示エリアを2行に収めることで、すぐ支援をしたい人は説明文を読み飛ばせるようになっています。

オクラくん
ん？　それを聞くとお蔵入りの方が良さそうネバよ？

木村
そうですよね。でもこのUIには、支援の状況を確認するゲージが下の方に行ってしまって見にくいという難点がありました。
代わりに「プロジェクトの説明」を、支援をするモジュールと特典を表示するモジュールの間に置こうという案もありましたが、その案も採用されませんでした。

オクラくん
どうして採用されなかったの？

木村
それは支援をするモジュールと特典を表示するモジュールが切っても切れない関係にあったからです。
「どんな特典があるかな〜」と確認しながら支援を検討したいユーザーを考えると、どうしてもこの2つのモジュールは切り離せなかったんですよね。

オクラくん
なるほど〜！

木村
そうして悩んだ結果、説明よりもゲージと特典の見やすさを大事にした今のデザインを選ぶことになったんです。

オクラくん
表示順を決めるだけでもこんなに考えることがあるネバね〜。

木村
次に②支援ポイントの達成状況を示すモジュールの有無についてです。今話していた「もっと見る」ボタンのすぐ下にあるものですね。

オクラくん
ほうほう、お蔵入りデザインにあるモジュールが、採用されたデザインにはないネバね！

木村
もともとこのモジュールを入れたのには3つの意図がありました。

・このページが目標値を持っているものだと伝える
・このページが支援するものだと伝える
・このページが達成するものだと伝える

この3つで、「このページは番組ページではなく、プロジェクト達成を目指すライブファンディングのページなんですよ」ということを伝えたかったんです。

オクラくん
ふむ...。
でも、よく見るとどちらのデザインにもある「プロジェクトを支援」、「現在の支援ポイント」というモジュールだけでも同じような意図を汲み取れるネバよ。

木村
そういうことです！　ゲージや「支援する」というボタンもあるのでお蔵入りデザインは過剰なデザインだった、という判断になったのです。

それでは最後に③支援モジュールの構成に関しての話をしましょうか。

木村
法律の関係もあり、『FRESH!』ではお金をポイントに替えて支援をします。
しかし、お金が貯まることで番組が作られるということが、ポイントという現実にないものを通したことでわかりづらくなっているのではないかと懸念しました。

オクラくん
確かにちょっと現実味がなくなって見える可能性はあるネバね。

木村
そこでお蔵入りデザインでは、“あと〇〇ptで達成します”という言葉で書くことによって、「達成するか失敗するか」を一目で分かりやすくしようと試みました。

でもこれも先ほど話した②のモジュール追加と同様、過剰な説明でした。

オクラくん
なるほど。色々考えた結果シンプルな方に落ち着いた、と。

木村
そうなんです。予定では、採用されたデザインからこのお蔵入りデザインにアップデートをかけるつもりでしたが、思ったよりユーザーは違和感なく採用されたデザインで支援をしてくれました。僕たちの“これだけじゃ伝わらないのではないか？”という心配は取り越し苦労だったというわけです。

オクラくん
まさに「使ってもらわなければユーザーの気持ちはわからない」ということを示したような出来事ネバね！

木村
ミニマムな形でリリースをし、ユーザーの反応を見てからブラッシュアップをしていくことがやっぱり大切なんですね。

オクラくん
ユーザーの行動を想像することは素晴らしいけど、考えすぎて過剰なデザインになっちゃうのは避けるべき...難しいネバよ...。
どういう心構えでデザインしていけばいいネバよ〜〜〜。

木村
絶対に諦めない。
まさにネバーギブアップの精神ですね。

オクラくん
ネッバァァアァァ！！！こりゃあ一本取られた☆