【kintone】閲覧画面をスッキリ整理！入力・編集用の説明ラベルを非表示にする方法

kintoneでアプリを作っていて、「入力・編集画面では説明文章を丁寧に書いたら、保存後の閲覧画面まで同じ説明が残ってしまい、見づらくなった…」ということが時折あります。今回は、この悩みに対応する標準機能での工夫と、 JavaScriptカスタマイズで解決するためのロジックを紹介します。

内容：

kintone標準機能でできること・できないこと
- 方法1：ラベルに説明ページへのリンクを記載する
- 方法2：グループフィールドで説明ラベルを折りたたむ
JavaScriptカスタマイズで解決するロジック
まとめ：画面ごとに「必要な情報」を整理するのがポイント

動作確認は、2026年4月時点のkintone（スタンダードコース）です。

kintone標準機能でできること・できないこと

まず、JavaScriptを使わずに改善できる方法を2つ紹介します。それぞれ一定の効果はありますが、いずれも「根本的な解決」には届きません。

方法1：ラベルに説明ページへのリンクを記載する

説明文章の代わりに、別ページへのリンクだけをラベルに書く方法です。表示される文字数が減るため、画面は多少すっきりします。

ただし、以下の問題が残ります。

閲覧画面にもリンクが表示され、縦方向の余白が生まれる
ユーザーがリンクをクリックしないと説明を読めないため、入力ミスにつながりやすい

方法2：グループフィールドで説明ラベルを折りたたむ

説明ラベルをグループフィールドの中に入れ、初期状態を「閉じる」に設定します。閲覧画面ではグループが折りたたまれるため、見た目はすっきりします。

ただし、この方法も完全ではありません。

入力・編集時に説明を確認したいユーザーが、毎回グループを開く手間が発生する
「気づかずに閉じたまま入力してしまう」という運用リスクがある

標準機能だけでは、入力画面と閲覧画面を個別に制御することができません。

JavaScriptカスタマイズで解決するロジック

画面ごとに表示を切り替えるには、JavaScriptカスタマイズが有効です。難しそうに聞こえますが、やっていることはシンプルです。

プログラムの動き方（3ステップ）

ステップ	処理の内容
1	「閲覧画面が開いた」タイミング（イベント）を検知する
2	非表示にしたいラベルの要素IDを特定する
3	`setFieldShown` でそのラベルを非表示にする

この制御により、以下の使い分けが実現します。

入力・編集画面：説明ラベルを表示し、入力をサポートする
閲覧画面：説明ラベルを非表示にし、情報をすっきり見せる

【重要】2026年2月のアップデートで何が変わったか

以前は setFieldShown でラベルを制御することができず、DOM操作（HTMLを直接書き換える方法）に頼る必要がありました。DOM操作はkintoneのアップデートで動かなくなるリスクがある手法でした。

2026年2月8日のアップデートから、ラベルに「要素ID」を設定することで、setFieldShown が使えるようになりました。

時期	ラベル非表示の方法	安定性
2026年1月以前	DOM操作（非推奨）	kintoneのアップデートで動かなくなるリスクあり
2026年2月以降	`setFieldShown` ＋要素ID（推奨）	公式APIのため安定して動作する

kintoneのラベルフィールドと要素IDについては、公式ヘルプもあわせてご確認ください。

出典：［ラベル］ - kintone ヘルプ

APIの変更詳細については、以下の公式情報もあわせてご確認ください。
2026年2月8日 kintone API アップデート情報 - cybozu developer network

要素IDの設定方法

ラベルに要素IDを設定する手順は次のとおりです。

kintoneアプリのフォーム編集画面を開く
非表示にしたいラベルをクリックする
設定欄の「要素ID」に任意のIDを入力する（例：label_nyuryoku_1）
フォームを保存する

要素IDは半角英数字とアンダースコアで設定します。あとでコードから見てわかりやすい名前にしておくと管理しやすくなります。

サンプルコード

動作環境：kintone 2026年2月アップデート以降

(function() {
    'use strict';

    // 非表示にしたいラベルの要素IDを配列にまとめる
    // フォーム編集画面で設定した「要素ID」を記載する
    const HIDE_LABEL_IDS = [
        'label_nyuryoku_1',  // 例：入力説明ラベル1
        'label_nyuryoku_2',  // 例：入力説明ラベル2
        'label_nyuryoku_3'   // 例：入力説明ラベル3
    ];

    // 閲覧画面が表示されたときのイベント
    kintone.events.on('app.record.detail.show', function(event) {

        // 配列に登録した要素IDのラベルをすべて非表示にする
        HIDE_LABEL_IDS.forEach(function(labelId) {
            kintone.app.record.setFieldShown(labelId, false);
        });

        return event;
    });
})();