UMITRON

7つのプロダクト。ひとりのデザイナー。ひとつの海。

役割
シニアUX・ビジュアルデザイナー(単独・業務委託)
期間
2021
会社
UMITRON
プラットフォーム
iOS、Android、Web、IoTダッシュボード
ユーザー
日本、東南アジア、ヨーロッパの魚・エビ養殖事業者

UMITRONは、テクノロジーで養殖業を持続可能にするという美しいミッションを掲げた、政府出資のスタートアップでした。3名の共同創業者がいて、そのうちのひとりであるCTOは、最初のプロダクトを自ら手がけたエンジニアでした。志は高く、技術力も確かでしたが、デザイナーは不在でした。

私が参画した時点で、すでに6つのプロダクトが稼働していました。IoT給餌器、衛星による海洋データダッシュボード、養殖管理ツール、魚体測定システム——いずれもエンジニアが、現場の養殖事業者の実際の課題を解決するために作り上げたものです。しかし、各プロダクトはそれぞれ単独で設計されていました。インターフェイスには一貫性がなく、複雑なデータは、画面の前ではなく船の上で一日を過ごすユーザーを圧倒していました。技術は先進的でしたが、体験はそうではありませんでした。

私は当初、PULSEという衛星海洋データアプリ、ひとつのプロダクトを改善するために業務委託として採用されました。しかし数週間のうちに、私はそのすべてに携わっていました。

牡蠣の養殖場が、私の常識をすべて書き換えた

私は岩手県別府の牡蠣養殖場を訪ねました。船の上に立ち、作業する養殖事業者の姿を見ながら、デザインの教科書には決して書かれていないことに気づきました。水面に反射する日光のせいで、画面はほとんど読めなくなるのです。養殿事業者は濡れた手で、絶え間なく動きながら、過酷な環境のなかで作業します。私がこれまで設計してきたタップ領域は、どれも小さすぎました。コントラスト比も、どれも低すぎたのです。

これは単なるユーザビリティの最適化ではありませんでした。根本的な発想の転換でした。これらのプロダクトは、日常的なアプリと同じようには設計できません。海が仕事場となる世界のために、丁寧に作り込む必要があったのです。

7つのプロダクトには、ひとつの土台が必要だった——ただし、余白を残しながら

各プロダクトは、それぞれ異なる状況で異なるユーザーに向けたものでした。資材を購入するためのマーケットプレイス、自動給餌のためのIoTダッシュボード、海洋モニタリングのための衛星アプリ、水中で魚を測定するモバイルツール。硬直した万能のデザインシステムは、すぐに破綻していたでしょう。

私は、色、タイポグラフィ、余白、ボーダースタイルといった共通の土台を構築し、すべてがひと目でUMITRONとわかる状態を保ちました。しかしその土台の上では、各プロダクトが独自のコンポーネントライブラリを持ち、それぞれ固有の課題を自由に解決できるようにしました。ブランドレベルでの一貫性、プロダクトレベルでの自由度です。

どれほど優れた技術も、養殖事業者が使えなければ意味がない

UMITRONのAIは、給餌を最適化し、海洋状況を予測し、人の介入なしに魚を測定できました。しかし、伝統的な手法に頼り、通信環境の乏しい場所で働く養殖事業者の多くにとって、そのインターフェイスは威圧的なものでした。データは生のまま、ナビゲーションは複雑で、重要なアラートも見落としやすい状態だったのです。

私の仕事は、その橋渡しになることでした。エンジニアたちの知性を、船の上の養殖事業者が迷わず使えるインターフェイスへと翻訳することです。

UMITRON MAUVE — Eコマースマーケットプレイス

MAUVEは私にとって白紙のキャンバスでした。UMITRON初のEコマースプラットフォームであり、養殖機材、飼料、テクノロジーをシームレスに購入できる手段を提供することで、養殖事業者をエコシステムへと迎え入れるために設計されました。私はコンセプトからローンチまで、CTOと密に連携しながら構築しました。

養殖事業者には、資材をオンラインで購入する習慣がありませんでした。私はブランディング、情報設計、商品の発見システム、決済フローまで、体験全体を設計しました。フィルターとレコメンドのシステムにより、膨大なカタログのなかから関連商品を簡単に見つけられるようにしました。決済は、多くの養殖事業者がアクセスするであろうモバイルに最適化しました。

  • 0 → 1 プロダクト
  • Eコマース
  • カゴ落ち -21.7%
  • 商品発見 +33.4%

UMITRON PULSE — 衛星海洋データアプリ

PULSEは、UMITRONでの私の最初のプロジェクトでした。波高、水温、酸素濃度、塩分濃度といった海洋データをリアルタイムで提供するWeb・モバイルアプリです。生のデータはそろっていました。ただ、養殖事業者はそれを理解できなかったのです。

私はデータビジュアライゼーションの層を再設計しました。海洋パラメータをわかりやすく、行動につなげられるものにするための、独自のグラフ、チャート、マップです。状況が危機的になった瞬間に養殖事業者がすぐ気づけるよう、リアルタイムのアラートシステムも統合しました。養殖事業者は机に向かっているわけではないため、モバイルファーストで設計しました。

  • データビジュアライゼーション
  • リアルタイムアラート
  • 対応時間 +31.7%
  • DAU +23.8%
PULSEのリデザイン——Webとモバイルにわたるリアルタイム海洋データのビジュアライゼーション

UMITRON CELL — スマート自動給餌器アプリ

CELLは、UMITRONのIoT給餌器を制御するアプリで、養殖事業者が最も頻繁に触れるプロダクトです。私はアプリケーション全体をゼロから再設計しました。モダンなレイアウト、シンプルにしたデータビジュアライゼーション、より明快なインタラクションパターン。別府でのフィールドワークがこのリデザインに直接反映されています——より大きなタップ領域、より高いコントラスト、明るい屋外環境での使用に向けてシンプルにしたナビゲーションです。

  • IoTダッシュボード
  • フィールドリサーチ
  • ユーザビリティ +42.8%

UMITRON REMORA — AI給餌最適化

REMORAは、AIによる給餌最適化、ペレット検知、斃死推定を、既存のカメラを使って大規模な養殖オペレーションに統合します——新たなハードウェアは不要です。私はオンボーディングを既存のカメラ環境とシームレスに連携するよう再設計し、明快で行動につなげられる給餌の推奨を提供するAI主導のダッシュボードを作りました。

  • AIダッシュボード
  • カメラ連携
  • 飼料ロス -22.1%
REMORA——AI給餌最適化ダッシュボード

UMITRON FARM — 養殖管理プラットフォーム

FARMは、養殖オペレーション全体にわたって、給餌量、斃死、魚の健康指標を記録し、メモの入力もできるプラットフォームです。私はワークフローをデータ中心ではなくタスク中心に再設計し、レポート作成時間を半減させる動的なレポーティング機能を作りました。デザインが実際の日々の作業に即したものになるよう、養殖事業者と直接ワークショップを実施しました。

  • 養殖事業者ワークショップ
  • レポート作成時間 -58%
  • 機能利用率 +80%

UMITRON LENS — 魚体測定システム

携帯型のステレオカメラとモバイルアプリを組み合わせ、水中で魚のサイズを自動測定するシステムです。私はモバイルに最適化したダッシュボードを構築し、リアルタイムのデータフィードバックと視覚的なトラッキング機能を備えて、測定フローをよりシンプルかつ正確に再設計しました。

  • ステレオカメラ
  • モバイルダッシュボード
  • 精度 +71.6%
UMITRON LENSアプリの画面——魚体測定リスト、水中写真のグリッド、サイズのヒストグラムダッシュボード
LENS——水中での魚体測定とサイズ分析

UMITRON EAGLE — AIエビ分析

タイ最大級のアグリビジネス企業のひとつであるCPと提携し、AIを活用したエビ測定システムを開発しました。養殖事業者は従来、1日に最大8回、エビを手で取り上げて定規で測定していました。新しいシステムは、カメラを使って最も大きいエビと最も小さいエビを自動的に見つけ、平均を算出し、リアルタイムでレポートします。私自身がタイ出身であることが、この協業を円滑にしました——同じ言語、同じ文化的背景です。

  • CP Foodsとの提携
  • AI測定
  • 精度 +46.6%
UMITRON EAGLE——タイと日本のMOU調印式と、AIエビ養殖に向けたCP Foodsとの提携
EAGLE——AIを活用したエビ養殖に向けたCP Foodsとの提携

デザインの引き継ぎ

エンジニアへのスムーズかつ効率的な引き継ぎを実現するため、私は曖昧さを最小限に抑え、デザインの正確な実装を後押しする体系的なアプローチを取りました。

明快なドキュメントとデザイン仕様

Figma、Zeplin、Storybookを用いて、余白、タイポグラフィ、色、インタラクションの状態、アクセシビリティガイドラインを含む詳細なUI仕様を提供しました。

インタラクティブなプロトタイプ

主要なフロー、マイクロインタラクション、想定される挙動を示す高精度のプロトタイプを作成し、推測の余地を減らして開発者の理解を深めました。

コンポーネントベースのデザインシステム

エンジニアと密に連携し、UIコンポーネントを既存のデザインシステムと整合させ、開発における一貫性と再利用性を確保しました。

定期的なデザイン・開発の同期

毎週のミーティングを設け、ブロッカーへの対応、デザイン意図の明確化、エンジニアと協働してのUIインタラクションの磨き込みを行いました。

エッジケースへの配慮

さまざまなユーザーシナリオを想定し、エラー、ローディング状態、空の画面といったケースに対するフォールバックデザインを用意して、シームレスなユーザー体験を確保しました。

UMITRONのデザインシステム——カラーパレット、グラデーション、シャドウ、タイポグラフィ、マーケティング素材
共通のデザインシステム——色、タイポグラフィ、グラデーション、マーケティングアセット
「テクノロジーが姿を消し、あとに残るのが自分の海を慈しむ養殖事業者の姿だけになったとき——そのとき、私はデザインが正しかったと確信する。」
プロダクト 主要指標 成果
CELL 主要タスク全体のユーザビリティ +42.8%
PULSE 危機的状況への対応時間 +31.7%
PULSE デイリーアクティブユーザー +23.8%
MAUVE カゴ落ち -21.7%
MAUVE 商品の発見 +33.4%
FARM レポート作成時間 -58%
FARM 機能利用率 +80%
REMORA 飼料ロス -22.1%
LENS タスク完了の精度 +71.6%
EAGLE タスク完了の精度 +46.6%
エコシステム 飼料ロスの削減 -22.6%

デザインは、スタジオではなく現場で。 別府の牡蠣養殖場に立ったことは、どんなユーザビリティラボよりも多くのことをインターフェイスデザインについて私に教えてくれました。日光の反射、濡れた手、限られた通信環境——こうした制約はペルソナには現れません。ユーザーが立つ場所に自分が立ったときに、はじめて見えてくるのです。

シンプルさは複雑さに勝る。とりわけITに不慣れなユーザーにとっては。 養殖事業者に必要だったのは、より多くのデータではありませんでした。必要なのは適切なデータを、解釈の手間がまったく要らないほど明快に示すことでした。私が設計したどの画面も、「船の上の養殖事業者が3秒で理解できるか」というテストに通る必要がありました。

デザインシステムは、ひとりがスケールするための手段である。 7つのプロダクト、ひとりのデザイナー。共通の土台とプロダクトレベルの自由という2層のシステムがなければ、これは不可能でした。このシステムはドキュメントではありませんでした。生き延びるための手段だったのです。

持続可能性とビジネスは、対立するものではない。 飼料ロスを22%削減したことは、環境面での成果にとどまりませんでした。養殖事業者のコストを抑え、UMITRONの提供価値を高めたのです。最良のデザイン成果は、複数のステークホルダーに同時に貢献します。