生成AIで変わった開発の取り組み
>100 Views
November 26, 25
スライド概要
星野リゾートでは、内製開発でプロダクトを開発していましたが、デザイン面を中心に課題を抱えていました。
デザインシステムの作成や生成AIの活用を通じて、開発がどのように変わっていったのかを具体的な利用例を元に、お伝えします。
星野リゾートでエンジニアリングマネージャをやっています。 入社後、エンジニアが全くいない状態からエンジニア組織を立ち上げました。 SIer出身で、Javaを中心にシステム開発していますが、転職後は、AWSを触ったり、フロントエンドも触ったりと幅広く開発しています。 エンジニア組織で登壇する機会が増えてきていますが、アジャイル開発が好きで、アジャイル関連での登壇もよくしています。
関連スライド
各ページのテキスト
生成AIで変わった 開発の取り組み 株式会社星野リゾート 情報システムグループ 藤井 崇介
藤井 崇介 星野リゾート 情報システムグループ シニア・アーキテクト @ZooBonta ・Webシステム関連の開発を10年間経験後、2018年に星野リゾートに入社 ・開発体制の内製化を主導し、エンジニア組織の立ち上げを行った。 ・現在は、社内の技術標準化チームを作り、複数プロジェクトの支援を行う Hoshino Resorts Inc. 2
会社紹介 • 全国約80施設の温泉旅館・ホテル・日帰り施設のオペレーションを 担う総合リゾート運営会社 • 星のや・界・リゾナーレ・OMO・BEBの複数のサブブランドで運営 • 1914年創業、長野県軽井沢に最初の旅館を開業し、今年で110年 • 世界に通用する運営会社を目指している Hoshino Resorts Inc. 3
目次 • デザインと実装の間にあった「見えない壁」 • FigmaとAIを繋ぐ「FigmaMCP」の導入 • 生成AI活用の拡大 Hoshino Resorts Inc. 4
• デザインと実装の間に あった「見えない壁」 Hoshino Resorts Inc. 5
内製開発しているシステム Hoshino Resorts Inc. 6
デザインにおける長年の悩み • デザインに関しては、長年悩みがありました • デザイナーとのやり取りで時間がかかる • デザイン通りに実装するのが難しい • デザインに課題があっても、なかなか開発側からは意見が出ない • プロダクトが変わるとデザインを１からやり直すため、流用性がない フロントエンド開発している わけじゃないからなぁ Hoshino Resorts Inc. 7
起きていたこと • 本来は同じルールで表現できるもの Hoshino Resorts Inc. 8
起きていたこと • 微妙なずれが対応されない パンくずリンクで 良いのでは？ 無駄に広い 無駄な余白 Hoshino Resorts Inc. 9
開発プロセスの課題 • デザイナーがいるプロジェクトでよくあるプロセス PO 星野 ENG 要件検討 Desig ner デザイン作成 PO FE デザインレビュー FE 実装 PO 星野 ENG 成果物確認 フィードバック 工程ごとに人が変わる ＝ 工程間での引き継ぎが必要になる PO:プロダクトオーナー、星野ENG:星野リゾートエンジニア、 Designer:デザイナー、FE:フロントエンドエンジニア Hoshino Resorts Inc. 10
開発プロセスの課題 • 工程ごとに人が変わることで起きる問題 • デザインの確認がリアルタイムにできないので、デザインのFixに時間がかかる • 要件とデザインに矛盾がある • デザイン通りに実装できない、実装が難しい • デザインミスなのか、意図したデザインなのかわからない • 実装時に気づいたデザインの課題の反映に時間がかかる Hoshino Resorts Inc. 11
理想としていたデザインプロセス • チーム一帯でデザインを作る PO 星野 ENG Desig ner 要件検討 PO ENG デザイン作成・レビュー 星野 ENG ENG PO 実装 成果物確認 フィードバック デザイン規約 デザイン規約を作り、デザイン規約に基づいてチーム一帯となって、デザインを作れば、 引き継ぎも少なく、誰でも開発・実装ができるようになる PO:プロダクトオーナー、星野ENG:星野リゾートエンジニア、 Designer:デザイナー、ENG:エンジニア Hoshino Resorts Inc. 12
デジタルシステム開発（Fabric） 画面を構成する基本的なコンポーネントから、画面を構成する基本的なレイアウトパターンを整理 Fabricを利用した場合のコンポーネントの使い方や指定可能なオプションの掲載 https://tech.hoshinoresorts.com/design/fabric/? Hoshino Resorts Inc. 13
Fabric(その他) Figmaのレクチャー資料 チュートリアル Hoshino Resorts Inc. 14
FigmaとAIを繋ぐ「FigmaMCP」 の導入 Hoshino Resorts Inc. 15
デザインシステムにより出てきた効果と課題 • 効果 • 基本的なコンポーネントを組み合わせるだけだと1時間/1画面で作成可能 • デザインパターンライブラリを作ることで、半分以上の画面でベースが揃えられた • マージン・フォント・色などの細かな悩みが減った • 課題 • パターンの追加は必要 • 類似した画面でも、コンポーネント以外については実装が必要 • デザインに対して、実装を一致させる難しい 生成AIで解決を目指す Hoshino Resorts Inc. 16
Figma MCP(Dev Mode MCP)とは • Figma MCPとは • Figma のデザインを生成AIが理解し、コード生成を支援するためのプロトコル • レイヤー構造やデザイン情報を直接読み取れる • コンポーネント間の関係 • 色・フォント・余白 • 変数 • デザインシステムの情報は所持していないため、社内用MCPサーバーも作成 ■Figma MCP(Dev Mode MCP) https://help.figma.com/hc/ja/articles/32132100833559 Hoshino Resorts Inc. 17
Fabricを使った実装 • プロンプト FigmaのMCPサーバーを利用し、このファイルを読み込んでください。 https://www.figma.com/design/XXXXXXXXX 読み込んだデザインをもとに、`/XXXX`でアクセスした時に表示される画面を作成してください。 ■条件 - FigmaのBasicContetnsHeaderのコンポーネントについては、`UIBasicContentHeader` を使用すること - ヘッダ以外の箇所については、`/XXX/index.vue`を参考に、`XXXSearchTable`というコンポーネントの中に、検索フォームである`XXXSearchForm``XXXDataTable` というコンポーネントに分割して実装すること。 大体いい感じでできるが、ソースを見ながら細かい調整は必要だった Hoshino Resorts Inc. 18
生成AI活用の拡大 Hoshino Resorts Inc. 19
生成AIを使った開発 業務分析 仕様書 テンプレート 要件定義 ユースケース作成 ドメイン設計 API設計 データ設計 生成AI 規約 開発ルール 生成AI ユースケース作成 ドメイン設計 API設計 データ設計 ソースコード ユニットテスト テストケース Hoshino Resorts Inc. 20
開発の標準化と生成AI ◼ 標準化は生成AIを効率的に活用するためのプラットフォーム ◼ テンプレートや規約、開発ルールが整っていることが、 安定したアウトプットにつながる ◼ 類似した機能や処理は、生成AIに任せられる（8割程度可能） ◼ 標準化できない領域にエンジニアの価値を発揮する ◼ ビッグデータを効率的に処理するアーキテクチャの検討 ◼ 高速なレスポンスが求められる処理のチューニング ◼ 生成AIの結果のレビュー Hoshino Resorts Inc. 21
ルールやプロンプトの共有から [ルール定義] [プロンプト] Hoshino Resorts Inc. 22
デザインにも生成AI ◼ Figma Make 自然言語でデザインが作られるようになっている。 生成AIを使うことで、デザインに対する敷居がさらに下がる XXXX@XXX YYYY ZZZ Hoshino Resorts Inc. 23
デザインにも生成AI ◼ Figma Make 24
デザインにも生成AI ◼ デザインに生成AIを使った感想 ◼ 全員でデザイン作成に参加できるようになった ◼ 一定品質のデザインは誰でも作れるようになった ◼ デザインファイルは起こし直す必要があった →コンポーネント構造などは意図したものにならないので、修正が必要 ◼ デザインの再現性はまだ低いので、ルールが必要。 →ライブラリなども読めるが、想定しているレベルには達していない 25
まとめ • デザインシステム導入で、Figmaでのデザインに対する敷居が下がった • Claude CodeとMCPサーバーを繋ぐことで、デザインと実装を合わせやすくなった。 • 標準化をすることで、生成AIが活用しやすくなる。 • 生成AIが活用できる部分はこれからも増える Hoshino Resorts Inc. 26
Hoshino Resorts Inc. https://hoshinoresorts.com/jp/recruit/mid-career/2992/ 27
ありがとうございました https://hoshinoresorts.com/jp/ Hoshino Resorts Inc. 28