---
title: "トヨタ自動車様 SNS運用管理システム「TOYOTA Social Hub」UI/UX設計・システム開発"
client: "トヨタ自動車 TOYOTA Social Hub"
date: 2026-10-22
tags: UIデザイン, フロントエンド実装, 画面構成, アプリケーション構築, 要件定義, インフラ構築
canonical: https://www.liberogic.jp/casestudy/toyotasocialhub/
---

# トヨタ自動車様 SNS運用管理システム「TOYOTA Social Hub」UI/UX設計・システム開発

![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/15c2ea79fce543bdae276590883a3ca4/%E3%82%AB%E3%83%8F%E3%82%99%E3%83%BC%E7%94%BB%E5%83%8F.png)

トヨタ自動車様 SNS運用管理システム「TOYOTA Social Hub」UI/UX設計・システム開発に関するケーススタディです。

## プロトタイピング型開発で実現した大規模SNS運用管理システム「TOYOTA Social Hub」

複数の部門、運用事務局、承認者が関わるトヨタ公式SNS・PR・メールマガジンの運用業務を、エントリーから素材入稿、テストアップ、承認、投稿後チェック、効果測定まで一元管理するWebアプリケーション「TOYOTA Social Hub」。

少人数の開発チームが実際の業務フローを確認しながらプロトタイピングを重ね、複雑な承認工程や媒体ごとの制約を、200名以上（2026年8月21日現在）の関係者が迷わず利用できるUIを目指しました。

---

## プロジェクト概要

トヨタ・コニック・プロ株式会社様がプロジェクトオーナーを務める本プロジェクトにおいて、リベロジックはUI/UX設計・システム開発を担当しました。

案件のエントリー、投稿スケジュールの調整、素材入稿、テストアップ、複数段階の承認、投稿後チェック、効果測定・レポートまで、投稿に関わる複雑なワークフローを一つのシステム上で管理します。

## 背景と課題

従来の運用では、SNS・PR・メールマガジンごとにExcel、メール、口頭などを使って、投稿依頼や確認、承認が行われていました。

複数の担当者・事務局・承認者の間でメールが交錯しやすく、担当案件の進行状況が分かりにくいことや、修正・確認の往復が多くなることが課題となっていました。

また、SNS媒体ごとに投稿形式や文字数、画像、動画、投稿日時などのルールが異なるため、単に情報を登録するだけでなく、媒体ごとの条件や承認状況を正しく把握できる仕組みが求められました。そこで、既存SaaSの活用や業務管理システムとのAPI連携も含め、複数の実現方法を比較・検討しました。

## モダンな技術構成

フロントエンドにはNext.js、Cloudflare Workersを採用し、バックエンド、データベース、認証にはSupabaseを利用しています。

マネージドサービスとサーバーレスな技術を組み合わせることで、開発・運用体制を過度に大きくせず、今後の機能追加や運用変更にも対応しやすい構成としました。

![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/b4c2c84409e243e0b1508d809541b82c/Before%20After.png)

## 少人数のチームによるプロトタイピング型開発

TSHのような業務システムでは、要件を最初にすべて固定してから開発するだけでは、実際の運用に合わない画面や操作が生まれる可能性があります。

そこで、業務フローを整理しながら早い段階で画面をプロトタイプ化し、関係者による確認と調整を重ねながら開発を進める手法を選択しました。

大規模な開発体制を組むのではなく、少人数のチームが設計・UI・実装を横断して担当することで、意思決定と改善のサイクルを短く保ちました。

![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/c949cdef18b343d995993660a476287c/image.png)

単に既存業務を画面上に再現するのではなく、

- 現在、自分が対応すべき案件は何か
- 次にどの作業をすればよいか
- 誰の承認を待っているのか
- どの媒体の作業が完了しているのか

などを、利用者が一目で把握できる構成を目指しました。

## 複数の役割と媒体をひとつのUIで管理

TSHでは、投稿依頼者、外部事務局、運用事務局、編集長など、役割の異なる利用者が同じシステムを使用します。

それぞれに必要な情報や操作権限が異なるため、役割に応じて表示内容や操作可能な範囲を切り替える設計としました。

また、X、Facebook、Instagram、TikTok、LINE、PR、メールマガジンなど、複数の媒体を横断して管理しながら、各媒体固有の入力項目や制約にも対応しています。

案件ごとに、

**素材入稿 → テストアップ → 事務局承認 → 投稿依頼者承認 → 編集長承認 → Wチェック → 投稿 → 投稿後チェック → レポート投入**

という進行状況を可視化し、媒体単位で作業の完了・未完了を確認できるようにしました。

![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/556e4ee6ca3446f9aa84a44dee4ea1ee/%E3%83%95%E3%83%AD%E3%83%BC%E5%9B%B3.png)

## 現場の運用に合わせた、柔軟な承認・差し替え機能

TSHの特徴の一つが、仮素材を利用した承認フローです。

本素材が完成していない段階でも、仮素材を使って確認・承認を先行できます。本素材の完成後に素材を差し替えても、それまでの承認状態を維持できるため、制作と承認を並行して進められます。

一般的なワークフローシステムでは、承認後の差し替えによって再申請が必要になる場合があります。TSHでは、実際のSNS運用で発生する変更や差し替えを前提として、履歴を保持しながら柔軟に更新できる構造を設計しました。

![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/5a025739fe3744cf97f546b1cdf66b33/TOP.png)

## 進行状況の可視化とアラート

ダッシュボードや案件詳細画面では、案件ごとの進行状況を媒体単位で表示します。

素材入稿、テストアップ、承認、Wチェック、投稿後チェック、レポート投入などの各工程を可視化し、現在どこまで進んでいるかを一目で確認できるようにしました。

入力内容が媒体の規定を超えている場合や、対応漏れが発生している場合には、画面上の表示やメールで通知します。

これにより、

- 担当案件の状況確認
- 入稿や承認の抜け漏れ防止
- 確認や差し戻しの手戻り削減
- 関係者間の認識齟齬の低減

を支援しています。

![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/df85da98271d4e489d19fdf167226c90/%E8%A9%B3%E7%B4%B0.png)

## 投稿後の効果測定まで一元化

投稿後は、SNS・PR・メールマガジンそれぞれの配信実績をTSH上で確認できます。

SNS媒体ごとのリーチ、インプレッション、エンゲージメントなどを一覧・詳細画面で確認でき、案件名、投稿日時、担当者、カテゴリなどによる絞り込みやCSV出力にも対応しています。

レポート詳細画面では、投稿プレビューと実績を同時に確認できるため、施策の結果を次回の企画や投稿判断に活用できます。

![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/9d18c281b49e417493410ef59241bd1a/%E3%83%AC%E3%83%9B%E3%82%9A%E3%83%BC%E3%83%88.png)

## 成果

### 200名以上が利用する業務基盤へ

ローンチ後は、複数の部門や運用事務局など、200名以上（2026年8月21日現在）の関係者の皆さまに利用されています。

役割や担当業務が異なる利用者が、同じシステム上で案件の進行状況を共有することで、従来分散していた情報とコミュニケーションを一つの業務システムに集約しました。

実際の運用フローに沿った画面構成や、担当作業を把握しやすいUIについて、運用担当者の皆様からも好意的な評価をいただいています。

トヨタ・コニック・プロ株式会社のご担当者の皆さまには、プロジェクト全体をリードいただくとともに、現場のご意見や運用上の知見を積極的に共有いただき、それらを開発に反映しながら進めることができました。

また、先進的な取り組みや新しい技術・開発手法にも前向きに向き合っていただき、開発チームが柔軟に挑戦できる環境をつくっていただきました。こうした密な連携と試行錯誤の積み重ねが、現在の使いやすいシステムと円滑な運用につながっていると感じています。

## クレジット

| 担当 | 氏名・組織 |
| --- | --- |
| プロジェクトオーナー | トヨタ・コニック・プロ株式会社 |
| プロジェクト担当 | トヨタ・コニック・プロ 高本 / 大島 / 湯浅 |
| チーフテクニカルディレクター / チーフエンジニア | リベロジック 大塚 |
| テクニカルディレクター | リベロジック 伊勢 |
| エンジニア | リベロジック 松塚 |
| UI/UXデザイナー | リベロジック 長橋 |
| ディレクター | リベロジック 繁田 |
| プロジェクトマネージャー | リベロジック 森本 |