AIとBlog

ChatGPT生成

使い比べ

ChatGPT／Claude／Gemini

AIエージェント自体の比較は様々なサイトが行っているのでまとめないが、それぞれのエージェントが出してきた回答の印象として、ChatGPTやGeminiでベースを作ってClaudeで最終確認させると仕上げが良さそうな印象を受けた。

Antigravity

自分の使用目的がゲーム作成におけるヘルプということも合って、AIのモデル比較というよりもどうやってAIに助けてもらうか、という点が重要になる。その点で今回使い始めたAntigravityはとてつもなく画期的。これまでが「友達に付き合ってもらっている」イメージだったのが、「仕事が早い部下が出来た」くらいになる感じ。（※ただし2026年3月現在ではミス多め）

ChatGPT生成

Gemini (Nano Banana 2.0) 生成

Antigravityを使用したBlog改善

PretiffyからPrism.jsへ変更

<!-- Prism.js Pack (Standard Version) -->
<!-- 1. CSSの読み込み -->
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-okaidia.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css' rel='stylesheet'/>
<link href='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.css' rel='stylesheet'/>

<!-- 2. Blogger特有の不具合だけを直す最小限CSS -->
<style>
  /* Blogger独自の縞々を消し、背景を黒く固定する */
  pre[class*="language-"] {
    background-image: none !important;
    background-color: #272822 !important; /* Okaidia標準色 */
    border: none !important;
    text-shadow: none !important;
    font-size: 14px; /* 見やすいサイズに */
    line-height: 1.5;
  }
  
  /* 行番号のエリアを少し見やすく */
  .line-numbers .line-numbers-rows {
    border-right: 1px solid #555;
  }

  /* ツールバーの位置（スクロールバーとの重なり防止） */
  div.code-toolbar > .toolbar {
    right: 1.2em !important;
  }
</style>

<!-- 3. JavaScriptの読み込み -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/toolbar/prism-toolbar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/show-language/prism-show-language.min.js'></script>

<!-- 言語ファイルの自動取得設定 -->
<script>Prism.plugins.autoloader.languages_path = 'https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/'</script>
<!-- /Prism.js Pack -->

<pre class="line-numbers"><code class="language-csharp">using UnityEngine;
public class Test : MonoBehaviour {
    // ここにコードを書く
}
</code></pre>

Link先をカードで表示

<style>
/* Blog Card Style */
.blog-card {
    border: 1px solid #e1e4e8;
    border-radius: 12px;
    overflow: hidden;
    margin: 20px 0;
    transition: transform 0.2s ease;
    background: #fff;
    max-width: 600px;
}
.blog-card:hover {
    transform: scale(1.02);
    border-color: #007bff;
}
.blog-card a {
    display: flex;
    text-decoration: none;
    color: inherit;
}
.blog-card .card-image {
    width: 150px;
    min-width: 150px;
    height: 150px;
    background-size: cover;
    background-position: center;
}
.blog-card .card-content {
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blog-card .card-title {
    font-weight: bold;
    font-size: 1.1em;
    margin-bottom: 5px;
    color: #333;
}
.blog-card .card-description {
    font-size: 0.9em;
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card .card-footer {
    margin-top: 10px;
    font-size: 0.8em;
    color: #999;
}
/* Responsive for Mobile */
@media (max-width: 480px) {
    .blog-card a {
        flex-direction: column;
    }
    .blog-card .card-image {
        width: 100%;
        height: 180px;
    }
}
/* No-Image Alternative */
.blog-card.no-image .card-image {
    display: none;
}
</style>

<div class="blog-card no-image"> または <div class="blog-card">
  <div class="card-image" style="background-image: url('画像のURL');"></div>
  <a href="リンク先のURL" target="_blank">
    <div class="card-content">
      <div class="card-title">記事のタイトル</div>
      <div class="card-description">記事の短い説明文</div>
      <div class="card-footer">domain.com</div>
    </div>
  </a>
</div>

Antigravityに記事を作成させてみた

AI 時代のブログ運営：エージェントと IDE ツールの使い分け（素人目線）

最近、AI 開発が凄まじいスピードで進化していますね。ブログを書く際にも「AI エージェント」や「AI IDE」という言葉をよく耳にするようになりました。

「結局どれがいいの？」と思っている方も多いはず。今回は、専門的な話は抜きにして、実際に使ってみた実感をベースに簡単な比較をまとめてみました。

1. 主要な AI エージェントの比較

まずは、ブラウザから手軽に使える AI エージェント（チャット AI）たちの比較です。

💡 結論： 正直、どれも凄いです。用途に合わせて使い分けるのがベストですが、迷ったら「話しやすさ」で選ぶのもアリです。

2. 開発を加速させる「AI IDE」の比較

ブログのカスタマイズや開発に欠かせないのが、AI が統合された開発環境（IDE）です。最近の二大巨頭、Cursor と Antigravity を比較してみます。

Cursor

• 特徴: VS Code をベースに AI を組み込んだツール。
• 強み: 既存のプロジェクトに対して「ここをこうして」と指示するだけで、コードを書き換えてくれる「Composer」機能がとにかく強力。

Antigravity

• 特徴: Google DeepMind チームが開発した、より「自律的（エージェント的）」なツール。
• 強み: 単なるコード補完だけでなく、複雑なタスクを「自分で考え、計画を立てて実行する」力が非常に高いです。まるで優秀な開発パートナーとペアプログラミングしているような感覚です。

3. 実例：AI と一緒にブログを近代化してみた

「AI で何ができるの？」という疑問に対する一つの答えとして、このブログで行った改善事例を紹介します。

以前は Google Prettify という少し古いツールを使ってコードを表示していましたが、AI（Antigravity）のアドバイスを受けて、モダンな Prism.js へ移行しました。

Before/After の変化

• 見た目: 無機質だったコードブロックが、モダンで洗練されたデザインに（角丸や適切な余白など）。
• 機能: 「コピーボタン」や「行番号」が追加され、ブログとしての使い勝手が格段に上がりました。

AI に「もっとオシャレで機能的なコード表示にしたい」と伝えただけで、必要なライブラリの選定から実装計画までスムーズに提案してくれました。

まとめ：AI は魔法の杖ではないけれど…

AI はすべての望みを叶えてくれる魔法の杖ではありません。でも、私たちの「やりたいこと」を強力にバックアップしてくれる最高の相棒です。

「難しそうだな」と思っている方も、まずは ChatGPT や Gemini との会話から始めてみてはいかがでしょうか？

詳細な技術仕様や比較については、公式サイトや専門の比較記事も併せて参照してください。

ーーー

作りたいものはAIが勝手に作成を進めてくれる時代が既に到来したことを実感。人間が無駄に干渉しないほうがプログラミングは効率よく進められるかも。仕事ではメールのドラフトをAIに書かせることは増えてきたが、趣味としてのプログラミングやBlog記事作成は、自分のために自分で続けていきたいところ。

Antigravityの雰囲気も掴めてきたので、次回はUnityでの２Dゲーム作成を進めたい。