2026.01.26
目次
こんにちは！
ジョイゾーのプラグインお問い合わせ担当の伊藤です。
今回は、機能面から少し視点を変えて、「タブのデザイン（色）」についてお話ししたいと思います。
タブ表示プラグイン機能について知りたい方はこちらのブログをご確認ください！
タブ表示プラグインはタブの「背景色」と「文字色」を自由に変えられるところが推しポイントの１つでもあるのですが、
「自由と言われても、何色にすればいいか迷う……」
「なんとなく原色を選んだら、目がチカチカしてしまった」
というお声をいただくことがあります。
毎日使う画面なので、見やすくて、ちょっと気分の上がる「センスのいい色」にしたいですよね！
そこで今回は、デザインに詳しくなくても大丈夫！
設定画面のカラーピッカーにコードを入れるだけで再現できる、おすすめのカラー配色をご紹介します。
ジョイゾーのタブ表示プラグインの文字色と背景色の変更の方法
おすすめの色を紹介する前に、ひとつだけ設定のポイントをご紹介します。
プラグインの設定画面にある色指定（カラーピッカー）ですが、初期表示では「RGB（赤・緑・青の数値指定）」になっています。
「RGBなんて分からない…」と思われた方、ご安心ください！
実はここ、クリックで形式を切り替えることができるんです！
色指定の右側にある矢印アイコン（▲▼）をクリックすると、以下のように指定方法が変わります。
- RGB（初期表示）
- HSL（色相・彩度・輝度）
- Hex（8桁の16進数カラーコード）
今回は、Webデザインなどで一般的に使われている「03.16進数カラーコード（Hex）」を使ってご紹介します。
ここをカチカチっとクリックして、#（シャープ）から始まる入力欄に切り替えてから、以下のコードをコピー＆ペーストしてみてください！
①優しい空気に包まれる、柔らかく温かい北欧パステルの配色
| 背景色 | 文字色 | |
| 1 | #FFB7B2 | #555555 |
| 2 | #B5EAD7 | #555555 |
| 3 | #E2F0CB | #555555 |
| 4 | #C7CEEA | #555555 |
| 5 | #FFDAC1 | #555555 |
②伝統と新しさが調和した、落ち着きのある和風モダンの配色
| 背景色 | 文字色 | |
| 1 | #9E2A2B | #FFFFFF |
| 2 | #2F4858 | #FFFFFF |
| 3 | #D4A373 | #FFFFFF |
| 4 | #5F6F52 | #FFFFFF |
| 5 | #6D597A | #FFFFFF |
③深緑から木の色、木漏れ日まで。目に優しく、癒やし効果の高いアースカラーの配色
| 背景色 | 文字色 | |
| 1 | #1B4D3E | #FFFFFF |
| 2 | #4A7c59 | #FFFFFF |
| 3 | #74A57F | #FFFFFF |
| 4 | #8C6450 | #FFFFFF |
| 5 | #E1DBC9 | #2F2F2F |
④おもちゃ箱をひっくり返したような、楽しくて元気いっぱいなトイ・ポップの配色
| 背景色 | 文字色 | |
| 1 | #FF5252 | #FFFFFF |
| 2 | #448AFF | #FFFFFF |
| 3 | #FFD740 | #333333 |
| 4 | #69F0AE | #333333 |
| 5 | #E040FB | #FFFFFF |
⑤弾ける果実のようにフレッシュで、気分も明るくなる爽快なシトラス・ビタミンの配色
| 背景色 | 文字色 | |
| 1 | #FFA726 | #FFFFFF |
| 2 | #FFEB3B | #4E342E |
| 3 | #CDDC39 | #4E342E |
| 4 | #4FC3F7 | #FFFFFF |
| 5 | #FF8A65 | #FFFFFF |
⑥大事なポイントがひと目で分かる、鮮やかで強調効果の高い蛍光ペン風の配色
| 背景色 | 文字色 | |
| 1 | #FF80AB | #FFFFFF |
| 2 | #80D8FF | #01579B |
| 3 | #FFFF00 | #212121 |
| 4 | #B9F6CA | #1B5E20 |
| 5 | #EA80FC | #FFFFFF |
⑦知性的で落ち着いた印象を与える、ビジネスに最適な信頼感のあるブルーの配色
| 背景色 | 文字色 | |
| 1 | #1565C0 | #FFFFFF |
| 2 | #0277BD | #FFFFFF |
| 3 | #00695C | #FFFFFF |
| 4 | #546E7A | #FFFFFF |
| 5 | #263238 | #FFFFFF |
⑧シンプルだからこそ際立つ美しさ、都会的で洗練されたシック・モノトーンの配色
| 背景色 | 文字色 | |
| 1 | #212121 | #FFFFFF |
| 2 | #424242 | #FFFFFF |
| 3 | #757575 | #FFFFFF |
| 4 | #BDBDBD | #333333 |
| 5 | #CFD8DC | #333333 |
「色を変えるだけで、何か変わるの？」と思われるかもしれませんが、実は大きな効果があります。
ポイント①直感的な分かりやすさ
「赤いタブを開いている時は、入力を慎重にしよう」と自然と意識ができたり、部署ごとに色を統一して「青は営業用、緑は経理用」とルール化したりすることで、誤操作や入力ミスを減らすことに繋がります。
ポイント②画面の見た目が良くなる
ごちゃごちゃしていた画面が、色ですっきりと整理され、センス良くまとまっていると、それだけで「おっ、このアプリ使いやすそう！」と感じませんか？
毎日向き合う画面だからこそ、使いやすさと見た目の良さを両立できると、日々の業務へのモチベーションも少し上がるはずです。
ジョイゾーのタブ表示プラグインは、設定画面の下部に「リアルタイムプレビュー」が表示されます。
保存する前に「あ、この色いいな」「ちょっと派手すぎるかな？」と確認しながら調整できますので、ぜひ色々な組み合わせを試して、お気に入りのカラーを見つけてみてください!
おわりに
今回はサクッと読める「色」の活用術でした。
機能だけでなく、デザインも少し工夫するだけで、kintoneへの愛着がもっと湧いてくるはずです。
「こんな色の組み合わせも良かったよ！」という発見があれば、ぜひ教えてください！
ご不明点等ございましたら、よくある質問をご参照ください。
よくある質問をご覧いただいても解決しない場合は、お気軽にお問い合わせください。
