Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザイン資産をレゴ化!MCPで誰でも作れるLP基盤
Search
ya2s
September 01, 2025
0
410
デザイン資産をレゴ化!MCPで誰でも作れるLP基盤
ya2s
September 01, 2025
Tweet
Share
More Decks by ya2s
See All by ya2s
Next.js Imageコンポーネントの 舞台裏をのぞく👀
ya2s
0
18
NEWT Tech Talk vol.7 Next.jsとTurborepoで挑む!マイクロフロントエンドのリアル
ya2s
0
110
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
How to Ace a Technical Interview
jacobian
280
24k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
Principles of Awesome APIs and How to Build Them.
keavy
127
17k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
116
20k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
The Art of Programming - Codeland 2020
erikaheidi
56
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
333
22k
Visualization
eitanlees
149
16k
Transcript
σβΠϯࢿ࢈ΛϨΰԽʂ.$1Ͱ୭Ͱ࡞ΕΔ-1ج൫
© 2025 Reiwa Travel, Inc. 2 #BDLHSPVOE d-*/&Ϡϑʔגࣜձࣾ ɹɹɹɹ%FW0QTɺ10ɺ1BZ1BZϑϦϚͷϑϩϯτΤϯυ dגࣜձࣾྩτϥϕϧ
ɹɹɹɹϑϩϯτΤϯυɺ&. /FYUKT3FBDU3FBDU/BUJWF&YQP5ZQFTDSJQU /PEFKT/FPWJN(SBQI2-(P 👶 Ұࣇͷɹ🎲 ϘʔυήʔϜ 4/4 ྩτϥϕϧϑϩϯτΤϯυΤϯδχΞc&. ZBTTBO !ZBT@Y !ZBT
© 2025 Reiwa Travel, Inc. LPって誰がどうやって作ってます? エンジニア? デザイナー? ノーコード? CMS?
© 2025 Reiwa Travel, Inc.
© 2025 Reiwa Travel, Inc. LP制作の課題 “毎回ゼロから”作るのは重い 属人化する ブランド崩れやすい
© 2025 Reiwa Travel, Inc. エンジニア以外でもテキストからLP生成できれば… 既存LPのデザイン資産をAIが理解できる形にレゴ化
© 2025 Reiwa Travel, Inc. 7 全体のアーキテクチャ
© 2025 Reiwa Travel, Inc. 8
© 2025 Reiwa Travel, Inc. 9 html.to.design Converts any website
into fully editable Figma designs.
© 2025 Reiwa Travel, Inc. 10
© 2025 Reiwa Travel, Inc. 11
© 2025 Reiwa Travel, Inc. 12
© 2025 Reiwa Travel, Inc. 13
© 2025 Reiwa Travel, Inc. 14 Figma MCP 1. #get_variable_defs
デザイントークンとしてvariablesを取得 取得したvariablesをglobal.cssなどに配置 2. #create_design_system_rules デザインシステムルール生成のための プロンプト(e.g. agents.md)を作成する
© 2025 Reiwa Travel, Inc. 15 Figma MCP 3. #get_image
選択した範囲のスクリーンショット取得
© 2025 Reiwa Travel, Inc. 16
© 2025 Reiwa Travel, Inc. 17
© 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
© 2025 Reiwa Travel, Inc. 19 Smithery MCPサーバーの検索ができる Remoteサーバーの場合はホスティングされている
© 2025 Reiwa Travel, Inc. 20 MicroCMS MCP • コンテンツの作成・更新・削除
「新しいブログ記事を作成して」などコンテンツを投稿 • メディアファイルの管理 画像をアップロードしてアイキャッチに設定 • コンテンツの検索・取得 既存のコンテンツ情報を取得して分析や更新に活用
© 2025 Reiwa Travel, Inc. 21
© 2025 Reiwa Travel, Inc. 22
© 2025 Reiwa Travel, Inc. 「”子連れにおすすめの旅行先”というテーマのLPを作成して」
© 2025 Reiwa Travel, Inc. 24
© 2025 Reiwa Travel, Inc. 25
© 2025 Reiwa Travel, Inc. 26
© 2025 Reiwa Travel, Inc. 27
© 2025 Reiwa Travel, Inc. エンジニア以外でもテキストからLP生成できれば… 既存LPのデザイン資産をAIが理解できる形にレゴ化
© 2025 Reiwa Travel, Inc. 29 MicroCMS MCP • コンテンツの作成・更新・削除
「新しいブログ記事を作成して」などコンテンツを投稿 Claude Desktop
© 2025 Reiwa Travel, Inc. 30 まとめ HTMLからFigmaデータを作るときは variablesも用意する! Figma
MCPからコンポーネント(コード)を 生成するときは小さい粒度で! CMSへの取得と作成・更新もMCPで!
Thank you! © 2025 Reiwa Travel, Inc.