ポートフォリオの作り方

転職に有利なポートフォリオの作り方
企業が見ているポイントとは?

ポートフォリオは自己表現のツールのため、決まったフォーマットがありません。そのためどうやって作ればいいのか迷うことも多いのではないでしょうか。

この記事では、現役の転職エージェントに「ポートフォリオの作り方」についてインタビューしました。
そもそもポートフォリオとは何か、企業が見ているポイントや載せたほうが良い情報をまとめています。

未経験の場合は、未経験でWebデザイナーを目指すためのポートフォリオの作り方をご覧ください。

ポートフォリオとは自身を表現するための集大成

デザイナー・イラストレーター・フォトグラファーなどのクリエイターが、転職のときに事実上必須のツールがポートフォリオです。

クリエイターの採用では、採用担当者自身もクリエイターというケースが多々あります。同じ職種の人に「自分にはこんなスキルがある」「課題に対してこんな解決方法を提案できる」といったことを表現するために必要です。
そして、ポートフォリオとは、これまで手がけてきた仕事や学んできたデザインを表現するための集大成であるべきといえるでしょう。

ポートフォリオの作り方

レイアウトイメージ・完成イメージ

まずはレイアウトのサンプルとともに、載せておきたい項目・作品の順番・作品数など具体的なポートフォリオの作り方についてご紹介します。
後半では、ポートフォリオを作るうえで意識したいポイントと、企業が見ている項目についてご紹介します。

ポートフォリオ個別相談会

【定期開催】ポートフォリオ個別相談会

上手くまとめられない、選考で不合格になってしまうなど、ポートフォリオ作りのお悩みに答えます。

【無料】ポートフォリオ個別相談会

ポートフォリオに載せておきたい項目

実績ページ完成イメージ
クリックで拡大
掲載協力:UNDERLINE(https://u-d-l.jp/

1作品のメインビジュアル

全体の構成とテイストが一目でわかるビジュアルを載せましょう。細部のデザインについては別枠を設けるなどして補足をします。 メインとなるビジュアルのキャプチャ以外にも、パソコンの画面にはめ込んだイメージや、縮小したページの全体像を載せることも有効な表現方法です。

2プロジェクト名

担当したプロジェクト名と、WebサイトであればURLも掲載して実際の画面を確認できるようにしましょう。 サービスが終了している場合はその旨も記載しておけば問題ありません。

3制作担当

自分がそのプロジェクトのどこを担当したのかを記載します。
IllustratorやPhotoshop、イラスト作成などのデザイン経験だけでなく、コーディングもできるのか、JavaScriptなどのプログラム領域も任せられる人材なのかなど、採用側はその人の力量を計る術になります。
自社メディアを運用する企業であれば、WordPressの構築や改修ができる人材は評価が高い傾向にあります。

4コンセプト

その作品やデザインは誰に向けてどのような点を意識して作られたものなのかを記載する必要があります。
ビジュアルだけでは判断できないポイントを読み手に伝えることが必要です。

5工夫点

問題解決のために実施した施策、デザインでこだわったところなど工夫した点をアピールしましょう。

[例]
「毎日続けるフィットネス」をテーマに、見放題の動画コンテンツを配信。目玉コンテンツをわかりやすく配置しながら、運動時間とカロリー消費量を絡めて大きく表示することで運動に対するモチベーションを維持する仕組みを随所に盛り込んだ。

自社のプロジェクトだとしても、ユーザーにどのような価値を提供するためのデザインなのか、デザインの目的や考え方を載せることが大切です。

複数人でプロジェクトを担当した場合

デザインの仕事は、複数人でひとつのプロジェクトを担当することも少なくありません。
・レイアウト
・デザイン
・コーディング
など、アウトプットした成果物に対してどこまでを自分が担当したのか明記します。

当たり前のことですが、担当した分野やスキルは正直に答えましょう。嘘をついて入社しても、スキル不足が露呈して後々自分を苦しめることになります。

載せる作品の順番

紙もWebも、基本的には上から・最初から順に見るので、スキルを積んだ直近の作品から見せていくのが良いでしょう。
色々なデザインを手がけたのであれば、自分が一番得意なデザインを載せて、まずは採用担当者の目を引くのも一つの手です。

会社によって作品の順番を変えるほうが良いか
応募する会社によって作品の順番を入れ替えることは必須ではありません。
基本的には先述の通り、自分の一番得意とするデザインをアピールできる汎用性のある構成にしておくことが大事です。

分野の全く異なる業界や職種に複数応募する際は、並び替えを検討すると良いでしょう。

載せる作品の数

採用担当者は日々多くのポートフォリオに目を通さないといけないため、手がけた案件をすべて載せるといったことは避けてください。
たくさんのデザインを手がけてきたとしても、十個以内が現実的な掲載数です。
量を増やすよりも、ひとつひとつの案件を丁寧に説明することの方が重要です。

作品数が少ない場合
手掛けてきた作品が一つや二つでは、ポートフォリオに載せる作品数としては少なすぎます。応募者のスキルや考え方を少ない作品だけで判断するのは難しいからです。

作品数が少ない場合は、掲載用に作るしかありません。

Webデザイナーであれば、市販されている商品の架空のサイトを作ってみました、のような見せ方でも構いません。
ご自身の転職活動のみに使うのであれば、実際の商品画像を引用しても問題ないかと思います。ただし、あくまでも架空のサイトである旨を記載しておいてください。

作品はWebデザイン・ロゴデザイン・パッケージデザインなんでも構いません。
自分なりに何を課題に感じ、どういったコンセプトで制作したのか。それらを伝える情報を記載します。

また、応募する求人の業務内容に合わせて作成ができればさらにプラスです。
Webデザインの仕事であればWebサイトを、UIデザインの会社であればスマホのUIを作ってみました、など。

作品のバリエーションは多彩にしたほうが良いか

多彩な作品を載せることで、どういったテイストが得意なのか、応用性があるのかを判断してもらえるメリットがあります。
ただし、バリエーションを複数載せる場合、全ての作品が同一レベルのクオリティであることが大事です。

かっこいいイラストは描けるけど、かわいいイラストはイマイチといった場合、無理にバリエーションを出す必要はありません。
求人情報をよく読み込み、企業がどのような人材を求めているかを考慮して取捨選択しましょう。

手がけた作品の詳細を明かせない場合

企業のプロジェクトによっては、案件名や手がけたデザインを公にできない場合があります。
ビジュアルや会社名を載せられなくても、具体的な案件名を伏せて手がけた担当領域を文章だけでも掲載することをオススメします。

自身の経験やスキルを判断できる事例は、漏らさずアピールすることが大事です。

ポートフォリオ作りに必要な二つのポイント

ポートフォリオ作りには、二つの大事なポイントがあります。

ポイント1.デザインのスキルを見せる
ポイント2.伝える力があるかを見せる

どちらも大切で、ひとつだけでは優れたポートフォリオとは言えません。
残念ながら、イラストをたくさん載せるだけ、デザインしたWebサイトのキャプチャを載せるだけのポートフォリオを作るクリエイターさんは非常に多いです。

ポートフォリオで何を伝えるのが良いか、企業が見ている項目
企業がまずチェックするのは、以下のような視覚的なデザインセンスです。
・デザインのスキル
・どんな勉強をしてきたか
・デッサン力があるか
・最新のトレンドを取り入れた表現方法をしているか
など。

まずはポイント1の「デザインのスキルを見せる」ことが求められます。
ただしこれだけでは、ポイント2の「伝える力があるかを見せる」が満たせていません。

伝える力があるポートフォリオとは?

企業は、デザインに対する情報整理力や説明力を総合的に見て「伝える力」があるかを判断します。

では、どのような情報を盛り込めば伝える力を判断できるでしょうか。
答えは解決方法と思考プロセスです。

解決方法と思考プロセス
・どんな課題があり、それを解決するためにどんなコンセプトを掲げ、どのようにデザインとしてアウトプットしたのか
・課題から解決に向かうまでどのような思考でそこに行き着いたのか

企業で働くクリエイターはアーティストではありません。自社やクライアントが抱える悩みを、どのようにデザインの力で解決したのか。それが判断できる思考プロセスを載せることが「伝える力」があるポートフォリオです。

工夫をまとめた一言ポイントや、改善点を箇条書きにしても構わないので「デザインスキル」「伝える力」両方を意識したポートフォリオ作りを心がけてください。

紙のポートフォリオの必要性

紙のポートフォリオ

ポートフォリオと言えばファイリングや製本したものが思い浮かぶと思います。ですが、最近では必ずしも紙のポートフォリオは必須ではなくなりつつあります。
この章では、紙のポートフォリオの必要性についてご紹介します。

クリアファイルへの封入や製本は重要視されなくなってきている

Webデザイナーであれば、印刷物は用意せずにWeb上のポートフォリオだけで完結するケースが増えています。
Webサイトを作ること自体がスキルを表す一環になるので、Webポートフォリオは今後も増えていくと思います。

コーディングができることは必須か?
自分でポートフォリオサイトを構築する場合は、コーディングスキルをアピールできるという点でプラス要素になります。
ですが、Web上のポートフォリオ作成サービスなどを使用してもマイナスになることはありません。

コーダーやプログラマーでない限り、コーディングスキルはプラスαとして捉えておきましょう。

面接用に紙のポートフォリオを用意したほうが良いか

最近では、面接であってもタブレットやPCを持参して作品を見せる人が増えています。
企業から紙で見せるべき、のような指摘をされたことはありません。紙のポートフォリオがなかったとしても、それが原因で選考に落ちることはないでしょう。

イラストレーターも最近はデジタルでイラストを描くことがほとんどなので、タブレットやPCを持参して見せてもいいのではないでしょうか。
もしも紙で別途用意する場合は、A4サイズのクリアファイルに作品を印刷して封入する程度で大丈夫です。

ただし、紙面に関わる求人の場合は、紙のポートフォリオは用意しておきましょう。印刷物としてのポートフォリオ自体が選考の判断基準になるケースもあり得るからです。

立体物の作品はどのようにアピールすれば良いか

立体物や絵画は、写真に撮って掲載します。面接の時に持っていけるようにあれば、実物を持っていくのもいでしょう。

ポートフォリオ個別相談会

【定期開催】ポートフォリオ個別相談会

上手くまとめられない、選考で不合格になってしまうなど、ポートフォリオ作りのお悩みに答えます。

【無料】ポートフォリオ個別相談会

未経験でWebデザイナーを目指すためのポートフォリオの作り方

ポートフォリオを作り始める前に

未経験でWebデザイナーを目指す場合、大前提として「デザインが好きだからWebデザイナーになりたい。でもまだ何も作ったことがありません」では選考の土俵にもあがれません。

未経験である以上、業務としてデザインを行ったことがないのは仕方のないことです。ですが、応募者のデザインスキルを判断できる材料がゼロでは、採用担当者は書類選考を通過させることはないでしょう。

まず最低限やることとしてはPhotoshopを使ったWebサイトのデザインを作成することです。
作成するサイトは架空のサービスや商品でも構いませんが、応募する企業と近しい分野のデザインだとなお良いです。応募する企業の制作実績などを調査して、どんなテイストが合いそうか意識するだけでもプラスになります。

次に、デザインしたサイトを実際に組み上げてサイトの形に仕上げることが必要です。
Dreamweaverやテキストエディタを使って、HTML/CSSにてまずは1つサイトを完成させましょう。

もちろん応募する企業によって「未経験」に求めるハードルも違いますが、サイトを1つでも完成させることで応募できる企業の幅が広がることは間違いありません。

無料で使えるオンラインポートフォリオ作成サービス

サイトを組み上げるのはどうしてもハードルが高い、まずは自分のデザインしたものが通用するのか判断してほしいという場合は、オンライン上で簡単にポートフォリオが作成できるWixを利用するのも一つの手です。

Wixは無料でポートフォリオが作成できるサービスです。
必要なパーツをドラッグするだけなので、HTML/CSSの知識がなくても直感的に高品質のサイトを作成できます。
カテゴリーの「デザイン」内に「ポートフォリオ向けテンプレート」として用意されているので、当てはめて作成してみましょう。

ポートフォリオのお手本

PRESENThttps://presnt.jp/

余白を効果的に使い、インタラクション要素を程よく組み込み、世界観を壊すことなく見るものを引き付ける。

ポートフォリオ事例present_01
ポートフォリオ事例presnt_02

UNDERLINEhttps://u-d-l.jp/

グリッド状にデザインをまとめて情報を整理し、欲しい情報へ迷うことなくたどり着ける導線設計。

ポートフォリオ事例UNDERLINE_01
ポートフォリオ事例UNDERLINE_02

NAOKI FUKUSHIMAhttps://fukushimanaoki.com/

大胆に余白を使用することで作品を際立たせ、ひとつひとつがギャラリーを見ているかのような整然さを感じさせる。

ポートフォリオ事例naokifukushima_01
ポートフォリオ事例naokifukushima_02

rumisugai design workshttps://rumisugai.com/

ファーストビューに無駄な要素を加えない、すっきりとしたデザイン。

ポートフォリオ事例rumisugai_01
ポートフォリオ事例rumisugai_02

HASEGAWAHIROSHI.JPhttps://hasegawahiroshi.jp/

各所にインタラクション要素を組み込み、サイトを見ること、操作することそのものを楽しくさせるデザイン設計。

ポートフォリオ事例hasegawahiroshi_01
ポートフォリオ事例hasegawahiroshi_02

まとめ

デザインスキルはあるけれど、その伝え方がわからないというクリエイターさんは非常に多いです。
この記事を参考に、足りていなかった情報や工夫したほうが良いポイントをまとめ直すきっかけになれば幸いです。

新卒学生向けにポートフォリオのブラッシュアップ講座も開設しています。ゲーム業界を目指す方に、完全無料でサポートします。

ポートフォリオブラッシュアップ講座

【新卒学生限定】内定が取れるポートフォリオを作る!ポートフォリオブラッシュアップ講座

ゲーム業界で3DCGデザイナーを本気で目指す方に、完全無料で開催します。

講座の詳細・お申し込み