外国人エンジニアがVueプロトタイプで仕様を合わせている話 / Vue Fes Japan 2026 LT

2026年10月24日Vue Fes Japan 2026で発表したLT のスライドです。

「言葉で仕様を伝えるのが難しい」ときVue プロトタイプと図を使ってチームと認識を合わせてきた話をしました。

🗣 発表者: ノ ワン (株式会社ヤプリ)
📅 イベント: Vue Fes Japan 2026

---

【話したこと】
- 日本語力だけでは仕様のすり合わせは足りなかった
- 「見えるもの(図)」で自分の理解度と相手との認識を整理する
- 「動くもの(Vue コンポーネント)」で足りない仕様をその場で見つける
- AI × Figma MCP でデザインから動くプロトタイプをすぐ作る
- エンジニアとは図で、デザイナーとは動くもの

Transcript

1. 外国⼈エンジニアが Vueプロトタイプで仕様を 合わせている話 Vue Fes Japan 2026 2026.10.24
2. ⾃⼰紹介
3. SPEAKER 株式会社ヤプリ フロントエンドエンジニア ノ ワン(魯 完) • 出⾝は韓国 • ⽇本9年⽬ • うな重、韓国チキンが好き
4. 01 ⾃⼰紹介 ⽇本に来たきっかけ 孤独のグルメ Season5 第10話 「江東区 ⻲⼾の純レバ丼」 ドラマに出た 菜苑（サイエン） に実際に⾏きました
5. ⽇本語⼒だけでは⾜りない と気づいた話
6. 02 ⽇本語⼒だけでは⾜りないと気づいた話 2018年 2021年ごろ ⾚ちゃんレベル 会話はできるように 知っている単語を並べて 相⼿に察してもらう 仕事のやりとりも ある程度こなせるように
7. 02 ⽇本語⼒だけでは⾜りないと気づいた話 問題ないんじゃない？ と思っていたのですが
8. 02 ⽇本語⼒だけでは⾜りないと気づいた話 全然⾜りなかったです
9. 02 ⽇本語⼒だけでは⾜りないと気づいた話 お互い韓国語で話しても 話が合わないことがある
10. 02 ⽇本語⼒だけでは⾜りないと気づいた話 本当に難しかったのは 「何が分からないか」を ⾔葉にすること
11. 02 ⽇本語⼒だけでは⾜りないと気づいた話 質問するにはこの空欄を埋める必要がある ？？？ の部分が ？？？ ？？？ なので を教えてください 何がわからないかがわからないと空欄が埋まらない
12. 02 ⽇本語⼒だけでは⾜りないと気づいた話 ⾔葉にできたのはほんの⼀部だった ⾔葉にできた質問 「ここがちょっと…」 本当にわからないこと 前提‧背景‧仕様の意図 ⽔⾯下を⾔葉以外で⾒せられないか？
13. ⾔葉の代わりに「〇〇」で 伝える
14. 03 ⾔葉の代わりに「〇〇」で伝える 〇〇 = ⾒えるもの
15. 03 ⾔葉の代わりに「⾒えるもの」で伝える 例：アプリの各画⾯を選ぶUIをトップバーからサイドバーへ 変更前 変更後 すっきり見やすい 「サイドバー」形式
16. 03 ⾔葉の代わりに「⾒えるもの」で伝える 変更前の課題 コンテンツ数が多いと 画面全体を隠してしまう
17. 03 ⾔葉の代わりに「⾒えるもの」で伝える ⼊社したばかりで コードの構成が全然わからない ⾔葉で質問しても何がわからないのかを説明できない
18. 03 ⾔葉の代わりに「⾒えるもの」で伝える レイアウト構成をイメージ化 共通化可能なコンポーネントを検知 共通レイアウト化可能と判断 「認識確認‧仕様漏れ‧疑問点」をその場で整理できた
19. 03 ⾔葉の代わりに「⾒えるもの」で伝える 図で整理したら共通レイアウトにできた 実際のコード（詳細は割愛） <template> <div> <header> ・・・ </header> <!-- 新コンテンツ一覧（サイドバー） <aside> <CmsAppContentsSideBar /> </aside> <main> <slot /> </main> </div> </template> -->
20. 03 ⾔葉の代わりに「⾒えるもの」で伝える 2つのことが整理できる 1 相⼿と認識を合わせられる ⾔葉にしにくいことも、図を指しながら話せる 2 ⾃分がどこまで理解しているかが分かる 描けないところ ＝ 分かっていないところ
21. 03 ⾔葉の代わりに「〇〇」で伝える 〇〇 = 動くもの
22. 03 ⾔葉の代わりに「動くもの」で伝える 今はAIで 動くVueコンポーネントが すぐ作れる Figma MCP × Claude などでデザインから直接
23. 03 ⾔葉の代わりに「動くもの」で伝える ⾔葉で説明するより作って⾒せる⽅が速くなった 外国⼈の⾃分には 特に重い ⾔葉で説明す るコスト AIで作る コスト
24. 03 ⾔葉の代わりに「動くもの」で伝える ① 構成を決めてAIでVueコンポーネントを作る デザイン（Figma） 構成を決める（⾃分） CSSなしのVue CmsContentsSidebar MainHeader ScrollableWrapper ContentsSection AI ContentsSection FixedWrapper 「どう分けるか」は⾃分で決めて、組み⽴てはAIに任せる
25. 03 ⾔葉の代わりに「動くもの」で伝える ② Figma MCPでCSSとダミーデータを⼊れる CSSなし（構造だけ） CSS＋ダミーデータ Figma MCP スクリーンショットに差し替え デザインに近い⾒た⽬とリアルなデータで「触れる」状態にする
26. 03 ⾔葉の代わりに「動くもの」で伝える 「デモを作って終わり」 ではなく
27. 03 ⾔葉の代わりに「動くもの」で伝える コミュニケーションツール として 活⽤ する
28. 03 ⾔葉の代わりに「動くもの」で伝える ③ PdM‧デザイナーさんに⾒せたら ⾃分から提案 開け閉めのアニメーション 幅を広げる場所をハイライト 起きたこと 1 画⾯を指差しながら 話せるようになった 起きたこと 2 ⾜りない機能‧仕様が その場で⾒つかった PdM‧デザイナーさん 起きたこと 3 「ここ、もう少し こうしたいです」 ⾃分から UXの提案もできた ⾔葉では難しかった提案も動くものなら伝わる
29. 03 ⾔葉の代わりに「動くもの」で伝える やってみて後から気づいたこと 相⼿によって⾒せるものを使い分ける ⾒えるもの（図） 動くもの（プロトタイプ） エンジニア PDM‧デザイナー 構造‧設計を合わせる ⾒た⽬‧挙動を合わせる ⾔葉の代わりになる「共通⾔語」は相⼿ごとに違う
30. まとめ
31. 04 まとめ ⾔葉で説明できなくても ⾒せれば理解してもらえる
32. 04 まとめ 持ち帰ってほしい 2つのこと ⾔葉で説明するのが難しいとき 詰まったらまず図か動くものを作ってみる ⼀緒に働くメンバーに⾔葉で伝わりにくそうなとき 「画⾯で⾒せてもらえますか？」と⼀⾔
33. FOLLOW ME!! Yappli Developers @yappli_dev Yappli Tech Blog https://tech.yappli.io/ カジュアル⾯談 �� https://open.talentio.com/r/1/c/yappli/pages/59642