業務システムのUI設計に関するTips
こんにちは。Sun*でデザイナーをしている、sugamonです。
主にクライアントワークのUIデザインに携わっています。
今年はあちこち旅行に出かけたのですが、一番のハイライトは、夜の鬼怒川温泉で、外灯なしの山道、荷物は風呂道具のみ、スマホ残バッテリー3%の状態で迷子になったことです。
無事生還しましたが、温泉は閉まってました。
さて、Sun*では0→1フェーズの業務システム開発、というプロジェクトが多くあります。
「大まかな流れを知りたい」といった方向けに、要件定義〜ワイヤーフレーム作成におけるTipsを、私自身の振り返りも含めて書いてみようと思います。
最後に見落としがちなポイントもあるので、慣れている方はこちらだけでもどうぞ。
少しでもお役に立てることがあれば嬉しいです。
この記事はSun* Advent Calendar 2023 9日目の記事です。
就活マインドで業務理解
業務システムでは、一般市民の生活とはかけ離れた専門用語が飛び交うことが多いです。
共通言語を持つためにも、クライアントが日々どんな業務にあたっているか、少しでも知っておくと安心です。
おすすめなのはこの2つ。
業界の専門書籍を読む
自分が全く知らない業界を知りたいときにおすすめです。
就活生みたいですね。
特に「XX業界のしくみがわかる！」的なものは、業界内の企業地図や、業界独特の用語の説明などがあるので、大枠が掴みやすいです。
未経験者向けの求人情報を見る
業務内容を簡潔に説明されていることがあるので、どんな業務か把握しやすいです。
採用像からユーザー層や業務内容を推察します。
最近は ”担当者の一日の流れ” 的な採用記事もよくあるので、具体的にイメージしやすいです。
身近なものから競合調査
クライアントの競合サービスや、同業他社について調べます。
特に業務システムは法人向けが多く、実際の契約や商談に進まないとプロダクトに触れないことが多いです。
競合調査に苦労することもあります。
そうした場合は、代わりにクライアントの業務や業界に関連するサービスを参考にすることもあります。
直結はせずとも、参考になるものはたくさんあります。
何気なく視界に入るものに、何か使えるものはないかな、という目線を持って過ごしてみると、思いがけないところにヒントが見つかります。
画面や機能のリストアップ
考えられる画面や機能を書き出します。
Excelやスプレットシートを使い、画面を大項目、機能を小項目に分類します。Miroなど、使い慣れたツールで良いと思います。
最初は大きい枠組みで書き起こして、おおよそ埋まったら細かい箇所をリストアップします。
1画面内に複数の機能を持つ場合がありますが、この段階では、1画面に対して1つの機能、というのがシンプルで設計しやすいです。
いざワイヤーフレーム作成
デザインツールを使い、画面と内容を書き起こします。集めた情報をワイヤーフレームに流し込んでいくイメージです。
推奨画面サイズを考える
ここで気にしたいのが推奨画面サイズです。
クライアントが使用しているPCのモニタサイズを確認したり、シェア率の高いモニタサイズを確認するなどして、選定を行います。
パーツを画面へ組み込む
画面項目ができたら、入力フォームやボタン、ヘッダーなどの主なパーツを組み込んでいきます。
CSSフレームワークのコンポーネント集を活用すると、ゼロから書き起こす手間が省けます。
Material DesignやAnt Designなどをよく使います。
もちろん、スピード重視で書き起こしてしまうのも手です。
デザイン作業の準備をしておく
ここはUI寄りの話ですが、ワイヤーフレーム段階で考慮できるとスムーズです。複数名のデザイナーとも協業しやすく、開発チームへの連携もしやすいです。
見落としがちなポイントいろいろ
見落としがち度：★★★★★
CRUDの観点を持ってヌケモレがないかチェック
CRUDとは、システムに必要な主な4つの機能「Create（生成）」「Read（読み取り）」「Update（更新）」「Delete（削除）」を指します。
一つのデータに対し、この4つの機能が必要になる場合が多いです。
例えばシステム内に「テナント」というデータが存在する場合、
「新規登録」「詳細画面」「編集画面」「削除機能」はあるか？
といった感じでチェックしていきます。
私は削除機能を忘れがちです。
ユーザビリティUP度：★★★★★
ライティングは適切か
プロダクト内の案内文や説明文をデザイナーが書き起こすことも多いです。
チェックが甘いと、意外とわかりづらい文章になることも。
言葉の表記揺れはないか、漢字・かな、文末のですます調・体言止めなど、表現の一貫性も気をつけたいです。
わかりやすい日本語表現は、公的サービスや大企業のアナウンスが参考になります。
視認性UP度：★★★★
テーブルレイアウトの項目を調整する
情報量が多いと、テーブルに項目を詰め込み、横長になることが多いです。
横スクロールは操作性が下がることもあるので、できれば避けたいです。
ここが整理できると、表組みが格段に見やすくなります。
意外な落とし穴度：★★★
入力項目や入力フォームの形式、バリデーションメッセージを考える
入力項目のボリュームや、フォームの入力形式がユーザーの負担にならないか、配慮したいところです。
特にエラーやバリデーションメッセージは改行が入ることもあるので、要注意ですね。
混乱が落ち着く度：★★★★
業務フローの整理
複雑な業務フローは具体的なイメージを持ちづらく、メンバー内で認識齟齬が起こることがあります。
そういった場合は、多少遠回りに感じても、業務フロー図を書き起こして整理し、認識のすり合わせを行います。
画面増える度：★★★
ユーザー権限の場合分けを考慮する
特に業務システムでは「担当者」「責任者」の権限ごとに、一部画面の閲覧機能や編集機能を制限するケースが多いです。
「この画面は権限ごとに目的や使用シーンが異なるか？」という観点で確認すると、項目の出し分けや不要な機能が見えてくることがあります。
費用対効果：★★★★
画面項目を具体的にする
競合サービスを参考に、実際の使用シーンに近いテキストを入れます。
「XXX〜…」などダミーテキストを入れることが多いですが、ここが具体的だとワイヤーフレームの精度が上がります。…大変なんですが、コスパはいいと思いますよ。AIを活用するのもいいですよね。
可視化することで、他のPJメンバーやクライアントとも意見交換がしやすくなります。「こんなに短文/長文なんだ」という意外な発見もあります。
さらに、項目ごとの最大表示文字数や最小表示文字数も判断しやすいです。
値のボリュームの見通しがつくので、以降の画面レイアウトも捗ります。
意外な落とし穴度：★★★★
ユーザーの環境下で指定色が表示できるか配慮する
デザイナーがよく使うMacのモニタは高精細なため、Windowsでは見えづらい色もあり、配慮が必要です。
特にMac上の薄いグレーはWindowsでは白に見えることがあります。
レビューで指摘される度：★★★★
データのイレギュラーな状態変化をカバーできているか考える
「XXの場合、どう表示するか？」といった観点で画面の表示分岐を考えます。
イレギュラーがあることを意識するだけでも、見落としを拾えたりします。
考慮漏れをあらかじめ炙り出せていると、レビューで突っ込まれることも減るはず。
作ったことのない画面を作る
これまで既に世に出ているサービスを元に考えてきましたが、クライアントのニーズによっては、既存サービスではなかなか無いような画面設計を考えなくてはならない場面もあります。
そうした場合、ユーザーの目的やアクションに立ち返って考えてみます。
見た目の美しさを優先させると、つい必要な情報を減らしたり、増やしすぎたりしてしまうことがありますが、ユーザーの目的から考えると、アイデアが出ることもあります。
迷ったときは、パターンを絞って作り、それぞれメリットとデメリットを書き出し、メンバーにフィードバックをもらうのも良いですね。
最終的には、ユーザーになりきってみて、「本当に使いやすいか？」と自問自答するのも良いかもしれません。
最後に
長い文章を最後まで読んでくださり、ありがとうございました。
明確な正解がなく苦労することもありますが、素敵なサービスを作って、
誰かのhappyに繋がったら最高ですね。
明日はSakaguchiさんのIT人材に関する記事です！
引き続きSun* Advent Calendar 2023 をお楽しみください！