「デザインは作れる。でもコードが書けないから、エンジニアに頼まないと動かせない」——この壁を越えたくて、Google Stitch と Webflow を組み合わせるワークフローを試した。
Stitch でUIを設計し、Webflow でそれを実装する。コードを一行も書かずに、デザインを「動くWebサイト」にする。できるかどうか試した全記録を書く。
結論から言うと
Google Stitch × Webflow のワークフローは「動作するWebページ」を作るために機能する。Stitch でUIのビジュアル方向性を決め、WebflowでそのUIを再現・実装する流れは、コードを書かないデザイナーが「自分でリリースできる」状態を作れる。ただし「Stitch の出力をそのまま Webflow に移す」ことはできず、Webflowでの再現作業が別途必要になる。「コードレス」ではあるが「ツール習熟なし」ではない。
なぜこのワークフローを試したか
クライアントから「LPを1週間で作ってほしい、エンジニアは使えない」という依頼が来た。デザインはできる。でも自分でHTMLを書いてサーバーにアップするやり方は知っているが、速くない。Webflow は以前触ったことがあり「ノーコードで動くサイトが作れる」ことは知っていた。
Stitch でビジュアルの方向性を決め、Webflow で実装する——この組み合わせを試す良い機会だった。
Stitch と Webflow の役割分担
最初に役割分担を明確にした。Stitch の役割：UIのビジュアル方向性の決定、各セクションのレイアウト・カラー・タイポグラフィの初稿生成。Webflow の役割：Stitch のUIを参考に実際のWebページとして実装、レスポンシブ対応、公開。
重要な認識：Stitch は「参考ビジュアル」を提供するツールで、Webflow に直接インポートできるファイルを出力するわけではない。スクリーンショットを見ながら Webflow で再現する、という手作業が中間に入る。
実際のワークフロー
今回作ったのは、コンサルティング会社のLPだ。ファーストビュー・サービス紹介・実績・チーム・問い合わせフォームの5セクション構成。
ステップ1：Stitch でセクションごとにUIを生成
LPの各セクションを Stitch で個別に生成した。「コンサルティング会社のLPのファーストビュー。ターゲット：30〜50代の経営者、信頼感・プロフェッショナルさを伝えるデザイン、ネイビー×ホワイト×ゴールドのカラー、大きなヘッダーテキストとCTAボタン」というプロンプトで開始。
5セクション分のビジュアルを生成するのに約45分かかった。各セクションで3〜4パターン生成して最も良いものを選ぶ作業を繰り返した。この段階でLP全体のビジュアルトーンが決まった。
ステップ2：Stitch のスクリーンショットを参考に Webflow で実装
Stitch の出力をスクリーンショットで保存し、Webflow のエディターを開きながら再現していった。Webflow は「ビジュアルエディター」なのでコードを書かずにレイアウト・色・フォントを設定できる。Stitch のスクリーンショットを横に並べながら「このレイアウトと近いWebflowの実装方法」を選んでいく作業だ。
ファーストビューは比較的スムーズだったが、サービス紹介のカードレイアウトで詰まった。Stitch が出したカードデザインをそのまま Webflow で再現しようとしたが、Webflow のコンポーネント制約でいくつかの表現ができなかった。
ステップ3：レスポンシブ対応と公開
Webflow にはレスポンシブ対応の機能がある。PC向けデザインをベースに、Webflow のブレークポイント設定でスマートフォン対応を調整した。Stitch でスマートフォン版のビジュアルも生成し、それを参考にしながら Webflow でのモバイルレイアウトを調整した。
公開は Webflow の「Publish」ボタン一つで完了。コードをサーバーにアップする作業は不要だった。
うまくいったこと・つまずいたこと
ワークフロー全体を通じて、うまくいった部分とつまずいた部分を整理する。
うまくいったこと
最もうまくいったのは「クライアントへの早い方向性共有」だ。Stitch で生成したビジュアルをその日中にクライアントに見せられたことで、方向性確認が最初の打ち合わせで完了した。以前なら3〜4日かかっていた初期確認が、Stitch のおかげで当日に完結した。
また Webflow のコンポーネントが Stitch のビジュアルと「感覚的に近い」ものを選びやすかったことも良かった。完全な再現ではないが「雰囲気が近い実装」を速く決められたことで、実装フェーズの迷いが少なかった。
つまずいたこと
最もつまずいたのは「Stitch のUIと Webflow の実装可能範囲のギャップ」だ。Stitch が出したビジュアルには「Webflow では標準的に実装しにくいデザイン要素」が含まれることがあった。特にグラデーションのオーバーレイ・複雑な影効果・非対称なレイアウトなどは、Webflow での再現に追加の作業が必要だった。
次回からは Stitch でプロンプトを書く段階で「Webflow で実装しやすい、シンプルなレイアウト」という制約を入れることにした。実装ツールの制約をプロンプトに反映することで、後工程の手間を減らせる。
このワークフローが向いている人・向いていない人
Stitch × Webflow ワークフローが向いている・向いていない条件をまとめる。
- 向いている人：デザインはできるがコードが書けない・書きたくないデザイナー。エンジニアなしで完結させたいフリーランス。LPやサービスサイトのような比較的シンプルなWebページを作る場面
- 向いていない人：複雑なインタラクション・動的データ表示が必要なWebアプリを作る場面。Webflow 自体の習熟コストをかけられない場合。1〜2ページだけなら Webflow の学習コストより HTML 直書きの方が速い場合もある
よくある質問（FAQ）
Q1. Google Stitch の出力を直接 Webflow にインポートできますか？
A. 直接インポートする機能はありません。Stitch のスクリーンショットを参考に Webflow で再現する手作業が必要です。Stitch → Figma → Webflow（Figmaプラグイン経由）という経由もありますが、完全な自動変換は現時点では難しいです。
Q2. Webflow を使ったことがない場合、習熟にどのくらいかかりますか？
A. 基本的なLPを作れるまでに3〜5日の練習が必要でした。Webflow 公式のチュートリアルが充実しており、動画を見ながら学ぶことができます。Stitch との組み合わせを始める前に、Webflow だけで1ページ作ってみることをすすめます。
Q3. Stitch × Webflow 以外に、似たようなワークフローはありますか？
A. Stitch × Framer、Stitch × Studio（旧 Web Studio）、Stitch × Squarespace（シンプルなサイト向け）などの組み合わせも同様に機能します。どのノーコードツールを選ぶかは、作りたいサイトの複雑さと、各ツールへの習熟度で判断することをすすめます。
Q4. このワークフローで作ったサイトの品質は、エンジニアが実装したものと比べてどうですか？
A. シンプルなLP程度なら遜色ない品質になります。ただし細かいアニメーション・カスタムの複雑な機能・パフォーマンス最適化などは、エンジニアによるコーディングの方が自由度が高いです。「素早く・自力で・コードレスで」という条件を優先する場合には有効なワークフローです。
Q5. クライアントへの納品物として Webflow サイトは成立しますか？
A. 成立します。Webflow はクライアントにサイト管理権限を移譲できるため、「納品後にクライアント自身でコンテンツを更新できる」状態で渡せます。ただし Webflow の利用料金がクライアント側にかかることの説明が必要です。
Q6. Stitch で作ったUIと Webflow で実装したUIのギャップを最小化するコツは？
A. Stitch のプロンプトに「Webflow で実装しやすいシンプルなグリッドレイアウト」「標準的なWebコンポーネント（ヘッダー・カード・フォーム）を使ったデザイン」という制約を入れることが効果的でした。実装ツールの制約をプロンプトに反映しておくことで、後のギャップを減らせます。
まとめ
Google Stitch × Webflow のワークフローを通じて、「デザインをコードレスで形にする」ことが現実的に可能になった実感を得た。完璧ではない。Stitch の出力をそのまま使えるわけではなく、Webflow での再現作業がある。でも「エンジニアなしで1週間でLPを作る」という目標は達成できた。
コードを書かずに動くUIを作ることへの欲求がある人には、このワークフローを試してほしい。Stitch でビジュアルの方向性を決め、Webflow で実装する——この組み合わせが「デザイナーの自律性」を確実に広げてくれる。
