ホームページ制作のポートフォリオの作り方｜見る人が知りたいこと

2026年6月2日

長谷川奈津

この記事のポイント

✓ホームページ制作のポートフォリオを作るとき
✓発注側が本当に確かめているのは作品の見た目ではありません
✓実績が少ないときの埋め方まで

ホームページ制作のポートフォリオを作ろうとして、手が止まる人はとても多いです。作った画面のスクリーンショットを並べてみたものの、これで何が伝わるのか分からない。そもそも、守秘義務のある案件を載せていいのかも判断がつかない。この記事では、ポートフォリオを「作品集」ではなく「発注側が判断するための資料」としてとらえ直し、掲載可否の仕分けから、1件ごとに書く項目、ツールの選び方、実績が少ないときの埋め方までを手順として整理します。これ、知らないまま作ってしまう人が本当に多いところです。

結論を先に書きます。見る人が知りたいのは、あなたが作った画面の美しさではありません。「この人に任せたとき、自分の案件がどう進み、どこでつまずかずに終わるか」です。ポートフォリオはその予測材料であり、作品の写真集ではありません。この一点を軸に据えるだけで、載せるものと載せないものの判断が驚くほど楽になります。

ホームページ制作のポートフォリオは作品集ではなく判断材料である

ホームページ制作の分野は、成果物が公開URLとして誰でも見られる状態になるという特徴があります。イラストや動画と違い、完成物そのものが世に出ている。だからこそ「URLを並べれば十分」と考えてしまいがちですが、これが最初のつまずきです。公開されているサイトは、あなた以外の人の仕事の集合体でもあります。ディレクターがいて、ライターがいて、写真を撮った人がいて、クライアント側の担当者の意見も反映されている。そのURLを何の説明もなく並べると、見る側は「どこまでがこの人の仕事か」を一切判断できません。

発注側の立場に立つと分かりやすくなります。ホームページ制作を外注する人は、たいてい社内にWebの専門家がいません。予算を通す立場の人に説明する責任を負っていて、失敗すれば自分の評価に跳ね返ります。この人が最も恐れているのは、デザインがダサいことではなく、途中で連絡が取れなくなること、想定していない追加費用が出ること、公開後に誰も直せない状態になることです。ポートフォリオは、この恐れを一つずつ消していくための資料として設計する必要があります。

見る人が最初に確かめていること

複数のディレクターや発注担当者の話を突き合わせると、閲覧の順番にはっきりした傾向があります。まず全体をざっと流し見して、自分の案件に似た事例があるかを探す。似た事例が見つかったら、そのページを開いて担当範囲を読む。担当範囲が明確なら、次に制作の進め方と期間を見る。ここまで通過して初めて、デザインの細部やコードの品質に目が向きます。

つまり、トップページの一覧で「自分の案件に似ているか」が判断できなければ、その先は読まれません。飲食店のサイトを作りたい人が、抽象的なアート作品のようなキービジュアルばかりが並ぶ一覧を見ても、自分ごとにできない。並び順と分類は、見た目の格好よさよりも「相手が自分を探せるか」で決めます。最初の10秒で自分に関係があると思わせられなければ、その後の情報は届きません。

もう一点、意外に見られているのが「いつの仕事か」です。制作年が書かれていないポートフォリオは、それだけで判断を鈍らせます。5年前の技術で作られたサイトが最新作として並んでいるのか、直近の仕事なのかで、評価は大きく変わります。年を書くのは自分の首を絞めるようで気が進まないという声もありますが、書かないことによる不信のほうがはるかに大きい。古い事例は古いと明示したうえで、当時の制約を書けば、むしろ誠実さとして受け取られます。

発注側が抱えるリスクと、それを打ち消す情報

発注側のリスクは大きく分けて4つあります。要望が伝わらないリスク、期間が延びるリスク、公開後に運用できないリスク、そして権利や契約でもめるリスクです。ポートフォリオの各項目は、このどれかを打ち消すために存在すると考えると、書くべきことが自然に決まります。

要望が伝わらないリスクには、依頼の背景と、それをどう解釈して設計に落としたかの記述が効きます。期間が延びるリスクには、実際にかかった期間と、その内訳が効きます。公開後に運用できないリスクには、更新をどうする設計にしたか、クライアント側が自分で触れる範囲をどこまで作ったかの記述が効きます。権利のリスクには、掲載許可を取っている旨の明示と、使った素材の出所の扱いが効きます。この対応関係を頭に入れておくと、事例ページに何を書くか迷わなくなります。

掲載する案件を選ぶ手順

作ったサイトを片っ端から載せるのは、ほぼ確実に失敗します。数が多いほど一件あたりの印象は薄まり、玉石混交だと最も弱い一件が全体の評価になります。選別には順番があります。

手順1 公開できる案件と公開できない案件を仕分ける

最初にやるのは、掲載可否の仕分けです。ここを飛ばして作り始めると、後から全部やり直すことになります。判断の基準は3つです。

第一に、契約書や発注書に守秘義務の条項があるかどうか。制作物そのものが公開されていても、「誰が作ったか」を明かすことは別の話です。特に、制作会社の下請けとして入った案件は要注意です。元請けと最終クライアントの関係を壊す可能性があるため、実名掲載は原則として元請けの許可がいります。

第二に、成果物が今も当時のまま公開されているかどうか。公開当時から大幅にリニューアルされている、あるいは閉鎖されている場合、URLを載せても意味がないどころか、リンク切れとして印象を悪くします。この場合はスクリーンショットと説明で構成し、現在は別のサイトに切り替わっている旨を書き添えます。

第三に、自分の担当範囲を正確に説明できるかどうか。うろ覚えの案件は載せない。面談で突っ込まれて答えられないと、他の事例の信頼まで一緒に落ちます。

判断に迷ったら、クライアントに一言確認するのが最短です。「制作実績として掲載してよいか」を聞くだけで、多くの場合は快諾されます。※契約内容によっては掲載自体が債務不履行になるケースもあるため、条項が読み取りにくい場合は弁護士に相談してください。

手順2 3つの型に分けて並べる

掲載可能な案件が固まったら、分類します。ホームページ制作の場合、次の3つに分けると相手が探しやすくなります。

新規制作の型は、ゼロから立ち上げた案件です。情報設計から関わったことが伝わるため、上流から任せたい相手に効きます。リニューアルの型は、既存サイトの作り替えです。今あるものを直したい発注者は圧倒的に多く、この型が薄いと機会を逃します。部分改修と運用の型は、1ページだけの追加、フォームの設置、表示速度の改善などです。地味に見えますが、継続的な仕事につながりやすいのはこの型です。

3つの型それぞれに2件以上あると、対応の幅が伝わります。逆に、1つの型に10件を詰め込むより、3つの型に均等に置くほうが受注の間口は広がります。

手順3 1件あたりの掲載密度を決める

全部の事例を同じ密度で書く必要はありません。詳しく書く「主力事例」を3件から5件決め、残りは一覧に画像と一行の説明だけを置きます。主力事例には後述する項目をすべて書き、それ以外は存在を示すにとどめる。この濃淡があると、見る側は疲れずに読み進められます。

主力事例に選ぶのは、次に取りたい仕事に近いものです。今後は採用サイトを増やしたいなら、採用サイトの事例を主力にする。過去に一番大きかった案件でも、今後やりたくない領域なら主力から外します。ポートフォリオは過去の記録ではなく、これから何を受けたいかの意思表示です。

1件の事例ページに書く項目

主力事例のページに書く項目を具体的に挙げます。ここが最も差がつくところです。

担当範囲を先に書く

冒頭に、自分が担当した工程を明記します。「要件整理、ワイヤーフレーム、デザイン、実装、公開作業」のように工程名で書き、担当していない工程は「ライティングはクライアント支給」「写真は別のカメラマン」と明示します。この一行があるかないかで、事例の信頼度はまるで違います。担当していないものまで自分の手柄に見せる書き方は、面談の場で必ず崩れます。

チームで動いた案件なら、チーム規模と自分の役割も書きます。4人のチームでフロントエンド実装を担当した、という書き方は、決して見劣りしません。むしろ、チームでの分業経験があることは、規模の大きい案件を任せる側にとって安心材料です。

制作前の状態と、依頼の背景

「なぜこのサイトを作ることになったのか」を書きます。問い合わせが電話しかなく取りこぼしていた、スマートフォンで表示が崩れていた、採用の応募が集まらない、といった依頼側の事情です。ここを書くと、次に書く設計判断が「なぜそうしたか」として読めるようになります。背景のない事例は、単なる完成品の写真になります。

リニューアル案件なら、変更前のスクリーンショットを載せるのが有効です。※ただし、変更前の画面も著作物であり、クライアントの許可なく公開すると問題になる場合があります。掲載許可を取るときに、変更前の画面も含めて確認しておくのが安全です。

判断した理由を残す

デザインや構成について、迷った点と決めた理由を書きます。トップページの導線を2つに絞った理由、フォームの項目を減らした理由、ページ数をあえて増やさなかった理由。この記述があると、見る側は「この人は理由をもって決められる」と判断します。逆に理由が書かれていないと、たまたま良いものができただけの可能性を排除できません。

法務の相談を受けていて感じるのは、トラブルになる案件ほど「なぜそうしたか」の記録が残っていないことです。制作物の仕様をめぐって発注者と受注者の主張が食い違ったとき、判断の根拠を書いた資料がある側が圧倒的に強い。ポートフォリオに理由を書く習慣は、そのまま自分を守る記録の習慣につながります。

使った技術と運用の条件

使用したCMS、フレームワーク、ホスティング環境を書きます。専門用語が並ぶことを嫌がる人もいますが、発注側の担当者が社内のシステム部門に確認するとき、この情報がないと話が進みません。同時に、専門用語のあとに一行で「クライアント側でお知らせの追加ができる構成」のように、非技術者向けの言い換えを添えます。両方あるのが理想です。

運用の条件も重要です。公開後の更新を誰がやるのか、更新が発生する頻度、保守の契約があるかどうか。ホームページ制作の依頼者が最も不安に思うのは公開後だと言っても大げさではありません。ここに答えがある事例は強い。

期間と進め方

着手から公開までの期間と、その内訳を書きます。2か月かかった案件なら、要件整理に2週間、デザインに3週間、実装に3週間、確認と修正に2週間、という粒度です。金額を書かなくても、期間の内訳があれば規模感は十分に伝わります。

進め方には、打ち合わせの回数、確認のタイミング、修正を何回まで含めたかを書きます。この情報は、発注側が自分たちの負担を見積もるために使います。「先方の確認は3回」と書いてあれば、社内で3回レビューの場を作る準備ができます。

ポートフォリオを作るツールの選び方

ホームページ制作者のポートフォリオには、皮肉な難しさがあります。自分の技術力を示す場でありながら、そこに時間をかけすぎると本業の案件が止まる。ツール選びは、この綱引きの中で決めます。

ノーコードのサービスで作る場合

Webサイトを作る技術がある人でも、ポートフォリオはノーコードのサービスで作るという選択は十分に合理的です。理由は更新の手軽さにあります。案件が終わるたびに事例を追加する必要があり、その都度コードを書いてデプロイする手間があると、更新が止まります。更新が止まったポートフォリオは、最も評価を下げる要素の一つです。

ノーコードで作るメリットは、レスポンシブ対応や表示速度の最適化が最初から入っていること、公開までが速いこと、独自ドメインの設定が簡単なことです。デメリットは、細かい表現に制約が出ること、そしてサービス側のデザインの癖が出ることです。同じサービスで作られたポートフォリオは見た目が似るため、他と差をつけたいなら中身の記述で勝負することになります。

ポートフォリオサイト全体のデザインで悩む人は多く、それは制作者本人でも同じです。

ポートフォリオサイトに載せたい作品は決まっても、肝心のポートフォリオサイト全体のデザインが思いつかない、なんてご経験もあるのではないでしょうか。出典: mynavi-creator.jp

自分の作品を客観視するのは難しく、他人の案件なら即座に決められる判断が、自分のこととなると止まる。これはよくあることです。決められないなら、装飾を削って情報の並びだけで組む。読みやすさは、それ自体が制作者としての説得力になります。

自分で実装する場合

自作するメリットは、技術力そのものが伝わることです。表示速度、アクセシビリティ対応、構造化データの実装。これらは事例ページに書かなくても、ポートフォリオ自体を検証すれば分かります。技術で選ばれたい人にとっては、自作が最も雄弁です。

一方で、自作には落とし穴があります。ポートフォリオ自体の作り込みに数か月かけてしまい、その間に案件を取る活動が止まる。あるいは凝った動きを入れすぎて、スマートフォンで重くなる。見る側の多くは移動中にスマートフォンで開きます。派手なアニメーションより、通信環境が悪くても数秒で表示されることのほうが評価されます。

自作する場合も、事例の追加だけは楽にできる構成にしておきます。マークダウンのファイルを置けば記事が増える、といった仕組みにしておけば、更新の負担は大きく下がります。制作の仕事の幅を広げていきたいなら、アプリケーション開発のお仕事で扱われる開発案件の要件を眺めておくと、ポートフォリオに何を書けば開発寄りの案件に届くかが見えてきます。

無料で始めるときの注意点

無料のプランでポートフォリオを公開すること自体は問題ありません。ただし、注意点が3つあります。

1つ目は独自ドメインです。無料プランではサービス名の入ったサブドメインになることが多く、名刺や提案書に書いたときの印象が変わります。ドメイン代は年間で見れば小さな支出です。事業として続けるつもりなら、独自ドメインは早い段階で押さえておく価値があります。

2つ目はサービス側の広告表示です。無料プランではフッターやページ端にサービスの宣伝が入ることがあり、これが発注側に「予算をかけていない」という印象を与える場合があります。BtoBの取引先を狙うなら、この点は無視できません。

3つ目はサービス終了のリスクです。無料のサービスは予告して終了することがあります。事例の文章と画像は必ず手元にも保管し、いつでも別の場所に移せる状態にしておきます。ポートフォリオのデータが特定のサービスの中にしか存在しない状態は避けます。

掲載できる実績が少ないときの埋め方

実務経験が少ない段階でポートフォリオを作らなければならない状況は珍しくありません。この場合の作り方には、はっきりした型があります。

未経験や実績が少ない段階では、業務案件以外の制作物を使うことがすすめられています。

実務未経験の場合や実績が少ない場合でも、趣味の作品を上手に活かせば、魅力的なポートフォリオを作ることができます。大切なのは作品数だけにとらわれず、自身のスキルをアピールできる作品を厳選して掲載し、制作意図までしっかり伝えること。出典: shelikes.jp

ここで重要なのは「制作意図まで伝える」の部分です。業務案件でない制作物は、それだけでは評価の対象になりにくい。しかし、想定した依頼主、想定した課題、それに対する設計判断が書かれていれば、実務案件と同じ読み方ができるようになります。

想定案件のつくり方と、必ず書く注記

架空の依頼を設定して制作するとき、設定を曖昧にすると評価されません。業種、規模、既存サイトの有無、想定する閲覧者、達成したい行動。ここまで決めてから作ります。実在する店舗や企業をモデルにするのは避けます。無断で他社の名称やロゴを使うと、商標や著作権の問題が生じます。※実在の企業名を使った制作物を公開する場合は、必ず事前に許可を得てください。

そして、必ず「これは架空の依頼を想定した自主制作です」と明記します。この一行を書かないと、実案件と誤認させたことになり、後で発覚したときの信頼の損害が大きい。逆に、明記したうえで設計の理由が丁寧に書かれていれば、実案件がなくても評価されます。書けることを正直に書くのが、結果として最も強い。

既存サイトの改善提案という型

もう一つの型が、実在するサイトを題材にした改善提案です。ただしこれには条件があります。実在のサイトを「ダメな例」として名指しで批判する形は避けます。相手の権利を侵害する可能性があるうえ、見る側にも攻撃的な印象を与えます。

安全な形は、業界全体の傾向を分析し、そこから導いた設計方針を架空のサイトに適用する形です。たとえば地域の飲食店のサイトを20件調べ、共通する課題を整理し、それを解決する構成を自分で作る。調査のプロセスそのものが、あなたの仕事の進め方を示します。ホームページ制作の依頼者は、調べてから作る人を求めています。

小さな案件から実案件に変えていく

自主制作をいくつか作ったら、次は実際の依頼に変えていきます。個人事業主や小規模な団体は、Webサイトの必要性を感じつつ手をつけられていないことが多い。知り合いの範囲で声をかける、あるいは在宅の案件を扱うサイトで小規模な制作案件を探す。実案件が1件でも入ると、ポートフォリオの説得力は段違いに変わります。

案件の探し方を広げるなら、周辺分野の仕事を知っておくのも有効です。マーケティングやセキュリティの知識が求められる案件の内容はAI・マーケティング・セキュリティのお仕事に整理されていて、ホームページ制作に何を足せば単発で終わらない関係になるかの手がかりになります。生成AIの導入支援まで守備範囲を広げたい場合はAIコンサル・業務活用支援のお仕事で扱われる支援内容が参考になります。

よくある失敗と、その直し方

相談の場でよく見る失敗を挙げます。どれも直せます。

失敗1 作品が多すぎて主語が消える

「これまで作ったもの全部」を並べたポートフォリオは、見る側にとって拷問です。30件のサムネイルが並んでいると、どれが自信作か分かりません。人は多すぎる選択肢を前にすると判断を放棄します。主力を絞り、残りは一覧にとどめる。この一手で読了率は明確に上がります。

失敗2 スクリーンショットだけを並べる

画面写真だけが並び、説明が一行もないパターンです。これは作品集としては成立しても、判断材料としては機能しません。前述の項目のうち、最低でも担当範囲、依頼の背景、期間の3つは書きます。文章を書くのが苦手なら、箇条書きで構いません。書式より情報があることが優先です。

文章の書き方そのものに自信がない場合、ビジネス文書の基本を体系的に確認しておくと安定します。ビジネス文書検定で問われる構成の考え方は、事例説明や提案書にもそのまま使えます。

失敗3 更新が止まっている

最終更新が数年前のポートフォリオは、現在活動しているかどうかを疑わせます。案件が終わるたびに追加するのが理想ですが、現実には難しい。せめて3か月に1回、追加または更新の日を決めておきます。追加する事例がない月は、既存事例の記述を厚くする。それでも更新日は動きます。

失敗4 契約上出せないものを出してしまう

これは失敗というより事故です。守秘義務のある案件を掲載してしまい、クライアントから削除を求められる。悪くすると損害賠償の話になります。掲載前のチェックリストとして、契約書の守秘条項の確認、クライアントへの掲載許可の取得、支給素材の再利用可否の確認、この3点を必ず通します。※過去の契約書が手元にない場合は、掲載を保留し、まず契約書の写しを取り寄せてください。

失敗5 連絡先が見つからない

意外に多い失敗です。事例は充実しているのに、問い合わせる方法が分からない。ページの最下部に小さく書いてあるだけ、あるいはSNSのリンクだけ、という状態では、担当者は面倒がって離脱します。問い合わせフォームを分かりやすい位置に置き、返信までの目安日数を書き添えます。返信の速さは、それだけで差別化になります。

相手ごとに見せ方を変える

ポートフォリオを一つ作って終わりにする必要はありません。見せる相手によって、渡すものを変えるのが実務的です。

制作会社にパートナーとして登録するときは、技術と工程の情報を厚くします。どの工程を巻き取れるか、どのCMSを扱えるか、チームでの動き方はどうか。相手はディレクションの手間を減らしたいので、指示なしで動ける範囲が広いほど評価されます。

事業会社に直接提案するときは、技術用語を減らし、課題と結果の記述を厚くします。相手は社内で説明する必要があるため、専門用語のままだと使えません。「問い合わせフォームの項目を減らした」ではなく、「入力の手間を減らして、途中でやめてしまう人を減らす設計にした」と言い換えます。

面談の場では、Webサイト版とは別に、1枚の資料を用意しておくと有利です。画面を共有しながら話すとき、スクロールの多いWebページより、要点をまとめた1枚のほうが議論しやすい。この差は実際の商談で効きます。

権利と守秘のルールを最初に整えておく

ホームページ制作は、成果物の権利関係が入り組みやすい仕事です。ポートフォリオを作る前に、契約段階で整えておくべきことがあります。

まず、実績としての掲載可否を契約書に書いておくこと。制作の契約を結ぶとき、「受注者は本件成果物を実績として公表できる」という一文を入れておけば、あとで許可を取り直す手間が消えます。多くの発注者はこの条項に難色を示しません。難色を示す場合は、業種と規模だけを匿名で書く形にする合意を取ります。

次に、支給素材の扱いです。クライアントから受け取った写真やロゴは、そのクライアントのために使う許諾しかない場合が多い。ポートフォリオに載せることが二次利用にあたるかは、素材の出所によって変わります。ストックフォトを使っている場合、ライセンスの範囲を確認します。

そして、フリーランス保護新法の視点も無関係ではありません。この法律は発注事業者に対し、取引条件を書面などで明示する義務を課しています。つまり、何をいくらで、いつまでに、どういう条件で作るのかが最初に文書化される。この書面は、後からポートフォリオを作るときの一次資料としても役立ちます。制度の詳細はe-Govで法令の本文を確認できます。法律はあなたの味方です。

契約や取引条件の考え方は、独立の段階によっても変わります。会社員としての経験を土台に独立する場合の準備は定年後のフリーランス独立｜退職金を活かした起業プランと注意点で整理されていて、開業直後の契約書の扱いを考える手がかりになります。

運営者の視点から見えるポートフォリオの共通点

フリーランスと在宅ワークの市場を20年運営してきた立場から見ると、継続的に依頼を受け続ける制作者のポートフォリオには共通点があります。派手さではありません。見た人が次にどう行動すればいいかが書いてある、という点です。相談したいときに何を用意すればいいのか、どのくらいの期間を見ておけばいいのか、どこまで自分たちでやる必要があるのか。この3つが読み取れるポートフォリオは、問い合わせの質そのものが変わります。

もう一つ、運営者として見てきた限りでは、長く続く人は単発の制作物ではなく「この人に任せると楽だ」という状態づくりに時間を使っています。ポートフォリオはその宣言の場です。中間マージンが乗らない直接の取引では、同じ予算で依頼者はより多くを頼めて、受け手の手取りは厚くなる。手数料0%で成立する関係が続くのは、金額の話だけが理由ではありません。仲介が入らないぶん、要望が直接届き、判断が速くなる。その速さを支えるのが、事前に判断材料を出してあるポートフォリオです。

逆に、案件が続かない人のポートフォリオは、見終わったあとに何をすればいいのか分からない状態で終わります。作品は立派なのに問い合わせが来ない、という相談の多くは、この一点で説明がつきます。

掲載情報から読み取れる、求められている情報の傾向

在宅と業務委託の案件情報を横断して見ると、ホームページ制作の依頼には一定の傾向があります。募集の文面で最も頻繁に条件として挙がるのは、デザインの技術そのものではなく、公開後の運用をどう設計できるかという点です。作って終わりの依頼より、更新の仕組みまで含めて任せたいという依頼のほうが、継続的に発生しています。

この傾向は、職種ごとの働き方の情報とも整合します。開発側の年収や単価の考え方を整理したソフトウェア作成者の年収・単価相場を見ると、実装ができることよりも、要件を整理して継続的に関われることが評価軸になっていることが読み取れます。文章での説明力が評価される職種の傾向は著述家，記者，編集者の年収・単価相場にも表れていて、制作者にとっても事例の説明を書けることが実務能力の一部であることを裏づけています。

デザイン面での専門性を高める方向に進むなら、UI/UXデザインのフリーランスになるには？必要スキルと案件相場で扱われるスキルの組み立て方が、ポートフォリオに載せる項目の優先順位を決める助けになります。

最後に、ポートフォリオは一度作って完成するものではありません。案件を受けるたびに、面談で聞かれたことを思い出し、その答えを書き足していく。半年も続ければ、聞かれる前に答えが書いてある資料になります。そこまで来ると、問い合わせの段階で条件がほぼ揃い、無駄な打ち合わせが減ります。この状態を目指すのが、ホームページ制作のポートフォリオの実務的なゴールです。