このプラグインでできること
「デザイン変更プラグイン」は、kintone のレコード画面の見た目を変更するプラグインです。
背景色・テーブルの見出し色・フォント・罫線のデザインに加えて、フィールドごとのラベルと入力欄の色・文字サイズ・太字を、設定画面から変更できます。
レコードの値が条件に当てはまるときだけ、指定したフィールドの見た目を変えることもできます。
CSS（Webページの見た目を指定する言語）の知識は必要ありません。
色は色見本から選ぶだけ、その他の項目はプルダウンや数値入力だけで設定できます。
主な機能は次のとおりです。
- レコードの詳細画面・追加画面・編集画面ごとに、背景色を個別に設定できます
- レコードの詳細画面・追加画面・編集画面ごとに、テーブル（サブテーブル）の見出し行の色を個別に設定できます
- レコード画面のフォントを、7種類から選択できます
- 「罫線」フィールドの色・線の種類・高さを変更できます
- フィールドごとに、ラベルの文字サイズ・背景色・文字色・太字と、入力欄の背景色・文字色・太字を設定できます（フィールド個別設定）
- レコードの値やステータスが条件に当てはまるときだけ、指定したフィールドの見た目を変更できます（条件設定）
- フィールド個別設定・条件設定の入力欄の色や太字を、一覧画面（表形式）の値にも反映できます
- 全体設定の内容を、枠ごとに初期値へ戻せます
- 設定した内容を JSON ファイルに書き出し、別のアプリに読み込めます
💡 このプラグインはレコードの見た目だけを変更します。レコードのデータや、kintone の機能そのものには影響しません。
動作環境・前提条件
2-1. 必要な権限
プラグインの設定を行うには、対象アプリの「アプリ管理権限」が必要です。
権限がない場合、「アプリの設定」画面を開けません。
設定した内容の閲覧については、特別な権限は不要です。
そのアプリのレコードを閲覧できるユーザー全員に、同じデザインが適用されます。
2-2. 事前に必要なフィールドや設定
このプラグインを使うために、事前に追加が必要なフィールドはありません。
アプリに対象プラグインが追加されていれば、設定を始められます。
ただし、次の設定を行う場合は、対象となるフィールドがフォームに配置されている必要があります。
| 設定内容 | フォームに必要なもの |
|---|---|
| テーブルヘッダー色設定 | テーブル（サブテーブル） |
| 罫線デザイン設定 | 「罫線」フィールド |
| フィールド個別設定・条件設定の対象フィールド | 対象にするフィールド |
| 条件設定の「ステータス」の条件 | プロセス管理が有効になっていること |
💡 テーブルや「罫線」フィールドがないアプリでも、設定自体は保存できます。表示上の変化がないだけです。
2-3. 対応画面
デザインが適用される画面は、次のとおりです。
| 画面 | 適用される内容 |
|---|---|
| レコード詳細画面 | 全体設定・フィールド個別設定・条件設定 |
| レコード追加（作成）画面 | 全体設定・フィールド個別設定・条件設定 |
| レコード編集画面 | 全体設定・フィールド個別設定・条件設定 |
| レコード一覧画面（表形式） | 「一覧に反映」にチェックしたフィールド個別設定と、適用画面に「一覧」を選んだ条件設定の、値の文字色・太字・背景色のみ |
上記以外の画面（表形式以外の一覧、グラフ画面、印刷用画面など）には適用されません。
⚠️ このプラグインは PC 版の kintone のみに対応しています。モバイル版（スマートフォン向け画面）では適用されません。
設定手順
3-1. 設定画面を開く
- デザインを変更したいアプリを開きます。
- 画面右上の歯車アイコンから「アプリの設定」を開きます。
- 「設定」タブを開きます。
- 「プラグイン」をクリックします。
- 一覧から「デザイン変更プラグイン」を探します。
- 「デザイン変更プラグイン」の設定ボタン（歯車アイコン）をクリックします。
プラグインの設定画面が表示されます。
プラグインの一覧で、デザイン変更プラグインの設定（歯車）アイコンをクリックする
3-2. 設定画面の全体構成
設定画面は、画面上部のヘッダーと、その下の3つのタブで構成されています。
ヘッダーには次のボタンがあります。
| ボタン名 | 役割 |
|---|---|
| 設定保存 | 設定内容を保存し、アプリに反映します |
| 設定出力 | 現在の設定内容を JSON ファイルとしてダウンロードします |
| 設定読込 | JSON ファイルから設定内容を読み込みます |
| 設定画面を閉じる | 設定を保存せずに前の画面へ戻ります（右端の「×」アイコン） |
タブは次の3つです。
| タブ | 内容 | 説明 |
|---|---|---|
| 全体設定 | 背景色・テーブルヘッダー色・フォント・罫線 | 3-3〜3-6 |
| フィールド個別設定 | フィールドごとのラベルと入力欄の見た目 | 3-7 |
| 条件設定 | 条件に当てはまるときだけ変更する見た目 | 3-8 |
「全体設定」タブには、次の4つの枠が上から順に並んでいます。
- 背景色設定
- テーブルヘッダー色設定
- フォント設定
- 罫線デザイン設定
各枠の右上には「元に戻す」ボタンがあります。クリックすると、その枠の設定が初期値に戻ります。
💡 設定エリアは縦にスクロールします。下の枠が見えない場合は、設定エリア内でスクロールしてください。
3-3. 背景色設定
レコード画面の背景色を、画面ごとに設定します。
背景色は、画面全体の背景と、フィールドラベルの周囲に適用されます。
「背景色設定」の枠には、次の3項目があります。
| 項目名 | 適用される画面 | 初期値 |
|---|---|---|
| 詳細画面 | レコード詳細画面 | #f5f5f5 |
| 作成画面 | レコード追加画面 | #f5f5f5 |
| 編集画面 | レコード編集画面 | #f5f5f5 |
色の指定方法は2通りあります。どちらの方法でも同じ結果になります。
色見本から選ぶ場合
- 設定画面の「背景色設定」で、「詳細画面」の右側にある色見本をクリックします。
- 表示された色の選択画面で、使いたい色を選びます。
色見本の色と、右側のカラーコード（色を6桁の英数字で表す記号）が同時に変わります。
色見本をクリックすると、色の選択画面が開く
カラーコードを直接入力する場合
- 設定画面の「背景色設定」で、「詳細画面」の右側にある入力欄をクリックします。
- 「#」から始まる6桁のカラーコードを入力します。
入力した内容にあわせて、左側の色見本の色が変わります。
同じ手順で、「作成画面」と「編集画面」の色も指定します。
画面ごとに背景色を指定した例
💡 「作成画面」と「編集画面」だけ別の色にすると、入力中の画面か閲覧中の画面かを色で見分けられます。
⚠️ カラーコードは「#」を含む6桁（例：#f5f5f5）で入力してください。3桁の省略形や色名（例：red）では、意図した色にならない場合があります。
⚠️ 背景色を濃い色にすると、kintone 標準の文字色（黒系）が読みづらくなります。淡い色を選ぶことをおすすめします。
3-4. テーブルヘッダー色設定
テーブル（サブテーブル）の見出し行の背景色を、画面ごとに設定します。
「テーブルヘッダー色設定」の枠には、次の3項目があります。
| 項目名 | 適用される画面 | 初期値 |
|---|---|---|
| 詳細画面 | レコード詳細画面 | #3498db |
| 作成画面 | レコード追加画面 | #3498db |
| 編集画面 | レコード編集画面 | #3498db |
- 設定画面の「テーブルヘッダー色設定」で、「詳細画面」の色見本または入力欄で色を指定します。
- 同じ手順で「作成画面」の色を指定します。
- 同じ手順で「編集画面」の色を指定します。
指定方法は「3-3. 背景色設定」と同じです。
画面ごとにテーブルヘッダー色を指定した例
💡 フィールド個別設定で「ラベル：背景色」を設定した列は、そちらが優先されます。
⚠️ 全体設定で色を変更できるのは見出し行のみです。テーブルのデータ行（値が入る行）の背景色は変更できません。特定の列の入力欄に色を付けたい場合は、フィールド個別設定または条件設定を使います。
3-5. フォント設定
レコード画面全体のフォント（書体）を設定します。
- 設定画面の「フォント設定」で、「フォント種類」のプルダウンをクリックします。
- 使いたいフォントを選択します。
選択できるフォントは次の7種類です。
| 選択肢 | 説明 |
|---|---|
| デフォルト | kintone 標準に近いゴシック体です |
| 全角ゴシック | 角のあるゴシック体です |
| 全丸ゴシック | 角が丸いゴシック体です |
| 小杉 | シンプルなゴシック体です |
| 小杉丸 | 角が丸いゴシック体です |
| キウィ丸 | 丸みの強い書体です |
| Noto Sans JP | 標準的なゴシック体です |
「フォント種類」のプルダウンで、7種類のフォントから選ぶ
⚠️ 「デフォルト」以外のフォントは、インターネット上（Google Fonts）から読み込まれます。社内ネットワークで外部サイトへの接続が制限されている場合、フォントが適用されないことがあります。
💡 フォントはレコード画面全体に適用されます。フィールドごとに別のフォントを指定することはできません。
3-6. 罫線デザイン設定
「罫線」フィールドのデザインを設定します。
「罫線デザイン設定」の枠には、次の3項目があります。
| 項目名 | 内容 | 初期値 |
|---|---|---|
| 罫線色 | 線の色 | #888888 |
| スタイル | 線の種類 | 点線（丸） |
| 高さ | 線の太さ（px） | 1 |
枠の上部には、設定中の線が表示されるプレビュー欄があります。
値を変更すると、プレビューの線がその場で変わります。
- 設定画面の「罫線デザイン設定」で、「罫線色」の色見本または入力欄で色を指定します。
- 「スタイル」から線の種類を1つ選択します。
選択できるスタイルは次の4種類です。
| 選択肢 | 見た目 |
|---|---|
| 点線（丸） | 丸い点が並ぶ線です |
| 点線（四角） | 四角い点（破線）が並ぶ線です |
| １本線 | 途切れのない1本の線です |
| ２本線 | 平行な2本の線です |
- 「高さ」の数値入力欄に、線の太さを px で入力します。
プレビュー欄の線が、指定した色・種類・太さで表示されます。
罫線デザイン設定。上部のプレビューに、指定した線が表示される
⚠️ 「高さ」は 1 px 以上を指定してください。
⚠️ 「２本線」は、「高さ」が 3 px 以上でないと2本に見えません。2本の線として表示したい場合は、3 px 以上を指定してください。
💡 罫線のデザインは、詳細画面・作成画面・編集画面で共通です。画面ごとに変えることはできません。
3-7. フィールド個別設定
「フィールド個別設定」タブでは、フィールドごとにラベルと入力欄の見た目を設定します。
重要な項目を目立たせたい場合や、入力してほしい項目に色を付けたい場合に使います。
設定は詳細画面・追加画面・編集画面で共通です。
一覧の見方
フォームに配置されているフィールドが、フォームの上から順に、同じ行の中では左から順に表示されます。
- テーブル内のフィールドは「テーブル：（テーブル名）」、グループ内のフィールドは「グループ：（グループ名）」の見出しの下に表示されます。
- ラベル・スペース・罫線、関連レコード一覧、テーブル・グループそのものは表示されません。
- 個別設定を行ったフィールドは、フィールド名の左側に青い線が表示されます。タブ名の横には、設定済みのフィールドの数が表示されます。
- 「設定済みのみ表示」にチェックを入れると、個別設定を行ったフィールドだけを表示します。
- 行の右端の「クリア」で、そのフィールドの設定を空に戻せます。「すべてクリア」をクリックすると、確認メッセージのあと、すべてのフィールド個別設定を削除します。
- 設定したあとでフィールドが削除されたり、フィールドコードが変更されたりした場合は、一覧の最後の「フォームに存在しないフィールドの設定（適用されません）」の下に表示されます。
「フィールド個別設定」タブ。フィールドごとにラベルと入力欄の見た目を設定する
設定できる項目
| 区分 | 項目名 | 入力方法 | 空欄のとき |
|---|---|---|---|
| ラベル | 文字サイズ | 数値入力（px、8以上） | テーブル外 14 px／テーブル内 12 px |
| ラベル | 背景色 | 色見本／カラーコード入力 | テーブル外：全体設定の背景色／テーブル内：全体設定の「テーブルヘッダー色設定」の色 |
| ラベル | 文字色 | 色見本／カラーコード入力 | kintone 標準の色 |
| ラベル | 太字 | チェックボックス | 普通の太さ |
| 入力欄 | 背景色 | 色見本／カラーコード入力 | 変更しない |
| 入力欄 | 文字色 | 色見本／カラーコード入力 | 変更しない |
| 入力欄 | 太字 | チェックボックス | 太字にしない |
| 入力欄 | 一覧に反映 | チェックボックス | 一覧画面には反映しない |
文字サイズの入力欄には、空欄のときに適用される基本の値（テーブル外 14 px／テーブル内 12 px）が薄く表示されます。
行の右側のプレビューで、見え方を確認できます。
一覧に反映
「一覧に反映」にチェックを入れたフィールドは、入力欄の設定（背景色・文字色・太字）を、一覧画面（表形式）の値にも反映します。
- 反映されるのは、一覧に列として表示しているフィールドだけです。
- テーブル内のフィールドは一覧に反映できません（欄に「－」と表示されます）。
⚠️ レコード追加画面とレコード編集画面では、ドロップダウンの入力欄の設定（背景色・文字色・太字）は適用されません。レコード詳細画面には適用されます。
全体設定との優先関係
フィールド個別設定で値を入れた項目は、全体設定より優先されます。空欄の項目には、全体設定がそのまま適用されます。
| 全体設定 | 優先されるフィールド個別設定 |
|---|---|
| 背景色設定 | テーブル外フィールドの「ラベル：背景色」 |
| テーブルヘッダー色設定 | テーブル内フィールドの「ラベル：背景色」 |
3-8. 条件設定
「条件設定」タブでは、レコードの値が条件に当てはまるときだけ、指定したフィールドのラベルと入力欄の見た目を変更します。
「ステータスが『差し戻し』のときに備考欄を赤くする」「納期が未入力のときに納期欄に色を付ける」「単価が10,000以上の明細行だけ色を付ける」といった使い方ができます。
「条件設定」タブ。条件設定はカードごとに表示される
画面の見方
条件設定は、1件ずつカードで表示されます。カードは上から「条件設定1」「条件設定2」…と番号が付き、上にあるカードほど優先されます。
カードの見出しには、次の操作があります。
| 操作 | 内容 |
|---|---|
| ⠿（左端） | ドラッグして、カードの順番（優先順位）を入れ替えます |
| 有効／無効 | 切り替えスイッチです。「無効」にしたカードは適用されません。設定を消さずに一時的に止めたいときに使います |
| ▲／▼ | カードを折りたたむ／開きます。折りたたむと、条件と対象フィールドの件数だけが表示されます |
| × | カードを削除します（確認メッセージが表示されます） |
条件設定が1件以上あると、タブ名の横にその件数が表示されます。
カードの設定項目
| 項目 | 内容 |
|---|---|
| 適用画面 | 条件設定を適用する画面を「詳細」「作成」「編集」「一覧」から選びます（初期値はすべて） |
| 条件 | 見た目を変更するときの条件です。1枚のカードに10件まで設定できます |
| 条件を満たすときのデザイン | 条件を満たしたときに見た目を変更するフィールド（対象フィールド）と、その設定内容です |
💡 適用画面の「一覧」では、表形式の一覧の値（文字色・太字・背景色）だけを変更します。ラベルの設定と、テーブル内のフィールドは一覧には反映されません。
条件の組み合わせ
条件が複数ある場合の判定方法を、プルダウンで選びます。
| 選択肢 | 判定 |
|---|---|
| すべての条件を満たす | すべての条件に当てはまるとき（AND）に適用します |
| いずれかの条件を満たす | 1つ以上の条件に当てはまるとき（OR）に適用します |
条件の指定方法
1つの条件は「フィールド」「比較のしかた」「値」の3つで指定します。
- 「フィールド」で、条件に使うフィールドを選びます。入力欄に文字を入力すると、フィールド名で絞り込めます。
- 「比較のしかた」をプルダウンから選びます。選べる内容はフィールドの種類によって変わります。
- 「値」を指定します。値の入力方法も、フィールドの種類によって変わります。
| フィールドの種類 | 選べる比較のしかた | 値の指定方法 |
|---|---|---|
| 文字列（1行）・リンク | ＝、≠、次のいずれかに一致する、次のいずれにも一致しない、次を含む、次を含まない | 文字を入力 |
| 数値・計算・レコード番号 | ＝、≠、＞、＜、≧、≦、次のいずれかに一致する、次のいずれにも一致しない | 数値を入力 |
| 文字列（複数行） | 次を含む、次を含まない、空欄である、空欄でない | 文字を入力 |
| リッチエディター | 次を含む、次を含まない | 文字を入力 |
| ドロップダウン・ラジオボタン・チェックボックス・複数選択 | 次のいずれかに一致する、次のいずれにも一致しない | 選択肢にチェック |
| 日付・日時・作成日時・更新日時 | ＝、≠、＞、＜、≧、≦ | カレンダーから選択、または関数 |
| 時刻 | ＝、≠、＞、＜、≧、≦ | 時刻を選択 |
| ユーザー選択・作成者・更新者 | 次のいずれかに一致する、次のいずれにも一致しない | ユーザーを検索して選択、または関数 |
| 作業者 | 次のいずれかに一致する、次のいずれにも一致しない | ユーザーを検索して選択 |
| 組織選択・グループ選択 | 次のいずれかに一致する、次のいずれにも一致しない | 組織・グループを検索して選択 |
| 添付ファイル | ファイルあり、ファイルなし | 指定不要 |
💡 「次のいずれかに一致する」「次のいずれにも一致しない」で値を複数指定するときは、「＋ 値を追加」をクリックして入力欄を増やします。選択肢から選ぶフィールドでは、「（未選択）」にチェックを入れると、何も選択されていない状態を条件にできます。
未入力を条件にする
「＝」「≠」を選び、値を空欄のままにすると、未入力かどうかを判定できます。
| 比較のしかた | 値 | 条件に当てはまるとき |
|---|---|---|
| ＝ | 空欄 | フィールドが未入力のとき |
| ≠ | 空欄 | フィールドに値が入力されているとき |
例：納期が未入力のときに納期欄を黄色にする場合は、「納期」「＝」「（空欄）」と指定し、対象フィールドに「納期」を追加して入力欄の背景色を黄色にします。
関数を使う
日付・日時・作成日時・更新日時のフィールドと、ユーザー選択・作成者・更新者のフィールドでは、値の左のプルダウンで「固定値」と「関数」を切り替えられます。
関数を選ぶと、レコードを開いた日やログインしているユーザーを基準に判定します。
| 関数 | 内容 | 使えるフィールド |
|---|---|---|
| 今日 | 今日の日付 | 日付・日時・作成日時・更新日時 |
| 昨日 | 昨日の日付 | 日付・日時・作成日時・更新日時 |
| 明日 | 明日の日付 | 日付・日時・作成日時・更新日時 |
| 今日から○○後（負数で過去） | 今日から指定した日数・週数・月数・年数だけ後の日付。マイナスの値を入れると過去の日付になります | 日付・日時・作成日時・更新日時 |
| 現在日時 | 現在の日時 | 日時・作成日時・更新日時 |
| ログインユーザー | レコードを開いているユーザー | ユーザー選択・作成者・更新者 |
例：期限を過ぎたレコードの期限欄を赤くする場合は、「期限」「＜」「関数：今日」と指定します。
💡 選択肢（選べるユーザーの範囲）を設定したユーザー選択フィールドでは、関数は使えません。
ステータスを条件にする
プロセス管理が有効なアプリでは、条件の左端のプルダウンで「フィールド」と「ステータス」を切り替えられます。
「ステータス」を選ぶと、レコードのステータスを条件にできます。比較のしかたは「＝」「≠」「次のいずれかに一致する」「次のいずれにも一致しない」で、値はステータスの一覧から選びます。
⚠️ レコード追加画面にはステータスがないため、ステータスの条件は判定されません。「すべての条件を満たす」にしている場合、そのカードは追加画面では適用されません。
対象フィールドを設定する
- 「条件を満たすときのデザイン」の入力欄をクリックし、対象のフィールドを選びます。入力欄に文字を入力すると、フィールド名で絞り込めます。
- 追加したフィールドが表に表示されます。変更したい項目だけを入力し、変更しない項目は空欄のままにします。
- 行の右側にあるプレビューで、見え方を確認します。
設定できる項目は「フィールド個別設定」と同じです（ラベル：文字サイズ・背景色・文字色・太字／入力欄：背景色・文字色・太字）。「一覧に反映」の項目はありません。
対象フィールドから外すには、行の右端の「×」をクリックします。
対象フィールドを追加し、条件を満たすときの見た目を設定する
設定する
- 設定画面で「条件設定」タブをクリックします。
- 画面下の「＋ 条件設定を追加」をクリックします。新しいカードが一番下に追加されます。
- 「適用画面」で、適用したい画面にチェックを入れます。
- 「条件」で、条件の組み合わせ方を選び、条件を指定します。条件を増やすときは「＋ 条件を追加」をクリックします。
- 「条件を満たすときのデザイン」で、対象フィールドを追加し、見た目を設定します。
- 必要に応じて、⠿ をドラッグしてカードの順番を入れ替えます。
- 画面上部の「設定保存」をクリックします。
優先順位
同じフィールドに複数の設定がある場合は、次の順に優先されます。
条件設定 ＞ フィールド個別設定 ＞ 全体設定
- 条件設定どうしでは、上にあるカードほど優先されます。
- 優先は項目ごとに判定されます。上位の設定で空欄の項目には、下位の設定がそのまま適用されます。
例：「メモ」に対して、フィールド個別設定で「入力欄：背景色 青、文字色 白」、条件設定で「入力欄：背景色 赤」だけを設定した場合、条件に当てはまると「背景色 赤、文字色 白」になります。
⚠️ 「太字」は、オンにした設定だけが優先されます。下位の設定で太字にしているフィールドを、上位の設定で太字でなくすることはできません。
テーブル内のフィールドを使う場合
条件と対象フィールドに、テーブル内のフィールドを使えます。条件と対象フィールドの組み合わせによって、適用のしかたが変わります。
| 条件に使うフィールド | 対象フィールド | 適用のしかた |
|---|---|---|
| テーブル外 | テーブル外 | 条件に当てはまれば適用します |
| テーブル外 | テーブル内 | 条件に当てはまれば、その列のすべての行に適用します |
| テーブル内 | 同じテーブル内 | 行ごとに判定し、条件に当てはまった行だけに適用します |
| テーブル内 | テーブル外 | テーブルのどれか1行でも条件に当てはまれば適用します |
| テーブル内 | 別のテーブル内 | テーブルのどれか1行でも条件に当てはまれば、その列のすべての行に適用します |
行ごとに判定される対象フィールドには、表のフィールド名の下に「行ごとに判定」と表示されます。
例：明細テーブルで、単価が10,000以上の行だけ「品目」と「単価」の入力欄を黄色にする場合は、「単価」「≧」「10000」と指定し、対象フィールドに「品目」と「単価」を追加します。
💡 テーブルの見出し（列名）は全行で共通のため、行ごとには変えられません。行ごとに判定する対象フィールドのラベルの設定は、どれか1行でも条件に当てはまれば見出しに適用されます。
💡 テーブル外のフィールドとテーブル内のフィールドを、1枚のカードの条件に混ぜることもできます。行ごとに判定する場合は、テーブル外のフィールドの値と、その行の値を組み合わせて判定します。
条件に当てはまるかどうかの判定のタイミング
| 画面 | 判定するタイミング |
|---|---|
| レコード詳細画面 | 画面を開いたとき |
| レコード追加画面・編集画面 | 画面を開いたときと、条件に使っているフィールドの値を変更したとき（テーブルの行の追加・削除を含む） |
| レコード一覧画面（表形式） | 一覧を表示したときと、一覧で直接編集した行を保存したとき（その行だけ） |
追加画面・編集画面では、値を変更するとその場で見た目が切り替わります。保存する必要はありません。
💡 計算フィールドを条件に使っている場合は、ほかのフィールドの値を変更したタイミングで判定し直します。カードの下に、その旨の注意書きが表示されます。
保存時のチェック
次の場合は、保存時に「入力内容を確認してください」というエラーが表示され、保存できません。エラーが表示されると「条件設定」タブに切り替わります（フィールド個別設定にもエラーがある場合は「フィールド個別設定」タブに切り替わります）。
| エラーの内容 | 対処 |
|---|---|
| 条件を1件以上設定してください | 「＋ 条件を追加」で条件を追加してください |
| 条件のフィールドを選択してください | 条件に使うフィールドを選んでください |
| 条件の値を指定してください／入力してください | 値を指定してください（「＝」「≠」は空欄のままでも保存できます） |
| 対象フィールドを1件以上追加してください | 「条件を満たすときのデザイン」でフィールドを追加してください |
| 対象フィールド「○○」の設定が空です | 対象フィールドの項目を1つ以上設定するか、「×」で対象から外してください |
| ○○がフォームに存在しません | 設定後にフィールドが削除されたか、フィールドコードが変更されています。条件や対象フィールドを選び直してください |
| 適用画面を1つ以上選択してください | 「適用画面」で1つ以上にチェックを入れてください |
| このアプリはプロセス管理が無効のため、ステータス条件は使用できません | ステータスの条件を削除するか、プロセス管理を有効にしてください |
| ラベルの文字サイズは8以上の数値で入力してください | 文字サイズを8以上にしてください（フィールド個別設定でも同じチェックがあります） |
| ○○は #rrggbb 形式で入力してください | 色は「#」を含む6桁のカラーコードで入力してください（フィールド個別設定でも同じチェックがあります） |
⚠️ 条件設定は30件まで、1枚のカードの条件は10件まで、対象フィールドは50件まで設定できます。
⚠️ 「すべてクリア」をクリックすると、確認メッセージのあと、すべての条件設定を削除します。
3-9. 設定を保存する
- 設定画面の上部にある「設定保存」をクリックします。
- 処理中を示すマークが消えるまで待ちます。
- 「設定を保存しました」というメッセージが表示されたら、「OK」をクリックします。
保存が完了し、レコード画面にデザインが適用されます。
保存が完了すると「設定を保存しました」と表示される
キーボードショートカットでも保存できます。
- Windows の場合：
Ctrlキーを押しながらSキーを押します - Mac の場合：
commandキーを押しながらSキーを押します
⚠️ 「更新処理に失敗しました」と表示された場合は、保存が完了していません。しばらく待ってから、もう一度「設定保存」をクリックしてください。
⚠️ 設定の合計サイズが上限（250KB）を超えると、「設定サイズが上限（250KB）を超えています」と表示され、保存できません。条件設定を減らしてください。
3-10. 設定を書き出す・読み込む
同じ設定を別のアプリでも使いたい場合は、設定内容をファイルとして書き出し、別のアプリで読み込めます。
設定を書き出す（設定出力）
- 設定画面の上部にある「設定出力」をクリックします。
design-config-（アプリID）.json という名前のファイルがダウンロードされます。
設定画面の上部にある「設定出力」「設定読込」ボタン
設定を読み込む（設定読込）
- 読み込み先のアプリで、プラグインの設定画面を開きます。
- 画面上部の「設定読込」をクリックします。
- 表示されたファイル選択画面で、書き出した JSON ファイルを選択します。
- 「設定を読み込みますか？」というメッセージが表示されます。
- 内容を確認し、「読み込む」をクリックします。
「設定読込」でファイルを選ぶと表示される確認画面
- 「設定を読み込みました」というメッセージが表示されたら、「OK」をクリックします。
- 設定画面の内容を確認します。
- 画面上部の「設定保存」をクリックします。
⚠️ 「読み込む」をクリックした時点では、まだ保存されていません。必ず「設定保存」をクリックしてください。
⚠️ 読み込みを行うと、現在の設定はすべて上書きされます。元の設定に戻せるよう、読み込み前に「設定出力」で書き出しておくことをおすすめします。
読み込み時のメッセージ
| メッセージ | 内容と対処 |
|---|---|
| 読み込みに失敗しました | ファイルの中身を読み取れませんでした。JSON ファイルが壊れていないか確認してください |
| 設定ファイルの形式が正しくありません | このプラグインの設定ファイルではありません。「設定出力」で書き出したファイルを選択してください |
| ※ 値が不正な項目は初期値で読み込みます | 「設定を読み込みますか？」の画面に赤字で表示されます。一部の値が正しくないため、その項目のみ初期値で読み込まれます。対象の設定項目の名前（例：background_detail）が並びます |
| ※ 条件設定に、このアプリに存在しないフィールドが含まれています | 「設定を読み込みますか？」の画面に赤字で表示されます。対象のフィールドコードが並びます。読み込んだあと、該当する条件や対象フィールドを設定し直してください |
3-11. 全体設定の項目一覧
| 枠 | 項目名 | 入力方法 | 初期値 |
|---|---|---|---|
| 背景色設定 | 詳細画面 | 色見本／カラーコード入力 | #f5f5f5 |
| 背景色設定 | 作成画面 | 色見本／カラーコード入力 | #f5f5f5 |
| 背景色設定 | 編集画面 | 色見本／カラーコード入力 | #f5f5f5 |
| テーブルヘッダー色設定 | 詳細画面 | 色見本／カラーコード入力 | #3498db |
| テーブルヘッダー色設定 | 作成画面 | 色見本／カラーコード入力 | #3498db |
| テーブルヘッダー色設定 | 編集画面 | 色見本／カラーコード入力 | #3498db |
| フォント設定 | フォント種類 | プルダウン（7種類） | デフォルト |
| 罫線デザイン設定 | 罫線色 | 色見本／カラーコード入力 | #888888 |
| 罫線デザイン設定 | スタイル | 4種類から選択 | 点線（丸） |
| 罫線デザイン設定 | 高さ | 数値入力（px、1以上） | 1 |
フィールドラベルの文字サイズは、全体では テーブル外 14 px／テーブル内 12 px（普通の太さ）にそろえて表示されます。フィールドごとに変えたい場合は、フィールド個別設定を使います。
操作手順
設定した内容は、レコードの詳細画面・追加画面・編集画面を開いたときに自動で適用されます。
一覧に反映する設定がある場合は、一覧画面（表形式）を開いたときにも自動で適用されます。
レコード画面上でボタンを押すなどの操作は必要ありません。
設定した背景色・罫線が適用されたレコード追加画面
制限事項・注意点
5-1. 適用範囲に関する制限
- 全体設定が適用されるのは、レコードの詳細画面・追加画面・編集画面の3画面のみです。
- 一覧画面に反映されるのは、表形式の一覧の値（文字色・太字・背景色）だけです。ラベルの設定・テーブル内のフィールドは反映されません。
- 表形式以外の一覧、グラフ画面、印刷用画面には適用されません。
- モバイル版（スマートフォン向け画面）には適用されません。
- 全体設定では、テーブルのデータ行の背景色は変更できません。
- レコード追加画面とレコード編集画面では、ドロップダウンの入力欄の設定（背景色・文字色・太字）は適用されません。
5-2. 色・サイズ指定に関する注意
- カラーコードは「#」を含む6桁の形式で入力してください。
- フィールドラベルの文字サイズは 8 px 以上、罫線の「高さ」は 1 px 以上を指定してください。
- 極端に大きい文字サイズや、極端に太い罫線を指定すると、レイアウトが崩れる場合があります。
- 背景色と文字色の組み合わせによっては、文字が読みづらくなります。保存後、実際のレコード画面で見え方を確認してください。
5-3. フォントに関する注意
- 「デフォルト」以外のフォントは、インターネット上（Google Fonts）から読み込まれます。
- 外部サイトへの接続が制限されている環境では、フォントが適用されない場合があります。
- フォントの設定は、詳細画面・追加画面・編集画面で共通です。画面ごとに変えることはできません。
5-4. 保存・反映に関する注意
- 「元に戻す」「すべてクリア」「設定読込」を行っただけでは保存されません。必ず「設定保存」をクリックしてください。
- 保存後もデザインが変わらない場合は、ブラウザの再読み込み（更新）を行ってください。
5-5. 他のプラグイン・カスタマイズとの併用について
- 同じアプリに、画面の見た目を変更する他のプラグインや JavaScript カスタマイズが設定されている場合、設定内容が互いに打ち消し合うことがあります。
- 意図した見た目にならない場合は、他のプラグインを一時的に無効にして、原因を切り分けてください。