🌉

CADオペがHTML知識ゼロで挑む、未来のWeb制作。Google Stitch × Cursorで自社サイトを構築した話

2026/02/14に公開

 CADオペがHTML知識ゼロで挑む、未来のWeb制作。Google Stitch × Cursorで自社サイトを構築した話Webサイトを作りたいけれど、HTMLやCSSの壁に阻まれて断念したことはありませんか？

あるいは、制作会社に依頼するコストや、細かな修正のやり取りに疲弊してしまった経験があるかもしれません。
もし、あなたが「こうしたい」という考えを言葉にできるなら、もう技術的なハードルを恐れる必要はありません。

今回は、デザイン生成AI「Google Stitch」と、コード生成エディタ「Cursor」を組み合わせ、自社のポートフォリオサイトを作成した全記録を共有します。
これは単なるツール紹介ではありません。「言語化する力」さえあれば、誰でもクリエイターになれるという、新しい時代の働き方の提案です。

 1. Google Stitch：言葉から「理想」を描き出すまずはデザインのベース作りから。Google Stitchを使用します。ここで重要なのは、AIに対する「指示の解像度」です。
ただ「きれいなサイトを作って」と頼むのではなく、「圧倒的な」「最上級の」といった、強い形容詞を含ませることで、AIのアウトプットは劇的に変化します。

 言葉の魔術師になるもし、適切な言葉が見つからなければ、それさえもAIに聞いてしまいましょう。

「良いHPを作成するために、どのような形容詞を使えば良いですか？」

そう問いかければ、AIはデザインの方向性を決定づけるキーワードを提示してくれます。
さらに一歩踏み込むなら、「2026年流行りのデザイン用語を教えて」と尋ねてみてください。トレンドを取り入れた、鮮度の高い提案が返ってくるはずです。

また、もし憧れのサイトがあるなら、「このURLのサイトのような雰囲気で、最新のトレンドを取り入れて」と具体的なリファレンスを渡すのも有効です。

 選択と決断方針が決まれば、Stitchは複数のデザイン案を提示してくれます。私たちはその中から、直感に従って「これだ」と思うものを選ぶだけ。

デザインが確定したら、エクスポート機能を使ってZIP形式でダウンロードします。これが、Webサイトの基礎となります。

 2. Cursor：AIエージェントと共に仕上げていくここからは、ダウンロードしたデザインを、実際に動くWebサイトへと磨き上げていく工程です。使用するのは「Cursor」。Googleの「Antigravity」や「Claude」でもなんでもokです。まあAI搭載の次世代エディタなら何でもOKです。基本のやり方はみんな同じです。

 環境を整えるまず、デスクトップにホームページ用のフォルダを新規作成し、先ほどダウンロードしたZIPファイルを解凍して格納します。この時、メインとなるファイル名を index.html に変更しておくことを忘れずに。これがWebサイトの表紙となります。
次にCursorを開き、作成したフォルダごと読み込みます。

ここで一つ、拡張機能の「Live Preview」をインストールしてください。

実際のHPを見ながら調整していくことが出来ます。

 リアルタイムで修正・追加
ここからの操作感は、まさに未来そのものです。

index.html を右クリックし、「Live Preview: Show Preview」を選択。あるいは Ctrl + Shift + B を押すと、エディタの右側にブラウザ画面が現れ、現在のサイトの状態が表示されます。
左側にコード、右側に実際の画面。この2つを見比べながら、AIに指示を出していきます。

 「対話」による修正Live Previewの「要素選択モード」をオンにしましょう。修正したい画像やテキストをクリックして選択し、チャット欄に要望を打ち込みます。
「このページのヘッダーとフッターのデザインを、あっちのページと同じにして」
「このテキストをもっと魅力的なキャッチコピーに変えて」
「テーマカラーを、もっと落ち着いたネイビーに変更して」
「ここに最新のYouTube動画を埋め込んで」

まるで隣に座っている優秀なデザイナー兼エンジニアに話しかけるように。

「ここをこうしたい」というあなたの意思を、AIは即座にコードへと翻訳し、右側のプレビュー画面に反映させてくれます。
よほどの無理難題でない限り、AIに「できない」はありません。納得がいくまで、何度でも修正を指示してください。知らないソフトの操作方法を教本で調べるよりも、圧倒的なスピードで理想に近づいていく快感を味わえるはずです。

 3. 公開：世界へサイトが完成したら、いよいよ公開です。

サーバーの知識がなくても心配ありません。今回はGoogleが提供する「Firebase」をおすすめします（無料枠で十分運用可能です）。もちろん、自社サーバーがある場合はそちらへのアップロードも可能です。

 指示待ちのスタンスでここでも、AIを頼りましょう。

「Firebaseでこのサイトを公開したいので、設定をお願いします」

そう伝えた後、「私が手伝うことがあれば言ってください」と付け加え、指示を待ちます。

AIは必要なコマンドや手順を一つひとつ教えてくれます。

「ターミナルでこのコマンドを打ってください」と言われたらその通りにし、もしエラーが出たりわからなかったりしたら、「これってどういう意味？」「エラーが出たけどどうすればいい？」と遠慮なく聞いてください。
どんなに些細なことでも構いません。AIとの対話を通じて、一つずつクリアしていけば良いのです。

 4. 結論：技術よりも「言語化」の時代へ
最後に、今回HPを作成してみて感じたことをお伝えします。
「AIに頼りきりで、自分の脳が退化するのではないか？」

そんな不安を抱く必要は一切ありません。
むしろ、検索エンジンで答えを探し回り、古い情報に惑わされて時間を浪費するよりも、AIに問いかけ、手を動かし、正しく動作するものを生み出すことのほうが、よほど建設的で価値のある「行動」です。
HTMLやCSSの知識がゼロでも構いません。専門用語を知らなくても問題ありません。

必要なのは、「自分が何をしたいのか」「どんなものを作りたいのか」を明確にし、それを言語化する能力だけです。
お疲れ様でした。