published
published
author
authorDisplayName
Nahoko Shimada
category
design
mainImage
publishedAt
Dec 16, 2025
slug
Advent-Calendar-20251216
tags
advent calendar
design
AI
この記事は、「NEWT Product Advent Calendar 2025」Day12 の記事となります
「NEWT Product Advent Calendar 2025」12日目は、令和トラベル プロダクトデザイナーのshimadaが、AX室 yasuからバトンをもらい執筆。ぜひ、最後までご覧ください！
この記事では、自社のホテル事業の基盤となるホテル様向けのプロダクト「NEWT Partner Hub（ニュート パートナーハブ）」の正式リリース後、デザイン業務の効率化にむけてAIエージェント導入のトライについてお話します。
1. ホテル事業の基盤となる管理画面の1stリリースまでの振り返り
⛰️ ここからが本当のスタート地点
2025年1月からプロジェクトが発足し、2025年9月に正式リリースした宿泊施設さま向けの管理画面「NEWT Partner Hub」。
私はプロジェクト立ち上げ当初から今もプロダクトデザイナーとして関わっています。
「NEWT Partner Hub」とは？
宿泊施設さまと令和トラベルが直接契約することで、品揃えの強化や収益性の改善を目的とし構築された、宿泊施設さまが『NEWT（ニュート）』に掲載・予約管理を行う管理画面
「NEWT Partner Hub」のプロジェクトの背景については、以下の記事もご参照ください。
リリースまでは本当にたくさんのやることがあって壁があって人が少なくて…とずっと気を張る状態が続いていました。たぶんみんな、半分くらいしか息してなかったんじゃないかな。
そこからリリースまでこぎつけたので、それなりの達成感はありました。
おかげさまで、参画してくださる宿泊施設さまも徐々に増え、予約も入り始め…という喜ばしい状況もありますが、まだまだ解決すべき課題はたくさんあります。
そのたくさんある課題を解決するために、1stリリース後もデザイナーのタスクをさらに爆速で推進する必要がありました。
🧑🎨 デザインタスクの工程と役割分担
みなさん、大きなプロジェクトを終えた後のデザインファイルってどうなってますか？
今回の試みを紹介する前に、このプロジェクトでデザイナーがどのような立ち回りをしていたかをお話します。
コンポーネントに関しては、うちの旅行事業の中核であるtoC向けのサービス、旅行アプリNEWTのデザインガイドラインを踏襲し、NEWT Partner Hub独自のものを早い段階で高品質に揃えるよう配慮しました。
NEWTはtoCサービスですが、一方で今回のNEWT Partner HubはtoBで、主な利用者は宿泊施設で現場のオペレーションの担当者さまです。
利用者や利用シーンが変われば、おのずと作るものも変わってきます。プラットフォームもアプリベースからPCビューがメインになります。なので、NEWTのコンポーネントを参照しつつも、日々の業務をスムーズに行えるよう、いくらか変更したり新たに作ったりする必要がありました。
さらに実装側でも「素早く」「変更に強い」環境を作るべく、Mantineというライブラリを導入したいとエンジニアから提案がありました。
NEWTの既存コンポーネント、Mantineのルールを踏襲しつつ、NEWT Partner Hubオリジナルのコンポーネントとデザインを検証しながら作り上げていく…という実に骨が折れる作業に取り組んでいました。
▼デザインファイル
「どんなデザインにするか？」を検討する上で、まず最初に始めたことは業界を超えたBtoBのプロダクトデザインのトレンドの調査や、スムーズな実務とどうバランスをとるか？などの検討を重ねることです。
一刻も早くコンポーネントを作成しなければならなかったので、「目指すデザインテイスト」を関係部署と合意形成をした上で、早い段階で決定する働きかけも行っていました。
このプロジェクトでは、画面ごとにデザインを用意し、それぞれの「ステータス」「プロジェクト管理のチケットURL」を管理しています。
仕様はNotionにまとめていましたが、複雑な仕様は切り出して画面の側に置くなどし、PMやエンジニアが理解しやすいようにまとめることも配慮していました。
当時、私と一緒にプロジェクトに参画してくださっていたPPさん(※)と私とで、以下の役割分担をすることで、品質とスピードを担保できる環境を意識しました。
※ 令和トラベルでは業務委託の方をプロパートナー(PP)と呼んでいます
デザイナーの役割分担
- PPさん：NEWTやMantineをベースにコンポーネントの初案を作成／要件が固まった画面のデザイン
- 私：PPさんの作成したデザインのレビュー、調整／PMと要件の整理／要件がふんわりした画面のデザイン
2. デザイン業務まわりの課題
ここまでが、ざっとこのプロジェクトのデザイン事情です。
ゼロイチではないにしろ、リリース後は予期せぬ事態に備えてクイックな対応が必要になったり、まだ作るべきデザインも残されてます。
残念ながら、頼りにしていたPPさんはすでにプロジェクトを離れています。私もこのプロジェクト以外のプロジェクトを抱えています。
そんな中、デザイナー1人で今まで以上にクイックに質の高いデザインを作れるようになる必要がありました。
そこで、AIエージェントという「新たな相棒」を作ることを決めました。
🛠️ 開発フェーズごとに仕様を管理するツール
NEWT Partner Hubで開発において使用しているツールの目的と課題は以下の通りです。
ツール | 目的 | 課題 |
Notion | 初めに作る仕様書、PRD。 | ・プロジェクトが進むにつれて更新が追いつかなくなり、どれが最新の仕様かわかりづらい。 |
Figma | 画面仕様書。画面の詳細や遷移を俯瞰して把握しやすい。プロジェクトの最後まで活用するので、「あるべき仕様の最新」であることが期待される。 | ・画面以外の機能要件、非機能要件を管理しづらい。 |
Slack | 主に意思決定が行われる場。クイックにやりとりしやすく、経緯がわかる。 | ・スレ自体、容易に見失えるので探し当てらづらい。
・煩雑で最終的な決定事項がわかりづらい。（Slackの要約である程度ラクになってきたかも？） |
GitHub | プロダクトを構成するコードや仕様の管理。 | ・エンジニア以外が把握しづらい。
・仕様とは意図せず異なる箇所がある可能性があり、「あるべき状態」とは限らない。 |
大体、時系列としては上から下へ流れていくイメージです。
仕様に関しては大きくデザインベースとテキストベースが存在しますが、それぞれの特性によって管理しやすいツールも異なります。さらに、プロジェクトの進捗に応じてメインで使用するツールも変わってきます。
また、何度も試行錯誤を繰り返していると「どうしてこのデザインになったんだっけ？」があちらこちらで頻発します。
結果的に、以下のような困ったことが起こります。
- 履歴が残っておらず、古いデザインをベースに要件定義を進めてしまう →実装の際に手戻りが発生
- パターンを網羅していない →PMやデザイナーが新規の改修を検討する時に、要件の考慮漏れが発生する
- 一度検討したある事情があって導入しなかったという経緯が残っていない →また検討するなど、ムダな工数が発生
これでは冒頭にお話した「まだまだたくさんある解決すべき課題」を効率的に対応することができません。なんとしても解消しなければ…！
3. デザインの着手・レビュー・仕様の記載を爆速にするために行った施策
令和トラベルでは、エンジニアだけでなく全社員がAIを使いこなして各人の業務のスピードと質を爆上げせよ、という取り組みがあります。
なので、周りのメンバーの知恵も借りつつ、以下のような改善策を講じてみました。
3つの「爆速」目標
① デザイン初稿を提出するまでの時間を爆速にする
② レビュー前のチェックを爆速にする
③ 仕様変更の内容の要約と共有を爆速化にする
⚙️ 基本の仕組み
- 事前の準備として、Cursor側にFigma 、Notion、SlackのMCPを設定する
テーマと逸れるので具体的な説明は省きますが、
Settings > Tools & MCP 内のInstalled MCP Servers が以下の設定になっていればOKです
各MCPに関する参考
▶Notion MCPの公式リンクはこちら：
▶Figma MCPの公式リンクはこちら：
Slack MCPは、Ubie様のリポジトリを参考に、エンジニアに令和トラベル向けに作ってもらいました。
- Cursorのchatにプロンプトを入力する
FigmaのFrameのURL、NotionページのURL、SlackのスレッドURL を添えることで、それぞれを参照した結果を返してくれます。図にするとこんな感じ
この仕組みを活用して、以降から前述した3つの「爆速」目標の実践内容をご紹介します！
🗺️ デザインの流れと、プロンプトを作成する箇所
上にあげた3つの「爆速」目標を達成する為に、デザイン業務のうち、以下の3つのポイントでAIエージェントを活用することにしました。
🎯 目標① デザイン初稿を提出するまでの時間を爆速にする
達成目標
質の高い初稿デザインを最短で上げる
令和トラベルは幸い、PMがしっかり要件をまとめてくれていますが、それでもデザインや実装観点で追加で検討しておいた方がいいことが後から発生します。
そこで、AIエージェントにPRDと（場合によっては意思決定の流れがわかるSlack）Figmaを元に、デザイン前に意識しておくべき観点を洗い出してもらい、さらにアイディアを提案してもらうことで、デザイン検討をする工程そのものを圧縮します。
「デザイン支援」プロンプト
以下の資料をすべて読み込み、 「仕様 × デザインの整理」と「これから設計する際の観点出し」をしてください。 【資料】 ・Notion PRD：（URL） ・関連Slack：（スレッドのURL） ・最新Figmaデザイン：（FrameのURL） 【出力ルール】 資料をもとに、以下の形式で出力してください。 推論はせず、事実に基づいた回答をするために情報が不足していれば教えてください。 ## デザイン整理と設計観点まとめ ### ① 仕様とデザインの相違点 - PRDに書かれている仕様と、現在のFigmaで表現されている内容の違い - 要件として明示されているが、UI上でまだ具体化されていない点 - UIで表現されているが、仕様上では触れられていない点 ### ② 設計時に意識すると良いデザイン観点 （これからデザインを詰める際に気をつけるとよさそうな点） - 情報設計上、整理した方がよさそうな箇所 - 表現が曖昧になりやすいUI要素 - ユーザーの解釈が分かれそうなポイント - 仕様とUIの接続が弱そうなポイント ### ③ UI構造として注意しておきたいポイント - 状態管理が発生しそうな箇所 - 条件分岐が発生しそうな箇所 - UIの再利用性に影響しそうな構造 ### ④ 優先度付きの検討論点 【高】 - 早めに方針を決めた方がよい箇所 【中】 - 設計中に詰めればよい箇所 【低】 - 余裕があれば最適化を検討したい箇所 ### ⑤ ユーザー体験の観点での違和感候補 - 迷いやすそうな箇所 - 意図が伝わりにくそうな表現 - 行動が止まりそうなポイント
実際に出力される提案
このプロンプト通りでは色々なアドバイスをしてくれますが、実際に検討する際はプロンプト内の
④ 優先度付きの検討論点 の部分を参照するだけでもデザインに取り掛かれます。実際に、以下のようなアドバイスをしてくれます。
※ 今回は説明のために図式化していますが、実際のアウトプットはテキストベースです
AIエージェントからのアドバイス
優先度：中 以降はエラーの状態変化や、コンポーネント全体の見直しも提案してくれます。これにより、コンポーネント自体もあるべき形へ仕上げることができます。デザイン初稿提出までの短縮見込み
デザイン初稿の提出までにかかる時間は、要件のボリュームにより様々です。
新規画面の作成でも考慮ポイントが少なければすぐできるし、既存画面の変更でも考慮ポイントが多ければその分、時間もかかります。
このフェーズでは、以下の点で作業の圧縮が見込めると考えています。
- 影響範囲の把握
- 既存ルールとの整合性チェック
- 既存仕様を加味したUIパターンの検討
- エラーやアクションに対するフィードバックなど状態変化の考慮
🎯 目標② レビュー前のチェックを爆速にする
達成目標
レビュー前のチェックリストを作ってもらい、フィードバックに対応する時間を圧縮する
FigmaのBefore/Afterの差分を洗い出し、要件の見落としや意図しない変更を検出し、エンジニアへ連携するまでの時間を短縮します。
PRDやSlackでの決定事項を基準としてUIを採点させるため、対応漏れを防ぐことができます。
「レビューチェックリスト」プロンプト
以下の資料を読み込み、 「PRDの内容やSlackの要件に対してUI変更が正しく反映されているか」をチェックしてください。 また、PRDの内容やSlack内の「仕様要件」を短い箇条書きに分解してからチェックし、 要件が曖昧な箇所は「要件として不明確」と明示してください。 【資料】 ・Notion PRD：（URL） ・Figma Before：（FrameのURL） ・Figma After： （FrameのURL） ・関連Slack（あれば）：（スレッドのURL） 【出力ルール】 資料をもとに、以下の形式で出力してください。 推論はせず、事実に基づいた回答をするために情報が不足していれば教えてください。 ## 要件反映チェック結果 ### ① 要件どおりに反映されている点 - 要件1：反映OK - 要件2：反映OK ### ② 要件とUIの差分がある点 （要件に書いてあるが、Afterで未反映・表現が異なる可能性のある点） - 要件記載： - UI実装状況： ### ③ UIにはあるが要件に記載のないポイント （仕様として明文化した方がよさそうな内容） - 内容： - 理由： ### ④ 修正前後で意図通り変わっているか怪しい箇所 （Before→Afterで変わったが、要件の意図と一致しているか判断が必要な点） - 変更内容： - 懸念点： ### ⑤ 確認・判断が必要な論点 - [ ] 判断待ちポイント1 - [ ] 判断待ちポイント2
レビュー前チェックの短縮見込み
レビュー時に発生していた「仕様漏れ」「想定外の差分」の指摘が減り、レビューの回数そのものが減ることが期待されます。
- 自分でPRDとFigmaを見比べてチェックする時間
- レビューで出た指摘を受けて再修正する時間
- 「あれ、ここってこういう仕様でしたっけ？」をSlackで確認しに行く時間
このあたりがまとめて圧縮されるイメージです。
🎯 目標③ 仕様変更の内容の要約と共有を爆速にする
達成目標
仕様変更の内容を要約し、GitHubに残す形で出力する
NEWT Partner Hubでは、GitHubに最終的な仕様を集約する試みを始めました。
そのため、デザイン仕様とFigmaへのリンク先もここに集約することで、各案件の仕様を背景から残すことができ、次の打ち手の検討をスムーズに開始できます。
「変更仕様の共有」プロンプト
以下を読み込んで、修正したUIの最終仕様をまとめてください。 【資料】 ・Figma現行フレーム：（FrameのURL） ・Figma修正後フレーム：（FrameのURL） ・関連Slack（あれば）：（スレッドのURL） ・関連PRD（あれば）：（ページのURL） 【出力ルール】 以下のGitHubコメント形式で出力してください。 推論はせず、事実に基づいた回答をするために情報が不足していれば教えてください。 ## UI変更内容まとめ ### 変更概要 （なにをどう変えたか1〜2行で） ### 変更点一覧 - [ ] 変更点1（before → after が分かるように） - [ ] 変更点2 - [ ] 変更点3 ### 実装・デザイン確認ポイント - [ ] 表示崩れが起きやすい箇所 - [ ] 文言変更がある場合の反映確認 - [ ] 状態管理（hover/active/disabled 等） - [ ] SP対応で差が出やすい箇所 ### 影響範囲 - 影響あり：〇〇画面 / 〇〇機能 - 影響なし：〇〇 ### 補足（あれば） （背景・意図）
仕様変更まとめ時間の短縮見込み
手作業で行っていた以下のような作業工数が削減される想定です。
- Slackから経緯を拾って文章にする時間
- PRDと差分を見比べて「何が変わったか」を整理する時間
- GitHub向けに整え直す時間
AIエージェントがたたき台を用意してくれることで、「ゼロから書く」ではなく「出てきたドラフトを整えるだけ」で良いので、この差分が短縮される見込みです。
🤖 AIエージェントを活用する際のポイント
プロンプトを入力する時は、以下の点に念頭を置くと精度の高い結果を得ることができます。
AIエージェントからの精度を上げるポイント
- 最初から依頼内容を固めすぎない 一発で精度の高い結果を出そうとしてプロンプトを作ること自体に時間をかけすぎないようにしましょう。
基本的に構成自体もAIに提案させ、それを元にコミュニケーションを重ねてブラッシュアップしていきます。
- ハルシネーションを避けるために、「情報が不足していれば教えて」と添える 情報が不足していても、AIは推測から決定事項として伝えることがあります。いわゆる「ハルシネーション」という「AIが嘘をつく」状態です。
人間が欲しい情報とAIが欲しい情報は異なるので、推論は避け、参考資料をベースにした事実だけで判断してもらうよう設計していきましょう。
- 参考資料を添える MCPで繋いだツールの情報はもちろん、それ以外にも参考にして欲しい情報があれば、公開されたURL
4. まとめと今後の展望
現時点で定量的な削減率は算出できていないものの、作業の「どこが短縮されるのか」は、はっきりしてきました。
今後は、初稿作成・レビュー・仕様整理といったフェーズごとに時間や回数を記録し、一定期間ごとに振り返りながら改善していく予定です。
そうすることで、AIエージェントを「なんとなく便利なツール」で終わらせず、各業務の工程を意図的に短縮していくための仕組みそのものに育てていきたいと考えています！
📣 1月のイベント開催のお知らせ
令和トラベルでは、毎月技術的な知識や知見・成果を共有するLT会を毎月実施しています。発表テーマや令和トラベルに興味をお持ちいただいた方は、誰でも気軽に参加いただけます。
【1/28 開催！3社共催】モバイルアプリ開発 ✕ AI ー 組織・技術課題と向き合い、AIと走る
2026年のスタートを切る1月の「NEWT Tech Talk」は、”モバイルアプリ開発 ✕ AI ー 組織・技術課題と向き合い、AIと走る” というテーマで開催。
クラシル株式会社 なぐもさん、株式会社ヤプリ にゃふんたさんをゲストに、令和トラベル やぎにいの3名が登壇します。モバイルアプリ開発の現場で、AI活用に取り組む3社のエンジニアが、個人・チーム・技術課題それぞれの視点から、AIとどのように向き合い、どのように開発を前に進めてきたのか、具体の取り組みをシェアしながら語ります！
そのほか、毎月開催している技術発信イベントについては、connpass にてメンバー登録して最新情報をお見逃しなく！
【NEWT Chat リリース記念】AI × Travel Innovation Week 開催！
「NEWT Chat」誕生の裏側や開発ストーリーをお届けする特別企画 “AI × Travel Innovation Week” を令和トラベルのnote上で開催しました！
「NEWT Chat」のリリース背景、プロダクトの価値、開発体制、そして今後の展望など、新規事業の “舞台裏” を公開。特に、AIプロダクト開発に関わるエンジニア・PMの皆さまにとって学びの多い内容となりますので、ぜひご覧ください。
▼ AI × Travel Innovation Week のnoteはこちら：
旅行・観光業に特化したAIエージェントチャット「NEWT Chat（ニュートチャット）」についてはこちらから。
令和トラベルでは一緒に働く仲間を募集しています
この記事を読んで会社やプロダクトについて興味を持ってくれた方は、ぜひご連絡お待ちしています！お気軽にお問い合わせください！
フランクに話だけでも聞きたいという方は、カジュアル面談も実施できますので、お気軽にお声がけください。
1年間の感謝を込めた、”クリスマスセール🎄” 開催中！
NEWTでは現在、海外旅行やホテルをおトクにご予約いただける『クリスマスセール🎄』を12/4〜スタートしています！ぜひこの機会にご利用ください！
📣宣伝
次回の「NEWT Product Advent Calendar 2025」Day13は、「AIが全員の武器になる組織へ──未来を見据えた変革のはじめ方」と題してエンジニアリングマネージャーのyoshikeiが担当します。次のブログもお楽しみに！
