Work guide

職種別お仕事ガイド

エンジニアのポートフォリオの作り方とは?ポイントを確認して転職を成功させよう

2022.08.08

ポートフォリオをWebエンジニアの転職にも活用しよう

ポートフォリオというと、Webエンジニアやフロントエンドエンジニア、バックエンドエンジニアには関係ないもの…と思われるかもしれませんが、実は、面接や選考時に多大な力を発揮してくれます。

ここでは、ポートフォリオとは何か?というところから始まり、エンジニアの転職でポートフォリオを作成するメリットと作り方の例まで解説します。

Career advice

Webエンジニア向け
転職・キャリア相談

IT・Web専門の人材エージェント「ウェブスタッフ」では、Webエンジニアの方の転職を全面的にサポートしています。自分のスキルをきちんとアピールできる職務経歴書になっているか、プロの目で添削することも可能です。ぜひお気軽に個別相談をご利用ください。

オンライン相談に申込む オンライン相談

Webエンジニアの転職にポートフォリオは必要?

ポートフォリオとは、自分の作品や書類をまとめたもので、特に、Webやコンテンツ、プロダクトデザイン業界のデザイナーやクリエイターが自分の実績をまとめて「自分の作ってきたものはこれだ!」と面接時にアピールしたりするのに使います。

しかしエンジニアの場合、ポートフォリオという言葉を耳にしたことはあっても、具体的な内容については分からない、また見たこともないという方は多いのではないでしょうか。

Webエンジニアの転職にポートフォリオは必要なの?職務経歴書(スキルシート)があれば十分ではないの?と思われる方もいらっしゃるかもしれません。 ここでは、エンジニアがポートフォリオを作成するメリットについて解説します。

現場以外の人が見たときにもスキルが伝わりやすい

Web系エンジニアの職務経歴書(スキルシート)のポイントと書き方」の記事で、「職務経歴書(スキルシート)はあなたを勝手にプレゼンする資料」であるということを述べました。これはポートフォリオにも言えることで、むしろ職務経歴書(スキルシート)以上に(プロジェクトマネージャーや人事などといった)採用決定権がある人に対しての訴求力が期待できます。

なぜなら、ポートフォリオは「こういうのを作れる人なんだな。」ということが一発で伝わるからです。非常に大きなアドバンテージとして有利に働くこととなるでしょう。

萬徳 邦尚 さん

システムエンジニア 兼 プロジェクトマネージャ

萬徳 邦尚 さん

私がポートフォリオを作りはじめた理由ときっかけ
私は、以前勤めていた企業で、Webサービスの管理画面のフロントエンドデザインなどを担当することが多かったのですが、面接時にそのスキルを具体的にどう伝えたらよいだろうかという悩みを抱えていました。

そんなときに、Webデザイナー出身の同僚のポートフォリオを真似て、自分のポートフォリオを作ってみたのです。実際に転職での面接時に、ポートフォリオを使いながら話をすると、自分の行ってきたことが伝わりやすくなったというのを感じています。 経験してきた職務や業務内容をわかりやすく相手に説明するにはポートフォリオがうってつけであると思います。

なお、私は、職務経歴書(スキルシート)のアップデートを1年に数回実施していますが、あわせてポートフォリオの更新も行っています。

プレゼンテーションのシミュレーションができる

応募者は、ポートフォリオを作成することで面接のシミュレーションを行うことができます。どういうことかというと、採用面接時には、経験してきた業務をの説明を求められることが多いのですが、ポートフォリオを作りながら「ここではこれを説明すればいいな。」「この質問が飛んでくるかもな。」といったことが見えてきます。面接をイメージしながらポートフォリオを作ってみてください。

自分が行ってきたことの振り返りになる

特にポートフォリオをWebサイトで公開する場合にいえることですが、ポートフォリオを作ることで自分が学んできた知識を振り返ることができます。

何の言語で、どういうデザインフレームワークを使って、どこで公開するか。 応募者はポートフォリオを作るというモチベーションのために、今まで積み重ねてきたスキルを振り返ることができます。その中で、もし欠けている知識があれば、ポートフォリオをきっかけに学ぶというのも良いでしょう。

Webエンジニアがポートフォリオを作成するメリット

Webエンジニアがポートフォリオを作成するメリットについてご紹介します。

面接時に話をふくらませやすい

ポートフォリオがあることで、面接時に圧倒的に話をふくらませやすくなります。

職務経歴書(スキルシート)は、あくまでも応募者が経験してきた業務の概要(業務内容や経験スキルなど)のみを記載することがほとんどです。一方で、ポートフォリオではコード・デザイン・場合によってはUML図などを掲載することができます。これがあると、面接官や採用する立場の人間は、応募者がどう開発に携わっていたか具体的に想像しやすくなるのです。

そして、実際にどうやって作ったのか、運用はどうしていたか、開発していたときにどういう問題やトラブルがあったのか、といった質問を面接官がしてくると期待できます。 面接時に話がふくらむということは、あなたを評価する軸が増えるということですので、採用にむけて優位に働くことでしょう。

作るだけで頭ひとつ抜けられる・差をつけられる

Webエンジニアの人で、ポートフォリオを作っている・公開している人というのはそこまで多くないでしょう。ということは、ポートフォリオがあるだけで加点対象となるかもしれません。

逆に考えてみてください。もし、あなたが採用する側として、職務経歴書(スキルシート)しか持ってきていない人と、職務経歴書+ポートフォリオの2つがある人がいたら、どう評価するでしょうか?きっとポートフォリオもある人のことを高くみると思います。作るだけで、評価があげられるならばこんなに簡単なことはありません。

面接で話がうまくできなかったとしても、ポートフォリオがあなたを救ってくれることも

Webエンジニアの採用条件において、スムーズに喋ることは必須条件ではないですが、「あがってしまって全然話せそうにない。」「相手がどういう質問をしてくるか心配だ。」ということもままあると思います。

こういった不安に、ポートフォリオは応えてくれるかもしれません。先述の通り、ポートフォリオがあると面接官はそれを見ながら質問してくる可能性が高くなる…ということは、応募者にとって答えやすい質問が返ってきやすくなるからです。

Webエンジニアのポートフォリオの作り方

次に、実際にエンジニアがどうポートフォリオを作ればよいのか、解説します。ポートフォリオは、下記の2つの形態のどちらかで作成するのが一般的です。

Web・GitHubポートフォリオ

Web上で作成するポートフォリオです。コードを見せたい場合などはこちらを選択します。レンタルサーバやAmazon Lightsailなどを利用する方法もありますし、GitHub Pagesなどを使ってもよいでしょう。

また、Web・GitHubポートフォリオには、GitHubはもちろんのこと、QiitaやStack Overflowなどに投稿している人はそこへの動線もあると尚良いでしょう。

Webポートフォリオの一例

▲Webポートフォリオの一例。対応できる業務や実績などを記してみてください。

紙ポートフォリオ

スライドで作成するポートフォリオです。プレゼン資料のイメージに近いものだといえます。

メリットは、ネット環境に繋げない場合でもさっと見てもらえることです。要件定義やドキュメント制作が主な業務となるシステムエンジニアやプロジェクトマネージャー職の方にはこちらも向いています。

紙ポートフォリオの一例

▲紙ポートフォリオの一例。

職種別ポートフォリオ作成例

ポートフォリオは、デザイナーやフロントエンドエンジニアはもちろんのこと、SEやバックエンドエンジニア(プログラマー)、サーバーサイドエンジニアといった職種に応募する際もおすすめです。以下にいくつかの職種別にこんなことを載せるとよいという一例を記します。

フロントエンドエンジニア

フロントエンドエンジニアの方がポートフォリオを作成するのであれば、最低でもHTML・CSS・JavaScriptによるコーディングスキルが分かるようなポートフォリオとすることが必要です。この3つはたいていどこの現場でも使います。

そして、以下の要素もできるだけ入れるようにしてください。

  • ・レスポンシブデザイン
  • ・Vue.jsやReact、jQueryなどのJavaScriptフレームワークやライブラリ
    (若干古いですが、jQueryを使っている現場もまだまだあります。)
  • ・UI / UX を意識した作り

デザイナーではないので、かっこいいWebサイトを作る必要はありませんが、使いやすい、見やすいサイトになっているかを意識するようにしましょう。

バックエンドエンジニア

バックエンドエンジニアの方がポートフォリオを作成するのであれば、データベースとの連携処理の部分やOAuth、API連携のところのコードをみてもらえるようにするとよいでしょう。理由としては、外部との連携部分を作ったことがあるということがアピールできるようになるからです。

また、AWSやMicrosoft Azureといったクラウドを使っているような処理が入っているところをみせると、この人はクラウド環境での開発構築をしていたんだなというのが伝わりやすくなります。

さらに、セキュリティ対策を行っている・意識していることをアピールできるような処理が入っているとよいでしょう。

システムエンジニア・プロジェクトマネージャー

システムエンジニアやプロジェクトマネージャーの場合、設計書の作成やドキュメント・チケット管理、もしくは稼働計画などを作ることが多く、フロントエンドエンジニア、バックエンドエンジニアのポートフォリオのようにわかりやすいものがない…というのが実情です。

私の場合、UML図を模したものをいれたり、ドキュメント制作やスケジュール管理をどのようにしていたかを説明できるようにしています。具体的には、PlantUMLやdraw.ioなどといったツールを使ってUML図を見せられるようにしていたりなど…。自分の行ってきた業務をマークダウン形式で整理しておくのもよいでしょう。

ワークフローの一例

▲ワークフローの一例。これは実際の業務を模して作成したものです。

ポートフォリオを作成するにあたっての注意点

Web・GitHubポートフォリオを作成する場合はコードを整える

コードを見られる可能性があるポートフォリオの場合、コードのインデントは揃えるようにします。また、Syntax Errorなどおこらないように、事前に動作確認をしておきましょう。余計なゴミコードや不必要なコメントも削除しておいてください。

秘密保持契約には気をつけて!

どの形態、どの職種でもですが、ポートフォリオは秘密保持契約の範囲内で書けることのみとなりますので注意してください。業務で作成したコードや画像、仕様書を流用するのはほとんどの場合NGです。

ポートフォリオを作って評価を上げよう

よく「当たり前のことをやっている人は評価される。」と言いますが、ポートフォリオはその一つだと思います。

「職務経歴書(スキルシート)に加えてポートフォリオを作るのは面倒…。」と思う方も多いかもしれません。しかし、ポートフォリオは時間さえかければ必ず作れるものですので、早めに、そしてゆっくり準備して転職に望むようにしてください。

文中でも述べましたが、プラスになることはあっても、マイナスになることはありません。

あなたを救ってくれるかもしれないポートフォリオ、ぜひ作ってくださいね。

ライタープロフィール


萬徳 邦尚さん

システムエンジニア 兼 プロジェクトマネージャ
萬徳 邦尚 さん

新卒にてエンタメ企業のWebサイト作成に携わる。その後、大手新聞社やインターネットプロバイダのWebサービス設計・システム開発などに従事。現在は、小~中規模の開発を中心に、コーディングから設計、プロジェクトマネージメントなどをマルチにこなす。
また、フランスで生活していた経験をもとに、翻訳マネージメントや多言語サイトの開発も得意とする。2021年より株式会社オフィス・ヴァンクール代表取締役に就任。

※この記事の情報は2022年08月08日時点のものです。

  • ポートフォリオをブラッシュアップ!転職で評価されるポイントとは?
  • メタバースで変わる仕事や働き方~イチ押し本
  • 安定して仕事を獲得するために!フリーのエンジニアが振り返る、会社員時代の強みのつくり方 ~公開キャリアインタビュー「Web業界ハタラク名鑑」vol.5~ 動画公開
  • 未経験からWeb業界への転職準備

人気の記事

フロントエンドとバックエンドとは?意味の違いとエンジニアの仕事

1

Reactとは?フレームワークとの違い・フロントエンド開発に活用するメリットや特徴を解説!

2

UI/UXとはどういう意味?それぞれの違いと特徴まとめ

3

コーダーの仕事とは?コーディングに必要なスキルや年収を徹底解説!将来性を高めるためには?

4

Webエンジニアの仕事内容と必要なスキルとは?転職活動のポイントやキャリアパスをご紹介

5

フロントエンドとバックエンドとは?意味の違いとエンジニアの仕事

1

Reactとは?フレームワークとの違い・フロントエンド開発に活用するメリットや特徴を解説!

2

UI/UXとはどういう意味?それぞれの違いと特徴まとめ

3

コーダーの仕事とは?コーディングに必要なスキルや年収を徹底解説!将来性を高めるためには?

4

Webエンジニアの仕事内容と必要なスキルとは?転職活動のポイントやキャリアパスをご紹介

5

あなたのライフスタイルに合わせて働きたい方は、WSハケン 1つの会社で長くはたらきたいかたは、WSキャリア

他の職種も見る

  • Webデザイナー・UI/UXデザイナー

  • フロントエンドエンジニア・コーダー

  • Webディレクター・Webプロデューサー

  • Webマーケター

  • システムエンジニア・プログラマ

  • Webオペレーター・Webサイト運営

  • サーバー・ネットワークエンジニア

  • DTP・グラフィックデザイナー

Career advice

転職のアレコレ。プロに相談したい方へオススメ!

最新のIT・Web業界動向を知るキャリアカウンセラーが行う
「キャリアアドバイス」

ある程度経験を積んだので次のステップにキャリアアップしたい、しばらくWeb業界を離れていたが再度業界に戻りたい、 未経験・経験浅めだがどのように転職活動を行っていったらいいかなど、ウェブスタッフでは様々なご要望に対応したキャリアアドバイスを行っております。

お申込みはこちら

ウェブスタッフが運営するサイトでは、利便性向上・分析・広告配信等のためにCookie等のデータを使用しています。当社が取得したアクセスデータとの関連付けの削除(オプトアウト)に関しては「個人情報の取り扱いについて」をご覧ください。

同意して閉じる

確認する

WEB STAFF ウェブスタッフ株式会社

ウェブスタッフは、IT・Web業界専門の求人を取り扱う人材エージェントです。
IT・Webクリエイター・エンジニアの派遣・転職はお任せください。在宅勤務・フリーランスへのキャリアチェンジもサポート。

ページトップへ ページトップへ