概要

大手繊維製造メーカーにて、ドローン運行を行うための飛行許可申請を行うサービス設計の初期段階からのUIUXデザイン提案〜設計〜実装を担当。アジャイル開発チームのデザイナー兼フロントエンドエンジニア（私1名のみ）として参加し、週次定例ではUI画面およびプロトタイプを確認しつつ、改善提案を作成。

デザインの作成には、Figmaを使用。フロントエンドマークアップは、React+TypeScript。

初期提案デザイン

初期仕様書

クライアントからの仕様書をもとに、UIUXデザイン要件をヒアリング。ログイン画面と一覧については、一般的なシステムと大きく変わらない印象。詳細画面については、本サービスの肝とも言える画面だが、プロジェクトとしてもUIUX要件のイメージが確定しておらず手探りで始まる。
スクリーンショット2023-10-2110.34.16.png
スクリーンショット2023-10-2110.34.37.png
スクリーンショット2023-10-2110.34.48.png

初期提案

まずはプロジェクトのデザイン方向性を定めるため、ログイン画面では簡単なイメージデザインを追加して初期デザイン提案を作成。
スクリーンショット2023-10-2110.36.03.png
一覧については、ヒアリングした必要項目に対してAPI設計にも参加し、デザイン側での最大表示内容の決定もこのタイミングでプロジェクト内に提案。データの表示方法は、この画面をベースに進めることとなる。
スクリーンショット2023-10-2110.36.09.png
この段階では、仕様書を元にデザインを起こした段階。
スクリーンショット2023-10-2110.36.38.png
画面を確認しながらヒアリングを進める上で、詳細画面での「飛行計画全体の進捗」「事前対応の個別進捗」の扱いが仕様書の内容では実現できないこととなり、デザイン変更を提案。
スクリーンショット2023-10-2110.36.51.png
サービス自体が、ドローンの飛行を行うときに必要な許可申請を自動で検出し、タスク一覧化し、申請管理・進捗管理を行うことを目的としているため、飛行計画全体と事前対応のセクションをしっかりとわけ、行わなければならない事前対応タスクをメイン画面に表示。表示方法もカンバン形式に変更することで俯瞰性を高めた。

提案デザイン経過

大枠のUIデザイン方向性が確定したので、このタイミングでUIコンポーネントを整理し、スタイルガイドやデザインシステムの構築を始める
スクリーンショット2023-10-2111.08.06.png
スクリーンショット2023-10-2111.09.29.png
スクリーンショット2023-10-2111.11.20.png

スタイルを反映したデザイン案

スクリーンショット2023-10-2110.38.15.png
スクリーンショット2023-10-2110.38.22.png

その後も開発が進むつれ、詳細画面の検討と議論が続き、デザインが変更されていく。

一覧と飛行MAP

当初の予定では、初期登録時に描画ツールで作成した地図上での飛行計画の範囲内が詳細画面に事前対応タスクの進捗確認と管理として表示される予定であったが、描画ツールとタスクを分けることでその都度画面を行き来する必要があり手間が増えていた。
スクリーンショット2023-10-2110.37.54.png
しかし、ユーザーにとっては、選択した範囲にどのような申請があるか確認だけしたい場合もあり、これでは要件を満たせないと判断し、地図とタスク一覧を１ページに配置することを提案。
スクリーンショット2023-10-2110.38.54.png
この変更により、ユーザーはその都度ページを行き来する手間がなくなり、地図画面とタスクを同時に確認しながら飛行計画を立てることができるようになった。

1画面での切り替え

しかし、この変更にも別の視点で検討が必要となった。地図を表示することでのタスク表示領域の縮小である。それに加えて、タスクだけに集中する場合や地図に集中する場合、その両方を見比べながら確認する場合というレビューがあり、ビューの切り替えを提案。
デフォルト画面
スクリーンショット2023-10-2111.27.19.png
タスク一覧画面
スクリーンショット2023-10-2111.27.25.png
地図画面
スクリーンショット2023-10-2111.27.34.png

サイドバーの設置

デフォルト表示でモーダルなどを開くことなく、継続して作業を進めるようにサイドバーを追加し、情報の設定保存が行えるようになった。
スクリーンショット2023-10-2111.27.43.png
スクリーンショット2023-10-2111.27.50.png

飛行計画全体ヘッダー

ビュー切り替えを設置すると共に、飛行計画全体ヘッダーの要素も再検討。
スクリーンショット2023-10-2111.28.58.png
飛行計画全体進捗やタスク一覧残タスクなども何度も検討を重ねる。
スクリーンショット2023-10-2111.33.43.png
スクリーンショット2023-10-2111.34.26.png

最終デザイン

画面

スクリーンショット2023-01-0515.18.35（2）.png
スクリーンショット2023-07-3118.14.02.png

成果

PoCの結果、ビジネス要件側の再検討が必要と判断され、一旦プロジェクトは解散。
プロジェクト参加メンバーからは、UIデザインでの対応の柔軟性を評価いただきました。
スクリーンショット2023-10-269.03.11.png

日清紡ホールディングス株式会社様導入事例（外部サイトへ）

ようこそ！