Claudeでポートフォリオサイトを作ってみた｜フリーランス・転身でポートフォリオは必要か？作り方と中身の決め方【実体験】

個人で仕事を請けるなら、ポートフォリオはあったほうがいいと思っています。

私はもともと職種柄、ポートフォリオを求められることが多くありました。最初は有料のポートフォリオサービスを使っていたのですが、いくつか不満があって、最終的にClaude（AI）と相談しながら自分でサイトを作り直しました。

この記事は、その全記録です。「そもそも必要なの？」「何を載せればいい？」「どう作るの？」に、実体験で正直に答えます。

こんな人に向けて書いています。

そもそもポートフォリオは必要か？

結論から言うと、職種によります。ただし個人で仕事を請けるなら、あったほうが断然強い。

Web系・クリエイティブ・マーケティングやディレクション系の仕事だと、提案や面談の場で「実物ありますか？」と聞かれる場面が少なくありません。私自身、まさにそういう仕事だったので、実物の提示を求められる機会が多くありました。

ポートフォリオは、転職でもフリーランス受注でも、「言葉だけの自己PR」を裏付ける証拠になります。あるとないとでは、相手への信頼の伝わり方がまるで違います。

逆に言えば、成果物を見せにくい職種なら、無理に作らなくてもいい。要は「相手が判断材料を欲しがる職種かどうか」で決まります。

 案件そのものの取り方は、別の記事でまとめています。
→フリーランスWebマーケターの案件獲得方法【未経験・副業からの始め方も】

有料ポートフォリオサービスをやめて「自作」を選んだ理由

最初は、クリエイター向けのポートフォリオサービスに登録して、担当したクリエイティブを並べていました。手軽だし、最初の一歩としては悪くありません。

ただ、使っているうちに気になる点が3つ出てきました。

フォーマットの自由度が低い
決められた枠に収めるしかなく、見せたい順番や文脈が作りにくい。
そもそも見せる頻度がそれほど高くない
年に数回のために月額を払い続けるのが、だんだんもったいなく感じてきた。
クリエイティブ以外が載せにくい
ディレクションや業務改善のような「成果物が画像にならない仕事」を、うまく表現できない。

特に3つ目が大きくて、「自分の仕事の幅をちゃんと見せたいなら、自由に組める自作のほうがいいな」と判断しました。

Claudeで制作の方向性を決めた

とはいえ、ゼロからサイトを設計するのはなかなか骨が折れます。そこで、Claude（AI）を壁打ち相手にしました。

正直に書いておくと、「全部AIにやってもらった」わけではありません。役割分担はこんな感じでした。

自分で決めたこと：
誰に見せるか（主に採用担当）、一番伝えたいことは何か、全体の方向性
Claudeに相談したこと：
コンセプトの言語化、セクション構成、文章の叩き台、HTML／CSSの生成
自分で手を入れたこと：
生成されたコードの調整、文章の最終的なトーン、細かいレイアウト

特に効いたのが、見せ方を2つの方針で揃えたことです。

ひとつは、実績を「課題→役割→施策→成果」の型で語ること。「すごいでしょう」と並べるのではなく、「どんな課題に、どんな立場で、何をして、どうなったか」で語ると、読む側に再現性が伝わります。「この人なら、うちの課題も同じように解いてくれそうだ」と思ってもらえる。

もうひとつは、経歴を雇用形態で語らないこと。正社員か、派遣か、業務委託か——そうした肩書きを前面に出すと、読み手の関心はどうしてもそこに引っ張られます。私自身、雇用形態が評価の足かせになる場面を経験してきたので、なおさらそう感じました。だから肩書きではなく、「いつ・何を・どう動かしたか」を時系列で見せる。そうすれば、雇用形態に関係なく“何ができる人か”がまっすぐ伝わります。

この2つの方針は、Claudeと話す中で固まりました。

インフラ・技術の選び方（無料構成 → エックスサーバーへ）

ここからは作り方の話。最初はとにかくお金をかけたくなかったので、全部無料で組みました。

ホスティング：
Cloudflare Pages（GitHubと連携してデプロイ）
アクセス制限：
staticrypt（静的サイトをパスワードで保護するツール）
ソース管理：
GitHub

これでも、ちゃんと形にはなります。費用をかけたくない人は、まずこの無料構成で十分です。

ただ、途中で別件のためにエックスサーバーのレンタルサーバーを契約したのを機に、ポートフォリオもそちらへ移しました。決め手は3つ。

ドメインは、もともと仕事用に使っていたGoogle Workspaceのものを流用しました。新しく取らずに済んだのは、地味ですが大きなメリットでした。ドメインを持っていない人は、エックスサーバーの独自ドメイン永久無料特典（一定期間以上の契約などが条件）を使うか、Google Workspaceを契約してそのドメインを使う手もあります。

▼ 独自ドメイン・仕事用メールをまとめて整えたい人向け

このサイトは、いわゆる“クローズド運用”にしています。検索で誰でも見られる必要はないので、noindex,nofollow で検索エンジンには載せず、ベーシック認証をかけて、見せたい相手にだけURLとパスワードを渡す形にしました。採用担当やクライアントにピンポイントで見せたいなら、この“半分だけ鍵をかけた”運用が安心です。

ちなみに計測タグ（GA4など）は、HTMLに直書きせずGTM（タグマネージャー）に集約しておくと、後からの差し替えがぐっと楽になります。

料金感（2026年6月時点）
スタンダードプランで月額1,000円前後（12ヶ月契約で月1,100円、長期契約なら990円〜。キャンペーンでさらに下がることもあります）。初期費用は無料。
最新の金額・特典は公式で確認してください。

作ってわかった「ポートフォリオに載せるべき中身」

自由に組めるようになって、改めて「何を載せるか」を考え直しました。落ち着いた構成がこれです。

Hero（最初に見える部分）：
自分の強みを一言で表すキャッチコピー＋実績を示す数字を2つほど。ここで「何の人か」を一瞬で伝える。
Works（実績）：
さきほどの「課題→役割→施策→成果」で1件ずつ。画像にならない仕事も、この型なら言葉で見せられる。
Career（経歴）：
時系列の文脈。Worksで興味を持ってもらってから経歴で納得してもらう、という順番にした。

なお、実際のページにはこのほかにAbout（自己紹介）も置いていますが、ここでは特に効いた3つに絞って紹介します。

ポイントは、「何でも屋」に見せないこと。あれもこれもできます、と並べると、かえって「結局この人は何が強いの？」になってしまう。軸を1本に決めて、それを補強する実績を選ぶのがコツです。

もうひとつ、守秘の都合がある人に効く工夫を紹介します。実績の社名は出さず、「業種＋規模感」でぼかすと安全です（たとえば「アパレル系のBtoCサービス」といった具合に）。採用担当が見たいのは社名そのものより「どんな規模で、何をしたか」なので、ぼかしても評価は十分に伝わります。NDAや守秘義務がある人ほど、この書き方は重宝するはずです。実績のスクリーンショットを載せる場合も、数値や固有名はぼかし加工しておくと安心です。

制作を通して、自分のキャリアが整理できた

作り終えて気づいたのは、「サイトを作る作業が、そのまま自分の棚卸しになっていた」ということ。

何を強みに据えるか、どの実績を選ぶか、どう語るか——これを決める過程で、自分のキャリアの輪郭がはっきりしてきました。正直なところ、ポートフォリオそのものより、この“整理された感覚”のほうが収穫だったかもしれません。

そして、この勢いのまま、今度はキャリアプランそのものをClaudeと練ってみることにしました。それはまた、別の記事で。
→ポートフォリオを作ったら勢いで、今後のキャリアプランをClaudeと練ってみた｜AIキャリア相談の実体験

個人で請けるなら、ポートフォリオはあると強い

最後に要点を整理します。

最初の一歩は、サーバーとドメインを用意すること。ここさえ押さえれば、あとはClaudeと相談しながら、自分のペースで形にしていけます。

▼ まずはサーバーから（初期費用無料／独自ドメイン永久無料特典つき）

よくある質問

自作のポートフォリオって、いくらくらいかかる？

無料構成（Cloudflare Pagesなど）なら0円から始められます。レンタルサーバー＋独自ドメインで本格運用しても、月1,000円前後が目安です（独自ドメインは永久無料特典を使えば実質0円にできます）。

無料でも作れる？

作れます。Cloudflare Pages（GitHubと連携）のような無料構成で十分形になります。ただし、安定性やアクセス制限の確実さを求めるなら、有料サーバーのほうが安心です。

サーバーはどこがいい？

迷うなら、国内シェアの大きい定番（エックスサーバーなど）が無難です。無料独自SSLや独自ドメイン特典が揃っていて、初めてでもつまずきにくい。

社名を出せない仕事が多いけど大丈夫？

大丈夫です。社名を出さず「業種＋規模感」でぼかせば問題ありません。採用側は社名より“何をしたか”を見ています。