Energy Shift アプリ UI/UX 全面再設計
インターンとして与えられたのは「アプリを改善してほしい」という一言だけでした。そこから問いを立て、データを集め、構造を解体し、再構築した4ヶ月間の記録です。最終的に実装決定を勝ち取りましたが、それより大事なのは、なぜそのデザインでなければならなかったのかという根拠のプロセスです。
期間
4ヶ月
役割
UI/UXデザイナー（インターン）
チーム
デザイナー1名 ＋ PM1名
プラットフォーム
iOS / Android
▲ Energy Shift — 再設計後のモバイルアプリ
課題の発見
3.5★は評価ではなく、診断だった
最初にやったのはレビューを全部読むことでした。感情的な不満ではなく、パターンを探すために。「使いにくい」「どこに何があるかわからない」という声が繰り返し現れた時点で、これはビジュアルの問題ではなく構造の問題だと確信しました。見た目を変えても解決しない問題が、ここにある。
▲ Google Play — 実際のユーザーレビュー（3.5★）
▲ 現状のアプリ — 再設計前のホーム画面
▲ Energy Shift ウェブ版 — モバイル再設計のコンテンツ参照元
リサーチ
Figmaを開く前に、自分の仮説を壊しにいった
「ナビゲーションが問題だ」という仮説はレビューから得ていました。でもそれだけでは設計の根拠には弱い。自分が正しいと思うものを作るためではなく、自分が間違っている可能性を潰すために、2つのことを調べました。ユーザーは実際にどう動くのか。そして優れたニュースアプリはどう解決しているのか。
ユーザー行動調査（SAGE / MIT）
- →ニュースアプリユーザーの主な行動は「検索」より「カテゴリ閲覧」
- →ホーム画面で関心のあるトピックを見つけられないと離脱する
- →記事の発見はランキングやトレンド表示に影響される
競合5アプリ分析
- →NHK・Yahoo!ニュース・SmartNews・NewsPicks・グノシーを調査
- →全アプリがボトムナビ＋カテゴリタブを採用
- →検索はプライマリナビゲーションに配置
- →ホームはカテゴリ別に明確にグループ化
▲ 競合アプリ — 調査した6つの主要ニュースアプリ
▲ 競合分析 — 機能・ナビゲーション比較表
▲ ユーザー行動データ — ニュースアプリへの流入経路（SAGE / MIT研究）
課題の特定
IAを図にした瞬間、「使いにくい」が3つの具体的な問題に変わった
「使いにくい」という感想は、設計の起点にならない。IAダイアグラムを描いたのは、その感想を設計可能な問題に変換するためでした。可視化することで、今まで議論できなかった構造の崩壊が、初めて「直せるもの」になりました。
機能階層の不明確さ
Problem
検索バーと記事詳細ページが同じ階層レベルに配置されていた。ユーザーは自分が今どこにいるのか、次にどこへ行けばいいのかが分からなかった。
Solution
検索をプライマリナビゲーション（常時アクセス可能）に昇格。記事詳細はコンテンツフロー内に格納。
ホーム画面への情報集中
Problem
すべての記事が1画面に詰め込まれ、カテゴリによる論理的なグループ化が存在しなかった。ユーザーは興味のある記事を見つける前に疲弊していた。
Solution
ホームをカテゴリタブに再構築。各カテゴリはサブカテゴリで細分化。関心に応じたナビゲーションを実現。
アイコンの非標準性
Problem
アプリ独自のカスタムアイコンが使用されており、ユーザーが直感的に意味を理解できなかった。学習コストが高く、迷子になる原因になっていた。
Solution
iOS/Android標準ニュースアプリのアイコンパターンに置き換え。学習ゼロで使えるインターフェースを実現。
▲ 元のアプリ画面 — ホーム・ログイン・会員・設定ページ
情報設計の再構築
独自路線を捨て、ユーザーがすでに知っている構造に戻した
IA再設計の判断軸はシンプルでした。競合5アプリが全員同じ構造を採用しているなら、それはベストプラクティスではなくユーザーの期待値です。ユーザーはEnergy Shiftを開く前に、すでに『ニュースアプリの使い方』を知っている。その知識を使えるUIを作ることが、最も賢い選択でした。
ホーム
カテゴリタブ＋サブカテゴリ。関心に応じたナビゲーション。
検索
プライマリナビゲーションに昇格。常時アクセス可能。フィルター機能付き。
ランキング
新機能。トレンド記事で新たな発見を促進。競合5アプリすべてが採用。
▲ 情報設計（IA）ダイアグラム — 再構築されたナビゲーション構造
▲ ユーザーフロー＆ワイヤーフレーム — 主要画面の導線設計
UIデザイン
「きれいなUI」を目指したのではなく、「消えるUI」を目指した
ワイヤーフレームが承認されてから、高精度UIに移行しました。判断基準はひとつ：UIがコンテンツの邪魔をしていないか。ニュースアプリで主役はコンテンツであり、デザインはそれを際立たせるインフラです。すべての視覚的決断は3つの問いに答えています。
ビジュアル階層
各画面で「最重要情報」が一目で分かるレイアウト。見出しのサイズ・太さ・色のコントラストで優先度を伝える。読む前に「何があるか」が分かる状態を目指した。
コンテンツファーストレイアウト
ニュースコンテンツが製品です。UIはそれを邪魔しない。余白を十分に確保し、記事カードが「読みたい」と感じられるレイアウトを設計した。
学習コストゼロ
標準的なニュースアプリのパターンを採用。アイコン・ジェスチャー・ナビゲーションはすべてユーザーが既に知っているものを使用。初めて使っても迷わない。
全画面 — Before / After
Before
ボトムナビ：ホーム・マイページ・設定（3項目）
ホーム
ログイン
記事一覧
記事詳細
マイページ
設定
After
ボトムナビ：ホーム・検索・ランキング・マイページ（4項目）
ホーム（新着）
最新ニュース
検索
ランキング
マイページ
記事詳細
▲ UIデザイン — 全画面一覧（ホーム・最新ニュース・トップページ・ランキング）
最終機能
最も壊れていた3か所を、最も確実な方法で直した
PMとのレビューを経て、優先順位を絞りました。改善の候補はたくさんあったが、最終スプリントは『最も壊れていて、かつリサーチで解答が出ている』3点に集中。根拠のない改善はしない、という判断です。
検索の再設計
元の検索は埋もれており、機能しなかった。再設計では、検索を常時アクセス可能なプライマリナビに配置し、カテゴリフィルターを追加。
カテゴリ構造の再構築
サブカテゴリタブによる明確な階層を実現。ユーザーは「エネルギー」→「太陽光」→「政策」のように、自分の関心に沿ってドリルダウンできる。
ランキング機能（新設）
競合5アプリすべてが採用しているトレンド表示パターンを新規追加。ユーザーが今注目されている記事を発見できる入口を作った。
▲ 最終UIデザイン — ホームページ（カテゴリ・検索・ランキング）
結果
承認されたのはデザインではなく、プロセスだったと思っている
最終プレゼンで実装決定を受けた時、PMが言ったのは「きれい」ではなく「なるほど」でした。各設計判断に対して、データ・競合分析・ユーザー行動リサーチという3層の根拠があった。それがデザインを『意見』ではなく『提案』にしました。
✅
実装決定
提案の承認
PMとチームへのプレゼンテーション後、実装決定を獲得
🔍
3つ
UX課題を解決
不明確な階層・情報過多・非標準アイコンの3問題を根本から修正
📱
5アプリ
競合分析済み
すべての主要判断は競合分析とSAGE/MITリサーチに裏付けられている
▲ 最終デザイン — 承認されたホームページビュー
学び
このプロジェクトが教えてくれた4つのこと
レビューはエビデンスとして成立する
ユーザーインタビューがなくても、レビューには問題の構造が隠れている。感情ではなくパターンを読む目があれば、アプリストアは最速のUXリサーチ環境になる。
IAを図にする前に、構造は『見えない』
元アプリの問題は、ダイアグラムを描いて初めて議論できるものになった。可視化は表現ではなく、思考のツールだと理解した。
標準パターンに従うことは、設計の放棄ではない
競合5アプリが同じ構造を使っているのは、それが『正しい』からではなく、ユーザーがそれを期待しているから。期待に応えることも、立派な設計判断だ。
デザインは『答え』ではなく『提案』として出す
承認を得るために必要なのは、完璧なUIではなく、問いの立て方・根拠・判断プロセスの透明性だった。デザイナーはビジュアルだけでなく、ロジックを売る仕事でもある。