AIを使ったポートフォリオサイト作成【ノーコードでプロ品質を実現】

はじめに

転職活動や副業獲得のために「ポートフォリオサイトを作りたい」と思ったとき、HTMLやCSSの知識がなくても今はAIを使えば実現できます。Claudeを使ってポートフォリオサイトを作成した経験から、プログラミング知識がなくてもAIでプロ品質のサイトが作れる方法を解説します。

AIでサイトを作る方法の選択肢

Claudeに「HTML・CSSのコードを生成してもらう」方法はプログラミング知識がある方向けで、細かいカスタマイズが可能です。Wix・Squarespace・NotionサイトなどのノーコードツールをAIで効率化する方法は知識ゼロでも始められます。WordPressをClaudeのサポートでカスタマイズする方法は中間的なアプローチです。今回は最もアクセスしやすい「Claudeを使ったHTML生成」の方法を中心に解説します。

Claudeでポートフォリオを作る手順

まずClaudeに以下のようなプロンプトを入力します。「製造業MLエンジニアのポートフォリオサイトを作りたいです。HTML・CSSで作ってください。含めたい内容は：①自己紹介（G検定・E資格保有・長野在住・製造業MLエンジニア）②スキル（Python・LightGBM・Docker・AWS）③プロジェクト実績（異常検知システム・需要予測）④連絡先（GitHub・X）。シンプルで見やすいデザインにしてください」。このプロンプトでClaudeがHTML・CSSのコードを生成します。

GitHubでの公開方法

生成したindex.htmlをGitHubリポジトリにアップロードして、GitHub Pagesを有効にするだけで無料でウェブサイトとして公開できます。手順はGitHubでリポジトリを作成（例：username.github.io）→index.htmlをプッシュ→Settings→Pages→Source: Deploy from a branchを選択という流れです。独自ドメイン（例：shun-engineer.com）も1,000〜2,000円/年で取得してGitHub Pagesに設定できます。

AIでサイトを改善する方法

「このサイトのナビゲーションをスティッキーにしてください」「スマホでも見やすいレスポンシブデザインにしてください」「フォームからの問い合わせ機能を追加してください」という指示をClaudeに出すことでサイトを段階的に改善できます。コードを理解していなくても「こうしたい」という意図をAIに伝えることで、次々と改善が実現できます。

ポートフォリオに含めるべき内容

自己紹介（名前・職種・経験年数・保有資格）はトップページに必ず含めましょう。スキル一覧は技術スタック（Python・AWS・Docker等）を視覚的に示します。プロジェクト実績は「何を作ったか・成果（数字）」をわかりやすく記載します。連絡先・SNSリンク（GitHub・LinkedIn・X・ブログ）は採用担当者への導線として重要です。

よくある質問

「HTMLの知識がなくてもAIのコードを貼り付けるだけで動きますか」という質問をよく受けます。動きます。生成されたコードをindex.htmlに貼り付けてブラウザで開くだけで確認できます。「見た目が気に入らい場合はどうすればいいですか」という質問については、「もっとモダンなデザインにしてください」「カラーをネイビーとホワイトにしてください」という追加指示をClaudeに出すだけで改善されます。

まとめ

AIを使ったポートフォリオサイト作成はClaudeへのプロンプト→HTML生成→GitHub Pagesで公開という3ステップで実現できます。プログラミング知識がなくても、「こうしたい」という意図をAIに伝えることでプロ品質のサイトが作れます。まず今日Claudeに「ポートフォリオサイトのHTML を作って」と依頼してみましょう。

AIを使ったポートフォリオサイト作成は「今日から始められる」転職準備です。Claudeに「ポートフォリオサイトのHTMLを作って」と依頼して、生成されたコードをGitHub Pagesで公開するという最短3時間でポートフォリオサイトが完成します。転職活動・副業獲得の武器としてポートフォリオサイトを今日作ってみましょう。

ポートフォリオサイトは転職・副業の永続的な資産です。今日作れば明日から使えます。Claudeに依頼するだけで最初の一歩が踏み出せます。