サイボウズ Officeのプレミアムコースで使える「カスタムアプリ」。
日報や顧客管理など、自社にあわせた業務アプリケーションを作成できる人気機能です。

入力項目や選択項目を追加して、オリジナルの入力フォームを作れるのも魅力です。
しかし、項目をたくさん作られているお客様から、こんなご相談もいただきます。

「項目が増えすぎて、データの詳細画面が見にくくて…」
「いろいろな項目があるから、データの登録でミスしやすいんだよね…」

そこでこの記事では、カスタムアプリのデータの詳細画面・登録画面を見やすくするTipsを2つ紹介します。
 

Tips1.  画面に区切り線を入れて、項目を整理しよう！
Tips2.  画面にコメントを表示して、利用者に情報を伝えよう！

この２つの前提となるのが「ビュー」という機能です。まずは「ビュー」について見ていきましょう。

「ビュー（詳細・登録）」＝「データ入力・閲覧時の画面」

データ入力・閲覧時の画面を見やすくするのが「ビュー（詳細・登録）」という機能です。
項目の表示順や、文字の色・サイズといった画面の見え方を思い通りに変更することができます。

「ビュー（詳細・登録）」を作ると、以下のようなことが実現できます。

• 表示する項目を限定して、大事な情報だけを見せる
• 色や文字サイズを変更して、直感的に確認しやすくする
• 画面に線を入れて、項目を整理する（Tips1）
• 画面にコメントを入れて、利用者に補足をする（Tips2）
  
  一般メンバーがデータ登録するとき用の「ビュー（詳細・登録）」、管理者が追加情報を入力するとき用の「ビュー（詳細・登録）」など、用途に応じた見え方を用意し、切り替えて使うこともできます。
  
  全ての項目を表示すると多すぎる…という場合も、シーンに応じて必要な項目だけを表示できます。
  例えば休暇管理アプリの場合、休暇を申請するメンバー用の画面と、承認する上司が内容を確認して承認チェックができる管理者用の画面を準備することができます。

「ビュー（詳細・登録）」の追加方法は記事の後半で解説します。
ここから、「ビュー（詳細・登録）」を設定することで実現できる、区切り線やコメントについてご紹介します。

Tips1 画面に区切り線を入れて、項目を整理しよう！

「ビュー（詳細・登録）」には、画面を整理する為の機能として「区切り線」があります。
区切り線は、項目が多くて入力や確認がしにくい場合に有効です。

Tips2 画面にコメントを表示して、利用者に情報を伝えよう！

そして、実はこの区切り線は、文字に変更することもできるんです。
見出しがあると、どんな項目のまとまりなのか、とてもわかりやすくなりますね。

設定方法

ここからは、画面に区切り線やコメントを表示する方法をご紹介します。

まずは「ビュー」を作り、表示項目として「区切り線」を追加します。
そして、書式の設定画面から「区切り線」を「コメント」に変更します。
また、あわせて「最初に表示されるビュー」も設定しておきましょう。
 

1.ビューの作成と「区切り線」の追加

まずは、詳細画面・登録画面の「ビュー」を作ります。

①当該アプリの「運用管理」 > 「ビュー（詳細・登録）」 にアクセス

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

③ビュー名を設定

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

④表示する項目の設定

「表示する項目」を追加して、表示順を調整します。
用途に応じて「ビュー」を切り替えて使う場合は、必要な項目だけが表示されるようにします。

ここで「区切り線」も追加しましょう。「区切り線」は何本でも入れることができます。
左側の矢印ボタンで、表示順を調整できます。区切りを入れたい位置に持っていきましょう。

表示する項目を設定したら「変更する」をクリックします。

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

2.「区切り線」を「コメント」にする

続いて、いま作ったビューの「区切り線」を「コメント」に変更していきます。

①「書式・条件書式」をクリック

②コメントに変更したい区切り線の「書式」の「変更する」をクリック

③区切り線の表示形式を「コメントを表示する」に変更し、文字を入力

「変更する」をクリックすれば、設定が完了します。

3.「最初に選択されるビュー」の設定

いま作ったビューを「最初に選択されるビュー」にしておきましょう。
レコードを開いたときに、最初に表示されます。

この記事では、カスタムアプリのデータの詳細画面・登録画面を見やすくするための方法を紹介しました。
「ビュー」を設定することで、区切り線やコメントの表示が可能になります。

入力や確認がしやすいビューを作り、皆が使いやすいアプリにしていきましょう。
カスタムアプリでの業務改善が成功することを祈っています！

■関連記事
「カスタムアプリ」を使ってみよう
カスタムアプリって何？代表的な使い道や機能を紹介！
カスタムアプリを新規に作ってみよう！日報アプリを例に手順を解説！