Webデザイナー未経験者のポートフォリオの作り方|作品がない時の対処法と必須要素を解説

未経験からWebデザイナーへ転職・就職するとき、選考でほぼ必ず求められるのがポートフォリオです。ただ実務経験がない段階では、載せる作品そのものがなく、何をどう作ればいいか分からず手が止まりがちです。

この記事では、必須要素・作品がないときの用意の仕方・完成までの手順・採用で評価される見せ方までを順に解説します。採用担当者が未経験者のどこを見ているかや、制作を支援するスクールも紹介するので、作品ゼロからでも選考に向けたポートフォリオを作れます。

未経験のポートフォリオ作りは、独学だと方向性に迷いがち。当サイトの無料相談では、Webデザインスクール30校以上を中立の立場で比較し、目的や予算に合う学び方をご案内します。支援の手厚さや費用まで整理しながら絞り込めるので、まずはお気軽にお問い合わせください。

スクール比較ナビの無料相談はこちら

スクール比較ナビ 編集部
執筆・監修

スクール比較ナビ 編集部

スクール比較ナビは、30校以上のWebデザインスクールを比較・分析し、一人ひとりの目的や働き方に合ったスクール選びを完全無料でサポートする相談サービスです。本記事は、日々多くの相談を受けるアドバイザーが、各スクールの特徴・サポート体制・受講者傾向を中立的に調査・監修。特定スクールを推すのではなく、後悔しない選択ができる情報発信を大切にしています。

公式Instagram
目次

Webデザイナー未経験者にポートフォリオが欠かせない理由

未経験の採用選考では、実務経験の代わりにポートフォリオが実力を判断する材料になります。採用担当者は、応募者のセンスや実務への適応力を、言葉ではなく作品そのものから読み取ろうとします。

だからこそ、作品の有無が通過率を大きく左右するといえるでしょう。まずはその役割を正しく理解しておきたいところです。ここでは、スキルと思考力を証明する働きと、書類選考で不利にならないための位置づけという二つの観点から見ていきましょう。

実務経験がなくてもスキルと思考力を客観的に証明できる

採用担当者が知りたいのは、応募者が入社後にどれだけ手を動かせるかです。実務経験がなくても、ポートフォリオがあれば制作物を通じてスキルやツールの習熟度を示せます。

さらに、なぜその配色やレイアウトを選んだのかという意図まで添えれば、思考の過程まで伝わるでしょう。実際に、この職業で働く人の約4割は、入職前に特別な実務経験は必要ないと考えています。

経験の年数ではなく、今どれだけのものを作れるかで勝負できるのがこの職種の強みです。未経験でも、作品次第で十分に評価される余地があるといえます。

参照:Webデザイナー(Web制作会社)|職業情報提供サイト(job tag)

履歴書・職務経歴書だけでは選考を通過しにくい

未経験者は、履歴書と職務経歴書にWeb制作の実績を書けないため、書類だけでは適性が伝わりません。多くのWeb制作会社では、応募時にポートフォリオの提出をあわせて求める運用が一般化しています。

作品を用意していない時点で他の応募者に差をつけられ、面接に進む前に見送られてしまいます。特に応募が集中する求人では、担当者が一人にかけられる時間はごくわずかです。ひと目で実力が伝わる作品集があれば、その短い時間で興味を引けるでしょう。

この仕事では、学歴や資格よりも、利用者に支持されるサイトを作れる個人のスキルが問われます。学習の成果を形にしておくことが、選考の土俵に立つための前提だといえます。

未経験者のポートフォリオに必ず入れたい構成要素

ポートフォリオは、作品を並べるだけでは十分ではありません。採用担当者は、作品の出来栄えだけでなく、応募者の人柄や仕事への向き合い方まで見ています。あなたがどんな人物で、何ができ、どう連絡すればよいかまでを、一つの提案書としてまとめることが大切です。

必要な情報が欠けていると、実力があっても評価につながりにくくなります。ここでは、未経験者が最低限そろえたい要素を、自己PR・制作解説・スキル情報の三つに分けて見ていきましょう。

プロフィールと前職の経験を活かした自己PR

冒頭には、氏名や志望する働き方に加えて、簡潔な自己PRを載せます。未経験だからといって経歴を隠す必要はなく、前職の経験を強みに変えることが有効です。

例えば、接客業ならユーザー目線での配慮、営業やマーケティングなら成果から逆算する提案力が挙げられます。こうした経験を、Web制作に活かせる素養として翻訳しましょう。この職種には、関連職種以外の他業種から転職してきた人も少なくありません。

自己PRは長く書く必要はなく、応募先が知りたい点に絞ると読みやすくなります。なぜWebデザイナーを目指すのか、その動機を一言添えると、人物像がより伝わるでしょう。異業種の経歴は、同じ未経験者のなかであなたを際立たせる材料になります。

作品となぜそのデザインかを語る制作解説

作品は画像を載せるだけで終わらせず、制作の背景を添えることが大切です。誰に向けて、どんな課題を解決するために、なぜその表現を選んだのかを言語化することが評価の核です。

ターゲット設定や工夫した点まで触れると、担当者は完成物の裏にある思考をたどれます。実際の制作でも、依頼主との打ち合わせで目的を確認し、コンセプトを固める工程が重視されます。

解説は難しく考えず、制作前に立てた狙いと、それをどう形にしたかを短くまとめれば十分です。デザインの正解は一つではないからこそ、判断の理由を示せる応募者は説得力を持つでしょう。見た目の完成度と同じく、考え方を伝える解説に力を入れると効果的です。

スキル・使用ツールと問い合わせ先

実務への適性を判断してもらえるよう、扱えるスキルと使用ツールを一覧で整理しましょう。次のようにカテゴリーごとに分けると、習熟度が伝わりやすいです。

  • デザインツール:Photoshop(写真加工・バナー制作)、Illustrator(ロゴ・アイコン制作)、Figma(画面設計・共同編集)
  • コーディング:HTML・CSS(マークアップと装飾)、扱えればJavaScriptやレスポンシブ対応まで
  • サイト構築:WordPressやSTUDIOなど、公開や更新に使えるCMS・ノーコードツール
  • 補足情報:各ツールの習熟度(実務相当・学習中など)や使用歴、作例へのリンクもあわせて明記

これらは、Webデザイナーが実務でよく使う代表的な道具でもあります。あわせて、メールアドレスや問い合わせフォームなどの連絡先も必ず載せましょう。

資格や受賞歴、運用しているSNSアカウントがあれば、記載すると信頼につながります。興味を持ってもらっても、連絡手段がなければ次につながりません。見た人がすぐ行動できる導線まで用意しておきましょう。

載せる作品がない未経験者が作品を用意する方法

未経験者が最初にぶつかる壁が、掲載する作品そのものがないという問題です。多くの人は、実務の依頼を待たなければ作品は作れないと思い込みがちです。しかし、目的とターゲットを自分で設定すれば、依頼がなくても実践的な作品は生み出せます。

採用担当者も、完成度が伴えば制作のきっかけまでは問いません。大切なのは、練習で終わらせず、誰かの課題を解決する前提で作ることです。ここでは、架空案件による制作と、身近な題材を実績化する方法の二つを軸に見ていきましょう。

架空案件や既存サイトの仮想リニューアルで制作する

依頼がなくても、架空の案件を自分で設定すれば実践的な作品を作れます。近所のカフェや美容室を題材に、集客という目的を掲げてサイトを一から設計する方法です。実在する店舗のサイトを題材に、課題を洗い出して仮想的にリニューアルする進め方も効果的です。

既存サイトのリニューアルなら、改善前と改善後を並べて見せられます。どこをなぜ変えたのかを添えると、課題を見つけて解決する力が伝わるでしょう。

ターゲットや目的を具体的に決めれば、練習ではなく提案として成立します。現実味のある設定ほど、担当者は入社後の働き方を思い描きやすくなるでしょう。

模写・バナー・知人や地域店舗の依頼で実績を増やす

大きな作品が難しい段階では、小さな制作物を積み重ねます。優れたサイトの模写は配色やレイアウトの引き出しを増やし、バナー制作は短時間で仕上げやすい題材です。ただし、模写はそのまま載せず、練習として学んだ点を自分の作品へ活かすのが基本です。

真似ただけの作品を実績のように見せると、かえって評価を下げてしまいます。慣れてきたら、知人の名刺やSNS用画像、地域の店舗のチラシなど、身近な依頼を作品化するのも有効です。

実際に使われた制作物は説得力が高く、ポートフォリオに厚みを加えます。なお他者の依頼を載せる際は、事前に公開の可否を確認しておきましょう。

未経験からポートフォリオを作る手順

必要な要素と作品の用意の仕方が分かれば、あとは完成まで順に進めるだけです。ポートフォリオ作りは、やみくもに手を動かすと途中で方向を見失いがちです。全体の順番をつかんでから取りかかると、無駄なくゴールへ近づけます。

次の5つは、思いつきの順番ではなく、実際のWeb制作の工程に沿った並びです。実際の制作現場でも、目的確認からコンセプト設定、動作確認、公開までが主要な工程となります。

ここでは、目的の設定から公開後の改善までを5つのステップに分け、未経験者が迷わず作業できる流れとして見ていきましょう。

STEP1 目的と応募先を決め、アピール軸を固める

最初に、誰に見せるポートフォリオなのかを決めます。制作会社の正社員を目指すのか、フリーランスとして案件を受けたいのかで、載せる作品も見せ方も変わるためです。Webデザイナーは、自営やフリーランスとして働く人が6割を超え、正社員も約4割を占めています。

求人票や企業の制作実績を見ると、どんなデザインが好まれるかが見えてきます。応募先の傾向をつかんだうえで、自分のどの強みを前面に出すかを定めましょう。

志望先の業種やテイストに寄せておくと、採用担当者はあなたの活躍を想像しやすくなります。方向性が固まると、この後の作品選びや構成に一本の筋がとおり、ちぐはぐな印象を避けやすくなるでしょう。

参照:Webデザイナー(Web制作会社)|職業情報提供サイト(job tag)

STEP2 掲載する作品を3〜5点用意する

軸が決まったら、掲載する作品を3〜5点そろえます。数をむやみに増やすより、アピール軸に沿った作品を選ぶほうが効果的です。手元に作品がなければ、架空案件や仮想リニューアル、模写やバナーで用意しましょう。

詳しい作り方は前の章で解説したとおりです。点数を欲張ると、一つひとつの完成度が下がり、全体の印象まで弱まります。最初は自信のある一点を核に据え、方向性の近い作品を足していくと迷いません。

この時点で見せる順番までざっくり決めておくと、後の工程が楽になります。応募先に見せて恥ずかしくない完成度を、取捨選択の基準にするとよいでしょう。

STEP3 各作品に制作意図・課題・工夫を言語化して添える

作品がそろったら、一点ごとに解説文を添えていきましょう。設定した課題やターゲット、工夫や使用ツールを簡潔にまとめると、担当者が制作の意図をたどれます。この作業は、構成要素の章で触れた制作解説を、作品単位で書き起こす工程です。

解説の型を決めておくと、作品ごとにぶれず、読み手も比べやすくなります。課題・狙い・工夫・結果の順にそろえると、短くても要点が伝わるでしょう。

言葉にすると自分の考えの浅い部分にも気付けるため、作品自体の見直しにもつながります。手を動かした量より、考え抜いた跡が伝わる解説を目指しましょう。

STEP4 公開形式を選びポートフォリオサイトに組み立てる

解説まで整えば、公開する形式を選んで一つにまとめましょう。Webデザイナー志望なら、自作のポートフォリオサイトとして公開すると制作スキルそのものを示せます。サイト型なら、URLひとつで共有でき、更新もしやすいのが利点です。

実務でも、HTMLやCSSでの制作や動作確認、公開までが主要な工程となります。コーディングに不安があれば、STUDIOなどのノーコードツールを使うと、デザインに集中しながら見栄えのするサイトを作れるでしょう。

トップページから各作品へ迷わずたどれる導線を意識し、スマートフォンでも崩れない表示に整えておくと安心です。独自ドメインを取れば、より本格的な印象を与えられます。

STEP5 第三者に見てもらい改善を繰り返す

完成したと思っても、自分では気付けない改善点は残りやすいです。現役のWebデザイナーやスクールの講師など、第三者に見てもらいフィードバックを受けましょう。できれば志望する分野で働く人に見てもらうと、実務の視点でのアドバイスをもらえます。

客観的な指摘は、独りよがりな表現や分かりにくい導線を洗い出す助けになります。SNSや勉強会で作品を公開して、感想を集めるのも効果的です。

もらった意見をもとに手を加え、再び見てもらうサイクルを回すほど、完成度は着実に上がります。相談相手が見つからないときは、後述するスクールの添削を頼る手もあるでしょう。

未経験者が採用で差をつけるポートフォリオの見せ方

未経験者は実務の作品を載せられない分、同じ題材でも見せ方の工夫で印象が変わります。採用担当者は多くのポートフォリオに目を通すため、印象に残る工夫があるかどうかが分かれ目になります。

必須要素をそろえた上で採用に近づくには、担当者の視点を意識した演出が欠かせません。細部への気配りは、そのままデザイナーとしての力量として受け取られます。ここでは、応募先への最適化やストーリーの伝え方など、質を一段引き上げる四つの視点を見ていきましょう。

応募先企業に合わせて作品と見せ方を最適化する

同じポートフォリオでも、応募先によって刺さる作品は変わります。コーポレートサイトを多く手がける会社なら、信頼感のある作品を主役に据えるとよいでしょう。ECや広告に強い会社なら、訴求力のあるビジュアルを前面に出す構成が効果的です。

応募先の求人内容や自社サイトを見れば、どんなスキルを重視しているかがつかめます。その要素に合う作品を先頭に置くと、担当者は最後まで目を通しやすくなります。

大切なのは、何を載せるかだけでなく、どれを目立たせ、どんな順で見せるかという視点です。応募先ごとに主役を入れ替えると、志望度の高さも伝わります。

ストーリーテリングで制作背景と成長を魅せる

作品を単体で並べるのではなく、制作の物語として見せると印象に残りやすいでしょう。どんな課題に直面し、どう工夫し、結果として何が良くなったのかという流れで語る方法です。

制作意図の言語化を一歩進め、試行錯誤や学びまで描くと、成長できる人材だという期待につながるでしょう。うまくいかなかった過程も、正直に振り返ると誠実さが伝わります。

数字で成果を示せる場合は、閲覧数や反応の変化などを添えると説得力が増すでしょう。完成物だけでは伝わらない粘り強さや改善力を物語の形で示せると、読み手の記憶に残る一冊へ近づきます。

作品は量より質で厳選する

未経験者ほど多くの作品で不足を補いたくなりますが、逆効果になりがちです。完成度の低い作品が混じると、全体の評価まで下がってしまいます。作品が少なく感じても、無理に数を埋める必要はありません。

一点を深く作り込んだ跡は、量でごまかした十点より強く印象に残ります。採用担当者は、完成度の高い一点からあなたの伸びしろを読み取ります。

載せるのは自信を持って見せられるものだけに絞り、一つずつの質を高めるほうが得策です。まずは代表作を一つ磨き上げ、そこを起点に増やしていくと迷いません。数ではなく、選び抜いた質で勝負しましょう。

採用担当者が見やすい導線・第一印象を整える

中身が良くても、見づらいポートフォリオは最後まで読まれません。トップページの第一印象を整え、各作品へ迷わずたどれる導線を用意することが重要です。最初の画面で何ができる人かが伝わると、担当者は続きを読み進めます。

読み込みに時間がかかったり、リンクが切れていたりすると、それだけで評価を落とします。文字の大きさや余白にゆとりを持たせ、情報を詰め込みすぎないことも大切です。

写真や図版の画質をそろえるだけでも、全体が引き締まって見えます。見やすさや分かりやすい導線は、利用者を迷わせないための基本原則です。探させない設計そのものが、Webデザイナーとしての配慮を示す材料になります。

ポートフォリオ制作・添削のサポートが手厚いおすすめWebデザインスクール

独学での制作や添削に不安があるなら、ポートフォリオ支援に強いスクールを頼るのも一つの方法です。一人で進めると、どこを直せばよいか分からず手が止まることもあります。プロの添削を受けられる環境なら、迷いを早く解消でき、完成までの時間も縮まるでしょう。

対象講座であれば、国の教育訓練給付制度などで受講料の一部が支給され、費用の負担を抑えられます。ここでは、支援体制に定評のある3校を取り上げ、それぞれの特徴とおすすめのタイプを見ていきましょう。

スクール おすすめのタイプ ポートフォリオ支援 受講料・給付金(税込)
侍エンジニア 手厚い伴走で挫折を防ぎたい人 専属講師・学習コーチ・QAのトリプル支援で制作 総額312,000円〜415,800円。24週間プランは経産省リスキリング事業で最大70%OFF(実質151,200円)
WEBCOACH 制作量をこなし実践力を付けたい人 現役プロが課題を添削し案件も5件提供 入会金248,800円(今スグ割で198,800円)+受講料226,800円〜399,600円。給付金の記載なし
クリエイターズファクトリー チーム制作で実務感覚を得たい人 チーム制作で公開できる作品を仕上げる 受講料360,000円(月15,000円〜)。14日間返金保証あり

なお料金はキャンペーンや改定で変わることがあります。最新の金額や、自分に合うプランの選び方は、当サイトの無料相談でまとめて確認できます。

侍エンジニア

出典:侍エンジニア

侍エンジニアは、マンツーマン指導を軸にした支援の手厚さが特徴です。現役デザイナーの専属インストラクターに、学習コーチと24時間質問できるQ&A掲示板を加えたトリプルサポートで学べます。

Webサイトを0から設計する課題を通じて、卒業までにオリジナルのポートフォリオを作れるでしょう。料金はWebデザイン転職コースの場合、入学金99,000円と受講料をあわせた総額で示されています。12週間プランが312,000円、24週間プランが415,800円です。

24週間プランは経済産業省のリスキリング支援事業の対象で、条件を満たせば受講料の最大70%(上限56万円)の補助を受けられます。補助を利用すると、実質151,200円まで負担を抑えられます。

対象は在職中で転職を目指す方で、雇用形態を問いません。実際に、配達業から転職した卒業生からは、一人では不安だった案件をインストラクターに教わりながら進められたという声も上がっています。

参照:リスキリングを通じたキャリアアップ支援事業(経済産業省)

WEBCOACH

出典:WEBCOACH

WEBCOACHは、フリーランスや副業を見据えた実践重視のスクールです。Webデザインをはじめ47種類のスキルを学べ、制作課題を数多くこなすカリキュラムが組まれています。

受講中の制作物は現役のプロが添削するので、改善を重ねながらポートフォリオを磨き込めるでしょう。案件提供やポートフォリオ作成の支援もあり、卒業までに掲載できる作品がそろいます。料金は入会金248,800円に受講料を加えた形で、初日に予約して申し込むと今スグ割で入会金が50,000円割引になります。

受講料は6か月コースが1か月37,800円、9か月コースが36,000円、12か月コースが33,300円です。それぞれ期間分をあわせると総額226,800円から399,600円で、分割払いは月々9,800円からとなります。受講生からは、最大の壁だったポートフォリオ制作を、コーチのフィードバックを受けながら完成させられたという声も聞かれます。

クリエイターズファクトリー

出典:クリエイターズファクトリー

クリエイターズファクトリーは、受講後も続く長期的なサポート体制が魅力のスクールです。完全オンラインと大阪通学のどちらにも対応し、週1〜2回のグループセッションと動画視聴で学べます。

学習面は、個別のフィードバックやキャリア相談に、ワークショップなどのクラスサポートを重ねた二重の体制です。カリキュラム後半には、3〜4人のチームで先生をクライアント役に、ヒアリングから公開まで1つのWebサイトを作るチーム制作もあります。

課題から制作研修、個人制作へと段階的に進み、その成果はポートフォリオとして残るでしょう。作成サポートや制作物のフィードバックも受けられるので、見せ方まで磨けます。料金はWebクリエイティブコースが総額360,000円で、24回払いなら月々15,000円からです。自分のペースで学ぶ動画学習コースもあり、こちらは総額168,000円、月々7,000円からとなります。

14日間の全額返金保証もあり、まずは試したい方でも始めやすくなっています。受講生からは、卒業後もポートフォリオ制作のフィードバックを受けられ、自信がついたという声が寄せられています。

3校それぞれに強みがあり、自分にどこが適しているか迷う方も少なくありません。当サイトの無料相談では、目指す働き方や予算、必要なサポートの度合いをうかがいます。

そのうえで、あなたに適したスクールを中立の立場で一緒に絞り込んでいきましょう。複数校の比較や費用の見比べも、まとめてご案内できます。学び方選びの整理に、ぜひご活用ください。

スクール比較ナビの無料相談はこちら

40代未経験からWebデザイナーは遅い?受講者のリアルとおすすめスクール6選!

50代・未経験からWebデザイナーは目指せる|現実的なルートと学び方・補助金まで解説

未経験のポートフォリオ制作でよくある質問

ポートフォリオ作りには、細かな判断に迷う場面がいくつもあります。作品は何点必要か、どの形式でまとめるかといった疑問は、未経験者が共通して抱きやすい部分です。

基本的な考え方を押さえておくと、制作の途中で手が止まりにくくなります。同じ悩みでつまずく人は多いので、先に知っておくと安心です。

答えは応募先や目的によっても変わるため、自分の状況に置き換えて読むと役立ちます。ここでは、本文で触れきれなかった細かい点を、質問ごとに見ていきましょう。

ポートフォリオに載せる作品は何点あればよい?

未経験者の場合、3〜5点を目安に揃えるとよいでしょう。数の多さより一つずつの完成度が見られるため、質の低い作品での水増しは避けたいところです。点数よりも、それぞれの作品にどれだけ意図が込められているかが評価されます。

だからこそ、無理に数をそろえる必要はありません。まずは自信のある主役の一つを丁寧に作り込み、そこへ軸に沿った作品を足していくとよいでしょう。

ジャンルをそろえると専門性が伝わり、あえて幅を持たせると対応力を示せます。応募先の作風にあわせて、掲載する作品や見せる順番を調整する柔軟さも持っておきましょう。

紙とWebのどちらで作るべき?

Webデザイナーを目指すなら、公開URLを持つWeb形式を基本にしましょう。形式ごとの向き不向きは、次の通りです。

  • Web形式:URLひとつで共有でき、サイトを作れること自体がスキルの証明になる(更新やスマホ表示への対応も示しやすい)
  • PDF形式:レイアウトが崩れにくく、相手の環境を選ばず開いてもらえる(ただし作品が多いと容量が大きくなるため、共有時はファイルサイズに注意)
  • 紙・冊子:対面で手渡しでき、その場で口頭の補足を添えられる(印刷物を扱う制作会社では好まれることもある)

Webデザイナー志望であれば、まずはWeb形式を主軸に用意するのが基本です。そのうえで、応募先の傾向に応じて印刷用のPDFも添えておくと、幅広い相手に落ち着いて対応できます。迷ったときは、公開URLと提出用のPDFを両方そろえておくと安心です。

PowerPointやPDFでまとめても問題ない?

PowerPointやPDFでまとめても問題ありません。レイアウトの自由度が高く、短時間で体裁を整えやすいのが利点です。

PDFはレイアウトが崩れにくく、相手の環境を選ばずに開いてもらえるのも強みです。一方でWebデザイナー志望の場合は、自作サイトやFigmaでまとめたほうが制作スキルを直接示せます。

制作物の一覧を手早く共有したいときは、こうした形式が役立ちます。選考の段階や相手に合わせて形式を選びましょう。PowerPointやPDFは補助的な形式と位置づけ、主軸はWeb形式に置くと使い分けられるでしょう。

まとめ|未経験でもポートフォリオは作れる。まず1作品から始めよう

未経験でも、ポートフォリオは工夫次第で作れます。実務経験の代わりに、作品でスキルと思考力を示せれば、採用担当者に実力は伝わります。載せる作品がなくても、架空案件や仮想リニューアル、模写やバナーで用意でき、制作意図の言語化と質で評価につなげられます。

大切なのは、完璧を目指して立ち止まらず、まず1つを仕上げて動き出すこと。目的の設定から見直しまでの手順で一つずつ形にし、応募先に合わせた見せ方まで整えれば、実務経験の不足は十分に補えます。今日できる一歩から始めてみてください。

独学で方向性に迷うときは、スクールの添削を頼る手もあります。当サイトの無料相談では、30校以上の比較データから、あなたの目的や予算に合う学び方を中立の立場でご提案します。ポートフォリオ支援の手厚さや費用も見比べられるので、迷ったときの整理役として気軽にお使いください。

スクール比較ナビの無料相談はこちら

もっといろんな記事やスクールをチェックしたい方へ

コラム一覧からほかの記事を探すか、掲載スクールを比較してみましょう