Views で画面を整える
見やすく、迷いにくく、運用しやすい UI を作る
データや機能がそろっていても、画面が見づらいと現場では使われません。 この章では Views の役割、 Column Order、 Show_If、 そして Slice を通じて、 「必要な情報だけを、必要な場面で見せる」考え方を学びます。
第5章:同じデータを、目的に応じた見せ方へ変える
この章では、1つのテーブルに対して複数の View を作る考え方と、 表示順や表示条件を整える方法を学びます。 さらに、Slice を使って「見せる対象そのものを絞る」 という一歩進んだ設計も押さえます。
- View type の違いを説明できる
- Column Order の意図を持って並べられる
- Show_If で不要項目を隠せる
- Slice で用途別の画面を分けられる
Views の基本
AppSheet では、1つのテーブルに対して複数の View を作れます。
たとえば同じ「備品テーブル」でも、 一覧で比較したい場面、1件を詳細に確認したい場面、入力したい場面では、 適した画面の形が違います。
つまり View は単なる見た目ではなく、 ユーザーがその場面で何をしたいか を実現するための設計です。
多くの件数を横並びで確認しやすく、ステータスや期限の比較に強い表示です。
1件分を上から順に読めるため、申請内容や顧客詳細の確認に向いています。
何を先に入力するか、どの項目を隠すかがユーザー体験を大きく左右します。
View type の選び方
Table
ステータス、期限、担当者などを比較したい時に強い基本形です。
Deck / Card
文字量がやや多い情報を、カード型で視覚的に整理したい時に向きます。
Detail
1件を詳しく読み込ませたい時に使います。内部情報を見せる順番も重要です。
Form
入力順、必須項目、Show_If、初期値の設計が使いやすさを決めます。
備品管理アプリならどう選ぶか
在庫状況を比較しやすい Table が基本。画像重視なら Deck も候補です。
購入日、管理番号、貸出先などを落ち着いて確認するなら Detail が向きます。
新規登録や返却処理など、入力の順序が重要な場面では Form を使います。
Column Order と非表示の考え方
全部見せると、ユーザーは迷う
システム用の列や補助列まで見せると、ユーザーは「何を見ればよいか」が分かりにくくなります。
必要な情報を、理解しやすい順に並べる
まず知りたい情報から順に置くことで、画面の理解速度が一気に上がります。
備品名、案件名、氏名など、対象を一瞬で判別できる情報です。
状態、期限、担当者など、判断や次の行動に必要な情報です。
ID、内部コード、更新日時など、ユーザーが毎回見ない情報です。
Show_If による動的表示
Form で特に重要なのが、 不要な項目を最初から見せないことです。
そのために使うのが Show_If です。 条件が満たされた時だけ表示することで、フォームを短く、迷いにくくできます。
フォームの出し分けイメージ
該当しない人に不要な項目を見せないだけで、入力画面の心理的負担は大きく減ります。
Slice の使い方
Slice は「見せる対象を絞った仮想テーブル」
Slice とは、元のテーブルの中から 特定の条件に合う行だけ、 あるいは 特定の列だけ を取り出して作る、用途別のデータセットです。
View は「見せ方」を変える機能ですが、 Slice はその前段階で 何を見せるか を絞り込む機能です。
そのため、一覧を分けたい時や、特定用途のフォームを作りたい時に非常に有効です。
備品一覧から「貸出中だけ」を切り出す
Slice が向いている場面
利用可能一覧、貸出中一覧、修理中一覧のように、同じテーブルを用途別に分けられます。
新規登録用フォームでは不要な列を除いた Slice を使うと、フォームを短くできます。
担当者ごとの案件一覧など、表示対象をしぼった View の土台として使えます。
行を絞る条件式の例
これで「Status が 貸出中 の行だけ」を対象にした Slice を作れます。 その Slice を元に Table View を作れば、 「貸出中一覧」という専用画面が完成します。
- Slice は元データを増やす機能ではなく、見せる範囲を整理する機能です。
- 条件が複雑になりすぎると管理が分かりにくくなるため、役割ごとに名前を分けるのが大切です。
Table から Deck に変える、Detail を追加する、という時は View の役割です。
Column Order、View type、表示名の調整は View 側で行います。
貸出中だけ、期限切れだけ、担当者本人の案件だけ、という時は Slice が向いています。
不要列を除いた入力専用の Slice を作ると、フォームが短くなります。
迷わない画面設計の原則
良い画面設計
- ・必要な情報だけを出している
- ・見る順番、入力順に並んでいる
- ・条件で不要項目を隠している
- ・一覧 / 詳細 / 入力 の役割が分かれている
- ・用途別に Slice でデータ範囲も整理されている
悪い画面設計
- ・全部の列をそのまま見せている
- ・入力項目が長く、何をすればよいか分からない
- ・一覧画面なのに詳細向け情報を詰め込みすぎている
- ・同じテーブルなのに用途別の出し分けがない
- ・必要な人に必要な情報だけを見せる発想がない
初心者がまず意識したいこと
見せられる情報と、見せるべき情報は違います。
理解順・入力順で並べるだけで使いやすさが変わります。
Show_If で不要な項目を出さないことが重要です。
用途ごとに Slice を使うと、画面の目的が明確になります。