プロトタイプから100％を目指す～3カ月で100万DL突破の『Appliv』に学ぶ、効率的なUIデザインの3ステップ

2015/07/08公開

（写真左から）ヴォラーレ株式会社の開発室 室長・飯野貴光氏と、代表取締役社長の高橋飛翔氏

2015年3月のリリースからわずか3カ月間で100万DLを突破した“アプリの紹介サービス”『Appliv』（iOS/Android）をご存知だろうか。単なるキュレーションではなく、ユーザーのオススメコメントを主役としつつアプリ情報を提供することで、「アプリのクチコミサービス」として人気を得ている。

そうした企画面のみならず、短期間でのユーザー獲得の背景には的確なUIデザインがあったという。App Storeでは登録アプリ数が150万を超え（2015年6月時点）、使い勝手の悪いアプリはすぐにユーザーが離れてしまう状況下、他と差別化されるアプリはどのように生み出されただろうか。

開発を行ったのはWebコンサルティングやインターネットメディア事業を手掛けるヴォラーレ株式会社。今回、代表取締役社長の高橋飛翔氏とアプリ設計からデザインまで手掛けた開発室 室長の飯野貴光氏に、ユーザーに支持されるUIデザインの秘訣を聞いた。

アプリを使うことが当たり前になった今だからこそ開発側が参考にすべき、3つのステップを紹介しよう。

ステップ1:コンセプトを言語化できるレベルまで作り込む

経営者という立場ながら、アプリの企画にはゼロからコミットしていると語る高橋氏

当たり前のように思う読者も多いかもしれないが、重要なのはどこまで言語化して共有できるか。これがあるのとないのとでは、その後のすべてのアプトプットがブレやすくなってしまうからだ。

高橋氏と飯野氏2人が最初に取り掛かったのも、Applivのコンセプトづくり。もともとWeb版からスタートしたサービスだが、アプリとしての特性を活かし、異なる方向性を目指した。

「Web版は、検索によってほしいアプリを『探す』機能に特化しています。一方のアプリ版ではレビュアーのコメントから、ユーザーがほしいアプリを『発見』してもらうことに重点を置きました。アプリは検索のために使うというより、隙間時間の暇つぶしに使う人が多い。ちょっとした時間で、自分に合うアプリが見つけられれば便利なのではないか、という発想です」（高橋氏）

「ストアのレビューを見ても一言しか書いてなかったり、必要以上に褒めているか、貶しているかのどちらかが多かったり、あまり参考にならないのです。だからApplivでは、ポジティブかつきちんと理由があるコメントを並べることで、本当に面白いまたは役に立つアプリを発見できるようにしています。口コミで良いアプリが拡散していく環境を、Appliv上で再現しているのです」（飯野氏）

自分が良いと思ったモノを、人にオススメする――。日常生活で普通に行われている情報交換を、スマホのプラットフォーム上でも機能させることを目的としたのがアプリ版Applivということだ。

そうした思考の末に定めたのが、「カフェで友だちと情報交換をしているようなアプリ」にするというコンセプト。これは、UIデザインにもしっかり反映されている。

いったんDLしたら、スマホ上でアプリの“顔”となり続けるロゴデザインにも細部までこだわったという

「企画を主導した高橋から、『カフェで友だちからアプリを教えてもらう時のような体験を提供するアプリにしたい』というコンセプトを聞いた時、こうした雰囲気をApplivのデザインにも持ち込もうと考えました。だからロゴデザインも、手書き風のメニューが置いてあるような、気軽に入れるオシャレなカフェをイメージして作成しています。

ロゴはアプリの入り口であり、サービスのコンセプトを表すUIとしても大切な要素。コンセプトを徹底的に作りこむことで、サービスの本質を表現できるロゴが作れるのです」（飯野氏）

ステップ2:プロトタイプから完成形に近いデザインを目指す

コンセプトとサービスの顔となるロゴが決まったところで、次はモック作成。多くの場合は線だけで表現する簡易なモックを作り検証を繰り返しながらデザインに取り掛かるが、Applivではモックの段階から完成度100%を目指してUIデザインを行ったという。

左の画像は、飯野氏が最初に作成したアプリUIのプロトタイプ。右のリリース版と比較しても、ほぼ差がない

多くの場合はムダがないように、ワイヤーフレームを作成し、徐々にデザインに入っていくはずだが、どうしてこのようなやり方を取ったのだろうか？

「最初から、精度の高いユーザーフィードバックを得るためです。Applivはシンプルな機能のアプリなので、モックの作成に時間を掛けるより、最初から作り込んでしまった方が結果的に早い進行ができると考えました。よくある線画だけで作ったモックの確認に時間を掛けても、デザインをしていくうちに『あれ？何か違うな？』となることがよくありますからね」（飯野氏）

さらに、飯野氏はステップ1で述べたコンセプトを常に念頭に置くことで、UIデザインも迷わず進めることができたと付け加える。

「背景を派手すぎないように単色にして、賑やかなアイコンにユーザーの目が向かうようにしました。そして、オススメコメントをアプリ情報よりも上に配置した。これは、アプリの情報はファーストビューの段階では極力削り、最初にコメントを読んでもらうような設計にするためです。これらは全て『コメントが主役』という明確なコンセプトがあったからこそ、迷わずできました」（飯野氏）

ステップ3:改善案は「出すフェーズ」と「絞るフェーズ」に分ける

コンセプト固めとUIのプロトタイプ作成の次はユーザテスト。ヴォラーレは社内にユーザビリティテスト専用の設備があり、モニター越しにユーザーの生の声を聞けるようになっている。

「ユーザーが実際に使っている様子をカメラで撮影し、別室のモニターでチェック。同じ部屋にいると、気を使って本音が言えない人がほとんどなので、離れた場所から見るようにしています」（高橋氏）

具体的に今回のプロトタイプからリリース時までのテストを経て、どのようにUIが変わったのか、いくつか代表的な事例を実際のデザイン画像と共に見てみよう。

■改善点1：アプリアイコン右横の「ダウンロード」を、「ストアで見る」に修正

「オススメされているからとはいえ、ダウンロードするかどうかは別。実際はストアで詳細な説明を読んだ上でダウンロードする人が多いので文言修正を行いました」（高橋氏）

■改善点2:ファーストビューの表示コメント文字数を少なく

「プロトタイプでは5行表示にしていたのですが、文字が小さく読みづらいという意見がありました。なので、リリース時には4行の表示にして、文字も少し大きくしています。何度も言ってきましたが、『コメントが主役』のアプリですから、目に付きやすいように調整しました」（飯野氏）

■改善点3:コメント詳細ページ下の「オススメ」ボタンをピンク色に

「これは、アプリサービスが多くのスマホユーザーに浸透している今だからこその改善点。アプリの下部には広告バナーが表示される場合が多く、ユーザーはスクリーンの下の部分を無意識で視線から避けるようになっている。ですので、Applivの『オススメ』ボタンはちょっと目立ちすぎるくらいのビビットなピンクに変更しました。このアプリはCGMサービスでもあるので、ユーザーからのコメントが少しでも増えるような仕掛けも大切ですから」（飯野氏）

これら改善点はいずれもUIを根底から変えるものではなく、細かなブラッシュアップとなっている。コンセプトを明確化し、プロトタイプから作り込むことで、精度の高いユーザーフィードバックが得られたという証拠だろう。

もう一つ気になるのは、機能追加や修正の繰り返しで方向性を失ってしまうという“あるある”はどう回避したのかだ。ユーザーテストを頻繁に行う中、どのようにフィードバック反映の取捨選択を行っていたのだろうか。高橋氏はこう話す。

「アイデアを出すフェーズと、絞るフェーズにしっかり分けてます。ユーザーテストを行った後はメンバーから多くの修正案が上がってきますが、最初は制限を設けずひたすらアイデアを集める。その中から必要な要素だけをピックアップして反映させます。

ムダな機能を付けてしまうと、削除するコストが掛かってしまうので、“鉄板”と思える修正だけを反映するように精査を大事にしています。見極めは、コンセプトやKPIに沿った改善になっているかどうかを基準に判断しています」（高橋氏）

「ロジックのないデザインはデザインじゃない」

以前はヤフーでデザイン業務に携わるなど、豊富な経験を有する飯野氏

最後に、こうした開発ポリシーはどのように醸成されたのか2人に聞いてみた。

高橋氏と途中入社の飯野氏は、共に違う歩みを経てきた2人だが、共通するのは「ロジック」というキーワードだった。

「デザインは全てロジックがないとダメなんです。単なる装飾に終わったら意味がない。なぜ、背景が青1色なのか、なぜコメントの枠がアプリ紹介より上に来るのか、全て説明できてこそのデザインと思っています。こうしたポリシーが明確にあるので、プロトタイプの段階からデザインを作り込むことも厭わないのです」（飯野氏）

「私も飯野が入社する前から、デザイナーには『なぜそのデザインにしたのか』というデザインの必然性を求めていました。飯野と話した時に、彼の合理性を追求するスタンスは非常にマッチするなと感じたのです。結果的にユーザー獲得に繋がるUIデザインになったのではないかと思っています。

とはいえ、まだまだ改善すべきことはある。今後は新機能の追加やコンテンツの表示アルゴリズムを作り込みをすることで、よりユーザーがほしいと思うアプリを発見できるように改善を重ねていきます」（高橋氏）

さらに、2人が言う「ロジックあるデザイン」を身に付けるためのヒントも語ってくれた。それは、物事の本質を見極めることにも通じるという。

「デザインにおいて必ず行っているのが、文章化と数値化の2つです。デザインは装飾ではないと言いましたが、色や配置など一つ一つの要素についてデザイン開始前にテキストで書き起こし、それをもとに感覚ではなくロジカルに人に伝わるデザインを行っています。

構成を見極める段階では、さらにそこに各要素の割合を数値化した基準を取り入れています。そうすることによって、デザインの中に情報が盛り込まれ過ぎたり、各要素のバランスが崩れるといったことなく調整ができるようになります」（飯野氏）

「知識に裏付けされたロジックをデザインに求めることはとても大事であるという前提で、論理を積み上げた先に制約の中で表現しなければならないものは当然あると思っています。それがいわゆる『感性』と言われるものが支配する領域だと思うのですが、論理を無視してそこばかりに頼ってしまうとユーザーが置き去りにされてしまうと思うのですね。

私はデザイナーではありませんが、常にユーザーが利用する場所や時間もひっくるめて具体的にユーザー像を想像し、その人たちだったらこのデザインをどう思うかを掘り下げて考えるようにしていますね」（高橋氏）

今回紹介した3つのステップは、いずれも合理的なUIデザインを行うためのもの。飯野氏が語るように、「単なる装飾」に終始しないUIデザインのために、彼らの「ロジック」を大切にする開発手法を参考にしてみるのがいいだろう。

取材・文・撮影／長瀬光弘（東京ピストル）