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
デザインって“感覚”だけじゃないVibe Codingからの気づき
Search
uutan1108
July 14, 2025
Programming
3
65
デザインって“感覚”だけじゃないVibe Codingからの気づき
https://meguro-lt.connpass.com/event/359809/
uutan1108
July 14, 2025
Tweet
Share
More Decks by uutan1108
See All by uutan1108
技術以外をきっかけに交流するエンジニア向け勉強会
ohmori_yusuke
0
37
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
140
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
500
市町村のオープンデータを使って「公園・トイレの口コミマップ」を作ってみた
ohmori_yusuke
0
50
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
160
学びは趣味の延長線
ohmori_yusuke
0
94
言葉にするとやる気を再確認できる
ohmori_yusuke
1
40
生成AIで知るお願いの仕方の難しさ
ohmori_yusuke
1
170
APIサーバーが止まったので、GitHub Actions内にAPIサーバーを立てた話
ohmori_yusuke
2
210
Other Decks in Programming
See All in Programming
A Gopher's Guide to Vibe Coding
danicat
0
170
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
2
260
State of CSS 2025
benjaminkott
1
120
CEDEC2025 長期運営ゲームをあと10年続けるための0から始める自動テスト ~4000項目を50%自動化し、月1→毎日実行にした3年間~
akatsukigames_tech
0
150
画像コンペでのベースラインモデルの育て方
tattaka
3
1.8k
ゲームの物理
fadis
5
1.5k
AIレビュアーをスケールさせるには / Scaling AI Reviewers
technuma
2
230
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
190
AWS Serverless Application Model入門_20250708
smatsuzaki
0
130
🔨 小さなビルドシステムを作る
momeemt
1
470
あのころの iPod を どうにか再生させたい
orumin
2
2.5k
CSC305 Summer Lecture 05
javiergs
PRO
0
110
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Done Done
chrislema
185
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Side Projects
sachag
455
43k
A better future with KSS
kneath
239
17k
Automating Front-end Workflow
addyosmani
1370
200k
Navigating Team Friction
lara
189
15k
Making Projects Easy
brettharned
117
6.3k
Transcript
デザインって “感覚”だけじゃない Vibe Codingからの気づき めぐろLT #29 「Vibe Codingで作ったものをおしえてください」@三田
うーたん
自己紹介
自己紹介 • うーたん ◦ 𝕏:@uutan1108 ◦ サーバーサイドエンジニア 3
Vibe Coding って書いてますが、 コードを少し手書きしました
成果物
https://engineers-anime-2025-lp.pages.dev/
苦労した点
自分のデザインセンスがない
自分のデザインセンスがない - 大体 AI が出してきたコードを採用しつつ、細かい 修正を依頼していく - (例)全体的に明るい色を使って -
(例)窮屈だからいい感じに間隔を開けて - AI にアドバイスを求める - 参考のページの URL を渡すが、CSS や HTML などのコードし か読まないのでイラストが多いサイトだと AI はいいアドバイスを くれない
コンテキストにスクショを渡すより、 言葉で書いた方がいい
None
Cursor の場合、 こんな感じで画像をコピペできる
画像を読み込んでも意図が伝わらない
画像を読み込んでも意図が伝わらない - 画像を読み込んでくれるが、画像から対象のコードを AI で修正するのはしんどい - 違う箇所を修正してくる - 多分、人間がエディタの検索でコードを特定して、AI
にコードを 渡した方が早い - Cursor (コードを書く用途)で画像をコンテキストに渡す場 面が分からない。教えてほしいです!
AI は SVG を書くのが得意
None
アイコンは全て SVG で、AI が書いたやつ
便利〜!
複雑な画面を作るのは難しい
「“いい感じに ”タイムテーブルを作って」
None
妥協したタイムテーブルの デザイン
理想のタイムテーブルのデザイン - 最初は、時間に応じて枠の大きさが変化 するようにしたかった - ライブラリなどは用いずに CSS のみで実装し ようとしたが厳しかった
- 対話して「ここがズレてる」などしながら開発し たが、どんどん破壊されていく...
もしかしたら、 AI も CSS が苦手なのかもしれない
“いい感じに ”複雑な画面を作るのは難しい 具体的な指示なしで
まとめ
人間が学ぶべきなのは なのかもしれない CSS
人間が学ぶべきなのは なのかもしれない
お わ り