【3時間】生成AIポートフォリオをGitHub×Vercelで公開

「生成AIで素敵なポートフォリオサイトができた！」

でも、そのサイトを友人やお客様に見せようと思ったとき、「どうやってインターネットに公開すればいいの？」と困ったことはありませんか？

「Antigravityで作ったサイトが自分のパソコンでしか動かない」

「GitHubやVercelという言葉は聞いたことがあるけれど、使い方がわからない」

「サーバーを借りないといけない？ 費用はいくら？」

「独自ドメインを設定して、仕事にも使えるサイトにしたい」

そんな方のための、3時間集中・実践型講座です！

この講座では、Antigravity・Gemini・ChatGPTなどの生成AIで制作したポートフォリオサイトを、GitHubとVercelを使ってインターネット上に公開する方法を学びます。

難しいサーバー構築を最初から覚える必要はありません。講師と一緒に画面を操作し、発行されたURLにスマートフォンからアクセスできる状態を目指します。

【この講座の魅力】

★ 3時間で「作ったサイトを公開する」ところまで実践

★ GitHubもVercelも初めてでOK

★ 無料で利用できる範囲から始められる

★ 自分のサイト専用の「.vercel.app」URLを取得

★ GitHubを更新すると自動でサイトに反映

★ 独自ドメインの設定方法まで学べる

★ 公開時によくあるエラーの解決方法も紹介

★ 公開後のチェックや安全な運用のポイントも習得

■ そもそも「デプロイ」って何？

デプロイとは、パソコンの中で作ったWebサイトを、インターネットで閲覧できる状態にすること。

サイト制作では「作れた！」がゴールになりがちですが、公開して初めて、ポートフォリオをSNSのプロフィール欄に貼ったり、名刺にURLを載せたり、作品を見てもらったりできます。

講座では「手元のファイル → GitHub → Vercel → 公開URL」という全体像を、専門用語をかみ砕いて解説します。

■ 学べること①　公開前にAIサイトを点検する

生成AIが作ったサイトは、HTML・CSS・JavaScriptだけでできている場合もあれば、React・Viteなどの仕組みを使っている場合もあります。

・自分のプロジェクトの構成を確認する方法
・index.htmlやpackage.jsonの役割
・静的サイトとビルドが必要なサイトの違い
・画像・リンク・フォントが正しく表示されるか
・公開してはいけないパスワードやAPIキーの確認
・生成AIに公開前チェックを依頼するプロンプト

「何をGitHubに登録すればいいか」がわからない状態から、一歩ずつ進めます。

■ 学べること②　GitHubにサイトを登録する

GitHubは、サイトのファイルを保存し、変更の履歴を管理するサービスです。

・GitHubのアカウントと基本画面
・リポジトリの作り方
・公開リポジトリと非公開リポジトリの違い
・ファイルのアップロードとコミット
・変更したファイルを更新する方法
・秘密情報や不要ファイルを除外する考え方

Gitのコマンドが苦手な方でも理解できるよう、まずはわかりやすい操作を中心に進めます。Antigravityからの連携についても、環境に応じて考え方を紹介します。

■ 学べること③　Vercelで世界にサイトを公開！

ここが講座最大の山場です。GitHubに登録したサイトをVercelに連携させ、公開URLを発行します。

・Vercelへの登録とGitHub連携
・「Add New Project」からのサイト登録
・Framework PresetやRoot Directoryの基本
・必要なBuild Command・Output Directoryの確認
・Deployボタンを押して公開
・ビルド結果とログの見方
・「自分のサイト名.vercel.app」にアクセス
・パソコンとスマホの両方で表示確認

一度公開して終わりではなく、「何が起きてサイトが見られるようになったのか」まで理解します。

■ 学べること④　公開後の修正も自動で反映

公開したあとで「実績を1件追加したい」「自己紹介を変えたい」「デザインを直したい」と思うことは必ずあります。

・Antigravityなどでサイトを編集する
・GitHubに変更を送る
・Vercelによる自動デプロイを確認する
・公開ページに修正が反映されたか確かめる
・プレビューURLと本番URLの違いを理解する

毎回サイトを一からアップロードし直す必要がなくなる、便利な更新の仕組みを体験します。

■ 学べること⑤　独自ドメインを設定する

「.vercel.app」のURLでもサイトは公開できますが、自分だけのドメインを使いたい方も多いはずです。

・独自ドメインとは？ なぜ使うの？
・ドメインの取得・更新にかかる費用
・Vercelへのドメイン追加方法
・DNS、Aレコード、CNAMEの基本
・HTTPSとSSL証明書の仕組み
・設定後の動作確認と反映待ちの考え方

独自ドメインを持っていない方も大丈夫。講師のデモを見ながら手順を学べます。

■ 学べること⑥　「公開できない！」への対処

AIで作ったサイトは、開発中は動いていても、公開時にエラーが出る場合があります。

・ビルドエラーの確認方法
・画像やCSSが読み込まれない場合
・ページを直接開くと404になる場合
・環境変数の設定が必要な場合
・GitHubを更新したのに反映されない場合
・エラーメッセージをAIに相談する方法

エラーを怖がらずに、原因を調べて解決できるようになることも大きな目標です。

■ 仕事につながるポートフォリオに近づける

公開したURLは、SNS、プロフィール、名刺、応募書類、営業メールなど、さまざまな場所に掲載できます。

講座では、パソコン・スマートフォンでの見え方、プロフィールや実績へのリンク、お問い合わせ導線、ページのタイトル、SNSシェア時の表示など、公開後に確認したい点も紹介します。

「URLを発行すること」だけでなく、「安心して誰かに見せられるサイトにすること」を目指します。

■ どんなサイトが公開できるの？

例えば、Webデザイナーの作品集、動画クリエイターの制作実績、ライターの執筆実績、講師のプロフィール、フリーランスのサービス紹介、就職・転職活動用の自己PRサイトなど。

これらのサイトを生成AIで制作し、公開可能なファイルがそろっていれば、講座で学んだ手順を応用できます。

ただし、会員登録や決済機能、データベースなどを利用するWebアプリは、追加の環境構築が必要になる場合があります。

■ 公開後も自分でサイトを育てられる！

作品が増えたら実績ページを更新する。新しいサービスを始めたら紹介文を追加する。デザインに飽きたらAIでリニューアルする。

一度GitHubとVercelの基本を理解すれば、公開後の改善にも取り組みやすくなります。

生成AIで制作し、GitHubで管理し、Vercelで公開する。この一連の流れを理解することで、次に別のサイトを作ったときにも役立つスキルが身につきます。

【3時間後に目指す成果】

① 自分でGitHubにサイトのコードを登録できる
② Vercelでポートフォリオを公開できる
③ 公開URLをほかの端末から確認できる
④ 更新した内容をサイトに反映できる
⑤ 独自ドメイン設定の流れが理解できる
⑥ 公開後のチェックとトラブル対処の基本がわかる

ご自身のサイトをお持ちなら持ち込み歓迎。まだサイトがない場合も、講師が用意したサンプルで参加できます。

※この講座ではサイトの「制作」ではなく「公開」を中心に学びます。バックエンドやデータベースを使う高度なWebアプリの公開は対象外です。サイトの構成や外部サービスの状況によっては、個別の修正作業が必要になる場合があります。

「作れる」から「公開して届けられる」へ。

あなたが生成AIで生み出した作品を、3時間でインターネットの世界に送り出しましょう！