Antigravity × GitHub Pages で無料ポートフォリオサイトを構築する初心者ガイド

取り組みの背景 — AI と一緒にポートフォリオを作る時代

エンジニアやデザイナーにとって、ポートフォリオサイトは自分のスキルと実績を世界に発信する大切なツールです。しかし「サーバーの契約が面倒」「デザインのセンスに自信がない」「コーディングに時間をかけたくない」といった理由で、なかなか着手できない方も多いのではないでしょうか。

Antigravity × GitHub Pages の組み合わせなら、こうした障壁をすべて取り除けます。Antigravity の AI エージェントがデザインからコード生成までをサポートし、GitHub Pages が無料で安定したホスティングを提供してくれます。ドメイン費用を除けば、完全に無料で本格的なポートフォリオサイトを公開できるのです。

ここではAntigravity を使ってポートフォリオサイトを一から構築し、GitHub Pages にデプロイするまでの全工程をわかりやすく解説します。

GitHub Pages とは — 無料ホスティングの仕組みを理解する

GitHub Pages は GitHub が提供する静的サイトホスティングサービスです。リポジトリにプッシュした HTML・CSS・JavaScript ファイルが自動的に Web サイトとして公開されます。

主な特徴を整理すると、以下のとおりです。

完全無料: パブリックリポジトリであればホスティング費用は一切かかりません
自動デプロイ: main ブランチへのプッシュだけでサイトが更新されます
カスタムドメイン対応: username.github.io のサブドメインに加え、独自ドメインも設定できます
HTTPS 標準装備: SSL 証明書が自動で発行され、セキュアな接続が保証されます
GitHub Actions 連携: ビルドパイプラインを組み合わせた高度なワークフローにも対応しています

個人のポートフォリオサイトであれば、帯域やストレージの制限が問題になることはほぼありません。エンジニアが技術力をアピールする場として最適なプラットフォームです。

環境準備 — Antigravity と GitHub のセットアップ

まずは開発環境を整えましょう。必要なものは以下の 3 つだけです。

Antigravity IDE: 公式サイトからダウンロードしてインストール
GitHub アカウント: github.com で無料アカウントを作成
Git: ターミナルで git --version を実行して確認（未インストールの場合は Antigravity が案内してくれます）

Antigravity のインストールが完了したら、GitHub との連携を設定します。Antigravity のターミナルで以下のコマンドを実行してください。

# Git のユーザー情報を設定する
git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"
 
# GitHub のリモートリポジトリを作成する
gh repo create my-portfolio --public --clone
cd my-portfolio

これで Antigravity のワークスペースに GitHub リポジトリが紐づいた状態になります。Antigravity を初めて使う方は、Antigravity IDE 入門ガイドも参考にしてください。

Antigravity エージェントにポートフォリオを生成させる

ここが Antigravity の真骨頂です。エージェントに自然言語で指示するだけで、ポートフォリオサイトのコード一式が生成されます。

Antigravity のチャットパネルを開き、以下のようなプロンプトを入力してみましょう。

以下の要件でポートフォリオサイトを作成してください:
 
- シングルページのレスポンシブデザイン（HTML + CSS + JavaScript）
- セクション構成: ヒーロー、自己紹介、スキル、プロジェクト紹介（3件）、お問い合わせフォーム
- カラースキーム: ダークテーマ（#0a0a0a ベース、アクセントカラーに #3b82f6）
- アニメーション: スクロール連動のフェードイン
- パフォーマンス: 外部ライブラリを使わずバニラ JS で実装
- GitHub Pages にそのままデプロイできるファイル構成にする

Antigravity のエージェントは、この指示をもとにファイル構造を設計し、コードを自動生成します。数分後には index.html、style.css、script.js の 3 ファイルが作成されているはずです。

生成されたコードの品質を確認するために、Antigravity のプレビュー機能を使いましょう。

# ローカルサーバーを起動してプレビューする
npx serve .
# → http://localhost:3000 でブラウザ確認

コードの構造を理解する — 生成されたファイルの解説

Antigravity が生成する典型的なポートフォリオサイトのファイル構造は以下のとおりです。

my-portfolio/
  index.html        # メインの HTML ファイル
  style.css          # スタイルシート
  script.js          # JavaScript（アニメーション・インタラクション）
  assets/
    images/          # プロフィール画像やプロジェクトのスクリーンショット
    favicon.ico      # ファビコン
  README.md          # リポジトリの説明

index.html の基本構造は次のようになっています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="ポートフォリオサイト - Web開発者のスキルと実績">
  <title>My Portfolio</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- ナビゲーション -->
  <nav class="navbar" id="navbar">
    <a href="#hero" class="nav-logo">Portfolio</a>
    <ul class="nav-links">
      <li><a href="#about">About</a></li>
      <li><a href="#skills">Skills</a></li>
      <li><a href="#projects">Projects</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
 
  <!-- ヒーローセクション -->
  <section id="hero" class="hero">
    <h1>Hello, I'm <span class="accent">Your Name</span></h1>
    <p>Web Developer / Designer</p>
  </section>
 
  <!-- 以降のセクション... -->
  <script src="script.js"></script>
</body>
</html>

ポイントは、メタタグの description を適切に設定することです。検索エンジンにサイトの内容を正しく伝えることで、ポートフォリオの発見可能性が高まります。

デザインのカスタマイズ — AI に追加指示を出す

生成されたデザインを自分好みに調整するのも Antigravity なら簡単です。チャットパネルで追加の指示を出すだけで、エージェントがコードを修正してくれます。

よく使うカスタマイズ指示の例をいくつか紹介します。

# フォントを変更する
Google Fonts の "Inter" をヘッディングに、"Noto Sans JP" を本文に適用してください
 
# グラデーション背景を追加する
ヒーローセクションの背景に、左下から右上への紫→青のグラデーションを追加してください
 
# スキルセクションをカード型に変更する
スキルをアイコン付きのカードグリッドレイアウトに変更してください。
ホバー時に少し浮き上がるエフェクトを付けてください

Antigravity のエージェントは変更箇所を Diff View で示してくれるので、どこがどう変わったのかを確認しながら進められます。気に入らない変更があれば、⌘Z で元に戻して別の指示を試しましょう。

デザインの微調整を繰り返す際のコツは、一度に一つの変更に絞ることです。複数の変更を同時にリクエストすると、意図しない副作用が生じやすくなります。

プロジェクトセクションの充実 — 実績を効果的に見せる

ポートフォリオの核心はプロジェクトセクションです。Antigravity を活用して、見た目にもインパクトのあるプロジェクトカードを作りましょう。

プロジェクトカードを以下の仕様で再設計してください:
 
- サムネイル画像（16:9 比率）
- プロジェクト名と短い説明文
- 使用技術のタグ（バッジ形式）
- GitHub リポジトリと Live Demo へのリンクボタン
- ホバー時にサムネイルがズームするアニメーション

Antigravity が生成する CSS のホバーアニメーション例を見てみましょう。

/* プロジェクトカードのホバーエフェクト */
.project-card {
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
 
.project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(59, 130, 246, 0.15);
}
 
.project-card .thumbnail {
  transition: transform 0.4s ease;
}
 
.project-card:hover .thumbnail {
  transform: scale(1.05); /* サムネイルのズームイン */
}

プロジェクトの説明文は、**「何を作ったか」だけでなく「どんな課題を解決したか」**を書くのがポイントです。採用担当者や潜在的なクライアントは、技術力だけでなく問題解決能力を重視しています。

GitHub Pages へのデプロイ — 3 ステップで公開する

サイトが完成したら、いよいよ世界に公開します。GitHub Pages へのデプロイはわずか 3 ステップです。

# ステップ 1: 変更をコミットする
git add .
git commit -m "Initial portfolio site"
 
# ステップ 2: GitHub にプッシュする
git push origin main
 
# ステップ 3: GitHub Pages を有効にする（初回のみ）
# GitHub リポジトリの Settings → Pages → Source で "main" ブランチを選択

ブラウザで https://your-username.github.io/my-portfolio/ にアクセスすると、ポートフォリオサイトが公開されているのを確認できます。

デプロイ後の URL は Antigravity のターミナルからも確認できます。

# デプロイ状況を確認する
gh api repos/{owner}/{repo}/pages --jq '.html_url'
# 出力例: https://your-username.github.io/my-portfolio/

GitHub Actions で自動デプロイを設定する

手動デプロイでも十分ですが、GitHub Actions を使えばプッシュのたびに自動でサイトが更新されます。Antigravity に以下の指示を出してワークフローファイルを生成しましょう。

GitHub Actions のワークフローファイルを作成してください。
main ブランチへのプッシュ時に GitHub Pages へ自動デプロイする設定にしてください。

生成されるワークフローファイルの例です。

# .github/workflows/deploy.yml
name: Deploy to GitHub Pages
 
on:
  push:
    branches: [main]
 
permissions:
  contents: read
  pages: write
  id-token: write
 
jobs:
  deploy:
    runs-on: ubuntu-latest
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    steps:
      - uses: actions/checkout@v4
      - uses: actions/configure-pages@v4
      - uses: actions/upload-pages-artifact@v3
        with:
          path: '.'  # リポジトリのルートをデプロイ
      - id: deployment
        uses: actions/deploy-pages@v4

このワークフローをリポジトリに追加してプッシュすれば、以降は main ブランチへのコミットのたびにサイトが自動更新されます。Antigravity と GitHub の連携について詳しくは GitHub 連携ガイドをご覧ください。

カスタムドメインの設定（オプション）

username.github.io のサブドメインではなく、独自ドメインでポートフォリオを公開したい場合の手順も紹介します。

# CNAME ファイルを作成する
echo "portfolio.example.com" > CNAME
git add CNAME
git commit -m "Add custom domain"
git push origin main

DNS の設定では、以下の A レコードまたは CNAME レコードを追加します。

A レコード: 185.199.108.153、185.199.109.153、185.199.110.153、185.199.111.153
CNAME レコード（サブドメインの場合）: your-username.github.io

設定が反映されるまで最大 24 時間かかる場合がありますが、通常は数分〜数十分で完了します。

まとめ

Antigravity × GitHub Pages の組み合わせは、ポートフォリオサイトを最短で公開するための最良の選択肢です。AI エージェントがデザインからコーディングまでをサポートし、GitHub Pages が無料かつ安定したホスティングを提供してくれます。

この記事で紹介したワークフローをまとめると、以下のとおりです。

Antigravity のエージェントにプロンプトを渡してサイト全体を生成する
プレビューで確認しながらデザインを追加指示で調整する
git push するだけで GitHub Pages に自動デプロイされる
GitHub Actions を追加すればビルドパイプラインも自動化できる

まだポートフォリオサイトを持っていない方は、今日この記事を読んだついでに作り始めてみてください。Antigravity がいれば、30 分もあればプロフェッショナルなポートフォリオが完成します。より高度な開発ワークフローに興味がある方には、Antigravity 開発ベストプラクティス総集編がおすすめです。