デザインって“感覚”だけじゃないVibe Codingからの気づき

https://meguro-lt.connpass.com/event/359809/

Transcript

1. デザインって “感覚”だけじゃない 
 Vibe Codingからの気づき 
 めぐろLT #29 「Vibe Codingで作ったものをおしえてください」＠三田
 
 うーたん

2. 自己紹介

3. 自己紹介
 • うーたん
 ◦ 𝕏：@uutan1108
 ◦ サーバーサイドエンジニア
 3
4. Vibe Coding って書いてますが、 
 コードを少し手書きしました 

5. 成果物

6. https://engineers-anime-2025-lp.pages.dev/

7. 苦労した点 

8. 自分のデザインセンスがない 

9. 自分のデザインセンスがない 
 - 大体 AI が出してきたコードを採用しつつ、細かい
 修正を依頼していく
 - (例)全体的に明るい色を使って
 - (例)窮屈だからいい感じに間隔を開けて
 - AI にアドバイスを求める
 - 参考のページの URL を渡すが、CSS や HTML などのコードし か読まないのでイラストが多いサイトだと AI はいいアドバイスを くれない

10. コンテキストにスクショを渡すより、 
 言葉で書いた方がいい 

12. Cursor の場合、
 こんな感じで画像をコピペできる 

13. 画像を読み込んでも意図が伝わらない 

14. 画像を読み込んでも意図が伝わらない 
 - 画像を読み込んでくれるが、画像から対象のコードを AI で修正するのはしんどい
 - 違う箇所を修正してくる
 - 多分、人間がエディタの検索でコードを特定して、AI にコードを 渡した方が早い
 - Cursor (コードを書く用途)で画像をコンテキストに渡す場 面が分からない。教えてほしいです！

15. AI は SVG を書くのが得意 

17. アイコンは全て SVG で、AI が書いたやつ 

18. 便利〜！

19. 複雑な画面を作るのは難しい 

20. 「“いい感じに ”タイムテーブルを作って」 

22. 妥協したタイムテーブルの 
 デザイン

23. 理想のタイムテーブルのデザイン 
 - 最初は、時間に応じて枠の大きさが変化 するようにしたかった
 - ライブラリなどは用いずに CSS のみで実装し ようとしたが厳しかった
 - 対話して「ここがズレてる」などしながら開発し たが、どんどん破壊されていく...

24. もしかしたら、 
 AI も CSS が苦手なのかもしれない 

25. “いい感じに ”複雑な画面を作るのは難しい 
 具体的な指示なしで

26. まとめ

27. 人間が学ぶべきなのは 
 
 
 
 
 なのかもしれない 
 CSS

28. 人間が学ぶべきなのは 
 
 
 
 
 なのかもしれない 

29. お わ り