はじめに
enechainプロダクトデザインデスクのマネージャーの近藤（@add_kk）です。
10月9日にenechainでは電力の卸取引をオンラインでリアルタイムに自動約定するマーケットプレイス「eSquare Live」をローンチしました。これまで提供していたeSquareを大幅に進化させた「即時=Live」なオンラインプラットフォームです。発電事業者や電力小売業者、トレーダーが現物から先物までを取引可能です。
そして、このプロダクトが2024年グッドデザイン賞を受賞しました。
2024 グッドデザイン賞 エネルギー卸取引マーケットプレイス eSquare Live
審査員の評価コメント
本サービスは、変動の激しい卸電力市場における革新的なソリューションであり、拡張性に優れたユーザーフレンドリーなプラットフォームを提供する。日本の電力小売市場の自由化と世界的なエネルギー価格の変動の中で、経済の繁栄と持続可能な社会を促進するために設計された公正で開かれた市場である。複雑さと使いやすさのバランスに優れており、初心者のトレーダーからベテランブローカーまでユーザーのニーズに適応する直感的なUIを提供している。リアルタイムデータ、カスタマイズ可能な機能、ユーザーのフィードバックへの取り組みにより、今後10年の持続的な成長と影響力を備えた現代的なエネルギー取引プラットフォームのモデルとなっている。
エネルギーの取引という難しいドメインでのデザインにチャレンジしている中で、このように評価をいただけたことは大変光栄です。よいタイミングなのでeSquare LiveとそのUIデザインについて、少し紹介させていただければと思います。
背景
2016年の電力小売自由化以降、多くの事業者が電力業界に参入しましたが、電力の卸価格は非常にボラティリティが高く、小売り事業者にとっては仕入れ値が安定しないという課題がありました。そこで、2021年からenechainはヘッジ取引が可能なマーケットプレイス「eSquare」を提供してきました。
enechainの年間取引規模は年間1兆円を超えるまでに成長しましたが、さらなるマーケットの活性化のためには、自動化を始めとするテクノロジーソリューションが必要でした。しかし、eSquareはスピーディな取引や自動取引を前提としたシステムにはなっていませんでした。
また、電力業界のユーザには、システムを利用した高速な取引に慣れている人もいれば、取引自体の経験がほとんど無い方もいます。単純にシステムを展開しても簡単には使っていただけません。
現状のユーザに受け入れられた上で、今後10年間使い続けられるようなUIとUXを備えた新しい「eSquare」が求められていました。
eSqaure LiveのUIデザイン
デザイン基本方針
eSquare Liveのデザイン基本方針です。メインになる取引画面の方向性が固まり、各画面や仕様の詳細を詰めていく段階で、デザインに迷った時の指針にするためと、画面デザインに対しての合意を取りやすくするためにまとめました。
この中から、特にプロダクト固有のものについて紹介します。
初見のために過剰なわかりやすさを求めない
eSquare Liveは対象となるユーザーがかなり限られているプロダクトです。そして、取引の場を提供するというサービスの性質上、画面の情報量がとても多くなります。商品と注文の属性は複雑ですが、情報量を減らすことにも慎重にならなければなりません。初見のためのわかりやすさは、慣れた後に毎日使ってもらうユーザーにはノイズにもなりえます。例えば、親切にしたいあまりに冗長なラベルやサポートテキスト、多すぎるヘルプへの動線など。これらは一度確認してしまえば毎回は必要ないものもあるかもしれません。思い切ってこれらの多くを省き、シンプルに簡潔にしました。
すぐ覚えられる、すぐ探せるUIの配置を目指す
わかりやすさ、覚えてもらうことについては、いつも見る画面内で全てをフォローせず、画面外でマニュアルや本番に近いトライアルのための環境を用意しました。
画面内アクションは、UIの配置やラベルなどのルールなどをなるべく揃えることで初めて使う機能でも予測してもらいやすいことを期待します。
カスタマイズ性
eSquare Liveはレイアウトをカスタマイズして使うことをイメージし、以下のような特徴を持っています。
- 取引に関する情報を自由に選択し、並べ替えられるUI
- 商品をカードとして管理し、ドラッグ＆ドロップで並べ替えが可能
- レイアウトしたカードのグループと情報のフィルターを「タブ」として複数保持可能
電力には地域や時間帯、期間その他にもいろいろな属性があり、とても複雑です。eSquare Liveではこれらを「商品」としてカードにし、取引画面全体がこれらのカードが並ぶレイアウトになっています。このカードはドラッグ＆ドロップで自由に並べ替えられます。また、商品の属性ベースのフィルターとセットで「タブ」として任意のカードセットを保存しすぐに切り替えることが可能です。
利用者の習熟度や環境、チェックしたい商品属性は様々で、一様なUIではこのニーズに応えるのは難しいと考え、カスタマイズして利用していただくことを想定しています。
現在、eSquare Liveの提供はPCのスクリーンを想定していますが、カードを並べるレイアウトは一般的な解像度の環境においては優先度の高い商品の情報提供を担保し、より高解像度の環境ではより多くの商品の一覧性を提供します。
モードレスな注文UI
デザイン基本方針の6番にある通り、eSquare Liveは「不必要なモーダルでモードの強制をしない」ことを考えてデザインしています。
これまでのeSquareの注文は、注文手続きや指定する属性の複雑さからモーダルで注文モードに移行して手続きを進める形を取っていました。このようにモードが切り替わることは、注文に集中させ、離脱を防ぐような効果も期待はできますが、リアルタイムに刻々と変わる状況では、一番いいタイミングを逃してしまう可能性もあります。そこで、eSquare Liveではモードレスな注文UIを採用しました。
注文フォームは普段は画面右下に折りたたまれています。クリックするか、または、商品カードから注文を入れたい期間や取りに行きたい注文を選択することで展開し、状況をリアルタイムに把握しながら注文を入れることができます。注文の操作中でも別の商品カードや期間を選択するとフォームが閉じたり開き直すことをせず、そのまま新しい注文へ移行します。商品カードの設計と合わせて、これまでよりスピーディな注文が可能となりました。
ダークモードの提供
トレーダーには複数のツールを同時に使用する方も少なくありません。それらの多くはダークモードを備えているか、デフォルトがダークなテーマのUIでした。 そうでなくても、OSレベルでダークモードがサポートされ、ダークモードの使用率が上がっている現在ではダークモードの提供が必須であると考え、ついに対応しました。
今回全体のデザインを再構築するに当たり、カラースキームの設計をライトモード/ダークモード両方を提供できるように再設計しました。また、このカラーシステムはenechainのプロダクト全体で利用するデザインシステムに統合・管理しています。
ダークモードについて、このTech Blogでも何回か書いてきましたが、また第3弾としてより詳しくまとめる予定です。
ダークモードを巡るあれこれ：ダークモードの明るい未来 - enechain Tech Blog
FigmaのVariables活用入門: ダークモードの効率的な作成と管理 - enechain Tech Blog
グッドデザイン賞への応募と受賞
eSquare Liveのチームではテックとビジネスが進捗や議論していることなどを共有する定例のMTGがあるのですが、そのMTGの中で「グッドデザイン賞とか出さないんですか？」とアイスブレイク的に話題が出たのを、私が真に受けてひっそりと準備をし応募をしました。
今回、実際に受賞をいただくことができてあらためて感じたのは、当たり前ですが、知名度やブランド、形態に関わらず、プロダクトの意義やそこに込めたデザインを伝えることができれば、それをしっかり評価してくれる審査員がちゃんといるということです。そして、難しいドメインの中で複雑な課題に向き合い、どんなことをやっているのか、何をデザインで解決しようとしているのかを説明すること自体も難しい我々にとって、応募を進めること自体もとてもよい機会でした。
enechainのValueの1つには「余白 。」あります。グッドデザイン賞への挑戦は、プロダクトデザインにとって必須ではありません。しかし、忙しいスケジュールの中で応募する余裕を作り、受賞できたことは、私自身、チーム、そして会社にとって非常に励みになるポジティブなニュースでした。
まとめ
eSquare Liveは、これから成長させていかなければならない、やっと生まれたばかりの生きているプロダクトです。Day1以降に控えている機能追加や改善もありますし、正式にリリースできたからこそ見えてきている課題や、新たにユーザーからいただいたフィードバックもたくさんあります。10月からチームに新しいデザイナーを迎えることもできました。
リリースもグッドデザイン賞の受賞もまだまだはじめの小さな一歩に過ぎません。eSquare Liveと電力取引自体を活性化できるように、デザイナーとして、デザインの力で積極的に関わっていければと思います。
enechainでは一緒にプロダクトを成長していける仲間を絶賛募集中です。eSqure Liveを始めとしたプロダクトのより良い体験を目指しながら、新しいエネルギーの取引と価値を一緒に作っていきたいチャレンジングなデザイナー、エンジニアの応募をお待ちしています！
