アカウント
メニュー
designer

一目置かれるWebデザイナーのポートフォリオ!作り方や注意点について解説

  • 更新日 : 2020/03/26

Webデザイナーの就職活動には、ポートフォリオが必須です。ポートフォリオとは、クリエイティブ業界において「自分の実績を示すための作品集」のことを言います。

未経験の場合は、実績としてあげられる作品数が少なく、どのようにWebデザイナーとしてのポートフォリオを用意するか迷う方もいるのではないでしょうか。

そこで本記事では、
・Webデザイナーの転職においてポートフォリオが重要な理由
・未経験でも面接官に好印象を与えるポートフォリオの作り方
・ポートフォリオを作る時の注意点
などをまとめました。

ぜひ、選考で重視されているポイントやまとめ方の参考にしてください。

directordirector
目次
Webデザイナーにポートフォリオが必要な理由実務経験のない未経験者は、ポートフォリオで今できることをアピールしようポートフォリオにはWeb上の作品を優先的に記載しようわかりやすいポートフォリオをつくるポイントとは|面接官目線で解説1.プロフィールページを用意しよう2.プロジェクト名と作品を実際に確認できるURLを記載3.コンセプトや工夫点など、要点をおさえたデザインの説明を記載4.制作で担当した箇所とスキルレベルについても正確に書く5.掲載作品数は10~20個程度、ページ数は12~30ページ前後収めるようにするポートフォリオ制作に必要な根拠に基づいた説明能力、思考プロセスも評価材料の一つになる未経験の場合、作品への熱意やこだわり、デザイナーとして働きたい思いが重視されている【現役デザイナー向け】ポートフォリオの作り方手順1.企業の社風に合わせ、アピールしたい自分のスキル、実績を整理する手順2.手書きで構成を考え、ある程度固まってきたらワイヤーフレームを作成手順3.実際に制作。一発で100点のページを作るのではなく改善を繰り返して完成に近づける【未経験者向け】ポートフォリオの作り方手順1.作品数が少ない場合は掲載用の作品を準備する手順2.参考にしたいポートフォリオサイトを見つけ、アレンジを加える簡単にポートフォリオを制作できるサービス3選PORTFOLIOBOXSalon.ioAmeba Ownedデザインで行き詰まった時に参考にしたいポートフォリオギャラリー6選CHOICELYURAWAGAAwwwardsRESPONSIVE WEB DESIGN JP81-web.comSANKOU!ポートフォリオ面接に備え、デザインの説明練習をしよう

Webデザイナーにポートフォリオが必要な理由


Webデザイナーの市場価値は、デザインを用いた課題解決力に左右されます。そのため多くの企業は、応募者のこれまでの実績や得意とするクリエイティブ、デザインへのこだわりといった部分を評価しようとします。

しかし、一般的な履歴書や職務経歴書では文字の羅列になってしまいますので、実際のデザイン力を見極めることは難しいです。

そこで、これまで制作してきた作品を掲載したポートフォリオを合わせて用意しておくことで、経歴書だけでは伝えきれない、デザイナーとしてのスキルを正確に提示することができます。

また採用活動では、現場で実際に働いているデザイナーが面接を担当するケースが多いです。したがってポートフォリオは、面接官が応募者のおおよその力量を把握し、極端なミスマッチを予め避けるためにも役立ちます。

だからこそ、転職活動で使用するポートフォリオを単なる作品集ではなく、企業が求めているデザイナー像と自分がいかにマッチしているかをアピールする武器として制作しましょう。

実務経験のない未経験者は、ポートフォリオで今できることをアピールしよう

Web業界のポートフォリオは、未経験者こそ、時間をかけて用意したほうが良いです。

「未経験可」のWebデザイナー求人もありますが、これは決して「Webデザイナーとしてのスキルや制作実績がなくても採用します」という意味ではないからです。

正確には、デザイナーとしての勤務経験はないが、趣味や独学でデザインの勉強をしていて実際にサイトやアプリを制作したことがある人材を求めています。

つまり、同じ未経験者であっても、
・ポートフォリオを制作できるスキルがある
・ポートフォリオに掲載するだけの作品数を持っている
といった人の方が企業の評価は高く、選考通過率も高くなるのです。

このように、ポートフォリオの制作自体もデザイナーとしての力量を測る一つの材料です。そのため、掲載する作品が少ない場合は掲載用に作品を制作してでもポートフォリオを用意しましょう。

ポートフォリオにはWeb上の作品を優先的に記載しよう


ポートフォリオには、Web上のものを優先的に載せましょう。 

デザイナーのポートフォリオというと、ポスターや広告といった紙媒体のデザインを思い浮かべるかもしれません。しかし、Webデザイナーの求人に応募する場合は、Webサイトの制作能力をアピールする必要がありますので、Web形式のポートフォリオを準備すれば問題ありません。

また、面接会場でネットの接続状況が悪いなどのアクシデントが起きる恐れもゼロではないため、不測の事態に備えてポートフォリオをオフラインでも閲覧できるようにしておくと安心です。

わかりやすいポートフォリオをつくるポイントとは|面接官目線で解説

ポートフォリオは面接官の目線になり、わかりやすいものを作成しましょう。 

ポートフォリオは体裁が自由ですが、自由気ままに制作するだけでは、伝えるべき要素が漏れてしまい本来の力をアピールできないといった恐れがあります。
ここからは、わかりやすいポートフォリオを制作するためのポイントを一つずつ見ていきましょう。

1.プロフィールページを用意しよう

採用担当者はポートフォリオを通して、デザイナーとしての能力・人柄・説明能力など、履歴書や職務経歴書だけでは分からないあなたの魅力を読み取ろうとしてきます。

プロフィールページには、「氏名」「顔写真」「生年月日」「職歴」といった基本情報に加え、言語やツールのスキルレベルは必ず記載しましょう。

スキルレベルについては文字で説明するよりも、パッと見たときに伝わるようにグラフや図を活用するのがおすすめです。

それに加え、志望企業に入社した場合、
・どんな経験が活かせるか
・どんなことを成し遂げたいのか
・を説明する自己PRも200〜300文字程度で書いておきましょう。

そうすることで、面接官に入社後のビジョンをイメージしてもらいやすくなります。

また、ポートフォリオに掲載する作品のメインビジュアルは、全体の構成とデザインのテイストが伝わるものを選びましょう。細部のデザインを伝えたい場合は補足の枠を用意し、画像とともに追記します。

サイトをパソコンやスマホで見た時のイメージ図をはめ込みで作成すると伝わりやすいです。

2.プロジェクト名と作品を実際に確認できるURLを記載

今まで関わった案件名と、実際のサイトのURLも一緒に記載します。

すでに公開が終了しているなどの事情でURLを記載できない場合は、その旨を代わりに書けば問題ありません。

3.コンセプトや工夫点など、要点をおさえたデザインの説明を記載

案件を記載したら、作品のターゲット、デザインを通して解決したい課題、そして実施した工夫などの解説を簡単に添えましょう。

ただし、ポートフォリオ上で説明を完結させず、面接の場で話を広げられるよう簡潔な内容にとどめるようにします。

デザインの工夫は面接時のプレゼンや質疑応答を行う際、面接官から必ず触れられる項目のため、自分の言葉で話せるように練習することも必要になります。

4.制作で担当した箇所とスキルレベルについても正確に書く

複数人が参画したプロジェクトで制作した作品を取り上げる場合、
・自分が担当した領域はどこか
・使用ツール
・言語は何か
を明記しましょう。

適切なスキル判断をしてもらうために重要な情報になるため、正直に記載するようにしましょう。

5.掲載作品数は10~20個程度、ページ数は12~30ページ前後収めるようにする

ポートフォリオに掲載する作品数に規定はありません。

基本的には会社にアピールしたい実績に応じて、載せる作品を決めることになるでしょう。

基準として、Web・紙どちらでポートフォリオを作成する場合でも、掲載する作品数は10~20作品程度にしましょう。紙でのレイアウトを考える場合、1ページあたり1~2作品を紹介するイメ
ージです。

面接官は限られた時間の中で作品に目を通すため、あまりにも作品数・ページ数が多いポートフォリオは負担になってしまいます。ページ数は目次やプロフィール、スキル紹介のページも含めて12~30ページになるように制作するとちょうど良いです。

ポートフォリオ制作に必要な根拠に基づいた説明能力、思考プロセスも評価材料の一つになる

ポートフォリオは優れた作品を載せるだけで満足してはいけません。

Webデザイナーの転職において、デザインスキルの高さをアピールするのはもちろん大切ですが、それと同じくらい「相手に伝える能力があるかどうか」も重要視されています。

先ほど、作品紹介ページにコンセプトや工夫した点を簡潔に記載するよう説明しました。実はこの説明次第でデザイナーの思考プロセスや課題解決力の良し悪しが判断されます。

デザイナーは単に見た目の良いモノを作るだけの仕事ではありません。

デザインという手段を用い、
・どのような課題をどんなアプローチから解決したいのか
・そのためにどんな意図でそのデザインの形に仕上げたのか
といった一連の流れを伝える力が求められます。

「感覚ではなく根拠を持ってデザインをしているんだな」
「この人はこういう課題を解決するときはこういうアウトプットをするんだな」

というのが伝わる構成や説明文を用意しましょう。

未経験の場合、作品への熱意やこだわり、デザイナーとして働きたい思いが重視されている

未経験・新卒の場合は選考においてスキルやセンス以上に重視される要素があります。

それは熱意です。

どれだけ熱心に作品作りに取り組めたか、こだわりを持って実装した部分はあるか、自分なりに良いと思ったデザインを形にできたかという部分が伝わるような説明文や作品を掲載するようにしましょう。

入社後に挑戦してみたいことや、今勉強しているスキルとこれから身につけたいと思っているスキルに関しては自己PRの欄で記載しておくと意欲が伝わり好印象です。

【現役デザイナー向け】ポートフォリオの作り方


ポートフォリオに載せるべきポイントをしっかりおさえられたら以下の流れに沿ってポートフォリオを制作しましょう。

手順1.企業の社風に合わせ、アピールしたい自分のスキル、実績を整理する

この制作の前準備がポートフォリオの質を大きく左右します。

あなたがどんなスキルを持っていて、どんな領域で企業に貢献できるか、紙に書き出してみましょう。

次に、応募した企業が求めている人物像やスキルは何かを採用ページや制作実績ページから分析してみましょう。

企業が欲している人物像に当てはまらないと、どんなにスキルや実績が素晴らしくてもそれを活かしきれない恐れがあります。

その後、企業分析の結果に合わせて積極的にアピールするスキルや掲載する作品を検討します。

同じスキル・実績を持っていても企業のことを理解している人としていない人では自分の見せ方が大きく変わり、企業側からの評価も変わってくるため丁寧に整理しましょう。

手順2.手書きで構成を考え、ある程度固まってきたらワイヤーフレームを作成

ここからはWebサイト制作と同じ流れです。

応募企業と相性の良いコンセプトや、自分がアピールしたい作品を効果的に伝えるためのデザイン配置などを決めていきます。

自分自身を商品、応募企業をターゲットと想定し、まずは手書きでざっくりとした案を出来るだけ多く出していきましょう。

イメージがある程度固まったらワイヤー制作に移ります。

手順3.実際に制作。一発で100点のページを作るのではなく改善を繰り返して完成に近づける

ワイヤーが確定したら制作していきます。

この時、一発で完璧なものを作ろうとせず、何度も改善修正が入ることを前提に制作を進めることをお勧めします。

なぜなら、面接を受けることで初めて自分の作ったポートフォリオの良し悪しを判断することができるからです。

自分では満足する仕上がりだったとしても、肝心の面接官には伝えたいことが伝わりきれなかったということはザラにあります。

面接の感触を踏まえてアップデートさせていくことで転職に強いポートフォリオへ進化していくのです。

また、ポートフォリオは応募企業によって掲載作品を変えたり自己PRを変えてみたりしてカスタマイズするものです。全く同じものを使い回すことはありません。

作品を入れ替えてみたらページを見た時の印象が変わった、バランスを調整したくなった、といった予期せぬ修正が発生することも考えられるため、柔軟に修正ができる余地を残しておくと良いかもしれません。

【未経験者向け】ポートフォリオの作り方


未経験者の場合はサイト制作の経験が乏しいと思うので、お手本になるポートフォリオサイトを参考にする方法で準備しましょう。

手順1.作品数が少ない場合は掲載用の作品を準備する

未経験者の場合もまずは自己分析と企業の求める人物像、スキルを整理する作業から始めましょう。

そして、ポートフォリオに載せられるほど作品数がない場合は分析内容を踏まえて掲載用の作品の制作を始めましょう。

応募企業が好むテイストやコンセプトが分かっていれば、どんなデザインにすればいいか決めやすいと思います。

コンセプトが決まったらいよいよ作品作りですが、イラストやデザインの他にWebサイトも制作することをおすすめします。

Webデザイナーとして必要なスキルを一通り活用して制作する必要があるため、Webサイト制作の面接官にとって高い評価につながりやすいです。

とはいっても短期間でサイトをいくつも制作するのは大変だと思うので、いくつかはサイトのファーストビューだけをデザインして載せる方法でも問題ありません。

Webサイトを制作するために必要なスキルのおさらいや復習を兼ねて勉強したい方は「独学でWebデザイナーを目指す!必要なスキルから勉強方法まで」の記事をご活用ください。

手順2.参考にしたいポートフォリオサイトを見つけ、アレンジを加える

アピールすべきポイントや掲載する作品が決まったらポートフォリオの構成を決めます。

この時、サイト制作に慣れていない場合は、無理にオリジナルで作ろうとしないように注意しましょう。

参考にしたいポートフォリオサイトを見つけ、それをベースにしつつオリジナリティを付け足していく方法がおすすめです。

駆け出しデザイナーのうちは、良いデザインを参考にすることも立派な勉強の一つです。良いデザインだと思う理由や工夫されているポイントは何か考えながら制作を進めると、スキルアップにも繋がるため一石二鳥です。

簡単にポートフォリオを制作できるサービス3選

ポートフォリオの構成をゼロから作る余裕のない方は、便利なポートフォリオ作成サービスを活用しましょう。

PORTFOLIOBOX

PORTFOLIOBOX
PORTFOLIOBOX

世界で55万人以上が利用しているサービスです。

会員登録をすれば無料で10ページ・30画像まで使用でき、パソコン表示用だけでなく、モバイル用サイトも制作できます。

シンプルで洗練されたデザインを好む人にオススメのサービスです。

Salon.io

Salon.io
Salon.io

ドラッグ&ドロップで、簡単にポートフォリオが作成できるサービスです。

コーディングの知識がなくても使用できるため、未経験の方や制作経験の浅い方にオススメです。

もちろん、HTMLやCSSを追加できるエディター機能でカスタマイズを楽しむこともできるため、短い時間で制作したい人にぴったりではないでしょうか。

Ameba Owned

Ameba Owned
Ameba Owned

アメーバブログでおなじみのサイバーエージェントが提供するサービスです。

スタイリッシュでおしゃれなデザインテーマやフォント、カラーを組み合わせることで簡単に統一感のあるデザインに仕上げられます。

SNSと連携し、投稿を表示させることもできるため、今までの作品をSNS上で投稿していた人にとっては嬉しい機能でしょう。

デザインで行き詰まった時に参考にしたいポートフォリオギャラリー6選

ポートフォリオ自動生成サービスは便利ですが、そもそもポートフォリオのデザインの参考が欲しい場合は、まとめサイトを参照にすると良いでしょう。下記6つのギャラリーをご紹介しますので、ぜひチェックしてみてください。

CHOICELY

CHOICELY
CHOICELY

Webデザインや構成の参考になるサイトがまとめられています。

カテゴリー・業界・色・国内外別に検索できるのが嬉しいポイントで、「ポートフォリオ」というカテゴリーも用意されています。

URAWAGA

URAGAWA
URAGAWA

デザイナーをはじめとするクリエイター特化型求人サイト、MOREWORKSに掲載されているクリエイティブカンパニーの制作実績を紹介するギャラリーです。

制作実績だけでなく、その作品を手がけた際にどんな想いがあったのか、現場のリアルな「裏側」を知ることもできるコンテンツが用意されています。

Awwwards

Awwwards
Awwwards

Awwwardは世界中のサイトのデザインを表彰するサイトです。

応募条件を満たしたサイトは誰でも投稿でき、Awwwardsに掲載されると

・デザイン
・クリエイティビティ
・ユーザビリティ
・コンテンツ

の4項目で採点が行われ、各項目で6.5点以上獲得すると入賞する、といった仕組みになっております。

応募はもちろん、投稿されているサイトを見るだけでも非常に参考になります。

RESPONSIVE WEB DESIGN JP

RESPONSIVE WEB DESIGN JP
RESPONSIVE WEB DESIGN JP

日本国内のレスポンシブデザインに優れたサイトを紹介しているギャラリーです。

一目で端末ごとの見え方を確認できます。

レスポンシブ対応のポートフォリオサイトの政策を検討している人はぜひ参考にしてみてください。

81-web.com

81-web.com
81-web.com

こちらのギャラリーではWeb制作に役に立つ、優れたデザインのサイトを紹介しています。

お気に入りのサイトをクリップ保存したり、ページ遷移せずともデザイン全体を確認できるようなギャラリーとなっており、直感的にパパッと多くのデザインを見たいときに便利です。

SANKOU!

SANKOU!
SANKOU!

非常に見やすいサイトです。

カテゴリから検索できるのはもちろん、フィルターメニューを押すと、非常に多くの検索条件から参考にしたいサイトを絞ることができます。

「奇抜・珍しい・派手な配色」「手書き感・コラージュ」「パララックス・スクロールエフェクト」のようにピンポイントで探したいサイトのイメージを探すことができますよ。

ポートフォリオ面接に備え、デザインの説明練習をしよう


以上、選考に強いポートフォリオサイトのポイントと制作方法を解説しました。

枠組みがない分、どのように作ればいいかわからず悩む方が多いポートフォリオですが、選考で重視されるポイントが予め分かっていれば、あとはそれに沿って自分の実績やスキルが魅力的に伝わるような構成に落とし込めば良いのです。

無事にポートフォリオを制作し、求人に応募できたら、次は面接です。
Webデザイナーの面接では、提出したポートフォリオに沿ってプレゼンや質疑応答をするケースが多く見られます。

限られた時間の中で制作実績と絡めながら、デザインの意図や課題解決のために行った施策など、デザイナーとしての思考フローをうまく説明できるかが重要です。

しっかりと対策を行いたい方は、「これで安心!Webデザイナー採用面接の対策方法を徹底紹介」の記事も合わせてご覧ください。この記事が、皆様のWebデザイナーとしてのキャリアの一助となれますよう、応援しています。

designerdesigner

人気のデザイナー求人

Xuqzbvflkks9bpldevny

[残業少] ファッションブランドや有名サイトを手がけるWebデザイナー募集

株式会社さうなし株式会社さうなし

株式会社さうなしは東京・恵比寿を拠点に活動するクリエイティブカンパニーです。小規模ながら、多くの有名クライアントを抱え、大手企業、ファッション、音楽、インテリア、メディアなどの分野にて数多くの実績を残してきています。 ブランドサイト、コーポレートサイト、プロモーションサイト、ECサイトなど、様々なプロジェクトのWEB制作として、Photoshop、Adobe XDなどを使用したデザインを行って頂きます。またプロジェクトによっては、クライアントとの折衝や制作チームへのディレクションにも携わっていただく可能性があります。 今後の規模拡大を目指し、共に歩んでいきたいと思います。 [残業が少ない!] 弊社では、ワークライフバランスを重視し、時間の効率の良い働き方を推奨しています (過去実績:月間平均残業時間20時間以下)。 一般的な制作会社と比べ勤務時間も長くなく、オンと同じくらいオフの時間を重視しています。リフレッシュしたオフの時間があることで、集中力を高めた業務が可能になると考えています。また有給休暇の積極的な利用も推奨しています。(有給消化率:100%)

  • 東京
  • 中途
  • 420万~550万
Bw3ulxewscksrweecvyx

正しいやり方で、正しいデザインを作る。webデザイナー募集。

QUOITWORKS Inc.QUOITWORKS Inc.

クオートワークスは、 「お客様の課題を王道に解決すること」 「クリエイターとしてのプライドをもったモノづくり」 2点の両立を目指すWebプロダクションです。 お客様に満足いただけることは非常に重要ですが、 弊社はそれ自体を目的にはしておりません。 クオートワークスの案件では基本的に、 会社の責任としてクリエイティブに向き合うために、 クレジットの載らない案件は受けていません。 そして二次受けの案件ではなく、 クライアントからの指名案件のみに絞り、 クライアントと信頼の輪を作り、 一丸となって正しいプロセスで正しい時間をかけて 行うことを大事に考えています。

  • 東京
  • 新卒 / 中途 / 契約 / バイト
  • 290万~700万
Pmz0bn7ijbwtsduifit8

【実務未経験も歓迎】デザインを「楽しい!」と思える提案力のあるデザイナーを急募します!

株式会社デモ株式会社デモ

webサイトを必要とするすべてのお客さまに向け、最高のデザインを提案し、実際の納品までのデザイン業務を担います。クライアントは業種・業態問わずさまざま。たくさんの案件に携わることができます。

  • 東京
  • 中途
  • 350万~550万