フリーランスとして活動していると、「ポートフォリオサイトを作ったほうがいい」という話を耳にする機会は多いと思います。
でも、いざ作ろうとすると「何を載せればいいの？」「どんなページ構成にすればいいの？」と迷ってしまう方も多いのではないでしょうか。
この記事では、フリーランスのポートフォリオサイトに載せるべき情報と、仕事の問い合わせにつながる5ページ構成のテンプレートを紹介します。
私たちはウェブ制作会社として、これまで多くのポートフォリオサイトを制作してきました。同時に、外注先を探すときや採用を検討するときに、フリーランスの方のポートフォリオサイトを「見る側」として評価する立場でもあります。
そのなかで感じてきた「発注する側は、ポートフォリオサイトのどこを見ているのか」という視点も交えてお伝えしていきます。
デザイナー、エンジニア、ライターなど、職種別のポイントにも触れていますので、ぜひ自分の職種に当てはめながら読んでみてください。
目次
ポートフォリオサイトの目的は「作品を見せること」ではない
「ポートフォリオサイト＝作品集」と考えている方は多いかもしれません。もちろん作品を見せることは大事なのですが、ポートフォリオサイトの本当の目的は「仕事の問い合わせをもらうこと」にあります。
以前、あるデザイナーさんのポートフォリオサイトを見たことがあります。作品のクオリティは申し分なかったのですが、「この人にはどんな仕事を頼めるんだろう？」「料金感はどのくらいだろう？」「そもそもどうやって連絡すればいい？」——そのあたりが一切わからず、結局別の方に依頼しました。
すごくもったいない話です。でも、こういうケースは珍しくありません。
発注する側がフリーランスのポートフォリオサイトで確認しているのは、突き詰めると3つです。
- 何ができる人なのか（スキルや対応範囲）
- どのくらいのクオリティで仕事をするのか（実績や成果物）
- 安心して仕事を任せられそうか（人柄や連絡のとりやすさ）
この3つに答えられるサイトになっていれば、デザインがシンプルでも、ページ数が少なくても、ポートフォリオサイトとして十分に機能します。
フリーランスのポートフォリオサイトは5ページ構成で十分
ポートフォリオサイトはあれこれページを増やす必要はありません。以下の5ページ構成があれば、フリーランスの営業ツールとしてきちんと成立します。
- トップページ
- 実績ページ（Works）
- プロフィールページ（About）
- サービス内容ページ（Service）
- 問い合わせページ（Contact）
ひとつずつ、載せるべき情報と発注する側がどこを見ているかを解説していきます。
トップページに載せるべき情報 ── 「何の人か」を3秒で伝える
トップページに求められるのは、パッと見た瞬間に「この人は何をしている人なのか」がわかることです。
載せたい情報はこのくらいで十分です。
- キャッチコピー：職種と対応領域が伝わるひと言。「名古屋を拠点にしたフリーランスWebデザイナー」「WordPress専門のサイト制作をしています」など
- 代表的な実績のビジュアル：2〜3点を大きめに見せる
- 実績ページや問い合わせページへのリンク
以前、トップページを開いたら全画面にアートっぽいアニメーションが広がるポートフォリオサイトを見たことがあります。かっこいいなとは思ったのですが、30秒経ってもその方が何の仕事をしている人なのかわかりませんでした。
トップページは「世界観を表現する場所」というより、「入口の看板」に近い存在です。通りかかった人が看板を見て「あ、ここはウェブデザインの人なんだ」とわかること。それがトップページの仕事です。
実績ページ（Works）に載せるべき情報 ── ポートフォリオサイトの核
ポートフォリオサイトで一番大事なページです。発注する側が最も注意深く、時間をかけて見るのもここです。
実績1件ごとに載せておきたい情報を整理します。
- 案件の概要：何を、どんなクライアントに対して制作したか
- 担当範囲：デザインのみなのか、コーディングも含むのか、ディレクションもやったのか
- 課題と自分のアプローチ：クライアントが抱えていた課題に対して、自分はどう考えて取り組んだか
- 成果：数字があれば一番ですが、「リピートで追加発注をいただいた」「公開後にクライアントから感謝の連絡をもらった」といった定性的な話でも十分伝わります
- 使用技術やツール
ここで大事なのは、スクリーンショットだけで終わらせないことです。
たとえば「飲食店のホームページを制作しました」という実績があるとします。画像だけだと「ふーん、こんなデザインを作るんだな」で終わってしまいます。でもそこに、
「オープンしたばかりで認知度がほぼゼロの状態だった。まずは近隣のお客さんにお店を知ってもらうことを最優先に考えて、アクセス情報とメニューを一番目立つ位置に配置した。Googleビジネスプロフィールとの連携も提案した」
と2〜3行の背景が添えてあるだけで、「この人は見た目を作るだけじゃなくて、ビジネスのことも考えてくれるんだ」と伝わります。これだけで問い合わせにつながる確率がかなり変わってきます。
実績ページの載せ方は職種によって変わる
実績ページは職種によって見せ方のポイントが異なります。
デザイナーの場合は、ビジュアルが主役になります。ただし、画像を並べるだけではなく、「クライアントの要望」「デザインの意図」「こだわったポイント」をテキストで補足すると、デザインの裏側にある思考が伝わり、発注する側の信頼感が増します。ジャンルやテイストの幅広さが見えるように、雰囲気の違う案件をバランスよく載せるのもポイントです。
エンジニア・プログラマーの場合は、見た目よりも「どんな技術で何を解決したか」が重要です。使用言語・フレームワーク・インフラ構成などの技術スタックを明記しましょう。可能であればGitHubへのリンクやデモサイトを用意すると、技術力の判断材料になります。「既存システムのパフォーマンスを改善した」「APIの設計を見直してレスポンス速度を50%改善した」のように、数字つきの成果があると強いです。
ライター・編集者の場合は、公開されている記事のURLを載せるのが基本です。ジャンル（IT、金融、美容など）と記事の種類（SEO記事、インタビュー、コラムなど）がわかるように分類しておくと、発注する側が「この人にはこのジャンルの記事を頼めそうだ」と判断しやすくなります。執筆だけでなく構成案の作成や編集もできる場合は、その旨も書いておきましょう。
掲載件数は3〜10件くらいが目安です。全案件を載せる必要はないので、自信のある仕事を厳選して、量より質で見せましょう。
ちなみに、NDA（秘密保持契約）がある案件は、クライアント名を出さず「飲食業・個人店舗」「BtoB製造業・従業員50名規模」のように業種と規模感だけ書くという方法もあります。掲載前に先方へ確認を取るのが基本ですが、「業種と規模感だけなら」とOKをもらえるケースは意外と多いです。
プロフィールページ（About）に載せるべき情報 ── 信頼感をつくる
実績を見て「いい感じだな」と思った人が、次にチェックするのがプロフィールページです。ここでは「この人なら安心して仕事を任せられそうだ」と感じてもらうことが大切です。
載せたい情報はこちらです。
- 名前（屋号があれば屋号も）
- 顔写真やイラスト
- 経歴の概要
- 得意なこと・専門分野
- 仕事に対する考え方（2〜3行で十分）
顔写真はあったほうがいいです。顔出しに抵抗がある方はイラストでもかまいませんが、「何も画像がない」のと「何かしらの画像がある」のでは、信頼感がまったく違います。私たちが外注先を探すときも、顔写真やイラストがあるほうが「ちゃんと活動している人だな」という印象を受けます。
また、得意分野はできるだけ具体的に書くことをおすすめします。
「Web制作全般に対応できます」よりも、「WordPressを使ったコーポレートサイトの制作が得意です。飲食店や美容室など、店舗ビジネスのサイトを多く手がけてきました」のほうが、「あ、うちのお店のサイトもお願いできそう」と具体的にイメージしてもらえます。
「なんでもできます」は一見アピールに見えますが、発注する側からすると「結局何が強いんだろう？」となりやすいので、思い切って絞ったほうが仕事にはつながりやすいです。
サービス内容ページ（Service）に載せるべき情報 ── 問い合わせに直結するページ
このページがないポートフォリオサイト、けっこう多いです。でも、私たちの経験上、サービス内容ページがあるかないかで問い合わせ率はかなり変わります。
理由はシンプルで、発注する側は「この人に何を頼めるのか」を知りたいからです。実績ページで「いいな」と思っても、対応範囲がわからないと問い合わせに踏み切れません。
載せたい情報はこちら。
- 対応できる業務の一覧：Webデザイン / コーディング / WordPress構築 / バナー制作 / 保守運用 など
- 対応範囲の明示：「デザインのみ対応」なのか「デザインからコーディングまで一括対応」なのか。ここが曖昧だと問い合わせしにくい
- 料金の目安：「LP制作：15万円〜」「WordPress構築：30万円〜」のように最低価格だけでも書いてあると、予算感が合うかどうかの判断ができて助かります
- 制作の流れ：ヒアリング → ご提案 → 制作 → 確認・修正 → 納品、のようなステップを簡潔に
料金を載せることに抵抗がある方もいるかもしれません。確かに案件ごとに金額は変わるので、載せにくい気持ちはわかります。
ただ、料金の目安がまったくないと「高いのかな、安いのかな、聞いてみないとわからないな……まあいいか」と問い合わせ自体をやめてしまう人が一定数います。最低価格や参考価格帯だけでも載せておくと、「予算的に合いそうだから聞いてみよう」と背中を押す効果があります。
もちろん、「案件の内容をお聞きしてからお見積もりします。まずはお気軽にご相談ください」というスタイルでも問題ありません。大事なのは、問い合わせまでの心理的なハードルをなるべく下げておくことです。
問い合わせページ（Contact）に載せるべき情報 ── ポートフォリオサイトのゴール
ポートフォリオサイトの最終ゴールにあたるページです。ここまで来てくれた人を逃さないことが大切です。
載せる情報はシンプルにしましょう。
- 問い合わせフォーム：名前・メールアドレス・相談内容の3項目くらいがちょうどいいです。「会社名（必須）」「電話番号（必須）」「予算」「希望納期」……と項目が増えるほど、「めんどくさいな」と離脱される原因になります
- メールアドレス：フォーム入力が苦手な方のための代替手段として
- 返信の目安：「2営業日以内にご返信します」のひと言があるだけで、「ちゃんと対応してもらえそうだ」という安心感が生まれます
ときどき、連絡先がSNSのDMだけというサイトもあります。個人間のやりとりならそれでもいいのですが、企業の担当者がSNSのDMで仕事の問い合わせをするのは、けっこうハードルが高いものです。問い合わせフォームかメールアドレスは用意しておいたほうが、機会を逃さずにすみます。
ポートフォリオサイトの導線設計 ── ページのつなぎ方で問い合わせ率が変わる
5ページの中身が決まったら、あわせて考えたいのがページ同士の導線です。
訪問者がポートフォリオサイトを見る基本的な流れは、だいたいこうなります。
トップ → 実績 → プロフィール → サービス内容 → 問い合わせ
この流れを意識すると、各ページの下部に「次に見てほしいページへのリンク」を置くことがとても大事だとわかります。
たとえば、実績ページの最後に「対応できる業務はこちら → サービス内容」、サービス内容ページの最後に「お仕事のご相談はこちら → 問い合わせ」というリンクを置く。
たったこれだけのことですが、ページ間の移動が自然につながっているだけで、問い合わせにたどり着く確率は変わってきます。逆に、各ページが孤立していて「次にどこを見ればいいかわからない」状態だと、途中で離脱されやすくなります。
ポートフォリオサイトを作ったあとは、自分でトップページから問い合わせページまで一度通して操作してみることをおすすめします。「あれ、ここから次のページに行けないな」と気づけたら、そこにリンクを足すだけで改善できます。
発注する側が「もったいない」と感じるポートフォリオサイトの特徴5つ
これまでたくさんのフリーランスのポートフォリオサイトを見てきた中で、「もったいないな」と感じることが多かったパターンを5つ紹介します。当てはまるものがあれば、見直すきっかけにしてみてください。
「何の人か」がトップページでわからない
おしゃれなビジュアルやアニメーションがあるのに、職種も対応業務も書いていないケースです。デザインのセンスは伝わるのですが、「で、何を頼める人なんだろう？」がわからず先に進みにくくなります。
私たちも過去に、見た目の完成度が高いサイトに惹かれてクリックしたものの、3ページほど見てもその方の職種がわからず、別のサイトに移ってしまったことがあります。トップページに職種を書くだけで防げることなので、本当にもったいないです。
実績にスクリーンショットしか載っていない
画像だけが並んでいて、どんな案件でどんな役割を担ったのかがわからないケース。見た目のクオリティはわかるのですが、「この人に頼んだらどういうプロセスで仕事が進むのか」がイメージできず、問い合わせの決め手に欠けます。
同じような作品のクオリティでも、案件の背景や自分のアプローチを2〜3行で添えている人と、画像だけの人では、前者のほうに問い合わせたくなります。発注する側は「この人は仕事のことをちゃんと考えてくれそうだ」と感じるからです。
連絡方法がすぐに見つからない
「仕事を頼みたい」と思った瞬間に問い合わせ方法が見つからない——これはかなりの機会損失です。
ヘッダーやフッターに問い合わせページへのリンクを常に出しておくだけで解決できます。実績ページを見ている途中で「この人にお願いしたい」と思ったとき、すぐに問い合わせページに飛べる状態にしておくのが理想です。
最終更新が1年以上前になっている
掲載されている実績が古いと、「今も活動しているのかな？」と不安になります。
新しい実績がすぐに追加できない時期もあると思いますが、ブログで最近の活動を書いたり、トップページのお知らせ欄に「〇月〇日：新規案件のご相談を受付中です」と一行追加したりするだけで印象はだいぶ変わります。
スマホで見たときにレイアウトが崩れている
発注する側の担当者が、移動中や休憩中にスマホでポートフォリオをチェックすることは珍しくありません。
実績の画像が小さすぎて見えない、問い合わせフォームの入力欄が小さくてタップしづらい、テキストがはみ出している——こういった状態だと、それだけで候補から外れてしまうこともあります。公開する前に、一度スマホの実機で全ページを確認しておくことをおすすめします。
フリーランスのポートフォリオサイトは「営業ツール」として設計しよう
フリーランスのポートフォリオサイトは、作品を並べる場所ではなく、「この人に仕事を頼みたい」と思ってもらい、問い合わせにつなげるための営業ツールです。
ページ構成は、トップ・実績・プロフィール・サービス内容・問い合わせの5ページ。各ページに載せるべき情報を整理して、「この人に仕事を頼みたい」→「問い合わせ」までの導線を設計すること。それだけで、ポートフォリオサイトの役割は大きく変わります。
凝ったデザインよりも大切なのは、「何ができる人か」「頼んだらどうなるか」「どうやって連絡するか」が伝わること。この3つが揃っていれば、ポートフォリオサイトはフリーランスにとって心強い営業パートナーになってくれるはずです。
もし今のポートフォリオサイトが「作品集」のままになっているなら、この記事をきっかけに見直してみてください。載せる情報とページ構成を整えるだけで、サイトの印象はけっこう変わりますよ。