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

Transcript

1. σβΠϯࢿ࢈ΛϨΰԽʂ.$1Ͱ୭Ͱ΋࡞ΕΔ-1ج൫
2. © 2025 Reiwa Travel, Inc. 2 #BDLHSPVOE
   d
   
   -*/&Ϡϑʔגࣜձࣾ
   ɹɹɹɹ
   
   
   
   
   
   %FW0QTɺ10ɺ1BZ1BZϑϦϚͷϑϩϯτΤϯυ
   d
   
   גࣜձࣾྩ࿨τϥϕϧ
   ɹɹɹɹ
   
   
   
   
   
   ϑϩϯτΤϯυɺ&.
   /FYUKT
   3FBDU
   3FBDU/BUJWF
   &YQP
   5ZQFTDSJQU
   /PEFKT
   /FPWJN
   (SBQI2-
   (P
   👶
   Ұࣇͷ෕ɹ🎲 ϘʔυήʔϜ
   4/4
   ྩ࿨τϥϕϧ
   ϑϩϯτΤϯυΤϯδχΞ
   c
   &.
   ZBTTBO !ZBT@Y !ZBT
3. © 2025 Reiwa Travel, Inc. LPって誰がどうやって作ってます？ エンジニア？ デザイナー？ ノーコード？ CMS？
4. © 2025 Reiwa Travel, Inc.
5. © 2025 Reiwa Travel, Inc. LP制作の課題 “毎回ゼロから”作るのは重い 属人化する ブランド崩れやすい
6. © 2025 Reiwa Travel, Inc. エンジニア以外でもテキストからLP生成できれば… 既存LPのデザイン資産をAIが理解できる形にレゴ化
7. © 2025 Reiwa Travel, Inc. 7 全体のアーキテクチャ
8. © 2025 Reiwa Travel, Inc. 8
9. © 2025 Reiwa Travel, Inc. 9 html.to.design Converts any website into fully editable Figma designs.
10. © 2025 Reiwa Travel, Inc. 10
11. © 2025 Reiwa Travel, Inc. 11
12. © 2025 Reiwa Travel, Inc. 12
13. © 2025 Reiwa Travel, Inc. 13
14. © 2025 Reiwa Travel, Inc. 14 Figma MCP 1. #get_variable_defs デザイントークンとしてvariablesを取得 取得したvariablesをglobal.cssなどに配置 2. #create_design_system_rules デザインシステムルール生成のための プロンプト(e.g. agents.md)を作成する
15. © 2025 Reiwa Travel, Inc. 15 Figma MCP 3. #get_image 選択した範囲のスクリーンショット取得
16. © 2025 Reiwa Travel, Inc. 16
17. © 2025 Reiwa Travel, Inc. 17
18. © 2025 Reiwa Travel, Inc. 18 Unsplash Search MCP A simple MCP server for searching and integrating Unsplash images into your applications with advanced filtering capabilities
19. © 2025 Reiwa Travel, Inc. 19 Smithery MCPサーバーの検索ができる Remoteサーバーの場合はホスティングされている
20. © 2025 Reiwa Travel, Inc. 20 MicroCMS MCP • コンテンツの作成・更新・削除 「新しいブログ記事を作成して」などコンテンツを投稿 • メディアファイルの管理 画像をアップロードしてアイキャッチに設定 • コンテンツの検索・取得 既存のコンテンツ情報を取得して分析や更新に活用
21. © 2025 Reiwa Travel, Inc. 21
22. © 2025 Reiwa Travel, Inc. 22
23. © 2025 Reiwa Travel, Inc. 「”子連れにおすすめの旅行先”というテーマのLPを作成して」
24. © 2025 Reiwa Travel, Inc. 24
25. © 2025 Reiwa Travel, Inc. 25
26. © 2025 Reiwa Travel, Inc. 26
27. © 2025 Reiwa Travel, Inc. 27
28. © 2025 Reiwa Travel, Inc. エンジニア以外でもテキストからLP生成できれば… 既存LPのデザイン資産をAIが理解できる形にレゴ化
29. © 2025 Reiwa Travel, Inc. 29 MicroCMS MCP • コンテンツの作成・更新・削除 「新しいブログ記事を作成して」などコンテンツを投稿 Claude Desktop
30. © 2025 Reiwa Travel, Inc. 30 まとめ HTMLからFigmaデータを作るときは variablesも用意する！ Figma MCPからコンポーネント(コード)を 生成するときは小さい粒度で！ CMSへの取得と作成・更新もMCPで！
31. Thank you! © 2025 Reiwa Travel, Inc.