- ブログ
Webデザイナーのポートフォリオの作り方｜未経験者向けに載せる内容・作品数・作品例を解説
Webデザイナーを目指して就職や案件獲得に動き出すと、必ず求められるのがポートフォリオです。
とはいえ、何を何点載せればいいのか、何で作ればいいのか迷う方も多いのではないでしょうか。
結論から言うと、ポートフォリオは作品の「数」より、制作意図まで伝わる「見せ方」で評価が決まります。
この記事では、ポートフォリオに載せる内容や作品数、作り方の手順とツールを解説します。
Campus受講生の作品例や、採用されやすくするコツ、著作権などの注意点もあわせて紹介します。
Webデザイナーのポートフォリオとは？目的と必要な理由
まずは、ポートフォリオの基本と、なぜ必要なのかを解説します。
ポートフォリオとは、実力を伝えるための作品集
Webデザイナーのポートフォリオとは、自分が制作した作品をまとめた資料のことです。
就職や転職の選考、案件の受注で、自分のデザイン力や制作スキルを具体的に伝えるために使います。
単なる作品の一覧ではなく、「この人に任せたい」と思ってもらうための自己紹介資料と考えましょう。
作品がないと、未経験者は選考で不利になる
Webデザイナーの選考や案件の受注では、実務経験の有無にかかわらずポートフォリオを求められるのが一般的です。
口頭や文章の説明だけでは、どの程度のスキルがあるのか相手に伝わらないからです。
たとえば「LPを作れます」と伝えるより、実際に作ったLPを見せるほうが一目で実力が伝わります。
実務経験のない未経験者ほど、ポートフォリオが実力を示す唯一の材料になります。
未経験からWebデザイナーになるまでの全体の流れは、Webデザイナーになるには？未経験・独学でも目指せる学習方法を解説で紹介しています。
Web版とPDF版の両方を用意しておくと安心
ポートフォリオには、Webサイト形式の「オンラインポートフォリオ」と、PDFや紙にまとめる形式があります。
近年は、URLで提出できるWeb版を用意するのが一般的です。
Web版なら、サイトの動きや使いやすさまで含めて見てもらえます。
一方で、書類選考でPDFの提出を求められたり、面接で紙の資料を使ったりする場合もあります。
次のように使い分けられるよう、両方を用意しておくと安心です。
| 形式 | 向いている場面 |
|---|---|
| Web版（オンラインポートフォリオ） | 応募フォームやメールでのURL提出、クラウドソーシング、SNSからの受注 |
| PDF版・紙 | 書類選考でのファイル提出、対面の面接、オフラインで見せたいとき |
Webデザイナーのポートフォリオに載せる内容
ポートフォリオに載せる基本の内容は、次の3つです。
プロフィールと連絡先
プロフィールでは、どんな人が作ったポートフォリオなのかを簡潔に伝えます。
主に載せる項目は、次のとおりです。
- 名前（活動名でも可）
- 経歴（前職の経験も強みになる）
- 得意な分野や、目指しているデザイナー像
- メールアドレスなどの連絡先
- SNSやブログのURL（任意）
顔写真や生年月日は必須ではないため、載せるかどうかは自分で判断しましょう。
自己PRの書き方は、未経験のWebデザイナーが自己PRを書く時のコツは？例文も紹介！が参考になります。
スキルと使えるツール
使えるツールと、それを使って何ができるのかを具体的に書きます。
たとえば「Figma歴1年」と書くより、「Figmaでワイヤーフレームからデザインカンプまで作成できる」と書くほうが伝わります。
- デザインツール：Figma、Photoshop、Illustratorなど
- コーディング：HTML/CSS、JavaScript、WordPressなど
- その他：SEOやSNS運用の知識、資格など
Webデザイナーに求められるスキルは、Webデザイナーに必要なスキル一覧！求められる人材になるために勉強すべきことで確認できます。
作品と、作品ごとの説明
ポートフォリオの中心は、もちろん作品です。
ただし、画像を並べるだけでは、どう考えて作ったのかが伝わりません。
作品ごとに、次の項目を100字程度で簡潔に添えましょう。
| 項目 | 書く内容の例 |
|---|---|
| 目的・背景 | 架空のカフェの予約数を増やすためのサイト |
| ターゲット | 20〜30代の女性、スマホで店を探す人 |
| 担当範囲 | デザイン、コーディング（個人制作なら全工程） |
| 工夫した点 | 予約ボタンを画面下に固定し、迷わず予約できるようにした |
| 使用ツール | Figma、Photoshop、HTML/CSS |
| 制作期間 | 約3週間 |
採用担当者が知りたいのは、見た目の美しさだけでなく「なぜこのデザインにしたのか」という考え方です。
ポートフォリオの作品数と、未経験者に求められるレベル
次に、作品数の目安と、未経験者に求められるレベルを解説します。
作品数は10点前後が目安。未経験はまず質の高い3〜5点から
作品数に決まりはありませんが、Web制作会社やクリエイター向け求人サイトでは10点前後を目安としています。
一方で、選考で担当者がじっくり見る作品は数点に限られるともいわれます。
そのため、未経験者はまず質の高い作品を3〜5点そろえ、学習を続けながら増やしていくのが現実的です。
完成度の低い作品で数を増やすと、かえって評価を下げることがあるので注意しましょう。
出典：株式会社LIG「Webデザインポートフォリオの参考作品19例」、MOREWORKS「Webデザイナーのポートフォリオの作り方」
作品がまだない方は、ポートフォリオの作品がない未経験者へ！実績ゼロからの作り方例を解説を参考にしてください。
未経験者は「基礎的なデザインと実装ができる」レベルを目指す
未経験者に求められるのは、「細かく指導しなくても、基礎的なデザインと実装ができる」レベルです。
具体的には、次のことができると安心です。
- Figmaなどでデザインカンプ（完成見本）を作れる
- バナーやボタンなどのパーツを作れる
- HTML/CSSで、デザインをもとにひととおりコーディングできる
コーディングをしない求人もありますが、実装までできるほうが応募できる仕事の幅は広がります。
新卒や未経験での就職の実情は、新卒・未経験でWebデザイナーとして就職できる？最短でWebデザイナーになる方法で解説しています。
Webデザイナーのポートフォリオの作り方｜5ステップ
ポートフォリオは、次の5つのステップで作ると迷わず進められます。
①目的と見せる相手を決める
最初に、就職・転職用なのか、案件獲得用なのかを決めます。
制作会社・事業会社・個人のクライアントなど、相手によって見せるべき作品が変わるからです。
目的が決まると、載せる作品や並べる順番も決めやすくなります。
②載せる作品を選ぶ・作る
目的に合わせて、自信のある作品を選びます。
Webサイト・LP・バナーなど、種類の違う作品をそろえると対応できる幅を伝えられます。
足りない場合は、架空のお店や既存サイトのリデザインなど、自主制作で作品を増やしましょう。
③作品ごとの説明を書く
作品と、作品ごとの説明で紹介した項目にそって、各作品の説明を書きます。
説明は長くしすぎず、目的と工夫した点が一目でわかるようにまとめましょう。
④作成方法を選んで形にする
ポートフォリオの主な作成方法は、次のとおりです。
| 作成方法 | 特徴 | 向いている人 |
|---|---|---|
| HTML/CSSで自作 | サイト自体がコーディング力の証明になる | コーディングもアピールしたい人 |
| WordPress | 作品の追加や更新がしやすい | WordPressの案件を受けたい人 |
| STUDIO・Wixなど | コードを書かずにデザインを形にできる | デザインを中心に見せたい人 |
| MATCHBOXなどのポートフォリオサービス | テンプレートに沿って短時間で作れる | まず早く形にしたい人 |
| Figma・Canvaで作るPDF | 印刷やファイル提出に使える | 書類選考用の資料も必要な人 |
コーディングもできるなら、自作やWordPressで作ると、サイトそのものが実力の証明になります。
ノーコードツールやポートフォリオサービスは早く作れる反面、テンプレートのままでは個性を出しにくい点に注意しましょう。
⑤公開して、第三者に見てもらう
完成したら公開し、スマホとパソコンの両方で表示を確認します。
リンク切れや誤字がないかをチェックしたら、現役のデザイナーなど第三者に見てもらいましょう。
自分では気づけない改善点がわかり、完成度が大きく上がります。
Campus受講生の作品例と、参考になるポートフォリオサイト
ポートフォリオを作る前に、ほかの人の作品や見せ方を参考にしましょう。
Campus受講生の作品例
Campusでは、講座の課題で制作したサイトやバナーを、そのままポートフォリオに活用できます。
課題の作品に自主制作を組み合わせると、学習量と主体性の両方を伝えられます。
Campus受講生の須藤さんは、友人のサイトをWordPressで作った経験をきっかけにデザインを学び直しました。
その後、受講1年後に会社員を卒業し、月収30万円を実現しています。
詳しくは、子育てしながら月収30万円を実現｜広告営業からWebデザイナーへ転身した須藤さんの体験談で紹介しています。
MUUUUU.ORG
縦長のレイアウトのWebデザインを集めたギャラリーサイトです。
LPやサービスサイトの構成を参考にしたいときに役立ちます。
STUDIO Showcase
ノーコードツール「STUDIO」で作られたサイトの事例集です。
ポートフォリオのカテゴリがあり、デザイナーの作品サイトをまとめて見られます。
SANKOU!
国内のWebデザインをカテゴリ別に探せるギャラリーサイトです。
ポートフォリオサイト・プロフィールサイトのカテゴリから、個人の作品サイトを探せます。
Web Design Clip
Webデザインを業種やカテゴリで絞り込んで探せるギャラリーサイトです。
ポートフォリオのカテゴリで、レイアウトや配色の参考例を探せます。
採用されやすいポートフォリオにする4つのコツ
ポートフォリオの評価を上げるコツは、次の4つです。
応募先に合わせて、最初に見せる作品を選ぶ
担当者は多くの応募書類を見るため、最初の数点で印象が決まりやすくなります。
応募先の業種や得意分野に近い作品を、一番目立つ位置に置きましょう。
見た目だけでなく、使いやすさまで設計する
実務経験がないと、自分の好みを優先した作品になりがちです。
どれだけ美しくても、情報が探しにくいサイトや表示が遅いサイトはユーザーのストレスになります。
ターゲットが迷わず目的を達成できるかという視点で、作品とポートフォリオ自体を設計しましょう。
制作意図を自分の言葉で説明できるようにする
面接では、作品について「なぜこの配色にしたのか」「どこを工夫したのか」をよく聞かれます。
ターゲットやコンセプトを、自分の言葉で説明できるよう準備しておきましょう。
面接で伝える志望動機の作り方は、Webデザイナーの志望動機の書き方｜未経験・経験者別に例文を紹介で解説しています。
学習の成果に合わせて定期的に更新する
ポートフォリオは、一度作って終わりではありません。
新しい作品ができたら追加し、完成度の低い古い作品は入れ替えましょう。
更新を続けること自体が、学び続ける姿勢のアピールにもなります。
Webデザイナーのポートフォリオ作りの注意点
ポートフォリオを公開する前に、次の3点を確認しましょう。
個人情報や機密情報を載せない
アルバイト先や仕事で作った作品を載せる場合は、個人情報や公開前の情報が含まれていないか確認します。
必要に応じて、社名や数値をダミーに置き換えましょう。
公開できない作品は、パスワードをかけたページや面接時のみの提示にする方法もあります。
著作権と、作品を載せる許可を確認する
著作権は、原則として作品を作った人（著作者）に発生します。
ただし、会社員が職務として作った作品は、会社が著作者となる場合があります（職務著作）。
また、フリーランスの案件では、契約で著作権をクライアントに譲渡していることもあります。
仕事で作った作品を載せるときは、契約内容を確認し、必要に応じてクライアントの許可を取りましょう。
写真やイラストなどの素材も、利用規約でポートフォリオへの掲載が認められているか確認が必要です。
既存サイトを模写した作品は、自分のオリジナル作品と誤解されないよう「模写」と明記しましょう。
出典：e-Gov法令検索「著作権法」（第15条・第17条・第61条）
よくあるNGパターンを避ける
次のようなポートフォリオは、評価が下がりやすいので注意しましょう。
- 画像だけで、制作の意図や工程の説明がない
- 未完成の作品や、完成度の低い作品が混ざっている
- 使用ツールや制作期間が書かれていない
NGパターンの詳しい解説と改善方法は、ポートフォリオの作品がない未経験者へで紹介しています。
Webデザイナーのポートフォリオに関するよくある質問
最後に、ポートフォリオについてよくある質問に回答します。
ポートフォリオは何で作るのがいいですか？
コーディングもアピールしたいなら、HTML/CSSでの自作やWordPressがおすすめです。
デザインを中心に見せたい場合や早く作りたい場合は、STUDIOやWixなどのノーコードツールも便利です。
スクールの課題をポートフォリオに載せてもいいですか？
載せても問題ありませんが、課題だけだと他の受講生と作品が似やすくなります。
課題にアレンジを加えたり、自主制作の作品を組み合わせたりして、自分らしさを出しましょう。
ポートフォリオに載せてはいけないものはありますか？
許可のない仕事の作品、機密情報を含む作品、利用規約に反する素材を使った作品は載せないようにしましょう。
模写の作品を、自分のオリジナルとして載せるのもNGです。
ポートフォリオを作るのにどれくらいかかりますか？
作品がそろっていれば、ポートフォリオ自体は1〜2週間ほどが目安です。
作品作りから始める場合は、1ヶ月以上かかると考えておきましょう。
Campusなら未経験からのポートフォリオ作りを徹底サポート！
「Campus」は、Webデザイナーに必要な知識を幅広く学べるオンラインのWebデザインスクールです。
入会金198,000円（税込）を支払った後は、月額5,500円（税込）で400本以上の動画講義が学び放題です。
Campusには卒業がないため、自分が納得するまで学び続けられます。
Campusなら選ばれるポートフォリオの作り方を現役デザイナーから学べる
Campusでは、ポートフォリオの作り方をセミナーで学べるうえ、課題で作った作品をそのままポートフォリオに活用できます。
課題やポートフォリオは、講師から個別に添削を受けられます。
- 「ポートフォリオを作ったことがなく、何から始めればいいかわからない」
- 「どんな作品を載せればいいのか見当がつかない」
- 「独学で作ったけれど、このレベルで通用するのか不安」
このような悩みがある方は、現役デザイナーの講師に相談してみてください。
Campusが選ばれている理由は、次のとおりです。
- Webデザインのほか、プログラミング、動画編集、マーケティング、SNS運用、生成AIなど幅広いWebスキルが学び放題（400本以上の動画）
- 講師は現役のフリーランスWebデザイナー
- 卒業がないので、自分が納得するまで学び続けられる
- 課題やポートフォリオの添削を受けられる
- クラウドソーシング攻略や営業、単価交渉など、案件獲得の方法まで学べる
実際に受講した方の声は、受講生の体験談で紹介しています。
今なら「公式LINE追加」で、副業に役立つ3つの動画講義を無料プレゼント中です。
LINEを登録して無料で特典動画を受け取るまとめ｜ポートフォリオは「数」より「伝わる見せ方」で差がつく
Webデザイナーのポートフォリオは、就職や案件獲得で自分の実力を伝えるための大切な資料です。
未経験者は、まず質の高い作品を3〜5点そろえ、作品ごとに制作意図を添えることから始めましょう。
作品は目的と見せる相手に合わせて選び、公開後も学習の成果に合わせて更新していくことが大切です。
「ひとりで作るのは不安」という方は、添削を受けながら作れる環境を活用するのも近道です。
現役デザイナーの添削を受けながらポートフォリオを作りたい方は、ぜひCampusをご検討ください。
卒業のないサブスク型なので、学習からポートフォリオ作り、案件獲得まで自分のペースで進められます。
＞＞Campusの無料相談はこちら
投稿者プロフィール
-
未経験からWebスキルを学び半年で月収100万円達成、その後スクールを一から立ち上げ２年で500人が受講。メディア実績・美人百花へ掲載
・NewSweeksへ掲載
・トリンドル玲奈さんとテレビで対談
・日経電子版「私のみちしるべ」へ掲載
・アンタッチャブルさん・アルコ＆ピースさんの番組で放映
