バイブコーディングでつくった3つのプロダクトをリニューアル 〜Claude Designでデザインを見直す〜

T E C H TA L K バイブコーディングでつくった 3つのプロダクトをリニューアル 〜Claude Designでデザインを見直す〜 2026/07/30 @unsoluble_sugar

今日話すこと 1 なぜ見直したのか 2 3プロダクトのリニュ ーアル内容 3 Claude Designの使い どころ Claude Designで何を、どう見せるかを決め、Claude Codeで実装に落とすまでの進め方 2

CHAPTER 01 なぜ見直したのか

「まず動くものを」でつくった3つ いずれも短期間で形にすることを優先して開発した 公開後もしばらく自分で使い続けていた やがて「見た目を整えたい」「使い勝手を改善したい」と感じ始めた きっかけは直前につくった動画のポータルサイト。デザイン案をClaude Design、実装を Claude Codeで進めた 4

Claude Designで見えてくること アプリ内で複数のデザイン案を見比べられる 画面を操作しながら確認できるので、UXの改善点も洗い出せる 「何となく見づらい」を優先順位・余白・ボタンの位置に分解できる 明確な案がなくても、触りながら方向性を固められる 曖昧な違和感を、具体的な改善案へ変えていけるところが強み 5

3案を横に並べて見比べる 6

CHAPTER 02 3つのリニューアル

① Daily Tech News テック系メディアから記事を自動収集す る、毎日更新のニュースサイト 記事・イベント・書籍をタブで整理 要約はタップで展開、アーカイブは年月 タブ＋カレンダー unsolublesugar.github.io/daily-tech-news OGP画像やファビコンもまとめて見直し 8

• https://unsolublesugar.github.io/daily-tech-news/

② Tsuyu-mi 「あとで読む」記事をAIが要約し、優先度 を付けるダッシュボード 優先度をタブで切り替えられる形に変更 新規性・関心の近さ・読む必要性・活用 度の4軸を常時表示 要約と評価を2カラムに分離（スマホは1 カラム） unsolublesugar.github.io/tsuyu-mi 9

• https://unsolublesugar.github.io/tsuyu-mi/

② Tsuyu-mi の Before / After Before After 旧デザイン 現デザイン 優先度はボタン。スコアと評価軸は画面に 優先度はタブ。スコアと4軸が常に右へ 出ない 10

③ Engineer Community Portal イベント情報・登壇者・発表資料をまとめ るポータルサイト 配色とフォントを変更し、ボタンやバッ ジの形状を統一 色と形で情報の役割を判別しやすくした easy2.jp イベントの絞り込みや登壇履歴も調整 11

• https://easy2.jp/

CHAPTER 03 Claude Designの 使いどころ

Claude DesignとClaude Codeの役割分担 Claude Design 何を、どう見せるか決める → Claude Code 既存の仕組みに組み込む → Claude Code テストと細かな調整 シンプルなサイトはDesignで一気に詰めてCodeへ引き継ぐ 実データで問題が出るものは、Designへ戻す往復のほうが早い 規模と内容で、一方通行にするか往復にするかを決める 13

Howの選択肢は増えた Whyは自分で決める なぜ作り、なぜ手を入れ続けるのかまではAIが決めてくれるわけではない 14

まとめ 1 3 公開して終わりではなく、使いながら 育て直せる 情報整理はタブ・2カラム・形の統一 で解ける 2 4 案を見比べ、操作して確かめられるの が強み 小規模ならDesignで詰めてCodeへ引 き継ぐ 15

元記事 3つの個人開発プロダクトをClaude Designでリニューアルした note.com/unsoluble_sugar 16

• https://note.com/unsoluble_sugar/n/n23a08ec84815

ご清聴ありがとうございました @unsoluble_sugar