AIでポートフォリオサイトを作る手順｜Web制作初心者向け完全ガイド

生徒

ポートフォリオサイトを作りたいんですが、コードに自信がなくて…。AIを使って作れますか？

ペン博士

もちろん作れるよ！ChatGPTやClaudeにHTML/CSSを生成してもらいながら進めると、初心者でもちゃんとしたポートフォリオが作れる。ただし「丸投げ」は危険なので、その理由も含めて順番に教えるね。

Web制作を学んでいる初心者がまず突き当たる壁のひとつがポートフォリオサイトの作成です。「何を作ればいいかわからない」「コードに自信がない」という悩みを、AI（ChatGPT・Claude・v0・Cursorなど）を使って解消する方法を解説します。

この記事では企画→デザイン案→HTML/CSS生成→公開（GitHub Pages/Vercel/Netlify）まで、通しで手順をまとめました。AIへの具体的なプロンプト例もコードブロックで複数紹介します。

ポートフォリオサイトに載せるべき内容を整理する

コードを書く前に、「何を載せるか」を言語化することが最重要です。AIに依頼する前に自分の言葉で整理しておくと、出力の品質が格段に上がります。

最低限まとめておく項目は以下のとおりです。

• 自己紹介：名前・学習歴・得意なこと（簡潔に3行程度）
• スキル一覧：HTML・CSS・JavaScript・使えるツールなど
• 制作物（Works）：学習で作ったサイト・アプリ・課題など（2〜3件でよい）
• お問い合わせ：メールアドレスまたはフォームへのリンク
• SNS・GitHubリンク：あれば

制作物がまだない場合は「学習記録サイト」や「架空企業のLPコーディング」を先に作るとよいです。ポートフォリオに載せる実績を作ることがWeb制作学習の王道の進め方です。

ChatGPT・Claudeでデザイン方針を決める

コンテンツが決まったら、AIにデザイン方針の案出しを手伝ってもらいます。自分でゼロから考えるよりも、AIにたたき台を出してもらってから選ぶほうが早く決断できます。

デザイン方針を聞くプロンプトの例を示します。

Web制作を学習中の初心者がポートフォリオサイトを作ります。
以下の条件でデザイン方針を3案提案してください。

・ターゲット：副業・フリーランスの仕事をくれる個人・中小企業の担当者
・印象：清潔感があり、誠実で信頼できる雰囲気
・得意分野：HTML/CSS・WordPressサイト制作

各案に「配色」「フォント」「レイアウトの特徴」「向いているターゲット」を含めてください。

出てきた案を見て「この方向性でいく」と決めたら、次のHTML/CSS生成に進みます。決め方は「自分がなりたいイメージに近いもの」で構いません。

v0でデザインモックを生成する（UIコンポーネント向き）

Vercelが提供するv0（v0.dev）は、テキストの指示からReactコンポーネントやHTMLのUIを生成するAIツールです。デザインのモックを素早く視覚化したいときに向いています。

v0へのプロンプト例はつぎのとおりです。

Web制作者のポートフォリオサイトのトップページを作ってください。
構成：ヒーローセクション（名前・キャッチコピー）、スキル一覧カード、
制作実績グリッド（3件）、お問い合わせセクション。
配色：メインカラー #2563eb（青）、背景 #f8fafc（薄グレー）。
シンプルで清潔感のあるモダンデザイン。

v0の出力をそのまま使うのではなく、「どの部分がどう動いているか」を読んで理解することが重要です。理解せずに丸コピーすると、修正や改善ができなくなります。

ChatGPT・ClaueでHTML/CSSを生成・修正する

v0でデザインの方向性が決まったら、シンプルな静的HTML（1ファイル）として作りたい場合はChatGPTやClaudeに直接依頼する方法が扱いやすいです。

HTML/CSS生成を依頼するプロンプト例を示します。

以下の条件でポートフォリオサイトのHTMLとCSSを1ファイルで作ってください。

【構成】
1. ヘッダー（名前・ナビゲーション）
2. ヒーローセクション（キャッチコピー・自己紹介文）
3. スキルセクション（リスト）
4. 制作実績セクション（カードグリッド3件）
5. お問い合わせセクション（メールリンク）
6. フッター

【条件】
・1ファイル（style タグをhead内に記述）
・レスポンシブ対応（モバイル幅 640px 以下でレイアウトを縦積みに）
・配色：メインカラー #2563eb、テキスト #1e293b、背景 #f8fafc
・フォント：system-ui, sans-serif
・ダミーテキストで構成を示し、後で差し替えやすくする

生成されたコードは必ず自分でブラウザ確認してからテキストを差し替えます。AIが出したコードをそのまま公開するのではなく、一行ずつ何をしているか確認する習慣をつけましょう。

Cursorでコード編集を効率化する

Cursor（cursor.com）はAIが組み込まれたコードエディタです。VSCodeをベースにしており、コードを書きながらその場でAIに質問・修正依頼ができます。

Cursorでよく使うAI操作はつぎのとおりです。

• Cmd+K（Mac）/ Ctrl+K（Win）：選択したコードに対してAIに修正を依頼
• Cmd+L / Ctrl+L：チャット形式でコードの質問・相談ができる
• コードを選択して「このCSSをレスポンシブ対応にして」と指示

Cursorを使うと「エラーが出た」「ここをもっとこうしたい」という細かい修正をスムーズに進められます。ただし、AIの提案をそのまま受け入れるのではなく、何が変わったかを確認するクセをつけることが大切です。

GitHub Pages・Vercel・Netlifyで公開する手順

HTMLファイルが完成したら、無料で公開できるホスティングサービスを使いましょう。代表的な3つを比較します。

静的なHTML/CSSのポートフォリオをGitHub Pagesで公開する手順はつぎのとおりです。

1. GitHubでリポジトリを新規作成（例：portfolio）
2. ローカルのHTMLファイルをgitで管理してリモートにpush
3. GitHubリポジトリの「Settings」→「Pages」を開く
4. 「Branch」を「main」に設定して「Save」
5. 数分後に https://【GitHubユーザー名】.github.io/portfolio/ でアクセスできる

# ターミナルでの基本手順（ポートフォリオフォルダ内で実行）
git init
git add index.html style.css
git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/【ユーザー名】/portfolio.git
git push -u origin main

pushする前にgit add . や git add -A は使わず、公開したいファイルだけを個別に指定しましょう。意図しないファイル（.envなど）が混入するリスクを防げます。

AIに丸投げする危険と「自分で理解する」重要性

AIはコードを一瞬で生成しますが、理解せずに使い続けると大きな問題が起きます。

• エラーが直せない：AIが出したコードの意味を知らないと、エラーが出たとき対処できない
• 修正・改善ができない：クライアントから「ここを変えて」と言われても対応できない
• コードの品質が下がる：AIは動くコードを出すが、必ずしも最適・安全なコードとは限らない
• 自分のスキルが伸びない：コピペ頼りでは転職・副業で必要な実力がつかない

AIは「速く書くための補助」として使い、生成されたコードは必ず自分で読んで理解することが大切です。「なぜこう書くのか」を確認しながら使うと、AIがそのまま学習教材にもなります。

プログラミング学習はAI時代でも不要にはなりません。詳しくはプログラミング学習はもう不要は本当かも参考にしてください。また、AIを使いながら独学を加速する方法は生成AIで独学は加速するのかで詳しく解説しています。

まとめ

AIを使えばポートフォリオサイトの制作スピードは大きく上がります。企画→デザイン案出し→HTML/CSS生成→公開の流れを、AIの力を借りながら実際に手を動かして完成させましょう。大切なのは「丸投げせず、理解しながら使う」ことです。

・企画：載せる内容を先に言語化してからAIに依頼する
・生成：ChatGPT/Claude/v0で素早くモックを作り、自分で読んで理解する
・公開：GitHub Pages/Vercel/Netlifyで無料公開。gitは個別ファイル指定でpush

AIで制作を加速しながら、HTML・CSSの本質的な理解はWithCodeで体系的に積み上げていきましょう。

よくある質問（FAQ）

Q1. AIでポートフォリオサイトを作る費用はいくらですか？

A. AIツールの無料枠とVercelなどの無料ホスティングを使えば、0円から公開まで進めることができます。

Q2. コードが書けなくても作れますか？

A. AIで雛形は作れますが、公開や細かな調整には最低限のHTML/CSSの知識があると安心です。

Q3. どのくらいの期間で作れますか？

A. 掲載内容と構成が決まっていれば、数時間から数日で公開できます。

関連記事｜AIツール活用

• Claude Codeでコーポレートサイトを作らせる実践手順｜プロンプト全公開
• DifyでノーコードAIアプリを作る方法｜チャットボット構築入門
• GitHub Copilot無料版の始め方・使い方【2026年版】
• AI時代のプログラミング学習ロードマップ【2026年版】｜何をどの順で学ぶか

WithCodeを体験できる初級コース公開中！

初級コース(¥49,800)が完全無料に！

• 期間：1週間
• 学習内容：
  ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
  → 正しい学習方法で「確かな成長」を実感できるカリキュラム。

副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？

未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！