/
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バックエンドは、リアルタイムニュース同期、英⇄タイ要約・翻訳、感情分析(+/−/中立・影響度評価付き)、数値抽出を既に実装済みだった。
TIMELINE
Approach & Process
Step 01
要件整理
BA interviews: ビジネス・ユーザー・機能の各レイヤーで要件を整理
Dev interviews: 技術的制約(レスポンシブ対応、日付ライブラリ、出力項目)
二次調査: POCフィードバック資料およびユーザージャーニーマップを分析
ビジネス要件
機能要件
非機能要件
Step 02
UX監査
ニールセンのヒューリスティック、情報設計、データ中心UIパターンを活用
課題の特定
Step 03
再設計
Step 04
Iteration: フィードバック→再設計(アジャイル)
DISCOVERY:
Business requirement

ニュース要約

ニュース分類

ニュース翻訳

感情分析
DISCOVERY:
Functional Requirement
タスクフロー
現行フロー
人手作業
step 01
各種サイトからニュース収集


step 02
読解・要約・分類・分析
step 03
データ収集および報告書作成
新フロー
AIによる自動化
step 01
各種サイトからリアルタイム同期
step 02
生成AI
Manual by Human
step 03
ニュース絞り込み
データ選択
CSVファイル出力
タスク整理
1
目的
作業負荷および処理時間の最小化
ニュースフローデータの容易な作成・再利用
2
入力項目
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
拡張機能
「ニュース比較」ページ追加:並列比較分析
「注目項目」ページ追加:影響度スコアによる自動順位付け
ワードクラウド:主要語の出現頻度可視化
固定ヘッダー+チェックボックス固定(レスポンシブ最適化)




#4
ダークモード実装
WCAG検証済み高コントラスト(4.5:1)
ステークホルダーフィードバックに基づく改善(Iteration)
Iteration #1
BA/開発者レビュー
列固定を削除(レスポンシブ優先)
固定ヘッダー+チェックボックス固定のみ維持
日付選択は開発側推奨のTailwind/Vuetifyライブラリを使用
出力項目名をバックエンド仕様と完全一致
Iteration #2
検索機能の改善
複合キーワード検索対応(「Rail US」=「US Rail」)
結果件数表示+該当キーワードをハイライト
最近の検索履歴を保存(Google形式)
カテゴリ別推薦(原油/輸入/輸出)
Iteration #3
最終調整
感情指標のカラーを標準化(緑/オレンジ/赤)
ツールチップ非表示(専門ユーザー前提)
ダークモードはWCAG基準に準拠して検証済み
Figma引き渡し準備完了
Summary
主な成果物
1
最終UI設計(Hi-Fi)&デザイン引き渡し
全体フロー、アイコン、システムガイドライン
実装可能な開発用アセット提供
2
レポート & ポスター発表
学期プロジェクト分析レポート
大学での発表
REFLECTION (振り返り)
学び
実践的設計
教室外での初プロジェクトだったため、設計範囲や実装可能性に不安があった。画面設計にとどまらず、使用すべき日付ライブラリの提案など、実践的な支援も行う重要性を学んだ
コミュニケーションスタイルの適応
アジャイル環境では、完璧を目指す前に迅速に試作し、早期にフィードバックを得ることが重要だった。組織や環境に合わせてコミュニケーションを調整する力を身につけた
改善点
直接的なユーザー調査の実施
エンドユーザーに直接アクセスできず、二次資料や関係者インタビューに依存したため、重要な文脈的要素を見落とした可能性がある







