• Web

一般社団法人 農業農村整備情報総合センター 様

制作領域:UI/UX|デザイン|フロントエンド|バックエンド|設計|運用保守

一般社団法人 農業農村整備情報総合センター(ARIC)様の技術情報データベースサイト+管理システムを制作しました。
また、制作後のアップデート依頼やサーバー・システムの運用保守も定常運用にて実施しております。

▼ご依頼の背景
情報データベースサイトを運用されておりましたが、いくつかの課題がありフルリニューアルに向け一新できないかというご相談をいただきました。

▼ご相談の内容
以下、既存サイトの課題としてご相談いただいた内容になります。

・サイトデザインが古く、一覧や詳細の表示情報も実登録情報の一部しか表示できないため、画面設計とデザインを含めて見やすく変えていきたい
・情報検索がうまく動いておらず、検索処理も重いため改善したい
・ユーザーからの申請、更新、削除などの情報を、Excelデータや紙で共有いただき、手動でデータを直接セットするような仕組みになっているためデジタル化したい(DX)
・ロゴも刷新したい。それに付随してトンマナも合わせて世界観を変えていきたい
・ユーザーの掲載期限の管理や請求が自動連携されるような仕組みを取り入れたい

▼制作範囲の策定
状況整理の上、今後の運用も加味しペーパーレスにすることで、利便性の向上やコミュニケーションコストの削減を図るべく、クライアント様側とユーザー側がWebシステムを通じてやり取りが進む様な形で全体整理をしていきました。

・既存の技術情報データベースサイトのリニューアルと合わせて、クライアント管理システムも制作
・技術情報データベースサイトに会員登録・マイページの機能を用意し、紙でやり取りしていたものを管理システムと連携させることによって全てデジタル化
・ユーザーの情報も一元管理できるように登録・申請・更新の仕組みを導入
・ユーザーの方で紙・Excelに記述してからクライアント様側でデータ化していたものを直接入力・登録・申請できるようにし、ユーザー側で管理できるよう仕組み化
・有効期限や掲載更新期間などの制御を自動化し、ヒューマンエラーが起きづらい環境づくり
・既存の技術情報データを移行し元の機能を最大限活かせるように
・検索機能の速度・利便性を向上させ、PDFやドキュメントファイルを文字解析し検索条件にヒットできるように
・既存の技術情報データベースサイトをロゴから一新するため、デザイン、構成から見直し見やすく綺麗に

整理の結果、単純なリニューアルではなく既存データとカテゴリ構造を活かす部分を除き、全てサービス新規作成のイメージで進める形といたしました。
構成としては、大きく「ユーザー側の技術情報データベースサイト」と「クライアント様側の管理システム」の2つのシステムを制作していく形となりました。

【制作画面・機能】
<技術情報データベースサイト>
・ロゴリニューアルに合わせたトンマナ、デザインの制作
・HOME画面、技術詳細の変更
・検索機能の変更
・企業登録機能の追加
・ログイン、マイページ、パスワードリマインダー機能の追加
・技術情報の登録、編集、削除、申請機能の追加

<管理システム>
・技術情報の登録一覧・検索、技術情報の詳細・編集・削除機能
・技術情報の申請一覧・検索、申請情報詳細、修正依頼、承認・非承認機能
・企業情報一覧、企業情報詳細・編集・削除機能
・請求管理、有効期限での絞り込み・メール送信
・4種類の書類印刷機能(PDF出力)
・入金管理、請求額入力・取り込み処理

【インフラ設定・運用保守】
・サーバー構築
・旧データの取り込み
・ドメイン移管
・バッチなどでの自動更新チェック処理

▼画面構成
まずクライアント様に機能を元にしたイメージを持っていただくために、画面構成図(遷移図)を作成いたしました。
そこから各画面の構成要素を照らし合わせ、仕様イメージにズレがないことを確認しながら、UI/UXワイヤーの作成へと進めていきました。

▼デザイン(トンマナの検討)
まずデザインを先行して既存サイトからのキーカラーを参考にトンマナを提案。
ロゴの刷新自体は当初別の制作者様へ依頼をされていたこともあり、決まったロゴから全体のトンマナを最終提案し調整していきました。

▼UI/UX
画面構成・設計で起こされた情報を元に、UI/UX観点で更にブラッシュアップを行ってまいりました。

<技術情報データベースサイト>
ユーザーサイトは既存のサイトがすでに存在していましたので、必要な項目を踏襲しながら検討を進めました。
一般ユーザーが見る検索サイトと、会員がアクセスでき技術情報の登録・更新していくマイページの2種類にサイトを分けることになりました。そのため、2つを差別化するためにデザインに少し差異を出して、それぞれ調整していきました。

<管理システム>
新規作成だったこともあり、事前に確認調整を進めていた画面構成・設計情報を元に、UI/UX観点で構成を調整しながらワイヤーの作成とデザインをいたしました。
特に、メニュー構成や各機能を実施できる配置など最適な構成とデザインへの落とし込みを意識しながら進めました。

▼設計
既存サイトのデータを移行する必要があり、踏襲すべきテーブル情報と新規作成、テーブルにカラム構成を追加する所などを現状構成の解析をしながら設計を進めていきました。
特に、今回は新しい画面や機能が多く増えていくため、承認周りのステータスの検討と提案から、各画面機能に最適なテーブル構成を意識し設計していきました。

▼インフラ構築
ご利用希望のサーバーがクライアント様のサーバーでしたので、そちらをベースに必要事項の提案と構築を行いました。

▼開発
「ユーザー側の技術情報データベースサイト」と「クライアント様側の管理システム」の2つをプロジェクト管理するように、別プロジェクト群で開発・コード管理を実施していきました。
その中でもステータスの変更周りはそれぞれから適切にリレーションで申請・承認などが行われるため、ステータスフロー図をまとめながら、仕様漏れや不具合に繋がらないように注意をしながら実装を進めていきました。
また、以降の運用もしやすいよう、コードとシステムが見通しやすいクラス設計を心がけました。

▼テストと検品
非常に多くのステータスや、期限管理などが存在するため、QA担当者の方で検証項目のパターン出しを多くし、テストケースを厚く作成いたしました。
・「ユーザー側の技術情報データベースサイト」側で約2,700パターン
・「クライアント様側の管理システム」側で約2,400パターン

上記テストケースを元にテストを網羅的に実施。
実装後も修正対応やデザイン観点などの修正も400パターンほど検証追加し、不具合や理想のデザインへとしっかり進めさせていただきました。

▼操作手順マニュアルの作成
テスト完了後、ユーザー側、管理側ともに利用導入がしやすいようにそれぞれの視点での利用マニュアル・操作手順書を作成いたしました。
・農業農村整備⺠間技術情報データベース (ユーザー管理) 操作マニュアル
・NNTD管理画面 操作手順書

▼システムパンフレットの制作
大幅リニューアルに伴い、ユーザー告知用パンフレットの制作もご依頼いただきました。

▼ドメイン移管と本番リリース、運用保守
旧サイトのDNS切り替えを実施、今回新設の本番環境への切り替えと、旧サイトサーバーのクローズをもって、無事にリリース完了いたしました。
以降も定常的に利用更新のご相談、システム保守とサーバー保守のご依頼をいただき日々運用更新を続けております。

農業農村整備民間技術情報データベース(NNTD)