こんにちは、「リスキリング転職ラボ」のユウです。
私は以前、スクール営業として、スキルアップやキャリアチェンジを考えている方の相談に携わっていました。
現在は現役転職エージェントとして、転職やキャリアについての相談を受けています。
Webデザインを学び始めると、次に悩みやすいのがポートフォリオです。
- 未経験なのに何を載せればいい？
- 実案件がなくても作れる？
- 作品はいくつ必要？
- バナーだけでもいい？
- 転職用と副業用で内容は変えるべき？
と疑問に感じる方も多いと思います。
結論から言うと、実務未経験でもポートフォリオは作れます。
重要なのは、作品数を増やすことではありません。
「何を作ったか」だけでなく、「誰に向けて、何を考え、どこまで自分で制作したのか」まで伝えられる状態にすることが大切です。
この記事では、未経験からWebデザイナーを目指す方に向けて、ポートフォリオの作り方を7ステップで整理します。
転職だけでなく、副業からWebデザインを始めたい方にも使える考え方です。
未経験Webデザイナーでもポートフォリオは作れる
「実務経験がないからポートフォリオを作れない」と考える必要はありません。
未経験の場合は、実案件だけでなく、自主制作や架空案件として作った作品を使って、自分のスキルや考え方を示す方法があります。
例えば、
- 架空店舗のバナー
- 架空サービスのLP
- 架空企業のWebサイト
- 自分で考えたサービスサイト
- 既存サイトを参考にした自主制作
などです。
ただし、既存企業のロゴ・画像・デザインなどをそのまま利用すると、権利上の問題が生じる可能性があります。
公開用のポートフォリオでは、自分で用意した素材や利用条件を確認した素材を使い、架空案件であることが分かるようにすると安心です。
未経験からWebデザイナーになるまでの全体像を先に確認したい方はこちらも参考にしてください。
未経験からWebデザイナーになるには？必要スキルと転職までの流れ
ポートフォリオは「作品を並べるだけ」では足りない
ポートフォリオというと、完成したデザインを並べた作品集をイメージするかもしれません。
もちろん完成物も重要です。
ただ、見る側が知りたいのは完成画像だけではありません。
例えば、
- 何を目的に制作したのか
- 誰を想定したデザインなのか
- 自分が担当した範囲はどこか
- どのツールを使ったのか
- なぜそのレイアウトや色にしたのか
- どこを改善したのか
まで説明できると、制作物に対する考え方が伝わりやすくなります。
現役転職エージェントとして転職相談を受けていても、学習歴だけではなく、「結局何ができるのか」を具体的に言葉にできることは重要だと感じます。
未経験Webデザイナーのポートフォリオを作る7ステップ
1．転職・副業など目的を決める
最初に決めたいのは、ポートフォリオを誰に見せるのかです。
例えば、
- Web制作会社への転職
- 事業会社のWeb担当への転職
- 副業案件の獲得
- フリーランス案件の獲得
では、見せたい作品が変わります。
転職したい会社がWebサイト制作を中心にしているのに、SNS画像だけを並べても、自分がその仕事に対応できるか伝わりにくくなります。
先に目指す仕事を決め、その仕事から逆算して作品を作るのがポイントです。
2．必要なスキルを整理する
次に、目指す仕事で必要になりそうなスキルを整理します。
Webデザインでは、例えば次のようなスキルがあります。
- デザイン基礎
- Figma
- Photoshop
- Illustrator
- HTML・CSS
- レスポンシブデザイン
- Webサイト設計
すべてを載せる必要はありません。
重要なのは、自分が目指す仕事内容とつながっていることです。
3．載せる作品を決める
次にポートフォリオに載せる作品を選びます。
未経験の場合は、同じ種類の作品だけを大量に並べるより、自分が対応できる範囲が伝わる構成を考えた方が分かりやすいです。
例えば、Webサイト制作まで目指す場合は、
- バナー
- LP
- 複数ページのWebサイト
- レスポンシブ対応した制作物
などを組み合わせる方法があります。
一方、副業でまずバナー制作から始めたい場合は、バナーやSNS画像など、目指す案件に近い作品を中心にしても構いません。
4．作品ごとに「目的」を設定する
作品を作る前に、架空でも構わないので制作条件を決めておきます。
例えば、
- 誰の商品・サービスか
- ターゲットは誰か
- 何を伝えたいのか
- どんな行動を促したいのか
を設定します。
単に「おしゃれなバナーを作る」ではなく、目的に対してデザインを考える練習になります。
5．制作過程も残しておく
完成した作品だけでなく、制作過程も残しておくと説明しやすくなります。
例えば、
- 参考にした方向性
- ワイヤーフレーム
- 配色を決めた理由
- レイアウトの意図
- 修正前と修正後
などです。
ポートフォリオを作る段階になってから思い出そうとしても、制作時に考えていたことを忘れてしまうことがあります。
6．作品説明を書く
各作品には、最低限の説明を付けましょう。
例えば次のような項目です。
- 作品名
- 制作目的
- 想定ターゲット
- 担当範囲
- 使用ツール
- 制作期間
- 工夫したポイント
チーム制作であれば、自分が担当した部分が分かるようにすることも重要です。
自分がやっていない部分まで自分の実績のように見せないようにしましょう。
7．第三者に見てもらって修正する
完成したら、一度第三者に見てもらうのがおすすめです。
自分では分かりやすいと思っていても、初めて見る人には伝わりにくいことがあります。
確認したいのは、
- 何ができる人なのか分かるか
- 作品まで迷わず見られるか
- 文章が長すぎないか
- スマホでも崩れていないか
- リンク切れがないか
などです。
独学だと自分の制作物を客観的に判断しにくい場合は、添削環境を利用するのも一つの方法です。
ポートフォリオに載せたい基本構成
ポートフォリオサイトを作る場合、次のような構成にすると整理しやすくなります。
| 項目 | 載せる内容 |
|---|---|
| プロフィール | 簡単な経歴・目指している仕事 |
| スキル | 使用できるツール・技術 |
| 作品 | 制作物・目的・担当範囲・工夫 |
| 制作プロセス | 考え方・設計・改善点 |
| 連絡先 | 問い合わせ方法 |
転職用であれば、応募書類とポートフォリオで内容が食い違わないようにすることも大切です。
実績がない未経験者は何を作ればいい？
実案件がない場合でも、ポートフォリオ用の作品を作る方法はあります。
架空案件を作る
例えば、架空のカフェ、美容室、オンラインサービスなどを設定して制作します。
ただ作るだけでなく、ターゲット・目的・サービス内容まで設定すると、実際の仕事を想定した制作に近づけやすくなります。
自分のサービス・サイトを作る
自分自身のポートフォリオサイトを制作物の一つとして考える方法もあります。
情報設計・デザイン・コーディングまで自分で行ったのであれば、その過程自体を説明できます。
既存サイトを題材に学習する
既存サイトを参考に、レイアウトやデザインを研究することも学習になります。
ただし、模写したものを自分のオリジナル実績として公開するのは避けましょう。
公開する場合は、権利関係を確認し、学習目的の制作であることが分かる形にすることが大切です。
転職用ポートフォリオで意識したいこと
転職目的の場合は、単に作品を見せるだけではなく、応募先の仕事との接点を意識します。
例えば、Web制作会社を目指すなら、
- Webサイトを設計できるか
- レスポンシブを理解しているか
- HTML・CSSまで対応できるか
- 制作意図を説明できるか
などが伝わる作品を考えます。
未経験転職では、これまでの経験をすべて捨てる必要もありません。
営業・接客・事務など、これまでの仕事で身につけた経験と、新しく学んだWebスキルをどう掛け合わせるかも整理してみてください。
副業用ポートフォリオで意識したいこと
副業の場合は、クライアント側が「この人に何を依頼できるのか」を判断しやすいことが重要です。
例えば、
- バナー制作
- SNS画像
- LPデザイン
- Webサイトデザイン
- サイト修正
など、対応できる仕事内容と作品をつなげて見せます。
また、実案件を掲載する場合は、クライアントの許可なく公開しないようにしましょう。
未経験者のポートフォリオで避けたいNG例
作品画像だけを並べる
完成画像だけでは、何を考えて制作したのか分かりません。
目的・担当範囲・工夫した点も簡潔に説明しましょう。
自分の担当範囲が分からない
チーム制作などの場合は、デザイン・コーディング・企画など、自分がどこを担当したのか明記します。
作品を載せすぎる
練習作品をすべて載せる必要はありません。
今の自分を見せるうえで必要な作品を選び、古い作品は入れ替えていく方が整理しやすくなります。
他人の制作物を自分の作品のように見せる
当然ですが、自分が制作していないものを実績として掲載してはいけません。
模写やチーム制作の場合も、どこまで自分が行ったのかが分かるようにしましょう。
スマホ表示を確認していない
ポートフォリオサイト自体がスマホで崩れていると、Web制作スキルを示すうえでもマイナスになりかねません。
PCだけでなくスマホでも必ず確認しましょう。
ポートフォリオは独学でも作れる？
独学でも作れます。
自分で学習を進め、制作物を作り、ポートフォリオまで完成できるのであれば、スクールは必須ではありません。
一方で、
- 何を作ればいいか分からない
- 作品の完成度を判断できない
- フィードバックが欲しい
- ポートフォリオ制作まで一人で進められない
という場合は、第三者から添削を受けられる環境を使う意味があります。
独学とスクールの違いはこちらの記事で整理しています。
スクールでポートフォリオを作るなら確認したいこと
スクールを利用する場合も、「ポートフォリオ対応あり」という言葉だけで決めない方がいいです。
確認したいのは、
- どのような作品を作るのか
- 作品数ではなく制作範囲はどうか
- 添削を受けられるか
- ポートフォリオサイトまで作るのか
- 転職用・副業用で相談できるか
- 卒業後も作品を使えるか
などです。
スクール選びの比較ポイントはこちらで詳しく解説しています。
Webデザインスクールの選び方｜未経験者向け7つの比較ポイント
そもそもスクールを利用する意味があるのか迷っている方はこちらです。
Webデザインスクールは意味ない？独学との違い・向いている人を解説
料金が気になる方はこちらの記事も参考にしてください。
Webデザインスクールの料金は高い？費用・比較ポイントを解説
ポートフォリオ完成前のチェックリスト
- 目指す仕事に合った作品があるか
- 各作品の目的が説明されているか
- 自分の担当範囲が明確か
- 使用ツールが分かるか
- 制作意図を説明できるか
- 誤字脱字がないか
- リンク切れがないか
- スマホでも崩れていないか
- 権利上問題のある素材を使っていないか
- 連絡先が分かるか
すべてを一度で完璧にする必要はありません。
学習や制作を続けながら、作品を差し替え、ポートフォリオ自体も更新していきましょう。
未経験Webデザイナーのポートフォリオに関するよくある質問
実務経験がなくてもポートフォリオを作れますか？
作れます。
自主制作や架空案件を使い、制作目的・担当範囲・使用ツール・工夫した点まで説明できる形にしましょう。
ポートフォリオには何作品載せればいいですか？
作品数だけで決める必要はありません。
同じような作品を大量に載せるより、目指す仕事内容に必要なスキルが伝わる作品を選ぶことが大切です。
バナーだけでもポートフォリオになりますか？
目指す仕事によります。
バナー制作の副業を目指すなら関連性がありますが、Webサイト制作やWebデザイナー転職を目指すなら、WebサイトやLPなども用意した方が対応範囲を伝えやすくなります。
ポートフォリオはPDFとWebサイトどちらがいいですか？
応募先や用途によります。
Webデザイナーを目指す場合は、Webサイト形式で自分の制作・情報設計スキルを示せるメリットがあります。
一方で、提出方法を指定されている場合は、その指示に従ってください。
架空案件でも問題ありませんか？
実務未経験であれば、自主制作・架空案件を作品として使う方法があります。
ただし、実案件と誤解されないように表記し、自分が設定した課題であることを分かるようにしましょう。
まとめ｜ポートフォリオは「作品数」より「何ができるか」を伝える
未経験からWebデザイナーを目指す場合でも、ポートフォリオは作れます。
重要なのは、きれいな画像を大量に並べることではありません。
誰に向けて何を作り、どこまで自分が担当し、何を考えて制作したのかを伝えることが大切です。
まずは目指す仕事を決め、そこから必要な作品を逆算してみてください。
そして、
- 学ぶ
- 作る
- 説明する
- 見せる
- 応募・提案する
までつなげていきましょう。
Webデザイナー転職を目指す方はこちらから全体の流れを確認できます。
未経験からWebデザイナーになるには？必要スキルと転職までの流れ
まず副業から始めたい方はこちらです。
