カスタムアプリでデータの一覧画面を見やすくするには?
サイボウズ Officeのプレミアムコースで使える「カスタムアプリ」。
日報や顧客管理など、自社にあわせた業務アプリケーションを作成できる人気機能です。
自社にあった入力項目や選択項目を用意し、皆でデータを貯めて共有していけるのが魅力です。
しかし、カスタマイズをしてデータを貯め始めたお客様から、こんなご相談もいただきます。
「項目が増えすぎて、データの一覧画面が横長になってしまって…」
「データが増えてきて、一覧画面が見にくくなってきたんだよね…」
この記事では、カスタムアプリのデータの一覧画面を見やすくするTipsを3つ紹介します。
Tips1. 一覧画面では、大事な項目だけを表示しよう!
Tips2. 色や文字サイズを変更して、見た目にメリハリをつけよう!
Tips3. データを分類して表示しよう!
この3つの前提となるのが「ビュー」という機能です。まずは「ビュー」について見ていきましょう。
「ビュー(一覧)」=「登録したデータが並んでいる画面」
アプリを開くと最初に表示される一覧画面を見やすくする上で重要なのが「ビュー(一覧)」という機能です。
「ビュー(一覧)」を設定することで、項目の表示順や、文字の色・サイズといった画面の見え方を思い通りに変更することができます。
では実際に、3つのTipsを使うとビュー(一覧)がどのように洗練されていくのか見ていきましょう。ここでは、日報アプリを題材にします。
まず、こちらがビュー(一覧)を設定する前の状態です。
日報に登録されたすべての情報が一覧に表示されてしまっていて、かなり見づらい状態ですね。

Tips1. 一覧画面で大事な項目だけを表示しよう!
一覧ビューに表示する項目を必要最低限に絞り込む設定を行いました。
これだけでも、行の幅が整ってスッキリした印象になりましたね。

Tips2. 背景色や書式を変更して、見た目にメリハリをつけよう!
重要な項目の背景色を変えたり、太字にする設定を行いました。
徐々にメリハリのある見やすい画面になってきましたね。

特定の条件に合致したもの(締切日を過ぎた、ステータスが未完了のままなど)を強調表示する
こともできます。
日報アプリの場合「上司が未確認のレコードは一覧上で赤く表示する」といった設定をする
ことで、上司がメンバーの日報を漏れなく確認する習慣づけを促すことができますね。
Tips3. データを分類して表示しよう!
さらに、「部署ごと」にデータを分類して表示する設定を行いました。
分類を設けることで、利用者は自分が特に見るべき範囲が特定しやすくなりますね。

また、用途に応じて複数の「ビュー」を用意しておき、シーンに応じて切り替えることもできます。
たとえば上の日報一覧を「カレンダー形式」の設定に切り替えると、このような表示になります。

いかがでしたでしょうか。ビュー(一覧)設定のひと工夫で、カスタムアプリの使いやすさがどんどん向上していきます。
みなさんも「ビュー(一覧)」を作成し、色や条件などの設定にチャレンジしてみましょう。
ここからは、「ビュー(一覧)」の作成方法と、3つのTipsの設定方法を紹介します。
ビュー(一覧)の作成(Tips1)
まずは、一覧画面の「ビュー」を作ります。
①当該アプリの「運用管理」 > 「ビュー(一覧)」 にアクセス

②「追加する」をクリック

③ビュー名を設定
設定した名称は、ビューを選択するときに表示されます。
迷う場合は「確認用」などで構いません。ビュー名を入力したら「追加する」を押します。

④表示形式を選択
目的に応じて「表示形式」を選びます。
まずはシンプルな「レコード一覧形式」がおすすめです。

※Tips3のように分類したい場合は「カテゴリ形式」や「カレンダー形式」を選びます
⑤表示する項目の設定
「表示する項目」を追加して、表示順を調整します。
ここがTips1の部分です。必要な項目を厳選して表示しましょう。
一覧に表示しない項目は、詳細画面で確認すればOKです。

⑥表示する項目を設定したら「変更する」をクリック
⑦プレビューの確認
いま作ったビューの「プレビュー」をクリックすると、現在の状態を確認できます。
表示項目の順番などを修正する場合は「変更」から設定できます。

⑧「最初に選択されるビュー」の設定
ビューを作ったら、そのビューを「最初に選択されるビュー」にしておきましょう。
アプリを開いたときに、最初に表示されるようになります。

書式・条件書式の設定(Tips2)
続いて、色や文字サイズの設定です。「書式・条件書式」という設定です。
- 単純な項目の色や文字サイズの変更は「書式」です(Tips2)
- 「締め切りが近い」「未着手」など、条件に応じた変更は「条件書式」です(Tips3)
①当該アプリの「運用管理」 > 「ビュー(一覧)」 にアクセス

②変更したいビューの「書式・条件書式」をクリック

③設定したい箇所をクリック
- 書式 … 特に重要な項目を常に強調したいときに変更
- 条件書式 … 特定の条件に合致した場合に強調したいときに設定

④書式や条件書式の詳細を設定
書式の場合
各項目の見出しや値に対して、色や文字サイズなどを変更できます。
しっかり強調したい場合は、「項目名」よりも「レコード値」の背景色や文字サイズを変えるのがおすすめです。「太字(ボールド)」も効果的です。

条件書式の場合
「状況が未完了なら赤」 「日付項目が今週なら青」「金額項目が○○円以上なら太字」など、条件に応じて書式を変える設定ができます。

「状況が未完了」「日付項目が今日」など、対応が必要な条件値の場合は、背景色を目立つ色にしたり、文字を太字にするなどして、強調しましょう。
一方「状況が完了」「日付項目が昨日以前」など、対応が必要ない場合は、背景色をグレーにすると、区別がしやすくなります。
ビューの見やすさも踏まえ、追加する条件は数個に留めておくのがおすすめです。
データを分類して表示(Tips3)
データを分類して表示するビュー(一覧)を作る方法です。
大まかな手順はビュー(一覧)の作成(Tips1)と同じです。
手順④で選ぶ表示形式を変えることで、一覧画面の見え方が変わります。(作成したビュー(一覧)の「変更」からも設定できます。)
- 「部署ごと」「状況ごと」などの分類をしたい場合は「カテゴリ形式」を選びます
- 「日付ごと」に表示したい場合は「カレンダー形式」を選びます

「カテゴリ形式」「カレンダー形式」では、手順⑤の設定箇所が少し加わります。
「カテゴリ形式」を選んだ場合は、「カテゴリになる項目」も設定しましょう。
部署ごとに表示したいなら「部署」項目を、状況ごとに表示したいなら「状況」項目を選びます。


【参考】カテゴリ形式で「ソート」を使う場合
カテゴリ形式のビューで、別機能「ソート」を使ってデータを並べ替えようとした方から、
「あったはずの『ソート』が消えてしまった」というご質問をいただくことがあります。
カテゴリ形式のビューを「ソート」機能で並べ替えたい場合、
ソートの条件設定の最初は「カテゴリになる項目」にする必要があります。ソートを新たに設定しましょう。
例えば「部署ごと」のビューを並べ替えるなら、ソートの条件1を「部署名」にします。

「カレンダー形式」を選んだ場合は、「キーになる日付項目」を選択します。
ここで選んだ日付項目をもとに、カレンダーが表示されます。
また、「初期表示」を「カレンダー一覧表示」にすると日付ごとの一覧表形式になります。
よく使うことになりそうな表示を、「初期表示」にしておきましょう。


ここでも、表示項目を増やしすぎないよう心がけましょう。
特に、カレンダー表示用の見出し項目は(5つまで設定できますが)表示スペースの関係で、2つか3つ程度が無難です。
この記事では、カスタムアプリのデータの一覧画面を見やすくする方法をご紹介しました。
まずは「ビュー」を設定して、そこに書式や条件書式の設定を加えていきましょう。
他にも、一覧画面のデータを探しやすくする方法として「絞り込み」や「ソート」の設定も効果的です。
アプリを皆が扱いやすい状態にして、社内の情報共有を進めていきましょう!
■関連記事
「カスタムアプリ」を使ってみよう
カスタムアプリって何?代表的な使い道や機能を紹介!
カスタムアプリを新規に作ってみよう!日報アプリを例に手順を解説!
ミュートしたユーザーの投稿です。
投稿を表示オフコミ入会のメリットを実感しました!
ランダムに届く、「使い方ヒント記事発信」通知で、
興味のあった<カスタムアプリの見易い設定手順>の解説を、
サイトにジャンプして、一気に読み切りました。
その1)手順説明に、Officeの画面をふんだんに使用している
その2)記号や図形を適宜使用している
その3)設定選択の理由、判断の分かれ目を的確に解説している
以上の要素が、オンラインマニュアルとして機能していて
理解が深まりました。
作成した方のセンスも伝わってきます。
正直、あやかりたい!です。
引き続き、発信を期待しています。