kintoneのボタン、遊びでデザインしてみた

ほねた

2026年3月27日 12:47

■ はじめに

全く業務の効率化に直結するわけでもないし、正直使いどころがあるかもわからない。
それでも「自分が管理するアプリくらい、見た目もちゃんとこだわりたい」と思って、今回いろいろ実験してみました。

kintoneはどうしても機能重視になりがちだけど、
実際に毎日触るものだからこそ、ちょっとしたUIの違いで使う側の気持ちも変わると思っています。

完全に自己満足に近い部分もあるけど、
こういう積み重ねが最終的に“使いやすさ”とか“わかりやすさ”に繋がるはず。

■ 作ったもの

一覧画面にこんな感じでボタンを追加してます。

・業務系ボタン

姓名生成
APIテスト
一括更新
確認あり
削除
裏処理

・デザイン系ボタン

グラデーション
ガラス風（Glass UI）
ネオン
ふわ（ニューモーフィズム）

■ デザインの考え方

今回意識したのはシンプルで、

kintoneのUIと喧嘩しない
でもちょっとだけ“それっぽく”する

このバランスです。

■ ホバー（マウス乗せた時の動き）について

最初はグラデーションボタンだけ動きをつけてたんですが、
それだと他のボタンと統一感がなくてちょっと違和感がありました。

なので最終的には、

👉 全ボタンに軽いホバーをつけて統一

する形にしています。

btn.onmouseenter = () => {
  btn.style.opacity = '0.85';
};

btn.onmouseleave = () => {
  btn.style.opacity = '1';
};

■ カラー変更コード（コピペ用）

ピンク

border: 1px solid #ff4d8d;
color: #ff4d8d;

ブルー

border: 1px solid #3498db;
color: #3498db;

グリーン

border: 1px solid #2ecc71;
color: #2ecc71;

オレンジ

border: 1px solid #f39c12;
color: #f39c12;

レッド

border: 1px solid #e74c3c;
color: #e74c3c;

■ デザイン別設定（カラー含む）

● グラデーション

👉 ピンク × パープル（#ff4d8d → #6c5ce7）

background: 'linear-gradient(135deg, #ff4d8d, #6c5ce7)',
color: '#fff'

● ガラス（Glass UI）

👉 半透明ホワイト × グレー文字

background: 'rgba(255,255,255,0.2)',
border: '1px solid rgba(255,255,255,0.3)',
color: '#333'

● ネオン

👉 ダーク背景 × シアン発光（#00f0ff）

background: '#0f172a',
border: '1px solid #00f0ff',
color: '#00f0ff',
boxShadow: '0 0 8px #00f0ff'

● ふわ（ニューモーフィズム）

👉 ライトグレー × 陰影（立体感）

background: '#f5f6fa',
color: '#333',
boxShadow: '6px 6px 12px #dcdde1, -6px -6px 12px #ffffff'

■ まとめ

kintoneのカスタマイズって「業務効率化」が目的になりがちだけど、
個人的には“使いたくなるUI”も同じくらい大事だと思っています。

正直今回の内容は業務的な意味はほぼないです。笑
でも、自分が毎日触るものだからこそ、少しでも気持ちよく使えるようにしたい。

こういう小さいこだわりの積み重ねが、
結果的にいいプロダクトに繋がるんじゃないかなと思ってます。

とりあえず今回は完全に実験。
でもこの感じ、普通に業務にも持っていけそうなので、今後ちょっとずつ混ぜていきます。