Gemini 3で誰でもサイトが作れる!? AIコード生成の威力がヤバすぎた【実践レビュー】

AIツール紹介
2025.11.20

皆さん、こんにちは！SNSでも話題沸騰のGemini 3！もうお試しになりましたか？
特に話題なのは “コード生成がバツグンに賢くなった” という点。

「AIだけでサイトが作れるようになる時代が来たのでは!?」

そんな噂を確かめるために、今回は 実際にGemini 3に“X（Twitter）風のサイト”を作ってもらう実験 をしてみました。

一体どの様なサイトが出来上がるのでしょうか…

ドキドキとワクワクを胸に、いざ実践です！

Google Geminiはこちらhttps://gemini.google.com/app?hl=ja

Gemini 3とは？（AI初心者向けカンタン解説）

Googleの最新AIモデル「Geminiシリーズ」について

Gemini（ジェミニ）は、Googleが開発している大規模AIモデルのシリーズです。
ChatGPTやClaudeに並ぶ、世界トップクラスのAIで、

  • 文章生成
  • プログラミング
  • 画像理解
  • 論理推論
  • 多言語処理

など、多方面で活躍する“万能型AI”です。

シンナモ
シンナモ

Google発の生成AI、それがGoogleGeminiなも！

シンナモ
シンナモ

今回登場したのはその最新版、Gemini３！あらゆる機能が進化した凄いAIなも！

Gemini 3で何が進化した？

今回使った Gemini 3 は、その最新バージョン。

特に強化されたのがここ！

  • コード生成の精度
  • Web UIの理解力
  • やりたいことの意図を汲み取る能力
  • HTML/CSS/JavaScriptの同時生成が上手い

初心者でも使いやすいのはこのあたり。

シンナモ
シンナモ

特にコード生成の精度は圧倒的なも！

シンナモ
シンナモ

その他にも、ユーザーさんの意思を汲み取る力がアップしたりと、様々な進化点があるなも！

今回の実験テーマはこれ

「Gemini 3だけでX風（Twitter風）のサイトが作れるのか？」

・UIは再現される？
・投稿はできる？
・どこまで動く？
・初心者でも扱える？

この辺を実験してみます！

Gemini 3に「X風サイト作って」とお願いしてみたら…まさかの展開に

使ったプロンプトはたったこれだけ

実はすごくシンプルな指示をしただけです。

(画像は筆者PCのGoogle Geminiをキャプチャーしています)

「X風（Twitter風）のサイトを作って」

難しい技術用語も何も使っていません。

シンナモ
シンナモ

ホントにこれで大丈夫なも…？

シンナモ
シンナモ

大丈夫なも！…たぶん…

返ってきたコード量に驚愕！

Gemini 3が返してきたのは、

  • HTML
  • CSS
  • JavaScript

が全部入った フルセットのコード。
しかも構造がめっちゃ綺麗。

いわゆる「コピペですぐ動く」状態。

想像以上の完成度で、正直びっくりしました。

(画像は筆者PCのGoogle Geminiをキャプチャーしています)

シンナモ
シンナモ

す、凄いなも！？

シンナモ
シンナモ

あんな一言でこのコードが出てくるなんて…Gemini３凄すぎるなも…

Gemini 3が生成した“X風サイト”のコードがこちら

こちらがGemini３が出してくれたコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>X Clone</title>
    <style>
        /* --- 基本リセットとテーマ設定 --- */
        * { margin: 0; padding: 0; box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
        body { background-color: #000; color: #e7e9ea; display: flex; justify-content: center; height: 100vh; }
        
        /* --- レイアウト --- */
        .container { display: flex; width: 100%; max-width: 1265px; height: 100%; }
        
        /* 1. 左サイドバー */
        .sidebar { width: 275px; padding: 20px; border-right: 1px solid #2f3336; display: flex; flex-direction: column; height: 100%; }
        .logo { font-size: 30px; margin-bottom: 20px; padding-left: 10px; }
        .menu-item { font-size: 20px; padding: 15px 20px; margin-bottom: 10px; cursor: pointer; border-radius: 30px; width: fit-content; display: flex; align-items: center; gap: 15px; }
        .menu-item:hover { background-color: #181818; }
        .tweet-btn { background-color: #1d9bf0; color: white; border: none; padding: 15px; border-radius: 30px; font-size: 17px; font-weight: bold; cursor: pointer; margin-top: 20px; width: 90%; }
        .tweet-btn:hover { background-color: #1a8cd8; }

        /* 2. メインフィード（タイムライン） */
        .feed { flex: 1; max-width: 600px; border-right: 1px solid #2f3336; overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; }
        .feed::-webkit-scrollbar { display: none; }
        
        .header { position: sticky; top: 0; background-color: rgba(0, 0, 0, 0.65); backdrop-filter: blur(12px); padding: 15px; border-bottom: 1px solid #2f3336; font-weight: bold; font-size: 20px; z-index: 100; cursor: pointer;}
        
        /* 投稿エリア */
        .tweet-box { padding: 15px; border-bottom: 1px solid #2f3336; display: flex; gap: 10px; }
        .avatar { width: 40px; height: 40px; background-color: #71767b; border-radius: 50%; flex-shrink: 0; }
        .input-area { flex: 1; }
        .tweet-input { width: 100%; background: transparent; border: none; color: white; font-size: 20px; outline: none; resize: none; margin-top: 10px; }
        .tweet-actions { display: flex; justify-content: flex-end; margin-top: 10px; border-top: 1px solid #2f3336; padding-top: 10px; }
        .small-btn { background-color: #1d9bf0; color: white; border: none; padding: 8px 16px; border-radius: 20px; font-weight: bold; cursor: pointer; opacity: 0.5; } /* 入力なしなら薄く */
        .small-btn.active { opacity: 1; }

        /* ツイート表示 */
        .post { padding: 15px; border-bottom: 1px solid #2f3336; display: flex; gap: 10px; cursor: pointer; transition: 0.2s; }
        .post:hover { background-color: #080808; }
        .post-content { flex: 1; }
        .user-info { margin-bottom: 5px; }
        .user-name { font-weight: bold; margin-right: 5px; }
        .user-id { color: #71767b; }
        .post-text { line-height: 1.5; }
        .post-actions { display: flex; justify-content: space-between; margin-top: 10px; color: #71767b; max-width: 400px; }
        .action-icon:hover { color: #1d9bf0; }

        /* 3. 右サイドバー（トレンド） */
        .widgets { width: 350px; padding: 20px; display: none; } /* 画面が狭いと消える */
        @media (min-width: 1000px) { .widgets { display: block; } }
        
        .search-bar { background-color: #202327; border-radius: 20px; padding: 10px 20px; margin-bottom: 20px; }
        .search-bar input { background: transparent; border: none; color: white; width: 100%; outline: none; }
        .trend-box { background-color: #16181c; border-radius: 16px; padding: 15px; }
        .trend-header { font-weight: bold; font-size: 20px; margin-bottom: 15px; }
        .trend-item { margin-bottom: 15px; cursor: pointer; }
        .trend-meta { color: #71767b; font-size: 13px; }
        .trend-title { font-weight: bold; margin-top: 2px; }

    </style>
</head>
<body>

    <div class="container">
        <div class="sidebar">
            <div class="logo">𝕏</div>
            <div class="menu-item">🏠 ホーム</div>
            <div class="menu-item">🔍 話題を検索</div>
            <div class="menu-item">🔔 通知</div>
            <div class="menu-item">✉️ メッセージ</div>
            <div class="menu-item">👤 プロフィール</div>
            <button class="tweet-btn">ポストする</button>
        </div>

        <div class="feed">
            <div class="header">おすすめ</div>

            <div class="tweet-box">
                <div class="avatar"></div> <div class="input-area">
                    <textarea class="tweet-input" placeholder="いまどうしてる？" rows="2" oninput="checkInput(this)"></textarea>
                    <div class="tweet-actions">
                        <button class="small-btn" id="postBtn" onclick="addPost()">ポストする</button>
                    </div>
                </div>
            </div>

            <div id="timeline">
                <div class="post">
                    <div class="avatar"></div>
                    <div class="post-content">
                        <div class="user-info">
                            <span class="user-name">Elon Clone</span>
                            <span class="user-id">@elon_clone · 1分</span>
                        </div>
                        <div class="post-text">
                            これはHTMLとCSSとJSだけで作ったX風のデモサイトです。<br>
                            上のフォームから投稿を追加できます！
                        </div>
                        <div class="post-actions">
                            <span class="action-icon">💬 20</span>
                            <span class="action-icon">🔁 15</span>
                            <span class="action-icon">❤️ 800</span>
                            <span class="action-icon">📊 2k</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="widgets">
            <div class="search-bar">
                <input type="text" placeholder="検索">
            </div>
            <div class="trend-box">
                <div class="trend-header">いまどうしてる？</div>
                <div class="trend-item">
                    <div class="trend-meta">日本のトレンド</div>
                    <div class="trend-title">#Web開発</div>
                    <div class="trend-meta">2,400件のポスト</div>
                </div>
                <div class="trend-item">
                    <div class="trend-meta">テクノロジー・トレンド</div>
                    <div class="trend-title">AIエージェント</div>
                    <div class="trend-meta">1.5万件のポスト</div>
                </div>
            </div>
        </div>
    </div>

    <script>
        // 入力チェック（ボタンの色変更）
        function checkInput(textarea) {
            const btn = document.getElementById('postBtn');
            if (textarea.value.trim().length > 0) {
                btn.classList.add('active');
            } else {
                btn.classList.remove('active');
            }
        }

        // 投稿機能（擬似的）
        function addPost() {
            const input = document.querySelector('.tweet-input');
            const text = input.value;
            
            if (text.trim() === "") return;

            const timeline = document.getElementById('timeline');
            
            // 新しい投稿のHTMLを作成
            const newPost = document.createElement('div');
            newPost.className = 'post';
            newPost.innerHTML = `
                <div class="avatar"></div>
                <div class="post-content">
                    <div class="user-info">
                        <span class="user-name">自分</span>
                        <span class="user-id">@my_account · 今</span>
                    </div>
                    <div class="post-text">${text.replace(/\n/g, '<br>')}</div>
                    <div class="post-actions">
                        <span class="action-icon">💬 0</span>
                        <span class="action-icon">🔁 0</span>
                        <span class="action-icon">❤️ 0</span>
                        <span class="action-icon">📊 0</span>
                    </div>
                </div>
            `;

            // タイムラインの先頭に追加
            timeline.prepend(newPost);
            
            // リセット
            input.value = "";
            checkInput(input);
        }
    </script>
</body>
</html>

初心者でもコピーして保存するだけで動くようになっています。

シンナモ
シンナモ

物凄い量なも！？

シンナモ
シンナモ

ここまで本格的なコードがあんな一言からできるなんて…信じられないなも！

実際にブラウザで開いてみた！UIが完全に“Xっぽい”

Gemin３に生成してもらったコードをコピペして、出来上がったサイトがこちらです！https://ai-workstudio.site/wp-content/uploads/2025/11/xclone-gemini3.html

まずはこちら！完成したサイトのスクショをご覧ください

(画像はGoogle Geminiより生成したデモサイトをキャプチャーしています)

黒ベースのデザイン、左の固定メニュー、中央のタイムライン……
本家Xの雰囲気がしっかり再現されています。

CSSの余白・フォントの感じも自然で、Web初学者が “整ったレイアウト” を理解する教材としても良いレベル。

シンナモ
シンナモ

ちゃんとできてるなも～！

シンナモ
シンナモ

うん！レイアウトもいい感じなも！

投稿してみたら……ちゃんとタイムラインに追加される！

実際に投稿後のスクショはこちら

(画像はGoogle Geminiより生成したデモサイトをキャプチャーしています)

試しに「テスト」と入力して投稿してみると、

  • 投稿ボタンの色が変わり
  • 実際にタイムラインの先頭に追加される
  • “自分 @my_account · 今” と表示される

といった具合で、JavaScriptまでしっかり動作しています。

シンナモ
シンナモ

サイトが動いたなも～！

シンナモ
シンナモ

うん！ちゃんと投稿出来てる！Gemini３、どこまで凄いなも！？

これはもはや“ミニSNS”

いいね・リツイート・インプレッションは装飾だけですが、
投稿機能は本物。

見た目だけじゃなく 機能面まで動く のがすごいところ。

しかもコレ、コピペしてPCのメモ帳等に保存するだけで初心者でもマネできるんです！

Gemini 3のコード生成、マジで凄い

よかったところ

  • UIの再現度が思った以上に高い
  • 初心者でも動くサイトが作れる
  • プロトタイピングのスピードがとにかく速い

Gemini 3、Web制作が簡単に出来ちゃいます

気になったところ

  • いいね機能などは実装なし
  • 本家Xよりはもちろんシンプル

ただ、
気になったのはこれくらいで正直粗探しレベル。
コード生成やエンジニアスキルを一切持たない筆者がプロンプト一つでデモサイトを作れてしまうとんでもないAIです。Gemini３、恐るべし…！

AIでサイト作成はここまで来た｜Gemini 3でできる他のこと

実はGemini 3は今回のようなミニSNS以外にも、

  • ECサイトのテンプレ
  • お問い合わせフォーム
  • ポートフォリオ
  • LP（ランディングページ）
  • Reactコンポーネント
  • 画像→HTMLの変換

なども生成できます。

AI特有の“コードを書く速さ”があるので、
アイデアを形にするスピードが圧倒的に速いです。

シンナモ
シンナモ

アイデアを形にするならGemini３で決まりなも！

シンナモ
シンナモ

皆も是非、試してみてなも！

まとめ｜Gemini 3は本当に“誰でもサイトが作れる時代”を作り始めている

今回の実験をまとめると──

  • 思った以上に再現度が高い
  • ちゃんと“動く”サイトが作れる
  • 初心者でも扱いやすい
  • コードがきれいで学習教材にも良い
  • プロンプト1つでここまでできるのは衝撃

Gemini 3のコード生成、正直かなり実用レベルです。

AI初心者も、Web制作に興味がある人も、一度試してみてください！
「AIでここまでできるんだ！」と感動するはずです！

合わせて読みたい

シンナモ
シンナモ

ここまで記事を読んでくれてありがとうなも！Gemini３、皆も早速試してみてなも！

シンナモ
シンナモ

下記記事ではGemini３を速報レビュー！Gemini３基本やどうやって使えばいいか等、初心者さん必見の情報をまとめてみたなも！

こちらも是非、チェックしてなも～！

Google Gemini 3登場！日本で使える？最新情報と対応機能まとめ
2025年、Googleが次世代AIモデル 「Gemini 3」 を正式発表しました。 しかし、ネットを見ると「日本で使えない？」「どの機能が来てるの？」など、混乱も多い状況です。 この記事では Gemini 3の最新情報／日本で使える機能／今後の展開予測 を分かりやすくまとめます。
ai-workstudio.site
2025.11.19
にほんブログ村 ネットブログ ChatGPT・生成AIへ
にほんブログ村
著者プロフィール
majorss-blog

AIのたまごからアイデアを生み出したい！
ふわふわしっぽのmomochiです。
　
毎日AIやデザインの世界で新しい
ことを学びながら楽しく過ごしています。
　
最近は便利で面白い
ツールや最新技術に夢中！
　
特にAIを使った作業や
私みたいなキャラクターを作るのが
とっても楽しいです。
　
これからもワクワクする情報や
役立つツールの紹介をたくさんお届けして
いきますのでよろしくお願いします！

majorss-blogをフォローする
AIツール紹介
Gemini
AIワークスタジオ | ChatGPT・生成AIで仕事効率化するメディア