【Google Stitch】「Vibe Coding」は30代エンジニアの仕事を奪うのか？週末の個人開発で試したリアルな感想
【Google Stitch】「Vibe Coding」は30代エンジニアの仕事を奪うのか？週末の個人開発で試したリアルな感想
お疲れ様です。WebエンジニアのKです。
2026年もあっという間に2月ですね。最近、現場で後輩のコードレビューをしていると、AIが生成したコードとおぼしき記述を見かけることが本当に増えました。
今日は、最近テック界隈で話題沸騰中の**「Google Stitch」と、それによる新しい開発スタイル「Vibe Coding（バイブ・コーディング）」**について、週末にガッツリ触ってみた感想をまとめたいと思います。
正直なところ、最初は「また新しいノーコードツールか」くらいに思っていたんですが、実際に触ってみて**「あ、これは僕らの働き方が変わるな」**と背筋が伸びる思いでした。
特に、未経験からこの世界に飛び込んで6年、ようやく「手書きのコーディング力」に自信がついてきた私のようなエンジニアこそ、今知っておくべき内容だと感じています。
1. なぜ今「Stitch」なのか？深夜の「CSS調整」からの解放
私たちWebエンジニアにとって、デザイナーさんからFigmaで渡されたデザインを実装する「Design Handoff」の作業って、正直一番カロリーを使うところですよね。
「ここのマージン、2pxズレてます」
「スマホで見ると崩れます」
現場でトレーナーをしていた頃、後輩がこの「ピクセルパーフェクト」の呪縛にハマって消耗しているのを何度も見てきました。私自身も、個人開発でアプリを作ろうとするたびに、**「機能ロジックは書きたいけど、UIを作るのが面倒くさい」**という理由で、いくつものアイデアをお蔵入りさせてきました。
Google Stitchは、まさにここのボトルネックを解消するツールです。
レポートによると、Stitchは単なる画像生成ではなく、**「DOM構造とTailwind CSSを伴うエンジニアリング資産」**としてUIを出力してくれるとのこと。
「これは試すしかない」と思い、妻と子供が寝静まったあとのゴールデンタイムを使って、以前から作りたかった「家族の買い物リスト共有アプリ」のプロトタイプを作ってみることにしました。
2. 「Gemini 3 Pro」の実力と、現場視点で感じた「落とし穴」
Stitchの画面はFigmaの「無限キャンバス」に似ています。ここに「買い物リストのUI、シンプルで、でも温かみのある感じで」とプロンプト（というか、まさにVibeですね）を打ち込むと、数秒でプレビューが生成されます。
ここで感動したこと
**「Gemini 3 Pro (Thinking Mode)」**の推論能力が凄まじいです。「買い物リスト」と言っただけなのに、削除ボタンだけでなく「購入済みにするチェックボックス」や、間違って消した時の「Undoトースト」まで勝手に補完してくれました。
これ、僕が新人の頃なら仕様漏れで怒られていたやつです（笑）。UXの文脈を理解して提案してくる点は、頼れる先輩エンジニアとペアプロしている感覚に近いです。
ここでハマったこと（技術的な教訓）
一方で、生成されたコード（React + Tailwind）を見て、「うっ」となりました。
レポートにも書かれていましたが、**「コンポーネントの粒度が荒い」**んです。サイドバーもヘッダーもメインリストも、すべて一つの巨大な Dashboard.tsx に詰め込まれていました。
さらに、Tailwindのクラス指定で p-[13px] のような**マジックナンバー（Arbitrary Value）**が多用されていました。
「これ、保守運用フェーズに入ったら絶対苦労するやつだ…」
現場でこれをそのままコミットされたら、僕なら間違いなく「リファクタリングしてから出して」と差し戻します。
3. 本当の革命は「MCP × Claude Code」にあった
ここからが本題です。
ただのUI生成なら他のツール（v0やLovable）でもできます。私がStitchに可能性を感じたのは、MCP（Model Context Protocol）を使った「Claude Code」との連携です。
レポートを読みながら、ターミナルで以下のコマンドを叩いてみました。
npx -p stitch-mcp-auto stitch-mcp-auto-setup
これをセットアップすると、なんとローカルのターミナルにいるClaude（Anthropic社のCLIツール）が、クラウド上のStitchを直接操作できるようになるんです。
これが何を意味するかというと…
- ブラウザのStitchで大枠のUIを作る。
- ターミナルで「さっきのUI、
components/ディレクトリに分割して。あとマジックナンバーはやめて、tailwind.config.jsのテーマに従って」と指示する。 - ClaudeがStitchからコードを引っ張り出し、プロジェクトのディレクトリ構成に合わせて整形して、ローカルファイルに書き込んでくれる。
この体験は衝撃でした。「デザインを作るAI（Stitch/Gemini）」と「実装を整えるAI（Claude）」を、人間がディレクションする。
**「コードを書く」のではなく「コードの設計意図を伝える」**ことに脳のリソースがシフトした瞬間でした。
4. 30代エンジニアとしてのキャリア戦略
今回の技術調査を通して、今後のキャリアについて深く考えさせられました。
以前は「CSSをいかに早く正確に書くか」が価値でしたが、Vibe Codingの時代にはその価値は相対的に下がります。
これからの私たちに求められるのは、以下の3点だと感じました。
-
目利き力（レビュー力）: AIが書いたコードのアクセシビリティ（a11y）やセキュリティリスクを一瞬で見抜く力。Stitchはまだ
div onClickみたいな実装を平気でするので、ここの防波堤になる必要があります。 - アーキテクチャ設計: AIは「動く画面」は作れますが、「3年後もメンテできるディレクトリ構成」までは考えてくれません。ここはまだ人間の領分です。
- 英語力とキャッチアップ: 今回のMCPのような最新情報は、英語のドキュメントやRedditで議論されています。私も英語学習を続けていますが、情報の一次ソースに触れる重要性は増すばかりです。
最後に
「AIに仕事を奪われる」と怖がるのではなく、**「面倒な単純作業をAIに押し付けて、もっとクリエイティブなこと（や、家族との時間）に集中できる」**と捉え直しました。
StitchとFirebase Studioを組み合わせたら、週末だけで個人アプリのMVP（実用最小限の製品）がデプロイまで完了しました。これまでは1ヶ月かかっていた工程です。
もし、皆さんの現場で「UI実装の工数が重い」「デザインの手戻りがつらい」という課題があれば、ぜひ一度Stitch（とMCP連携）を試してみてください。
技術的なハマりポイントや、Tailwindの調整ノウハウなど、もし質問があればコメントお待ちしています！
それでは、明日も良いコード（と良いプロンプト）を書きましょう。
Discussion