Discussion
全てAIでコードを書き操作しながら作っています。
Visual Studioで業務アプリを作り始めてから7ヶ月位なのですが一先ず試験運用までしています。現在見た目を良くすることに焦点を置きやっていますがどの様な見せ方があるのかもが分かりません現在左側に後で追加修正等がよく入る項目等をtxt等で置き右側にPDF Panelを置いてそこにtxt等が入っておりクリックで専用Formを立ち上げて入力Panelに反映させ最終確認がしやすいようには、してみたのですが他にどの様な見せ方がありますか？エンジニア等の知り合いも居ないので聞けませんどなたかアドバイスお願いします。
まず、未経験から7か月で実際に試験運用まで持っていったのはかなり大きな成果だと思います。
ただ、業務アプリのUIは「見た目の良さ」よりも、
入力ミスを減らせるか
作業時間を短縮できるか
修正依頼に耐えられるか
のほうが重要だったりします。
お話を読む限り、
左側に入力項目一覧
右側にPDFプレビュー
項目クリックで入力フォーム表示
という構成とのことですが、実はこれは業務システムではよくある構成で、かなり理にかなっています。
個人的に追加を検討するなら
① 入力状況を色で見せる
例えば左の項目一覧を
未入力 → 赤
入力済み → 緑
確認済み → 青
のようにする。
□ 顧客名
✓ 住所
✓ 電話番号
△ 添付資料
みたいなイメージです。
利用者は
「どこが終わっていないか」
を一瞬で把握できます。
② PDF側をクリックすると逆引き
今は
項目
↓
入力
↓
PDF反映
だと思いますが、
PDF内の項目をクリックすると
対応する入力欄へ飛ぶ
ようにするとかなり便利です。
例えば住所部分をクリックすると
住所入力フォームが開く。
③ ステップ形式
項目が多い場合は
のようなウィザード形式もあります。
特に初心者向け業務では効果的です。
④ エラー箇所一覧
画面上部に
入力エラー 3件
・住所未入力
・契約日不正
・担当者未選択
を表示する。
ユーザーは探し回らなくて済みます。
⑤ PDFプレビューへの強調表示
入力中の項目をPDF側でハイライト。
例えば
住所入力中
↓
PDFの住所欄が黄色
これが意外と便利です。
見た目を良くしたいなら
業務アプリは派手さよりも
余白
整列
色数を減らす
が重要です。
初心者がよくやる失敗は
ボタン色を増やす
枠線を増やす
グラデーションを付ける
ですが、
実際は
白
薄いグレー
アクセントカラー1色
くらいが見やすいです。
AIで開発しているなら
今後はUIよりも
ログ機能
自動バックアップ
Undo（元に戻す）
変更履歴
エラーレポート
に力を入れることをおすすめします。
試験運用に入ると、
利用者からは
「ボタンの色を変えてほしい」
より
「間違って消したので戻したい」
という要望の方が圧倒的に多くなります。
現在別の方からのアドバイスでカラー等少し変更したのでこうなっています。
積込情報や降し情報 車両情報等は別フォーム（ポップアップで）表示させ積込降ろしは依頼先ごとで絞込み選択入力直接入力としております。修正は番号で抽出該当の部分をclickするとformが立ち上がり修正が可能としています。「間違って消したので戻したい」ここは考えていませんでしたありがとうございます。後は重複checkとして確認するformをポップアップさせているぐらいですかね。
見た目のよさでいえば視線誘導と強調・認知負荷のバランスだと思います。
確認が必要な部分や操作するボタンが自然と目に入るような配置であれば利用者が嬉しいはずです。
特に重要なボタンや通知は意識しなくても気づく派手さが必要です。
リスト表示の境界線一つとっても、単純にくっきりとした線で引いた場合、量が多いと認知負荷がかかって目がチカチカします。
薄い色の線で引けば境界はわかるけど認知負荷は低いというデザインが可能になります。
このように利用者にとって何が嬉しいかを突き詰めていくことが、見た目の良さにつながるのではと思います。
AI利用との事について、私の記事でClaudeの小手先テクを紹介しているのでよければぜひご一読ください。
ありがとうございます。見て参考にさせてもらいます。
確かにAIは暴走します。先読みなのでしょうがなおさなくてもいい部分まで直させようとしたりがたまにあり何度か繰り返してたりがあえりますよね！よくYouTubeなどで見ていましたが意味がいまいちわからなく質問の仕方や説明の仕方など色々試しながらやっていましたので参考にさせていただきます。
