Google Stitch + Claude Code： 「AIらしさ」のないウェブサイトデザイン

Ailootの利用に関する追加の手順は、ドキュメントにあります。

Claude Codeで作ったウェブサイトは、なぜ「AIスロップ」のように見えるのか？#

ここで紹介する実例では、発信アプリのホームページ制作は、空のプロジェクトとClaude Codeにランディングページの構築を依頼するところから始まりました。できあがったのは、お決まりのものでした。背景はslate-950、アクセントはindigo-500、見出しは太字のInter、その下には影付きの同じカードが3枚。最初のv0、最初のLovable、最初のChatGPT生成と同じレイアウトです。プロンプトを書き直すこと5回。「プレミアム」「他とは違う」「モダン」と加えても、ページは2015年のWordPressテーマのように見えたままでした。

理屈は単純です。制約がなければ、モデルは見てきたものの統計的な平均を取ります。そして、BootstrapとTailwindで作られた同じランディングページを何百万と見てきています。平均的ではない結果を得るには、どの色、どのフォント、どの余白、どのコンポーネントを基準にするか、具体的にエージェントへ伝える必要があります。モデルにとって「美しい」という言葉は「2020年の中央値」を意味します。形容詞では結果は変わりません。正確なパラメーターが必要です。

このギャップについては、Referoの既製デザインシステムのガイドでも取り上げました。そこでエージェントに渡すのは、Apple、Linear、Stripeなど、他社のスタイルです。Google Stitchは逆のアプローチを取ります。他社のスタイルを借りる代わりに、自分の説明から独自のスタイルを生成します。

Google Stitchとは何か、どう役立つのか？#

StitchはGoogle Labsの実験的ツールで、2025年5月のGoogle I/Oで発表されました。プロンプト欄にアプリの見た目を記述するか、スクリーンショット、ホワイトボードのスケッチ、競合他社のページをアップロードすると、Stitchは無限キャンバス上にインターフェース画面を生成します。内部ではGemini 2.5 ProとFlashを使い、より洗練されたレイアウト向けにGemini 3が2025年12月に追加されました。

便利な点は次のとおりです。

• Vibe Design—雰囲気を言葉で説明すると（「Stripeのように、ミニマルでプレミアム」など）、いくつかのビジュアル案から選べます。
• 参照画像—DribbbleやPinterestの画像をアップロードすると、Stitchはレイアウトを保ちながら要件を反映します。
• 3つの形式でエクスポート—Figmaへ（編集可能なレイヤー付き）、クリーンなHTML/CSSとして、そしてMCP経由でエージェントへ直接。

Referoのような既製スタイルとの違いは重要です。Referoは実際のウェブサイトから抽出済みのデザインシステムのライブラリーで、既存ブランドを使います。Stitchは製品用のシステムをゼロから生成します。参考デザインがなく、独自の見た目にしたいならStitch。有名な製品のスタイルを手早く適用したいならReferoです。両者は異なる工程を担い、うまく補完し合います。

Claude自体にもデザインモードが組み込まれています。Claude Designのガイドで紹介しました。Stitchとの違いは、エージェントが何かを作るたびに読み込める、既成のシステムを外部ファイルで提供する点です。

Google Stitchの利用要件#

Stitchはすべての国で利用できるわけではありません。Googleの担当者は公式フォーラムで、18歳以上のユーザーが212か国で利用でき、対象国は拡大中だと述べています。制限対象の地域からアクセスすると、「申し訳ありません。Stitchは利用できません」というメッセージだけが表示されます。

Googleアカウントが必要です。ログインにはGoogleアカウントしか使えません。

Stitch MCPの認証がClaude Codeの作業を止めた場合#

MCP接続の手順はネット上に大量にありますが、役に立たないものも多く、説明の半分はそもそも動きません。たとえば、人気の英語ガイドを含め、多くのガイドが@google/stitch-mcpパッケージをnpx -y @google/stitch-mcp@latestコマンドでインストールするよう勧めています。そのパッケージは存在せず、npmは404を返します。このコマンドをコピーしないでください。時間を無駄にします。同じ理由で、実際のタスクでインストールと動作確認が済んでいる連携を選びましょう。

この記事のリモートMCPの試行では、Claude CodeでIncompatible auth serverが返りました。この観測は動く設定手順でも、現在の全構成が失敗する証明でもありません。未指定の「MCP接続」へ進まず、正確な互換設定が検証されるまでは、以下の手動書き出しを使ってください。

まず、キーを作成します。Stitchでアバターをクリックし、Stitch settings → API keyセクション → Create keyの順に選び、キーをコピーします。

次に、1つのコマンドでプロキシをClaude Codeに追加します。

bash

環境変数にキーを設定します（最も簡単な方法です。Googleのコンソールや期限切れになるトークンを扱う必要がありません）。

export STITCH_API_KEY="your-key-from-stitch-settings"

手動で設定する場合は、次のようになります（プロジェクトルートの~/.claude.jsonまたは.mcp.jsonに記述）。

json

Claude Codeを再起動し、接続が動作しているか確認します。

claude mcp list

一覧にstitchが表示されるはずです。Google Cloud CLIによる認証設定は、組織のポリシーに従って行ってください。プロジェクトルートの.envファイルが構成の妨げとなる場合があるため、設定手順を確認してください。

StitchとDESIGN.mdを使うワークフローは、コンテキストエンジニアリングの最も純粋な形です。正確なトークンをあらかじめClaudeのコンテキストに入れ、こちらの意図を「推測」させず、そのとおりに構築させます。完全な手法は、AIクローン、セカンドブレイン、コンテキストエンジニアリングという3つの柱を組み合わせます。この組み合わせによって、Claudeは「推測するアシスタント」から、予測可能な結果を出すツールに変わります。

DESIGN.mdとは何か、なぜスクリーンショットより優れているのか？#

多くの説明が誤っている重要な点があります。Stitchには「Export DESIGN.md」ボタンはありません。エージェント自身がファイルを組み立てます。Googleの公式Codelabによると、プロンプトはおおよそ次のようなものです。「デザインを確認し、Stitch MCP経由でプロジェクトを開き、カラーパレットとタイポグラフィを抽出して、それをもとにDESIGN.mdを組み立ててください。」そのCodelabは動くMCP接続を前提にしています。ここでの手動経路ではClaude Codeが書き出したHTML/CSSを読み、ルートに構造化ファイルを作ります。画像から推測せず、不足する値を明示させてください。

DESIGN.mdには形容詞ではなく、具体的な指定を書きます。

# DESIGN.md
## カラー
- Primary:   #0F172A
- Accent:    #F97316
- Success / Error / Warning: ...
- Background / surfaces: ...
## タイポグラフィ
- Font (body): "Instrument Sans"; (headings): "Instrument Serif"
- Scale: H1 48/1.1, H2 36/1.15, Body 16/1.6, Caption 13/1.4
- Weights: 400 / 500 / 700
## 余白（基準値 8px）
- xs 4, sm 8, md 16, lg 24, xl 40, 2xl 64
## レイアウト
- Container max-width: 1200px; breakpoints: 640 / 768 / 1024 / 1280
## コンポーネント
- Button: radius 10px; variants primary / secondary / ghost; states hover / active / disabled
- Card: radius 16px; shadow 0 4px 24px rgba(0,0,0,.08)

Claude Codeにこのファイルを使わせるには、CLAUDE.mdからファイルを参照させます（たとえば、「すべてのコンポーネントのデザインにはDESIGN.mdを使用する」という行を追加）。そうすれば、エージェントはどのセッションでも同じトークンを読み込みます。月曜日に作ったボタンも金曜日に作ったカードも、共通の情報源があるので同じスタイルになります。

この構成では2つのローカル資料を使います。DESIGN.mdは色、書体、余白、部品の規則を持ち、Stitchから出したHTML/CSSと素材が具体的な画面を示します。この経路にMCPは必須ではなく、任意です。

ウェブサイトの作り方：テキストからデザインまでの全工程#

全工程を順に説明します。

1. Stitchを開く。 自分の国で提供されるか確認し、自分のGoogleアカウントでstitch.withgoogle.comへログインします。
2. 製品を説明する。 必要画面と利用フローを示し、提案された一覧を確認・編集します。
3. 参照を追加する。 意図した画像を渡し、残したい色、書体、配置を指定します。
4. 1画面を調整する。 対象を選び、広げる前に仕上げます。
5. 選んだ画面をHTML/CSSで書き出す。 必要素材とともにプロジェクトの参照フォルダーへ保存し、ローカルでHTMLを開いて対象画面か確認します。画像だけには正確なCSS値はありません。
6. 実ファイルからDESIGN.mdを作る。 色、書体、間隔、配置、部品の実値を記録し、不足値は判断用に列挙させます。この経路にStitch APIキーやMCP認証は不要です。
7. 1ページを作り確認する。 次のフォルダー名は実際の書き出し先へ変えてください。

refs/stitch-export/のStitch HTML/CSSを読んでください。実ファイルにある値で、ルートにDESIGN.mdを作成します。不足値は作らず明示してください。

DESIGN.mdとローカルStitch書き出しから1ページを作ってください。部品をモジュール化し、デスクトップとモバイル幅で描画を比較します。ナビゲーションと操作状態は別に検証してください。

以降はすべてClaude Codeの担当です。DESIGN.mdのブレークポイントに合わせた画面間のルーティングやレスポンシブ対応、アニメーション、インタラクティブ機能を実装します。Stitchが提供するのは静的な画面とクリック可能なプロトタイプであり、動作するロジックを構築したり、ホスティングに公開したりはしません。そこはエージェントの仕事です。

「AIらしさ」をなくすには、具体的に何を変えるべきか？#

サイトの「AIらしさ」が消える具体的なポイントは次のとおりです。

• 色。 紫のindigo-500は最初に気づかれる特徴です。DESIGN.mdにプライマリーカラーとアクセントカラーを正確な16進数値で指定します。「ブランドブルー」はエージェントごとに解釈が異なります。
• フォント。 Interは最も無難で、そのため最も見覚えのある「AIフォント」です。表情のある組み合わせを選びます。たとえば、本文にはサンセリフ、見出しには個性のあるフォントを使います。Stitchのデザインで指定し、DESIGN.mdに記録します。
• 形容詞の代わりに参照画像を使う。 モデルは「モダンにして」を「2020年の中央値」と解釈します。実際のスクリーンショットがあれば、「このページのレイアウトを使って」を文字どおりに受け取ります。Stitchに参照画像をアップロードしましょう。言葉だけで好みを伝えることはできません。
• 余白とゆとり。 窮屈で同じブロックが並ぶレイアウトは、テンプレートだとすぐにわかります。DESIGN.mdで余裕のある余白のスケールを設定すれば、エージェントはより自由に要素を配置します。

具体性は主観的な形容詞に勝ります。Stitchは、あなたの「こんなふうにしたい」を正確なトークンに変換する機械のようなものです。これならエージェントが推測する余地はありません。

Google Stitchと代替ツール：どれを選ぶべきか？#

予算を抑えてバイブコーディングをする際に、本当に重要な観点で各ツールを比較しました。

私自身が使うワークフローは、デザイン探索にStitchを使い、構築とロジックにClaude Codeを使う方法です。予算を抑えたいバイブコーダーには、無料で製品独自の見た目をゼロから描けるStitchが最適です。市場にあるツール全体を把握したい方は、まとめ記事2026年に何を使ってコーディングするかをご覧ください。

Google Stitchが不得意なこと：どんな制限があるのか？#

3つ目の画面でがっかりしないよう、率直に制限を挙げます。

• インターフェースのみ。 バックエンド、データベース、ホスティングへの公開はできません。これらにはClaude Codeが必要です（すべてを一か所で扱いたければLovableを使います）。
• ツール内の編集には制限がある。 マウスで個々の要素を動かすことはできません。プロンプトで変更して再生成するしかありません。Figmaとは違います。
• 非決定性。 同じプロンプトでも異なる結果になります。アイデアの検討には便利ですが、再現可能な出力が必要な場合は不便です。
• 利用枠。 無料生成の上限（現在は1日ごと）に達すると、上限がリセットされるまで待つ必要があります。追加購入はできません。正確な数は変わるため、インターフェースを確認してください。
• 実験段階。 Google Labsは長期サポートを保証していません。サービスが変更されたり、終了したりする可能性があります。
• 地域制限とClaude CodeのMCP認証問題については、利用要件と設定のセクションで説明しました。

厳格なブランドガイドを複数プロジェクトで使う場合、デザインがすでにFigmaにある場合、またはバックエンド付きで公開済みのアプリが必要な場合、Stitchは適していません。

次に何をする？#

画面を1つだけ使って、最小限のワークフローを作ってみましょう。Stitchで製品を説明し、ホームページを生成し、そのHTML/CSSを書き出してから、Claude CodeにローカルファイルをもとにDESIGN.mdとページを作らせます。紫のグラデーションが自然に消えるのを見れば、その後は簡単になります。

Stitchを使ったデザインは、コンテキストエンジニアリングの手法の1つです。完全なシステムでは、AIクローン、セカンドブレイン、コンテキストエンジニアリングを組み合わせ、Claudeがあらかじめ用意されたルールとコンテキストを頼れるようにします。

AIクローン、セカンドブレイン、コンテキストエンジニアリングは、製品にとって重要です。Stitchを使ったデザインは、この組み合わせの最初の構成要素です。

モデルを使ったさらなる作業には、Ailootをご利用ください。