News Site Redesign

News Site Redesign

情報構造を再設計し、読書体験をより豊かなものにすることで、レガシーなニュースサイトの使いやすさとエンゲージメントをどのように高められるだろうか。

Company

TVBS Media Inc.

My Role

Product Design Lead

Platform

Web, Mobile

Period

2024

Project Overview

TVBS News は台湾を代表するニュースプラットフォームであり、多くの読者を抱えています。一方で、広告優先や速報性重視の運用が長年積み重なった結果、リーディングフローの断片化、情報階層の不明瞭さ、編集運用の硬直化といった課題が顕在化していました。

本プロジェクトでは、デザインを単独で担当し、モバイルファーストを前提としたリデザインを主導しました。リーディングフローの回復とストーリー構造の明確化を軸に、ユーザー体験・編集要件・広告要件のバランスを取りながら運用可能な、モジュール型ストーリーテリングシステムの構築を目的としています。

Goal
リーディングフローを改善し、記事途中広告による認知的中断を減らす
ユーザーが素早く把握できる情報階層を強化する
回遊導線を明確化し、回遊深度(セッション深度)を高める
再利用可能なモジュールにより、編集運用のスケーラビリティを支える
Target Metrics
Metric
Baseline
Goal
直帰率(Bounce Rate)
69.6%
↓ under 50%
PV/Session
1.63
↑ 2.1–2.4
モバイルにおけるエンゲージメントの安定性
不統一
モバイルファーストのコンポーネントシステム

responsibilities

コア課題の定義
広告配置と情報階層の不明瞭さにより閲覧フローが分断され、離脱の主因になっていると特定。リデザインの方向性を定めました。
Web/モバイル横断のエンドツーエンド・リデザインを主導
レイアウトのリズムを再設計し、ストーリー構造を明確化。没入感を高めるモジュール型のコンテンツパターンを導入しました。
スケーラブルなコンポーネントシステムを設計
コンテンツ/メディア/回遊導線の各モジュールを再利用可能な形で整備。編集者が「場当たり的な調整」に頼らず、一貫したストーリー導線を組める状態を作りました。
UXと広告収益要件の両立
編集・営業チームと連携し、重要な広告枠は維持しつつ、認知的な中断を最小化する配置と体験設計へ落とし込みました。
チーム横断の合意形成を推進
プロダクト/エンジニアリング/編集のステークホルダーと協働し、スコープ、実現性、段階的なリリース順序について合意を形成しながら進行しました。
実装フェーズまでのデリバリーを支援
仕様書、インタラクション定義、デザインQAを提供し、意図通りに実装されるよう品質担保まで支援しました。

Problem Insights

中核となる課題は、リーディングフローの崩れでした。記事途中に挿入される広告が文脈を遮断し、早期離脱を引き起こしていました。
この課題は、以下の 2つの構造的要因 によってさらに強められていました。
1
情報階層が古く、要点を拾いづらい
ユーザーが短時間でスキャンして重要情報に辿り着けず、記事の主旨や文脈を把握しにくい。そのため没入が続きにくくなっていました。
2
次に読むための文脈導線(回遊導線)の欠如
記事を読み終えた後に「次に何を読むべきか」を示す文脈的な案内がなく、閲覧がそこで止まりやすい状態でした。
潜在的な原因
3
CMSの柔軟性不足
編集者が一貫した構造で記事を組み立てるための手段が不足しており、レイアウトと階層の問題が運用の中で固定化していました。

Design Process / Strategy

読者がどのようにニュースを読み、なぜ離脱するのかを起点にプロセスを設計しました。単なる見た目の刷新ではなく、リーディングフローの回復と編集一貫性を支える構造設計を軸にしています。
行動・コンテンツ分析
GA4の行動データおよびスクロール深度データを分析したところ、広告による中断点において離脱が集中する傾向が確認できました。
ユーザーインタビュー/ジャーニーマッピング
1対1のユーザーインタビューを通じて、読者がニュースに接する目的やスキャンの仕方には明確な違いがあることが分かりました。
速報を素早く確認したい人、背景や文脈を重視する人、特定の目的なく受動的に読む人など、行動パターンは多様です。一方で、共通する課題として、広告の密集や情報階層の不明瞭さにより、リーディングフローが阻害される点が挙げられました。
👉 文脈の分かりにくさと、モジュール柔軟性の欠如
🧑‍🔬
「この記事が全体の流れの中でどこに位置しているのか分からない。もっと文脈がほしい。」
→(異なる背景を持つ受訪者 3 名)
ニュースの時間的な流れを可視化するため、タイムラインモジュールを導入。
👩‍💼
「情報が多すぎて、どこを見ればいいのか分からない。」
→(異なる背景を持つ受訪者 3 名)
余白、セクション分け、レイアウトリズムを見直し、可読性を向上
👉 広告の過剰挿入によるリーディングフローの阻害
👩‍💼
「広告が多すぎて、TVBSのアプリを使わなくなった。」
→(異なる背景を持つ受訪者 2 名)
広告の配置と密度を再検討し、コンテンツの流れを遮らないモジュール型広告ブロックを設計。
🧑‍💻
「スクロールするとすぐコメントと広告が出てきて、情報が騒がしい。」
→(第異なる背景を持つ受訪者 4 名)
コメントエリアの構成を整理し、デフォルト挙動を調整することで視覚的ノイズを軽減。
👉 読了後に次へ進む明確な導線がない
🧑‍💻
「読み終わったらそのまま離脱する。下のおすすめは関連性が分からない。」
→(異なる背景を持つ受訪者 3 名)
関連コンテンツモジュールと「Shuffle!」探索機能を設計し、自然な回遊を促進。
🧑‍💻
「なぜこのニュースが表示されているのか分からない。」
→(異なる背景を持つ受訪者 3 名)
グルーピング表現やテーマ指標を改善し、記事同士の関連性を視覚的に伝達
👉 バックエンドツールの老朽化による運用上の制約
👩‍🔧
「エンドユーザーが直接 CMS の制約を意識することはありませんが、
古い記事の残存やレイアウトの不整合といった形で、
編集効率の低さが体験に影響していることが確認されました。」→ 社内のニュース編集者
これらを踏まえ、レイアウトプレビュー、メディア操作フロー、コンテンツ構造ガイドラインなど、CMS 側の改善案も併せて提案し、編集チームの運用効率向上を図りました。
Note
※ 参加者全員が課題の背景や本質を同じ深さで言語化できたわけではありません。そこで、個々の発言をそのまま一般化するのではなく、**「忙しく流し読みユーザー」「文脈を重視ユーザー」「受動的に読むユーザー」**という3つの読者タイプに整理し、設計判断の指針として活用しました。
💁
詳細なペルソナ・ユーザージャーニーを見る
Persona
ユーザーインタビューから得られたインサイトをもとに、読者の行動特性を「3つの主要な閲覧志向」として整理しました。これにより、観察された行動を設計判断に活用できる実用的なデザインモデルへ落とし込んでいます。
👩‍💼
Busy Skimmer
(忙しい流し読みユーザー)
ユーザータイプ
オフィスワーカー / フリーランスなど、モバイル閲覧が中心のユーザー
利用習慣
  • 見出しや要点を素早く確認する
  • 通勤・移動中にモバイルで閲覧する
  • 効率を重視する
課題(Pain Points)
  • 過剰な広告によって集中が途切れる
  • 重要な情報にフォーカスしづらい
デザイン機会
  • 広告密度の最適化(低減)
  • モバイル閲覧時の情報スキャン性を高める
🧑‍🔬
Context Seeker
(文脈重視型ユーザー)
ユーザータイプ
学生 / ナレッジワーカー / リサーチャー
利用習慣
  • 関連コンテンツを横断的に読む
  • 構造化されたガイドや背景情報を重視する
課題(Pain Points)
  • 出来事の時系列が把握しにくい
  • トピック間の関係性が分かりにくい
デザイン機会
  • タイムラインモジュールの導入
  • 構造化された関連記事導線(「次に読む」ガイド)の設計
🧑‍💻
Passive Reader
(受動的に読むユーザー)
ユーザータイプ
SNS流入ユーザー(Facebook、LINE など)
利用習慣
  • SNSから記事を開く
  • 滞在時間が短く、深掘りしない
課題(Pain Points)
  • 読了後に次へ進む導線が弱い
  • 探索したくなるきっかけが不足
デザイン機会
  • ガイド付きレコメンデーションの設計
  • 軽量な探索インタラクションの導入(Shuffle など)
これら3つの閲覧志向は、インタラクション設計における思考の土台となりました。各ペルソナがニュースの流れをどのように辿り、どこでフリクションが生じるのかを可視化するため、詳細なユーザージャーニーを私が作成しました。
User journey map
また、各ペルソナがニュースの流れをどのように辿り、どの段階でフリクションが生じるのかを可視化するため、詳細なユーザージャーニーを作成しました。これにより、フリクションを特定し、デザインの機会を明確化しました。
流入
プッシュ通知、または見出しの素早いチェックから流入
トップ / ブックマークから見出しを巡回して閲覧
Facebook / LINE / メッセージアプリ経由で流入
記事のスキャン
要点と主要ビジュアルを中心に拾い読み
本文を深く読み、関連情報や参照元も確認
高速スクロールし、見出しとリード程度しか読まない
文脈の確認
補足情報やサブセクションは飛ばしがち
タイムライン / 背景 / ソースリンクなど、文脈情報を求める
追加情報を能動的に探そうとしない
記事終端
結論で止まる、または広告で遮られて離脱
関連ニュースや、構造化された「次に読むガイド」を求める
コメントや広告の“ごちゃつき”により即離脱
課題
  • 広告配置がリーディングフローを分断する
  • セクションが過密で、情報量が重く感じる
  • 要点が見つけにくい
  • タイムラインがなく、文脈を追いづらい
  • 関連コンテンツのまとまり(グルーピング)が弱い
  • 構造が複雑で、圧迫感がある
  • 次に読むためのガイド
    (回遊導線)がない
  • 関連性が伝わらず、内容が「自分向け」に見えない
  • レイアウトノイズが多く、集中しづらい
設計機会
  • 要点をつかめる要約ブロック(サマリー)の導入
  • 広告密度を抑えたフォーカス型レイアウト
  • タイムラインモジュールの導入
  • トピック単位での関連コンテンツ集約(アグリゲーション)
  • 信頼性が伝わる提示(出典・根拠の見せ方)
  • 読了後の提案導線(Shuffleなど)の設計
  • コメントのノイズを減らす整理(表示位置 / 初期状態の調整)
  • 関連性や優先度を伝える視覚的キューの強化
編集・ビジネスチームとの戦略アラインメント
収益への影響を与えずに中断を軽減できる領域を見極めるため、編集チームおよび営業チームとの協議を主導しました。維持すべき広告枠(非交渉領域)と、調整可能なレイアウト領域を切り分けて特定しました。
モジュラーシステムの定義
これらの整理を踏まえ、モジュラー型のストーリーテリングシステムを設計しました。再利用可能なコンポーネントとして体系化することで、編集者が場当たり的な調整に頼ることなく、進行するストーリーを一貫性と分かりやすさを保ったまま提示できるようにしています。

UI / UX Design Solutions

コンセプト設計フェーズ
スケーラブルなニュース体験に向けた戦略基盤の構築

ユーザー行動と組織要件の両方に対応するため、初期段階でアナリティクス、コンテンツパフォーマンス、ステークホルダーのインプットを横断的に調査しました。

2023年のGA4データから、モバイルはデスクトップと比較して、PVが約6倍、アクティブユーザー数が約5倍と主要な流入源である一方、回遊深度(セッション深度)はデスクトップの方が高いことが分かりました。これは、モバイル体験において読了上のフリクションが存在する可能性を示しており、モバイルファーストの設計方針を採用する判断につながりました。

ペルソナ、閲覧ジャーニー、プロトタイプ検証を踏まえ、11件のコンセプト案を提案し、検証用のワーキングプロトタイプへ統合しました。以下の観点で妥当性を確認しています。

  • 情報階層の明確さ
  • スキャン性とリーディングリズム
  • ガイド付き探索における関連性(納得感)
ユーザー評価とステークホルダー合意による機能優先度設計
どのコンセプトを次のフェーズへ進めるかを判断するため、ユーザビリティテスト参加者に各機能案を提示し、有用性と自身の閲覧習慣との関連性の観点で評価してもらいました。これにより、価値提供の大きいアイデアを特定しました。その後、私が主導して編集リード、PM、エンジニアと優先度検討ワークショップを実施し、各コンセプトについて、実現性、編集ワークフローへの影響、実装コストの観点から整理しました。

最終的なロードマップは、ユーザー価値/編集運用の安定性/技術的準備度 のバランスを取り、リリース時期とリソース制約に整合する形で策定しています。
実装優先
初期開発では、ユーザーインパクトが大きく、かつ編集運用の複雑性が低い 2つの機能 を優先しました。
1
ストーリーの流れを追いやすくする
進行するニュースを時系列で捉える「タイムラインモジュール」
Accelerate Business Growth at Speed and Scale with Insurtech
課題
出来事の流れを理解するために、読者は複数の記事を開き、頭の中で時系列を再構成する必要がありました。この負荷がリーディングフローを途切れさせ、読書体験を妨げていました。
設計意図
私が必要だと考えたのは、読書体験の中で時系列の文脈を直接提示しつつ、ストーリーが更新されるたびに編集者が要約を書き直したり、個別レイアウトを作成したりする負担を増やさない仕組みです。
解決策:タイムラインモジュール
  • 記事末尾に配置(読者が一息つき、より広い文脈を求めやすいポイント)
  • デフォルトは折りたたみ表示とし、リーディングフローを崩さない
  • 関連アップデートを展開可能なタイムラインとして提示
  • CMSのタグ運用により、編集者が項目の追加 / 並べ替え / 削除を効率よく行える
期待効果
読者は文脈をひと目で把握でき、同一ストーリー群の関連記事へ自然に読み進めやすくなります。
2
読み続けを促す
「Shuffle Next」探索ボタン
Accelerate Business Growth at Speed and Scale with Insurtech
課題
汎用的なおすすめ表示では、読了後の回遊を促すには不十分でした。
設計意図
私が設計したのは、パーソナライズに依存せず、読者が低い操作コストで「今の関心」に合う記事を能動的に見つけられる探索体験です。
解決策:「Shuffle Next」

記事末尾に配置する軽量モジュールです。タップするたびに、トレンド/最新/埋もれがちなカテゴリを混ぜた中から 3件の記事 を提示します。

  • カテゴリの多様性と鮮度を重視
  • ユーザー履歴やプロフィールに依存しない
  • 何度でも試せるインタラクション設計
期待効果

操作を通じて納得感のある記事に出会えるため、読了後の離脱が抑制され、回遊深度(セッション深度)が高まる可能性があります。

計測意図:

  • Shuffleのタップ率 / 再タップ率
  • Shuffle経由の記事遷移率
  • PV/Session(セッションあたりPV)の改善
追加検討プロトタイプ
以下のハイフィデリティプロトタイプは、段階的なリデザインロードマップの一部として検討されたものです。
初回リリースには含まれていませんが、ユーザーリサーチおよび社内レビューを通じて有効性が確認されており、今後の開発フェーズでの実装が予定されています。
3
長文記事向けドロップダウン・インデックス
ロングリードを素早く辿るためのセクションジャンプ
Accelerate Business Growth at Speed and Scale with Insurtech
課題
ロングフォームの記事では構成を見失いやすく、特定のセクションを探すために手動でスクロールし続ける必要がありました。
設計意図
没入感を損なわず、かつ記事構造を作り替えることなく、ナビゲーション性を高める手段が求められていました。
解決策:記事内ドロップダウン・インデックス
  • 見出し構造を自動検出
  • 記事冒頭付近にコンパクトなドロップダウンを表示
  • 任意のセクションへ即時ジャンプ可能
  • モバイル/デスクトップ両対応
期待効果
無駄なスクロールを減らし、長文記事における離脱を抑制。読了率と滞在の安定化が期待できます。
4
リアルタイム / トレンド表示インジケーター
緊急性を即座に伝える視覚的シグナル
Accelerate Business Growth at Speed and Scale with Insurtech
課題
速報ニュースと通常記事の違いが分かりにくく、重要度を瞬時に判断しづらい状態でした。
設計意図
強調しすぎず、煽らず、それでいて一目で状況が伝わるシグナリングが求められていました。
解決策
  • 「Live」「Trending」を統合したタグシステム
  • 一貫したアイコン設計とカラートークン
  • 見出し上部への明確な配置
期待効果
注目すべき情報への視線誘導が改善され、スキャン時の判断負荷が軽減されます。
5
イシューパッケージ
進行するニュースを束ねるテーマ別ニュース集合
Accelerate Business Growth at Speed and Scale with Insurtech
課題
継続的に発生する出来事では、数日から数週間にまたがる関連記事を追い続けることが困難でした
設計意図
編集側が毎回まとめ直すことなく、同一ストーリーラインとして記事を束ねられる仕組みが必要でした。
解決策:イシューパッケージ
  • タグや編集による関連記事の自動グルーピング
  • 専用ハブページ上で縦型タイムラインとして表示
  • 時系列で辿ることができ、特定の更新点に直接ジャンプ可能
期待効果
進行中で複雑なニュースへの理解が深まり、関連コンテンツへの探索深度が向上します。
6
パブリックフィギュアページ
人物理解を支える常設プロフィールハブ
Accelerate Business Growth at Speed and Scale with Insurtech
課題
名前は知っていても、「誰なのか」「なぜ重要なのか」という背景文脈が不足しているケースが多く見られました。
設計意図
検索に頼らず、その場で文脈を補完できる、安定した人物ハブが求められていました。
解決策:人物プロフィールページ
  • 人物名に言及した記事を自動集約
  • 簡潔な人物紹介と関連トピックを表示
  • 記事内リンクや専用ディレクトリからアクセス可能
期待効果
人物理解が深まり、関連ニュースへの横断的な探索が促進されます。
カテゴリ別コンセプト
7
🎬 エンタメ領域の強化案
課題
エンタメの読者はカジュアルに回遊する傾向が強く、カテゴリよりも「知っている名前(人物)」を起点に閲覧することが多い状態でした。
設計意図
探索を「楽しく」「低負荷」で始められ、かつ嗜好に沿って自然に広がっていく体験にする必要がありました。
解決策
  • 地域・文化圏ベースのセグメント(例:J-POP/K-POP/欧米)
  • 著名人を起点に最新動向を拾える関連モジュールと導線
  • 軽量なインタラクション要素(例:クイズ/ミニハイライト)
期待効果
リーディングフローが整い、1回の訪問あたりの滞在と閲覧の深さが向上します。
8
⚽️ スポーツ領域の強化案
課題
スポーツ記事は断続的に追う読者が多く、久しぶりに戻った際に文脈が途切れて追いづらい状態でした。
設計意図
日常の消費リズムに合う「素早く追いつける」形式を提供する必要がありました。
解決策
  • その日の主要試合/スタッツ/ハイライトを要約して提示
  • 最小限のスクロールでキャッチアップできる構成
  • ライト層にもコア層にも機能する情報設計
期待効果
日々の接触頻度が高まり、習慣的な再訪を促進します。
9
💵 ファイナンス領域の強化案
課題
ライト層は専門用語や市場構造に馴染みがなく、内容が難しく感じて読み始めづらい状態でした。
設計意図
金融ニュースを「入りやすく、読み続けやすく」するための入口(entry ramps)を用意することを狙いました。
解決策
  • 記事内に差し込めるミニ解説カード
  • 重要用語や背景をやさしい言葉で補足
  • 複数記事で繰り返し提示し、理解の定着を支援
期待効果
アクセシビリティが向上し、金融ニュースへの再訪意欲が高まります。
コア体験の再設計
ホームページ経由のトラフィックは記事消費に比べて多くはないものの、本リデザインはホームページ単体の刷新ではなく、体験全体を支えるコア領域の改善として捉えました。私は、以下の4点に重点を置いて設計しました。

① ホームページを、ブランドの入口でありコンテンツのアンカーとなる場として再定義する
② 記事ページにおけるリーディングフローを回復する
③ 拡張可能なハンバーガーメニューにより、ナビゲーションを統合する
④ 編集一貫性と反復改善を支えるモジュール型デザインシステムを整備する
10
ホームページ再設計
ブランドの存在感と、主要コンテンツへの効率的なアクセスを両立するホームページ再設計
Accelerate Business Growth at Speed and Scale with Insurtech
ホームページ経由のトラフィックは記事消費に比べて多くはないものの、ブランドへの入口としての役割や、ユーザー認識/リファラーパスに与える影響は大きいと判断しました。そこで私は、複数ストーリーを束ねるカルーセル、「Week in Review」による要点整理、そして今後の動きを示す「Upcoming Events」セクションを強調したレイアウトを提案しました。これにより、ブランド表現と情報アクセスのバランスを保ちながら、重要な流れを自然にガイドします。

デザインコンセプトは、国際的なメディアのプラクティスを参考に、最新性と重要度を軸にしたカテゴリ別コンテンツブロックで構成しました。全体のカラーパレットはTVBSの象徴的なブルーを踏襲し、専門性と落ち着きを表現しています。余白を活かしたクリーンなレイアウトにより、視覚的に「呼吸できる」体験を実現しました。

将来的には、これらのコンテンツブロックをユーザー嗜好に応じてパーソナライズする拡張も想定されています。なお、ホームページの広告収益比重が相対的に低い点を踏まえ、明瞭性を損なわない範囲で柔軟に活用できるスペースも確保しました。
👇 旧デザインとの比較
既存ホームページにおける課題
‍従来のホームページは、視覚的なノイズが多く、UI要素の一貫性にも欠けていました。特に、大きすぎるライブ配信ボタンがユーザーの視線をトップ体験から逸らし、メインの閲覧導線を分断していました。また、リスト型コンポーネントは構造や余白設計にばらつきがあり、全体として整理されていない印象を与えていました。

モバイルでは限られた画面領域を十分に活かしきれておらず、要素が詰まって情報階層を把握しづらい状態でした。一方デスクトップでは、表示領域に余裕があるにもかかわらず、要素のスケールと密度のバランスが取れておらず、視覚的に圧迫感のあるレイアウトになっていました。
11
記事ページの再設計
明瞭さと可読性、そしてコンテンツへの集中を重視し、リーディングフローを回復させる記事ページ再設計
Accelerate Business Growth at Speed and Scale with Insurtech
ユーザーの主要な課題であった「コンテンツと広告の判別が難しい」という点に対応するため、記事ページを新デザインシステムの中核的な適用先として再設計しました。
編集・事業・広告の各ステークホルダーと連携し、収益上維持すべき高パフォーマンス広告枠を特定したうえで、過剰に目立つ形式を抑え、可読性を最優先する視覚・コンテンツガイドラインを導入しています。

更新後のレイアウトでは、上部にプレミアムな「スカイバナー」広告を維持し、その直下に誌面性のある大きなキービジュアルを配置して、記事の視覚的アンカーとしました。
また、複数存在していたSNSシェアボタンや文字サイズ調整などの冗長なUI要素は整理し、デバイスのネイティブ機能を活用する方針へ移行しました。これによりインターフェースを簡素化し、読みやすさに集中できる体験を実現しています。
特定されたユーザー課題をより的確に解決するため、2024年後半の実データを分析しました。
👉
サイト総トラフィック:4億
👉
総クリック数:9,000万
👉
旧24カテゴリナビゲーションのクリック率:0.53%
👉
検索バー:0.05%
👉
速報ティッカー(「快訊」):0.11%
👉
文字サイズ変更ボタン:1.25%
👉
SNSシェア(Facebook/LINE/Newsletter):1.06%
旧デザインでは、コンテンツ表示領域を圧迫し、視覚的複雑性を高めていることが明確でした。そのため、完全な削除ではなく「整理と集約」を基本方針としています。
ナビゲーションはハンバーガーメニューへ集約しました。
利用率は0.06%と低いものの、必要とするユーザーがアクセスできる導線として維持しています。
また、シェア機能は単一で分かりやすいボタンに統合しました。

文字サイズ調整については、端末側の文字サイズ設定と同期する方針で開発と調整しました。高齢ユーザーが端末側で文字サイズを変更する傾向を踏まえた判断であり、十分に機能すればUI上のトグルを置き換えられます。リリース後のユーザーフィードバックで検証が予定されています。

速報ティッカーは広告枠として再活用したものの、インタビューでは4人中3人がスキップしていました。これにより、本来の情報価値を取り戻すため、ステークホルダーとの再調整が必要であると判断されました。
ユーザーインサイトに基づくレイアウト改善
再設計した記事ページは、操作要素の集約・簡素化と可読性の向上に注力し、あらゆる画面サイズで一貫した体験を提供します。
1
利用データに基づく整理
利用率の低い要素は削除、もしくはハンバーガーメニュー内に集約し、画面の情報密度を下げてコンテンツの可視性を高めました。
2
可読性向上のための視覚ノイズ低減
左側では広告やシェアツールによるノイズを抑え、利用率の低いタグは横並びでまとめることで、縦方向のスペースを確保し、スキャン性を改善しています。
3
明瞭性とパフォーマンスの両立
右側では広告ユニットをリスト形式に再構成し、レイアウトを整理すると同時に視認性も高めました。
👇 旧デザインとの比較
視覚的に煩雑でフォーカスが分散し、機能が重複していた従来デザイン。
📌 ハンバーガーメニュー再設計
ナビゲーション体験の再整理
新しいハンバーガーメニューでは、従来分散していたナビゲーション要素を統合し、拡張可能な構造として再設計しました。検索やイシューパッケージ(テーマ別まとめ)など優先度の高い機能をメニュー内に集約し、これまで外側に展開されていたカテゴリナビゲーションも含めて、一箇所からアクセスできる導線に整理しています。

また、編集チームによるコンテンツ拡張を見据え、将来的に階層型のサブメニューを追加できる構成としました。アカウントへのアクセス、ニュースレター登録、アプリのダウンロード導線も同一メニュー内に統合し、ユーザーの目的に応じたアクションの入口を整理しています。

さらに、メニュー内にテーマ切り替え(ライト / ダーク)を用意し、システム設定またはユーザーの好みに応じて表示を調整できるようにしました。
📌 デザインシステム
長期的な一貫性とスケーラブルな更新を支えつつ、編集負荷を最小化するため、モジュール型のデザインシステムを構築しました。これにより社内チームは、UIバリエーションを効率的に管理しながら、TVBSのブランド価値と視覚的整合性を維持できます。

基調色にはTVBSを象徴するブルーを据え、落ち着き・専門性・信頼性を表現しました。広告やメディア要素が多いコンテンツ特性を踏まえ、構造化されたレイアウト、明確な視覚階層、シンプルなコンテナ設計によってノイズを抑え、ユーザーの視線を最も重要な情報へ導いています。
Establishing Visual Consistency
From typography and color tokens to component libraries, each element was carefully crafted to reflect TVBS’s brand values while supporting a consistent, efficient design process across various content types and layouts.
視覚的一貫性の確立
タイポグラフィ、カラートークン、コンポーネントライブラリに至るまで各要素を整備し、TVBSのブランド価値を反映しつつ、多様なコンテンツとレイアウトに対応できる設計プロセスを支えています。
Color value
Token
Elemennts

Team & Ownership

主要なデザインオーナーシップ
本プロジェクトは、編集・ビジネス・プロダクト各チームとの高度に協調的な取り組みでした。調査、計画、技術実装フェーズにおいてチームと密に連携しつつ、以下の重要なデザイン領域については私が主導しました。
1
編集目標とビジネス要件の両立
可読性と物語性を高めるために、記事ページおよびホームページのレイアウトを再設計しました。同時に、編集ワークフローや広告制約を踏まえ、ユーザー体験と収益要件のバランスが取れる形に落とし込みました。
2
デザインシステムの構築
コンテンツブロック、広告配置、テーマ別モジュールを含むモジュール型デザインシステムを整備しました。視覚的一貫性を保ちながら、編集の柔軟性を損なわない運用設計としています。
3
初期コンセプト検証とプロトタイピング
ローファイ/ハイファイのプロトタイプを作成し、情報階層、リーディングフロー、マイクロインタラクションを検証しました。ユーザビリティ結果と技術的実現性を踏まえ、反復改善を行いました。
4
チーム横断のデザイン推進
ユーザーインサイトを実行可能なワイヤーフレームや仕様へ落とし込み、エンジニア、PM、編集関係者と連携しながら、プロセス全体の整合性を維持しました。
チームコラボレーション
PM、エンジニア、編集リード、広告営業と協働し、ユーザー価値とビジネス優先度の両立を図りました。
また、関係者が共通の目標に収束できるようワーキングセッションをファシリテートし、複雑な編集要件を明確なデザイン判断へと整理しました。
加えて、経営層向けの提案資料作成・説明も支援し、戦略的方向性の合意形成に貢献しました。

Impact & Takeaways

リデザイン案は私の在籍期間中にリリースには至りませんでしたが、ステークホルダーのKPIや事業目標と整合する形で設計しました。更新後の構造、モジュールコンポーネント、探索パターンは、エンゲージメント向上、直帰率低下、将来拡張に耐える基盤づくりを意図しています。
検証されたUX改善
初期のユーザビリティテストでは、モジュール型レイアウトが明瞭性と読了継続性を改善する傾向が確認されました。特にモバイルユーザーで効果が顕著でした。
チーム間アライメントの強化
データとユーザーインサイトに基づく判断により、編集・プロダクト・ビジネス各チームの共通認識が形成され、意思決定における摩擦が軽減されました。
編集プロセスへのプロダクト思考の導入
ページ単位の見た目調整から、体験全体を捉えるシステム設計へと議論を転換し、長期的なデジタル変革を後押ししました。
スケーラブルな設計基盤の確立
タイムライン型ストーリーテリング、テーマ別クラスタリング、モジュールコンテンツといった原則を定義し、将来的なパーソナライズや深いエンゲージメント拡張に対応できる基盤を整備しました。
主な学び
1
ステークホルダーとUX目標の整合
多様な利害を調整しつつ、常にユーザー中心で判断するための枠組みを構築しました。
2
定量データと定性インサイトの統合
アナリティクスとインタビュー結果を統合し、実行可能なデザイン戦略へ昇華する力を高めました。
3
レガシー環境におけるデジタル変革
既存の組織文化や制約を理解した上で、段階的に変化を促す進め方を学びました。
4
UIを超えたデザインの役割
デザインを単なる画面制作ではなく、戦略・合意形成・長期的なプロダクト方向性を支えるレバーとして捉える姿勢を再確認しました。