レリ・モナリサ

ケーススタディ — 2021

アプリレビューを読みつくして、ナビゲーション構造を作り直した話

Energy Shift(AfterFIT)の再生可能エネルギーニュースアプリ。4ヶ月、単独インターン、ユーザーインタビュー無し——アプリストアのレビューを起点に、構造から作り直した。

クライアント

AfterFIT (Japan)

役割

デザイナー単独

期間

4ヶ月

プラットフォーム

iOS / Android

Energy Shift — 再設計後のホーム画面とナビゲーション。
Energy Shift — 再設計後のホーム画面とナビゲーション。

01  /  課題

レビューが示したのは、ビジュアルではなく構造の問題だった。

「アプリを改善してほしい」という曖昧な依頼からスタートした。具体的な問題を特定するため、まずアプリストアのレビュー全件を分析した。

感情ではなく、繰り返される言葉のパターンを探した。違うユーザーが、別の言葉で、同じことを言っていた——それはノイズではなく、シグナル。

01

観察したこと

ブリーフは曖昧——『アプリを改善してほしい』のみ。具体的なペインポイントは指定されなかった。そこでGoogle Playの全レビューを開いて読んだ。感情ではなく、繰り返される言葉のパターンを探すため。

02

見つけたこと

不満は『UIがダサい』『色が悪い』ではなかった。『どこに何があるかわからない』『ナビが難しい』『レイアウトが混乱する』。別々のユーザーが同じ構造的な問題を繰り返していた——これはノイズではなくシグナル。

03

仮説(デザイン着手前)

ビジュアルの問題ではない。構造の問題だ。ナビゲーションがユーザーを目的地に導けていない。見た目を整えるのは全員の時間を無駄にする行為で、土台から作り直す必要がある。

Google Playのレビュー抜粋。同じ不満が形を変えて繰り返される。
Google Playのレビュー抜粋。同じ不満が形を変えて繰り返される。
再設計前のホーム画面。検索と記事詳細が同じ階層に並んでいた。
再設計前のホーム画面。検索と記事詳細が同じ階層に並んでいた。

02  /  リサーチ

デザインの前に、二つのリサーチで仮説を確かめた。

ナビゲーションが根本原因という仮説のもと、2つのリサーチを並行して走らせた——モバイルニュースアプリのユーザー行動に関する学術研究と、主要5アプリの競合分析。

学術研究 — SAGE / MIT

ニュースアプリ利用者の行動

  • ユーザーは検索ではなくカテゴリ閲覧で記事を探す
  • ホームで関心トピックが見つからないとすぐ離脱する
  • ランキング/トレンド表示が発見の主要経路

競合分析 — 主要5アプリ

NHK・Yahoo!・SmartNews・NewsPicks・グノシー

  • 5アプリ全てがボトムナビ+カテゴリタブを採用
  • 検索は常にプライマリナビ——絶対に埋もれていない
  • ランキング/トレンドは全アプリに存在する標準機能
  • ホームは明確なコンテンツカテゴリで整理
比較対象とした主要5ニュースアプリ。
比較対象とした主要5ニュースアプリ。
機能・ナビゲーション比較表。検索位置とカテゴリ構造は全アプリで一致。
機能・ナビゲーション比較表。検索位置とカテゴリ構造は全アプリで一致。
SAGE・MITによるモバイルニュースアプリ行動データ。
SAGE・MITによるモバイルニュースアプリ行動データ。

03  /  診断

IA図を引いた瞬間、三つの構造的な問題が姿を現した。

既存アプリの全画面と全接続をIA図として整理した。3つの構造的な問題が特定され、それぞれに原因と対応する解決策を定めた。

問題 1 — ナビゲーション

検索が記事詳細と同じ階層に埋もれていた

ユーザーは自分がメイン画面にいるのかサブセクションにいるのか判別できない。検索は常に手の届く場所にあるべきだった。

解決 → 検索を常設のプライマリナビに移動

問題 2 — コンテンツ構造

全記事が1画面に、グルーピングなし

ホームは全てのフラットリスト。『太陽光』を知りたいユーザーは、『EV政策』『風力』を延々スクロールする必要があった。

解決 → ホームをカテゴリタブ+サブカテゴリのドリルダウンに再構築

問題 3 — アイコン言語

ユーザーが見たこともないカスタムアイコン

独自で非標準のアイコンを採用。ナビのためにだけ新しいアイコン言語を覚える必要があった。

解決 → iOS / Android標準ニュースアプリのアイコンに置換

IAを描いた瞬間、レビューの曖昧な不満が、3つの明確に説明できる構造的問題に変わった。

IAマッピング後の振り返り

再設計前の主要画面。
再設計前の主要画面。
情報設計(IA)ダイアグラム — 再構築後のナビゲーション構造。
情報設計(IA)ダイアグラム — 再構築後のナビゲーション構造。

04  /  デザイン判断

各変更を、リサーチで特定した問題に対応させた。

機能BeforeAfter根拠
ボトムナビ3項目:ホーム・マイページ・設定4項目:ホーム・検索・ランキング・マイページ競合5アプリ
検索コンテンツフローに埋もれて常設でないプライマリナビに常設、カテゴリフィルタ付き競合+レビュー
ホーム画面全記事のフラットリストカテゴリタブ+サブカテゴリSAGE/MIT
ランキング存在しなかった新規追加——トレンド記事を発見させる競合5アプリ
アイコンカスタム——学習が必要iOS/Android標準パターンUX規範+レビュー

比較

3項目のナビが4項目になり、検索とランキングが表舞台に出てきた。

Before — ユーザーの体験

  • アプリを開く → どこから始めればいいかわからない
  • 太陽光ニュースを探す → 全記事をスクロール
  • 検索が埋もれていて、必要なときに手が届かない
  • アイコンの意味が不明——推測するしかない
  • トレンドフィードなし——発見が困難

After — 現在の体験

  • アプリを開く → 馴染みのあるレイアウト、学習不要
  • 『太陽光』タブをタップ → 関連記事のみ
  • 検索はボトムナビに常時表示
  • 標準アイコン → 一瞬で理解
  • ランキングタブ → 検索なしでトレンドを発見

Before — 主要画面

ホーム
ホーム
ログイン
ログイン
記事一覧
記事一覧
記事詳細
記事詳細
マイページ
マイページ
設定
設定

After — 再設計後

ホーム(新着)
ホーム(新着)
最新ニュース
最新ニュース
検索
検索
ランキング
ランキング
マイページ
マイページ
記事詳細
記事詳細
再設計後の主要画面(ホーム・最新・トップ・ランキング)。
再設計後の主要画面(ホーム・最新・トップ・ランキング)。
再設計後のホーム画面 — カテゴリタブ・検索・ランキングが一目で見える。
再設計後のホーム画面 — カテゴリタブ・検索・ランキングが一目で見える。

05  /  結果

最終プレゼンで承認され、実装フェーズへ移行した。

3.5★

原因特定。レビューから根本原因を特定し、そのまま対応した。

5

競合アプリを分析。主要な判断はすべてパターンの証拠に裏付けられている。

3

構造的問題を診断。それぞれに明確な原因と対応のチェーン。

最終提案 — 承認されたホーム画面。
最終提案 — 承認されたホーム画面。

06  /  学び

ユーザーインタビュー無しで進めた4ヶ月から得たもの。

01

レビューはリサーチのデータセット——構造的に読めば

ユーザーインタビューが使えないとき、1★レビューを主要ソースにした。コツは感情で読まないこと。複数ユーザー間で繰り返されるフレーズを探す。繰り返し = 調査に値するシグナル。

02

見えないものは直せない——まず構造を描く

アプリを普通に使っているだけだと、ナビの問題は完全に見えなかった。IAダイアグラムを描いた瞬間、問題は具体的で説明可能になった。デザインの前に、必ずマッピング。

03

既存パターンを採用するのは判断であって、手抜きではない

標準のニュースアプリナビを選んだのは、リサーチがそこを指していたから。5つのアプリが独立して同じ構造に収束するなら、それはユーザーが既にそのモデルを持っている強力な証拠だ。慣例が自分のリサーチになる。

04

証拠に辿れる提案は、毎回勝つ

PMの承認理由はビジュアルではなく、各判断が証拠まで追跡できたことだった。デザインで『なぜか説明できる』は、『信じてください、これが良いんです』より強い。

補足:Energy Shiftウェブ版 — モバイル再設計のコンテンツ参照元。
補足:Energy Shiftウェブ版 — モバイル再設計のコンテンツ参照元。