【イベントレポート】「AIが加速させるフロントエンド開発の未来 〜実装とUXの最前線〜」を開催しました!

このエントリーをはてなブックマークに追加
published
published
author
authorDisplayName
Hironori Nakano
category
event
mainImage
20250829_NEWT-Tech-Talk_001.png
publishedAt
Sep 8, 2025
slug
tech-lt-202508
tags
frontend
AI
notion image
 
こんにちは!令和トラベル エンジニアリングオフィスです。
この記事では、2025年8月29日にオンライン・オフラインのハイブリッドで開催された、『NEWT Tech Talk vol.17』の様子を紹介します!
今回は、”AIが加速させるフロントエンド開発の未来 実装とUXの最前線” と題し、弊社フロントエンドグループ マネージャーのyassan、AIラボグループのippoが登壇。さらに特別ゲストとして、LAPRAS株式会社からRyo Kawamataさん、Dress Code株式会社からYuji Yamaguchiをお招きして、開発速度を劇的に変えるAI活用術についてLT形式で各社の取り組みを紹介しました。
 

「NEWT Tech Talk」とは?

令和トラベルのエンジニアリングチームは『あたらしい旅行を、デザインする。』というミッションのもと、日々多くの課題を解き続けています。仕事に取り組む中で得た個々の知見をチーム全体に還元し、みんなで学び、成長するために、私たちは毎月Tech LT会「NEWT Tech Talk」を開催しています。
毎月開催していますので、ぜひ令和トラベルconnpassページもチェックしてみてください!
 

登壇内容について

今回登壇した4名の登壇内容について簡単に紹介していきます。
  1. 退屈なことはDevinにやらせよう〜Devin APIを使ったVRTの作成自動化〜(Ryo Kawamata
  1. Figma + Storybook + PlaywrightのMCP を使ったフロントエンド開発(Yuji Yamaguchi
  1. デザイン資産をレゴ化!MCPで誰でも作れるLP基盤(yassan
  1. 旅行プランAIエージェント開発の裏側(Ippo Matsui
 

1. 退屈なことはDevinにやらせよう〜Devin APIを使ったVRTの作成自動化〜

1人目は、LAPRAS株式会社 Software Engineer の Ryo Kawamata さんが発表しました。
Devin APIを活用し、ビジュアルリグレッションテスト(VRT)の作成を自動化した事例を紹介していただきました!あたらしいページが追加された際にVRTのケース追加漏れが発生するという課題を、Devin APIを使って自動化することで解決したアプローチを解説してもらいました!
 
トピックスとしては以下です。
💡
  • VRT(ビジュアルリグレッションテスト)の概要とLAPRASでの仕組み
  • Devin APIを活用したVRT自動作成の仕組み
  • 運用上の工夫(起動条件の最適化、プレイブックの活用)
notion image
 
発表資料全体はこちら!
 

2. Figma + Storybook + PlaywrightのMCP を使ったフロントエンド開発

2人目の登壇は、Dress Code 株式会社 Product EngineerのYuji Yamaguchi さん。
MCPをFigma、Storybook、Playwrightといったフロントエンド開発ツールと連携させることで、調査工数の圧縮や開発サイクルの高速化を実現した事例を紹介していただきました!デモでは、Figmaで選択した項目からAIが実装計画、コード生成、テスト、エラー修正まで自動で行う様子を披露してもらいました!
 
トピックスとしては以下です。
💡
  • MCP(Model Context Protocol)とは何か
  • Figma, Storybook, Playwright, Notion, GitHubといった様々なツールでのMCP活用事例
  • MCPを活用した開発での効果(調査工数の圧縮、開発サイクル高速化)
notion image
 
発表資料全体はこちら!
 

3. デザイン資産をレゴ化!MCPで誰でも作れるLP基盤

3人目は、令和トラベル フロントエンドグループ マネージャーの yassan の発表です。
エンジニア以外でも自然言語から高品質なLPを作成できる基盤の構築を目指し、MCP(Model Context Protocol)を活用した取り組みを紹介しました!既存のLPデザインをFigmaデータに変換し、MCPを用いてコンポーネントレベルでコード化。画像や文章といったコンテンツもMCP経由で生成することで、デザインシステムに準拠したLPを簡単に作成できる仕組みを解説してもらいました!
 
トピックスとしては以下です。
💡
  • LP作成における課題(工数、利用者の限定、デザインシステムとの乖離)
  • MCPを活用したLP基盤のアーキテクチャー(HTML2Design、Figma MCP、コンテンツ生成)
  • MCPの具体的なツール活用例(getVariablesToDefs, createDesignSystemRules, getImage, UnsplashSearch MCP, microCMS MCP)
notion image
 
発表資料全体はこちら!
 

4. 旅行プランAIエージェント開発の裏側

最後の登壇は、令和トラベル AIラボグループ ippo 。
NEWTアプリ内で提供されているAIエージェント「トラベルプランナー」の開発秘話が紹介されました。Next.js、Vercel AI SDK、Gemini LLMといった技術スタックに加え、プロンプトエンジニアリングの重要性、構造化出力の工夫、そしてGeminiのプロパティ順序問題といった開発中の課題とその対応策が詳しく紹介されました。
 
トピックスとしては以下です。
💡
  • 旅行プランAIエージェント「トラベルプランナー」の機能概要
  • 技術スタックとアーキテクチャー(Next.js, Vercel AI SDK, Gemini LLM, LangSmith)
  • 実装の工夫(プロンプトエンジニアリング、フィードバックループ、構造化出力)
  • 開発中の課題(Geminiのプロパティオーダリング問題)と解決策
notion image
 
発表資料全体はこちら!
 
当日の様子や発表内容が気になる方は、こちらから視聴可能です!👀
 

懇親会パートの紹介

発表後には、恒例の懇親会を開催しました!
登壇者の4名を中心に、活発な交流が行われていました。登壇では語りきれなかった内容についても深掘りがなされ、有意義なナレッジシェアの場となったのではないでしょうか。
毎度、直接オフィスへお越しくださる方には、お食事とお飲み物をご用意しております。みなさま、ご足労いただきありがとうございました!
notion image
notion image

まとめ

今回で17回目の開催となる「NEWT Tech Talk」ですが、4名によるLT登壇はもちろん、発表後の質疑応答セッションでも、現地参加者からだけでなくオンライン参加者からも質問が集まり、とても充実した会となりました。
AIがフロントエンド開発の未来を加速させる可能性について、各社の具体の取り組みについて触れながらご紹介した今回。特にMCP(Modelを活用した多様なツール連携が開発サイクルを高速化する強力なヒントとなりました。
 
会場に足を運んでくださったみなさま、オンラインにて視聴くださったみなさま、ご参加いただき盛り上げていただき、本当にありがとうございました!
notion image
 

【9/18開催!】3社合同イベントのお知らせ

令和トラベルでは、技術的な知識や知見・成果を共有するLT会を毎月実施しています。発表テーマや令和トラベルに興味をお持ちいただいた方は、誰でも気軽に参加いただけます。

9月の開催は、”AI × Backend” がテーマ!

9月の「NEWT Tech Talk」は、MOSH株式会社・Nstock株式会社・令和トラベルの3社による共同開催です!それぞれの開発現場で、AIをどのようにBackend開発に組み込み、開発の効率化を実現しているのかについて深掘りします。
「AI×Backend −実用化を支える技術と効率化の現在地」と題して、実務での取り組みを交えながら、MOSH株式会社からGenta Kaneyamaさん、Nstock株式会社からKiyoshi Tanakaさん、そして株式会社令和トラベルからtaniigoの3名がLT式で発表を行います!
 
そのほか、毎月開催している技術発信イベントについては、connpass にてメンバー登録して最新情報をお見逃しなく!
 

令和トラベルでは一緒に働く仲間を募集しています

この記事を読んで会社やプロダクトについて興味を持ってくれた方は、ぜひご連絡お待ちしています!お気軽にお問い合わせください!
フランクに話だけでも聞きたいという方は、カジュアル面談も実施できますので、お気軽にお声がけください。
 
それでは次回のブログもお楽しみに!Have a nice trip ✈️
 
 

# frontend

# AI