/

Trading Sentimental Portal

センチメントポータル設計

センチメント
ポータル設計

STelligence|AIデータポータル|タイ大手石油企業|2024年1月〜5月

Role & Contribution

役割

単独UX/UIデザイナー(STelligenceとの共同学生プロジェクト)

期間

5か月(2024年1月〜5月)

チーム

本人、BA1名、開発者8名、大学指導教員1名

活用スキル

情報設計 (IA:Information Architecture) / UX監査 / アジャイルプロセス(反復改善)

主な業務

• BAおよび開発者と連携し、ユーザーニーズと要件を定義

• 既存プロトタイプ、POC、ユーザーフィードバックを監査

•既存システムの再設計として、Figmaでハイファイワイヤーフレームを作成

• ステークホルダーとの反復改善を2回実施

• 開発者向け完全引き渡しを実施

Project Details

The Challenge

石油市場アナリストは、ニュース収集→要約・分類→Excelでの「ニュースフローデータ」報告書作成という、1日3~5時間の手作業に直面していた。

The Existing System

GenAIバックエンドは、リアルタイムニュース同期、英⇄タイ要約・翻訳、感情分析(+/−/中立・影響度評価付き)、数値抽出を既に実装済みだった。

How might we AI処理済みの数百件のニュースから、影響度上位3件を迅速に特定し、出力できる仕組みをどう設計するか。

How might we

AI処理済みの数百件のニュースから、影響度上位3件を迅速に特定し、出力できる仕組みをどう設計するか。

TIMELINE

Approach & Process

Step 01
要件整理
  • BA interviews: ビジネス・ユーザー・機能の各レイヤーで要件を整理

  • Dev interviews: 技術的制約(レスポンシブ対応、日付ライブラリ、出力項目)

  • 二次調査: POCフィードバック資料およびユーザージャーニーマップを分析

ビジネス要件
機能要件
非機能要件
Step 02
UX監査

ニールセンのヒューリスティック、情報設計、データ中心UIパターンを活用

課題の特定
状態の可視化(Visibility of status)
状態の可視化
(Visibility of status)

例:リアルタイム同期時のローディング表示

例:リアルタイム同期時のローディング表示

再認よりも認識 (Recognition
vs Recall)
再認よりも認識
(Recognition vs Recall)

例:横スクロール時の固定ヘッダー

例:横スクロール時の固定ヘッダー

エラー防止(Error Prevention)
エラー防止
(Error Prevention)

例:未選択時にエクスポートボタンを無効化

例:未選択時にエクスポートボタンを無効化

ラベリング (Labeling)
ラベリング
(Labeling)

例:感情指標に標準化された色を使用

例:感情指標に標準化された色を使用

Step 03
再設計
Step 04
Iteration: フィードバック→再設計(アジャイル)
DISCOVERY:

Business requirement

ニュース要約
ニュース分類
ニュース翻訳
感情分析
リアルタイム処理
Webベースインターフェース
データ出力(XLSX・CSV)
Real-time Processing
Webベースインターフェース
Data Export (XLSX / CSV)
データ出力(XLSX・CSV)
DISCOVERY:

Functional Requirement

タスクフロー
現行フロー
人手作業
step 01
各種サイトからニュース収集
step 02
読解・要約・分類・分析
step 03
データ収集および報告書作成
新フロー
AIによる自動化
step 01
各種サイトからリアルタイム同期
step 02
生成AI
要約
要約
分類
分類
数値抽出
数値抽出
翻訳
翻訳
感情分析
感情分析
Manual by Human
step 03
ニュース絞り込み
データ選択
CSVファイル出力
タスク整理
1
目的
  • 作業負荷および処理時間の最小化

  • ニュースフローデータの容易な作成・再利用

2
入力項目

Date / Key news content

Unit / This Period

Last Period / %Changes

Country / Category

Date / Key news content Unit / This Period

/ Last Period / %Changes / Country / Category

3
出力内容
  • 影響度上位3件のニュース

  • 今週の見通し

  • 市場ハイライト

4
リソース

ニュースサイト

3
出力内容
  • 影響度上位3件のニュース

  • 今週の見通し

  • 市場ハイライト

4
リソース

ニュースサイト

DISCOVERY:

Non–functional requirement

対象ユーザー
石油・ガス市場アナリスト
目標・責務

日次の原油価格データを収集し、レポートを作成し、専用サイトを通じて社内関係者へ共有

主な課題
  • 情報過多

  • 作業工程が長時間化

  • タスク完了までに高い作業負荷を要する

主要ニーズ
シンプルかつ必要最小限の機能
迅速で容易な操作性
日々の反復業務に適している
作業時間を可能な限り最小化
ニュースの保存・処理能力を最大化
ニュースフローデータファイルの容易な作成・再利用を可能にする
主要ニーズ

主な再設計方針

課題

#1

情報過多


情報過多


対応方針
  • 情報設計の再構築

  • 表示/非表示、ドラッグ&ドロップによる並び替え

17列
3列
ニュースグループ
date
title
content
source
summary
country
category
感情グループ
topic
overall
reasons
impact rating
数値グループ
topic
context
values
unit
% change
課題

#2

認知負荷軽減


認知負荷軽減


対応方針
  • 視覚的階層の最適化

タイポグラフィ
  • 太字見出し→通常本文→補助情報(細字)

  • 可読性(フォントサイズ・行間)

  • 一貫した視覚階層

色設計
  • 高コントラストなダークモード(WCAG 4.5:1準拠)

  • 明確なラベリング(例:感情指標に直感的な色を使用)

ナビゲーション

タブ追加による整理

  • 概要

  • テーブル

  • 注目項目

  • ニュース比較

課題

#3

ワークフロー最適化

ワークフロー最適化

対応方針
拡張フィルター
  • 感情:+/中立/−

  • 今日|今週|カスタム期間 (日常的な反復作業を想定)

表示のパーソナライズ
  • 列の表示/非表示

  • 列のドラッグ&ドロップによる並び替え

スマート検索
  • 推奨検索(検索履歴および頻出語に基づく)

  • 検索キーワードは削除可能なチップ形式に変換され、追加・編集・削除を容易にし、精度の高い検索を可能にする

  • 結果件数表示(例:「42件中1–10件を表示」)

Crude

Imp/Exp

Prod.

Demand

See More

Country

US

Canada

Mexico

Columbia

Argentina

See More

Cancel

Apply

Category

Reset

Filter

拡張機能
  • 「ニュース比較」ページ追加:並列比較分析

  • 「注目項目」ページ追加:影響度スコアによる自動順位付け

  • ワードクラウド:主要語の出現頻度可視化

  • 固定ヘッダー+チェックボックス固定(レスポンシブ最適化)

Word Cloud

most frequently used words in the news articles, with larger font sizes indicating higher frequency.

coalfired

power

coal

generation

capacity

crude

output

line

year

units

service

PLN

rail

Trans

STB

shippers

three

early

bd

new

agency

global

next

hydropower

demand

first

Word Cloud

most frequently used words in the news articles, with larger font sizes indicating higher frequency.

coalfired

power

coal

generation

capacity

crude

output

line

year

units

service

PLN

rail

Trans

STB

shippers

three

early

bd

new

agency

global

next

hydropower

demand

first

Word Cloud

most frequently used words in the news articles, with larger font sizes indicating higher frequency.

coalfired

power

coal

generation

capacity

crude

output

line

year

units

service

PLN

rail

Trans

STB

shippers

three

early

bd

new

agency

global

next

hydropower

demand

first

Challenge
課題

#4

ダークモード実装

Solution
対応方針
WCAG検証済み高コントラスト(4.5:1)
Background / Base (Dark)
#
121212
Surface (Dark)
#
1E1E1E
Text / On-dark
#
FFFFFF (86%) 
Accent / Primary (Dark):
#
06AEEF
Link
#
9E55FC

Heading 1

Heading 1

Trebuchet MS - Bold-36px

Trebuchet MS - Bold-36px

Content/M

Content/M

Roboto - Regular-16px

Roboto - Regular-16px

Content/S

Content/S

Roboto - Regular-14px

Roboto - Regular-14px

Content/XS

Content/XS

Roboto - Regular-12px

Roboto - Regular-12px

Heading 1

Heading 1

Trebuchet MS - Bold-36px

Trebuchet MS - Bold-36px

Content/M

Content/M

Roboto - Regular-16px

Roboto - Regular-16px

Content/S

Content/S

Roboto - Regular-14px

Roboto - Regular-14px

Content/XS

Content/XS

Roboto - Regular-12px

Roboto - Regular-12px

Background / Base (Dark)
#
121212
Surface (Dark)
#
1E1E1E
Text / On-dark
#
FFFFFF (86%) 
Accent / Primary (Dark):
#
06AEEF
Link
#
9E55FC
Background / Base (Dark)
#
121212
Surface (Dark)
#
1E1E1E
Text / On-dark
#
FFFFFF (86%) 
Accent / Primary (Dark):
#
06AEEF
Link
#
9E55FC

ステークホルダーフィードバックに基づく改善(Iteration)

Iteration #1
BA/開発者レビュー
  • 列固定を削除(レスポンシブ優先)

  • 固定ヘッダー+チェックボックス固定のみ維持

  • 日付選択は開発側推奨のTailwind/Vuetifyライブラリを使用

  • 出力項目名をバックエンド仕様と完全一致

Iteration #2
検索機能の改善
  • 複合キーワード検索対応(「Rail US」=「US Rail」)

  • 結果件数表示+該当キーワードをハイライト

  • 最近の検索履歴を保存(Google形式)

  • カテゴリ別推薦(原油/輸入/輸出)

Iteration #3
最終調整
  • 感情指標のカラーを標準化(緑/オレンジ/赤)

  • ツールチップ非表示(専門ユーザー前提)

  • ダークモードはWCAG基準に準拠して検証済み

  • Figma引き渡し準備完了

Summary

主な成果物
1
最終UI設計(Hi-Fi)&デザイン引き渡し
  • 全体フロー、アイコン、システムガイドライン

  • 実装可能な開発用アセット提供

2
レポート & ポスター発表
  • 学期プロジェクト分析レポート

  • 大学での発表

REFLECTION (振り返り)

学び
  • 実践的設計

教室外での初プロジェクトだったため、設計範囲や実装可能性に不安があった。画面設計にとどまらず、使用すべき日付ライブラリの提案など、実践的な支援も行う重要性を学んだ

  • コミュニケーションスタイルの適応

アジャイル環境では、完璧を目指す前に迅速に試作し、早期にフィードバックを得ることが重要だった。組織や環境に合わせてコミュニケーションを調整する力を身につけた

改善点
  • 直接的なユーザー調査の実施

エンドユーザーに直接アクセスできず、二次資料や関係者インタビューに依存したため、重要な文脈的要素を見落とした可能性がある

Want to learn more about my process? Let's Get in touch!
Want to learn more about my process? 
Let's Get in touch!

Designed & Made by Rujirekha

Designed

& Made by Rujirekha

神戸, Japan

Updated 02.24.2026

Updated 02.24.2026