Gemini 3.1 Pro CanvasでパララックスLPを月2,900円1ヶ月で作る｜HTML未経験向け5手順と公開前の落とし穴

この記事はHTML/CSSを書いたことがない個人事業主・副業者向け（Googleアカウントを持っていてブラウザでサイトを開ける、というレベルで読めます）。

そもそも「動くLP」って、コード書けない人が作れるの？

2026年2月19日にプレビュー版が出たGemini 3.1 Proで、状況がだいぶ変わった。

これまで動きつきのLPを作ろうとすると、外注で7万〜15万円、内製ならHTML・CSS・JavaScriptの3点セットを覚える必要があった。

スクロールで背景がスーッと流れたり、画像がふわっと拡大したりする演出を全部組むとなると、専門の制作会社に投げるのが定石だった。

正直そこで詰む人が多い。

Gemini 3.1 Proが何を変えたかというと、Googleの公式発表で「Webサイトで使用される場合、アニメーションとSVGを生成できます」と明言されたところ。

gihyo.jpのリリース速報によれば、「テキストプロンプトから直接生成可能」「ピクセルではなく純粋なコードで構築されているため、スケールにかかわらず鮮明な画像が表示可能」「従来の動画に比べてファイルサイズを非常に小さくすることができる」と説明されている。

つまり、ブラウザのGemini画面に「カフェのLPで、スクロールするとヒーロー画像が奥に流れるパララックス演出を入れて」と日本語で頼むと、HTMLとCSSとSVGアニメーション込みのコードがCanvas画面の右側にプレビュー付きで出てくる。

個人的には、ここが今までのノーコードツールとも違う転換点だと思っている。

テンプレを並べるのではなく、要望からコードを丸ごと生成してくる側に主導権が移った。

なぜ私はGemini 3.1 Pro Canvasに注目しているのか

注目している理由は3つに整理できる。順番が大事。

理由1：SVGアニメーションを「テキスト一行」で出してくる

Google ChromeのDevRel担当者がXで発信した内容によれば、「Gemini 3.1 Proはシンプルなテキストプロンプトから、Web公開できる状態のアニメSVGを生成する。

拡大してもボケず、通常の動画よりサイズが小さい」とされる（出典は記事末リンク参照）。

これはGoogle中の人の発信。

控えめに見ても確度は高い。

SVGの実ファイルサイズについては、jicooマガジンの実機検証記事が「数KBのSVGコード」とGIFと比較して大幅に小さいと記録している（出典は記事末リンク参照）。

10秒のアニメGIFが1MB前後ある一方で、SVGは数KB。

表示速度に直結する差。

理由2：Canvasがプレビューと修正を一画面で回せる

Gemini公式が運営するnoteのCanvas紹介記事では、「カフェの紹介ページの HTML と CSS を生成して」という指示でレスポンシブデザインのコードが生成され、「リアルタイムに表示の変化を確認できる」と説明されている。

左側にチャット、右側にプレビュー。

コードを直接書き換えなくても、「ヒーロー画像をもう少し下にずらして」「ボタンの色をオレンジに」と日本語で言えば、その場で書き直してプレビューに反映してくる。

ここが個人的にはデカい。

理由3：他のCanvas/Artifactsより「動くLP」に強い

競合と並べると差が見える。比較は次の表のとおり。

出典はUnmarkdown比較記事とGeeky Gadgets パララックスLP生成記事。

SVGアニメ単体の比較では、AI動画クリエイターのXポストで「SVGアニメーションポンだし比較。

GPT-5.4 vs Claude Opus 4.6 vs Gemini 3.1 Pro(High)。

プロンプト『3D風の回転する地球のアニメーションをSVGで作成してください』。

こちらはGemini 3.1 Proが圧倒的な描画力でした」と記録されている。

3社並べて1社が頭抜けている、という構図。

これが現状の地形。

料金はいくら？外注10万円との比較

2026年5月時点のGemini料金プランは次のとおり（出典: Gemini公式サブスクリプションページ）。

無料プランの「具体的に1日何回まで使えるか」は、公式サブスクリプションページに数値の明記なし。

「制限あり」という表記のみ。

実際の使用ではすぐ「今日はもう使えません」状態になるという報告も、workstyle-evolutionのレビュー記事に上がっている。

LP1枚作るための判断軸はこう。

• 無料プラン → アイデア出しと最初のラフだけ
• Google AI Pro 2,900円を1ヶ月だけ契約 → 本作りに集中
• 1ヶ月で完成させて解約 → 残りはNetlifyで無料公開

外注LP相場が7万〜15万円とすると、月2,900円÷10万円で計算上は34分の1。

これ正直やばい。

ただし、後述の落とし穴を全部踏むと「結局外注した方が早かった」となるのも事実。

私なら、まず無料プランで2〜3時間ラフを試して、続けられそうなら2,900円課金、というステップを踏む。

動くLPをGemini 3.1 Pro Canvasで作る手順

ここからが実演パート。

Geeky Gadgetsの英語記事と、Gemini公式note、X投稿者の作業記録を組み合わせて、非エンジニアが再現できる順に並べた。

STEP1：ブラウザでGeminiを開いてCanvasモードに入る

1. https://gemini.google.com/ をブラウザ（Chrome、Safari、Edgeどれでも可）で開く
2. Googleアカウントでログイン
3. チャット入力欄の下にある「Canvas」ボタンをクリックする
4. 右側にプレビュー領域が開けば成功

引っかかりやすいポイント。

モバイルアプリ版のGeminiはCanvasの編集機能が制限されている。

PCのブラウザで開く一択。

STEP2：1回目のプロンプトでLPの骨組みを出す

あるX投稿の作業記録では「This is not in one shot, but I used 4 follow-up（一発ではなく、4回の追加指示で作った）」と書かれている。

最初から完璧を狙わず、骨組みから始めるのが定石。

テンプレ的なプロンプトの例。

「カフェ『MORI COFFEE』の1枚LPをHTMLとCSSで作って。

ヒーローセクションにはコーヒーカップのSVGアニメーション。

下に商品紹介3つ、お客様の声、店舗情報、最後にお問い合わせフォーム。

スクロールでヒーロー画像が奥に流れるパララックス効果を入れて。

配色はベージュとブラウンの落ち着いた感じで。

」

ここで意識すること。構成、配色、動かしたい要素、を1回の指示で全部書く。

STEP3：プレビューを見ながら追加指示で修正する

Gemini公式noteの記事は「リアルタイムに表示の変化を確認できる」と説明している。

プレビューを見ながら、気になる部分だけ日本語で追加指示する。

1. 「ヒーロー画像のパララックス、もう少し動きをゆっくりに」
2. 「ボタンに、マウスを乗せると拡大するホバー効果を追加して」
3. 「商品紹介カードに、スクロールでフェードインするアニメーションを入れて」
4. 「お客様の声セクションの背景に薄いSVGの波模様アニメを入れて」

1指示につき1要素が安全。「全部直して」は事故る。

STEP4：ダミー画像と文言を本物に差し替える

Geminiは画像をプレースホルダーとして挿入してくる。

このまま公開するとライセンス的にグレー。

差し替えが必須。

1. UnsplashまたはPexelsで商用利用OKの素材を入手
2. Canvasのコード画面で `<img src="...">` の中身を新しい画像URLに書き換える（または「この画像URLを差し替えて」とGeminiに指示）
3. 本文（カフェ名、価格、住所など）も実物に書き換える

ここはAIに任せきれないパート。

お店の情報は店主しか持っていない、という前提で書き直す。

STEP5：コードをダウンロードしてNetlifyで公開

Netlifyの無料プランは月100GBの帯域幅と月60分のビルド時間付き。

LP1枚なら余裕で収まる。

1. CanvasのHTMLコードを「コピー」ボタンでコピー
2. パソコンにテキストエディタで「index.html」というファイル名で保存
3. そのファイルを入れたフォルダごと、Netlify Dropのページにドラッグ＆ドロップ
4. 1分以内に「https://〇〇〇.netlify.app」という公開URLが発行される

メールアドレスだけで登録できて、初回はサインアップなしでもURLが出る。

これだけで世界中からアクセスできる状態。

動いてるけど中身は危険、の落とし穴

ここが既存記事が踏み込まない領域。

動くものが出てきても、本番投入前に拾うべきリスクがある。

落とし穴1：CSSアニメが1回しか動かない

jicooマガジンの実機検証記事は、CSSアニメーションの `infinite` が未指定の場合は1回のみ動作する、ブラウザ互換性のためベンダープレフィックスが必要な場合がある、と注意点を挙げている。

「アニメ動かないんですけど」となったら、Geminiに「このアニメーションを無限ループにして、Safariでも動くようにベンダープレフィックスを足して」と追加指示。

これで通ることが多い。

落とし穴2：生成コードのセキュリティ

SAMURAI Bizのnote記事はGoogle公式ガイダンスを引きながら、こう警告している。

「Canvasの公開リンクはフィッシングサイトと同じリスクを持ちえ、悪意ある作成者がデータを外部に送信するコードを仕込んだアプリを配布することは技術的に可能」。

Googleの公式セキュリティページも「メールフィッシングを警戒するのと同様に、共有されたアプリの使用にも慎重になってください」と明記している。

Geminiで生成したLPでも、念のため別のAI（ClaudeやChatGPT）に「このHTMLコードに不審な外部送信処理が含まれていないかチェックして」と渡すのが安全策。

1分で済む。

落とし穴3：素人感は出る

noteの実制作記録では「素人感が出るから、外注した方がいいんじゃない？」という社長からの指摘があった、と正直に書かれている。

「あれ？これ、意外といい感じじゃない？」とも書いているが、社内で見せると指摘される程度の仕上がりではある。

SEM LABORATORYのレビューも同じ趣旨で、「生成は『ゴールではなくスタートでしかない』」「AIツールだけでは不十分で、AIを利用する人の理解度や器用さに大きく左右される」と整理している。

つまりこう。

Geminiが出すのは「外注10万円のLP」ではなく「外注3〜5万円のLP」。

本番ローンチ用のメインLPなら、Geminiでラフ→外注で清書、の二段構えが現実的。

集客テストや小規模イベント告知なら、Geminiだけで十分回る。

結局どんな人にGemini 3.1 Pro Canvasは向いているのか

整理するとこうなる。

私なら、月1,000円台の集客にダラダラお金を流している層に、まず1回これを試してみることをすすめる。

外注が必要かどうかの判断は、Geminiでまずラフを作ってからでも遅くない。

FAQ

Q1. 無料プランだけでLPを完成まで持っていけますか？

厳しい。

workstyle-evolutionのレビュー記事では、無料プランの利用上限が公式に数値として明記されておらず、実使用で「今日はもう使えません」状態になることが報告されている。

LP1枚にはSTEP3の追加指示だけで20〜40回はやり取りする。

Google AI Pro 2,900円を1ヶ月だけ契約するのが現実的な選択肢になる。

Q2. Gemini 3.1 ProとGemini 3 Proって違うんですか？

別モデル。

Gemini 3 Proが先で、2026年2月19日にプレビュー版として登場したのがGemini 3.1 Pro。

Google公式blogによれば、ARC-AGI-2スコアでGemini 3 Proの35%から77.1%へ2倍超に向上している。

Webで「Gemini 3 ProでLP作った」記事を見かけたら、3.1 Proで再現するとさらに精度が上がる、と読み替えていい。

Q3. 作ったLPで売上が出たら、Geminiに著作権はありますか？

Geminiの利用規約では生成物の権利はユーザーに帰属するとされているが、Geminiが挿入するダミー画像のライセンスは別問題。

Unsplashなどフリー素材に差し替えてから公開するのがリスク回避になる。

本文の文言はユーザー側で書いたものなので問題なし。

Q4. ChatGPTやClaudeでも同じことできるんじゃないですか？

1枚LPのHTMLは出せるが、「テキスト一行でSVGアニメーションを直接書き出せる」のはGemini 3.1 Proが現状で頭ひとつ抜けている。

3社比較のXポストで「Gemini 3.1 Proが圧倒的な描画力」と記録されている。

動きのあるLPに絞るなら現状はGemini優位。

Q5. 公開URLはずっと無料で持てますか？

Netlify Dropで作った無料サイトは、月100GBの帯域までは無料で維持できる。

月10万PVクラスのLPでも余裕で収まる範囲。

独自ドメインにしたい場合だけ、ドメイン代が年1,500〜2,000円かかる。

Netlify自体は無料のまま使える。

このページに出てきた言葉

参考リンク

• Google公式blog Gemini 3.1 Pro発表記事（英語）
• Gemini Canvas公式（日本語）
• Gemini公式サブスクリプションページ
• gihyo.jp Gemini 3.1 Proリリース速報
• ITmedia Gemini 3.1 Proリリースニュース
• Geeky Gadgets パララックスWebサイト記事（英語）
• Unmarkdown Claude Artifacts vs ChatGPT Canvas比較
• SEM LABORATORY Gemini Canvasレビュー
• Gemini公式note Canvas紹介記事（検索: 「Gemini Canvas note google_gemini」）
• jicooマガジン SVGアニメ実機検証（検索: 「jicoo gemini-3-1-pro-svg-generation」）
• SAMURAI Biz Geminiセキュリティ注意（検索: 「SAMURAI Biz note Gemini Canvas セキュリティ」）
• workstyle-evolution Gemini 3.1 Pro実機レビュー（検索: 「workstyle-evolution gemini-3-1-pro-practical-review」）
• TOPPING PLUGIN Canvas LP制作記（検索: 「TOPPING PLUGIN note Gemini Canvas LP」）
• Netlify無料プラン解説（検索: 「dev-harry-next netlify-detail」）

※この記事の内容は執筆時点のものです。AIは進化が速い分野のため、最新の仕様は公式サイトでご確認ください。