フリーランスのポートフォリオをAIで作る方法【GitHub Pages対応】
フリーランスとして仕事を取るとき、「ポートフォリオがない」「Webサイトを作るお金がない」という悩みを抱えている人は多い。
でも、今はClaude CodeやChatGPTを使えば、デザインセンスもプログラミング経験もなく、無料でポートフォリオサイトが作れる。しかもGitHub Pagesを使えばホスティング費用も0円だ。
この記事では、AIを使ったポートフォリオ制作の全手順を説明する。
なぜGitHub Pages × AIが最強の組み合わせなのか
GitHub Pagesの特徴
- 完全無料: ホスティング費用がかからない
- 独自ドメイン対応: 後から
yourname.comのような独自ドメインを設定できる - HTTPS対応: セキュリティ証明書も無料で自動設定される
- GitHubにコードが公開される: エンジニア系フリーランスにとって技術力の証明にもなる
AIを使う利点
HTML/CSS/JavaScriptの知識がなくても、Claudeに「こういうポートフォリオを作って」と言えばコードを全部書いてくれる。デザインのブラッシュアップも「もう少しおしゃれにして」と伝えれば修正してくれる。
事前準備（10分）
必要なもの
- GitHubアカウント（無料）: github.com でアカウント作成
- Git（Windowsはgit.comからインストール）
- VS Code（コードエディタ、無料）
- Claudeアカウント（または Claude Code）
GitとGitHubの使い方がわからない場合は、Claude/ChatGPTに「GitとGitHubの初心者向けセットアップ方法を教えて」と聞きながら進めよう。
ステップ1：AIにポートフォリオのHTMLを作らせる
Claudeに以下を入力する。
フリーランスのポートフォリオWebサイトのHTMLを作ってください。
以下の内容を含んでください：
【自分の情報】
名前: ○○ ○○
職種: Webデザイナー / 動画編集者
スキル: Figma, Premiere Pro, After Effects, Adobe Illustrator
実績: （後で追加するのでプレースホルダーで）
【デザイン要件】
- シンプルでプロフェッショナルな雰囲気
- モバイル対応（レスポンシブデザイン）
- 問い合わせフォームあり
- CSS/JavaScriptも含めた1ファイルで作ってください
Claudeがindex.htmlを含む完全なHTMLを出力してくれる。それをindex.htmlとして保存する。
ステップ2：内容をカスタマイズする
出力されたHTMLをVS Codeで開き、プレースホルダー部分を自分の情報に書き換える。よくわからない部分はClaudeに「ここを○○に変えたい」と相談しながら編集する。
追加すると効果的な要素
- 実績・制作物のギャラリー: 過去に作ったもの・受注した仕事の成果物
- お客様の声: 実際に仕事をした人からのフィードバック（許可を得て）
- SNSリンク: Twitter/X、LinkedIn、note、YouTubeなど
- 料金の目安: 「料金は要相談」でもいいが、目安があると問い合わせしやすい
ステップ3：GitHub Pagesに公開する
- GitHubで新しいリポジトリを作成。リポジトリ名は
[GitHubユーザー名].github.ioにする index.htmlをそのリポジトリにプッシュ（アップロード）する- GitHubの設定で「Pages」を有効にする
手順がわからなければ、Claudeに「GitHubリポジトリを作ってindex.htmlをアップロードしてGitHub Pagesを有効にする方法を教えて」と聞けばステップバイステップで教えてくれる。
完了すると https://[ユーザー名].github.io でポートフォリオが公開される。
ステップ4：品質チェックとSEO対策
公開したら以下を確認する。
チェックリスト
- スマートフォンで表示が崩れていないか確認（レスポンシブ）
- 問い合わせフォームが機能するか確認
- Googleで自分の名前を検索したときに出てくるか確認（数日〜数週間かかる）
- 表示速度をPageSpeed Insightsで確認
SEO対策（AIに依頼する）
Claudeに「このHTMLのSEO対策を改善してください。職種と名前でGoogle検索されることを目標にしています」と依頼すると、<title>, <meta description>, OGPタグなどを追加・修正してくれる。
Claude Codeを使うとさらに速くなる
Claude Code（AIコーディングツール）を使えば、コードの作成・修正・デプロイまでをチャット上で一気に進められる。
このポートフォリオに、過去の制作実績を画像付きで表示できる
モーダル（ポップアップ）ギャラリーを追加してください。
こういった追加機能の依頼も、Claude Codeなら「AIがコードを書いてそのまま実装してくれる」ため、HTMLを手作業で編集する必要がなくなる。
Claude Codeの始め方・初心者ガイドも参考にしてほしい。
よくある質問
Q. ドメインを独自にしたい場合は？
A. 「[名前].com」などの独自ドメインを取得して（年1,000〜1,500円程度）、GitHub PagesのCustom domain設定で紐づけるだけで使える。
Q. 問い合わせフォームはどうすれば機能する？
A. GitHub Pagesは静的サイトなので、フォームの送信処理には外部サービスが必要だ。Formspreeという無料サービスを使うと、HTMLに数行追加するだけでフォームが機能するようになる。Claudeに「Formspreeを使った問い合わせフォームの設定方法を教えて」と聞こう。
Q. ポートフォリオに載せる実績がない場合は？
A. 「想定事例」として架空のプロジェクトを作ってもいい。「○○業界向けのECサイトリニューアルの想定デザイン」のように、「これができます」を示すサンプルを制作してポートフォリオに入れよう。
まとめ
AIとGitHub Pagesの組み合わせで、完全無料でフリーランスのポートフォリオが作れる。
- Claudeにページ全体のHTMLを作らせる
- VS Codeで自分の情報に書き換える
- GitHub Pagesで公開（無料）
- SEO対策もAIに依頼して完成
フリーランス独立準備チェックリスト10選も合わせて読んで、独立・副業への準備を進めてほしい。
フリーランスの請求書・確定申告はfreeeで自動化
ポートフォリオができたら、次は案件管理・請求書・確定申告の準備を。freee会計はフリーランス向けに特化した機能が揃っています。
関連ツールを見る
この記事で紹介したツール・サービスをまとめてチェック。
