Github✖️AIで即席ポートフォリオを作ろう

Github✖️AIで即席ポートフォリオを作ろう

今日は「AIにポートフォリオサイトを作らせて、GitHubで無料公開するまでの全手順」を解説します。

はじめに

全ライターが必ず通る道、それが「ポートフォリオ作成」。
０→１を達成するためには全く必要ないものですが、単価を上げて行ったり、活動が３ヶ月以上になってさらにレベルアップしていく際にはあったら良いもの。

僕はnoteのアカウントやこのサイトがポートフォリオの代わりになっています。

ただ僕みたいにいろんなSNSやメディア作戦とかをちょびっとずつ（本当にちょびっとずつ）手を出してる人は、一箇所に情報をまとめてみたくなるもの。

linktree? edireco?

どれも良いサイトですが、せっかくなら自分専用のサイト、作ってみたい。

でもね、コーディングに自信がない。時間もない。

そこで試してみたのがGoogle Antigravityです。
無料です。

なのにGemini 3.o Pro Highが使えます。
すげー簡単にいうと今までで一番賢くてやばいやつです。

あれやこれや指示を出すだけでポートフォリオサイトが完成しました。
ほとんど凝ってないですが、正味10分程度で完成。

Momiji Portfolioah24ok2-svg.github.io

今日はその全手順を、超初心者向けに解説していきます。

ほんでそれをタイトルにもある「GitHub」というサイトで公開するやり方も教えます。

必要なもの（準備編）

まず準備するものはこれだけ。

• Googleアカウント（Gmail持ってればOK）
• GitHubアカウント（無料で作れる）
• ブラウザ（ChromeかEdge推奨）

以上。

「GitHubって何？」って人もいると思うので簡単に説明すると、プログラムのコードを保存・公開できるサービスです。ここにファイルを置くだけで、無料でWebサイトを公開できる機能（GitHub Pages）がついてます。

GitHub · Change is constant. GitHub keeps you ahead.Join the world’s most widely adopted, AI-powered developer plgithub.com

所要時間の目安は、慣れてれば30分、初めてでも1〜2時間あれば終わります。

英語ばっかりで拒否反応起きるかもしれませんが、今回実際に使う部分はそう多くはないので誰でもできるはず。解説画像も入れますよん

Step1：Antigravityでサイトを作る

1-1. Antigravityを開く

まず以下のURLにアクセス。

Google AntigravityGoogle Antigravity – Build the new wayantigravity.google

Googleアカウントでログインして、「Antigravity」を選択すると使えるようになります。

ダウンロードしてPC上で起動しましょう。

1-2. AIにプロンプトを投げる

ここが本番。

Antigravityは自然言語で指示を出すだけでコードを生成してくれるツールです。

僕が実際に使ったプロンプトはこんな感じ。

LLMに自分のプロフィール読み込ませて、「antigravityにポートフォリオサイト作らせるからプロンプト考えて」って言って出てきたやつそのまんま使ってます。

よく「しっかり細かく指示を出す」って言われるんですけど、ぶっちゃけ最初はテキトーに作らせればいいんですよ。

そのあと出てきたものに対してもっとああしろこうしろと伝えればOK

どんなポートフォリオサイトを作ればいいのかも初心者にはわからないので、ざっくりやってイメージ膨らませていけばOKです。

上級者がやってるような完璧なプロンプトを組もうとしてたら日が暮れます。それは生産性が高いとは言わない

1-3. 生成を待つ

指示を投げると、数十秒〜1分くらいでサイトが生成されます。

その時、antigravity上だと「どこクリックしたら見れるの？？」ってなりやすいです。

いつの間にか左の方に「index」という謎のファイルが出来上がってますので、そこで右クリック⇨Reveal in Finderをクリックしましょう。（windowsの場合名称違うかも）👇

するとPC上のファイルの位置を示してくれるので、これをダブルクリックすればレビューできます。👇

1-4. 修正が必要な場合

思ったのと違う場合は、追加で指示を出せばOK。

文字が書かれている部分を画面左側に寄せて、一番したのSNSリンクたちを、右の女の子から出ている吹き出しの中に『SNSリンクはこちら』の文言とともに入れてほしい

copy

こんな感じで細かく調整できます。

何回でもやり直せるので、納得いくまで修正しましょう。

Step2：GitHubで公開する

サイトができたら、次はGitHubで公開します。

「え、GitHub難しそう…」って思うかもしれませんが、今回使う機能は超シンプルなので大丈夫。

2-1. GitHubアカウントを作る

「Sign up」から登録。メールアドレス、ユーザー名、パスワードを設定するだけ。

（ユーザー名は公開URLに含まれるので、変な名前にしない方がいい）
僕はとある方にアプリを共有したときに本名にしてたので、バレました。
別に何の問題もないけれどもちょっと焦った笑

2-2. リポジトリを作成

ログインしたら、左上の「New」ボタンをクリック

設定はこうする。

• Repository name：好きな名前（例：portfolio）
• Publicを選択（Privateだと公開できない）
• 　右下の「Create repository」をクリック。

これでファイルを置く場所ができました。

2-3. ファイルをアップロード

作成したリポジトリの画面で、画面中央の「Add an exsisting file」を選択。

Antigravityで作成したファイルをアップロード。

• index.html
• style.css
• script.js（あれば）
• その他画像ファイルなど

ドラッグ&ドロップでOK。

下の方に「Commit changes」ってボタンがあるのでクリック。

2-4. GitHub Pagesを有効にする

ここが一番つまずきやすいポイント。

リポジトリの「Settings」タブをクリック

左メニューから「Pages」を選択

「Branch」で「None」をクリック、「main」に設定、「Save」をクリック

これで設定完了。

他のところはいじらないで！！！！！！！

2-5. 公開URLを確認

設定を保存すると、数分後にURLが発行されます。

完了したかどうかが非常にわかりにくいんですが右下のDeploymentを見てください

クリックすると中央にURLが出ます。

このURLにアクセスして、サイトが表示されてればOK。

反映まで1〜5分くらいかかるので、すぐ表示されなくても焦らないでください。

まとめ

• Antigravityに指示を出すだけでサイトのコードが生成される
• GitHubにアップロードすれば無料で公開できる
• 初回は1〜2時間、慣れれば30分以内で完成
• コストは0円

正直、「ポートフォリオサイトを持つ」というハードルがめちゃくちゃ下がったと思います。

昔だったらHTMLとCSSを勉強して、サーバー借りて、ドメイン取って…って、初心者には気が遠くなる作業でした。

今は「AIに指示出してGitHubに置く」だけ。

もちろん、これで完璧なサイトができるわけじゃない。デザインにこだわりたいならもっと勉強が必要だし、独自ドメインが欲しければお金もかかる。

でも「とりあえず見せられるものを持つ」というスタートラインに立つには、これで十分だと思うんですよね。

あわせて読みたい

プロンプトエンジニアリング中級編〜AIに論理的思考をさせる技術〜

きだけん

生成AI講師/副業コンサルタント

AI初心者が副業で月10万円を目指すための実践ノウハウを発信しています。生成AI講師として20名以上を指導し、自身もクラウドワークスで案件受注中。教育関連企業で10年勤務、娘の学費を稼ぐため日々研鑽中です。 全ての人が何かを「継続」し、「成果を出す」ことの手伝いをライフワークにしたいと考えています。