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
64
デザインって“感覚”だけじゃないVibe Codingからの気づき
https://meguro-lt.connpass.com/event/359809/
uutan1108
July 14, 2025
Tweet
Share
More Decks by uutan1108
See All by uutan1108
MDN Web Docs に日本語翻訳でコントリビュートしたくなる
ohmori_yusuke
1
130
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
470
市町村のオープンデータを使って「公園・トイレの口コミマップ」を作ってみた
ohmori_yusuke
0
46
エンジニアが組織に馴染むために勉強会を主催してチームの壁を越える
ohmori_yusuke
2
150
学びは趣味の延長線
ohmori_yusuke
0
91
言葉にするとやる気を再確認できる
ohmori_yusuke
1
29
生成AIで知るお願いの仕方の難しさ
ohmori_yusuke
1
170
APIサーバーが止まったので、GitHub Actions内にAPIサーバーを立てた話
ohmori_yusuke
2
200
「何か」を求めて参加したカンファレンスから持ち帰ってきた「熱」を維持して、活用するために
ohmori_yusuke
2
410
Other Decks in Programming
See All in Programming
新世界の理解
koriym
0
110
QA x AIエコシステム段階構築作戦
osu
0
230
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
180
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
220
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
41
16k
What's new in Adaptive Android development
fornewid
0
130
Understanding Kotlin Multiplatform
l2hyunwoo
0
250
変化を楽しむエンジニアリング ~ いままでとこれから ~
murajun1978
0
640
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
3
320
テスターからテストエンジニアへ ~新米テストエンジニアが歩んだ9ヶ月振り返り~
non0113
2
250
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
なぜあなたのオブザーバビリティ導入は頓挫するのか
ryota_hnk
4
550
Featured
See All Featured
The Language of Interfaces
destraynor
158
25k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
How to Ace a Technical Interview
jacobian
278
23k
4 Signs Your Business is Dying
shpigford
184
22k
Mobile First: as difficult as doing things right
swwweet
223
9.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Writing Fast Ruby
sferik
628
62k
GitHub's CSS Performance
jonrohan
1031
460k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Music & Morning Musume
bryan
46
6.7k
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
人間が学ぶべきなのは なのかもしれない
お わ り