【Cursor × kintone】モダンUIも10分!? AI時代のkintoneカスタマイズ開発

本記事は、「kintone Advent Calendar 2025」16日目の記事です。
こんにちは！私は、cybozu developer networkチームのaiko-hanです。

はじめに

kintoneには、フロントエンドを柔軟に拡張できるカスタマイズというものがあります。

生成AIの登場によって、このkintoneカスタマイズも、より効率よく開発できる余地が広がってきていると個人的に感じています。

本記事では、AIを活用して、“AIっぽくない”モダンUIのkintoneカスタマイズを実装してみた例を紹介します。その開発フローやAIの使い方について学んだ内容をまとめました。

「kintoneカスタマイズ」は、kintoneが用意しているAPIやイベントを使って、画面の見た目をJavaScript / CSSで拡張したり、REST APIで外部サービスと連携したりする仕組みのことです。詳しくは、公式ドキュメントをご覧ください。

最終的に完成したもの

はじめに、最終的に完成したものをお見せします。
今回は「レコード一覧画面をカンバンボードUIにする」カスタマイズを題材にしてやってみました。

アプリも何にもないところから、ここまで10分でした。速い！

※本記事は、このカンバンボード自体が主役ではなく、AIをどう使って実装したか、そのプロセスが本題になります。

今回のアプローチの全体像

要件

本検証の要件はこちらです。

• いかにもAIが生成したっぽいデザインにならないこと
• 既存のkintoneのスタイルと競合しないこと
• 実装には React / TypeScript / Tailwind CSS を使用すること
• 再利用可能なフレームワークにすること（カンバンUIに特化することが目的じゃない）

前提となる環境

• Cursor v2.2.20を使用
• kintone MCP ServerをCursorにインストール済

全体フロー

全体の流れはこちら。
人間とAIの役割分担をわかりやすく図にしてみました。

STEP 1：再利用可能なコンテキストを用意する

CursorのRulesで、kintoneカスタマイズに必要な情報を再利用可能な形で明文化しました。

🔽 CursorのRulesについてはこちら

ディレクトリ構成

ディレクトリ構成は次の通りで、3つのファイルを作成しました。

この3つのファイルの中身について、簡単に説明します。

AGENTS.md　~プロジェクト全体のルール~

CursorのRules AGENTSに書かれている通り、このプロジェクトでAIエージェントに必ず守って欲しいことを記載しました。

AGENTS.md

# プロジェクト方針

## kintoneカスタマイズ
- カスタマイズ用ディレクトリは `*-app` 形式で命名すること（例: `kanban-app`, `task-app`）
- アプリをMCPで新規作成する場合、テストデータを登録するか質問すること

## コーディング
- React、TypeScript、TailwindCSSを使うこと
- npmではなく、pnpmを必ず使うこと

## デザイン
- フロントエンドを改修する際は、必ず毎回 `.cursor/rules/design-principal.mdc` を参照すること

design-principal.mdc ~UIデザインの設計指示~

AIにモダンなUIを実装させるために、Typography / Color / Motion / Backgrounds の4つの観点でUI設計の方針を定義しました。

このファイルは、"いかにもAIが生成したっぽいデザインにならないこと" の要件を満たすために必要なものです。

design-principal.mdcの中身はこちら

design-principal.mdc

---
name: frontend-design
description: Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.
license: Complete terms in LICENSE.txt
globs:
- "*-app/**"
---

このファイルを参照したら「デザインはじめるでー！！！！！！！」といってください。

This skill guides creation of distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. Implement real working code with exceptional attention to aesthetic details and creative choices.

The user provides frontend requirements: a component, page, application, or interface to build. They may include context about the purpose, audience, or technical constraints.

## Design Thinking

Before coding, understand the context and commit to a BOLD aesthetic direction:
- **Purpose**: What problem does this interface solve? Who uses it?
- **Tone**: Pick an extreme: brutally minimal, maximalist chaos, retro-futuristic, organic/natural, luxury/refined, playful/toy-like, editorial/magazine, brutalist/raw, art deco/geometric, soft/pastel, industrial/utilitarian, etc. There are so many flavors to choose from. Use these for inspiration but design one that is true to the aesthetic direction.
- **Constraints**: Technical requirements (framework, performance, accessibility).
- **Differentiation**: What makes this UNFORGETTABLE? What's the one thing someone will remember?

**CRITICAL**: Choose a clear conceptual direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

Then implement working code (HTML/CSS/JS, React, Vue, etc.) that is:
- Production-grade and functional
- Visually striking and memorable
- Cohesive with a clear aesthetic point-of-view
- Meticulously refined in every detail

## Frontend Aesthetics Guidelines

Focus on:
- **Typography**: Choose fonts that are beautiful, unique, and interesting. Avoid generic fonts like Arial and Inter; opt instead for distinctive choices that elevate the frontend's aesthetics; unexpected, characterful font choices. Pair a distinctive display font with a refined body font.
- **Color & Theme**: Commit to a cohesive aesthetic. Use CSS variables for consistency. Dominant colors with sharp accents outperform timid, evenly-distributed palettes.
- **Motion**: Use animations for effects and micro-interactions. Prioritize CSS-only solutions for HTML. Use Motion library for React when available. Focus on high-impact moments: one well-orchestrated page load with staggered reveals (animation-delay) creates more delight than scattered micro-interactions. Use scroll-triggering and hover states that surprise.
- **Spatial Composition**: Unexpected layouts. Asymmetry. Overlap. Diagonal flow. Grid-breaking elements. Generous negative space OR controlled density.
- **Backgrounds & Visual Details**: Create atmosphere and depth rather than defaulting to solid colors. Add contextual effects and textures that match the overall aesthetic. Apply creative forms like gradient meshes, noise textures, geometric patterns, layered transparencies, dramatic shadows, decorative borders, custom cursors, and grain overlays.

NEVER use generic AI-generated aesthetics like overused font families (Inter, Roboto, Arial, system fonts), cliched color schemes (particularly purple gradients on white backgrounds), predictable layouts and component patterns, and cookie-cutter design that lacks context-specific character.

Interpret creatively and make unexpected choices that feel genuinely designed for the context. No design should be the same. Vary between light and dark themes, different fonts, different aesthetics. NEVER converge on common choices (Space Grotesk, for example) across generations.

**IMPORTANT**: Match implementation complexity to the aesthetic vision. Maximalist designs need elaborate code with extensive animations and effects. Minimalist or refined designs need restraint, precision, and careful attention to spacing, typography, and subtle details. Elegance comes from executing the vision well.

Remember: Cursor is capable of extraordinary creative work. Don't hold back, show what can truly be created when thinking outside the box and committing fully to a distinctive vision.

そもそも、なぜこのファイルが必要なのか

AIにデザインをさせると、「それっぽいがどこか既視感が…」と感じることがあります。
これは、いわゆる「AIスロップ的」と呼ばれるものです。AIスロップ的なデザインが生まれやすいのは技術的要因があります。

AIのデザインが似たようになる技術的要因

• 「Distributional convergence（分布の収束）」という統計的な理由
• 与えられた文脈が少ない場合、AIは安全で平均的なデザインに寄りやすい

上記の要因から、結果として、配色やレイアウトの似たUIが生成されやすくなるそうです。そして、この現象を防ぐために、Claudeが解決策の一つとして提供しているSkills frontend-design@claude-code-pluginの内容をほぼそのまま、今回はCursorのRulesで応用しました。

詳しくは、Claudeの公式ブログをご覧ください
Improving frontend design through Skills

kintone-customize.mdc ~kintone特有の情報~

kintoneカスタマイズ特有の設計思想や制約を記載しました。

kintone-customize.mdcの中身はこちら

kintone-customize.mdc

---
description: kintoneカスタマイズのルール
globs:
  - "*-app/**"
---

このファイルを参照したら「kintoneカスタマイズ、はじめるでー！！！！！！！」といってください。

# kintone カスタマイズルール

kintoneのJS/CSSカスタマイズを行う際は、以下のルールに従ってください。

## APIの仕様
- [kintone JavaScript API](https://cybozu.dev/ja/kintone/docs/js-api/)
- [kintone REST API](https://cybozu.dev/ja/kintone/docs/rest-api/)

kintone APIの基本的な使い方は次の通りです。
- [はじめてのkintone API](https://cybozu.dev/ja/tutorials/hello-kinapi/first-step/)

## 必須ルール

### kintone REST API の呼び出し

kintone REST APIを呼び出す際は、必ず `kintone.api()` を使用してください。
- [セッション認証](https://cybozu.dev/ja/id/edae2a9d04c6e7d0afffda3a/#session)の方法1
- [kintone REST APIリクエストを送信する](https://cybozu.dev/ja/kintone/docs/js-api/api/kintone-rest-api-request/)

### 変更禁止エリア

以下のエリアは変更しないでください：
- `class="contents-actionmenu-gaia"` のエリア
- kintoneのシステム領域（ヘッダー、サイドメニューなど）

### 禁止事項

以下は使用しないでください：
- `cybozu.` で始まる非公開API
- `eval()` 関数
- `innerHTML` での未サニタイズ入力
- 信頼できないソースからの外部スクリプト読み込み

## 技術スタック

kintoneカスタマイズは以下の技術スタックで実装してください：
- **Vite** + **React** + **TypeScript** + **Tailwind CSS**
- パッケージマネージャは **pnpm** を使用

## 命名規則

### CSSクラス名

kintone本体のスタイルとの衝突を防ぐため、プレフィックスを使用してください：

css
/* ✅ 推奨: プロジェクト固有のプレフィックス */
.mk-button { }           /* mk = modern-kanban */
.mk-card { }
.mk-card__title { }      /* BEM記法: Block__Element */
.mk-card--active { }     /* BEM記法: Block--Modifier */

/* ❌ 非推奨: 汎用的な名前 */
.button { }
.card { }

命名パターン：
- プレフィックス: `mk-`
- BEM記法: `block__element--modifier`
- 状態クラス: `mk-is-active`, `mk-has-error`

### ファイル命名

- **Reactコンポーネント**: PascalCase（`KanbanBoard.tsx`）
- **カスタムフック**: `use`プレフィックス（`useKintoneRecords.ts`）
- **ユーティリティ**: ケバブケース（`kintone-api.ts`）
- 1ファイル500行以内を目安に

### フィールドコード

kintoneアプリのフィールドコードは、以下のルールに従ってください：

命名パターン：
// ✅ 推奨: スネークケース、意味のある名前
task_title          // タスク名
task_status         // ステータス
assigned_user       // 担当者
due_date            // 期限日
start_date          // 開始日
end_date            // 終了日
priority_level      // 優先度
project_id          // プロジェクトID

// プレフィックスでグループ化（関連フィールドが多い場合）
proj_name           // プロジェクト名
proj_code           // プロジェクトコード
proj_manager        // プロジェクトマネージャー
cust_company        // 顧客企業
cust_contact        // 顧客担当者
cust_email          // 顧客メール

## 推奨ディレクトリ構造

kanban-app/
├── src/
│   ├── components/          # Reactコンポーネント
│   ├── hooks/               # カスタムフック
│   ├── lib/                 # kintone APIラッパー、定数
│   ├── types/               # 型定義
│   ├── styles/              # グローバルCSS
│   ├── App.tsx
│   └── main.tsx             # エントリーポイント
├── dist/                    # ビルド出力
│   ├── kanban.js
│   └── kanban.css
├── vite.config.ts           # kintone用ビルド設定
└── package.json

## セキュリティ

kintoneセキュアコーディングガイドラインに従ってください：
- https://cybozu.dev/ja/kintone/docs/guideline/secure-coding-guideline/

## アップデート耐性

アップデートの影響を受けにくい実装を心がけてください：
- [そのカスタマイズ大丈夫？ アップデートの影響を受けにくいカスタマイズTips](https://cybozu.dev/ja/kintone/tips/development/customize/development-know-how/update-resistant-customization/)

## パフォーマンス
kintoneの特性を知り、ユーザーがkintoneを快適に利用できるための考慮をしてください：
- [kintoneの性能Vol.1 - リクエストの処理時間](https://cybozu.dev/ja/kintone/tips/best-practices/performance/performance-of-kintone-vol1/)
- [kintoneの性能Vol.2 - 同時リクエスト数（kintone REST APIの上限値）](https://cybozu.dev/ja/kintone/tips/best-practices/performance/performance-of-kintone-vol2/)

cybozu developer networkに載っているkintoneセキュアコーディングガイドラインや試してみて追加した方がよかった内容を色々試行錯誤して追記しました。実運用の際には、フィールドコードの命名規則や構築運用Tipsなども参考にしながら、チームに合ったkintoneカスタマイズルールを盛り込むとよさそうです。

STEP 2. 要件を伝える

Rulesのファイルが用意できたら、Planモードでプロンプトを書きます。
Rulesで共通コンテキストを渡しているので、プロンプト自体は比較的シンプルです。

kintoneのカスタマイズを作成します。

要件
・カンバンのカスタマイズ
・用途はタスク管理
・カードを移動したら、ステータス変更反映
・モダンでシンプルなデザイン

https://cybozu.dev/ja/tutorials/hello-kinapi/first-step/

🔽 CursorのPlanモードについてはこちら

STEP 3. 実装計画を立てる

Planモードで指示を出すと、いきなり実装に入るのではなく、どのように作業を進めるかAIが計画を立ててくれます。

さらに、より良い計画を立てるために、AIが要件に関する確認の質問もしてくれます。
以下のように、質問と選択肢が提示されるので、希望にあうものを選択します。

たとえば、デザインの方向性についても以下のように選択肢を提示してくれます。

ポチポチした回答をもとに、AIが実装計画をまとめてくれました。

STEP 4. 実装

計画内容に問題なければ右上の「Build」ボタンを押すと、計画に沿った実装作業が始まります。
Planの進捗状況を見せながら進めてくれるので、今何をどこまでやったか把握できます。

kintone MCP Serverも使うことで、以下の作業も含めて全てAIがやってくれます。

• 新規アプリ作成
• フィールド作成
• フィールドコード割り当て
• テストデータ登録

kintone MCP Serverをインストールしていないと、この辺りは人の手作業で、カスタマイズファイルの実装だけがAIという分担になるので、個人的にはkintone MCP Serverも入れた方が圧倒的に便利だと思います。

STEP 5. 微調整

AIの実装作業が終わったら、できあがったカスタマイズファイルをアプリに適用します。
最初から完成形を目指すより、一度動かしてみて、足したい機能や調整したい点を追加で指示しながら仕上げていく進め方が相性よく感じました。

また、AIが生成したコードをレビューできる最低限の知識がない場合、細かなチューニングや成果物のレビューが難しくなります。AIに任せきりではなく、どこをどう直したいか判断できる人の役割は重要だと感じました。

表示崩れやUIの微修正をしたいときには、最近（2025/12/11）Cursorから発表されたばかりの新機能「visual editor」がおすすめです👍

visual editorを使って微修正する例↓

微調整も終わったら、完成です🎉
ものの10分程度で、2025トレンド「グラスモーフィズム」（すりガラス風）のモダンなUIがこうして出来上がりました。

所感: AI時代のkintoneカスタマイズの可能性

今回のフローを試してみて、kintoneカスタマイズの開発フローは生成AIでとても効率化できると実感しました。

kintoneは、フィールドの型などデータ構造にもあらかじめ制約があります。そのため、全てを定義しなくてもAIの出力が自然と狭まって破綻しにくい点が生成AIと相性がよく、開発者にとってメリットだと感じます。

サーバーのデプロイも不要で、素早く作れて試行錯誤もしやすいAI時代のkintoneは、動くものを早く見せて検証したいPoCにも有効な可能性を感じました。

AIの使い方で学んだTips

AIの使い方で工夫が必要だったポイントを共有します。

kintone特有の情報提供

• kintoneカスタマイズ特有の情報をAIに提供する上でkintone-custmize.mdcを書くことは有効だった
• ただし、仮にルールファイル内にリンクがあっても、プロンプトの文脈理解に重要なリンクはテキストに添えた方がよい

色々試した結果、上記の気づきがあったため、以下のようにプロンプトではカスタマイズファイルを適用してみようのURLを毎回貼っていました。

kintoneのカスタマイズを作成します。

要件
・カンバンのカスタマイズ
・用途はタスク管理
・カードを移動したら、ステータス変更反映
・モダンでシンプルなデザイン

https://cybozu.dev/ja/tutorials/hello-kinapi/first-step/　←　ココ！！！

エラーが起きた時の情報提供

• テキストのみではなく、画面のスクショを渡すのが効果的
• 開発者向けツールのコンソールやターミナル上でエラーが出た時は、そのエラー文をコピー＆ペーストする

指し示したい場所について、html要素をテキストで指示するより、画像を渡すとAIとのコミュニケーションも楽でした。
また、表示崩れへの対処は、執筆中に公開されたCursorの「visual editor」という新機能がめちゃくちゃ便利でした…！

Planモードの活用

• 参考イメージのリンクや画像を渡しすぎると、デザインの方向性が変に狭まることがあった
• あえて細かい指示は出さず、Planモードで質問と回答を繰り返しながら要件を引き出してもらう方がうまくいった

デザインはもともと曖昧で、言語化が難しい領域です。特に私のようにデザインセンスに自信がない場合、最初から完成形を指示しようとするのは無理な話でした。
そのため、PlanモードでAIから質問してもらったり、できあがったあとに微修正を行うなど、AIと対話しながらアジャイルに進めるやり方が有効でした。

おわりに

本記事では、AIを活用して、“AIっぽくない”モダンUIをつくるkintoneカスタマイズを実装した例を題材にAI時代のkintoneカスタマイズについて考えてみました。

実際の本番運用やテストを考えると、他にも検討すべき点はありますが、少しでも参考になれば嬉しいです。次は、AIが生成したコードのレビューやテストについても書いてみたいなと思っています。

所感でも触れた通り、データ構造に制約があることは、生成AIを活用する上でkintoneの強みだと感じました。AI活用にはリスクもありますが、正しく向き合いながら試行錯誤を続けることで、実践的なノウハウを今後さらに蓄積していきたいと思います。

kintoneエコシステム全体でも、AI時代における新しいkintoneの使い方や価値が広がっていく未来が、個人的にとても楽しみです。

メリークリスマス！
良いお年を！

（おまけ①）design-principal.mdcを使わないと結果はどう変わるのか

ちなみに、全く同じプロンプトでdesign-principal.mdcを使わなかったらどうなるのか気になりますよね？

気になった方へ
試してみた結果はこちらです。

さきほどのモダンなUIと比較すると、確かに少し個性に欠けた、AIがよく作りがちなデザインにみえます。（主観的な意見で失礼します）

このデザインについて、つくった当本人のAIにも見解を聞くと、「AIスロップ的なジェネリックなデザインだ」と自分で言っていました

もちろんモダンであればなんでも良いわけではないですが、事前にAIに提供する文脈の差によってこれだけアウトプットが変わるんだな〜というところが面白いですね！

（おまけ②）他のデザイン

再利用可能なコンテキストファイル群を1回作ってしまえば、色々なカスタマイズを一瞬で作ることができるようになります。せっかくなので、遊びで作ったデザインをお見せしたいと思います。

「プレイフル 適度な遊び心と親しみやすさ」のカンバンボード

せっかくなので、カンバンボード以外も。

「かわいい　ソフトパステルで優しい雰囲気」のガントチャート

「クール　青を基調としたかっこいいイメージ」のダッシュボード

もうこれらはkintoneなのか…って感じですが、
まあそこは、kintoneもAIを駆使してここまでできる！kintoneの可能性は広い！ ってことで！

最後まで読んでいただき、ありがとうございました。

参考文献

• 【Claude Code】Skills機能で『AIっぽい』UIから脱却する方法！Anthropic公式もおすすめ
• Improving frontend design through Skills
• frontend-design@claude-code-plugin
• Cursor Planモード
• Cursor Rules
• 【2025年版】Web・UIデザイントレンドの最先端は？過去のトレンドも紹介