LP制作・コーディングの実績の見せ方｜出せない仕事をどう伝えるか

LP制作・コーディングの実績の見せ方でつまずく人のほとんどは、「見せ方が下手」なのではなく「見せられる素材がない」状態で悩んでいます。守秘義務で URL を出せない、広告用の非公開ページだった、制作会社の下請けで自分の名前が出ない。この記事では、そういう出せない仕事をどう言語化して伝えるか、掲載許可をどの段階でどう取りにいくか、そして実績ページに何をどの順番で並べるかを、手順として具体的に書きます。結論を先に言うと、実績とは「作った画面」ではなく「あなたが下した判断の履歴」です。画面が出せなくても判断は出せます。

実績が出せない理由を先に3つに仕分けする

「実績が出せない」とひとくくりにして止まっている人が多いのですが、原因を分けると対処法がまったく違います。まずここを仕分けないと、出せるはずのものまで自分で封印してしまいます。

契約で禁止されているケース

NDA（エヌディーエー）を結んでいて、成果物の公開そのものが禁じられている場合です。この場合、URL もスクリーンショットもデザインカンプも出せません。ただし注意してほしいのは、NDA が禁じているのは通常「業務上知り得た秘密情報の開示」であって、「あなたがその会社の仕事をした事実」まで一律に禁じているとは限らない点です。契約書の秘密保持条項と、成果物の権利帰属条項を実際に開いて読み直してください。「甲の書面による事前承諾なく公表してはならない」と書いてあるなら、承諾を取れば出せます。禁止ではなく手続きの問題です。

権利は相手にあるが、明文の禁止はないケース

実務ではこれが一番多い形です。制作会社経由の下請けで、契約書には著作権の譲渡だけが書かれていて、実績公開について何も触れていない。この状態で黙って載せるのは危険ですが、諦めるのも早すぎます。書いていないということは、交渉の余地があるということです。あとで触れる依頼文を送れば、相当な割合で許可が下ります。私が関わったアパレル系の案件では、担当者が「そもそも考えたこともなかった」と言って、社内確認だけで通ったことが何度もありました。

そもそも公開状態が消えているケース

広告の出稿が終わって LP が非公開になった、キャンペーンが終了してドメインごと消えた、リニューアルされて自分の作ったものが残っていない。LP制作では日常的に起きます。これは契約の問題ではなく物理の問題なので、対処は「作った時点で記録を残す」しかありません。納品直後にフルページのキャプチャ、実装したソースの控え、コンソールの検証結果を自分用に保存しておくこと。これを習慣にしているかどうかで、3年後の実績の厚みがまったく変わります。

判断の基準

出す前に、この3つのどれに当たるかを必ず確認します。契約書が手元にないなら、まず契約書を探すのが最初の作業です。「たぶんダメだろう」で自主規制するのが一番もったいない。制作の仕事は、契約で守られている範囲を正確に把握している人ほど、堂々と実績を出せています。

出せない仕事を伝えるための4つの置き換え

画面が出せなくても、伝えられる情報は残っています。発注側が実績を見るときに知りたいのは「きれいな画面が作れるか」だけではありません。「うちの案件を任せて事故らないか」です。ここを満たす情報は、画面以外にもあります。

置き換え1：業種と役割だけを書く

固有名詞を伏せて、業種・商材カテゴリ・自分の担当範囲だけを書く方法です。「化粧品ブランドの単品通販 LP、デザインカンプ支給、HTML/CSS コーディングとフォーム実装を担当」。これだけで、読む側は「同業の案件経験がある」「デザインからではなく実装から入れる」という2点を受け取れます。社名が出ていなくても情報としては成立します。

書き方のコツは、抽象度を上げすぎないことです。「Web制作全般」では何も伝わりません。「BtoC の定期購入 LP」「BtoB の資料請求 LP」「イベント申込 LP」のように、コンバージョンの型まで書くと一気に具体性が出ます。LP は業種よりコンバージョンの型で難易度が変わるので、発注側もそこを見ています。どんな職種でどんな仕事が動いているかは、LP制作・HTML/CSSコーディングのお仕事のページで案件の種類ごとに整理されているので、自分の経験がどの型に当たるかを確認しておくと分類しやすくなります。

置き換え2：成果物ではなく判断を書く

これが最も効きます。実績の説明を「何を作ったか」ではなく「何に困って、どう判断したか」で書くのです。

たとえば「ファーストビューの画像が重く、モバイルの表示が遅かったため、背景を画像から CSS のグラデーションに置き換え、商品画像だけを WebP で配信するようにした」。この一文には、問題の発見・原因の切り分け・実装の選択・トレードオフの理解が全部入っています。画面のスクリーンショットより、この一文のほうが技術力を証明します。

判断を書くときは、必ず「なぜその選択にしたか」と「捨てた選択肢」をセットで書いてください。「JS のスライダーライブラリを使わず、CSS の scroll-snap で実装した。理由は読み込むファイルを減らしたかったからで、代わりに古い環境での挙動は別途フォールバックを用意した」。捨てた選択肢まで書ける人は、比較検討ができる人だと判定されます。

置き換え3：再現物を自分で作る

出せない案件と同じ構造のものを、架空の商材で作り直す方法です。ポートフォリオ用の作品というと初心者向けの話に聞こえますが、経験者ほどこれが有効です。実案件で学んだ設計をそのまま持ち込めるからです。

作るときの条件は3つあります。1つ目は、架空でも商材とターゲットを具体的に設定すること。2つ目は、実装の制約を実案件と同じにすること（対応ブラウザ、CMS の有無、計測タグの本数など）。3つ目は、なぜその構成にしたかの説明文を必ず添えること。説明文のない作品は、実力の証明にはなりません。

置き換え4：数字を出せなくても、指標名は出す

守秘義務でコンバージョン率などの数値が出せない場合でも、「何を指標にして改善したか」は言えることが多い。「フォーム到達率を主指標にして、入力項目を減らす方向で提案した」「離脱位置をヒートマップで確認し、価格提示の位置を変更した」。数値を伏せたまま、測っていたことは伝わります。測っていた人と、作って終わりだった人の差は、この一文で出ます。

掲載許可を取りにいく実務手順

許可を取る作業は面倒に見えますが、慣れると1件あたり数分で済みます。しかも一度許可が取れると、その案件は永続的に実績として使えます。

聞くタイミングは納品直後がベスト

一番通りやすいのは、納品して相手が満足している瞬間です。時間が経つほど担当者が異動し、話が通らなくなります。私が失敗したのは、EC の商品ページ改修を担当した案件で、半年後に実績掲載を打診したときでした。当時の担当者がすでに退職していて、後任の方には経緯が伝わっておらず、社内確認に時間がかかった末に見送りになりました。あのとき納品メールに一文添えておけば済んだ話です。以来、納品連絡のテンプレートに実績掲載の確認を最初から入れています。

依頼の文面は、範囲を先に狭めて出す

「実績として公開してよいですか」と広く聞くと、相手は判断できずに社内へ持ち帰り、そのまま止まります。こちらから範囲を限定して提案するのが正解です。

以下のような形で、範囲を3段階に分けて提示します。

・A案：社名・URL・画面キャプチャをすべて掲載 ・B案：社名は出さず「〇〇業界のブランド様」とし、キャプチャのみ掲載 ・C案：社名もキャプチャも出さず、担当した業務範囲の記述のみ

このように出すと、相手は「A は難しいが C なら問題ない」と即答できます。全部断られるより、C が取れるほうが実務上はるかに価値があります。文面自体は、ビジネス文書検定で扱われるような依頼文の型、つまり用件を先に書き、相手の負担を明示し、回答の選択肢を用意する形を守れば十分に通ります。

断られたときにやること

断られたら、その事実自体を記録に残します。「A社（非公開・許可未取得）」と自分の管理表に書いておく。次に同じ業界の案件を受けたときに、経験として口頭では話せるからです。書面に出せないだけで、面談や商談の場では「同種の案件を担当した経験があります」と言える。ここを混同して、断られた瞬間に「なかったこと」にしてしまう人が多い。

実績ページに何をどう並べるか

素材が揃ったら、並べ方の話になります。発注側が実績を見る時間は長くありません。上から順に読むのではなく、目的の情報を探しに来ます。

見る側が最初に確認する3点

現場で発注側の話を聞いていると、最初に見られているのは次の3点です。1つ目は「自分たちと近い業種・規模の仕事をしているか」。2つ目は「担当範囲がどこまでか」。3つ目は「連絡と進行が成立しそうか」。デザインの好みはその後です。だからページの最上部には、作品のギャラリーではなく「対応できる業務範囲の一覧」を置くほうが機能します。

1件あたりに書く項目を固定する

案件ごとに書く内容がバラバラだと、比較できず読み飛ばされます。項目を固定してください。

項目	書く内容
案件の種類	商材のカテゴリとコンバージョンの型
担当範囲	デザイン／コーディング／フォーム／計測タグ／保守のどれか
支給物	カンプ、素材、原稿の有無
制約条件	対応ブラウザ、CMS、納期の長短
工夫した判断	直面した問題と選んだ解決策
使用技術	HTML／CSS／JS／使用したフレームワークやツール

この表の形式に落とすと、URL が出せない案件も同じ枠に収まります。出せる案件と出せない案件を同じ書式で並べられるのが利点です。「非公開案件」とだけ書いてある行が混じっていても、他の行と同じ密度で情報が入っていれば違和感がありません。

件数は多ければよいわけではない

初期は数を揃えたくなりますが、質のばらつきは信頼を下げます。基準は「この案件をもう一度受けたいか」です。受けたくない案件は載せない。載せると同種の依頼が来ます。6件から10件程度に絞り、方向性を揃えるほうが、依頼の質が上がります。

並べる順番

新しい順ではなく、「これから受けたい仕事に近い順」で並べます。実績ページは過去の記録ではなく、今後の営業資料です。EC の LP を増やしたいなら EC の案件を上に置く。この考え方は職種を問わず共通で、UI/UXデザインのフリーランスになるには？必要スキルと案件相場でも、実績の並べ方が受注する案件の方向を決めるという点は同じ構造で扱われています。

コーディング実績ならではの見せ方

LP制作の中でもコーディング担当は、見た目の成果物が「他人のデザイン」であることが多く、実績として自分の貢献を示しにくい立場にあります。ここは専用の見せ方が必要です。

ソースの書き方そのものを実績にする

コーディングの品質は、画面ではなくソースに出ます。公開できる範囲で、自分の書いたマークアップの一部を実績ページに載せるのは有効です。クラス名の命名規則、セクションの構造化、見出しレベルの整理。この3つが揃っているソースは、それだけで「引き継げるコードを書く人」だと分かります。

案件そのもののソースを出せない場合は、再現物のリポジトリを公開する形にします。読み手は動くページより、コミットの粒度とコメントを見ていることがあります。

検証結果を残す

表示速度、モバイル対応、フォームの動作確認、主要ブラウザでの表示崩れの有無。これらの検証をやっていること自体が、実績として意味を持ちます。「納品前に確認した項目のチェックリスト」を実績ページに載せているコーダーは多くありませんが、発注側からは非常に評価されます。何を確認して納品しているかが事前に分かるからです。

チェック項目の例としては、主要ブラウザ4種での表示確認、画面幅の分岐ごとのレイアウト確認、フォーム送信の到達確認、計測タグの発火確認、リンク切れの確認あたりが基本になります。

保守のしやすさを言葉にする

LP は納品して終わりではなく、文言差し替えや A/B テストで触られ続けます。「後から誰が触っても壊れない状態で渡した」ことを示せると、継続の話につながります。具体的には、変更が入りやすい箇所をコメントで示している、画像の差し替え手順を納品書に添えている、CSS の色や余白を変数化している、といった記述です。技術的な体系性を第三者が確認できる材料としては、CCNA（シスコ技術者認定）のようなインフラ寄りの認定を持っている人が、サーバー設定やドメイン周りまで受けられる根拠として提示している例もあります。自分の守備範囲の広さを、資格と実務の両面から示す形です。

やってはいけない見せ方

いくつか、確実に評価を下げるパターンがあります。

1つ目は、担当範囲を曖昧にしたまま載せること。デザインは他人がやったのに、あたかも自分が全部作ったように見える書き方は、面談で必ず崩れます。聞かれたときに答えられないからです。担当範囲は正直に、しかし詳細に書く。これは信頼の問題であると同時に、ミスマッチの案件を弾く実務上のメリットもあります。

2つ目は、他社の実績ページの文言をそのまま流用すること。制作会社のサイトから表現を借りてくると、単価やチーム規模の前提が違うため、内容が実態と合わなくなります。

3つ目は、スクリーンショットだけを大量に並べること。説明文がないギャラリーは、見た目の好みだけで判断されます。それだと価格競争に巻き込まれます。

4つ目は、許可を取らずに載せること。これは信用の毀損に直結します。制作会社の下請けで入った案件を、元請けの許可なくエンドクライアントの社名付きで載せてしまい、取引が止まった例を見たことがあります。手間を惜しむ場所ではありません。

制作の受注方法そのものを整理したい場合は、依頼形態ごとの違いを押さえておくと判断しやすくなります。

LP制作を専門とするWeb制作会社や広告代理店に依頼する方法です。企画戦略からデザイン・コーディング・公開後のLPOまでをトータルで任せられます。社内にノウハウがない場合や、事業成果に直結する重要なLPを確実に成功させたい場合に最適な選択肢です。 出典: bpx.co.jp

発注側がこうした選択肢の中から個人に依頼するとき、判断材料は「会社に頼むより早くて融通が利くか」です。実績ページは、その判断を助ける資料として設計するのが正しい。網羅的な作品集ではなく、依頼の意思決定を進めるための書類だと考えてください。

実績をどこに置くか

素材と書き方が決まったら、次は置き場所です。ここを間違えると、せっかく作った実績が読まれません。置き場所には4つの選択肢があり、それぞれ向き不向きがはっきりしています。

自分のサイトに置く

最も自由度が高く、非公開案件の扱いも自分で決められます。LP制作を仕事にしている以上、自分のサイトそのものが実績を兼ねるという利点も大きい。表示速度、スマートフォンでの読みやすさ、フォームの動作。発注側は、あなたのサイトの作りをそのまま「納品物の水準」として見ます。凝ったアニメーションより、表示が速くて問い合わせフォームが確実に動くほうが評価されます。

一方で、自分のサイトは検索で見つけてもらうまでに時間がかかります。作ったばかりの段階では、他の置き場所と併用するのが現実的です。

制作物の共有サービスに置く

デザイン系の投稿サービスやコード共有サービスは、同業者と発注者の両方が見に来ます。デザイン寄りの案件を取りたいなら前者、実装寄りなら後者が効きます。注意点は、これらのサービスは作品単体で評価されるため、判断の説明文が短く切られやすいこと。説明の本体は自分のサイトに置き、共有サービスからは入口だけを作る形が扱いやすい構成です。

業務委託マッチングサービスのプロフィールに置く

在宅ワークの仲介サイトや業務委託マッチングサービスのプロフィール欄は、発注側が「今すぐ頼める人」を探しに来る場所です。ここに置く実績は、作品の美しさより「対応できる範囲」と「連絡の取りやすさ」を優先して書きます。公開できない案件が多い人ほど、この形式は相性がよい。画面がなくても、業務範囲の記述だけで判断してもらえるからです。案件の種類ごとにどんな依頼が動いているかはLP制作・HTML/CSSコーディングのお仕事で確認できるので、その表現に自分の実績記述を寄せておくと、探している側の言葉と一致して見つかりやすくなります。

提案時に渡すPDFにまとめる

商談や見積もり提出のときに添える資料です。Web に公開しない前提なので、非公開案件も「配布先限定」として扱いやすくなります。ただし相手の社内で共有される可能性はあるため、NDA に触れる情報は入れないこと。PDF 版は Web 版より情報を厚くし、担当範囲と工程表を必ず入れます。

置き場所は1つに絞る必要はありません。自分のサイトを本体にして、マッチングサービスと PDF に転用するのが、手間の少ない構成です。

ツールと費用の考え方をどう説明するか

実績の説明では、使ったツールと費用の考え方に触れておくと、発注側の不安が減ります。LP制作の相場が読みにくいのは、作業範囲がケースごとに大きく違うからです。そこを事前に整理して示せる人は、見積もりの段階で信頼されます。

使用ツールは「なぜそれを選んだか」まで書く

ツール名を並べるだけでは意味がありません。デザインツール、コードエディタ、バージョン管理、検証ツール、計測ツール。それぞれについて、案件の条件に応じてどう使い分けているかを書きます。「クライアント側でデザイン修正が入る案件では、共同編集できるツールを使って確認の往復を減らした」といった説明があると、進行の設計ができる人だと伝わります。

LP制作ツールを使った内製との違いを聞かれることも増えています。テンプレート型のツールは、豊富な選択肢と直感的な操作でスピーディに形にできる一方、細かい表現の調整や計測タグの制御には限界があります。この境界線を説明できることが、外注する価値の説明になります。

費用の説明は、作業範囲の分解で行う

金額そのものより、「何をやるといくらの幅が動くか」を説明できるほうが実務では役立ちます。デザインの有無、原稿の有無、フォームの実装方法、CMS への組み込み、計測タグの設定、公開後の修正対応。この6項目のどれを含むかで、同じ「LP1本」でも作業量は何倍も変わります。実績ページの各案件に「支給物」と「担当範囲」を書いておくと、見積もりの前提が共有され、相場の話がかみ合います。

おすすめできる進め方

初めて外部に依頼する発注者に対しては、いきなり全工程を任せる形ではなく、範囲を区切って始める形を提案するのが結果的にうまくいきます。デザインは既存のものを使い、実装だけを切り出す。あるいは1本目は既存 LP の改修から入る。実績ページに「小さく始めた案件が継続につながった例」を書いておくと、この提案が通りやすくなります。

市場の動きと、実績が担う役割の変化

LP制作の周辺は、ツールの進化で作業の中身が変わり続けています。ノーコードの LP 作成ツールやテンプレートで一定水準のページが作れるようになり、「組めること」自体の希少性は下がりました。その分、評価の軸が「何を組むか決められるか」「事故らせずに運用まで渡せるか」に移っています。

この変化は実績の見せ方に直結します。完成画面を並べるだけの実績は、ツールで作られたページと区別がつかない。逆に、判断の履歴と検証の記録が書かれた実績は、ツールでは代替できない部分を示します。守秘義務で画面が出せない人にとっては、むしろ有利な変化です。出せる情報のほうが評価されるようになったからです。

職種ごとの需要の広がりを見ておくと、自分の実績をどの方向に育てるかの判断がしやすくなります。開発系の職種の全体像はソフトウェア作成者の年収・単価相場のページで職種の区分とともに整理されているので、自分の担当領域がどの区分に近いのかを確認しておくと、実績の見出しに使う職種名を選びやすくなります。LP制作は実装と言葉の両方に接する仕事なので、どちらの方向にも実績を伸ばせる位置にあります。働き方の選択肢を広げた例としては、Webマーケティング フリーランスで海外ノマド！年収、スキル、成功への道のように、制作から運用側へ軸足を移していく道筋もあります。

現場を長く見てきた立場からの観察

フリーランスと在宅ワークの市場を20年運営してきた立場から言えば、実績ページの厚みと受注の安定は、思っているほど比例していません。安定して依頼が続いている人に共通しているのは、作品の数ではなく、「この人に頼むと何が起きるかが事前に分かる」という状態を作れていることです。実績の説明文が、そのまま発注の仕様書として読める。だから相手は安心して次を頼めます。

もう1つ、運営者として見てきた限りでは、間に何社も入る形の取引ほど、受け手の実績が外に出にくくなります。エンドクライアントの名前も出せず、元請けの名前も出せず、結果として「何をやってきたか説明できない人」になってしまう。直接取引の形で仕事を受けている人は、同じ年数でも実績の言語化が進んでいます。中間マージンが乗らないので、依頼者は同じ予算でより多く頼め、受け手は手数料0%の分だけ手取りが厚くなる。金額の話に見えて、実際に効いてくるのは「関係が続くこと」のほうです。関係が続けば、掲載許可も自然に取りやすくなります。

出せない仕事をどう伝えるかという問いの答えは、最終的に「出せる関係を作っておく」ことに戻ってきます。納品の瞬間に一言添える、判断を記録に残す、検証結果を保存する。この3つを習慣にするだけで、1年後の実績の質が変わります。

よくある質問

Q. 守秘義務があるLP制作の実績は、まったく公開できませんか？

契約書の秘密保持条項を確認してください。多くは「事前承諾なく公表しない」という書き方で、承諾を取れば公開できます。承諾が得られない場合でも、社名と URL を伏せて業種・担当範囲・使用技術・工夫した判断だけを書く形なら問題になりません。禁止されているのは秘密情報の開示であり、業務経験の存在自体ではないケースがほとんどです。

Q. 実績掲載の許可は、どのタイミングで依頼するのが通りやすいですか？

納品直後が最も通ります。相手が成果に満足していて、担当者も経緯を把握している状態だからです。時間が経つと担当者の異動や退職で話が通らなくなります。依頼するときは「公開してよいか」と広く聞かず、社名込みで載せる案、社名を伏せる案、記述のみの案の3段階を提示すると、相手が即答しやすくなります。

Q. 公開できる実績がまだ1件もない場合は何をすればよいですか？

架空の商材で再現物を作ります。ポイントは3つで、商材とターゲットを具体的に設定すること、対応ブラウザや CMS の有無など実案件と同じ制約を課すこと、なぜその構成にしたかの説明文を添えることです。説明文のない作品は実力の証明になりません。判断の理由が書かれていれば、実案件でなくても評価の材料になります。

Q. コーディングだけを担当した場合、実績として何を見せればよいですか？

ソースの書き方と検証の記録です。クラス名の命名規則、セクションの構造化、見出しレベルの整理が揃っているマークアップは、それだけで引き継げるコードを書く人だと判断されます。あわせて、主要ブラウザでの表示確認、画面幅ごとのレイアウト確認、フォーム送信の到達確認といった納品前チェックリストを載せると、発注側は安心して任せられます。

Q. 実績は何件くらい載せるのが適切ですか？

数より方向性の統一が重要です。基準は「この案件をもう一度受けたいか」で、受けたくない種類の仕事は載せないでください。載せると同種の依頼が集まります。6件から10件程度に絞り、これから受けたい仕事に近い順に並べるのが実用的です。実績ページは過去の記録ではなく、今後の依頼を選ぶための営業資料として設計します。