Google Stitchを使ってLP作ったンゴ

Google Stitchを試してみた！

なんか電車でスマホでネット見てたら、「Google Stitch」がFigmaよりも優れたデザインツールだってのを読んでシンプルに気になった。
それでちょっとどんなものか試してみたくなった。

プロンプト生成

このStitchはFigmaのように手動でデザインするのではなくプロンプトからデザインを生成してくれるツールのようですので、まずは、Geminiにプロンプトを生成してもらいました！

架空のワニ山さんのぬいぐるみLP。チョコビでお馴染みですね！

なんて摩訶不思議なものを作ろうとしているのだろうか、、

しかもGeminiが生成したプロンプトが全文英語というwww

でももしかしたらStitchの仕様的に英語の方が適しているのかもしれない、、、

Stitchでデザインしてみる

そしたら、生成してもらって＝たプロンプトをStitchで実行してみまっしょい！

Stitchのトップ画面がGoogle AI Studioみたいな感じだった希ガスなので、普段からAIを使ってる人からしてみたら、息をするようにプロンプトを入力できそうです！

なんかイメージとはかなり乖離してるものができたwww

MVのワニ山さんがワニ山さんじゃない！どこにでもありそうなワニのぬいぐるみww

せめてMVはちゃんとしたいので修正依頼をかけてみましょう。

ワニ山さんのぬいぐるみの画像と一緒に「TOPを添付の画像にして」と依頼してみます。

修正すると、元のデザインを変えるのではなく、修正されたコピーが隣に置かれる仕様のようです。

ちゃんとMVがお馴染みの可愛いワニ山さんになってますね！とりあえずokです！

エクスポートしてみる

右上にエクスポートってのがあったので、とりあえずやってみることにします。

なんかzipファイルがダウンロードされました。

構築してみる

そして例によって例の如く、簡易的に公開してみることにします！

Claudeに丸投げしましょう。

zipファイルに入ってた

・code.html
・DESIGN.md
・screen.png

これらを押し付けて「このワニ山さんのぬいぐるみの宣伝ページ（架空）をいい感じに構築してほしい」と、言い放ちました。

そして、何やかんやあって、、、

割とええ感じのLPができました！

ここからページを見れます

感想

今回はGoogle Stitchを試してみながら、ワニ山さんのLPを架空で作ってみました！

本当に簡単に試してみただけだったのですが、シンプルにデザインツールとしてはかなり優秀であると感じました。

手動でやったら数時間かかってしまいそうなデザインをほんの数分でできました。

修正をプロンプトでやらないといけないことがネックにはなりそうですが、端からハイクオリティのものができたら手間が大幅に省けると感じました。

プロンプトが鍵になりそうなので、どんな言い回しがいいかを試行錯誤してみても面白いかもしれませんね！

Thanks！