はじめに
画面設計後、実装段階で仕様の漏れに気づいたという場面がいくつかありました。
上記の経験から学んだことを記事にしたいと思います。
スマホアプリを開発しているので、スマホアプリ固有の箇所もあるかと思いますが、大体はデスクトップアプリ、Webアプリにも使える内容だと思います。
仕様検討、画面設計、デザインの段階でチェックリストとして使ればいいなと考えています。
気づいたことがあったら、順次、追記していきます。
UIパーツ別
まず部品別（ラベルとかテキストボックスとか）で考慮すべきことを列挙していきます。
仕様検討・デザイン・画面設計時、部品の種別を意識して書いた方がチェックしやすいかと思います。
| 部品名 | 考慮ポイント |
|---|---|
| ラベル | 文字数が長い場合どうするか |
| 数値の場合、単位があるかどうか | |
| 数値の場合、カンマ区切りにするか | |
| 数値の場合、最大桁数をどうするか | |
| 数値の場合、特別な表示形式があるか | |
| テキストボックス | バリデーションはあるか |
| 文字数の下限と上限は何文字か | |
| 入力時はデザインが変わるか | |
| 未入力時にプレースホルダーが必要か | |
| エラー時のデザイン | |
| ボタン | Enable, Disableの条件 |
| 文字列が長い場合どうするか | |
| コンボボックス | 初期値は選択状態か、未選択状態か |
| 表示する項目は何か | |
| 表示する項目の並び順はどうするか | |
| 未選択状態があれば、未選択状態に戻す手段は必要か | |
| リスト | 並び順は何か |
| フィルタリングはあるか | |
| ページングは必要か | |
| 画像 | アプリ埋め込みか、ネットワークから取得するか |
| ネットワークから取得する場合、エラーになったらどうするか | |
| ネットワークから取得する場合、キャッシュしておくか、表示のたびに取得するか | |
| ダイアログ | ダイアログを閉じれるか、閉じれないか |
| ダイアログを閉じた時に表示元に何か値を返すか | |
| 画面全体 | スクロールが必要そうか |
| エラー表示はどうするか | |
| ローディング表示はどうするか |
補足
以下で、UIパーツ別に補足を記載します。
ラベル
文字列の表示に使用するUIパーツです。
Flutterでいうと、Textになります。
文字数が長い場合どうするか決めておく
文字数が長くなった場合どうするか決めておくといいです。
以下のパターンになるかと思います。
- 折り返す
- 省略表示(...)にする
- 表示の幅に応じてフォントサイズを調整する
- 表示できない部分は見切れてOK
数値の場合
数値を表示する場合、いくつか決めておく確認点があります。
単位
単位があるか、ないかを確認します。
カンマ区切り
3桁ごとにカンマを挿入するか決めます。
最大桁数
桁数が多いと、表示が見切れるので、どのくらいまで表示するか確認します。
特別な表示
マイナスの場合は赤字にするとか、漢数字表記にするとか、特別な表示にする場合もあると思うので、確認しておきます。
テキストボックス
文字列の表示に使用するUIパーツです。
Flutterでいうと、TextFieldになります。
確認する項目としては、バリデーションや文字数制限。
あとは以下のデザインになります。
- 入力時はデザインが変わるか
テキスト入力状態で、テキストの枠の色を変更するなどがよくあるデザインだと思います。 - 未入力時にプレースホルダーが必要か
これは確認不要かもしれませんが、気になる場合は聞いておきましょう - エラー時のデザイン
エラー時のデザインがなければ、確認しておきます。
リスト
項目を一覧で表示する際に使用するUIパーツです。
Flutterなら、ListViewで実装することが多いかと思います。
確認することとしては、以下になります。
- 並び順はどうするか
項目の並び順は何を基準にするかは事前に確認が必要です。 - ページングは必要か
項目が多い場合、パフォーマンス・ユーザビリティの問題などで、ページングが必要かを確認します。
画像
画像を表示する場合、まずアプリ埋め込みか、ネットワークから取得が必要かを確認します。
ネットワークから取得する場合は以下の検討も必要です。
- ローディング中にどういう表示にするか
画面全体をローディング表示するか、画像だけローディング表示にするか、何も表示しないかなどを決める必要があります。 - エラーになった場合、どのような表示するか
- エラーになった場合、再読み込みはどうするか
- 画像はキャッシュしておくか
アプリ初回起動時などにリソースとしてダウンロードするか
起動後の1度目の表示でキャッシュしておき、2度目以降はキャッシュを表示する（この場合キャッシュを破棄して再取得するタイミングの検討も必要かと思います）
ダイアログ
ダイアログで確認する必要があるのは以下です。
- ダイアログが閉じるか、閉じないか（閉じてはいけない場合、スマホアプリだとバックボタンでも閉じないようにする必要があります）
- 閉じた場合、表示元に何らかの結果を返す必要があるか（入力ダイアログだったり、OK・キャンセルボタンがあって、OKの場合は何か処理を行う場合は、何らかの結果を返す必要があります）
画面全体
画面全体として考慮が必要なのは、以下だと考えています。
- スクロールが必要そうか
Flutterの場合、表示する端末によって、高さが足りていないと、見切れる場合があります。
なので、スクロールが必要そうかは確認しておいた方が良いと思います（おそらく、テストの時に気づくと思いますが） - ローディング、エラー表示
ローディングやエラー表示についても画面全体で表示するのか、画面のパーツで表示するのかを確認しておいたほうが良いです。デザイナーが気づかなくても、開発者目線でローディングやエラーが必要な箇所もありますので、必要なところは確認しましょう
おわりに
記載中の点以外にも気づきがあれば、記載していこうと思います。
（アニメーションや、ユーザー操作に関する観点が抜けていると思いましたので、後日追記したいと思います）