kintone × Claudeで進捗管理のダッシュボードを自力で構築｜建設業 株式会社泰成さまの開発事例

kintoneを導入して少し経った企業さまからは、よく「アプリをたくさん作ったけど、情報を横断的に見られなくて不便」という声が聞かれます。
例えば、案件の進捗管理をする際には、顧客情報、売上額、入金額……というように、複数のアプリを開いて画面を行き来しなければならず、効率が良くありません。

ダッシュボードは欲しいものの、開発を外注したり、ツールの月額を払い続けたりする予算がとれず、諦めている方も多いのではないでしょうか。
そんな方におすすめなのが、生成AIを使った「バイブコーディング」という開発方法です。

バイブコーディングなら、プログラミングの知識が無い方でも、言葉とイメージ画像でAIに指示することで、kintoneのカスタマイズが可能になります。
本記事では、進捗管理のダッシュボードを自力で構築された株式会社泰成さまの事例を紹介します。

本記事の内容は、こちらの動画でも詳しく解説していますのであわせてご覧ください。

工事の進捗状況や入金状況がひと目で分かる仕組みを作りたい！

株式会社泰成さまは、三重県松阪市に本社を構える総合建設業者さまです。
東北地方の震災復興工事を中心に、全国の現場を手掛けていらっしゃいます。

準備工から検査対応まで、専門分野のスペシャリストが集結しているため、ワンストップで工事ができることを強みとされています。
株式会社泰成さまは少し前まで、原価管理や請求管理を紙とエクセルで行っていましたが、業務効率化のためにkintone(キントーン)を導入されました。

このときのアプリ開発の様子については、こちらの記事でも詳しく紹介していますので、あわせてご覧ください。

▼原価管理をkintone化！脱エクセルでリアルタイム自動集計｜建設業　株式会社泰成さまのアプリ開発事例

kintoneの導入によって、リアルタイムで情報を共有したり、原価を自動集計したりできるようになった株式会社泰成さまですが、新たな課題も出てきました。
それは、工事ごとの請求額･請負額･残額･入金状況などを把握するために、複数のアプリを同時に開いて画面を行き来しなければならず、全体像を把握しづらいという点です。

そこで株式会社泰成さまはkintoneに蓄積したデータを活かして、工事ごとの進捗状況や入金状況をひと目で確認できる仕組みを作りたいと考えました。
しかし、この仕組みを開発･運用するにあたって、あまり大がかりな予算や手間はかけられません。

何か良い方法は無いかと悩んでいるときに、コムデックが紹介したのが生成AI「Claude」を使った、バイブコーディングという開発方法でした。
バイブコーディングとは、AIと自然言語で対話しながらアプリを開発する新しいスタイルのプログラミング手法です。

「こういうアプリを作りたい」「ボタンの配置はもっとこうしたい」というように、日常会話のような形で開発を指示できるので、非エンジニアでも手軽に始められるのがメリットです。
株式会社泰成さまでも、プログラミングの知識を持っていない社内の担当者さまが、バイブコーディングに挑戦してみることになりました。

Claudeを使えばkintoneのダッシュボードもカスタマイズできる

売上額や入金状況など、複数の情報をひと目で把握できる仕組みと言えば、ダッシュボードです。
kintoneの標準機能でも、ポータルの掲示板にグラフやリンクを貼り付ければ、簡単なダッシュボードは作成できます。

しかし、表示できる内容や動作にはかなり制限があるため、実用的なダッシュボードを作るとなると、カスタマイズが必要です。
これまで、ダッシュボードをカスタマイズする方法は「プラグインを使う」か「エンジニアがJavaScriptでカスタマイズする」という2つが主流でした。

ダッシュボードのカスタマイズについては、こちらの記事でも詳しく解説していますので、あわせてご覧ください。

▼kintoneのダッシュボードとは？作り方・使い方を事例とともに解説

これら2つの方法に加えて、第3のカスタマイズ方法として最近注目を集めているのが、AIを使ったバイブコーディングです。
今回は、Claude in Chromeという拡張機能を使ってkintoneのダッシュボードを構築しました。

Claude in Chromeは、Anthropic社が開発したChrome専用のAI拡張機能で、Claudeの有料プランを契約している人なら誰でも使えます。
従来のAIはチャットで情報をやりとりしていましたが、開いているWebページの内容を直接読み取りながら、情報の要約や抽出、画面操作まで行うことができるのが特長です。

構築方法は、作りたいアプリの概要とイメージ画像を入力するだけ

ここからは、アプリ構築の流れを解説します。
はじめに、ダッシュボードに使うアプリを整理しました。

「工事管理アプリ」では、工事名、現場状況、受注金額、支払日などを管理しています。

「入金管理アプリ」では、工事名、元請企業、入金額などを管理しています。

次に、作りたいダッシュボードのイメージ画像を用意します。

続いて、Claudeにプロンプトと先ほどのイメージ画像を入力して、作りたいダッシュボードの概要を指示します。
具体的には、参照してほしいアプリや項目、付けたい機能、要らない機能などです。

すると、Claudeがどのようなプランで開発するのかを提示してくれるので、そちらを確認して承認すると、JavaScriptコードが生成され始めます。
コードが生成されたら、コピーしてkintoneアプリに反映します。

最後に、構築されたダッシュボードを見て微調整を行います。
この時もコードを理解する必要はなく、会話文のような形で「この項目も追加して」「見た目はもっとこうして」と指示するだけです。

調整と確認を繰り返し、指示した内容が全て反映されたらダッシュボードの完成です。

Claudeでkintoneをカスタマイズするメリットとは

株式会社泰成さまがダッシュボードを構築する際に工夫した点は、「すべて見るボタン」を設置したことです。
このボタンをクリックすれば、各アプリのレコード詳細画面に遷移できる仕組みになっています。

これにより、自分でポータル画面に戻ったり、参照元のアプリを探して開いたりする手間が省けます。

今回、株式会社泰成さまはkintoneのカスタマイズによって、ダッシュボードを見れば工事一覧(進捗状況･請負額･請求額･残額)や直近の請求･入金、未入金アラートを1画面で確認できるようになりました。

Claudeのおかげで、非エンジニアの担当者さまでもあっという間にダッシュボードを構築できました。
構築手順も、Claudeに参照アプリのURLや簡単な指示、完成イメージ画像を渡すだけという、シンプルなものです。

従来なら開発に数日〜数週間はかかる構築もClaudeを使えばわずか数分で実装できるため、エンジニアに依頼する外注費や、プラグインの月額ランニングコストがかかっていないこともメリットです。

ただし、一点注意点として、この開発手法はメンテナンス性が高くないというデメリットがあります。
kintoneの仕様変更やアプリの運用に変更が生じた場合、プラグインなら設定画面で簡単に直せますが、今回のケースではJavaScriptを直さなければいけません。

もちろん、修正作業もAIに頼むことは可能ですが、コードが読めないと不便なのは事実です。
そのため、カスタマイズの内容や重要性に応じて「プラグインを使う」「エンジニアに依頼する」「AIでバイブコーディングをする」という3つの開発方法を使い分けるのがおすすめです。

kintoneカスタマイズのことならコムデックにご相談ください

kintoneを使っていると、しばしば「もっと使いやすくカスタマイズしたい」という場面がありますが、使える予算や時間には限りがあります。
バイブコーディングは「あまり多くのコストはかけられないけど、手軽にカスタマイズしたい」という時に有効な方法です。

一方で、カスタマイズの内容によってはプロに開発を頼んだ方が良いケースもあります。
株式会社コムデックでは、単にアプリを作ってお渡しするだけでなく、どのような開発方法が最適なのかも含めてご提案することが可能です。

お客様のお悩みをお聞きして、その場でkintoneアプリを構築する「対面開発」も行っておりますので、カスタマイズでお悩みの方は、是非お気軽にご相談ください。

「kintone対面開発」サービスページはこちら