LP制作・コーディングのポートフォリオの作り方｜見る人が知りたいこと

2026年5月6日

長谷川奈津

この記事のポイント

✓LP制作・コーディングのポートフォリオの作り方を
✓作品がない段階での増やし方
✓無料ツールと自作の選び方

LP制作・コーディングのポートフォリオを作るとき、多くの人が「作品を並べること」を目的にしてしまいます。ただ、見る側は作品を鑑賞しに来ているわけではありません。依頼してよい相手かを判断しに来ています。これ、知らない人が本当に多いんです。この記事では、見る人が実際に何を確認しているのかを起点に、作品の増やし方、1作品ごとに書くべき項目、サイトの作り方、そして意外と見落とされている掲載時の法的な注意点までをまとめます。

ポートフォリオを見る人が確認している4つのこと

判断される側ではなく、判断する側の視点に立ちます。制作の依頼を検討している人がポートフォリオを開いたとき、確認しているのは次の4点です。

自分の案件に近い仕事をしているか

業種、商材、コンバージョンの型。この3つが自分の案件と近いかどうかを最初に見ます。美容の単品通販LPを作りたい人は、同じ型の作品を探します。技術的には同じ作業でも、商材の性質で構成のセオリーが変わるからです。

だから、ポートフォリオの入口には作品の羅列ではなく「対応できる案件の種類」を先に置くほうが機能します。案件の種類ごとにどんな依頼が動いているかはLP制作・HTML/CSSコーディングのお仕事で整理されているので、そこで使われている言葉に自分の分類を寄せておくと、探している側と語彙が一致します。

どこまでが自分の担当だったか

デザインも自分がやったのか、支給されたカンプを実装しただけなのか。原稿は書いたのか、支給か。ここが曖昧だと、面談で必ず崩れます。曖昧に書いて実力以上に見せると、ミスマッチの案件を引き寄せて自分が苦しみます。つまり、正直に細かく書くほうが、結果として自分を守ります。

一緒に進められそうか

意外に思われるかもしれませんが、これは作品と同じくらい見られています。説明文が読みやすいか、連絡先が分かりやすいか、対応できる時間帯や返信の目安が書かれているか。ポートフォリオの文章そのものが、コミュニケーションのサンプルとして評価されています。

作った後のことを考えているか

公開後に更新できる状態で納品しているか、検証をしているか。ここに触れているポートフォリオは非常に少ないので、書くだけで差がつきます。発注側は納品後の手間を最も気にしているのに、そこに答えている作品説明がほとんどないのが実情です。

作品がない段階での作り方と増やし方

実務経験がまだない、あるいは守秘義務で出せる案件がない。この段階からどう始めるかは、多くの人がつまずくところです。

未経験からWebデザイナーを目指すにあたって、就職活動をする際に必須となるのが「ポートフォリオ」です。出典: makosite.cloudfree.jp

必須である以上、作品がないなら作るしかありません。作り方には段階があります。

ステップ1：既存LPの模写で構造を理解する

学習の最初にやるのは模写ですが、模写した作品をそのままポートフォリオに載せるのは避けてください。著作権の問題があります。模写は技術を身につけるための練習であって、掲載物ではありません。この線引きを曖昧にしたまま公開すると、後から取り下げを求められることがあります。

模写で得た構造の理解は、次のステップで自分の作品に転用します。どこで信頼の材料を出しているか、価格提示の前に何を置いているか、フォームの直前に何を書いているか。構造の分析結果は、自分の言葉で書く限り誰のものでもありません。

ステップ2：架空の商材で1本作る

商材、ターゲット、目的を自分で設定して、ゼロから作ります。ここで手を抜きがちなのが設定の部分です。「架空の化粧品ブランド」ではなく、「30代の敏感肌向け、店頭では買えない定期購入型の化粧水、認知度がまだ低い新規ブランド」まで決めてください。設定が具体的なほど、構成の判断に理由が生まれます。

そして必ず、なぜその構成にしたのかの説明文を添えます。説明のない作品は、見た目の好みだけで判断されます。

ステップ3：制約のある条件で作る

実案件には必ず制約があります。使える素材が限られている、原稿が長い、対応ブラウザが指定されている、CMSに組み込む必要がある。こうした制約を自分で課して作ると、実務に近い作品になります。「素材はフリー素材のみ、原稿は支給前提で長め、フォーム項目は7個」といった条件設定です。

制約なしで作った作品は、実務の判断力を示せません。理想的な条件で美しく作れることと、条件が悪いなかで着地させられることは別の能力で、発注側が見たいのは後者です。

ステップ4：小さい実案件を1本受ける

架空の作品だけでは限界があります。知人の事業、地域の店舗、非営利の団体など、規模の小さい実案件を1本受けると、ポートフォリオの説得力が変わります。実案件は「相手の要望を聞いて調整した経験」を含むからです。

このとき必ず、掲載許可を最初に取り決めてください。低額で受ける場合でも、その代わりに実績として公開する許可をもらう、という交換条件は正当です。※口頭ではなく、メールなど記録の残る形で残してください。

ステップ5：作品の説明を書き直す

作品が3件ほど溜まったら、説明文を全部書き直します。作った直後は作業の説明になりがちですが、時間を置くと「何を判断したか」の視点で書けるようになります。

ではここからは、先ほど上で述べた「作品の作り方・増やし方」の方法を用いて、私が実際にポートフォリオに載せた作品例についてご紹介していきたいと思います。出典: makosite.cloudfree.jp

作り方を決めてから作品を作る順序が重要です。作ってから載せ方を考えると、必要な素材や記録が残っていないことに後で気づきます。制作中の画面、比較検討した案、検証の結果。これらは後から再現できません。

1作品ごとに何を書くか

作品ページの中身が、ポートフォリオの実質です。項目を固定してください。案件ごとに書く内容がバラバラだと比較できず、読み飛ばされます。

項目	書く内容	なぜ見られるか
案件の概要	業種、商材、目的	自分の案件との近さを判断するため
担当範囲	設計／デザイン／実装／フォーム／計測	何を任せられるか判断するため
支給物	カンプ、原稿、素材の有無	依頼側の準備量を見積もるため
制約条件	納期の長短、対応環境、CMSの有無	自分の案件で対応できるか判断するため
判断したこと	直面した問題と選んだ解決策	技術力と思考の質を測るため
使用技術	HTML／CSS／JS／使ったツール	引き継ぎや保守の可否を見るため
公開後の対応	検証項目、更新のしやすさ	納品後に困らないか判断するため

このうち最も効くのは「判断したこと」です。画面のスクリーンショットは似たようなものが世の中に大量にありますが、判断の記述は書いた本人にしか書けません。

書き方の型は決まっています。問題、選んだ解決策、捨てた選択肢、その理由。この4つを1段落で書きます。「ファーストビューの画像が重くモバイルの表示が遅かったため、背景を画像からCSSのグラデーションに置き換えた。JSのライブラリを使う案もあったが、読み込むファイルを増やしたくなかったため見送った」。この程度で十分です。

捨てた選択肢まで書ける人は、比較検討ができる人だと判定されます。逆に、選んだ方法だけを書くと「その方法しか知らない人」に見えることがあります。

ポートフォリオサイトそのものをどう作るか

置き場所の選び方です。ここには明確な基準があります。

自作するか、ツールを使うか

LP制作・コーディングを仕事にする以上、自作したサイトそのものが実績になります。ただし、自作にこだわって公開が遅れるのは本末転倒です。判断基準は「今すぐ見せる必要があるか」です。

方法	費用	向いている状況	注意点
自作（HTML/CSS）	ドメインとサーバー代のみ	実装力を見せたい、時間がある	完成にこだわると公開が遅れる
無料の作成ツール	無料	すぐに見せる必要がある	独自ドメインが使えない場合がある
制作物の共有サービス	無料	同業者と発注者の両方に見せたい	説明文が短く切られやすい
マッチングサービスのプロフィール	無料	依頼を受ける入口にしたい	書式が決まっていて自由度が低い

無料のツールで先に公開し、並行して自作版を用意する進め方が現実的です。公開されていないポートフォリオは、存在しないのと同じです。

また、今回は未経験からWebデザイナーを目指すために制作するので、Webサイトの形のポートフォリオサイトを制作し、出典: makosite.cloudfree.jp

Webサイトの形にする利点は、自分のサイトの品質がそのまま評価材料になることです。表示速度、スマートフォンでの読みやすさ、フォームの動作。凝った演出より、速くて確実に動くほうが評価されます。実際、問い合わせフォームが動かないポートフォリオは珍しくありません。制作者としてこれ以上に印象の悪いものはありません。

サイトに必ず置くもの

作品のほかに、次の3つを必ず置いてください。1つ目は対応できる業務範囲の一覧。2つ目は連絡先と、返信のおおよその目安。3つ目は制作の進め方の説明です。3つ目があると、初めて外注する発注者が安心します。何を準備すればよいか、どのくらいの期間がかかるか、途中で何を確認されるのか。これが書いてあるだけで問い合わせのハードルが下がります。

選び方の基準

複数の置き場所を比較するときは、更新のしやすさを重視してください。ポートフォリオは一度作って終わりではなく、案件が増えるたびに追記します。更新が面倒な作りにすると、確実に放置されます。最終更新が数年前のポートフォリオは、現在活動しているかどうかを疑われます。

掲載時の法的な注意点

ここが最も見落とされます。ポートフォリオは公開物なので、権利の問題が必ず絡みます。

実案件の掲載には許可が要る

制作物の著作権が発注者に移転している場合、その作品を自分のサイトに掲載する行為は、原則として権利者の許諾が必要です。契約書に「事前の書面による承諾なく公表しない」と書かれていれば明確に許可が必要ですし、何も書かれていない場合でも、無断掲載はトラブルの元になります。

許可を取るときは、範囲を分けて提案してください。社名とURLとキャプチャをすべて出す案、社名を伏せてキャプチャのみ出す案、記述だけにとどめる案。3段階で出すと、相手は即答できます。全部断られるより、記述だけでも許可が取れるほうが実務上は価値があります。

つまり、聞き方の設計で結果が変わるということです。「載せてよいですか」と広く聞くと、相手は判断できずに社内へ持ち帰り、そのまま止まります。

※制作会社を経由した案件では、エンドクライアントではなく制作会社が許諾の窓口になります。順序を飛ばして直接連絡すると、その後の取引が止まります。

素材のライセンスを確認する

フリー素材、フォント、アイコン、写真。これらには必ず利用条件があります。学習用は無料でも商用利用は有料、というものは珍しくありません。ポートフォリオは自分の営業のための公開物なので、商用利用に当たると解釈されるのが通常です。

つまり、練習で使った素材をそのまま公開すると、ライセンス違反になり得る。作品を公開する前に、使った素材の条件を1つずつ確認してください。有償フォントを試用版のまま使っている状態も同じです。素材の出所と条件を一覧にして自分用に記録しておくと、後から確認するときに楽になります。

人物写真と実在の企業名

架空の作品にモデルの写真を使う場合、その写真の利用条件を確認します。素材サイトの写真でも、「実在しない商品の広告に使ってはいけない」といった制限が付いていることがあります。

また、架空の作品に実在する企業名や商品名を使うのは避けてください。その企業が実際にはやっていない訴求を作品として公開すると、名誉毀損や不正競争の問題になり得ます。架空の商材には架空の名前を使う。基本的なことですが、練習作品では見落とされがちです。

効果や成果の表現

作品の説明に成果を書く場合、根拠のない数値や誇張した表現は避けてください。景品表示法の考え方は事業者の広告表現に対するものですが、自分のポートフォリオも自分のサービスの広告です。実測していない改善率を書かない、他社と比較して優位だと断定しない。この2点を守れば問題は起きません。表示や取引に関する法令の考え方は公正取引委員会の案内で確認できます。

※実際に権利の指摘を受けてしまった場合は、まず該当箇所を非公開にしたうえで、弁護士に相談してください。自己判断で反論すると事態が大きくなります。

コーディング担当ならではの見せ方

デザインは支給で実装だけを担当する立場だと、見た目の成果が自分のものではないため、ポートフォリオで貢献を示しにくくなります。ここは専用のやり方があります。

ソースを見せる

コーディングの品質はソースに出ます。公開できる範囲でマークアップの一部を載せると、それだけで判断材料になります。見られているのは3点で、クラス名の命名に一貫性があるか、セクションの構造が整理されているか、見出しのレベルが適切かです。この3つが揃っていれば、引き継げるコードを書く人だと分かります。

実案件のソースを出せない場合は、架空の作品のリポジトリを公開する形にします。コミットの粒度やコメントの書き方まで見られていることがあります。

検証の記録を見せる

納品前に何を確認しているかのチェックリストを載せている人は、ほとんどいません。だから載せると目立ちます。主要ブラウザでの表示確認、画面幅ごとのレイアウト確認、フォーム送信の到達確認、計測タグの発火確認、リンク切れの確認。この一覧があるだけで、発注側は納品後のトラブルが少ないと予測できます。

隣接領域への広がりを示す

実装だけを見せるより、前後の工程に関われることを示すほうが依頼の幅が広がります。設計側に寄せるならUI/UXデザインのフリーランスになるには？必要スキルと案件相場で扱われている、利用者の行動を起点に構成を決める考え方が直接使えます。数値を見て改善提案までするなら上級ウェブ解析士でコンサルティング独立｜分析のプロとして稼ぐ方法のような分析寄りの資格を提案の根拠として提示している例もあります。公開環境のトラブルまで対応したいならCCNA（シスコ技術者認定）のようなネットワークの体系が守備範囲の証明になります。

ポートフォリオを使い分ける

1つのポートフォリオで全部を賄おうとすると、内容がぼやけます。見せる相手によって、必要な情報が違うからです。実務では2つか3つの形を用意しておくと動きやすくなります。

Web公開版

誰でも見られる形です。ここには許可の取れた作品と、架空の作品だけを載せます。制約が最も厳しい版になりますが、検索や紹介から見つけてもらう入口として機能します。連絡先と業務範囲の一覧を最優先で置き、作品はその下に並べます。

提案時に渡す資料版

商談や見積もりに添える形です。Web公開しない前提なので、Web版より情報を厚くできます。担当範囲、工程表、過去の類似案件での判断、想定される作業の分解。相手の案件に近い内容だけを抜き出して構成し直すと、そのまま提案書として使えます。

ただし、社内で共有される可能性は常にあります。NDAに触れる情報は入れないこと。「配布先限定」と書いてあっても、共有を止める効力はありません。

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

在宅ワークの求人サイトや業務委託マッチングサービスのプロフィール欄は、書式が決まっていて自由度が低い代わりに、依頼を探している人が直接見に来ます。ここでは作品の美しさより「対応できる範囲」と「連絡の取りやすさ」を優先します。公開できる作品が少ない人ほど、この形式との相性がよい。画面がなくても業務範囲の記述だけで判断してもらえるからです。

3つとも一から作る必要はありません。Web公開版を本体にして、そこから抜き出して作るのが効率的です。

面談で聞かれることを想定しておく

ポートフォリオを見た相手から連絡が来ると、次は面談か打ち合わせです。ここで聞かれることは、ほぼ決まっています。事前に答えを用意しておくと、そのままポートフォリオの説明文も改善できます。

よく聞かれるのは次の5つです。1つ目は「この作品で一番苦労したところはどこですか」。2つ目は「もう一度作るならどこを変えますか」。3つ目は「納期はどのくらい必要ですか」。4つ目は「途中で仕様が変わった場合どう対応しますか」。5つ目は「公開後の対応はどこまでお願いできますか」。

このうち2つ目に答えられる人は多くありません。作った作品を客観的に見直していない証拠になります。全作品について「今なら変えるところ」を1つ用意しておくと、成長している人だと伝わります。

4つ目と5つ目は、条件の確認です。ここで曖昧に答えると、後の取り決めが緩くなります。「仕様変更は内容によって別途お見積もりになります」「公開後30日以内の不具合修正は無償で対応します」のように、範囲を先に言えるほうが信頼されます。※答えにくい場合でも「持ち帰って条件を整理してご連絡します」と言えば十分で、その場で無理に約束する必要はありません。

やりがちな失敗

相談を受けていて、繰り返し見る失敗を挙げます。

1つ目は、作品を多く載せすぎることです。質のばらつきは信頼を下げます。基準は「この案件をもう一度受けたいか」で、受けたくない種類の仕事は載せない。載せると同種の依頼が来ます。

2つ目は、説明文を書かずに画像だけを並べることです。判断の記述がないと、見た目の好みだけで比較され、価格競争に巻き込まれます。

3つ目は、連絡先が探しにくいことです。作品が良くても、問い合わせ方法が分からなければ依頼は来ません。全ページから到達できる位置に置いてください。

4つ目は、更新が止まっていることです。案件が増えていなくても、説明文を見直すだけで更新日は動きます。

5つ目は、文章の書式が整っていないことです。見出しの階層がばらばら、箇条書きと文章が混在している、誤字が多い。文書としての整い方は仕事の丁寧さの代理指標として見られます。ビジネス文書検定で扱われるような、用件を先に書き、項目を揃え、読み手が判断できる形にする基本を押さえるだけで印象が変わります。

6つ目は、自分の得意分野を書かないことです。何でもできますと書くと、何も専門がない人に見えます。受けたい仕事を絞って書くほうが、結果として依頼は増えます。

職種の広がりとポートフォリオの役割

ポートフォリオが必要なのはLP制作に限りません。制作系の仕事は総じて、成果物で判断される構造を持っています。作曲・編曲・効果音・ジングルのお仕事のような音の制作でも、聴いてもらえる形のサンプルがあるかどうかで依頼の入り口がまったく変わります。書く仕事であれば、著述家，記者，編集者の年収・単価相場のページで整理されている職種区分ごとに、求められるサンプルの性質が違います。

共通しているのは、成果物そのものより「その成果物に至った判断」を示せるかどうかで評価が分かれるという点です。完成品はツールでも作れる時代になり、判断の記録のほうが希少になっています。ポートフォリオを更新するとき、新しい作品を1つ足すより、既にある作品の判断の記述を厚くするほうが、依頼につながりやすいのはこのためです。

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

フリーランスと在宅ワークの市場を20年運営してきた立場から言えば、依頼が続いている人のポートフォリオは、作品数が多いわけではありません。共通しているのは、読むと「この人に頼んだら何が起きるか」が事前に分かることです。何を任せられて、どう進んで、納品後はどうなるのか。それが書いてあるから、相手は安心して最初の1件を出せます。

もう1つ、運営者として見てきた限りでは、間に何社も入る取引を続けている人ほど、ポートフォリオが薄くなります。エンドクライアントの名前も出せず、元請けの名前も出せず、経験が言葉にならないまま積み上がらない。直接やり取りしている人は、掲載許可も取りやすく、相手の事業の文脈まで書けるので、同じ年数でも説明の厚みが違います。中間マージンが乗らない直接取引では、依頼者は同じ予算でより多く頼めて、受け手は手数料0%の分だけ手取りが厚くなる。ただ、長い目で効いてくるのは金額よりも「実績が言葉になって残ること」のほうです。

ポートフォリオは作品の展示ではなく、依頼の判断を助けるための書類です。作品を1つ増やす時間があるなら、既にある作品の説明文を書き直すほうが、依頼につながることが多い。そして、そうして積み上げた実績を守るために、契約と権利の確認があります。法律はあなたの味方です。

よくある質問

Q. 実務経験がない状態でポートフォリオは作れますか？

作れます。架空の商材で作品を作る方法が基本で、商材とターゲットと目的を具体的に設定し、対応環境や素材の制約も実案件と同じように課します。そのうえで、なぜその構成にしたかの説明文を必ず添えてください。説明のない作品は見た目の好みでしか判断されません。模写した作品は著作権上そのまま掲載しないでください。