ECサイト制作のポートフォリオの作り方｜見る人が知りたいこと

2026年3月12日

朝比奈蒼

この記事のポイント

✓ECサイト制作のポートフォリオは
✓作品を並べるだけでは選ばれません
✓発注者が見ているのは再現性です

結論から書きます。ECサイト制作のポートフォリオで見る人が知りたいのは、完成したデザインの美しさではありません。「この人に頼んだら、うちのサイトでも同じことが起きるのか」という再現性です。ここを外したポートフォリオは、どれだけ綺麗に作り込んでも通過しません。

ECサイトの制作は、コーポレートサイトやランディングページと比べて、公開後に評価が確定する仕事です。商品が増える、セールが走る、決済手段が追加される、在庫が動く。作った時点で終わりではなく、運用に耐えるかどうかで良し悪しが決まります。発注者はそれを知っているので、静止画のキャプチャを何枚並べられても判断できません。

この記事では、掲載する案件の選び方、1件あたりの書き方の型、守秘義務との折り合いのつけ方、実務経験がない場合の作り方、そして作る場所の選び分けまでを、手順として整理します。

見る人が知りたいのは「作品」ではなく「再現性」

開かれている時間は驚くほど短い

制作会社や事業会社の担当者がポートフォリオを開いている時間は、想像より短いという特徴があります。応募が複数ある案件では、最初の絞り込みが数分で終わることも珍しくありません。この短い時間で判断されるのは、次の3点です。

1つ目は、依頼したい領域の経験があるか。ECサイトと一口に言っても、モール出店の運用、ASP型カートの構築、独自ドメインでのフルスクラッチ、既存サイトの改修では、必要な知識がまったく違います。2つ目は、任せられる範囲がどこまでか。デザインだけなのか、実装まで含むのか、商品データの整備や公開後の運用も見られるのか。3つ目は、コミュニケーションが成立しそうか。説明の順序、専門用語の扱い方、前提条件の書き方から、この点は驚くほど伝わります。

正直なところ、多くのポートフォリオはこの3点のどれにも答えていません。トップページのキャプチャと「制作期間2ヶ月」という情報だけが並んでいる。これでは、判断材料がゼロです。

求人側の「未経験」は、経験ゼロを意味しない

実務経験がないからポートフォリオを作れない、と考えている人は多いのですが、この前提自体が間違っています。求人でいう未経験の定義は、Webデザイナー向けの解説記事でも明確に整理されています。

Webデザイナーとしての実務経験がない人でもポートフォリオは制作すべきです。そもそも、Webデザイナーの求人上での「未経験」とは「実務経験がない」ことを指しており、最低限のスキルや知識、趣味や学びの範囲でもWebサイトの制作経験はある人を対象にしています。出典: moreworks.jp

つまり、実務経験がないことと、制作経験がないことは別の話です。架空の店舗を想定して1本作り込む、既存のECサイトを題材にリニューアル案を作る、知人の小規模な販売サイトを手伝う。いずれも掲載できる素材になります。重要なのは、その1本に対してどれだけ判断の記録を残せているかです。

掲載する案件の選び方

点数は絞る。多いほど良いわけではない

掲載点数を増やすほど選ばれやすくなる、という考え方は成立しません。むしろ逆の傾向が見られます。点数が多いと、1件あたりの説明が薄くなり、閲覧者は結局どれも読まずに閉じます。

目安としては3件から5件です。このうち1件は、最も見せたい案件として、他の倍以上のボリュームで書き込みます。残りは概要と担当範囲だけの簡潔な記載で構いません。全部を同じ密度で書くと、どれが自信作か伝わらなくなります。

選ぶ基準は、応募先の案件に近いかどうかです。汎用のポートフォリオを1つ作って使い回すのではなく、掲載する案件の並び順と、詳しく書く1件を応募先ごとに入れ替える。この手間をかけている人は、通過率が明らかに違います。

守秘義務との折り合いをつける

ECサイトの案件では、公開できない情報が多く含まれます。売上、注文件数、購入率に関する数値、社内の体制、使用しているシステムの詳細。これらを無断で掲載すると契約違反になります。

対処の順序は決まっています。第1に、クライアントに掲載の可否を確認します。制作の契約時点で「実績として掲載してよいか」を確認しておくのが理想ですが、後からでも聞けます。第2に、許可が取れない場合は、案件名と固有名詞を伏せた形で掲載します。「アパレルブランドのECサイト（月商規模は非公開）」といった書き方です。第3に、それも難しい場合は、その案件で使った技術や判断だけを抽象化して書きます。

ここで重要なのは、伏せること自体はマイナスにならないという点です。むしろ、守秘の扱いが丁寧な人は、発注者から見て安心材料になります。逆に、他社の非公開情報を平気で載せている人は、自分の会社の情報も同じように扱われると想像されます。

実務経験がない場合の題材の選び方

架空案件を作る場合、題材選びで結果が変わります。避けたほうがよいのは、規模が大きすぎる想定です。大手アパレルのECサイトを丸ごとリニューアル、といった題材は、成果物が表面的になりがちで、判断の深さを見せられません。

向いているのは、商品点数が30点から50点程度の小規模な店舗です。焙煎所のコーヒー豆、地方の食品加工業者、個人の陶芸作家。この規模なら、商品分類の設計、決済手段の選定、配送方法の出し分け、在庫が少ないときの見せ方まで、一通りの判断を自分で行えます。そして、その判断の理由を書けます。

架空案件であることは隠さず明記します。隠していたことが後で分かるほうが、はるかに印象が悪くなります。「架空の店舗を想定した自主制作」と書いたうえで、想定した条件を丁寧に記述するほうが、誠実さと設計力の両方を示せます。

1件あたりの書き方の型

前提条件から書き始める

1件ごとの記述は、次の順番で構成します。前提条件、課題、判断、結果、担当範囲。この5つです。

前提条件には、クライアントの業種、商品の性質、想定する購入者、予算や期間の制約、既存システムの有無を書きます。ここが書かれていないと、後に続く判断の妥当性が読み取れません。「生鮮食品を扱うため、配送日の指定と冷蔵と常温の分離が必須だった」という前提があって初めて、カートまわりの設計の意図が伝わります。

課題は「困りごと」の形で書く

課題は、発注者が実際に口にした困りごとの形で書くと、読み手が自分の状況に重ねやすくなります。「回遊率が低かった」よりも「商品は良いのに、カテゴリから探せず離脱していた」のほうが伝わります。

課題を書くときに数値を使いたくなりますが、公開できない数値であれば無理に出す必要はありません。定性的な記述でも、具体的であれば十分に機能します。

判断を書く。ここが本体

ポートフォリオの価値の大半は、この判断の記述に集約されます。何を選び、何を捨てたか。そしてその理由。

たとえば、カート機能をASP型のサービスで構築したのか、オープンソースのシステムを使ったのか。その選択の理由が「予算内で決済手段を早く増やせるから」なのか「独自の会員ランク制度を実装する必要があったから」なのかで、読み手の評価はまったく変わります。前者を選べる人は現実的な判断ができる人として、後者を選べる人は要件から逆算できる人として認識されます。

捨てた案も書いてください。「当初はスライダーで新商品を見せる案を検討したが、スマートフォンでの表示速度を優先して静的な一覧に変更した」という記述は、優先順位をつけられる人だという証明になります。

結果と担当範囲を正確に書く

結果は、公開できる範囲で書きます。数値が出せないなら、「公開後、商品追加の作業をクライアント側で完結できるようになった」といった運用面の変化でも十分です。ECサイトでは、運用が回るようになったこと自体が大きな成果です。

担当範囲は、必ず正確に書きます。チームで制作した案件を、あたかも1人で作ったように見せると、面談の場で必ず露呈します。「デザインと実装を担当、商品データの整備はクライアント側で実施」という書き方で問題ありません。範囲を正直に書いている人のほうが、信用されます。

ECサイトならではの見せどころ

商品分類の設計を見せる

ECサイトで最も差が出るのは、実は商品の分類設計です。カテゴリの階層、タグの設計、絞り込み条件の設定。ここが破綻していると、商品点数が増えた瞬間にサイトが機能しなくなります。

ポートフォリオには、完成したデザインだけでなく、分類設計の図を入れてください。手描きに近い簡素なものでも構いません。「なぜこの階層にしたか」「商品が10倍に増えたときにどう対応するか」を書き添えると、運用まで見えている人だと判断されます。

決済と配送の判断を見せる

決済手段の選定、配送方法の出し分け、送料の計算ルール。この3つは、ECサイト特有の判断領域です。クレジットカード決済だけでよいのか、コンビニ払いや後払いを入れるのか。入れるなら手数料の負担をどうするのか。商品によって配送方法を変える必要があるか。

これらは表面上のデザインには現れませんが、発注者にとっては最も気になる部分です。ここに触れているポートフォリオは、そうでないものと明確に差がつきます。

運用に耐える設計であることを示す

公開後に誰が更新するのか。この視点が入っているかどうかで、評価が変わります。クライアント自身が商品を追加できるように管理画面を整えたのか。バナーの差し替えを依頼せずに済むようにしたのか。テンプレートを用意して、担当者が変わっても運用できるようにしたのか。

運用設計は、制作者が手を引いた後の話です。ここに配慮している人は、目先の納品ではなく、事業の継続を考えられる人だと受け取られます。

表示速度への配慮

ECサイトは画像が多く、表示速度が課題になりやすい領域です。画像の圧縮方針、遅延読み込みの実装、不要なスクリプトの整理。こうした地味な作業をどう扱ったかを書いておくと、技術的な判断ができる人だと伝わります。

作る場所とツールの選び分け

無料サービスのメリットとデメリット

ポートフォリオを置く場所は、無料のサービスでも十分に機能します。メリットは、初期費用がかからず、テンプレートが整っているため制作時間を短縮できることです。制作そのものに時間をかけるより、掲載する内容の質を上げたほうが結果につながるため、この選択は合理的です。

デメリットは3つあります。1つは、デザインの自由度が制限されるため、他の応募者と見た目が似ることです。2つは、サービスが終了したときにURLごと消えることです。3つは、独自ドメインが使えない場合、URLの見栄えが弱くなることです。

判断の基準はシンプルで、ポートフォリオ自体のデザイン力を見せる必要があるかどうかです。デザイナーとして応募するなら自作、実装や運用の担当として応募するなら既製のサービスで内容に集中する、という切り分けが現実的です。

自作する場合の注意点

自作する場合、ポートフォリオサイト自体が実力の証明になります。同時に、粗が見えれば減点材料にもなります。表示速度が遅い、スマートフォンで崩れる、リンクが切れている。こうした状態のポートフォリオは、制作物の品質にも疑いを持たれます。

自作を選ぶなら、公開前に必ず複数の端末で確認してください。スマートフォンでの閲覧が主流である以上、スマートフォンでの見え方を先に整えるほうが順序として正しくなります。

必須項目を落とさない

ポートフォリオに載せるべき項目は、ある程度定型化しています。

Webデザイナーのポートフォリオ作りには、必須とされる項目がいくつかあります。今回はWebデザイナー歴が長い人、実務未経験でWebデザイナーを目指す人、双方に参考になるポートフォリオの作り方や参考になるサイト、活用できるサービスを紹介します。Q&Aも参考になるでしょう。出典: moreworks.jp

ECサイト制作の場合、この定型に加えて、対応可能なカートシステム、扱った決済サービス、連携経験のある外部ツール、対応できる業務範囲を一覧で示しておくと、検索されたときに引っかかりやすくなります。発注者は「使っているシステム名」で探すことが多いためです。

よくある失敗と、その回避方法

失敗1 キャプチャだけを並べる

最も多い失敗です。トップページのスクリーンショットが5枚並んでいるだけのポートフォリオは、判断材料になりません。回避方法は単純で、1件につき最低でも前提条件と判断の記述を添えることです。画像の枚数を減らしてでも、文章を増やすほうが効果があります。

失敗2 専門用語で埋める

技術的な用語を並べて専門性を示そうとすると、逆効果になることがあります。発注者側の担当者が非技術職であるケースは多く、通じない説明は「話が合わない人」という印象を残します。

回避方法は、用語を使ったら必ず言い換えを添えることです。「レスポンシブ対応（スマートフォンでも崩れない作り）」という書き方で、専門性と伝わりやすさは両立します。

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

最終更新が数年前のままになっているポートフォリオは、現在も活動しているのか判断できません。回避方法は、案件が終わるたびに追記する習慣を持つことです。追記する内容が少なくても、日付が動いていること自体に意味があります。

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

意外に多いのがこれです。良いポートフォリオなのに、連絡手段が書かれていない、あるいはページの最下部に小さく置かれている。回避方法は、各案件の記述の直後にも連絡導線を置くことです。読み終えた直後が最も連絡されやすいタイミングになります。

文章の書き方で、同じ実績が別物に見える

主語を「サイト」ではなく「判断」にする

ポートフォリオの文章でありがちなのが、成果物を主語にした説明です。「このサイトは、白を基調とした清潔感のあるデザインです」という書き方では、誰が書いても同じ文になります。

主語を判断に変えると、途端に個性が出ます。「食品を扱うため、色数を抑えて商品画像の色を正確に見せることを優先した」と書けば、色の選択が判断の結果であることが伝わります。同じ白基調のデザインでも、前者は感想、後者は設計です。発注者が読みたいのは後者です。

数字を使うときは、比較の軸を添える

数字は説得力を持ちますが、単独では意味を持ちません。「読み込み時間を2秒短縮」と書くだけでは、それが大きいのか小さいのか読み手には分かりません。「商品画像が40枚並ぶ一覧ページで、遅延読み込みを入れて表示開始までの時間を短縮した」と書けば、状況込みで理解されます。

公開できない数字を無理に使う必要はありません。数字がなくても、条件と判断が書かれていれば十分に伝わります。むしろ、根拠のない数字を書くほうが危険です。面談で詳細を聞かれたときに答えられなければ、他の記述の信頼まで落ちます。

一文を短くする

ポートフォリオの文章は、読み飛ばされる前提で書きます。一文が長いと、読み手は途中で目が滑ります。1つの文に1つの情報だけを入れて、句点で切る。この徹底だけで、読了率が変わります。

見出しも同様です。「制作の中で意識したこと」のような抽象的な見出しより、「商品が増えても崩れないカテゴリ設計」のほうが、中身が予測できるため読まれます。

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

「なぜそうしたのか」を全項目に用意する

ポートフォリオを通過すると、次は面談や打ち合わせです。ここで聞かれるのは、ほぼ必ず「なぜそうしたのか」です。デザインの選択、システムの選定、機能の取捨。すべてに理由を用意しておきます。

理由を用意する作業は、ポートフォリオを書く段階で終わらせておくのが効率的です。書きながら理由を言語化しておけば、面談ではそれを話すだけになります。逆に、書いていない部分を聞かれると、その場で考えることになり、説得力が落ちます。

うまくいかなかった点も準備する

「困ったことはありましたか」という質問は高い確率で出ます。ここで「特にありませんでした」と答えるのは、最も避けたい回答です。実務では必ず問題が起きるため、起きなかったという回答は、経験が浅いか、問題に気づいていないかのどちらかに見えます。

準備しておくのは、起きた問題と、その対処と、次回への反映の3点セットです。「商品データの形式がクライアント側の想定と違い、投入の直前で修正が発生した。以降は、着手前にサンプルデータを10件もらって形式を確認するようにした」という形です。この答え方ができる人は、同じ失敗を繰り返さない人だと判断されます。

担当範囲の境界を言えるようにする

チーム制作の案件では、どこまでが自分の担当だったかを明確に説明できるようにしておきます。曖昧なまま話すと、後から食い違いが出たときに、経歴全体の信頼が揺らぎます。

「デザインは自分、実装は別のメンバー、商品データの整備はクライアント」と即答できる状態にしておく。この準備は、誠実さの証明であると同時に、自分の強みを正確に伝える手段でもあります。

更新を止めない仕組みを作る

案件が終わった日に下書きを作る

ポートフォリオが更新されなくなる最大の原因は、後回しにすることです。案件が終わって時間が経つほど、前提条件や判断の理由を思い出せなくなります。

対策は単純で、案件が終わった日のうちに下書きを作ることです。完成した文章である必要はありません。前提条件、迷った点、選んだ理由、起きた問題をメモとして残しておけば、後から整形できます。この習慣がある人とない人では、1年後のポートフォリオの厚みがまったく違います。

掲載許可は契約のタイミングで取る

実績として掲載してよいかどうかは、契約時に確認しておくのが最も摩擦が少なくなります。納品後に依頼すると、クライアント側に確認の手間が発生し、断られる確率も上がります。契約書に「実績としての公開可否」の項目を入れておけば、毎回の交渉が不要になります。

公開可の場合でも、公開してよい時期を確認しておきます。サイトの公開前に実績として出してしまうと、クライアントの事業計画に影響することがあります。

古い案件は消さずに、扱いを下げる

技術が古くなった案件を削除すべきか迷うことがありますが、削除する必要はありません。掲載の順序を下げ、記述を短くすればよいだけです。案件の履歴が残っていること自体が、継続して仕事をしてきた証拠になります。

ただし、リンク先のサイトがすでに存在しない場合は、リンクを外して静止画に切り替えます。リンク切れが並んでいるポートフォリオは、管理が行き届いていない印象を与えます。実際のサイトが閉鎖されたり大幅に改修されたりするのはECの世界では日常的に起きることなので、キャプチャは公開直後の状態で必ず保存しておきます。手元に画像が残っていれば、リンクが切れても実績としての価値は保てます。

半年に一度、全体を読み直す

追記だけを続けていると、全体の一貫性が崩れます。得意領域が変わっているのに古い方向性の説明が残っていたり、同じ内容が複数の案件で重複していたりします。6ヶ月に一度、最初から通して読み直す時間を取ってください。読み直すと、いま自分が何を強みとして打ち出しているかが客観的に見えます。

読み直しの際にチェックするのは4点です。掲載案件の並び順が現在の方向性と合っているか。詳しく書いた1件が最も自信のある案件になっているか。専門用語の言い換えが抜けていないか。連絡導線が機能しているか。この確認は30分程度で終わりますが、効果は大きくなります。

単価や職域を確認しながら方向を決める

ポートフォリオの方向性を決めるとき、自分がどの職域で評価されたいのかをはっきりさせておくと、掲載内容がぶれません。ECサイトに関わる仕事の範囲は広く、制作、運用、画像制作でそれぞれ求められるものが違います。ECサイト制作・運用・画像制作のお仕事には、それぞれの業務がどう区分されているかがまとまっており、自分の掲載案件をどの区分に寄せるかを考える材料になります。

広告運用やデータ分析まで含めて請け負う方向に寄せるなら、AI・マーケティング・セキュリティのお仕事の区分も見ておくと、掲載すべき実績の種類が変わります。実装寄りで評価されたい場合の水準感はソフトウェア作成者の年収・単価相場が、商品説明文やコンテンツ制作を強みにする場合は著述家，記者，編集者の年収・単価相場が目安になります。

デザイン領域での見せ方については、UI/UXデザインのフリーランスになるには？必要スキルと案件相場で必要とされるスキルの整理がされており、ポートフォリオに何を載せるかの判断に使えます。長期的にどう働くかを考えたうえで実績を積みたい場合は定年後のフリーランス独立｜退職金を活かした起業プランと注意点も、キャリアの設計という視点で参考になります。

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

フリーランスと在宅ワークの市場を20年運営してきた立場から言えば、選ばれ続けている人のポートフォリオには共通点があります。作品の数ではなく、判断の記録が残っているという点です。

同じ完成物を見せていても、「こう作りました」と書く人と、「この条件だったので、この案を捨ててこちらを選びました」と書く人では、依頼が来る量が違います。後者は、依頼者が自分の案件に置き換えて考えられるからです。依頼する側は、完成した他社のサイトが欲しいのではなく、自分の店で同じ判断をしてくれる人が欲しい。この違いを理解している人は、ポートフォリオの更新に時間を使います。

もう1つ、運営者として見てきた限りでは、手取りが安定している人ほど、ポートフォリオを「営業資料」ではなく「共通言語を作る道具」として使っています。最初の打ち合わせで前提条件のすり合わせが済んでいるため、着手後の手戻りが少ない。手戻りが少ないと、同じ報酬でも実質的な時間単価が上がります。仲介手数料が引かれない手数料0%の直接取引であれば、その差はさらに大きくなります。依頼する側も同じ予算でより多く頼めるため、双方にとって得になる構造です。

ポートフォリオは作って終わりの成果物ではなく、案件ごとに更新し続ける運用物です。この認識を持てるかどうかが、ECサイト制作という運用が前提の仕事では、そのまま評価の差になります。