Web制作のポートフォリオの作り方は？受注につながる項目と手順

副業や独立でWeb制作を始め、単発の案件も少しずつ受けられるようになってきた頃ではないでしょうか。そんな段階で、そろそろポートフォリオを用意したいのに、手が止まってしまう方は多いはずです。

載せられる制作実績がまだ少なく、何を並べれば問い合わせにつながるのか、判断がつかないからです。

この記事は、採用選考の通過ではなくクライアントからの受注をゴールに据えています。実績が少なくてもそろえられる素材と、料金の決め方、公開後に見てもらう導線までを順に整理します。

作り方は、受注の的を決める、実績を3〜5点そろえる、課題・対応・結果で説明する、ツールで公開する、提案時に届ける、反応を見て直す、の6手順です。

そもそもWeb制作のポートフォリオとは何か、受注になぜ必要か

ポートフォリオは、任せて何が得られるかを伝える材料であり、会う前の発注判断を左右するため受注に欠かせません。

クライアントは発注の前に、この人に頼んで課題が解けるかを確かめたいと考えます。実績や対応できる範囲、連絡先がひと目でわかれば、問い合わせのハードルが下がります。

この記事では、制作物の全体を「ポートフォリオ」、それをWeb上に公開したものを「ポートフォリオサイト」と呼びます。受注をねらうなら、いつでも見てもらえるサイト型が基本になります。

ポートフォリオの解説には、就職や転職の選考を前提にしたものが少なくありません。就職や転職での選考通過を目的にする方は、別記事「就職・転職向けポートフォリオの作り方」のほうが合っています。

この記事は、個人で受注するWeb制作者に向けて、載せる項目や手順を組み直します。

デザイン中心かコーディング中心かで、見せ方の重心は変わります。職種ごとの整理は、別記事「ポートフォリオの作り方を職種別に解説」もあわせて参考にしてください。

Web制作のポートフォリオに載せるべき項目

受注を目的にするなら、実績だけでなく料金の目安と問い合わせ導線までをそろえることが大切です。

載せる項目は、相手が発注を判断するために必要な情報から決めます。中心になるのは制作実績ですが、それだけでは足りません。次の5つを基本にそろえると、過不足なく整理できます。

載せる項目	受注のために伝えること
プロフィール	何を得意とし、どんな相手の役に立てるか
制作実績	過去にどんな課題を、どう解決したか
対応できるスキルと範囲	どこからどこまで任せられるか
料金の目安	依頼の予算感が合うかどうか
問い合わせ導線	どこから連絡すればよいか

ページに置く順番は、上から〈肩書きと得意分野 → 制作実績 → 対応できる範囲 → 料金の目安 → 問い合わせ〉が基本です。訪問者が知りたい順に並べると、迷わず問い合わせまで進めます。

このうち料金の目安と問い合わせ導線は、受注をゴールにするなら欠かせません。目安でも料金があると、予算の合う相手から連絡が来やすくなります。問い合わせは連絡手段を一つに絞り、フォームかメールへ自然に誘導します。

自分の料金を相場から決める三角測量

自分の料金は、公開されている相場を下限と上限の二方向から見て、その間に置くと決められます。

一番迷うのが自分の料金です。ツールの料金と違い、決まった正解はありません。ただ、相場を二方向から見て自分を置けば、短時間で最初の一歩を決められます。

1. 個人の下限を見る。クラウドソーシングで同じ種類の募集を5〜10件開き、提示予算や条件を確認します。検索結果ページはここでは示しませんが、ログインすれば自分で確かめられます
2. プロの相場を見る。制作会社やフリーランスが公開している料金や費用相場を、数件確認して上限側の水準をつかみます
3. その間に自分を置く。幅の中で、作業時間に見合う位置に「◯円から」を決めます。実績が少ないうちは下限側に置き、実績が増えるごとに上げます

依頼のまとまりごとに、公開されている相場の目安をまとめました。制作会社の相場は上限側、フリーランスの相場は個人に近い水準の参考になります。いずれも民間の集計による参考値で、条件により大きく変わります（伝聞）。

依頼のまとまり	公開されている相場の目安（参考・伝聞）
1ページのLP	制作会社への発注では30万円以下が約37%（4割弱）。10万円未満のテンプレート型もある
数ページの店舗・紹介サイト	フリーランスで小規模（1〜5ページ）5万〜15万円
月額の保守	一般的な相場帯で月5,000円〜2万円

出典: Web幹事 LP制作の費用相場（マッチングサービスの見積もり集計。30万円以下が約37%）、お名前.com ホームページ作成費用の相場（フリーランスの料金レンジ）、Web幹事 ホームページ管理費の相場（保守費用の集計）。

いずれも民間の集計で、参考・伝聞として扱ってください。

実績が少ない段階では、この相場帯の下限側から始めます。たとえば数ページの店舗サイトなら、フリーランス相場の下限に近い5万円台から置き、実績が増えたら中心へ寄せます。

1ページのLPでも、単価には幅があります。テンプレートに流し込む型は作業が小さめですが、構成やコピー、申し込みまでの導線を設計する転換型は付加価値が高くなります。

相場表のLPは制作会社、店舗サイトはフリーランスと参照元が違う点にも注意します。安く置きすぎると単価が伸びないため、転換型は数ページの店舗サイトと同じ水準以上を目安にします。金額は要件で変わるので、あくまで目安です。

料金の見せ方は◯円からとパッケージ

料金は「◯円から」と下限で見せ、依頼のまとまりごとにパッケージにすると始めやすくなります。

決めた料金は、下限で見せると外れにくくなります。要件で幅が出るため、固定額より「◯円から」のほうが実態に合います。そのうえで、1ページ完結のLP、数ページの店舗サイト、月々の保守と、まとまりごとに「◯円から」を添えてパッケージにします。

金額を載せるか、個別の見積もりにするかは、案件の幅で決めます。要件の差が小さいなら金額を載せて予算の合う相手を先に振り分け、差が大きいなら「要件により個別にお見積もり」として過去の価格帯を範囲で示します。

実績が少ないうちは、安さで選ばれようとしすぎないことも大切です。相場を大きく下回る額を出すと、単価が上がらない単発の依頼ばかり集まりやすくなります。下限は、自分の作業時間に見合う額を守って決めます。

受注につながるポートフォリオの作り方の手順

受注から逆算すると、作る順番は「誰の何を受けたいかを決める」ことから始まります。

解説によって手順の数はまちまちで、なぜその順番なのかの基準までは示されないことも少なくありません。

そこでこの記事では、受注をゴールに置いた6つのステップに整理し、各ステップに完了の目安を添えました。何ができたら次へ進めるかがわかれば、途中で迷いにくくなります。

ステップ	やること	完了の目安
1 受注の的を決める	狙う案件の種類と相手を一つに絞る	誰のどんな仕事を受けたいかを一文で言える
2 実績をそろえる	載せる制作物を3〜5点選ぶ	公開できる制作物が最低3点そろっている
3 説明を書く	各実績を課題・対応・結果で書く	1件ごとに要素が埋まっている
4 公開する	ツールで公開し導線を整える	スマートフォンで表示と問い合わせが動く
5 届ける	提案時のURL添付やプロフィール常設で見てもらう	見てもらう導線を動かしている
6 直す	反応を見て順番と説明を見直す	直す箇所を毎月一つ決められる

この順番の軸は、最初に受注の的を決めることです。狙う相手が決まれば、載せる実績も説明の書き方も選べるようになります。逆に的が曖昧なまま作品を並べると、誰にも刺さらないポートフォリオになりがちです。

各ステップの中身は、このあとの項目で具体的に説明します。まずは全体の流れを、この6つで押さえてください。

制作実績がまだ少ない段階で何を載せるか

実績が少なくても、正当に用意できる素材から最初の3〜5点をそろえれば、受注用のポートフォリオは形になります。

受けた案件がまだ少ないときは、無理に数を装う必要はありません。学習や自主的な制作でも、見せ方しだいで力を伝えられます。次のような素材から、公開できるものを選びます。

用意できる素材	具体例	気をつける点
自主制作	架空の店舗を想定する、または実在店舗の改善案（spec）を作る	「自主制作」と明記し、相手の写真やロゴ、商標は複製しない
模写や再現	既存サイトの構成を学習目的で作り直す	模写である旨を書き、画像や商標の扱いに注意する
知人や自社の小規模制作	知人の店や自分の活動用サイトを作る	公開してよいかを相手に確認する
学習成果の再構成	講座や独学の課題を実務に近い形へ整える	教材そのままの転載は避ける

素材を用意するときに欠かせないのが、事実に反する実績を作らないことです。受けていない案件を、受けたかのように書くことはしません。偽りの実績は、問い合わせの後のやり取りで食い違いを生み、信頼を損ないます。

受けた案件を載せるときは、公開してよいかをクライアントに確認します。守秘義務がある場合は、社名を伏せる、一部だけ見せるといった配慮がいります。確認が取れないものは、無理に載せないほうが安全です。

単発の案件から実績の種を得たいなら、クラウドソーシングの活用も一つの方法です。サービスの選び方は、別記事「クラウドソーシングサイトの比較」で整理しています。

実績1件の書き方の記入例

自主制作でも、課題・対応・結果・担当範囲・使用ツールの5点を埋めれば、任せたときの働きが伝わります。

多くの人が止まるのが、実績1件をどう書くかです。「サイトを作成。HTMLとCSSを使用」の一文だけでは、何を任せられる人かが伝わりません。ここでは、地元にある実在の店舗で、情報が古いままのサイトを一つ選び、改善案を自主制作した場合を例にします。

記入項目	記入例（地元店舗の改善案・自主制作）
制作物	近所の飲食店サイトの改善案（自主制作・非公式の提案）
課題	スマートフォンで開くと文字が小さく、営業時間とメニューにたどり着けないと分析
対応	スマートフォン基準で作り直し、営業時間・地図・メニューを最上部に配置
結果	知りたい情報に迷わず届く導線を設計。実案件では問い合わせ数などの成果を記載
担当範囲	現状分析・構成・デザイン・コーディング
使用言語・ツール	HTML / CSS / Figma

左の項目をそのまま自分の実績に当てはめれば、1件分の説明ができあがります。自主制作は成果の数値を測れないため、結果の欄には狙いを書き、数値を作り出すことはしません。実際の案件を載せるときだけ、問い合わせ数などの成果を書き添えます。

この改善案は、狙う店舗への営業材料にもなります。作った提案をその店舗へ届ければ、そのまま直請けの入り口になります。

ただし相手の写真やロゴ、商標、文言はそのまま複製せず、ダミーや自作の素材で組むほうが安全です。送付が歓迎されるとは限らないので、相手の状況に配慮し、無断で公開せず提案として送ります。この送り方は、見てもらう導線の項目でも触れます。

ポートフォリオの制作ツールの選び方と比較

ツールは、費用・独自ドメイン・作り込みの自由度・運用のしやすさの4点で選ぶと、受注に効くものを見極めやすくなります。

ツールを選ぶ4つの基準

迷わないコツは、次の4点を上から順に確かめることです。

ツール選びで迷うのは、比べる軸が定まっていないからです。受注をゴールにするなら、この4点で見ると判断しやすくなります。

1. 無料で始められるか
2. 独自ドメインを使えるか
3. デザインや実装をどこまで自分で作り込めるか
4. ひとりで運用を続けられるか

特に独自ドメインは名刺や問い合わせ先としての信頼感に関わり、作り込みの自由度は表現力の見せどころになります。この2点を軸に、次の比較を見てください。

主なツールの料金と特徴を比べる

ここでは、無料枠や料金を公式ページで直接確認できた選択肢を比べます。

料金は2026年7月時点に各社の公式ページで確認した目安で、プランや支払い方法で変わります。

ツール	無料プランの上限	最安の有料月額	独自ドメイン	向いている人
自作コード＋無料ホスティング	各サービスの無料枠内（個人の作品集には十分）	0円（ホスティングは無料）	無料でも設定可（ドメイン取得費は別）	コードの実装力そのものを見せたい人
STUDIO	50ページ・容量5GB・STUDIOバナー表示	月590円〜（年払いMini）	有料プランで使える	表現を自分で作り込みたい人
Portfoliobox	5ページ・画像30点・専用サブドメイン	月1,372円〜（Personal）	有料プランで利用可（年払いは初年度のドメイン費が無料）	作品集を手早く並べたい人
WordPress	ソフトは無料でページ数の制限なし（公開にはサーバー実費）	サーバー実費で月数百円〜（目安）	実費で自由に使える	CMSでの構築まで見せたい人

「自作コード＋無料ホスティング」は、自分で書いたコードを無料で公開する方法です。使うのはGitHub Pages・Netlify・Vercelなどで、ホスティングは無料です。独自ドメインも設定でき、かかるのはドメインの取得費だけです。

作ったページそのものが実装力の証明になり、コードは公開リポジトリでも見せられます。

出典: STUDIO 料金プラン（無料プラン＝50ページ・5GB・STUDIOバナー表示／Mini 月590円〜）。Portfoliobox Pricing（無料＝画像30点・5ページ／Personal 月1,372円〜）。

WordPress.org 日本語（ソフトはオープンソースで無料）。無料ホスティングは GitHub Pages カスタムドメインの設定、Netlify Pricing、Vercel Pricing を参照しました。

無料枠と独自ドメインへの対応を各ページで確認しています。いずれも2026年7月時点です。

Wixやジンドゥーなどの選択肢もあります。ただし無料枠や料金は改定と地域差があり、本記事では公式ページで数値を確定できませんでした。契約前に、各社の公式料金ページで最新の金額をご確認ください。

まず無料でどれから始めるか

まず無料で公開して反応を見るなら、デザイン中心はSTUDIOの無料プラン、コーディング中心は自作コード＋無料ホスティングが出発点です。

どちらを選ぶかは、自分の売りで分けると迷いません。

デザイン中心の人はSTUDIOの無料プラン。 無料でも50ページ・5GBと作品集には十分で、日本語で操作でき、作り込みの自由度が高いためです。

無料プランではSTUDIOのバナーが表示されるので、本格的に見せる段階でMini 月590円〜の有料プランと独自ドメインへ切り替えます。

コーディング中心の人は自作コード＋無料ホスティング。 自分で書いたコードをGitHub PagesやNetlify、Vercelに無料で公開します。

費用は0で独自ドメインも設定でき、ページそのものが実装力の作品になります。コードは公開リポジトリでも見せられ、無料のまま実装力を正面から示せます。

ノーコードツールで作るなら実装力を別で見せる

ノーコードツールを選んだ場合でも、公開リポジトリのリンクを実績に添えれば実装力を補えます。

デザインを手早く作りたくて、ノーコードツールを選ぶこともあります。その場合でも、自分で書いたコードは公開リポジトリに置き、実績にリンクを添えます。制作実績の説明に使った言語や担当範囲を一言書けば、見た目はノーコードでも実装力は伝わります。

参考になるWeb制作ポートフォリオの事例と見せ方のパターン

公開ポートフォリオのギャラリーを見比べると、受注につながりやすい見せ方に共通した傾向が見えてきます。

公開中のポートフォリオを集めたギャラリーを見比べると、見せ方の傾向をつかめます。この記事では、下に挙げるMUUUUU.ORG・SANKOU!・I/O 3000のポートフォリオ一覧を実際に見て整理しました。

件数を数えた集計ではなく、公開ギャラリーで多く見られた作りを観察してまとめたものです。特定の個人を評価するものでも、自社調査でもありません。

参考: MUUUUU.ORG ポートフォリオ・プロフィールサイト、SANKOU! ポートフォリオサイト、I/O 3000 portfolio。いずれも公開サイトを集めたギャラリーです。

匿名の3つの型で作りを見る

型ごとにトップ・実績カード・問い合わせ導線の作りを見ると、自分に近い形を選べます。

実在の個人を評価するのは避け、ギャラリーで多く見られる作りを匿名の3つの型にまとめました。トップ、実績カード、問い合わせ導線の作りを、注釈付きで見ていきます。

• デザイン寄りの型 トップに「◯◯が得意なデザイナー」と一文を置きます。実績カードは大きめの画像に、担当範囲と制作意図を短く添えます。問い合わせは上部メニューと最下部の2か所に置いています。
• コーダー寄りの型 トップに対応言語と「実装まで一人で完結」の一文を置きます。実績カードに使用言語と公開リポジトリのリンクを添えます。ページ自体を自作コードで公開し、作りそのものを作品にしています。
• 実績が少ない人の型 自主制作や店舗の改善案を3点だけ掲載します。各カードに「自主制作」と明記し、課題と対応を短く添えます。数より、任せたら何をするかが伝わる作りです。

多くのポートフォリオに共通する見せ方

共通するのは、トップで言い切ること、実績に担当範囲を添えること、問い合わせを迷わせないことの三つです。

型は違っても、ギャラリーで目立つポートフォリオには共通点があります。

• トップで言い切る ファーストビューに、誰の何を解決できるかを一文で置きます。目安は20〜30字で、開いて数秒で得意分野が伝わるかどうかが分かれ目です。
• 実績に担当範囲とツールを添える 画像だけでは工夫が伝わりません。各カードに担当範囲と使用ツールを1行添えると、任せたときの姿が見えます。
• 問い合わせを迷わせない 入り口は上部メニューと最下部の2か所に置き、連絡手段はフォームかメールのどちらか1系統に絞ります。迷わせる導線は離脱につながります。

近ごろは、制作にAIツールをどう取り入れたかを書き添える例も見かけるようになりました。

単発の仕事から継続と直請けの案件につなげる見せ方

同じ実績でも、掲載順とメニューを狙う案件に寄せるだけで、継続や直請けの相手に届きやすくなります。

クラウドソーシングの単発案件は始めやすい反面、単価が上がりにくく、次につながりにくいという声もあります。そこで、これから受けたい案件の側へポートフォリオを寄せて調整します。継続や直請け、単価の高い相手からの問い合わせを引き寄せやすくなります。

高単価と継続に効く調整	やること
掲載順を寄せる	これから受けたい種類の実績を、いちばん上に置く
保守と継続をメニュー化	更新代行や月々の保守を、提供メニューとして明記する
指名につながるプロフィール	得意分野・対応範囲・人となりを具体的に書く

保守や更新までメニューに並べておくと、作って終わりではなく、長く任せられる相手だと伝わります。月額の保守プランを一つ用意しておくと、単発から継続へ話が移りやすくなります。

直請けでは、間に会社を挟まない分、依頼者はあなた自身を見て決めます。得意な分野と対応できる範囲、連絡の取りやすさを具体的に書くと、安心して指名しやすくなります。

ポートフォリオを見てもらう導線を作る

ポートフォリオは興味を受注に変える受け皿で、見てもらう導線は別に用意する必要があります。

ここまでで受け皿は整います。ただ、公開しただけでは訪問者は自然には増えません。作り込みと同じくらい、見てもらう導線を用意できるかどうかが、受注を分けます。

この手順どおり作っても、誰の目にも触れなければ問い合わせは生まれません。次の3つを習慣にすると、無理なく人目に届けられます。

1. 提案のたびにURLを添える。クラウドソーシングで応募や提案をするとき、毎回ポートフォリオのURLを本文に入れます。文章だけの提案より、作ったものを見せたほうが選ばれやすくなります
2. プロフィールとSNSに常設する。各サービスのプロフィール欄や、XやInstagramの自己紹介に、リンクを固定で置きます。名前を見た相手が、すぐ作品へ進めます
3. 気になる会社へ直接送る。受けたい会社を選び、その会社向けの改善案（specリデザイン）を作って提案として送ります。実績の項目で作った改善案が、そのまま営業材料になります

3つ目は、無断で公開せず提案として届けるのが前提です。相手の素材を複製せず、送付が歓迎されない場合もある点にも配慮します。

導線を動かして初めて、次の見直しに使える反応が生まれます。まず反応を集めてから、直す場所を見つけていきます。

公開したポートフォリオを受注につなげる見直し方

公開して終わりにせず、まず見られているかを確かめ、反応を見て直すことで受注につながります。

公開しても問い合わせが来ないときは、原因を一つずつ切り分けます。まず確かめるのは、そもそも見られているかどうかです。そのうえで、導線・実績の説明・レスポンシブ対応・並べる順を点検します。

こんなとき	見直す場所
そもそも見られているか分からない	無料の解析でアクセス数と流入元を先に確認。少なければ前章の導線を増やす
問い合わせが来ない	問い合わせ先が分かりやすい位置にあるか
実績は見られているのに連絡がない	各実績の説明が、何ができるかを伝えているか
スマートフォンで読みにくい	レスポンシブ対応と文字の大きさ
見てほしい実績が埋もれる	見てほしい実績が上に来ているか（寄せ方は前章のとおり）

これらは、費用をかけずに確かめられます。表示崩れやリンク切れは、自分のスマートフォンと別のブラウザで開くだけでも気づけます。アクセス数やどのページで離脱しているかは、無料の解析ツールを入れれば見えてきます。

大切なのは、作る・出す・直すをくり返すことです。一度で仕上げようとせず、小さく公開して反応を見て、説明や見せ方を整えていきます。

まとめ

まずは3〜5点で小さく公開し、見てもらう導線を動かして反応を見て直すことが、受注への近道になります。

ポートフォリオは、一度で完成させるものではありません。ゴールは、選考の通過ではなく受注です。

今日この時間で、載せる実績を1点選ぶところから始めてみてください。まずは1本だけでも無料で公開し、次の提案からURLを添えれば、受注へ向けた最初の一歩になります。

よくある質問

就職・転職向けに作ったポートフォリオを、そのまま受注用に使えますか？

そのままでも見せられますが、受注用には少し組み替えると効果的です。選考向けは経歴やスキルの網羅が中心になりがちなので、受注用では料金の目安と問い合わせ導線を加え、これから受けたい種類の実績を上のほうへ並べ替えます。誰のどんな課題を解決できるかを先頭で言い切ると、発注を検討する相手に届きやすくなります。

顔写真や本名は載せたほうがよいですか？

本名や顔写真は信頼につながりやすい一方、必須ではありません。活動名やアイコンでも、実績と連絡先がはっきりしていれば問い合わせは受けられます。大切なのは、相手が安心して連絡できることです。直請けを狙う場合は、人となりが伝わる自己紹介を添えると指名されやすくなります。公開したくない情報は無理に載せなくて構いません。

独自ドメインは最初から用意すべきですか？

最初は無料プランのサブドメインや無料ホスティングで公開し、反応を見てから独自ドメインへ移して差し支えありません。独自ドメインは名刺や問い合わせ先としての信頼感に関わるため、本格的に受注を狙う段階でそろえると費用を抑えられます。まずは公開して見てもらうことを優先し、続けられそうだと判断してから用意する流れがおすすめです。

制作にAIツールを使ったことは、書いてもよいですか？

差し支えありません。近ごろは制作にAIをどう取り入れたかを書き添える例も増えています。どの工程でどう使い、最終的に自分がどこを判断・調整したかを一言添えると、任せたときの働き方が伝わります。ツール名を並べるだけより、成果物にどう活きたかまで書くと伝わりやすくなります。

複数の分野をまとめて載せてもよいですか、それとも絞るべきですか？

受注をねらうなら、まず狙う分野を一つに絞って見せるほうが伝わります。あれもこれもと並べると、結局何が得意な人かがぼやけ、問い合わせにつながりにくくなります。対応できる幅を示したいときは、主軸の実績を上に置き、その他は補足として控えめに添えます。相手が「この人はこれが得意」とすぐ分かる形を優先します。

参考文献・出典

本文で参照した情報は次のとおりです。

• STUDIO 料金プラン
• Portfoliobox Pricing and Plans
• WordPress.org 日本語
• GitHub Pages カスタムドメインの設定
• Netlify Pricing and Plans
• Vercel Pricing
• Web幹事 LP制作の費用相場
• お名前.com ホームページ作成費用の相場
• Web幹事 ホームページ管理費の相場
• MUUUUU.ORG ポートフォリオ・プロフィールサイト
• SANKOU! ポートフォリオサイト
• I/O 3000 portfolio

最終更新: 2026-07-12。引用した料金データは主に2026年7月時点のものです。STUDIO・Portfoliobox・WordPressは各公式ページで確認しています。

無料ホスティング（GitHub Pages・Netlify・Vercel）も同様に公式ページで確認しました。制作の相場（LP・サイト・保守）は民間の集計による参考値で、Web幹事とお名前.comの各ページを参照しました。

その他の各社料金は改定や地域差があるため、各公式ページの最新表示をご確認ください。

この記事を読んだ方におすすめ