直感的なUIを実現するNAS管理画面への刷新

アイ・オー・データ機器（以下、I-O DATA ）様は、デジタルデバイス周辺機器及びソフトウェア、関連サービスの開発・製造・販売を行う企業です。高度化・多様化する情報社会において、40年以上にわたり培ってきた技術を用いて多様なニーズに応え、豊かなデジタルライフを支えています。

そのような事業を展開するなかで、I-O DATA 様は長きにわたり、法人向けNASサービス「LAN DISK」シリーズを提供しています。情報化社会が進み、世の中に溢れるデータは大容量になったり、高速転送が必要になったり、複数人での同時編集が必要になったりと変化してきました。それに伴い、周辺機器であるNASもニーズに合った変化を求められてきました。I-O DATA 様においても、5～6年の周期で定期的に「LAN DISK」の後継品開発を行うことで、多様化するニーズに応え続けてきています。

今回当社が受託した開発は「LAN DISK」の後継品開発を見据えた、現行NASにおける管理画面GUI（Graphical User Interface）の刷新です。

「GUIの刷新では、最新トレンドも取り入れたかったため、自社だけではなく、専門スキルを有する外部パートナーの力を借りたいと考えました」（稲田様）

GUIの開発にあたってI-O DATA 様は、お客様のご意見から見えた現行NASの問題点を解消し、現在主流となっている直感的なWEB UIを実現させたいと考えていました。

お客様のフィードバックから見えた現行NASの問題点

• サイト構造が複雑で、何の設定項目があるのかがわかりにくい
• 設定反映に要する時間がわかりにくい
• 画面遷移には戻るボタンの多用が必要で、設定に時間がかかる
• 電源OFFなどの基本機能もメニューがあるページの階層が深く、操作に時間がかかる

加えて、I-O DATA 様がNASのGUIのフロントエンド開発を外部委託するのは今回が初めて。そのため、フロントエンド開発における実績があり、プロジェクトを先導できる経験豊富なパートナーを必要としていました。

UIフレームワークを用いた開発でコストダウンを実現、豊富な開発事例によって得られた信頼

そのような折、I-O DATA 様の別部署における案件でアプリ周りの開発受託をしていた繋がりから、当社へ相談していただきました。

当社は、I-O DATA 様が社内で定めているUIガイドラインである「I-Oスタイルガイド」と、現行GUIの改善点を反映させた仕様書を元に提案を実施。開発工数や費用を下げるため、一からデザインを行うのではなく、以下の最新のUI技術とUIフレームワークを使用した開発を提案しました。

• Nuxt3
• TypeScript
• Ant Design Vue

提案を受けて、当社を選定いただいた理由については、以下のお言葉をいただいています。

「複数社へ案件相談や見積依頼をしておりましたが、弊社の別の部署で開発実績があった点や、UIフレームワークを使った提案でコストを抑えていただいた点など、具体的に要件を詰めていくなかで我々が求める条件に一番マッチしていたことから、Ragate様をパートナーに選定させていただきました」（稲田様）
「豊富な過去実績や経験に基づいた提案内容から、技術的に安心してお任せできる感触があったことも大きなポイントだったと思います」（中林様）

Figmaを用いたプロトタイピングによるユーザー体験を社内へ共有、理想のGUI画面の実現に向けて多数の改善を重ねた

プロジェクト進行にあたってはI-O DATA 様に実装後のイメージを持っていただき、認識の齟齬を極力なくせるよう、過去の開発事例を参考にFigmaを使用したプロトタイピングによるユーザー体験の共有を実施。Figma作成は、「I-Oスタイルガイド」に則り実施しました。これにより、視覚的にわかりやすくイメージ共有ができたため、開発にかかわるご担当者はもちろん、非開発部門の方とも連携しながら、スムーズに進めることができました。

「特に、お客様からさまざまな声を直接受け取るCS部門からは、お客様の要望を余さず反映させたデザインにするために修正希望が多数出ました。多くのフィードバックに対してもFigmaのコメント機能を使うことによって、社内やRagate様へ手軽に共有でき、議論を進められたと思います。また、そのようなフィードバックに対しても、スピーディかつ柔軟に対応していただけたのでありがたかったです」（稲田様）

フロントエンド開発は、「I-Oスタイルガイド」に則り作成したFigmaをもとに、UIフレームワークであるAnt Design VueとNuxtjs、TypeScriptを用いて行いました。その後、開発したGUIを、I-O DATA 様が開発したAPIへ結合しました。

成果物として納品させていただいたのは、実装したUIプログラムのほか、それに関するテスト結果やカスタマイズ方法に関するドキュメントなどです。

なお、フロントエンド開発においては、以下のような柔軟な対応を心がけました。

• 当社の開発時に、I-O DATA 様にてAPI開発が行われていたため、APIのモック対応を実施
• 非同期通信中のローディングなど、仕様として決めていなかったアニメーションに標準対応
• フロントエンド開発中に、I-O DATA 様が開発したAPIに変更が入ったが、その仕様変更に柔軟に対応

管理画面の検索性や視認性が改善され、操作の高速化を体感

今回開発したGUIは、管理画面のサイドメニュー項目をツリー状にまとめたうえで、二階層ですべての情報にアクセスできるよう情報構造を整理しました。結果、I-O DATA 様のご要望に合った直感的でわかりやすいGUIを実現。

I-O DATA 様からは素晴らしいお言葉をいただいており、確かな成果を実感いただいている様子が伺えました。

• 設定項目の検索性や視認性が改善されました
• 我々（I-O DATA 様）としては、設定操作が体感的にかなり高速化されたと感じています

NASの管理者にとっての利便性の向上を目指す

I-O DATA 様は、今回開発したNAS管理画面GUIを基に「LAN DISK」シリーズの後継機を開発予定。NASの管理者にとっての利便性の維持向上を実現していきます。将来的な構想としては、独自開発している「Linuxベース OSモデル」製品に関して、今回開発したGUIで統一していくことを検討しているそうです。

「本プロジェクトにおけるNASのフロントエンド及びバックエンドの具体的な実装やアップデート開発における、専門家としてのアドバイスやフォローを引き続きよろしくお願いいたします」（中林様・稲田様）

本プロジェクトでは、I-O DATA 様のご要望に応じた、NAS管理画面の直感的なGUIへの刷新はもちろん、豊富な実績とFigmaを使用したプロトタイピングにより、プロジェクト進行面でも信頼を得て開発を進められたと振り返っています。今後もお客様に寄り添い、プロジェクトに合った提案活動を続けていきます。