こんにちは、てつです！
2月も後半に入り、少しずつ春の気配を感じるようになってきましたね。みなさんいかがお過ごしでしょうか？
さて、みなさんはブログ書いてますか？
Googleがリリースした新しいコードエディタ「Antigravity（アンチグラビティ）」をご存知でしょうか？ 直訳すると「反重力」。名前がもう中二病心をくすぐりますが（笑）、これがブログ運営やWebデザインにおいて、まさに重力から解放されたような軽快さをもたらしてくれるんです。
今回は、この謎めいたツール「Antigravity」を使って、ブログのデザイン調整や記事作成を効率化する方法を備忘録としてまとめてみました。「AIエディタって難しそう…」と思っている方にこそ、ぜひ読んでいただきたいです！
そもそも「Antigravity」って何？
簡単に言うと、Googleが作った「AIエージェントが主役のコードエディタ」です。ベースはみんな大好きVS Codeなんですが、中身は別物。
これまでのAIエディタ（Cursorとか）は「人間が書くのをAIが手伝う」感じでしたが、Antigravityは「人間が指示を出して、AI（Gemini 3 Proなど）が勝手に作業計画を立てて実行する」という、もう一段階上の自動化を実現しています。
ここがポイント！
「ヘッダーの色を変えて」と頼むと、CSSファイルを探して、該当箇所を修正して、プレビューまで勝手にやってくれるイメージです。まさに「監督」になる感じ！
活用法①：面倒な「表作成」を一瞬で終わらせる
ブログを書いていると、「比較表」を作りたくなることありますよね。でも、HTMLでtableタグを書いて、CSSで装飾して…って正直めんどくさい。
そんな時こそAntigravityの出番です。実はこれ、画像をドラッグ＆ドロップして「これと同じ表を作って」と言うだけでコードを書いてくれるんです。「え、そんなのアリ？」って思いますよね。
実践：AffinityとAdobeの比較表を作ってみた
例えば、こんなスクショがあったとします。「Affinityの新プランとAdobe CCの比較」です。これを手打ちするのは大変ですよね。
そこで、Antigravityに画像を投げてこう指示しました。
プロンプト：
この画像を読み取って、見やすいHTMLのテーブルを作成して。デザインはダークモード風で、Affinityの「0円」の部分は赤文字で強調。
すると、AIエージェントが数秒で以下のようなコードとプレビューを生成してくれました！
| 機能 | Affinity (新プラン) | Adobe CC |
|---|---|---|
| 編集ツール (ブラシ、ペン、レイヤー等) |
0円 (無料) | 月額サブスクリプション |
| 保存・書き出し | 0円 (無料) | 月額サブスクリプション |
| AI機能 (生成塗りつぶし等) |
有料 (Canva Pro契約が必要) |
プランに含まれる (クレジット制限あり) |
すごくないですか？ セルの結合や補足テキスト（カッコ内の文字）まで完璧に認識しています。これをコピペするだけで記事のパーツが完成です。
活用法②：サイトデザインの微調整
ブログのデザインを変えたい時も便利です。「記事の文字サイズを少し大きくして」「見出しのデザインを吹き出し風にして」とチャットで伝えると、実際のプレビュー画面を見ながらAIがCSSをいじってくれます。
特にAntigravityは「ブラウザ操作」もできるので、実際にブラウザでどう表示されるかを確認しながらテストしてくれるのが強み。
実践：ページ送りボタンの配置変更
実際に僕がやってみて感動したのが、ページ下部のナビゲーション（ページ送り）の修正です。
ブログテンプレートの初期状態だと、ただ「その他の投稿」というリンクが表示されているだけで、ちょっと不親切だったんですよね。
そこで、Antigravity上でその部分を指し示して、こんな風に頼んでみました。
プロンプト：
この「その他の投稿」という部分を修正したい。「< 前のページ」と「次のページ >」という2つのリンクに変更して、画面の左右の端に配置。
すると、AIがHTML構造とCSSを解析して、サクッと修正してくれました。
CSSのFlexboxを使って「左寄せ」と「右寄せ」にする記述、自分で書くと地味に面倒なんですが、AIなら「左右に配置して」の一言で通じます。この直感的な操作感はクセになりますね。
実践：トップページと2ページ目で「表示記事数」を変える
もう一つ、Bloggerを使っている人にしか伝わらないかもしれない（笑）、地味だけど重要な調整を行いました。
僕のブログでは、「トップページは10記事表示したいけど、2ページ目以降はデザインの都合上9記事にしたい（3×3で綺麗に並べたい）」というこだわりがありました。
しかし、Bloggerの標準設定で「投稿数」を変更すると、全ページ一律で変わってしまいます。トップページに合わせると2ページ目が崩れるし、その逆もまた然り…。これ、地味にストレスだったんです。
ここでのAIへの無茶振り：
「トップページは10件のままでいいんだけど、『次のページ』ボタンを押した時だけ、表示件数を9件になるようにリンクを調整できない？」
これに対してもAntigravityは即答。「JavaScriptでページ送りリンクのURLパラメータを書き換えましょう」と提案してくれました。
具体的には、ページ移動のリンクに自動的に max-results=9 というパラメータを付与する処理を実装してくれたんです。おかげで、メインページは10件、検索結果や2ページ目以降は9件という、理想の挙動が実現しました。
本来ならJavaScriptをごりごり書かないといけない場面ですが、これも「やりたいこと」を伝えただけでコードを生成されたので、本当に楽でした。
活用法③：ブログカードを「自分好み」に刷新
ブログにとって、「リンクカード（ブログカード）」のデザインは記事の印象を決める重要な要素です。
僕はこれまで「はてなブログカード」を使っていましたが、iframeで読み込むためデザインのカスタマイズができませんでした。「もっとこう、画像が左にあって、タイトルが右にある、シンプルで見やすいデザインにしたい…」と思っていました。
そこでAntigravityに「この画像（理想のデザイン）と同じにして！」と、完成イメージの画像を投げつけてみました。
プロンプト：
「現在のブログカードデザインを添付した画像のようにして」
すると、AIエージェントは驚くべき対応をしました。
これまでは外部サービス（はてなブログパーツ）の枠をただ表示していただけだったのを、「APIから記事のメタデータ（タイトルや画像）を取得して、自分でHTMLを組み立てる」というJavaScriptのプログラムに丸ごと書き換えてくれたのです。
以前のブログカードデザイン
変更後のデザイン
途中で「表示が遅い」という問題が発生したときも、「データ取得APIをより高速なものに変更しましょう」と提案してくれ、最終的に読み込み速度もデザインも完璧なものが出来上がりました。
しかも、「データ取得に失敗したら、元のはてなカードを表示する」という安全装置（フォールバック）まで実装済み。まさにプロの仕事です。
下記記事で、追記として変更後コードを追加しました。
https://tetsu-miscellaneous.blogspot.com/2026/02/bloggerurlok.html
まとめ：重力から解放されよう
「Antigravity」は、単なるコードエディタというより、「超優秀なアシスタントがついた作業部屋」という感じです。
ブログの記事執筆（特に面倒なHTMLコーディング）や、サイトのちょっとしたデザイン修正にかかる時間が劇的に減ります。今はまだプレビュー版で無料で触れるようなので、今のうちにこの「未来の作業感」を体験しておくのがおすすめですよ！
みなさんも、AIツールを使って「楽」できるところはどんどん楽していきましょう。それでは、また！
コメント
コメントを投稿