こんにちは！
デジタルハリウッドSTUDIO姫路のトレーナー廣岡です。
これまでに Web制作会社として、多くのデザイナーの採用に関わってきました。
「ポートフォリオを作ったけど、どうすれば採用担当者に響くのかわからない…」
「未経験でも評価されるポートフォリオの作れる？」
こんなお悩みを持つ方に向けて、就職や転職に役立つポートフォリオの作り方を解説します！
特に「どのように作品を見せるべきか？」や「実績が少なくてもアピールする方法」など、採用担当者目線で大事なポイントをお伝えします。
では、さっそくポートフォリオ作成のステップを見ていきましょう！
目次
WEBデザイナーのポートフォリオとは？
ポートフォリオは、「自分のスキルと実績を視覚的に伝える名刺」のようなものです。
採用担当者はポートフォリオを見て「この人に仕事を任せられるか？」を判断します。
ポートフォリオの役割と重要性
- デザインのスキルレベルを示す（レイアウト・色彩・UI設計の能力）
- 思考プロセスを伝える（デザインの意図や課題解決能力）
- コーディングやツールのスキルを証明する
採用担当者が実際に見ているポイント
「デザインやコーディングのセンスがあるか？」よりも「論理的にデザインできるか？」が重要です。
作品の見た目だけでなく「課題 → 解決策 → 成果」の流れを明確にしましょう。
ポートフォリオを作る前に考えること
いきなりポートフォリオを作る前に、自分がどんなWEBデザイナーになりたいのか、誰に向けて作成するのかを考えましょう。
どんなデザイン会社に応募するか？
応募先によってポートフォリオの見せ方が変わります。
- Web制作会社に就職したい → UI/UX、コーディングスキルを強調
- インハウスデザイナー（企業内デザイナー）として就職したい → ブランド力・マーケティング視点
- フリーランスになりたい → クライアントとのやり取りを掲載（案件の流れ）
自分の強みやスキルを整理する
「どんなデザイナーになりたいのか？」を明確にしましょう！
採用担当者が求めるポイントも意識する
- ビジュアルデザインが得意 → クリエイティブな案件中心に
- UI/UX設計が得意 → ユーザー体験の設計をアピール
- コーディングが得意 → HTML/CSS/WordPressの実装事例を掲載
- 「ただの作品集」ではなく、「思考の流れ」や「問題解決力」を見せることが重要！
- 「なぜこのデザインにしたのか？」 の説明をしっかり記載
ポートフォリオの構成 – 必要なページと順番
必須ページ一覧
- トップページ（自己紹介＋全体の作品一覧）
- プロフィールページ（スキル・経歴・得意分野）
- 制作実績ページ（プロジェクトの詳細解説）
- お問い合わせページ（SNSリンクやメールフォーム）
- ポートフォリオのナビゲーションはシンプルに！
- 1クリックで必要な情報にたどり着ける設計が重要です
- 採用担当者は「1つの作品をじっくり見るより、全体の流れをざっと確認」します
- 最初の3秒で「この人はどんなデザイナーか？」が伝わることが大事！
実績が少ない場合のポートフォリオの作り方
スクールを卒業して間もない人は実績がほとんどありません。
そんな場合でも、以下の方法で実績を作りましょう
- クラウドソーシング(ランサーズ、クラウドワークスなど)のコンペでデザインを作る
- 公開されているサイトのリデザインの改善提案を掲載
- InstagramやTwitterのデザイン事例でもOK
「なぜこのデザインにしたのか？」を論理的に説明することで、実績がなくても評価されます！
WEBvs紙のポートフォリオの違い
ポートフォリオを作成する際に、「オンラインポートフォリオ」と「PDFポートフォリオ」のどちらを作るか迷うかもしれません。
それぞれにメリット・デメリットがあるため、応募先や自分の強みに合わせて選ぶことが重要です。
オンラインポートフォリオ（Webサイト型）の特徴
メリット
- URLを送るだけで簡単に共有できる（メールやSNSにリンクを貼れる）
- レスポンシブ対応ができ、PC・スマホで閲覧しやすい
- Webデザインやコーディングスキルをアピールできる（WordPressやHTML/CSSを活用）
- アニメーションやインタラクションを加えられる
デメリット
- 説明を細かく書くと、レイアウトが崩れやすい
- 採用担当者によっては、Webサイトを開いてじっくり見る時間がない
- インターネット環境がない場所では閲覧できない
PDFポートフォリオ（資料型）の特徴
メリット
- 作品の説明を細かく加えられる（デザインの意図・課題・解決策を詳しく記載）
- デザインが崩れない（閲覧するデバイスに関わらず統一されたレイアウトで表示される）
- メールや印刷での提出が可能（応募書類と一緒に送れるため、採用担当者が見やすい）
- 1つのファイルにまとまり、採用担当者がダウンロードして保存しやすい
デメリット
- Webデザインやコーディングのスキルをアピールしにくい
- ポートフォリオの修正・更新がしづらい（データを編集し、再送する必要がある）
- 動画やアニメーションが使えない（動的なコンテンツが表現できない）
どちらを作るべき？
| 比較項目 | オンラインポートフォリオ | PDFポートフォリオ |
|---|---|---|
| 共有のしやすさ | ◎ URLを送るだけ | ○ メール添付 or クラウド共有 |
| デザインの自由度 | ◎ Webならではの表現が可能 | ○ レイアウト固定で安定 |
| 作品の説明のしやすさ | △ 説明が長すぎると見にくい | ◎ 文章を多く加えられる |
| コーディングのアピール | ◎ HTML/CSSの実力を見せられる | △ 静的なデザインのみ |
| デバイス対応 | ○ PC・スマホ対応が必要 | ◎ どのデバイスでも統一表示 |
| 採用担当者の扱いやすさ | ○ Webを開く必要あり | ◎ ダウンロード＆印刷可能 |
就職活動では「オンライン＋PDF」の両方を用意するのがベストです！
- Webデザインやコーディングをアピールしたい場合 → オンラインポートフォリオ
- 作品の詳細な説明を加えたい場合 → PDFポートフォリオ
特に 企業応募の場合は「PDFポートフォリオ」を優先し、URLを補足として伝えるのがおすすめです！
応募先によって、最適な形式を選んで提出しましょう！
まとめ
自分らしいポートフォリオで就職を掴みましょう！
ポートフォリオは「作品の紹介」ではなく「自分を伝えるツール」です。
魅力的なデザインだけでなく、伝わる言葉でアピールしましょう！
WEBデザインは「ユーザー(今回は採用担当者)の視点」を意識して作成することが成功のカギです！
資料請求