市場価値診断ならミイダス!

Web業界の転職に効果的なポートフォリオの作り方!基本から解説!

Web業界の転職のマストアイテム『ポートフォリオ』。

今回は、初めてポートフォリオを作る人でも効果的にアピールできるポートフォリオの書き方を紹介します。

Web業界に転職する人なら、Webデザイナーに限らずポートフォリオを用意するのがオススメです。

僕は31歳で未経験のWebディレクター、33歳で未経験のWebマーケターに転職していますが、いずれもポートフォリオを作り込んで企業の目に留まり、面接に繋がりました。

転職における強力な武器作りをはじめましょう。

ポートフォリオとは

転職におけるポートフォリオは自分の「実績の証明書」のようなものです。

そのため、ポートフォリオを単なる「作品集」と捉えるのはNG。
いくら見た目がカッコよくて魅力的な作品だとしても、裏側のストーリーが分からなければ評価されません。

自分が初めて会う人に向けたプレゼン資料と考えて作りましょう。

※Webデザイナーに限らず、フロントエンドエンジニア、バックエンドエンジニア、Webディレクター、Webプランナーなど、Web業界の転職ではあらゆる職種で作ったほうが有利です。

ポートフォリオの書式・フォーマット

ポートフォリオの書式は自由です。

とはいえ、奇をてらったものではなく、シンプルに、企業が見るポイントを抑えて、誰が見てもわかりやすく作ることができると良いです。

使用するソフトはパワーポイントやGoogleスライドがオススメ。
PDF化して履歴書と一緒に送付できるし、面接時のプリントアウトも簡単だからです。

用紙サイズは印刷も考慮してA4サイズ(縦または横で作る)にします。

余力があれば、ポートフォリオサイトを作ってWeb上に公開できるとさらに良いです。
その場合は、「パワポ」や「Googleスライド」で作ったポートフォリオを元に、独自ドメイン、サーバーを契約して作ると良いです。

ポートフォリオの構成要素

ポートフォリオの構成要素は

  • 表紙
  • 目次
  • 自己紹介
  • 作品紹介

を基本とすると良いです。

各項目の書き方を見ていきましょう。

表紙

表紙はタイトル、氏名、日付を記入しましょう。

  • タイトル(「ポートフォリオ」「Portfolio」など)
  • 氏名
  • 日付(提出日)

ポートフォリオは箱。
重要なのは、あくまで中身。

表紙のデザインは、ポートフォリオ全体に関わってくること、印刷したときの色味を考えて装飾しすぎないほうがいいです。

お好みで、「目次」まで付けても良いです。

目次

目次を設置することでポートフォリオの全体像が分かりやすくなります。

また、自己紹介は飛ばしてすぐに作品を見たい場合などにスムーズです。

※必ずページ番号を振りましょう

自己紹介

まずはプロフィールを簡単に書きましょう。

ポートフォリオだけ見ても誰がどんな作品を作ったか分かるのが大事。
履歴書や職務経歴書と被る部分ですが、ポートフォリオが独り歩きした場合でも伝わることが大切なので、自己紹介は載せたほうが良いです。

プロフィールには以下の情報を書くと良いです。

  • 氏名
  • 生年月日
  • 顔写真
  • 簡単な経歴
  • スキル、使用可能ツール、資格
  • 自己PR(強み)
  • 連絡先
  • SNSアカウント、運営ブログURL、ポートフォリオサイトのURLなど

スキルについては、応募職種や、Web業界で必要とされるものをできるだけ多く書くのがポイントです。

使用可能言語やソフトなどのキーワードで引っかかる可能性があり、場合によっては応募職種よりも合ったポジションを案内してくれる可能性があります。

作品紹介

作品紹介はプロセスやストーリーが分かるように書くのがポイントです。

以下の項目をなるべく具体的に記入できると良いです。

  • 作品タイトル
  • クライアント名 ※
  • 作品画像(スクショ) ※
  • 作品URL ※
  • コンセプト、概要
  • 仕様(ページ数・構成、スマホ対応、フォーム開発含む、CMS利用など)
  • 制作体制と担当ポジション
  • 製作年月日・期間
  • 制作時間
  • 使用した言語・ソフト
  • 意図、目的、狙い、工夫点
  • 成果

※ 公表して良いものに限る。守秘義務があるものは注意。

「成果」

重要ポイント。
定量的に書くと良いです。

(例)サイト更新によりPVが120%アップ、CVが3%増えた等。

納品して終わり、サイトを公開して間もないなど成果が分からない場合などは、ミスなく進行できた、スケジュール遅延なく納品できたなど、何かしら成果として書くと良いです。

「工夫」

ユーザビリティ(使いやすさ)のために工夫したデザインやサイト設計上のポイントや、ユーザーの目を惹くためにどうしたかなどを書きましょう。
納期が近い場合、制作の効率を重視してコーディング視点でデザインしたなども良いです。

バナーやDTPの場合も考え方は同じ

バナーデザインや、DTPデザインの場合も作品紹介を記入する方針や考え方は同じです。

ポートフォリオの書き方のポイント

ポートフォリオを書くときは次の点を意識すると良いです。

  • 応募職種に向けて書く
  • ページ番号を振る
  • 作品数は10〜、ポートフォリオ全体で20ページ以内で作る
  • ポートフォリオ全体のデザインを統一する
  • 作品数は多彩な方が対応できるデザインの幅を見せられて良い
  • 作品はアピールしたいもの、最近のものから記載する
  • 明らかにクオリティの低い作品は載せない
  • 1ページ1作品+説明
  • 作品画像は高画質のものを使用する
  • 誤字脱字に注意する
  • ウソはNG
  • 作品を並べるだけはNG(プロセスを説明する)
  • 具体的に、定量的に書く

守秘義務がある事例の場合は、クライアント名や作品名、キャプチャ画像などを載せるのはNG。
テキストだけでも業界、案件概要、体制、担当などが伝わるようにしましょう。

Webデザイナー以外の場合のポートフォリオはどうする?

Webデザイナー以外の場合のポートフォリオも考え方は同じです。

・フロントエンドエンジニア
・バックエンドエンジニア
・Webディレクター
・Webプランナー
・Webマーケター

それぞれに必要とされる経験・スキル・実績を載せましょう。

また、Web業界は仕事の幅が広いのが特徴です。
会社や案件によって、デザインやフロントエンド制作、Webディレクター、Webマーケ(市場調査、提案など)まで兼任するケースがあります。

そのため、応募職種+周辺業務の実績・スキルも記入できるとより良いです。

  • 応募職種に必要とされる実績、スキルを記載する
  • Web業界で必要とされるものはすべて書く(デザイン、コーディング、Webディレクター、Webマーケ)

たとえば、Webディレクター応募の場合、以下のことをできるだけ盛り込めると良いです。

  • キーワード調査(SEOで上位表示したことのある事例)
  • ワイヤーフレームのサンプル
  • 担当したデザイン(自主制作物でもあると良い)
  • 担当したWebサイト(自主制作物でもあると良い)
  • 使用可能な言語、ソフト
  • 自身のブログのPV、直帰率、平均滞在時間
  • Twitterの月間インプレッション、プロフィースアクセス、個別投稿のエンゲージメント数など
  • リスティング広告、SNS広告を個人で運用した実績

さいごに

ポートフォリオの作り方は分かりましたか?

ポートフォリオは単なる作品集ではなく、制作プロセスやストーリーが分かるように作るのがポイントです。

また、Web業界はWebデザイナー・フロントエンドエンジニア・Webディレクターなどの職種がありますが、会社や担当案件によって境界があいまいです。
そのため、職種に囚われすぎることなく、Web制作、Webマーケに関わることなど、実績や使用可能言語・ツールなどを広く記載しましょう。

そうすることで、

・WebデザインがわかるWebディレクター
・フロントエンド開発ができるWebデザイナー
・Web制作ができるWebマーケター

といったアピールができます。

未経験からWeb業界へ転職したい人はこちらの記事をぜひご覧ください。

未経験からWeb業界への転職を目指しているあなたに伝えたいこと
未経験からWeb業界へ転職したいと考えているあなたへ。結論から言ってWeb業界は未経験から転職可能です。この記事では未経験から最短でWeb業界に転職するための方法を紹介します。