---
title: バイブコーディングでつくった3つのプロダクトをリニューアル 〜Claude Designでデザインを見直す〜
tags:  #claude #aiエージェント #バイブコーディング #ai駆動開発 #claude design #claude code #個人開発  
author: [星影](https://docswell.com/user/unsoluble_sugar)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/KJ4WQZDP71.jpg?width=480
description: noteで書いた記事のダイジェスト版です。  ▼バイブコーディングでつくった3つの個人開発プロダクトをClaude Designでリニューアルした https://note.com/unsoluble_sugar/n/n23a08ec84815
published: July 30, 26
canonical: https://docswell.com/s/unsoluble_sugar/KQ2L4J-2026-07-30-claude-design-renewal
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/KJ4WQZDP71.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/LE1YPRZX7G.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/GEWG219KJ2.jpg)

CHAPTER 01
なぜ見直したのか


# Page. 4

![Page Image](https://bcdn.docswell.com/page/47ZLDP9NJ3.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/YJ6W1MK9JV.jpg)

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


# Page. 6

![Page Image](https://bcdn.docswell.com/page/GJ5M4ZPDJ4.jpg)

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


# Page. 7

![Page Image](https://bcdn.docswell.com/page/LE3WG96QE5.jpg)

CHAPTER 02
3つのリニューアル


# Page. 8

![Page Image](https://bcdn.docswell.com/page/8EDK1GVW7G.jpg)

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


# Page. 9

![Page Image](https://bcdn.docswell.com/page/V7PKQ3VXJ8.jpg)

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


# Page. 10

![Page Image](https://bcdn.docswell.com/page/2JVV54Z3JQ.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/5EGL614YJL.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4JQY4DG67P.jpg)

CHAPTER 03
Claude Designの
使いどころ


# Page. 13

![Page Image](https://bcdn.docswell.com/page/K74WQZ5ME1.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/LJ1YPRWYEG.jpg)

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


# Page. 15

![Page Image](https://bcdn.docswell.com/page/GJWG216172.jpg)

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


# Page. 16

![Page Image](https://bcdn.docswell.com/page/4EZLDPYX73.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/Y76W1MDP7V.jpg)

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