目次
TL;DR
- AIに何も指示せずにUIを作らせると、高確率で「紫グラデーション」になる
- Claude Code + Playwright MCP + デザインAI（Stitch）でリニューアルを実行
- 新カラーは amber-500（琥珀色）、ターミナル/コード風のデザインへ
紫グラデーション問題
このブログ「Zero-Shot Log」は、元々AIでデザインを生成していました。
見た目は悪くない。でも、どこかで見たことがある気がする。
原因は「紫のグラデーション」です。
この現象について、Xで興味深いポストを見かけました。
AIになにも指示せずにHTMLを作らせると、高確率で紫のグラデーションを使ってくる気がするのですが、何の学習を経て、紫を学んだんだろう。 pic.twitter.com/7oAgKmjhko
— たにぐち まこと／学ぶ。をちゃんと (@seltzer) January 12, 2026
このポストへのリプライでは「TailwindのBg-indigo-500の影響を大きく受けている」という指摘がありました。
どうもTailwindのbg-indigo-500の影響を大きく受けているとこちらのポストで言及がありました。https://t.co/Dqk2DBzPL8
— Masayan / Web系エンジニアテック /AI / MCP/ Claude Code (@masayanishigaki) January 12, 2026
AIは最も頻繁に目にするものを模倣し、さらにモデルは青紫のグラデーションがウェブデザインにおける「最適な」デフォルトであることを自然に学習した結果のようです。…
AIが学習データからindigo/purple系のグラデーションを「最適なデフォルト」として学習した結果では、とのことです。
脱却することにしました。
リニューアルのワークフロー
今回のリニューアルでは、3つのAIツールを組み合わせました。
1. 現状把握: Claude Code + Playwright MCP
まず、Claude CodeにPlaywright MCPを接続して現行サイトのスクリーンショットを取得。デスクトップ・モバイルそれぞれのトップページと記事ページを撮影しました。
これにより、デザイナーAIへの依頼時に「現状」を正確に伝えられます。
2. デザイン依頼書の作成
取得したスクリーンショットをもとに、デザイナーAIへの依頼書（design-brief.md）を作成。含めた内容は以下の通りです。
- サイト情報（名前、コンセプト、ページ構成）
- 現在のカラースキームと問題点の洗い出し
- 避けたいデザイン要素（紫グラデーション、派手なグロー等）
- 期待する方向性（ミニマル、ウォームダーク、ターミナル/Vibe Coding風等）
「何が嫌か」を明確に伝えることで、AIの出力をコントロールしようという狙いです。
3. デザインAI（Stitch）への依頼
StitchはGoogle Labsが提供するUI生成AIツール。Gemini 2.5 Proを搭載し、テキストや画像からUIデザインを生成できます。現在ベータ版で無料利用可能。
このStitchにスクリーンショットと依頼書を渡し、新しいデザイン案を受け取りました。
出てきたのはHTMLファイルとプレビュー画像。amber系のウォームな配色で、依頼内容は反映されています。
4. 実装
Stitchの成果物にはHTMLも含まれていますが、これは画像では伝わらない詳細情報を補完するためのもの。既存のAstroコンポーネントにそのまま適用できるわけではないので、カラーパレットやフォント選定などのコンセプトを参考にしながら、Claude Codeでスタイルを書き直しました。
まとめ
- AI生成デザインの「紫グラデーション」問題は、明示的な指示で回避できる
- 「スクショ＋依頼書→デザインAI→実装」の流れでリニューアルがスムーズに進む
デザインのリニューアルがAIでここまで手軽にできる、良い時代になりました。
