Works / API Integration Service
システム連携の複雑さを、ひと目でつながる体験へ。
自社製品と外部サービスをWeb APIでつなぐ「NexaFlow」の画面設計とUI/UXを担当。技術的な仕組みと導入メリットを、迷わず理解・操作できるインターフェースへ整理しました。
- INDUSTRY
- API・システム連携
- TYPE
- サービス画面 / LP
- SCOPE
- 画面設計・UI/UX
- ROLE
- UI/UX Designer
01 / CHALLENGE技術を価値に翻訳する
Project Background
専門知識がなくても、何がつながり、どう便利になるかを理解できる設計に。
API連携は導入価値が大きい一方で、説明が技術用語に偏ると決裁者や運用担当者に伝わりません。連携対象、できること、安全性、運用性の順に情報を整理し、導入後の姿から理解できる画面にしました。
01
サービスの役割が伝わりにくい
「自社製品と他社サービスをつなぐ」という価値を冒頭で言語化し、連携の目的を明確にしました。
02
技術情報が難しく見える
外部連携、アプリ連携、ユーザー管理などを大きなアイコンと短いラベルで整理しています。
03
導入時の不安が残る
幅広い対応力、セキュリティ、運用性を並べ、担当者が確認したい安心材料を先回りして提示しました。
外部サービス
アプリ連携
ユーザー管理
運用・ヘルプ
Design Concept
複雑な仕組みを、接続点が見えるインターフェースへ。
深いネイビーを基盤に、データの流れや接続を感じさせるブルーとシアンを配置。ブロック単位で情報を分け、技術的なサービスでも全体像を直感的につかめるようにしました。
NEXAFLOW — CONNECT SERVICESService UI / Landing Page
サービス定義を最初に提示
誰と何をつなぐサービスなのかを明文化し、専門用語を読む前に概要を理解できる構成です。
機能を目的別に分類
4つの主要メニューを大きなブロックで見せ、利用者が目的の機能へ迷わず進めます。
相談へつながる導線
資料請求と見積もり相談を近接配置し、理解から比較検討、相談までを一続きにしました。
02 / DESIGN担当範囲
Project Scope
機能分類から管理画面まで、サービス全体の画面設計・UI/UXを担当。
技術担当者だけでなく、導入を判断する管理者にも伝わる情報量と操作手順を整理。各機能の関係と現在地が把握しやすい画面構成にし、導入後の管理・運用を支える体験を設計しました。
REQUIREMENTS機能要件・利用場面の整理
WIREFRAME機能分類・画面設計
UI DESIGNサービス・管理画面UI
UX DESIGN操作・画面遷移設計
Start a Project
専門的なサービスを、相談につながる伝わり方へ。
複雑な仕組みや機能を整理し、技術担当者にも決裁者にも価値が届くサービスサイト・UIをご提案します。