はじめまして。現在SEREALというチームで、福岡を拠点に活動しているデザイナーの堤健太郎と申します。福岡の大学に在学中ドイツに1年半留学して、卒業後は東京にて3年ほど働き、去年から福岡に戻ってきました。日々の業務と並行しながら、Facebookグループ「UI Fukuoka」を通して福岡のUIデザイナ―向けのミートアップイベントなどを開催しています。今回は、アプリのUI/UXに関して「ザクマガ」へ寄稿させていただきました。
さて、皆さんはこういう悩みに直面したことはありませんか？
「打ち合せのときは必要そうに見えていた機能が、実際に組み込んでみたら誰も使わなそう…」
「ぱっと見たらいい感じだけど、使っていると何か使いにくい…」
「新規ユーザーの大部分が1週間以内に離脱している…」
こうした問題は、アプリのUI/UXデザインに原因があると考えられます。ユーザーとの接点であるUI（User Interface）。ユーザーがアプリで獲得する体験のUX（User experience）。このどちらかがダメでも、アプリの本質的機能や楽しさもわからないうちにユーザーは離脱してしまうのです。
そこでここでは、アプリ開発におけるKPI（重要業績評価指標）の向上につながる、アプリのUI/UX改善に役立つヒントを皆さんと共有したいと思います。参考となるスライドに加えて補足になるブログ記事も紹介しますので、さっそく見ていきましょう。
はじめに言葉ありき。見落としがちなUIの言葉選び
フリマアプリFRILを運営する株式会社Fablicのアートディレクターである割石裕太さんによるこのスライドでは、適切な言葉遣いによって、UIは改善されるという点が紹介されています。「意味が伝わるか （全体把握とコントロール）」「呼びかけているか（行動提案）」「生きているか（人間的要素）」という3つを踏まえた言葉と気遣い遣いへ配慮することで、ユーザーを迷わせず楽しく利用してもらえることが学べる内容です。
クライアントやデザイナーといった見た目にこだわる人は、言葉選びをおざなりにしがちですが、UIでも言葉は大切です。なぜなら、ふとした言葉遣いや表記の揺れ、必要以上の文字量などで、これまでに積み上げたユーザー体験を台無しにしていることがあるから。
「言葉」「気遣い」はぜひチェックしたいところ。
このスライドUIを補足する、言葉選びの参考となるページをふたつ紹介します。
月間1000万PVを支える「UIの言葉選び」のためのチェックリスト
11のチェックリストでアプリ内の文言をチェックするだけで言葉選びの誤りを防げます。クックパッド開発者ブログからのエントリーです。エンジニア・デザイナー・ディレクターそれぞれにとって有益な情報が提供されているこのブログ。質が高く、更新頻度も高いのでいつもチェックしています。
UIガイドラインから学ぶライティングの基礎
GoogleのMaterial Designガイドライン（英語版）にある言葉の選定基準からピックアップして紹介しているページです。少し堅いですが、ラベルやアイコンと組合せての言葉選びも解説されており、クックパッドブログの上記記事とは目線が違い非常に参考になると思います。
巨大化したスマホ。優先度の高い機能は、片手での操作で完結できるように配置
日経電子版 新聞アプリとしてのUI/UX from 日本経済新聞社 武市大志
日本経済新聞社の武市さんによるスライドです。大画面化したスマホと従来のスマホ両方を意識したUIの改善例が示されています。このスライドで示されている考え方は、アプリが提供する情報設計（階層の整理など）の大切さ。情報設計に配慮すると機能過多が避けられ、大画面化したスマホで画面下部で多くの操作を完結させられることがわかります。特に参考になるのはスライド20ページからの、大画面化に対応したメニューの選定の解説です。
「iPhone」と「Tablet」とをかけ合わせた造語ファブレットという言葉も現れるなど、スマホの大画面化が進んでいます。iPhone6 plusが2014年に発売されて以降、両手で操作を行う方もだいぶ増えてきました。それでも片手での操作に重点を置くことは極めて重要。
大画面のスマホでも片手での操作を実現するための情報設計における優先度の高さの判定は「使用頻度」と「利用シーンにおいて、緊急性の高いもの」を基準に選ぶと決めやすくなります。
目的・フェーズに応じてプロトタイピングの使い分けを。プロトタイピングを駆使して動的なもので議論しましょう
アプリのアイデア検討時に役立つ紙ベースのペーパープロトタイピングと、実際に動くプロトタイプを作ってユーザーからフィードバックを得るプロトタイピングの目的を紹介するのがTHE GUILDによるこのスライド。プロトタイピングを活用することで、開発単位を1つずつの機能まで最小化したアジャイル開発手法を、手戻りも小さくして行えるようになります。
自分の思い込みでアプリを作り上げるのではなく、ユーザーからのフィードバックを元に仕様の切り分けや機能検証を行うプロトタイピングは、限られた期間でアジャイル的にプロダクトを作っていく上で非常に有効です。
アプリやwebなどの”動的”なものを、ボタンや機能の配置を定めただけのワイヤーフレームという2次元の”静的”な平面で全て補おうとするのには限界があるからです。
僕自身の業務フローにおいても特にアプリでは、FlintoやProttといったいくつかのプロトタイピングツールを用いてインタラクション（操作に対する反応）を設定します。実装前に要件の漏れや画面の矛盾をなくすようにするためです。
ペーパープロトタイピングの活用手法の実例をもっと深く知りたい場合は、クックパッドの開発者ブログ「ペンとふせんで！スマホUIのアイデアプロトタイピング」に詳しくまとめられています。付箋と水性ペンだけで書き込んではじめられる、プロトタイピングの実践例です。プロトタイピングをまだ実践したことはないけれど興味があるという方はぜひ参考にしてみてください。
たかがマイクロインタラクション。されど神は細部に宿る！さりげないインタラクションがユーザーを魅了する
ジャストシステムでUXデザイナーを務める川合俊輔さんによるスライド。ユーザーが必要とするフィードバックを与えてアプリで何が進行中かをわかりやすくするマイクロインタラクションの概要と効果を学べます。当たり前の操作を特別な瞬間に感じさせる細やか気配りで、アプリへのユーザーのエンゲージメント（熱量）を高められることでしょう。
マイクロインタラクションと言われても、聞きなれない方が多いかもしれません。「日本の90年代テレビゲームからUXデザインについて学ぶ」と題したTechCrunchの記事を見れば、きっと90年代にゲームをやっていた方には伝わるのではないでしょうか？
TechCrunchの記事で触れられているのは、光が小さく瞬くことで、光が重要だとユーザーは無意識に理解する実例。ユーザーが光に注目すると、瞬く光がゲームの操作方法を自然にユーザーに語りかけます。ちょうどゲーム内に説明書が埋め込まれているような感じですね。
ゲームの話はさておき、マイクロインタラクションは「トリガー」「ルール」「フィードバック」「ループ&モード」の4つの流れを経ることが多いです。iPhoneを例にご説明すると次のようなものです。
【1・トリガー】iPhoneで充電が20%を切ったら…
【2・ルール】省電力モードに切り替えるかどうかをシステムが問いかけるルール
【3・フィードバック】省電力モードに変更した場合は、変更を受け付けたフィードバックを提示
【4・ループ&モード】充電が完了すると、省電力モードが解除される
最初の「トリガー」で開始。2番めの「ルール」は動作を定義します。3つめの「フィードバック」がユーザーへルールを明示する役割を果たします。最後の「ループ&モード」はルールを制御するルールです。
上でご紹介している川合さんのスライドは、マイクロインタラクションについての理論的なことが中心なので、実践例も2つご紹介します。
マイクロインタラクションが取り入れられている事例はLittle Big Detailsというブログにまとめられています。より実装レベルで参考となる例は、情報共有サービスQiitaで良記事量産中のエンジニア・mono0926さんが書かれているQiitaの記事「ローディング時のズルい進捗表示」が参考になるでしょう。
マイクロインタラクションをどこまで突き詰めるかは、個人開発者や小さい会社だと工数が増えることもあり、非常に判断が難しいかもしれません。しかし、まちがいなくこうした積み重ねがアプリやサービスの世界観を作っていくのです。できる限り細部にまで磨きをかけたいですね。
「表現」と「タイミング」の2軸でプッシュ通知をA/Bテスト。ユーザーとの関係は地道な修正で築く
プッシュ通知の運用ノウハウを身につけられるpLucky 林さんによるスライドです。プッシュ通知は、各セグメントごとに「表現」と「タイミング」の2軸で地道に修正を毎回繰り返していくことが強調されています。その修正で重要なのがA/Bテスト。プッシュ通知の運用をA/Bテストで改善していくことで、アプリのダウンロード後に利用しなくなっている休眠ユーザーをアクティブユーザーへと転換していけます。
アプリの特権ともいえるプッシュ通知。これがUXと紐づくことにあまりピンとこない開発者の方もいらっしゃるかもしれません。しかしプッシュ通知が、多数のユーザーを抱えるアプリでは必ずと言っていいほど組み込まれているのは、効果が絶大だからです。
既存ユーザーとの関係性向上や休眠ユーザーの呼び戻しなど、アプリで提供しているサービスを大きくしていく上でプッシュ通知は重要な役割を果たします。効果的に利用していきましょう。
林さんのスライドで強調されているA/Bテストを繰り返して、プッシュ通知の効果を向上させるにあたって見ていきたい数字は次の4つとなります。
1.配信対象者数
2.許諾率
3.開封率
4.コンバージョン率
これらは、Growth Hack Journalの「プッシュ通知で効果測定するべき4つの指標と改善施策一覧」で示されている指標。
これらの数値を追っていくにあたって注意点が1つあります。無料かつ簡単な組み込みでプッシュ通知が利用できるプッシュ通知配信の外部サービス（OneSignalやLogPushなど）によっては開封率しか把握できないことがあるのです。また、通知をきっかけにアプリを開いたものの、通知のバナー経由でアプリを開いていない場合も考えられます。
そこで、Google Analyticsなどと組み合わせて通知後のセッション数やアクティブユーザー数と見比べながらテストしていくのが良いでしょう。
UXデザインは魔法にあらず。考えたものは全て仮説という姿勢でユーザーに価値を提供しよう
2011年頃からUXという言葉が独り歩きして、魔法の言葉のように使われています。しかしUXの施策を施したからといって、けっしてすぐに問題が解決するというわけではありません。現実的にはユーザー分析や観察を元に仮説検証を行い改善していくという地道な作業が必要です。
大事なのは、企画・デザイナー・エンジニアがそれぞれの立場でユーザーとの接点において、より良いものを頭で考え、実現に向けて手を動かすこと。そうして初めてあなたのアプリのUXを向上させられるのです。
頭で考え、手を動かすことの大切さがわかる2つのスライドを最後にご紹介しましょう。
UXの策定プロセスという説明で、現場でのUXデザインの流れが一通り説明されているスライドです。UXデザインを具体的にどうやって施策に落とし込んでいけばいいかわからない人が見れば、施策への落とし込み方が把握できるようになります。
「考えたものは全て仮説という姿勢が大事」――Ishiyamaさんのスライド39ページめに登場するこの言葉が核心をついています。全ては仮説を元に検証して初めて、その仮説が正しかったのか、ユーザーにとって適切なデザインなのかがわかります。
写真を用いた大喜利アプリboketeのプロデューサーを務めるイセオサムさんによるスライド。多数の仮説検証の例が紹介されているので、個人開発者だけではなくディレクター職の人にもオススメです。KPI（重要業績評価指標）の選定と解析に基づいたデザイン施策における一連の流れを知ることができます。例えば、ボケる人とボケを見る人のバランスが悪いときにはボケ数をKPIに設定。「このお題でボケる」ボタンを閲覧画面に追加する施策でKPIの変化を見る…などです。
イセオサムさんのスライドにはUXという言葉は一切出てきません。ですが、ビジネスサイドとユーザーサイドの最適解を模索するという仮説検証の根底にあるイセオサムさんの考え方は、2016年そしてこれからも大事な考え方といえます。
まとめ
UI/UXの改善することをテーマに、今回は使用する言葉の選定から始まり、大画面化したスマホでのUI設計、使われるアプリを高速で形にしていくプロトタイピングの基本、UIの鍵となる細部のマイクロインタラクション、プッシュ通知によるリテンション施策のポイント、そして仮説検証に基づいたUXデザインについて、アプリ制作の一連の流れを一通りかいつまみながら紹介していきました。
記事を通して、少しでもUIやUXのデザイン面で開発に関わる皆さんのお役に立てたとしたら幸いです。
