基本編 / 第5章
Chapter 05 / 08

Views で画面を整える
見やすく、迷いにくく、運用しやすい UI を作る

データや機能がそろっていても、画面が見づらいと現場では使われません。 この章では Views の役割Column OrderShow_If、 そして Slice を通じて、 「必要な情報だけを、必要な場面で見せる」考え方を学びます。

Chapter Mission

第5章:同じデータを、目的に応じた見せ方へ変える

この章では、1つのテーブルに対して複数の View を作る考え方と、 表示順や表示条件を整える方法を学びます。 さらに、Slice を使って「見せる対象そのものを絞る」 という一歩進んだ設計も押さえます。

この章のゴール
  • View type の違いを説明できる
  • Column Order の意図を持って並べられる
  • Show_If で不要項目を隠せる
  • Slice で用途別の画面を分けられる

Views の基本

AppSheet では、1つのテーブルに対して複数の View を作れます。

たとえば同じ「備品テーブル」でも、 一覧で比較したい場面、1件を詳細に確認したい場面、入力したい場面では、 適した画面の形が違います。

つまり View は単なる見た目ではなく、 ユーザーがその場面で何をしたいか を実現するための設計です。

一覧で比べる
Table / Deck / Card で比較しやすくする
1件を詳しく見る
Detail で内容確認に集中させる
入力しやすくする
Form は迷わず入力できる設計が重要
View Concept
Table View
比較向き

多くの件数を横並びで確認しやすく、ステータスや期限の比較に強い表示です。

Detail View
確認向き

1件分を上から順に読めるため、申請内容や顧客詳細の確認に向いています。

Form View
入力向き

何を先に入力するか、どの項目を隠すかがユーザー体験を大きく左右します。

View type の選び方

Table

ステータス、期限、担当者などを比較したい時に強い基本形です。

Deck / Card

文字量がやや多い情報を、カード型で視覚的に整理したい時に向きます。

Detail

1件を詳しく読み込ませたい時に使います。内部情報を見せる順番も重要です。

Form

入力順、必須項目、Show_If、初期値の設計が使いやすさを決めます。

備品管理アプリならどう選ぶか

一覧画面

在庫状況を比較しやすい Table が基本。画像重視なら Deck も候補です。

詳細画面

購入日、管理番号、貸出先などを落ち着いて確認するなら Detail が向きます。

入力画面

新規登録や返却処理など、入力の順序が重要な場面では Form を使います。

Column Order と非表示の考え方

Bad Example

全部見せると、ユーザーは迷う

ID
備品名
内部コード
購入日
更新日時
管理フラグ

システム用の列や補助列まで見せると、ユーザーは「何を見ればよいか」が分かりにくくなります。

Better Example

必要な情報を、理解しやすい順に並べる

備品名
分類
現在の状態
貸出先

まず知りたい情報から順に置くことで、画面の理解速度が一気に上がります。

先頭に置くべきもの

備品名、案件名、氏名など、対象を一瞬で判別できる情報です。

中盤に置くべきもの

状態、期限、担当者など、判断や次の行動に必要な情報です。

後ろか非表示にするもの

ID、内部コード、更新日時など、ユーザーが毎回見ない情報です。

Show_If による動的表示

Form で特に重要なのが、 不要な項目を最初から見せないことです。

そのために使うのが Show_If です。 条件が満たされた時だけ表示することで、フォームを短く、迷いにくくできます。

配偶者氏名 > Show_If
[配偶者あり] = TRUE
「配偶者あり」が TRUE の時だけ配偶者氏名を表示
Interactive Demo

フォームの出し分けイメージ

New Employee
Save
該当する場合だけ ON にします
Show_If によって表示されました

該当しない人に不要な項目を見せないだけで、入力画面の心理的負担は大きく減ります。

Slice の使い方

What is Slice

Slice は「見せる対象を絞った仮想テーブル」

Slice とは、元のテーブルの中から 特定の条件に合う行だけ、 あるいは 特定の列だけ を取り出して作る、用途別のデータセットです。

View は「見せ方」を変える機能ですが、 Slice はその前段階で 何を見せるか を絞り込む機能です。

そのため、一覧を分けたい時や、特定用途のフォームを作りたい時に非常に有効です。

まずはこの違いを覚える
View
同じデータをどう見せるかを変える
Slice
そもそも何を見せるかを絞る
Example

備品一覧から「貸出中だけ」を切り出す

ノートPC A 利用可能
iPad Pro 貸出中
プロジェクター 貸出中
モニター 24inch 利用可能
Slice で絞り込む
貸出中備品 Slice
iPad Pro 貸出中
プロジェクター 貸出中
Typical Use Cases

Slice が向いている場面

状態ごとの一覧を分けたい

利用可能一覧、貸出中一覧、修理中一覧のように、同じテーブルを用途別に分けられます。

入力専用フォームを作りたい

新規登録用フォームでは不要な列を除いた Slice を使うと、フォームを短くできます。

ユーザー別に見せる範囲を分けたい

担当者ごとの案件一覧など、表示対象をしぼった View の土台として使えます。

Slice Row Filter

行を絞る条件式の例

Slice > Row filter condition
[Status] = "貸出中"

これで「Status が 貸出中 の行だけ」を対象にした Slice を作れます。 その Slice を元に Table View を作れば、 「貸出中一覧」という専用画面が完成します。

Slice の注意点
  • Slice は元データを増やす機能ではなく、見せる範囲を整理する機能です。
  • 条件が複雑になりすぎると管理が分かりにくくなるため、役割ごとに名前を分けるのが大切です。
View と Slice の使い分け
同じデータを違う見せ方で出したい

Table から Deck に変える、Detail を追加する、という時は View の役割です。

表示順や見た目を整えたい

Column Order、View type、表示名の調整は View 側で行います。

見せる行そのものを変えたい

貸出中だけ、期限切れだけ、担当者本人の案件だけ、という時は Slice が向いています。

入力フォーム専用の対象を作りたい

不要列を除いた入力専用の Slice を作ると、フォームが短くなります。

迷わない画面設計の原則

良い画面設計

  • ・必要な情報だけを出している
  • ・見る順番、入力順に並んでいる
  • ・条件で不要項目を隠している
  • ・一覧 / 詳細 / 入力 の役割が分かれている
  • ・用途別に Slice でデータ範囲も整理されている

悪い画面設計

  • ・全部の列をそのまま見せている
  • ・入力項目が長く、何をすればよいか分からない
  • ・一覧画面なのに詳細向け情報を詰め込みすぎている
  • ・同じテーブルなのに用途別の出し分けがない
  • ・必要な人に必要な情報だけを見せる発想がない

初心者がまず意識したいこと

全部見せない

見せられる情報と、見せるべき情報は違います。

順番を設計する

理解順・入力順で並べるだけで使いやすさが変わります。

条件で隠す

Show_If で不要な項目を出さないことが重要です。

対象も分ける

用途ごとに Slice を使うと、画面の目的が明確になります。