豐田汽車 SNS 營運管理系統「TOYOTA Social Hub」UI/UX 設計・系統開發

以原型開發方式實現的大規模 SNS 營運管理系統「TOYOTA Social Hub」

「TOYOTA Social Hub」是一套網頁應用程式,可集中管理多個部門、營運事務局與審核人員共同參與的豐田官方 SNS、PR 及電子報營運作業,涵蓋案件登錄、素材上傳、測試發佈、審核、發佈後檢查及成效分析。

小型開發團隊在確認實際業務流程的同時反覆進行原型開發,目標是打造一套介面,讓超過 200 位相關人員(截至 2026年08月21日)無需猶豫即可順利使用,同時兼顧複雜的審核流程與各媒體的限制。


專案概要

本專案由豐田 Conic Pro 股份有限公司擔任專案負責人,Liberogic 負責 UI/UX 設計與系統開發。

本系統可在單一平台上管理與發佈相關的複雜工作流程,包括案件登錄、發佈排程調整、素材上傳、測試發佈、多階段審核、發佈後檢查,以及成效分析與報告。

背景與課題

過去的營運方式中,SNS、PR 及電子報各自透過 Excel、電子郵件或口頭等方式進行發佈請求、確認與審核。

由於多位負責人、事務局與審核人員之間的電子郵件往來容易混亂,案件的進度也難以掌握,且修改與確認來回次數增多,因此成為一大課題。

此外,各 SNS 媒體在貼文格式、字數、圖片、影片及發佈時間等規範上皆有不同,因此除了單純登錄資訊外,還需要能正確掌握各媒體條件與審核狀態的機制。為此,我們比較並評估了多種實現方案,包括活用現有 SaaS,以及與業務管理系統進行 API 整合。

現代化的技術架構

前端採用 Next.js 與 Cloudflare Workers,後端、資料庫與身分驗證則使用 Supabase。

透過結合代管服務與無伺服器技術,我們在不過度擴大開發與營運團隊的前提下,打造出便於日後新增功能與調整營運方式的架構。

由小型團隊進行的原型導向開發

像 TSH 這類業務系統,若在開發前就將所有需求一次固定,可能會產生不符合實際營運的畫面與操作。

因此,我們選擇在整理業務流程的同時,於早期階段將畫面原型化,並透過相關人員的反覆確認與調整來推進開發。

我們並未組成大型開發團隊,而是由小型團隊橫跨設計、UI 與實作負責,讓決策與改善的循環保持短而快速。

我們並非單純地將既有業務原樣搬到畫面上,而是

  • 目前自己應處理哪些案件
  • 接下來應該進行哪些工作
  • 等待誰的核准
  • 哪個媒體的作業已完成

我們的目標是打造一目了然的架構,讓使用者能立即掌握上述資訊。

於單一 UI 中管理多重角色與媒體

TSH 由不同角色的使用者共用同一套系統,包括投稿委託人、外部事務局、營運事務局與總編輯等。

由於各角色所需的資訊與操作權限不同,我們設計為依角色切換顯示內容與可操作的範圍。

此外,系統可跨越 X、Facebook、Instagram、TikTok、LINE、PR 及電子報等多個媒體進行管理,同時支援各媒體專屬的輸入欄位與限制。

各案件皆可

素材提交 → 測試上架 → 事務局核准 → 投稿委託人核准 → 總編輯核准 → 雙重檢查 → 發佈 → 發佈後檢查 → 匯入報告

的進度流程,並可依媒體為單位確認作業的完成與未完成狀態。

符合現場運作的彈性審核與素材替換功能

TSH 的特色之一,是可使用暫用素材的審核流程。

即使正式素材尚未完成,也可以先使用暫用素材進行確認與審核。正式素材完成後再進行替換,原有的審核狀態也會保留,因此製作與審核可以同步進行。

一般的工作流程系統中,審核通過後若進行素材替換,可能需要重新提出申請。TSH 則以實際 SNS 運營中會發生的變更與替換為前提,設計出能保留紀錄並彈性更新的架構。

進度視覺化與警示通知

在儀表板與專案詳細畫面中,會依媒體分別顯示各專案的進度狀態。

將素材提交、測試上稿、審核、雙重檢查、發佈後檢查、報告提交等各階段視覺化,讓使用者一眼就能掌握目前進行到哪一步。

若輸入內容超出媒體規範,或有遺漏的處理項目,系統會透過畫面提示或電子郵件通知。

藉此,

  • 負責專案的狀態確認
  • 防止投稿素材與審核流程中的疏漏
  • 減少確認與退回修改所造成的返工
  • 降低相關人員之間的認知落差

提供支援。

從發布後的成效評估到整合管理

發布後,可在 TSH 上確認 SNS、PR 與電子報各自的投遞成效。

可在列表與詳細畫面中查看各 SNS 媒體的觸及、曝光與互動等數據,並可依專案名稱、發布時間、負責人、分類等條件篩選,也支援 CSV 匯出。

在報告詳細畫面中,可同時確認發布預覽與實際成效,有助於將策略成果運用於下一次的企劃與發布判斷。

成果

邁向供 200 名以上使用者運作的業務基礎平台

上線後,已有 200 名以上(截至 2026年08月21日)來自多個部門及營運事務局等相關人員使用本系統。

不同角色與負責業務的使用者,透過同一套系統共享案件的進度,將原本分散的資訊與溝通整合至單一業務系統中。

貼合實際營運流程的畫面架構,以及易於掌握負責作業的 UI 設計,也獲得營運負責人員的好評。

感謝 Toyota Konic Pro 股份有限公司的負責人員全程主導專案,並積極分享現場意見與營運經驗,我們得以將這些意見反映於開發過程中,順利推進專案。

此外,對方也以積極態度面對前瞻性的嘗試與新技術、新開發方法,為開發團隊營造了能夠靈活挑戰的環境。正是這些緊密的合作與反覆的摸索累積,才促成了目前易於使用的系統與順暢的營運,我們對此深感認同。

專案負責人
TOYOTA CONIQ Pro, Inc.
專案負責人
Toyota Konic Pro 高本 / 大島 / 湯浅
首席技術總監 / 首席工程師
Liberogic 大塚
技術總監
Liberogic 伊勢
工程師
Liberogic 松塚
UI/UX 設計師
Liberogic 長橋
總監
Liberogic 繁田
專案經理
Liberogic 森本
公司名稱・服務名稱
豐田汽車 TOYOTA Social Hub
URL
不公開