kintoneを使っていて、こんなことを感じたことはありませんか？
- Groupの区切りが分かりづらい
- どこまでが1セットなのか視線で追いにくい
- フォームが平面的で、情報量が増えると疲れる
- サブテーブルとの境界が曖昧
特に、項目数が増えてくる業務アプリでは、
「見た目の読みやすさ」はかなり重要です。
今回は、以前作った
- GroupをカードUI風にするCSS
- サブテーブルの視認性を改善するCSS
を紹介します。
なぜkintone標準Groupは見づらいのか
標準のGroupは、かなり“フラット”な見た目です。
- 枠線が細い
- 背景差が弱い
- 境界線が曖昧
- 視線誘導がない
そのため、
「どこからどこまでが同じ情報なのか」
を直感的に把握しづらい。
特に、
- 顧客情報
- 契約情報
- 請求情報
- 作業情報
のように、入力ブロックが多いアプリでは顕著です。
改善方針
今回のCSSでは、
Group
- カード化
- 角丸
- シャドウ追加
- 左アクセントバー追加
サブテーブル
- Zebra表示
- Hover強調
- ヘッダー強調
- 行間調整
- operation列固定
を行っています。
実際のCSS
Group Card UI
/* グループ本体（カード） */
.control-group-gaia {
position: relative !important;
margin: 18px 0 !important;
padding: 18px 18px 14px 22px !important;
border-radius: 14px;
border: 1px solid #e5e9f2;
background: #fff;
box-shadow:
0 1px 0 rgba(0, 0, 0, .02),
0 8px 24px rgba(0, 0, 0, .04);
}
/* 左アクセントバー */
.control-group-gaia::before {
content: "";
position: absolute;
left: 0;
top: 16px;
bottom: 16px;
width: 6px;
border-radius: 6px;
background: linear-gradient(180deg, #d4e2ff, #dbe3ff);
}
このUIで変わること
かなり変わります。
特に変わるのが、
「情報のまとまり感」
です。
人間って、
「線」よりも「塊」で情報を認識する
んですよね。
だから、
- 背景
- シャドウ
- 余白
- 境界
を整えるだけで、
フォーム全体がかなり読みやすくなります。
サブテーブルも改善
kintoneのサブテーブルも、
標準状態だとかなり視認性が弱いです。
特に、
- 横スクロール
- operation列
- 行境界
が見づらい。
そこで、
/* ゼブラ */
.subtable-gaia tbody tr:nth-child(even) {
background: #fbfcff !important;
}
/* hover */
.subtable-gaia tbody tr:hover {
background: #eef5ff !important;
}
さらに、
.subtable-gaia {
border: 1px solid #e5e9f2 !important;
border-radius: 12px !important;
overflow: hidden !important;
}
で“テーブルの塊感”を強化しています。
kintoneは“業務UI”
ここ、結構大事だと思っています。
kintoneは単なるDBではなく、
「毎日触る業務UI」
です。
つまり、
- 入力しやすい
- 見やすい
- 読みやすい
- ミスしにくい
は、かなり重要。
でも実際は、
「動けばOK」
で終わってしまうケースも多い。
だからこそ、
こういう“見た目の改善”って、
地味だけどかなり効きます。
最後に
kintoneって、
CSSを少し整えるだけでも
かなり印象が変わります。
特に、
- Group
- サブテーブル
- ラベル
- 入力余白
あたりは、改善効果が大きいです。
業務アプリは「毎日使うもの」なので、
“ちょっと見やすい”
の積み重ねが、
最終的にはかなり効いてきます。
ハッシュタグ
#kintone
#CSS
#業務改善
#フロントエンド
#JavaScript
#UIUX
#Cybozu
#kintoneカスタマイズ
#システム開発
#ノーコード