Webデザイナーのポートフォリオはどう作る？未経験の作品例も紹介

「ポートフォリオって、何を載せればいいの？」
「実務経験がないのに、見せられる作品なんてない」

Webデザイナーへの転職を考え始めた人が、最初につまずくのがこの2つではないでしょうか。

結論から書くと、実務経験がなくても、自主制作の作品3〜5点でポートフォリオは作れます。採用担当者が見たいのは職歴ではなく、「何を作れるか」と「どう考えて作ったか」です。学習の成果物をきちんと見せられれば、未経験でも評価の土俯に乗れます。

本記事では、ポートフォリオに載せる内容、作り方の5ステップ、Webサイト・PDF・紙の形式の使い分け、お手本の探し方までを順に解説します。未経験向けの作品例も紹介するので、これから作る人は参考にしてみてください。

ポートフォリオとは、自分が制作した作品をまとめた作品集のことです。Webデザイナーの採用では、スキルを実物でしか判断できません。ポートフォリオがないと、そもそも選考の土俵に乗れないのが実態です。

「Webデザイナーにポートフォリオは必要ですか？」という質問への答えは、迷わず「必要」です。理由は3つあります。

履歴書や職務経歴書には、「Photoshopが使える」「HTMLとCSSを学んだ」としか書けません。それでは、どんな品質のものを作れる人なのかが伝わらないためです。

実際の求人にも、その前提が表れています。求人ボックスで「Webデザイナー 未経験」の求人を見ると、その傾向がわかります。「ポートフォリオの提出必須」と応募条件に書く企業が目立ちます（2026年9月時点）。「応募時に成果物を一緒に提出」と指定する企業もあり、書類選考の段階で作品を見て判断するのが多数派です。
※参照：求人ボックス｜Webデザイナー ポートフォリオ 未経験の求人

実務経験がゼロでも、「ここまで作れる」を見せられれば評価の対象になります。経験者と同じ土俵で戦う必要はなく、伸びしろと基礎力を判断してもらえれば十分です。

言い換えれば、学習の成果物こそが未経験者の職務経歴書です。職歴の欄が埋まらない分を、作品の欄で埋めると考えてください。未経験者にとって、ポートフォリオは応募書類の中心にあたります。

書類選考を通過したあとの面接も、ポートフォリオに沿って進むことがほとんどです。「この作品はどんな意図で作りましたか」「一番苦労した点はどこですか」と、作品を前にした質問が続きます。

作品ごとに意図を言語化して準備しておけば、その説明がそのまま面接の回答になります。逆に、見た目だけ整えて意図を語れない状態だと、面接で言葉に詰まるのが落とし穴です。ポートフォリオを作る作業は、面接対策を兼ねていると考えると効率がよくなります。

載せるものは、「作品」と「自分の情報」の2つです。未経験なら、自主制作の作品3〜5点で足ります。「何を載せるべきですか？」という疑問に、項目ごとに答えていきます。

ポートフォリオに載せる基本項目は、次の5つです。

• プロフィール
• スキル・使用ツール
• 制作実績（作品）
• 各作品の制作意図・担当範囲・制作期間
• 連絡先

このなかで評価の分かれ目になるのが、作品ごとの「制作意図」です。見た目だけを並べる人が多いため、「誰に向けて、何を解決するために、どう作ったか」を書いてあるだけで差がつきます。

ほかの項目にも書き方のコツがあります。プロフィールは職歴の年表ではなく、「デザインに活きる経験」の要約として書いてください。たとえば販売職なら、お客様の目線で売り場を組んだ経験は、ユーザー視点の説明に使えます。

スキルは、ツール名と「できること」をセットで一覧にします。学習中のものは「学習中」と正直に書いたほうが、面接で聞かれたときに困りません。連絡先と制作用のSNSアカウントも、忘れずに載せておいてください。ただし、連絡先は問い合わせフォームか、ポートフォリオ専用に用意したメールアドレスに限ります。電話番号や住所は、公開するポートフォリオには載せないでください。

実案件がなくても、自主制作の作品で評価されます。未経験者がよく載せる作品例は、次のとおりです。

• 架空のお店（カフェ・美容室など）のWebサイトデザイン
• 既存サイトのリデザイン（課題を見つけて改善案を作る）
• 架空キャンペーンのバナー数点
• 架空サービスのLP（ランディングページ）
• 自分のポートフォリオサイトそのもの

作品数の目安は3〜5点です。数を増やすより、1点ごとの完成度と説明の質を優先してください。10点並べても、粗い作品が混ざれば評価はそちらに引っ張られます。

リデザインは、とくに未経験者に向いた題材です。「元のサイトのどこが使いにくいか」を見つけて直す過程は、そのまま課題解決の思考力を見せる材料になります。

注意したいのは、実在する企業のロゴ・写真・キャッチコピーをそのまま使った作品を公開しないことです。リデザインを載せるときは、社名を架空の企業に置き換え、ロゴや写真は自作かフリー素材に差し替えたうえで、「非公式の自主制作」であることを作品の説明に明記してください。

「ポートフォリオに載せてはいけないものは？」という疑問も、実際によく検索されています。避けたほうがよいものは次の4つです。

• 権利関係を確認していない素材や写真を使った作品
• 前職や受講先の許可を得ていない制作物
• 模写した作品（学習用にとどめ、公開作品には載せない）
• クオリティに自信のない、数合わせの作品

とくに1つ目と2つ目は、採用側から見ると「権利意識が低い人」という印象につながります。デザインの仕事は素材の権利と切り離せないため、この時点で減点されるのはもったいない話です。迷う作品は載せない、が基本の判断です。

順番どおりに進めれば、未経験でも形になります。コツは、いきなりデザインから始めないことです。作り方は次の5ステップに分かれます。

1. 掲載する作品を選ぶ
2. 構成と掲載順を決める
3. デザインのトーンを統一する
4. 各作品に制作意図とプロセスを書く
5. 公開して反応を見ながら更新する

ひとつずつ見ていきます。

最初にやるのは、手持ちの作品の棚卸しです。学習中に作ったもの、課題で提出したものをすべて並べて、載せられる水準のものを選びます。

足りない分は、前章の作品例から自主制作で補ってください。「架空のカフェのサイト」「既存サイトのリデザイン」のように題材を決めれば、ゼロから悩まずに着手できます。この時点で3〜5点そろえば十分です。

一番自信のある作品を、最初に置いてください。採用担当者は多くの応募者を見ているため、全作品をじっくり見てもらえる前提では組めません。

最初の1点で「見る価値がある」と思ってもらえれば、残りも見てもらえます。順番は、自信のある順に並べるのが基本です。ページの構成も、トップ→作品一覧→作品詳細→プロフィールと、迷わずたどれる流れにしておきます。

ポートフォリオ自体が、作品のひとつとして見られます。配色・フォント・余白のルールを先に決めて、全ページで揃えてください。

たとえば、使う色はメイン1色＋アクセント1色＋グレー系に絞ります。見出しと本文のフォントサイズを固定し、画像の余白幅を統一する、といったルールです。文字組みが揃っているだけで、「基本を押さえている人」という印象になります。

作品ごとに、「誰のために・何を考えて・どう作ったか」を言語化します。ここが未経験者にとって最大の差別化ポイントです。

書く内容は、想定した利用者、解決したい課題、選んだ配色やレイアウトの理由、制作にかかった期間、使ったツールです。ラフ案や改善前後の比較画像を添えると、考えた過程が伝わります。作品が3点でも、この説明があるだけで評価は変わります。

作って終わりにせず、応募のたびに作品を入れ替える前提で運用します。応募先の業種に近い作品を上に移す、反応が薄かった作品を差し替える、といった調整を続けてください。

公開前には、第三者にひと通り見てもらうことも欠かせません。自分では気づけない導線の迷いや誤字は、人に見てもらうとすぐに見つかります。スクールの講師やデザイン経験のある知人がいれば、応募前に一度フィードバックをもらっておくと完成度が上がります。

基本はWebサイト形式です。応募先への提出用にPDFも用意し、紙は面接持参用の補助と位置づけます。それぞれの役割を見ていきます。

• Webサイト形式が基本
• PDF形式は提出用に用意する
• 紙のポートフォリオは面接持参用

Webサイト形式は、URL1本で共有できるうえに、Webデザイナーとしてのサイト設計力も同時に見せられます。ポートフォリオサイトそのものが作品になるためです。

スマホでの表示確認まで含めて仕上げてください。応募先の担当者がスマホで開くことも多く、崩れていれば作品より先にそちらが目に入ります。作り方には、ノーコードツールを使う方法と自分でコーディングする方法があり、選び方はこの章の最後で扱います。

応募フォームやメールでの提出を求める企業向けに、PDF形式も用意しておきます。Webサイトと内容を揃えて、A4横で書き出すのが一般的です。

ファイル容量が大きすぎるとメールで送れないため、画像は圧縮しておきます。ファイル名に氏名を入れておくと、担当者側で管理しやすくなります。

紙のポートフォリオは、対面の面接でその場で見せられる補助資料です。必須ではありませんが、印刷して持参すると丁寧な印象になります。

Webサイト版やPDF版から主要な作品だけを抜き出し、クリアファイルにまとめる程度で十分です。面接官の手元で開きながら説明できるため、話が進めやすくなります。

選び方の軸は1つです。コーディング力を見せたいなら自作（HTML/CSS）、まず早く公開したいならノーコードを選んでください。

ノーコードの例には、STUDIO・Wix・WordPress（テーマ利用）があります。デザインに集中して短期間で公開できる一方、コーディング力の証明にはなりません。自作は公開までに時間がかかりますが、コードそのものが評価対象になります。

応募先によっても軸は変わります。制作会社はコーディングまで求める求人が多く、事業会社はデザインと企画力を重視する傾向があります。迷う場合は、先にノーコードで公開して応募を始め、あとから自作版に置き換える二段構えが現実的です。

差がつくのは、見た目の派手さではなく「考え方が伝わるか」です。同じ作品数でも、次の5つを押さえているかどうかで評価は変わります。

「なぜこの配色なのか」「なぜこのレイアウトなのか」を説明できる作品は強い作品です。面接でも同じ質問をされる前提で、作品ごとに理由を用意しておいてください。

見る側は「他人」だという意識も欠かせません。自分にとってわかりやすい構成と、初めて見る人にとってわかりやすい構成は別物です。遊び心を入れる場合も、わかりやすさを損なわない範囲にとどめます。

制作会社と事業会社では、見たい作品が違います。制作会社は幅広いテイストへの対応力を、事業会社は自社の事業や顧客に近い作品を見ています。

応募先の事業やサイトのテイストに近い作品を上位に置いてください。同じ5点でも、並び順を変えるだけで「うちに合う人だ」と思ってもらえる確率が上がります。

制作期間、使用ツール、担当範囲の3つは、採用側が実力を見積もるための情報です。「デザインのみ」「コーディングまで」「企画から」の違いで、期待される役割が変わります。

省くと「実務の進め方を知らない」という印象になります。自主制作なら「企画からすべて自分で担当」と書けばよく、隠す理由はありません。

作品は、「誰のどんな課題を・どう考えて・どう解決したか」の流れで見せてください。未経験でも、この流れがあるだけで考える力が伝わります。

ラフ案や改善前後の比較を添えると、説得力が上がります。リデザイン作品なら「元サイトのここが使いにくい→こう直した→結果こう見やすくなった」という3段構成にすると、読む側が迷いません。

スマホ表示に対応したポートフォリオは、それ自体がスキルの証明になります。求人の歓迎条件にはレスポンシブ対応の経験が挙がることが多く、作品で先に見せておけば説明がいりません。

AIツールを補助に使った作品は、どこを自分で判断し、どこを修正したかを明記してください。隠すより誠実に書くほうが評価されます。AIを使いこなしたうえで仕上げの判断ができる人は、これからの現場で歓迎される人材です。

見せ方まで磨いたポートフォリオは、転職での評価だけでなく年収交渉の武器にもなります。では、Webデザイナーは実際にいくら稼げるのか。年収の相場は次の記事で詳しく解説しています。

【関連記事】
Webデザイナーの年収はいくら？働き方別の平均と収入を上げる方法

お手本は、「ポートフォリオ」カテゴリのあるギャラリーサイトで探すのが早い方法です。見るべきは見た目ではなく構成です。探す場所、見る視点、真似の線引きの順に解説します。

ポートフォリオ専用のカテゴリをもつギャラリーサイトを4つ紹介します（カテゴリの存在は2026年9月時点で確認）。

• SANKOU! ポートフォリオサイト・プロフィールサイト：国内サイト中心。業種や色で絞り込めるため、テイストの近い例を探しやすい
• Web Design Clip ポートフォリオ・デザイン：デザイナー個人のサイトが多く、作品の見せ方の参考になる
• STUDIO Showcase ポートフォリオサイトの事例集：ノーコードツールSTUDIOで作られた実例。ノーコードで作る人のお手本に直結する
• BAKUup ポートフォリオ：サイトの種類別に整理されており、構成の比較がしやすい

Pinterestなどの画像検索も入口にはなります。ただし、出典や権利が不明確なものが混ざるため、「探す入口」にとどめて、実物はギャラリーサイトで確認してください。

お手本で真似すべきなのは、配色や装飾ではありません。作品をどう並べ、どう説明しているかという構成です。

見る順番は決まっています。まず作品の並べ方と、トップから作品詳細へたどる導線です。次に、各作品で制作意図・担当範囲・制作期間がどう書かれているかを見ます。最後に、プロフィールやスキル一覧の分量とトーンを確認します。SNSや制作アカウントへの導線をどこに置いているかも、同じ流れのなかで見ておいてください。

この順番で見ながら、「自分のポートフォリオに置き換えるとどうなるか」を考えます。載せる内容の章で挙げた項目と対応させれば、足りない要素がそのまま見えてきます。

線引きははっきりしています。構成、レイアウトの考え方、見せ方の工夫は参考にして構いません。デザイン・文章・画像・コードの流用は著作権の侵害にあたるため、してはいけません。

模写は、技術を身につけるための学習用にとどめてください。「載せてはいけないもの」の章で触れたとおり、模写した作品は元サイトを明記しても公開作品には載せず、自分で設計した作品だけを並べます。

目的は「似せる」ことではなく、「自分の作品に合う見せ方を選ぶ」ことです。お手本を3つ見比べて、自分の作品が一番映える構成を選ぶ、という使い方が正解です。

未経験からの転職は、ポートフォリオの質で勝負が決まります。作り始める前に確認しておきたいのは、応募したい求人が求める作品の水準、自分の現在地、そこまでに必要な準備の3つです。独学で作品の質に不安があるなら、プロの個別指導で作品制作までサポートするスクールも選択肢に入ります。

Winスクールは、プロ講師による個別指導でWebデザインを学べるスクールです。公式サイトによると、受講生の90%以上が未経験からのスタートで、就職率は96%と公表されています。ポートフォリオのコンセプトからデザイン、まとめ方までを講師が個別にサポートする点が、本記事のテーマと直結する部分です。北海道から鹿児島まで全国に教室があり、教室と同じ形式のオンライン個別指導も選べます。

費用面では給付制度を使えます。経済産業省の「リスキリングを通じたキャリアアップ支援事業」の対象コースなら、受講料の最大70%（上限56万円）が支給されます。内訳は2段階です。受講を修了した時点で受講料の50%（上限40万円）が支給されます。さらにWinスクールの紹介（職業紹介）で転職し、1年以上継続して就業した場合に20%（上限16万円）が加算されます。

利用にあたっては、次の要件を満たす必要があります。

• 個別相談会（初回面談）の時点で就業中であること（正社員・契約社員・派遣社員・アルバイト・パートを含む。離職中の方、個人事業主・公務員の方は対象外）
• 雇用主の変更を伴う転職を目指していること（今の職場でのスキルアップが目的の方は対象外）
• 2027年3月末までに受講を修了すること

なお、この制度に雇用保険の加入は不要です。雇用保険の加入期間が要件になるのは、別制度の教育訓練給付制度です。
※参照：Winスクール｜給付金・補助金制度ガイド
※参照：経済産業省｜リスキリングを通じたキャリアアップ支援事業（転職をご検討の方）

まずは無料カウンセリングで、作りたい作品と使える給付制度を相談するところから始めてみてください。

※料金・給付内容は変更される場合があります。最新情報は公式サイトをご確認ください。

制作にかかる日数や作る形式など、ポートフォリオづくりで迷いやすい点を4つ取り上げます。

• ポートフォリオは何日くらいで作れますか？
• 転職用と就活用で違いはありますか？
• ポートフォリオがないと応募できませんか？
• パワーポイントで作ってもいいですか？

Webデザイナーのポートフォリオは、未経験でも自主制作の作品3〜5点で作れます。評価されるのは見た目の派手さではなく、作品ごとの制作意図です。形式はWebサイトを基本に、提出用のPDFを用意しておけば、ほとんどの応募に対応できます。

作る順番は、作品を選び、構成を決め、トーンを揃え、意図を書き、公開して更新する、の5ステップでした。お手本はギャラリーサイトで探し、真似るのは構成までにとどめます。

次の一歩は、1作品目の自主制作に着手することです。題材は架空のお店のサイトでも、既存サイトのリデザインでも構いません。作り始めれば、載せる内容も見せ方も自然と具体的になります。独学で進めるのが不安なら、Winスクールの無料カウンセリングで、作品づくりの進め方を相談してみてください。