はじめに

こんにちは！
DX開発事業部のコ・クリエーションセクションビジネスソリューショングループ配属の戸塚晴菜です。

2025年12月の「Gemini 3」の登場に続き、2026年2月19日、次世代モデルの主力となる「Gemini 3.1 Pro」が発表されました！👏

今回のアップデートで一番変わったのは、AIが自分で考えて順序立てて答えを出す「システム2思考」ができるようになったことです。

今までは「知っていることを答える」のが得意でしたが、「Gemini 3.1 Pro」は「まず問題を噛み砕いて、どういう手順で解くべきか計画を立ててから回答する」という、コードを書いたりデバッグしたりする時のような深く考える動きをするようになっています！

今回は、「Gemini 3.1 Pro」の特徴、実際に私が使ってみて感じた感想や、これまでのモデルとの違いを比較しながら、詳しく紹介していきます！

システム2思考とは

これまでのAIやスピード重視の「Gemini 3 Flash」などは、質問に対して過去のデータから瞬時に一番それらしい答えを返す「システム1思考」と呼ばれる直感的な処理が得意でした。

それに対して、今回の「Gemini 3.1 Pro」に搭載された「システム2思考」は、回答を画面に出力する前に、AIが「本当にこの手順で問題ないか」「矛盾はないか」を時間をかけて検証する仕組みのことです。

これにより、簡単なタスクでは深く考えすぎずにすぐに答えてもらい、複雑なタスクにはじっくり時間をかけて正確な答えを出してもらうといったように、コストや精度、スピードのバランスを用途に合わせて柔軟に選べるようになっています！

Gemini 3.1 Proは何が変わった？

「Gemini 3.1 Pro」は、学習データに基づいた回答生成だけでなく、新しい課題に対して論理的な手順を組み立てる能力が強化されています。

以下は、推論能力と専門知識に関する主要なベンチマークの結果を比較した表です。

項目 内容 Gemini 3.1 Pro Gemini 3 Pro Gemini 3 Flash Gemini 2.5 Flash
推論力 初見のパズルや論理問題を解く力 77.1% 31.1% 非公開 5%未満
専門知識 博士レベルの理数系問題 94.3% 91.9% 90.4% 82.8%

特に「推論力」を示すARC-AGI-2のスコアは、前モデルの31.1%から77.1%に向上していることがわかります！

例えばインターネット上に解決策が存在しないような独自のバグ修正や、複雑な条件が絡むプログラムの設計において、AIが自ら手順を構成して回答できる範囲が広がっています。

複雑な条件を指定しても、混乱せずに回答してくれるのがとても強みだと感じます！

単純なコード生成ならFlashで問題ないですが、設計や難しいロジックの実装には「Gemini 3.1 Pro」を使っていこうと思います！

Gemini 3.1 Proで追加された新機能

「Gemini 3.1 Pro」へのアップデートでは、単に頭が良くなっただけでなく、開発で役立つ機能やツールがたくさん追加されています！

思考レベル（Thinking Level）の拡張によるコスト最適化

「Gemini 3.1 Pro」では、新たに「MEDIUM」が thinking_level パラメータとして導入されています。
これにより、簡単なタスクでは過剰な推論を省いてレスポンスを早めたり、複雑なタスクにはじっくり時間をかけさせたりと、費用、パフォーマンス、スピードのバランスを状況に合わせて調整できる機能が増えています！

アニメーションSVGの直接生成機能

コード推論の強化を象徴する新しい機能として、テキストプロンプトからWebサイトですぐに使えるアニメーションSVGを生成する機能が追加されました。
今回のデモでは、このコードベースの実用化に特化した新機能を活用してデモを行なっています！

カスタムツール専用エンドポイントの新設

開発者向けのアップデートとして、新たに「gemini-3.1-pro-preview-customtools」という別のエンドポイントがリリースされました。
これは、bashとカスタムツールの両方を使用してシステムを構築しているユーザー向けに、カスタムツールの優先順位付けができる機能です。

【デモ】Gemini 3.1 とGemini 3.0 HTMLとSVGだけで作るアニメーション生成力を比較してみた

実際のコーディング能力がどう進化したのか、簡単な条件で比較検証してみました！

【お題】
「HTMLとSVG（図形を描画するコード）だけで、犬のしっぽがパタパタと動いて、目の前をボールが転がっていくアニメーションを作って」

JavaScriptなどの複雑な処理を使わずに、図形の組み合わせとCSSアニメーションだけで、どのレベルまで表現できるのかがポイントです。

Gemini 3.0の生成結果

まずは、前モデルであるGemini 3.0が生成したコードです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>パタパタ犬と転がるボール</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f8ff;
        }

        svg {
            width: 400px;
            height: 300px;
        }

        /* しっぽの動き */
        #tail {
            transform-origin: 85px 160px; /* しっぽの付け根を支点にする */
            animation: wag 0.4s infinite ease-in-out;
        }

        @keyframes wag {
            0% { transform: rotate(0deg); }
            50% { transform: rotate(-20deg); }
            100% { transform: rotate(0deg); }
        }

        /* ボールの動き */
        #ball {
            animation: roll 3s infinite linear;
        }

        @keyframes roll {
            0% { transform: translateX(-100px); }
            100% { transform: translateX(500px); }
        }

        /* ボール自体の回転（模様があればわかるのですが、今回は移動のみ） */
    </style>
</head>
<body>

<svg viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
    <line x1="0" y1="220" x2="400" y2="220" stroke="#ccc" stroke-width="2" />

    <rect x="100" y="140" width="120" height="60" rx="30" fill="#D2B48C" />

    <path id="tail" d="M90,160 Q60,130 70,110" stroke="#D2B48C" stroke-width="12" stroke-linecap="round" fill="none" />

    <rect x="115" y="190" width="15" height="30" rx="5" fill="#C6A678" />
    <rect x="180" y="190" width="15" height="30" rx="5" fill="#C6A678" />

    <circle cx="220" cy="130" r="40" fill="#D2B48C" />

    <ellipse cx="190" cy="110" rx="10" ry="25" fill="#A0522D" transform="rotate(-20, 190, 110)" />

    <circle cx="235" cy="125" r="4" fill="#333" />

    <circle cx="255" cy="135" r="5" fill="#000" />

    <g id="ball">
        <circle cx="0" cy="210" r="10" fill="#FF4500" />
        <line x1="-10" y1="210" x2="10" y2="210" stroke="white" stroke-width="2" />
    </g>
</svg>

</body>
</html>

Gemini 3.1 Proの生成結果

続いて、最新の「Gemini 3.1 Pro」が生成したコードです。
先ほどに比べてコード増え、細かく設計されています。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>犬とボールのアニメーション</title>
<style>
  /* 画面全体の中央に配置するためのスタイル */
  body {
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
  }

  /* SVGキャンバスのスタイル */
  svg {
    background-color: #87CEEB; /* 空の水色 */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
  }

  /* しっぽのアニメーション設定 */
  .tail {
    /* しっぽの付け根を回転の軸に設定 */
    transform-origin: 480px 245px;
    animation: wag 0.15s infinite alternate ease-in-out;
  }

  @keyframes wag {
    0% { transform: rotate(-30deg); }
    100% { transform: rotate(15deg); }
  }

  /* ボールのアニメーション設定 */
  .ball {
    animation: roll 3.5s infinite linear;
  }

  @keyframes roll {
    /* 画面左外からスタート */
    0% { transform: translate(-50px, 315px) rotate(0deg); }
    /* 画面右外へ転がっていく（回転しながら移動） */
    100% { transform: translate(850px, 315px) rotate(1080deg); }
  }
</style>
</head>
<body>

  <svg width="800" height="400" viewBox="0 0 800 400" xmlns="http://www.w3.org/2000/svg">

    <circle cx="700" cy="80" r="40" fill="#FFD700" />
    <g fill="white" opacity="0.9">
      <circle cx="150" cy="100" r="25" />
      <circle cx="185" cy="90" r="35" />
      <circle cx="220" cy="100" r="25" />
    </g>
    <g fill="white" opacity="0.9" transform="translate(300, -30) scale(0.8)">
      <circle cx="150" cy="100" r="25" />
      <circle cx="185" cy="90" r="35" />
      <circle cx="220" cy="100" r="25" />
    </g>

    <rect x="0" y="340" width="800" height="60" fill="#81C784" />

    <g id="dog">
      <rect x="350" y="290" width="16" height="50" rx="8" fill="#B89F7A" />
      <rect x="450" y="290" width="16" height="50" rx="8" fill="#B89F7A" />

      <ellipse class="tail" cx="520" cy="245" rx="45" ry="12" fill="#D2B48C" />

      <ellipse cx="400" cy="270" rx="90" ry="45" fill="#D2B48C" />

      <rect x="330" y="295" width="16" height="45" rx="8" fill="#D2B48C" />
      <rect x="430" y="295" width="16" height="45" rx="8" fill="#D2B48C" />

      <circle cx="310" cy="220" r="45" fill="#D2B48C" />

      <ellipse cx="340" cy="190" rx="15" ry="35" fill="#8B4513" transform="rotate(25 340 190)" />

      <ellipse cx="275" cy="235" rx="25" ry="16" fill="#FFF8DC" />
      <circle cx="255" cy="230" r="8" fill="#333" /> <circle cx="295" cy="210" r="6" fill="#333" />
      <circle cx="293" cy="208" r="2" fill="white" /> <path d="M 270 245 Q 275 265 265 260 Z" fill="#FF8A80" />
    </g>

    <g class="ball">
      <circle cx="0" cy="0" r="25" fill="#FF5252" />
      <circle cx="0" cy="0" r="15" fill="none" stroke="white" stroke-width="4" stroke-dasharray="10 5" />
      <circle cx="0" cy="0" r="5" fill="white" />
    </g>

  </svg>

</body>
</html>

2つのモデルを比較してみる

比較項目 Gemini 3.1 Pro Gemini 3.0 pro
背景の豊かさ 青空、太陽、雲、緑の地面があり、1つの風景として完成している。 シンプルな薄い背景色と、地面を表す1本の線のみ。
犬のデザイン 足が4本（奥と手前で色分け）、耳が2つ、舌や目のハイライトなど、パーツが多く立体的で表情豊か。 足が2本、耳が1つの平面的でシンプルなアイコン調のデザイン。
ボールの表現 赤いベースに白い破線や中心の円など細かい模様があり、回転している様子がとても分かりやすい。 赤い円に白い横線が1本入ったシンプルなデザイン。
アニメーション しっぽの付け根を軸にした自然な動きや、複雑な図形の組み合わせでもスムーズに動作している。 しっぽがシンプルに上下に動く、直線的なアニメーション。

最新の「Gemini 3.1 Pro」では、複雑な形の組み合わせや、奥行き、細かい装飾をコードだけで表現する能力が格段にアップしています。

「犬とボールとアニメーション」という要素をただ並べるのではなく、「どうすれば自然な風景になるか」「どう図形を重ねれば立体的になるか」をしっかり計画してコードを組んでくれている印象を受けました！

単純なロジックだけでなく、動きをつけた動画を作成したい時にも、「Gemini 3.1 Pro」が役立ってくれそうです！

まとめ

今回は、新しく登場した「Gemini 3.1 Pro」のポイントと、実際のコード生成を通して比較検証をご紹介しました。

これまでのAIは、質問したことに対して「自分が知っている知識を素早く返す」という動き方が主でした。

今回のアップデートで一番大きな変化は、AI自身が「まず計画を立てて、順序立てて考える」ようになったことだと思います！

デモでお見せした犬とボールのアニメーションでも、ただ言われた図形を並べるだけでなく、「空や雲があって、地面がある」「手前の足と奥の足で色を変えて立体感を出す」といったように、より良くなる様な工夫が自然と組み込まれていました。

この「意図を汲み取って組み立てる力」が向上したことは、適切な構成でコードに落とし込んでくれるので、非常に助かるポイントだと思います！

私も、これからのシステム開発業務の中で、「Gemini 3.1 Pro」をどんどん活用していきたいと思います！

最後までお読みいただき、ありがとうございました！

参考文献

公式ドキュメント・発表（Google）
次世代モデル「Gemini 3.1 Pro」を発表
https://cloud.google.com/blog/ja/products/ai-machine-learning/introducing-gemini-3-1-pro

Gemini API を使用した関数呼び出し – Google AI for Developers
https://ai.google.dev/gemini-api/docs/function-calling?hl=ja

Google、推論を強化した「Gemini 3.1 Pro」発表 – ITmedia NEWS
https://www.itmedia.co.jp/aiplus/articles/2602/20/news060.html

【速報】Google Gemini 3.1 Pro発表。進化した推論能力を解説 – Qiita
https://qiita.com/kentaro_kawamura/items/637aaefbca9051860600

【2026年2月速報】Gemini 3.1 Pro完全解説 – Uravation
https://uravation.com/media/gemini-31-pro/