通知サポートプラグイン for kintoneの通知カードの配色を変えて自社好みにカスタマイズ

通知サポートプラグイン for kintone では、通知カードに対する色の設定（文字色や背景色など）を行うことができます。デフォルトでは次のようにシンプルな配色としており、このままでも十分に利用できますが、配色を変えることで雰囲気が変わり、目立たせることも可能になります。

本記事では、通知カードの配色について、実際に使える配色サンプルをご紹介します。
シンプル表示も良いですが、意図的に色を変えることで、自社の雰囲気に合った表現や、ユーザーの目を止めやすい表現も可能になります。

通知サポートプラグインの通知カードの色設定について

通知サポートプラグインでは、通知カードに対する「ヘッダー部分」「メイン部分」「フッター部分」の文字色、背景色、リンク色といった設定が可能です。合わせて、「カードの枠線色」も設定が可能です。

プラグイン設定画面のカード設定に関する設定

これらを組み合わせて、自社のコーポレートカラーに合わせたり、あえて奇抜に表現したりなど、目的に応じた配色が可能です。

通知カードの配色サンプル

配色を変えることで、大きく印象も変わります。
ここでは、実運用でも使えそうな配色パターンをいくつかご紹介します。

クラシックブルー (デフォルト)

デフォルトの配色設定です。シンプルでkintoneにもなじみやすい形としています。

kintone風

見た目をkintoneで使われている色を用いた配色パターンです。リンク色も合わせることで、全体としてkintone感が出せます。

スレートミニマル

ミニマルに表現したパターンです。無駄な色遣いは避け、メッセージ部分を読ませる場合は最適です。

サンシャインイエロー

kintoneのデザインテーマ「イエロー」に寄せた配色パターンです。

バンブーフォレスト

kintoneのデザインテーマ「グリーン」に寄せた配色パターンです。

茜色

kintoneのデザインテーマ「レッド」に寄せた配色パターンです。

ブラックシンプル

kintoneのデザインテーマ「ブラック」に寄せた配色パターンです。

アプリコットジャム

ナチュラルな温かい雰囲気の配色パターンです。

テラコッタアース

茶色をベースにしたナチュラルな配色パターンです。

マカロンライム

緑色をベースにしたパステルな配色パターンです。

ダークモード・ネイビー

カード部分のみダークモードで表現することで、意図的に目立たせる配色パターンです。

グラファイト＆ライム

ダークモードの別パターンです。

その他の配色

配色パターンは無数にあります。上記以外にもちょっと色を変えることでがらりと変わります。

その他の配色パターン例

まとめ

通知サポートプラグイン for kintone の通知カードに対する配色について、ビジネス系、ナチュラル系、パステル系、和風、ダーク系など、サンプルパターンをいくつかご紹介しました。

色が変わることで大きく印象も変わります。コーポレートカラーに寄せて見たり、あえて奇抜にしてインパクト重視にしてみたりと、色々なパターンをぜひお試しください。