こんにちは！綾鳥みおです。
いつもいつも、AIを使ったデザインツールがたくさん出てきていますよね。みなさんはもう何か試されましたか？
今日は、Googleが発表した話題のツール「Stitch – Design with AI」についてお話しします。「デザインって難しそう…」と思っている方にこそ、知ってほしいツールなんですよ！
🧶 Stitch（スティッチ）ってどんなツール？
簡単に言うと、「言葉で伝えるだけで、Webサイトのラフ案を作ってくれるAI」なんです。
しかも、嬉しいポイントがたくさんあります！
- Googleアカウントがあれば無料で使える
- 日本語でお願いできる（←これ、大事ですよね！）
- ブラウザだけですぐ始められる
例えば、「美容サロン向けのLPデザインが欲しい」って日本語で入力するだけで、AIが「こんな感じどう？」って提案してくれるんです。これなら、英語が苦手な方でも安心して使えますよね。ですです！
✨ ここが「でったん」すごい！Figmaとの連携
私が一番感動したのは、ここなんです！
Stitchで作ったデザインは、コピー＆ペーストでそのままFigma（フィグマ）に持っていけるんです。
しかも、ただの画像として貼り付けられるんじゃなくて、**「オートレイアウト」**という編集しやすい状態でペーストされます。つまり、Figmaに移した後で、文字を書き換えたり、色を変えたり、余白を調整したりが自由自在ってことなんです。
💡 メンターからのワンポイント
「0から1」を作るのが一番大変ですよね。Stitchを使えば、**「AIに土台を作ってもらって、人間がFigmaで仕上げる」**という新しい働き方ができます。全部自分でやらなくてもいいんだ、と思うと少し気持ちが楽になりませんか？
🚀 さらにその先へ！「Stitch → Figma → Studio」の黄金リレー
Webサイトを実際に公開したい方には、こんな使い方もおすすめです。
- Stitchでアイデアを出す（ラフ作成）
- Figmaで綺麗に整える（ブラッシュアップ）
- Studioに読み込んでWebサイトとして公開！
この流れなら、難しいプログラミングのコードをゴリゴリ書かなくても、自分のサイトが作れちゃうかもしれません。起業したい方や、自分の作品集を作りたい方には、とっても強力な武器になりますよ！
🤔 正直なところ、使い勝手はどう？
もちろん、完璧なツールというわけではありません。
現状では、「あくまでラフ案（下書き）を作るためのツール」と割り切って使うのが良さそうです。
- 複雑なデザインや細かい表現はまだ苦手
- そのまま本番で使うには、ちょっとシンプルすぎるかも
本番レベルのデザインがいきなり欲しい場合は「relume」という別のツールの方が得意かもしれません。でも、「まずはアイデアを形にしたい」「手軽に試したい」という時には、Stitchは最高のパートナーになってくれるはずです！
🌸 まとめ
- Stitchは日本語OK・無料で使えるGoogleのAIツール
- Figmaとの相性が抜群で、編集がでったん楽！
- 「AIでラフ作成」→「自分で仕上げ」のスタイルがおすすめ
新しい技術って、最初は難しく見えるかもしれません。でも、視点を変えると「私たちの苦手をサポートしてくれる頼もしい味方」になります。
まずは遊び感覚で、Stitchに「こんなサイト作りたいな」って話しかけてみることから始めてみませんか？一緒に新しい扉、開いていきましょう！
さて、実際にやってみよう！
サンプル就労移行支援「ログライン」という事業所名で作ってみます。
一撃で３ページのサンプルができました。
シンプルではありますが、基本は抑えているように見えます。
エクスポートができます。ので、ここでエクスポートしたうえで、Figmaなどに。
コードがどんなものか・・・
HTMLに直接CSSのデータを入れているシンプルなスタイル。
これらを直接Figmaに移行、ではなく、一度ローカルにダウンロードしたうえでFigmaに移行が良いのでしょう。
画像は基本的にGoogleの仮データですのでこのまま使うことはできません。
もし、Geminiを使ってHTMLから生成させているという人は、使いにくいと思いますが、figmaで完成させようという人には、優秀かもしれません。
イメージに合わせたサンプル画像が拾われてくるというのが、なかなか便利！
Geminiでやると、すべてゼロから画像生成という形なので、完成イメージまで進むという点ではこちらの方が少し速い印象です。
好みの問題、ですかねえ？
著者について
