フォームのレイアウトの作り方。グループ・スペース・ラベルで見やすくする

公開 書いた人 大林 諒

kintoneのフォームは、フィールドを置くだけなら誰でもできますが、項目が20を超えたあたりから「どこに何を入れるのかわからない」と言われ始めます。原因はたいてい、置いた順番のまま並んでいることと、見出しや区切りがないことです。この記事では、フォームの編集画面の見方から、ラベル・スペース・罫線・グループの使い分け、幅と並べ方、タブ表示の代わりの手、スマホと印刷での見え方までを通して書きます。読み終えると、既存のアプリのフォームを作り直す順番がわかります。アプリを1本作って公開したことがある人を前提にしています。

この記事の内容
  1. 先に決めること
  2. フォームの編集画面の見方
  3. 装飾に使う4つのフィールド
  4. 見やすいフォームの設計5原則
  5. 設計表
  6. 作る手順
  7. タブ表示は標準機能に無い
  8. スマホでの見え方
  9. 印刷時のレイアウト
  10. 応用
  11. できないことと、その代わり
  12. よく詰まるところ
  13. 次にやること

先に決めること

レイアウトは見た目の話に見えますが、決めずに並べ始めると、あとでグループに入れ直したり、行ごと動かしたりで手間が倍になります。フィールドを置く前に、次の4つを紙に書き出します。

誰が、どの順で入力するか

フォームの並びは、入力する人が手元の情報を見る順番に合わせます。電話を受けながら入力するなら「会社名→担当者名→電話番号→問い合わせ内容」、紙の申込書を写すなら申込書と同じ順です。管理する人が見たい順ではなく、入力する人が埋める順で並べます。見る人のための並びは一覧で作れます。

1つの画面に何項目まで出すか

開いたときに全部が見えている必要はありません。毎回入れる項目と、たまにしか入れない項目に分けます。たまにしか入れない項目は、あとで書くグループに入れて閉じておきます。開いた画面に見えている項目が少ないほど、入力する人は空欄に気づきやすくなります。

スマホで入力する人がいるか

外出先や現場でスマホから入力する人がいるなら、横に並べる工夫はほとんど意味がありません。スマホでの見え方は後の節で書きますが、PCの見た目を作り込む前に、スマホの人が何を入力するかを決めておきます。

印刷して使うか

レコードを印刷して渡す、ファイルに綴じる、という運用があるなら、印刷用画面のレイアウトはフォームの配置と同じになります。印刷用に別の配置は作れません。印刷の見た目も気にするなら、フォームを作る段階で印刷した形を想定しておきます。

フォームの編集画面の見方

フォームの設定画面は、レコードの一覧画面から開くのが早いです。

  1. 画面右上の歯車の形をした「アプリを設定」アイコンをクリックします。

アイコン右横のV字の「アプリ設定メニュー」から「フォーム」を選んでも開けます。レコードの詳細画面からなら「アプリ設定メニュー」の「フォームの設定を開く」、アプリ管理画面からならアプリ名の右の歯車「設定」でも同じ画面に入れます。

画面は左右に分かれています。左側がフィールドの一覧、右側がフォームの配置エリアです。左から右へドラッグアンドドロップで置き、置いたフィールドの右上にカーソルを合わせ、歯車の形をした「設定」アイコンが表示されたら「設定」をクリックして、名前や必須などを設定します。

フォームの設定画面の全体。左のフィールド一覧と右の配置エリア、左上の「フォームを保存」、右上の「アプリを更新」
フォームの設定画面の全体。左のフィールド一覧と右の配置エリア、左上の「フォームを保存」、右上の「アプリを更新」

押さえておく点は4つです。

  • フィールドは1つのアプリに500個まで置けます
  • 置いたフィールドの種類はあとから変えられません。ドロップダウンをチェックボックスに変える、ということはできず、新しく置き直してデータを移すことになります
  • 「フォームを保存」だけでは、使っている人の画面は変わりません。「アプリを更新」をクリックし、ダイアログでもう一度「アプリを更新」をクリックして初めて反映されます
  • フィールドを削除すると、そのフィールドに入っていたデータも消えます。削除したフィールドとデータは復旧できません

並べ替えの途中で消したフィールドに、過去のデータが入っていることがあります。消す前にレコードをファイルに書き出しておけば、同じ種類のフィールドを置き直して読み込むことでデータを戻せます。

装飾に使う4つのフィールド

公式ヘルプのフィールド一覧では、「フォームを装飾するフィールド」として「ラベル」「スペース」「罫線」「グループ」の4つが分けて載っています。入力欄にはならず、見た目を整えるためだけのフィールドです。

フィールド役割設定できること注意
ラベル見出し、説明文、注意書き文字色、背景色、文字サイズ、下線、箇条書き、リンク。「要素ID」画像やファイルを添付する機能はない
スペース余白を作る。右寄せや字下げに使う右端と下端のドラッグで大きさを変える。「要素ID」JavaScriptでボタンを置く場所にもなる
罫線区切り線右端のドラッグで長さを変える。「要素ID」太さや色の設定はない
グループ複数のフィールドをまとめて開閉する「フィールド名」「フィールド名を表示しない」「初期値」「フィールドコード」中にテーブルとグループは入れられない

ラベル、スペース、罫線には「フィールドアクセス権」を設定できません。見せる人を絞りたい説明文は、グループに入れてグループにアクセス権を付けます。

ラベル

ラベルは見出しと説明文の両方に使います。入力欄で文字の大きさ、文字色、背景色を変えられるので、見出しは大きく太い色、説明文は小さく灰色、と役割で書式を分けると、どれが見出しかが一目でわかります。

説明文には何を書かないかも書きます。問い合わせ内容の上に「お客様の言葉のまま書く。対応方針はここに書かない」と置くと、事実と判断が混ざりません。リンクも設置できるので、社内の入力ルールのページへのリンクを置いておくのも手です。

ラベルには画像やファイルを添付する機能はありません。同じkintone上のレコードやスレッドに添付済みの画像なら、ドラッグアンドドロップやコピーで貼り付けられますが、公式サポート対象外の操作で、今後のアップデートで動作しなくなる可能性があり、元のファイルが消えると表示できなくなる場合もあります。レコードの追加・編集画面からは貼り付けられません。図を見せたいなら、マニュアル用のレコードに添付してそこへのリンクを置くほうが崩れません。

スペース

フォームに置いたフィールドは、上から順に左詰めで並びます。右側に寄せたい、左に字下げしたい、というときは、空けたい場所にスペースを置いて大きさを変えます。

よく使うのは次の2つです。

  • 金額の合計欄を右端に寄せる。合計の左にスペースを置き、明細の右端と合計の右端がそろうまで広げる
  • 補足の項目を字下げする。「その他を選んだ場合の内容」のような従属する項目の左に細いスペースを置く

スペースには「要素ID」を付けられます。JavaScriptでボタンや案内を差し込む場所として使うためのもので、要素IDはアルファベットで始まる64文字までです。使える文字は英字、数字、半角の「-」「_」「:」「.」で、ほかのフィールドの要素IDと重複はできません。

罫線

罫線は区切りの線です。右端をドラッグして長さを変えられます。設定できるのは要素IDだけで、太さや色は変えられません。

迷ったら罫線よりラベルの見出しを選びます。線だけだと何の区切りかがわからないからです。罫線は、見出しを付けるほどではない小さな区切りや、ラベルの上下に置いて囲みに見せる使い方が向いています。

グループ

グループは、中に入れたフィールドをまとめて折りたたんだり展開したりできるフィールドです。項目が多いフォームの整理には、これが一番効きます。

設定項目は4つです。

  • 「フィールド名」:グループの見出しになります
  • 「フィールド名を表示しない」:見出しを隠します
  • 「初期値」:開いたときに折りたたんだ状態にするか、展開した状態にするかを決めます。展開した状態にするには「グループ内のフィールドを表示する」にチェックを入れます
  • 「フィールドコード」:APIやJavaScriptでグループを指定するときに使います

制限も先に知っておきます。

  • グループの中にテーブルやグループは入れられません。入れ子にはできません
  • グループの左右にはフィールドを置けません。グループは1行を丸ごと使います
  • グループの横幅は変えられません
  • グループを削除すると、中のフィールドも、そのデータもすべて消えます
  • 中にレコード番号、作成者、更新者、作成日時、更新日時のどれかがあると、グループを複製できません
グループの設定画面。「初期値」の「グループ内のフィールドを表示する」のチェック欄
グループの設定画面。「初期値」の「グループ内のフィールドを表示する」のチェック欄

初期値は、毎回入力する項目のグループは展開、たまにしか使わない項目のグループは折りたたみ、と分けます。全部を折りたたみにすると、入力する人が毎回開くことになります。実際に運用しているアプリでは、開き忘れたグループの中の項目が空のまま保存されることがよくあります。

見やすいフォームの設計5原則

ここからは公式ヘルプではなく、実際に運用されているアプリを作り直してきた中で崩れなかった並べ方です。

  1. 入力する順に、上から並べる。目線が上から下へ1回だけ動けば済む形にします。途中で上に戻らせる配置は、必ず入力漏れを生みます
  2. 1行に並べるのは、一緒に入れる項目だけ。姓と名、開始日と終了日、数量と単価のように、片方だけ入れることがない組み合わせだけを横に並べます。関係のない項目を横に並べると、右側が見落とされます
  3. 見出しはラベル、区切りは罫線、余白はスペースで、役割を混ぜない。見出しの代わりに罫線を引く、余白の代わりに空のラベルを置く、といった使い方をすると、あとで直す人が意図を読めません
  4. 入力しない欄は一番下にまとめる。計算フィールド、ルックアップでコピーされる欄、レコード番号や作成者は、入力する人には不要です。下にまとめるか、閉じたグループに入れます
  5. めったに使わない項目は、閉じたグループに入れる。解約理由、紹介元の詳細、旧システムの番号などです。消すと過去のデータが消えるので、使わなくなった項目もグループに入れて残します

5つ目は公式ヘルプでも、使わなくなったフィールドを削除せずグループ内に残しておく運用が案内されています。

設計表

問い合わせ管理のフォームを例に、上から何をどう置くかを表にします。フィールドの種類と設定はほかのアプリでも同じ考え方で使えます。

位置置くもの種類設定・並べ方
1行目「入力のしかた」グループ初期値は折りたたみ。中にラベルで入力ルールを書く
2行目「お客様」ラベル見出し。文字サイズを大きく、背景色を付ける
3行目会社名、担当者名文字列(1行)横に2つ並べる。会社名を広く
4行目電話番号、メールアドレスリンク横に2つ並べ、3行目と右端をそろえる
5行目罫線罫線3行目の右端まで伸ばす
6行目「問い合わせ」ラベル見出し
7行目受付日、種別日付、ラジオボタン種別の「並び」は横
8行目説明文ラベル「お客様の言葉のまま書く」と小さく灰色で
9行目問い合わせ内容文字列(複数行)横幅を最大まで広げ、縦も広げる
10行目「対応」グループ初期値は展開。中に担当者、対応状況、対応メモ
11行目「旧項目」グループ初期値は折りたたみ。使わなくなった項目を退避
12行目レコード番号、作成者、作成日時各フィールド入力しない欄なので最後にまとめる
設計表どおりに並べたフォームの設定画面。見出しのラベル、横に2つ並んだ行、グループ
設計表どおりに並べたフォームの設定画面。見出しのラベル、横に2つ並んだ行、グループ

作る手順

見出しのラベルを置く

  1. 左のフィールド一覧から「ラベル」を、見出しを置きたい行にドラッグします。
  2. ラベルに見出しの文字を入れます。
  3. 文字サイズを大きくします。
  4. 背景色を付けます。

ラベルの書式は1つずつ設定するので、見出しの文字サイズと色を決めたら控えておき、2つ目以降も同じにします。

同じ行に並べる

  1. 並べたいフィールドを、横に置きたいフィールドの右側へドラッグします。
  2. 青色で表示される移動先が同じ行になっていることを確かめてドロップします。

行の左端にカーソルを合わせるとハンドルが出ます。これをドラッグすると、同じ行のフィールドをまとめて上下に動かせます。グループの中へ移すときもこの方法が早いです。

幅をそろえる

  1. フィールドの右端にカーソルを合わせます。
  2. 矢印アイコンが表示されたら、そろえたい位置までドラッグします。
  3. 上下の行のフィールドの右端と重なると、水色の枠線と青色の破線の補助線が出るので、そこでドロップします。
幅を変えている途中。水色の枠線と青色の破線の補助線が出た状態
幅を変えている途中。水色の枠線と青色の破線の補助線が出た状態

幅には決まりがあります。

種類横幅縦幅
関連レコード一覧、グループ変えられない変えられない
フィールドが1つもないテーブル変えられない変えられない
日付、時刻、日時、ユーザー選択、組織選択、グループ選択変えられるが入力欄の大きさは変わらない変えられない
リッチエディター、文字列(複数行)、スペース変えられる変えられる
上記以外変えられる変えられない

日付の幅を広げても入力欄はそのままなので、日付を広げて右端をそろえるより、日付の右にスペースを置いて行の右端をそろえるほうがきれいに収まります。

グループを作って中に入れる

  1. 左のフィールド一覧から「グループ」を置きたい行にドラッグします。
  2. グループの右上の歯車から「設定」をクリックします。
  3. 「フィールド名」に見出しを入れます。
  4. 毎回入力する項目のグループなら「グループ内のフィールドを表示する」にチェックを入れます。
  5. 「保存」をクリックします。
  6. 中に入れたいフィールドを、グループの枠の中へドラッグします。

グループの左右にはフィールドを置けないので、横に何か置こうとしても入りません。グループの中では、通常と同じように横に並べられます。

罫線とスペースで整える

  1. 「罫線」を区切りたい行にドラッグします。
  2. 右端をドラッグして、上の行の右端にそろえます。
  3. 右寄せしたいフィールドの左に「スペース」をドラッグします。
  4. スペースの右端をドラッグして、フィールドを押し出したい位置まで広げます。

フィールド名を隠す

ラベルで見出しを付けた直下の入力欄など、フィールド名が二重になって見える場合は、フィールドの設定で「フィールド名を表示しない」にチェックを入れます。隠れるのはレコードの追加、編集、詳細、印刷用の画面と、フォームの設定画面です。

ただし、レコードを絞り込むときや保存時のエラーメッセージには、隠したフィールド名がそのまま出ます。隠すフィールドにも、それだけで何の欄かわかる名前を付けておきます。

保存して反映する

  1. 左上の「フォームを保存」をクリックします。
  2. 右上の「アプリを更新」をクリックします。
  3. ダイアログで「アプリを更新」をクリックします。
  4. レコードの追加画面を開き、上から順に1件入力して、目線が上に戻る場所がないか確かめます。

ふだん入力する人に1件入れてもらうと、迷う場所がはっきり出ます。

タブ表示は標準機能に無い

「kintone タブ 表示」で探す人が多いのですが、フォームをタブで切り替える機能は標準にはありません。公式ヘルプでフォームを装飾するフィールドとして挙がっているのはラベル、スペース、罫線、グループの4つだけで、タブに当たるフィールドや設定はありません。代わりの手は3つです。

代わり1:グループで分ける

標準機能だけで済ませるなら、タブ1枚をグループ1つに置き換えます。「基本情報」「契約」「対応履歴」のようにグループを縦に並べ、主に使うものだけ初期値を展開にします。閉じておけば画面の長さはタブとほぼ同じに収まり、追加の費用もかかりません。まずはこれで足りるかを試します。

代わり2:タブ表示のプラグインを入れる

タブ表示を足すプラグインは複数の会社から出ています。入れるときの前提は次のとおりです。

  • ライトコースではプラグインを使えません。スタンダードコースかワイドコースが必要です
  • 1つのアプリで使えるプラグインは20個までです
  • アプリに追加できるのは、kintoneシステム管理者がシステム管理で追加し、そのアプリでの利用を許可したプラグインだけです
  • 複数のプラグインを入れると競合することがあります。プラグインの使い方はサイボウズのサポート対象外で、提供元に問い合わせます

選ぶときは、スマホでも切り替わるか、印刷でどう出るかを試用で確かめます。

代わり3:JavaScriptで作る

自分で書けるなら、スペースにボタンを並べ、押されたタブに属するフィールドだけを表示する形で作れます。使うのは公式のJavaScript APIの2つです。

  • kintone.app.record.getSpaceElement:要素IDを付けたスペースの場所を取る
  • kintone.app.record.setFieldShown:フィールドの表示と非表示を切り替える。フィールドコードか要素IDで指定する

フォームに要素IDが tabs のスペースを置き、タブごとに表示するフィールドのフィールドコードを並べた例です。ラベルや罫線も、要素IDを付ければ同じ配列に入れられます。

(function () {
  'use strict';
  var TABS = [
    { name: '基本情報', fields: ['会社名', '担当者名', '電話番号'] },
    { name: '契約', fields: ['契約日', '契約プラン', '契約金額'] },
    { name: '対応履歴', fields: ['対応状況', '対応メモ'] }
  ];
  var EVENTS = [
    'app.record.create.show',
    'app.record.edit.show',
    'app.record.detail.show'
  ];
  kintone.events.on(EVENTS, function (event) {
    var space = kintone.app.record.getSpaceElement('tabs');
    if (!space) {
      return event;
    }
    var select = function (index) {
      TABS.forEach(function (tab, i) {
        tab.fields.forEach(function (code) {
          kintone.app.record.setFieldShown(code, i === index);
        });
      });
    };
    TABS.forEach(function (tab, i) {
      var button = document.createElement('button');
      button.type = 'button';
      button.textContent = tab.name;
      button.onclick = function () {
        select(i);
      };
      space.appendChild(button);
    });
    select(0);
    return event;
  });
})();

作るときに外せない点が3つあります。

  • JavaScriptはPC用とスマホ用を分けて設定します。スマホでも切り替えたいなら、kintone.mobile.app.record で始まる同じ名前の関数と、mobile.app.record.create.show などのスマホ用のイベントで書いたファイルを、スマホ用として別に入れます
  • 保存時にエラーになった欄が隠したタブの中にあると、入力する人はその欄を見つけられません。公式ヘルプでも、APIやプラグインで一時的に非表示になっている欄はエラーが出ても見つからない場合があると案内されています。必須項目は最初のタブに集めます
  • JavaScriptを入れられるのはkintoneシステム管理者だけで、ライトコースでは使えません。適用範囲は「アプリ管理者だけに適用」で動きを確かめてから「すべてのユーザーに適用」に切り替えます

JavaScriptの入れ方そのものは「kintoneのJavaScriptカスタマイズ入門。最初の1本を動かすまで」に書いています。

スマホでの見え方

スマホのWebブラウザーで開くと、初期設定ではモバイル版の画面が出ます。iPhoneとAndroidのアプリでは常にモバイル版です。公式ヘルプで確認できるモバイル版の違いのうち、フォームに関わるものは次のとおりです。

  • ラジオボタンとチェックボックスは、「並び」を横にしていても、モバイル画面では縦に並びます
  • アプリの作成と設定の画面は使えません。フォームの手直しはPCでします
  • リッチエディターには装飾のない文字しか入力できません
  • 一覧画面ではテーブルと添付ファイルのフィールドが表示されません

PCで横に並べたフィールドがスマホでどの順に並ぶかは、公式ヘルプには書かれていません。APIで取れるフィールドの大きさもPCで表示したときの値で、スマホでの大きさは取れません。なので、スマホで入力する人がいるアプリは、公開前に実際にスマホで開いて、上から下へ入力の順に読めるかを確かめます。設計5原則の1つ目と2つ目を守っておけば、ここで大きく崩れることはまずありません。

同じアプリをスマホで開いたレコード追加画面。ラジオボタンが縦に並んだ状態
同じアプリをスマホで開いたレコード追加画面。ラジオボタンが縦に並んだ状態

JavaScriptでボタンや表示切り替えを入れている場合、スマホ用のファイルを入れていなければ、スマホでは何も起きません。モバイル表示では罫線の表示と非表示をJavaScriptで切り替えられない、という制限もあります。

印刷時のレイアウト

レコードを印刷するには、レコードの詳細画面の右上の「オプション」から「レコードを印刷」を選び、印刷用画面で「印刷する」をクリックして、ブラウザーの印刷機能で印刷します。

印刷用画面のレイアウトは変えられません。フォームの配置がそのまま印刷されます。フォームは1つのアプリに1つしか作れないので、印刷用に別の並びを持つこともできません。コメント、変更履歴、メニューなどは印刷されません。

レコードの印刷用画面。フォームと同じ配置で並んだ状態
レコードの印刷用画面。フォームと同じ配置で並んだ状態

印刷を前提にするときの工夫は3つです。

  • 幅を広げすぎない。横幅いっぱいに広げた行は、用紙に収まらないことがあります。印刷プレビューで切れていないかを確かめます
  • 「フィールド名を表示しない」は印刷用画面にも効きます。ラベルで見出しを付けた欄は、印刷でもすっきりします
  • 印刷用画面でグループを開いておきたいなら、JavaScriptの app.record.print.show イベントで setGroupFieldOpen を使えます。このイベントはPCだけです

決まった様式で印刷したいなら、フォームを作り込むより帳票を作る連携サービスのほうが早く仕上がります。公式ヘルプでも、契約コースによっては他社の連携サービスを使う方法が案内されています。

応用

グループ単位でアクセス権を付ける

フィールドのアクセス権は1つずつ設定しますが、同じ権限にしたいフィールドをグループにまとめ、グループにアクセス権を付けると、中のフィールドに一括でかかります。人事評価や原価のように、一部の人にだけ見せたい項目をまとめるのに使います。

  1. 見せる人を絞りたいフィールドを1つのグループに入れます。
  2. 「アプリの設定」の「設定」タブで、「アクセス権」の「フィールド」をクリックします。
  3. 「追加する」をクリックし、「フィールド」でそのグループを選びます。
  4. 見せる人と操作を設定し、「保存」をクリックします。
  5. 「アプリを更新」をクリックします。

アクセス権は上の行が優先されます。見せる人の行を上に、Everyoneの行を下に置きます。閲覧権限のない人の画面では、設定のしかたによって「アクセス権がありません。」と出るか、フィールドそのものが消えるかが変わります。「フォームのフィールドを追加」から1つでもフィールドを使って設定すると前者、ユーザーや組織だけで設定すると後者です。

フィールドのアクセス権の設定画面。グループを選んで、責任者とEveryoneの2行を並べた状態
フィールドのアクセス権の設定画面。グループを選んで、責任者とEveryoneの2行を並べた状態

テーブルを置くときの並べ方

テーブルはグループの中に入れられません。テーブルを含む区切りを作るときは、テーブルの上にラベルで見出しを置き、テーブル名を「テーブル名を表示しない」で隠すと、ほかの見出しと書式がそろいます。テーブルにはラベル、スペース、罫線、グループ、関連レコード一覧などを入れられないので、テーブルの中で区切りを作ることもできません。テーブルの扱いは「テーブル(サブテーブル)の使い方。できること・できないこと」にまとめています。

できないことと、その代わり

できないこと代わりの手
タブで切り替えるグループで分ける。プラグインかJavaScriptで足す
グループを入れ子にする見出しのラベルとグループを組み合わせて2段に見せる
グループの中にテーブルを入れるテーブルの上にラベルで見出しを置く
グループの横にフィールドを置くグループの中で横に並べる
選んだ値によって項目を出し分けるプラグインかJavaScript。setFieldShown と値の変更イベントで作る
印刷用の別レイアウトを持つ帳票の連携サービスを使う
罫線の太さや色を変える背景色を付けたラベルを見出しにして区切る
ラベルに画像を添付する画像を添付したレコードへのリンクを置く
フィールドの種類を変える新しく置き直し、ファイルの書き出しと読み込みでデータを移す
削除したフィールドを戻す削除前に書き出したファイルがあれば、同じ種類を置き直して読み込む

値によって項目を出し分けるのは、タブの次によく聞かれます。ラジオボタンやドロップダウンの値が変わったときのイベントで setFieldShown を呼ぶ形で作れます。標準機能だけで済ませるなら、「その他を選んだ場合の内容」のような従属する項目を字下げして置き、説明文で「その他のときだけ書く」と書くのが現実的です。プラグインの選び方は「kintoneのプラグインとは。入れ方・選び方・注意点」に書いています。

よく詰まるところ

症状原因直し方
並べ替えたのに使っている人の画面が変わらない「フォームを保存」だけで「アプリを更新」をしていない右上の「アプリを更新」をクリックし、ダイアログでも「アプリを更新」をクリックする
フィールド名を変えたのに表示が古いまま「言語ごとの名称」が設定されていて、そちらが優先されている「設定」タブの「その他の設定」にある「言語ごとの名称」を直し、アプリを更新する
グループの横にフィールドが置けないグループの左右にはフィールドを置けない仕様横に置きたいフィールドはグループの中に入れて並べる
テーブルがグループに入らないグループの中にテーブルは入れられないテーブルはグループの外に置き、上にラベルで見出しを付ける
日付の幅を広げても入力欄が広がらない日付、時刻、日時、ユーザー選択などは入力欄の大きさが変わらない右にスペースを置いて行の右端をそろえる
「この行をテーブルにする」が押せない行にラベルやスペースなどテーブルにできないフィールドがある、または公開済みのフィールドがある該当のフィールドを行から外す。公開済みのものは新しく置き直す
保存すると「以下の入力内容にエラーがあるため保存できません。」と出るのに、該当の欄が見当たらないフィールド名を隠している、またはJavaScriptやプラグインで一時的に隠している画面の中で欄の下にエラーが出ている場所を探す。見つからなければカスタマイズとプラグインの設定を確かめる。隠す欄を必須にしない
保存時に「(項目名を表示できません)」と出る入力した人に閲覧権限のないフィールドがエラーになっているフィールドのアクセス権を見直すか、そのフィールドの初期値や必須の設定を直す
グループを消したら中の項目とデータも消えたグループの削除は中のフィールドとデータも消す。復旧はできない削除前に書き出したファイルがあれば、同じ種類のフィールドを置き直して読み込む
グループを複製できない中にレコード番号、作成者、更新者、作成日時、更新日時があるそれらをグループの外に出してから複製する
ラジオボタンを横並びにしたのにスマホで縦になるモバイル画面では設定にかかわらず縦に並ぶ仕様。選択肢の文字を短くして、縦でも読みやすくする
印刷するとフォームの並びのままで見づらい印刷用画面のレイアウトは変えられないフォームの幅を抑える。様式が要るなら帳票の連携サービスを使う
ラベルに図を貼ったら、あとで表示されなくなった貼り付けた元のファイルが消えた。公式サポート対象外の使い方図は別のレコードに添付し、ラベルにはリンクを置く
閲覧権限のない人に「アクセス権がありません。」と出て目立つ「フォームのフィールドを追加」を使ってアクセス権を設定しているユーザーや組織だけで設定すると、フィールド自体が表示されなくなる

次にやること

まだアプリを1本も作っていないなら、フォームの並べ方を考える前に「kintoneアプリの作り方。最初の1本を30分で作る」で一通り作って公開するところまで進めると、この記事の手順がそのまま使えます。タブ表示や値による出し分けをプラグインで足すなら「kintoneのプラグインとは。入れ方・選び方・注意点」、自分で書くなら「kintoneのJavaScriptカスタマイズ入門。最初の1本を動かすまで」が続きです。明細を入れる表をフォームに組み込むなら「テーブル(サブテーブル)の使い方。できること・できないこと」で、グループとの組み合わせ方を先に押さえておきます。

あわせて読む