ECサイトのUIは、デザインの中でもとりわけ「答えが決まっている」ジャンルだと思っていた。商品一覧、商品詳細、カート、決済——この流れはほぼどのサイトも同じで、外れた設計をするとコンバージョンが落ちる。つまり「正解がある」分野だ。
だから Google Stitch でECサイトのUIを作るのは向いているはずだ、と思っていた。定番パターンを大量に学習しているはずのAIが、安定したUIを出してくれるだろうと。実際に試してみた結果は——半分正解で、半分は予想と違った。
結論から言うと
Google Stitch はECサイトのUIデザインに使える。特に「商品一覧」「商品詳細」「ヘッダー/ナビゲーション」といった視覚的なパーツは精度が高く、ほぼそのまま使えるクオリティが出た。一方で、カートやチェックアウトなどの「トランザクション画面」はプロンプトを工夫しないと雑な結果になりやすかった。EC特有のUXルール（信頼性の表示、エラーハンドリングのデザイン等）を明示的に指定する必要がある。
今回作ったECサイトの概要
今回の案件は、ハンドメイドアクセサリーを販売する個人ブランドのECサイトリニューアルだ。既存サイトはWordPressの無料テーマをそのまま使っており、スマートフォンでの見づらさとカート周りのUXが課題として挙がっていた。
制作するページは以下の5つ。トップページ（特集・おすすめ商品）、商品一覧ページ、商品詳細ページ、ショッピングカートページ、チェックアウト（決済）ページ。このうち Google Stitch で初稿UIを作り、その後 Figma で詳細詰めをする流れで進めた。
プロンプト設計の考え方
ECサイトのUIを Stitch に頼む際、最初はシンプルに「ハンドメイドアクセサリーのECサイトのトップページ」と入力した。出てきたUIは悪くなかったが、「誰にでも使えそうな汎用デザイン」という印象が否めなかった。そこで、以下の要素をプロンプトに追加した。
- ターゲット：20〜35歳の女性、ギフト購入が多い
- ブランドトーン：ナチュラル、温かみ、手作り感
- カラー：アイボリー・テラコッタ・ダスティグリーン
- 重要コンテンツ：作家のストーリー、素材へのこだわり、レビュー
これを加えると、出力されるUIが一気に「そのブランドらしさ」を持ち始めた。ECサイトのプロンプトはブランドアイデンティティを明示するほど精度が上がる、というのが今回の発見だった。
商品一覧・詳細ページの精度
商品一覧ページは、最初のプロンプトから80点くらいのUIが出た。グリッドレイアウト、商品画像、価格表示、在庫ラベルの配置——ECの定番構造を正確に押さえていた。修正したのは「お気に入りボタンの位置」と「フィルター/ソートUIの見せ方」くらいで、Figmaに移す前のたたき台として十分使えた。
商品詳細ページも同様に精度が高かった。画像ギャラリー、商品名、価格、バリエーション選択（サイズ・カラー）、カートボタン、レビュー欄——これらが適切な順序で配置されていた。特にモバイルビューのレイアウトは、スクロールの流れが自然で「スマートフォン体験を意識している」と感じられた。
カート・チェックアウト画面で詰まったこと
一方で、カートとチェックアウト画面は苦戦した。単純な「ショッピングカートのUI」というプロンプトで出てきたものは、使えなくはないが「信頼感」が足りなかった。ECサイトにおいてカート・決済画面は離脱率が最も高く、ユーザーの不安を取り除くデザインが求められる。しかし Stitch が出したUIには、その「安心感の設計」が薄かった。
具体的に足りていたのは以下の要素だ。
- SSL証明書・セキュリティバッジの表示エリア
- 返品・交換ポリシーへの導線
- 配送日時の見積もり表示
- エラー状態（在庫切れ、クーポンエラー等）のデザイン
- 進捗インジケーター（カート→住所→支払→確認の流れ）
これらを一つひとつプロンプトに明記することで精度が上がったが、最初から網羅したプロンプトを書けなければ、物足りないUIが出続ける。EC特有のUX要件を「知っている人」でないと、Stitch を上手く使えない領域がある、と感じた。
信頼設計を意識したプロンプトの書き方
チェックアウト画面のプロンプトで効果的だったのは、「ユーザーが感じる不安」を書き出してからプロンプトを作る方法だ。「この画面でユーザーが感じる不安：支払情報の漏洩、注文が通っているか不明、返品できるか不安」——これをそのままプロンプトに含めると、それを解消するデザイン要素を Stitch が盛り込んできた。
「ユーザーの不安リスト」をプロンプト化するアプローチは、他のEC関連画面にも応用できる。ログイン画面（パスワード忘れへの不安）、会員登録画面（入力ミスへの不安）でも同様の効果があった。
モバイルUIとデスクトップUIの違い
ECサイトは今やモバイルが主流だが、Google Stitch はデスクトップUIをデフォルトで出しやすい傾向がある。プロンプトに「スマートフォン向け」「モバイルファースト」を明記することで、モバイル最適化されたUIを生成させられた。
特に差が出たのはカートページだ。デスクトップ向けでは2カラムレイアウト（商品一覧＋合計サマリー）が標準的だが、モバイルでは1カラムに縦積みしつつ「合計確認→決済ボタン」を常に画面下部に固定するデザインが求められる。「固定フッターで決済ボタンを表示」という指定を加えると、モバイルECとして正しいUIが出てきた。
最終的に Figma に持ち込むまでの流れ
Google Stitch で出したUIはあくまで「初稿」として使い、最終的な詳細設計は Figma で行った。具体的な作業フローを振り返ると以下のようになる。
- Step1：各ページのプロンプトを作成し、3〜5パターン生成
- Step2：パターンを並べてクライアントにファーストインプレッションを確認
- Step3：選ばれたパターンをベースに追加指示で調整
- Step4：Figma に移行してコンポーネント化・詳細調整
- Step5：実装エンジニアに渡してコーディング
このフローで、従来の作業時間と比較して「最初のビジュアル確認」フェーズが約40%短縮できた。クライアントとの方向性確認が早まったことで、後の修正も最小限に抑えられた。
クライアントの反応
クライアント（ハンドメイド作家）は非デザイナーで、「Figmaを見せても何が良いかわからない」タイプだった。Stitch で生成した複数パターンを画像で見せたところ、「これとこれを合わせたい」「この色が好き」という具体的なフィードバックが出てきた。
Stitch のUIは「完成形に近い見た目」で出てくるため、クライアントが方向性を判断しやすい。ワイヤーフレームや抽象的なプロトタイプより、圧倒的にコミュニケーションが楽だった。これは想定以上のメリットだった。
Figmaとの使い分けポイント
ECサイト制作での Google Stitch と Figma の役割分担を整理すると：Google Stitch はビジュアルのたたき台作成・クライアントとの方向性確認・アイデア発散に使う。Figmaはコンポーネント管理・インタラクション設計・エンジニアへの実装指示に使う。この2つを適切に組み合わせることで、単体では達成できない効率と品質を両立できた。
よくある質問（FAQ）
Q1. Google Stitch だけでECサイトのUIは完成しますか？
A. 完成まではいきません。Stitch は「良いたたき台」を素早く出してくれますが、実際の実装に必要なコンポーネント設計、インタラクション定義、デザインシステムの構築はFigmaなどのツールが必要です。Stitch をプロセスの起点として使い、専門ツールと組み合わせることが現実的です。
Q2. EC特有のプロンプトのコツはありますか？
A. 「ターゲットユーザーの購買行動」と「画面で解消すべき不安」を明記することが効果的でした。例えば「初めてのネット購入に不安を感じている40代女性向け、安心・信頼を伝えるチェックアウト画面」のように書くと、信頼設計を意識したUIが生成されます。
Q3. 競合ECサイトのデザインを参考にさせることはできますか？
A. 直接URLを読み込む機能はないため、特定サイトを模倣することはできません。ただし「Amazon型の商品一覧」「ZOZOTOWN風のグリッドレイアウト」のようにブランド名を使った指定は、ある程度通じます。著作権的な観点でも、参考にとどめて自分なりに調整することを推奨します。
Q4. スマートフォン向けのECのUIを作るにはどうすればいいですか？
A. プロンプトに「モバイルファースト」「スマートフォン向け」「iPhone 14サイズ」などを明記してください。また「固定ナビゲーションバー」「スワイプで画像切替」「下部固定の購入ボタン」などモバイルUXの具体的な要件をプロンプトに含めると精度が上がります。
Q5. Stitch で作ったECのUIをそのまま実装できますか？
A. コード書き出し機能を使えば参考コードは出ますが、そのままの実装は難しいケースがほとんどです。デザインシステムとの整合性、アクセシビリティ対応、実際のデータ構造との整合など、実装段階での調整が必要です。「設計のたたき台」として使い、エンジニアと協力して実装することを前提にしたフローが現実的です。
Q6. クライアントに Stitch の存在を伝えるべきですか？
A. これは職業倫理的な判断ですが、私は「AIツールを使ってビジュアルの初稿を作成した」と伝えています。最終的なデザインの品質とクライアントへの価値提供が変わらなければ問題ないと思っていますが、透明性の観点で、ツールを使っていることは説明するスタンスを取っています。
まとめ
Google Stitch でECサイトのUIを作った経験を通じて、「定型構造があるUIほど使いやすく、ユーザー心理を読む必要がある画面ほど工夫が必要」という感覚を得た。
商品一覧・詳細のような「見た目のパターン」は Stitch が強い。カート・決済のような「信頼・安心の設計」はプロンプトで要件を明示しないと物足りない。この二面性を理解した上で使えば、ECサイト制作の初期フェーズを大幅に効率化できる。
ECサイトのUIデザインを依頼されている方、Stitch をまだ試したことがないなら、ぜひ商品一覧ページから試してみてほしい。クオリティの高さに驚くはずだ。
