# ˮ使えるAIˮと“モダンな開発環境ˮを求めて。Next.js/Vercelを活⽤したΣSynX EX(AIワークスペース)の事例 元のページ: - [Next.js](https://chot-inc.com/services/modern-web-development) - [Vercel](https://chot-inc.com/services/vercel-partner) - [生成AI](https://chot-inc.com/services/ai-application-development) - UI開発 - フロントエンドエンジニア常駐 - Biome - RAG - 大手製造業DX ## 概要 世界のエンジニアリングとものづくりをけん引してきた、三菱重⼯業株式会社様。同社は、全社のデジタル戦略を統合し、製品・サービスのDXを加速すべく、2022年7⽉に「デジタルイノベーション本部（DI本部）を新設しました。ちょっと社は、三菱重⼯様の開発チームに計3名のエンジニアを参画させ、主にフロントエンド開発をお⼿伝いしています。 今回はプロジェクトの背景や、当社にご依頼いただいた理由について、三菱重⼯業株式会社EXチーム主任の桜⽥様と同社プロダクト開発チーム主任の原⽥様に、当社エンジニアの樋⼝（EXチーム担当）と坪井（プロダクト開発チーム担当）を交えてお話を伺いました。 ## クライアント 三菱重⼯業株式会社 EXチーム主任　桜⽥様 / プロダクト開発チーム主任　原⽥様 ## Next.js/Vercelを活用した大手製造業のDX・生成AI開発支援事例 三菱重工業株式会社のデジタルイノベーション本部に、chot Inc.のフロントエンドエンジニアがリモートで常駐し、生成AI（RAG）を活用した社内AIワークスペースのUI開発と、kintoneを用いた業務デジタル化チームの開発環境整備を支援した事例です。 **事例サマリー** - クライアント：三菱重工業株式会社さま - 業種：重工業・製造業・DX - 支援内容：フロントエンド開発支援（エンジニア常駐） - 技術スタック：Next.js / Vercel / React / Biome / kintone - 支援規模：エンジニア3名参画 - プロジェクト期間：1年以上 - 担当領域：生成AIワークスペース・AIチャットアプリUI・kintone開発環境整備 **解決した課題** - 社内情報が膨大で、ユーザーが情報になかなか辿り着けなかった - 各部門で独自に開発を進めたため、システムが乱立していた - kintoneアプリの属人化・バージョン管理の不統一が開発効率を低下させていた - フロントエンドに強いNext.js/Vercel専門パートナーが見つからなかった **ちょっと社が提供した価値** - RAG×Next.js/Vercelで優れたUXのAIワークスペースを3ヶ月以内に構築 - Biome導入でチーム全体のコード品質を統一、属人化を解消 - バイブコーディング手法のスキルトランスファーで開発効率を向上 ## 膨⼤な製品群とデジタル技術を⽣かして“つなぐˮDX戦略 **坪井（ちょっと社エンジニア）** まずは「デジタルイノベーション本部」（以下、DI本部）の設⽴経緯について教えてください。 **桜⽥** 三菱重⼯は技術基盤として、約700の技術分野、500以上の製品数、数千規模の機械モジュール、31の事業分野、複雑機械開発から運⽤‧保守に⾄る多様なデータ‧ノウハウを保有しています。この強みを⽣かし、製品群とデジタル技術をつないで、新たな価値を創造‧提供していくことが、DI本部のミッションです。 こうしたミッションのもと、DXの全体像を「ΣSynX（シグマシンクス）」と命名 し、⼈と機械が協調するために知恵と技術を結集し、「かしこく‧つなぐ」ことを⽬指しています。 **原⽥** DI本部の直下には約70名のDPI部（Digital Product Innovation部）があり、その下には「SoE（System of Engagement）グループ」があります。 SoEグループは顧客と従業員、それぞれのエクスペリエンスの向上を使命としていて、顧客体験の向上のための価値探索とビジョン設定を⾏う「エクスペリエンスデザインチーム」、顧客接点となるプロダクトや生成AIを組み込んだプロダクトの開発‧運⽤を⾏う「プロダクト開発チーム」、従業員体験の向上のために主にノーコードローコード技術を活用しデジタル化を⾏う「EX（Employee Experience)チーム」の3つのチームに分かれています。このうち、私は「プロダクト開発チーム」、桜⽥は「EXチーム」に所属しています。 ## Next.js/Vercelを活⽤した「AIワークスペース」開発 **坪井** 私は原⽥さんが所属するプロダクト開発チームに参画させていただいています。弊社にご依頼いただいた理由を改めて教えていただけますか？ **原⽥** プロダクト開発チームでは、これまで顧客接点となるプロダクト開発を行ってきましたが、新たに生成AIを活用したプロダクト開発にも取り組んでいます。そんな中、社内情報を対話的・横断的に検索できる「生成AIワークスペース」というプロダクトを開発することになったのですが、顧客向けシステムはスクラッチで開発してきたため、Next.js/Vercelをメインで使⽤するフロントエンド開発に強みのあるパートナーを探していました。そのときに[Zennの記事](https://zenn.dev/p/chot)を拝⾒して、ちょっと社さんの存在を知り、お声かけさせていただきました。Next.js/Vercelを得意とした開発を⾏っている会社は少ないのでありがたかったですね。 **坪井** 弊社のブログをご覧いただいてのご依頼だったんですね。現在、弊社は「AIワークスペース」のフロントエンド開発に携わらせていただいています。この「AIワークスペース」の最初の機能として搭載されたのが「AIチャットアプリ」でしたが、開発の経緯について改めてお話いただけますか？ **原⽥** もともと「AIチャットアプリを作ってほしい」という声はあちこちから上がっていました。弊社のデータ⾃体が膨⼤なので、⽬的のサイトやFAQページに辿り着くのに時間がかかり、ユーザーが必要な情報をすぐ探せなかったためです。実際に各部⾨で開発したアプリもあったのですが、精度が思うように出なかったり、それぞれに開発したためシステムが乱⽴したりといった課題がありました。 そこで**「RAG（Retrieval-Augmented Generation）」**技術を活⽤し、社内ドキュメントを参照しながら回答を⽣成する従業員向けのシステムを開発することになったのですが、提⽰されたスケジュールが3か⽉以内とタイトなものでした。また、すでに試作していたアプリよりも⾼いユーザー体験を提供しなければ新しいシステムを利⽤してくれないので、ユーザー体験にはこだわる必要がありました。 **坪井** プロジェクトの立ち上げ当初から参画させていただきましたよね。フロントエンドの設計までを含めてお任せいただけたおかげで、実装をスピーディーに進めることができ、私たちとしてもありがたかったです。ちょっと社に依頼して良かったと感じることがあれば、教えていただけますか？ **原⽥** 最も印象的だったのは、よりモダンなスタイルのUI/UXを実現してくださったことです。たとえば、⽣成AIの回答作成中に待ち時間が苦にならないよう「データ参照中」「回答作成中」といったステータスを可視化してくださったり、スケルトンUIを導⼊してくださったりと、トレンドを反映していただきました。 また、SoEグループとしては初めて**「バイブコーディング」**の⼿法を導⼊したのですが、坪井さんにスキルトランスファーいただいたおかげで効率的に作業を進められたと感じています。 このほか、データ量の増加に対応するためのキャッシュ戦略も導⼊していただきました。こちらは当初のプロジェクトスコープにはないものでしたが、短期間で⾼いレベルのUI/UXが実現できたことに、正直なところ驚いています。 **坪井** 自分自身も、コーディングエージェントには助けられているなと感じています。 AIから「こうした方がいいのではないか」といった提案を受けて、それに対して「あ、それ良さそうだな」と思い、AIと対話をしながら決めていった部分がありました。 開発を進める中で、すごい時代になったなと感じる場面が多いですね。 ## 開発環境の整備からカルチャーの変⾰へ **桜⽥** EXチームでは、⽇常業務をスピーディーにデジタル化‧効率化できる⼿段として、kintoneを活⽤した業務改善を⾏っています。kintoneはデータベースやAPIなどの基盤が揃っているため、私たちは主にフロントエンド部分を開発してきました。 **樋⼝** 私はもともとプロダクト開発チームに参画していたのですが、2025年7⽉頃に桜⽥さんが所属するEXチームにジョインさせていただいたんですよね。 **桜⽥** 樋⼝さんの技術⼒の⾼さはもちろんですが、プロダクト開発チームに参画いただいているときから円滑なコミュニケーションがとれる⽅だとわかっていました。EXチームに移籍いただくときも、⽅向性もすり合わせさせていただいたので安⼼してご依頼できました。 **樋⼝** 当時EXチームが抱えていた課題について、改めてお話いただけますか？ **桜⽥** EXチームでは多くのkintoneアプリを作ってきました。ノーコードで実現出来ない部分にはJavascriptを用いたカスタマイズを行っていて、そうしたアプリの数が増加していました。しかし、統一的なルールが十分に整備されておらず、例えばバージョン管理の考え方やコーディングのスタイルが人によって異なるといった、いわゆる属⼈化が進んでいたんです。そうなるとプログラムに不備があったときに「作った⼈しか直せない」という状況になってしまいます。EXチーム全体を統合する開発環境やルールの整備が⽬下の課題でした。 **樋⼝** おっしゃる通り、kintoneはノーコードで誰でも簡単にシステム開発できるがゆえに、統⼀が図りにくい課題があると思います。そうした課題を的確に捉えてくださっていたので、桜⽥さんが所属するチームメンバーの⽅とともに「To doリスト」を作り、着⼿しやすそうなものから進めていくことにしたんですよね。 **桜⽥** はい。最終的には3段階に分けて、進めていくことになりました。ステップ1として⾏ったのは「基盤固め」です。具体的には、開発環境の統⼀やGitHubを使った適切なバージョン管理などで、いわば“開発者にとって当たり前ˮといえる環境を整えていきました。 次に⾏ったのは「コード品質の統⼀」です。このとき、共通のリンター/フォーマッターとしてBiome（バイオム）をEXチーム全体に導⼊‧適⽤しました。これによって現在のメンバーはもちろん、新しいメンバーがジョインしたときも「Biomeを適⽤してくださいね」と引継ぎがしやすくなります。EXチームには複数のバーチャルチームがあるのですが、この提案はバーチャルチーム間の思想の衝突を避ける意味でもありがたかったなと感じています。 **樋⼝** そうですね。コードを統⼀するソフトウェアにはさまざまな選択肢があるのですが、Biomeは「〇〇なときはBiomeに従いなさい」というような思想が強めのフォーマットなので、議論が⽣まれにくい特徴があります。複数のバーチャルチームにそれぞれの考え⽅がある中で統⼀を図るにはBiomeが適しているのではないかと考えました。結果的に、他社さんと⽐較してもかなりスムーズに導⼊できたと感じています。 **桜⽥** 素晴らしい判断だったと思います。当初は「どうしてこれを導⼊しなくちゃいけないの？」という声も中にはありましたが、そのときも樋⼝さんが私たちと⼀緒に丁寧に説明してくださったのでスピーディーに導入出来ました。 また、Biome推奨設定やVS Codeでのプラグイン⾃動導⼊など、セットアップ⼿順を4〜5ステップに簡素化してくださったことでも、導⼊のハードルを⼤幅に下げたのではないかと感じています。結果的に「使ってみたら良かった」とBiomeへの満⾜度は⾮常に⾼いので、今後新たなツールを導⼊する際もスムーズに移⾏できそうです。 この流れを受けて、レビューガイドラインも作成いただいています。単なるツールの導⼊に留まらず、ルール作りやプロセス策定といったカルチャーの部分にまで踏み込んで改善していただいていることもありがたいですね。 ## 業務のハブ化とモダン開発への進化を⽬指して **坪井** ちょっと社に今後期待されていることがあれば、教えていただけますか？ **原⽥** プロダクト開発チームで作成している「AIワークスペース」をさらに進化させ、全社員がこのシステムを業務のハブとして利⽤する未来を思い描いています。たとえば、出社時にAIワークスペースに⼊室し、すべての業務がAIワークスペースで完結することが最終的な⽬標です。 さらに難易度の⾼い開発が求められるため、坪井さんには引き続き多⾓的な視点での⾼い知⾒をご共有いただきたいと考えています。 **樋⼝** EXチームの展望もぜひお聞かせいただけますか？ **桜⽥** 先ほどのステップ3にあたる「モダン開発への進化」ですね。具体的には、Viteによるバンドル化、React導⼊、テスト⾃動化などを想定しています。kintoneアプリの開発においてはユーザー要件次第で、複雑さを回避できないこともあります。そうした環境下でも耐えうる設計⼿法の確⽴にお⼒添えいただけたらと思っています。 ［画像引⽤元］ ［図表参照元］ ## よくある質問 **Q. chot Inc.はフロントエンド開発の常駐支援も対応していますか？** はい。今回の三菱重工業様の事例のように、クライアント先チームにエンジニアが常駐し、 開発から環境整備・スキルトランスファーまで一貫してご支援しています。 **Q. Next.js / Vercel の開発実績はありますか？** はい。chot Inc.は日本初のVercel公式パートナーであり、 Next.jsを用いたフロントエンド開発を得意としています。 大手製造業から中小企業まで、幅広い規模の開発実績があります。 **Q. 生成AI（RAG）を活用したWebアプリの開発も依頼できますか？** はい。今回のΣSynX EX事例のように、**RAG**技術を用いたAIチャットアプリや 生成AIワークスペースのフロントエンド開発に対応しています。 **Q. kintoneのフロントエンドカスタマイズも依頼できますか？** 対応しています。kintoneのJavaScriptカスタマイズ、 Biomeを用いたコード品質統一、GitHub運用整備など、 開発環境ごと整備するご支援が可能です。 ## この事例と同じ支援内容を見る - [AIアプリケーション開発｜RAG・チャットボットを設計から実装まで](https://chot-inc.com/services/ai-application-development) - [Next.js開発・エンジニア外注・常駐｜フロントエンド開発チーム参画支援](https://chot-inc.com/services/nextjs-development-support) ## エージェント型Web・AIアプリ 開発のご相談 chot inc.ではエージェント型Webの設計・構築・ 運用を 一貫してサポートしています。 [お問い合わせ](https://chot-inc.com/contact) [事例紹介一覧](https://chot-inc.com/works)