半年ほどかかっていた試作を、約1ヶ月で。AI×UIデザインで進める業務システムのWeb化

業務システムをWeb化したい。でも、画面数が多く、使い勝手をどう見直せばよいか分からない。仕様を詰めようとしても、完成後のイメージが共有できず、検討が進まない。

そんなプロジェクトで力を発揮するのが、実際に触って確かめられるプロトタイプです。

GROW UPでは現在、会計システムをはじめとしたいくつかの業務システムのWebアプリ化にあたり、プロトタイプ制作とUIデザイン、HTML・CSSコーディングを担当しています。

今回の制作では、Claudeを活用。これまでの制作経験では半年ほどかかっていたような規模のプロトタイプを、約1ヶ月で形にしました。画面や操作のイメージを早い段階で共有できる状態をつくり、リニューアルに向けた検討を進めています。

業務の流れを、使いやすい画面にする

会計システムのように、日々繰り返し使う業務ツールでは、情報の見やすさや操作の分かりやすさが大切になります。

入力項目は、作業する順番に並んでいるか。確認したい数字は、探さずに見つかるか。次に押すボタンは、迷わず分かるか。

さらに、初めて使う人への分かりやすさと、使い慣れた人の作業のしやすさ。その両方を考える必要があります。

GROW UPがUIデザインで大切にしているのは、業務の流れと画面の関係を整理することです。必要な情報の優先順位を考え、メニューや画面遷移、入力・確認の流れまで含めて設計していきます。

仕様書や静止画のデザインだけでは、実際の使い心地まで想像するのが難しいことがあります。

メニューから目的の画面に進み、項目を入力し、内容を確認する。こうした一連の操作を試せると、「この情報は同じ画面にあったほうがよい」「ここで前の画面に戻るのは手間がかかる」といった検討がしやすくなります。

今回のプロトタイプも、画面構成や主要な操作を、サンプルデータを使って確認するためのものです。

約1ヶ月で形にしたのは、この検討用のプロトタイプ。現在は、そこから本制作に向けたUIデザインやコーディングへとつなげるプロジェクトが進行しています。

早い段階で動く画面を共有できることは、関係者が同じイメージを持ち、次の判断をするための助けになります。

今回、Claudeを活用したのは、画面や動作を試作し、修正を重ねる工程です。

アイデアを動く画面にするまでの時間を短くできると、複数の構成を試したり、画面を見ながら改善点を考えたりしやすくなります。

その過程で、何を見せるか、どの操作を優先するか、画面全体のルールをどう揃えるかを判断するのが、デザイナーの役割です。

たとえば、入力欄やボタンの位置、文字の大きさ、情報のまとまり方。一つひとつの判断を積み重ねて、業務に合ったUIへと整えていきます。

AIで制作を加速し、デザインで使いやすさを詰める。

GROW UPでは、この組み合わせによって、プロジェクトを前に進めるUI制作に取り組んでいます。

GROW UPでは、業務システムやSaaSプロダクトの画面構成の検討から、動作を確認できるプロトタイプ、UIデザイン、HTML・CSSコーディングまで対応します。

複数の画面で使うボタンや入力欄、文字、色などのルールを揃える、共通デザインシステムの設計にも取り組んでいます。画面数が多いシステムでも、操作や見た目の一貫性を保ちながら制作を進めるためです。

システム開発会社様や社内の開発チームと連携し、業務仕様を、利用者が触れる画面へと落とし込んでいきます。

「機能や開発体制はあるけれど、UIを相談できる相手がほしい」という段階からも、ご相談いただけます。

こうした課題をお持ちでしたら、GROW UPへご相談ください。

現在お使いの画面や、使いにくいと感じている点、これから実現したいことを伺いながら、必要な制作範囲と進め方をご提案します。

AI×CREATIVE
より速く、より深く、より成果へ。

使う人に届くUIを、動く画面から一緒につくっていきます。