Webデザイナーのポートフォリオの作り方の基本！形式や作品・実績紹介のポイントとは？

転職におけるポートフォリオの役割

デザイナーやクリエイターにとってのポートフォリオとは、ご自身が今までどういった制作案件に携わってきたのか、ご自身が手掛けた作品は何かをアピールするための「作品集」のことです。

Web業界は専門性が必要な職種がほとんどのため、転職活動では一般的に、履歴書や職務経歴書だけでなくポートフォリオの提出を求められます。またフリーランスとして案件紹介を受ける場合にも、ポートフォリオが必要です。

ポートフォリオは、あなたのスキルや経験、強みを相手に理解してもらうためのプレゼン資料です。企業は人材を採用する際、ポートフォリオから候補者のスキルはもちろん、制作に対する考え方まで判断します。

そのためポートフォリオには、これまでの経験や自身の得意なこと（数値分析や企画立案、提案営業、ライティングなど）を盛り込み、企業担当者に「活躍してもらえそう」「即戦力になってくれそう」と思ってもらうことが大切です。

ポートフォリオの形式と構成

ポートフォリオをWebと紙（またはPDF）どちらで作成するか迷う方も多いでしょう。しかし、ポートフォリオの形式そのものが転職活動を左右することはありません。

ポートフォリオは自分のスキルや経歴をプレゼンテーションするためのツールです。自分の強みをアピールできる形式であれば、Webであろうと紙であろうと構いません。Webと紙それぞれの長所・短所を知ったうえで、自分に最適な形式を選んでください。

Webのポートフォリオ（ポートフォリオサイト）

自分の作品をWebサイトにまとめたものです。

デメリット

• ネット環境がないとみられない
• アクセス制限などのセキュリティ管理が必要

メリット

• 作品・実績の見栄え、動き、UIなどを確認してもらえる
• ポートフォリオサイトそのものを実績としてアピールできる
• コーディングスキルをアピールしやすい
• 関係者にシェアしてもらいやすい

ポートフォリオサイトには、作品をダイナミックに表現できる、情報の追加・更新が手軽にできるといった利点があります。最近ではポートフォリオサイトを簡単に作成することのできるサービスが数多く存在しており、Webデザイナーだけでなく、さまざまなクリエイターがポートフォリオをWebで制作しています。

おすすめのケース

• ・デザインした作品・実績の動きやUIをアピールしたい
• ・デザインだけでなくコーディングスキルもアピールしたい

特にWebデザイナーやUIデザイナーの方であれば、ポートフォリオサイトを採用担当者に見てもらうことで、作品・実績の実際の見栄えや動き・UIを確認してもらうことができます。また作品のソースコードを見せることもできるため、コーディングスキルをアピールしたい場合には、Webのポートフォリオを利用すると良いでしょう。

ポートフォリオサイトの注意点

対面の面接では、ポートフォリオサイトのURLを企業に提出していても、面接担当者が複数人いたり、パソコンのディスプレイ画面がひとつしかなかったりして、作品をしっかり見てもらえないということがあり得ます。面接の場でも確認してもらえるよう、ノートPCやタブレットを持参しポートフォリオサイトを見られるようにしておくか、紙のポートフォリオをあわせて準備しておくと安心です。

紙（PDF版）ポートフォリオ

自分の作品をPhotoshopやIllustrator、PowerPoint、Googleスライドなどを使ってまとめ、紙に印刷しファイリングしたものです。最近は選考のオンライン化が進み、紙に印刷せずにPDF化したものを提出することが増えています。

メリット

• ・見てもらいたい箇所をアピールしやすい
• ・ネット環境がなくても見てもらえる

デメリット

• ・サイトの動的表現を見せられない
• ・ソースコードを確認してもらえない

紙やPDFのポートフォリオには、企業の採用担当者に見てもらいたい箇所をアピールしやすい、ネット環境がなくても内容を確認してもらえる、採用担当者がWebに詳しくない場合にも実績を見てもらいやすいなどの特長があります。

おすすめのケース

• ・資料を使用したプレゼンスキルをアピールしたい
• ・Webだけでなく紙媒体のデザインもアピールしたい

最近増えているオンライン面接では、ポートフォリオを共有した画面に映しながら実績を説明する場面が想定されます。横長の画面に合わせてポートフォリオを作成しておけば、スライド形式でプレゼンをすることができるでしょう。

面接時のプレゼン資料として利用しやすいため、WebディレクターやWebプランナーの方がプレゼンスキルをアピールするのに最適です。WebデザイナーやUIデザイナーの方でも、自分のスキルをうまくアピールしやすいと感じれば、紙やPDFのポートフォリオを選択して構いません。

紙（PDF版）ポートフォリオの注意点

作品となるサイトの動的表現を見せられない、コーディングしたソースを確認してもらえないといった短所もあります。デザインだけでなくコーディングスキルもアピールしたいという場合には、ポートフォリオサイトを併用することがおすすめです。

作品・実績紹介のポイント

Webデザイナーがポートフォリオで作品・実績を紹介するために、押さえておくべきポイントについて解説します。

1．ビジュアルイメージ

どんなサイトの制作に携わったのか一目見て分かるように、作品のメインビジュアルを掲載しましょう。ページのビジュアルをそのまま掲載するのではなく、PC・スマートフォンなどの枠に当てはめるなど、画像に枠をつけると見た目が良くなります。

2．サイト名（プロジェクト名）・URL

制作に携わった案件名（サイト名やプロジェクト名）とURLを記載します。
架空のサイトを作品として掲載する場合には、簡単なタイトルをつけましょう。

ex．20代女性向けファッションサイト

3．デザインの概要

制作したサイトの目的、コンセプト、ターゲット、工夫した点など、デザインの内容を簡潔に説明します。デザインはすべてに意味が求められるものです。「なぜこのデザイン（配置・配色・フォントなど）にしたのか」という説明をすることで、単なる好みではなく、デザインを論理的に考えられることをアピールします。

悪い例

若い男性がターゲットだったので青色を使用しました。

なぜ青色を使用したのかの説明が不足しており、ターゲットに合ったデザインかどうかの説得力に欠けています。この文章だけでは、何を意図して青を選んだのか、採用担当者に伝わりません。

良い例

10代後半～20代前半の男性がターゲットのため、若い男性の爽やかさを連想させる、明るい水色や青色などの同系色を使用しました。

ターゲットの設定と配色の理由をできるだけ詳しく説明することで、何をイメージして色を決めたのか説得力を持たせています。

デザインの説明は面接でも質問されることが多いため、自分の考えを具体的に説明できるようにしておきたい部分です。面接で質問されることを前提に、採用担当者にあなたのデザインへの考え方や取組み方を伝えることを意識し、わかりやすい言葉でまとめましょう。

4．そのほかの情報

以下の中から、あなたのスキルや経験をアピールできる情報をピックアップして掲載します。

ポートフォリオ作りで押さえるべき点

アピールしたい実績から掲載する

忙しい採用担当者の中には、最初の3～5つの作品を見て候補者のスキルを判断することもあるようです。デザインや担当領域の広さなど、自分のスキルをアピールできる作品・実績を前のほうに掲載します。なかでも大規模なものや有名サービスなどのインパクトのあるサイトや企業イメージに合うものは、最初のほうに掲載すると良いでしょう。

ポートフォリオサイトの場合、インデックスページを見るだけで、あなたの実績のレベルがある程度わかるデザインを心がけてみてください。

見やすさ・見た目の良さにこだわる

ポートフォリオは、あなたのスキルや経験、強みを採用担当者に理解してもらうためのものです。つまり、ポートフォリオを見て「この人にデザインを任せよう」と思ってもらわなければなりません。掲載するビジュアルの大きさや見せ方、フォントの種類や大きさなどを工夫して、見やすいポートフォリオを心がけましょう。

またスキルや経験が豊富であっても、誤字脱字があると、それだけで印象が悪くなります。ミスがないか細かい部分まで見直すことも重要です。

客観的な視点でチェックする

自分のスキルをあれもこれもアピールしようとすると、逆に強みを打ち出せていなかったといったこともあるものです。ポートフォリオができあがったら、採用担当者になったつもりで、客観的な視点で自分のポートフォリオをチェックするようにしましょう。

自分ではなかなか客観的に見れないというときには、第三者にポートフォリオをチェックしてもらうことがおすすめです。ウェブスタッフでは、キャリアアドバイスとあわせてポートフォリオの添削を行っています。

※ご利用には会員登録が必要です。
※ご利用の際は必ずご予約が必要です。当日の申し込みはできませんのでご注意ください。