先日、個人でのHP制作案件にてGoogleのAIデザインツール「Google Stitch」を実践投入してみました。
結論から言うと、UIデザインからフロントエンドの実装までのプロセスがかつてないレベルで効率化されました。
この記事では、実際にGoogle Stitchをどのように実務フローに組み込み、どれだけ手間を削減できたのか、その実践レポートを共有します。
従来のフローと今回のフローの比較
通常、ゼロからHPを制作する場合、以下のようなステップを踏むことが多いと思います。
- ワイヤーフレーム作成
- Figma等でのデザインカンプ作成
- コーディング（HTML/CSS/JS等のフロントエンド実装）
- レビュー＆修正
- サーバー・ドメイン設定〜公開
今回は、Google Stitchを活用することで、上記の1〜3の工程をほぼワンストップで、しかも爆速で終わらせることができました。
実際に試したワークフロー
今回のHP制作は、具体的に以下の手順で進めました。
1. Google Stitchでプロンプト入力＆カンプ作成
まずは、Google StitchのチャットUIから「どのようなHPを作りたいか」をテキストで指示しました。
頭の中にあるレイアウトやトーン＆マナーを伝えると、一瞬でクオリティの高いデザインカンプ（UI）が生成されます。従来のようにコンポーネントを一つ一つ配置していく手間がゼロになり、初動のモックアップ作成が劇的に早くなりました。
2. 生成されたコードをコピー＆ファイル作成
Stitchの最大の強みは、生成されたデザインをそのままフロントエンドのコードとして出力できる点です。
今回は、Stitch側で吐き出されたコーディングデータ（HTML/CSS等）をそのままコピーし、手元のエディタでファイルを作成してペーストしました。これで、あっという間にベースとなるWebページがローカル環境で動く状態になります。
3. 打ち合わせ＆フィードバックの反映
ベースのページが動く状態になったら、それを見せながら打ち合わせを実施しました。
「ここはこうしたい」「ああしたい」といった具体的な意見をもらいましたが、ベースのコードがすでに出来上がっているため、修正作業も非常にスムーズです。必要であれば、Stitch上で追加のプロンプトを投げてUIを修正し、再度コードを反映させるというアプローチも取れます。今回は普段使ってるcodexで直しました。
4. サーバー契約・ドメイン紐付け〜公開
フロントエンドの実装と修正が完了したら、あとはいつものインフラ作業です。
サクッとサーバーを契約し、取得したドメインを紐付けてファイルをアップロードし、無事に公開完了となりました。
使ってみてわかったメリット
今回、実案件のフローにGoogle Stitchを組み込んでみて感じた最大のメリットは以下の2点です。
- 「デザインからコードへの変換」という最大のボトルネックが消滅する
- プロトタイプを早い段階で提示できるため、打ち合わせの質が上がる
これまでデザインツールとエディタを行き来していた時間が削られるため、クリエイティブな提案や、インフラ周りの整備など、より重要な部分に時間を割くことができます。
まとめ
Google Stitchを活用したことで、テキストでの指示出しから、コピペでのファイル作成、そして最終的な公開まで、驚くほどシームレスにHP制作を完了させることができました。
日々の業務で様々なAIツールを活用していますが、Web制作における「初動の重さ」を解決するツールとして、Stitchは非常に強力な選択肢になります。