クリエイティブ業界の注目情報や求人情報などを発信する、クリエイターのための総合情報サイトです。
転職に有利なポートフォリオの作り方と制作フロー

転職に有利なポートフォリオの作り方と制作フロー

Webデザイナーとして転職を考えたとき、ポートフォリオは必須のツールです。
履歴書や職務経歴書は社会人としての経歴を記すものですが、ポートフォリオはどんなデザインをしてきたのか、クリエイターとしての個性をアピールするためのものです。

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

そこで、Webデザイナーの転職になぜポートフォリオが必要なのか、ポートフォリオ作成の基本構成や、選ばれるポートフォリオのポイントをご紹介します。

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

ポートフォリオは自分を表現するもの

デザイナー、イラストレーター、カメラマンなどのクリエイターが転職のときに必須のツールがポートフォリオです。

履歴書や職務経歴書は社会人としての経歴を記すものですが、ポートフォリオはどんなデザインをしてきたのか、クリエイターとしてどんな作品を作ってきたのかなどを、1冊のファイルや冊子にまとめたものです。

そもそもポートフォリオ(Portfolio)とは、「紙ばさみ」を意味する英語からきています。
時が経つにつれて、ポートフォリオは以下のような意味へと変化していきました。
・画家・写真家・デザイナーなどが自分の作品を整理してまとめたもの
・モデルなどが売り込み用の自分の写真を入れるもの
近年では総じて個人の作品集という意味に定義されるのが一般的です。

就職や教育分野でも「自分を表現するための資料」をポートフォリオと呼びます。
つまり、ポートフォリオは「自分を表現するもの」と言えます。

なぜWebデザイナーの転職にポートフォリオが必要なのか

クリエイターの採用では、採用担当者自身もクリエイターというケースが多々あります。同じ職種の人に、「自分はこういう事ができる」「自分はこういう考え方ができる」ということを相手に表現するためにポートフォリオは必要になります。

ポートフォリオ自体がひとつの作品と考えることが大切です。
単純に作品を羅列するだけでは作り手の意思が見えないので判断が難しい、というのが採用者の本音です。
あれもこれも盛り込んで万人受けを狙うよりも、「この人になら、こういう分野の仕事を任せられそうだ」という事を連想させるポートフォリオが必要になります。

最低限ポートフォリオに載せるべき情報

ポートフォリオの構成サンプル

ポートフォリオの構成サンプル

http://u-d-l.jp/works/works02/

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

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

2プロジェクト名

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

3制作担当

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

4コンセプト

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

5工夫点

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

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

ポートフォリオ制作フローとポイント

何を載せるかの決定

過去の制作実績の中でも特に制作過程にこだわったものや、成果が出たものなどご自身の主要な作品をピックアップします。

採用担当者は数多くの応募作品や書類に目を通さないといけません。基本的にはパラパラと流し見されることを念頭に置いて、インパクトのあるものを前半にレイアウトしましょう。まずは目を引いて手を止めさせることが第一段階です。

作品数はだいたい5~10程度を載せます。
多すぎる作品数はひとつひとつの印象が薄くなってしまうデメリットがありますが、逆に少なすぎても実力を十分に判断できないというデメリットになってしまいます。
作品数が少ない場合は、モックアップでもいいので作成したデザインを載せましょう。

どこまで情報を載せるかの決定

まず何が望まれているか、どんな人材やスキルが求められているかを求人票などから読み取り、そのオーダーを意識して制作します。 例えば、企画力を求めている会社、スマホのスキルが要求されている会社など、 それぞれが求めているであろう経験・スキルを踏まえて、見合うようなものを記載します。

どのように見せるかの決定

選考が一人だけというのは稀で、他の方と比較されることを考え、オリジナリティを出しましょう。 比較された場合にオリジナリティがあれば、結果として他との差別化になり、印象に残るのです。

最適なパッケージ(サイズ等)の決定

一般的にはA3かA4のサイズで、縦か横かは、レイアウトのデザインに依存します。
パッケージとして簡単に導入できるのはクリアタイプのポケットファイルです。ただし高級感はあまり感じられません。
あまり表紙がペラペラのものを選ばず、厚みがあるしっかりしたタイプのものを購入しましょう。

ポートフォリオの作成方法はクリエイターの個性を出すため千差万別ですが、注意しなくてはいけないのは、企業がポートフォリオの作成方法を指定している場合です。
サイズはA4、リングファイルはページがバラける可能性があるため使用禁止。など、実際に形式を指定している企業もあります。

指定形式をしっかり確認しておかないと、注意事項をちゃんと確認できない人物とみなされ、それだけでマイナス評価につながります。
どんなに優れたポートフォリオでも、最悪選考のチャンスすらもらえないこともあるため、求人票や提出方法については隅々まで目を通しましょう。

通過率をあげるアプローチ手法

あれもこれも盛り込んで万人受けを狙うよりも、「この人になら、こういう分野の仕事を任せられそうだ」という事を連想させるポートフォリオが通過率を上げます。

まずは基本の軸となる自分の得意分野を第一に決め、ボリュームを多く、ページ前半に作品を配置します。
イラストが得意であれば、デフォルメ調・リアルタッチ調など複数のタッチを掲載することで、作品の幅が広いことをアピールできます。

自分が制作した作品や手がけたプロジェクトの中から、応募する企業の特徴に合ったものを載せるとなお効果的です。

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

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

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

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

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

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

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

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

未経験でもDreamweaverやテキストエディタを使ってサイトを1つ完成させることが必要とお伝えしました。
ですが、サイトを組み上げるのはどうしてもハードルが高い、まずは自分のデザインしたものが通用するのか判断してほしいという場合は、オンライン上で簡単にポートフォリオが作成できるサービスを利用するのも一つの手です。

Wix(http://ja.wix.com/)

Wixは無料でポートフォリオが作成できるサービスです。
必要なパーツをドラッグするだけなので、HTML/CSSの知識がなくても直感的に高品質のサイトを作成できます。

Wixのポートフォリオ用テンプレート
カテゴリーの「デザイン」内に「ポートフォリオ向けテンプレート」として用意されているので、当てはめて作成してみましょう。

ポートフォリオのお手本

PRESENThttp://presnt.jp/

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

PRESENT_01
PRESENT_02
PRESENT_03
PRESENT_04

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

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

UNDERLINE_01
UNDERLINE_02
UNDERLINE_03
UNDERLINE_04

NAOKI FUKUSHIMAhttp://fukushimanaoki.com/

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

naokifukushima_01
naokifukushima_02
naokifukushima_03
naokifukushima_04

rumisugai design workshttp://rumisugai.com/

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

rumisugai_01
rumisugai_02
rumisugai_03
rumisugai_04

HASEGAWAHIROSHI.JPhttps://hasegawahiroshi.jp/

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

hasegawahiroshi_01
hasegawahiroshi_02
hasegawahiroshi_03
hasegawahiroshi_04

まとめ

Webデザイナーの転職になぜポートフォリオが必要なのか、ポートフォリオ作成の基本構成や、選ばれるポートフォリオのポイントをご紹介しました。
最後に、転職に有利なポートフォリオ制作のために必要な3つのポイントをまとめます。

  1. 見る人のことを考えながら、何をどうやって見せるかを決定
  2. 単にキャプチャを貼るだけでなく、制作意図や担当フェーズ等も忘れずに記載
  3. 制作過程におけるこだわったポイント等でアピール

これまでの実績をしっかりと伝えられるよう、ポートフォリオの制作に臨みましょう。
こんな書き方でいいのか、私の経歴の場合はどうやって書けばいいの?
ポートフォリオの作り方に迷う、アドバイスが欲しいときはCREATIVE VILLAGEの転職サポートにご相談ください。

Web業界に特化したエージェントがポートフォリオの添削はもちろん、応募企業が求めている人物像までアドバイスします。

お仕事紹介サービス
クリーク・アンド・リバー社では、登録クリエイターの皆さんに、よりよい環境でクオリティーの高い仕事をしていただくため、さまざまなサポート体制を整えています。
登録いただく事で、当社に寄せられる求人への応募や会員だけがお受けいただける会員優待などのサービスをご利用いただけます。

ご登録はこちら

こちらもオススメ

関連記事