、日本に超大型巨人…ではなく超大型AIがリリースされた。Gemini 3.0である。
とりあえずX界隈でリサーチすると、どうやらなにやら「コーディングがヤバい！」と騒がれている。ならば…Gemini 3.0の力を試すために、ChatGPT 5.1とコーディング対決をしてもらおうじゃないですか！
Round 1SEO有利なHTML・デザイン作成対決
では早速、テキストファイルをGeminiさんとChatGPTさんに食わせ、以下のプロンプトを打ち込んでいきます。
添付ファイルをSEO的に有利なHTMLにして。
cssも一緒に書いてデザインも今風で！
Gemini3.0へのプロンプト
chatGPT5.1へのプロンプトプロンプトはわざと意地悪して「SEO的に有利なHTML」という曖昧な表現。ついでに一緒にCSSも書いてもらいました。添付ファイルはこのサイトの風俗デザインラボについてをコピーして、画像部分はhtmlタグのままにしました。
さて、君たちにこの難題が解けるかね？と言わんばかりに何故かドヤ顔でエンターキーをターンと弾くと…GeminiさんとChatGPTさん良いスピードで考察し、それがまとまるとコーディングをしていってくれます。さすがは両者最新AI、テキストが長くてエラーなんて野暮な真似はしません。きっちり食わせたファイルを全文反映してくれます。すごい。
クリックで実際のページが閲覧できます※手動でno index処理を追加しています。またChatGPTで生成したページは<html>タグなどお決まりの記述を追加しています
デザインとコーディング精度の比較
両者ともに黒ベースでページを作成。風俗というワードにひっぱられて黒いページを作るのは悪い文明だ（偏見） 全体的な作りは両者1カラムで最近のページっぽく…と思いきや、大きな違いが！
- Gemini 3.0
<!DOCTYPE html>から書き始めて全体を一発生成。 - ChatGPT 5.1
<section>から記述開始。CSSは別途コピペが必要。
この時点でGeminiさんが凄いと言われるのは納得できます。さらにデザインに目を向けると、Geminiさんは弊社の風ラボをでかでかとセンターにビシっと配置してくれた。見出しは両者ともに添付ファイルにしたがった素直な生成。ただ、Geminiさんは少し文字が大きい代わりに文字のコントラストが足りない。一方のChatGPTさんは文字が小さいもののコントラストは少し改善。
CSSの書き方も、:rootで変数にしてくれて、marginの指定も1emなどのメンテナンスしやすい書き方。下手すると、全部font-size:16px;とかmargin:10px;とかピクセル指定されると後で地獄を見ることになるのも、両者はしっかり考えてくれている。
フォント読み込みの配慮
ちなみにGeminiらしいのが、Googleフォントを勝手（笑）使用してくれるところ。わざとプロンプトを簡潔にしたので、<html lang="ja"><head>から書いてくれてるGeminiさんはそこも記述出来た。というのも大きいかもしれない。ChatGPTさんは残念ながら<section>から書いちゃったので、<head>にフォントを埋め込むとかも考えに至らなかったのかもしれない。
ただ、これはHTMLが分かる人なら追加で「Googleフォント使って」と指示をすれば良いかもしれないが、まったくわからない人が「ページ作って！」みたいに指示出ししたら、ChatGPTさんは配慮が足りなかったという評価になる…
SEO対策の実装状況チェック
さて…まぁHTMLならなんとか！って人も多いけど…SEOはちょっと。って人も多いかと思われます。そこをAIが勝手に生成してくれていたら…ホント便利ですよね。では、見てみましょうか！両者の書いたSEO対策済みのHTMLを！
両者ともに<main>や<section>などを使ってくれるのはいい感じ。さらにChatGPTさんは<meta itemprop="name">とか構造化マークアップまでしてくれているではないですか！
一方のGeminiさんは一切無し…っていうか、「SEO的に有利なHTMLにして」って言ったよね！指示したよね？ 残念ながら今回はGeminiさんはしてくれませんでした…
他、ほぼ両者同じで、文章のリライトは無し。SEO対策してとお願いしたのに、他の部分は勝手にやってくれなかった。昨今、SEO対策としてコンテンツの重要性が大きく叫ばれているが、そこら辺は指示出ししていかないと、まだまだAIといった感じなのかな、と。
ただし、SEOを勉強なされてる方ならよく聞くワード「構造化マークアップも追加して！」とかテクニカルSEOも組むことも余裕。SEOを知らない人でも、どんなページを作りたいか、誰のためにページを作るか。などなど、AIと会話していく中できっと自然にSEO対策を盛り込んでくれるはずです。
Round 2ユーザー視点でのリライト対決
と、言うわけで下記プロンプトでさらに書き直してもらいました！
もっとお客様にわかりやすいように、お客様が求めているページにして！
クリックで実際のページが閲覧できます
大きく構成が変わりましたｗ よく見るページに仕上げてくれています。概ね、問題提起→解決方法の流れで、最初にユーザーに共感を抱かせて「うちならこんな事できますよ！」的なランディングページの出来上がりです。
コンテンツ構成の比較
デザイン的に見るとGeminiさんの方が見やすくて、コンテンツ的ではChatGPTさんの方が有利。といった印象でしょうか？ 特にChatGPTさんの話の持って行き方は上手いですね。制作の流れも勝手に書いてくれて流れも把握しやすいし、よくある質問まで追加してくれています。
【結論】Gemini 3.0 vs ChatGPT 5.1 使い分けのポイント
なるほど、なるほど。まだ結論づけるには早いかもしれませんが、現状の傾向は以下の通りです。
Gemini 3.0
特にデザイン面で優秀。ランディングページ一発出しならめちゃくちゃパワーアップしてます。さらにGoogleはNano Bananaもめっちゃ優秀なので、日本にもエージェントが降りてきたら、ページ丸投げとかできそうChatGPT 5.1
意外とSEOも理解して構造化マークアップまで書いてくれるし、何よりも人の心を掴むのが上手い。日本語の文章を書かせたらやっぱりChatGPTかなぁ、と
またさらにGeminiはガンガン使用していくので、また良い使い方を見つけたら紹介していこうと思います！
Geminiを使用した画像生成
chatGPTを使用した画像生成番外編として、画像生成能力を比べてみた。サイバーっぽくかっこいい画像で「Gemini3.0 vs ChatGPT 5.1 コーディング対決」の画像を生成して、というプロンプト。ちなみにこれはトリミングしてしまったが、横長を指定したのにGeminiは正方形で作ってきたｗ 確かに注文通りサイバーでかっこいいけど、なんか漂うコレジャナイ感。一方のChatGPTは日本語まで生成してくれる優秀な結果。ChatGPTのロゴもきっちり再現したが、Geminiのロゴが適当なのがなんともシュールである。VS画面っぽい構図ではあるが、やっぱり漂うコレジャナイ感。結局、FLUX.1で生成したのが、ページTOPにある画像（文字はPhotoshopで合成） やっぱりおっさんにはこういう方がいいのだ
