🚀サービス概要
spark-Xは、店舗や施設に専用デバイスを設置し、利用者がQRコードをスキャンしてWeb決済することで電源を利用できるサービスです。
アプリ・会員登録不要、スマホひとつでその場で完結できる手軽さを強みに、充電したいユーザーと収益化したい施設オーナーをつなぐ仕組みを提供しています。

🏢クライアント様
株式会社エスエイエンジニアリング 様

💡当社スコープ
▪️情報設計
▪️管理画面UIデザイン
▪️LPの構成設計・制作

🧱体制
▪️ディレクター：1名
▪️エンジニア：1名
▪️デザイナー：1名

🪐期間

▪️2025.08~2026.3

プロジェクト概要

株式会社エスエイエンジニアリング様より、新規事業として立ち上げるspark-Xのサービス構築をご依頼いただき、要件の整理からデザイン・実装までを一貫して担当しました。

プロジェクトとしては、要件すべてを一度に進めるのではなく、優先度をつけてフェーズを分けながら段階的に積み上げていく方針で進めました。

🔍当初の課題

• 既存システムからの変更を最小限に抑えながら、アプリ・会員登録不要というシンプルな体験を成立させること

• 課金方式の異なる2形態が同一システムに共存しており、オーナーによって見る情報が異なる中で、管理画面を混乱なく扱える設計にすること

• ユーザーと導入検討オーナーという異なる2つのターゲットへの訴求を、優先度を整理しながら1枚のLPで成立させること

🧭デザインプロセス

1. まず動かす。既存システムを活かして1ヶ月でテスト環境を構築

「ユーザー体験をよりシンプルにしたい」「spark-X向けに決済機能を変更したい」というご要望を受け、
アカウント登録を外した際の影響範囲の調査と、従量課金から固定金額へ変更した場合のフロー整理を行いました。

その際、新規開発ではなく、当時まだ本格稼働していなかった既存システムを改修する方針を提案したことで、約1か月という短期間でテスト環境を整えることができました。

📍フェーズ１で対応する箇所の整理↓

2. 管理者が売上を把握できる仕組みをつくる

テスト環境が整った後、管理者向けの売上管理機能の設計に着手しました。

売上を正確に把握するには「月単位」「日単位」「デバイス単位」の3つの観点が必要だと考え、それぞれの粒度で確認できる設計を提案。
この3軸で数字を捉えることで、各オーナーへの利益配分の判断もしやすくなると整理し、その方針で実装へと進めました。

3. オーナーが自分のデータを確認できるようにする

管理者だけでなく、オーナー自身が管理画面にログインして自拠点のデータを確認できる機能を追加しました。

管理者を介さずに必要な情報へ直接アクセスできる設計としたことで、日々の運用をオーナー主体で進められる体制が整いました。

📍オーナーが確認するデータの範囲を整理

4. UIを整え、サービス全体の完成度を高める

最初のフェーズではテスト環境の構築を優先していたため、このタイミングで全体のUIデザインを見直し。

全体フローを改めて整理し、すり合わせを重ねながらデザインに落とし込んでいきました。

詳細画面ではオーナーによってデバイスの設置状況が異なることを踏まえ、タブ切り替え機能を追加しました。
操作に不慣れなユーザーが「なぜデータが表示されないのか」と戸惑わないよう、デフォルトでは全データを表示したうえで、任意でタブを切り替えられる設計としています。

📍タブ切り替えした際の表示について

5. サービスの価値を伝えるLPをつくる

エンドユーザーと店舗オーナーそれぞれの課題・提供価値・ブランドプロミスを整理し、
誰に向けて何を伝えるかを議論したうえで、全体構成の設計に進みました。

サービスを広げていくためには設置店を増やすことが優先されることから、オーナー向けに比重を置く案も検討しましたが、

議論を重ねた結果、まずエンドユーザーとオーナーの双方にサービスの内容を正しく理解してもらうことが先決という結論に至り、エンドユーザーに比重を置いた構成としました。

📍ワイヤー検討

📍デザイン検討

デザインでは、サービスロゴの丸みに合わせてボタンや囲みなどのUI要素全体に丸みを持たせ、親しみやすさを視覚的に表現しています。

配色はサービスカラーであるオレンジとグレーで統一し、ユーザーが直感的に操作できる構成を目指しました。

💻LPはこちら↓
https://spark-x.info/

成果物

▪️ユーザー向けフロー設計
・QRコード読み取りから決済・チャージ開始までの画面フロー設計
・アプリ・会員登録不要で完結するUX設計

▪️管理画面UIデザイン
・オーナー・拠点管理・デバイス登録の設計
・屋内/屋外の設置場所を軸にした情報整理
・月毎・日毎・デバイスごとに確認できる売上管理画面の設計

▪️サービスサイト（LP）の構成・制作
・エンドユーザー・導入を検討するオーナーがサービスの概要・使い方を理解できる構成設計
・LPデザイン・ブランドトーンの策定