Webエンジニアがポートフォリオを作成すべき5つの理由と具体的な記載内容とは

2023.04.10(公開: 2023.03.13)

はじめまして、エンジニアスタイル編集部です！

コラムページでは、ITフリーランスに向けてお役立ち情報を発信します。Twitterではホットな案件を紹介してまいりますので、ぜひフォローをお願いいたします！
本記事が、皆様の参考になれば幸いです。

経験がまだ少ない方にもわかりやすく説明するために、初歩的な内容も記載しております。記事も長いので、実務経験豊富な方は、ぜひ目次から関心のある項目を選択してください。

エンジニアスタイルは、最高単価390万円、国内最大級のITフリーランス・副業案件検索サービスです。Webエンジニアのフリーランス・副業案件一覧を以下からご覧いただけますのであわせてご確認ください。

Webエンジニアがポートフォリオを作るべき5つの理由

WEBエンジニアにとってポートフォリオを作成しておくことは、仕事の依頼を受けやすくなるなどのメリットがあるため重要になります。本記事では、ポートフォリオ作成のコツや注意点、参考にしたいポートフォリオなどをご紹介します。最後までご覧ください。

自分自身の振り返りに使える

これまでに自分が在籍した会社や業種、また参画したプロジェクトやその内容などの経歴を記載することで自己分析が出来ます。そのため、今まで行ってきた仕事や案件の内容をまずは全て一覧にまとめてみましょう。その中で、今後も継続していきたい仕事や新たに挑戦してみたい仕事が見えるため、今後の仕事に活かせます。

スキルの棚卸しができる

WEBエンジニアとして活動するとなると、企業に対してどのようなスキルや経験を活かすことで事業に貢献できるのかをアピール出来なければなりません。しかし、自己分析に時間を割ける機会は、日々の忙しい生活の中ではなかなか無いでしょう。

そのため、ポートフォリオを作成して自らの経験やスキルを経歴として記すことでスキルの棚卸しを行えるでしょう。自分の「できる」や「得意」を客観視することで、自分がどのような人材なのかを確認することが可能です。さらに、今後のキャリアステップの方向性をできるだけ具体的にイメージし、企業が求める人物像とどのくらいマッチするかを確認出来るとより良い働き方が見つかるでしょう。

スキルの証明となる

ポートフォリオは自分をアピールするためのサイトなので、存分に自身の技術力をアピールしましょう。掲載すると良い技術・スキルは以下の内容となります。ポートフォリオにスキル欄を設けて、その欄に記載しておくことで目に留まりますし、実際に作成した制作物を貼り付けることで実際に見てもらえます。実際に見てもらうことが正真正銘の証明となるでしょう。

過去に参画したプロジェクト（内容・規模・役割など）
スキルセット（プログラミングスキル・設計スキル・マネジメントスキルなど）
制作物（今までに開発したアプリケーションやサービスなど）
アウトプット（GitHub・Qiita・ブログなど）

職務経歴書や履歴書のみで判断されると不利になる

Webエンジニアを採用する企業はスキルを重視することが多く、スキルのない初心者は働き口を探すのが難しいとされています。そのため、職務経歴書や履歴書しかないと面接で話せたとしても、目に見える実績がないと判断されてしまいます。また、他のエンジニアは当たり前のようにポートフォリオを提示するため、ポートフォリオがない時点で他のエンジニアより不利に働いてしまうでしょう。場合によってはポートフォリオがないと面接すら受けられないこともあるようです。

力量や実績がわかるため仕事を依頼されやすい

個人でアプリケーションなどの開発をされている方であれば、アプリケーションのリンクをそのまま埋め込むことで自分の技術力を直接見てもらえます。また、それ以外でもポートフォリオに埋め込んでおくことで見てもらえる可能性は高いです。依頼する側も力量がわかっていて実力を信頼できる人に頼みたいと考えます。依頼する側の立場に立ってポートフォリオを作成するのも良いです。

Webエンジニアがポートフォリオに載せておくべき内容

ここでは、Webエンジニアがポートフォリオに載せておくべき内容を紹介します。全て載せておくことであなたがどういう人材なのか把握してもらえるため、採用される可能性が高まります。可能な限り詳細に記載しましょう。この章では、Webディレクターがポートフォリオに載せておくべき内容について詳しく解説します。

ポートフォリオ概要

エンジニアのポートフォリオは実績や能力を証明するための資料となります。自分のプロフィールをはじめとして、これまでの実績や得意なスキルをアピールするページにしつつ、見る側が見やすいページを心がけましょう。

プロフィール

まず初めに、自分がどういう人なのか簡単に紹介しましょう。

以下の項目を記載してください。

名前
生年月日
顔写真
経歴
活動拠点
連絡先
今の仕事を選んだ理由

スキルセット・強み・アピールポイント

仕事に役立つ具体的なスキルもまとめましょう。その分野での資格を持っているなら資格を、もし資格がなかったとしても何が得意なのかを箇条書きでまとめると良いです。箇条書きでまとめておくべきスキルは以下の通りとなります。

過去に参画したプロジェクト（内容・規模・役割など）
スキルセット（プログラミングスキル・設計スキル・マネジメントスキルなど）
制作物（今までに開発したアプリケーションやサービスなど）
アウトプット（GitHub・Qiita・ブログなど）

事前にできることをまとめておくとコミュニケーションコストが抑えられ、双方の時間を無駄にせずに済みます。

今までの実績と成果物

個人でアプリケーションなどの開発をされている方であれば、アプリケーションのリンクをそのまま埋め込むことで自分の技術力を直接見てもらえます。また、それ以外でもポートフォリオに埋め込んでおくことで見てもらえる可能性は高いです。依頼する側も力量がわかっていて実力を信頼できる人に頼みたいと考えるため、必ず実績か成果物を公表しましょう。

アウトプットの記載

ソースコードを記載したGitHubや、ブログ、SlideshareのURLなども記載しておくと採用にはプラスに働くでしょう。

対応できるサービスや料金

自分のスキルを考慮して対応できるサービスが把握できていれば公表しましょう。また、どれくらいの報酬なら引き受けられるのかも公表しておくと、依頼する側も金額を提示しやすくなります。

連絡先

ポートフォリオサイトの応募フォームやメールアドレスを記載しておきましょう。ポートフォリオを見て、仕事を依頼したい人がスムーズにコンタクトできるようにしておくことが大切になります。

他と差別化を図るために、Webエンジニアがポートフォリオを作成する際に見ておきたいポイント

Webエンジニアがポートフォリオを構築するときに、他者との差別化を図るために様々なポイントに注目する必要があります。

可能であれば数値的な根拠や実績を記載し、「どの」分野のプロジェクトに「誰と」取り組み、「どのように」関わったかを明確にすることが大切です。

Webエンジニアは、これらの点に留意してポートフォリオを作成することが重要です。

可能であれば数字的な根拠や実績を掲載

しっかりとしたポートフォリオは、自分のスキルや実績をアピールでき、他のWebエンジニアとの差別化を図る上でとても重要です。ポートフォリオを構築することで、転職や就職に有利になります。

例えば、過去にリリースしたWebサイトのユーザーアクセス数が月間平均で10%増加した数字や、特定のプロジェクトでのクリック率が20%向上した数字などを掲載することで、自分の仕事による実際の成果を伝えることができます。

このように、自分の取り組んできたプロジェクトやタスク、経験を記録しておくことで、仕事での成果や能力を明確に企業に伝えることができます。数字的な根拠や実績を掲載することで、仕事での能力を明確にアピールすることができます。

案件の「どの」領域を担当したのかを明確にする

ポートフォリオを構築する際には、自分が担当した「どの」領域を明確にすることが非常に重要です。特にWebエンジニアの場合、担当領域が広いため、どのような仕事を担当したかを明確にすることが求められます。

これによって、採用側は自分が担当した領域を明確に把握することができ、また、自分のスキルや実績がどの分野にあるのかが明確になります。

また、これをすることで採用側の採用意欲も高まり転職に有利になります。

「誰と」案件に取り組んだのか・巻き込んだのか明確にする

Webエンジニアがポートフォリオを作成するにあたって、誰と一緒にプロジェクトを進め、関わったかを明確にすることが重要です。

これは、プロジェクトごとに担当した役割や作業、スキルなどを詳細に記載することで、そのプロジェクトでの実績や能力を企業側が把握しやすくなります。

また、プロジェクトのチームメンバーやクライアントなどとの共同制作においても、巻き込んだ役割や経験を明確に記載することで、Webエンジニアのリーダーシップやチームマネジメント能力をアピールすることができます。

「どのように」案件に取り組んだのか明確にする

Webエンジニアが案件に取り組んだ「どのように」を明確にすることも重要です。案件に対するアプローチや方法、デザイン思想、クリエイティブな提案などを記載することで、Webエンジニアのクリエイティブなセンスや技術力をアピールすることができます。

また、各プロジェクトの成果やKPI、ユーザーからの要望への対応などを詳細に説明することで、企業はWebエンジニアのプロジェクト管理能力や仕事への取り組み姿勢を理解することができます。

Webエンジニアがポートフォリオを作成する際の注意点

ポートフォリオを作っておくことは、Webエンジニアとして、自分のスキルや実績をアピールする上で重要なことです。しかしながら、ポートフォリオを作成する際には、いくつか注意すべき点があります。

その中でも、掲載する実績や作品がクライアントに問題ないか確認すること、見る人に配慮した内容にすること、定期的な更新を心がけることが重要です。

これらの注意点を念頭においてポートフォリオを作成することで、Webエンジニアとしての印象を向上させ、今後のキャリアアップにつなげることができます。

掲載したい実績や作品を公開して問題ないかクライアントに確認する

なお、ポートフォリオの作成にあたっては、Webエンジニアが事前にクライアントに、ポートフォリオに掲載したい実績や作品に問題がないかを確認することが重要です。また、ポートフォリオの内容は、見る人に合わせた内容にする必要があります。

また、ポートフォリオの中身は転職や業界への応募などで重要な役割を果たしますので、必要な情報を明確に記載しておくことが大切です。

見る人に配慮した内容にする

Webエンジニアがポートフォリオを作成する際の注意点として、見る人に配慮した内容にすることが重要です。

これは、プロジェクトや仕事の実績やスキルなどを具体的に記載しておくことで、企業や求人情報などからアピール可能な能力を伝えられます。

また、プロデューサー・ライター・デザイナー・エンジニアなどの専門性の高い仕事もありますので、専門性の高い部分も明確に伝えられる内容にしておきましょう。

定期的な更新を心がける

Webエンジニアがポートフォリオを作成・更新する際の注意点として、定期的な更新を心がけることが重要です。プロジェクトの経過や仕事の実績などは常に変化していきますので、最新の状況を反映させていく必要があります。

さらに、マネジメント能力やチームワーク能力などのリーダーシップスキルも向上させていく必要がありますので、KPI の達成度合いなども可能性がありましたら取り入れていきましょう。

作って終わりではなく、SNSを利用し配信する

今やSNSを利用していないのは損と言っても過言ではないほどに、SNSは普及しました。そのため、ほとんどの人が何かしらのSNSアカウントを持っていると言えます。SNSを利用し露出を増やすことで人の目に触れさせることが営業にもなります。

名刺にポートフォリオのURLを記載する

名刺にポートフォリオのURLを記載することで、名刺を渡した相手にポートフォリオを見てもらえる機会が生まれます。ポートフォリオがあるということが一目置かれることにもなるでしょう。また、ポートフォリオサイトをわざわざ後ほど教える手間も省けるため記載しない手はありません。

Webエンジニアが参考にしたいポートフォリオ

WEBエンジニアとしてポートフォリオを作成する際に、どのようなポートフォリオを作成すればいいのかわからないという疑問が浮かぶ方は多いでしょう。そのため、参考になるエンジニアのポートフォリオサイトを4つご紹介します。紹介するサイトはデザインも洗練されていてエンジニアとしてのスキルが活用されています。これらのサイトを模倣するのは難易度が高いですが、参考にしてください。

Takeshi Oide

Takeshi Oide氏は、グローバルに活躍しているフロントエンドエンジニアです。

ポートフォリオサイトは遊び心にあふれたデザインになっています。メインページに現れる大きなロゴと、マウスに合わせて動く背景が特徴といえるでしょう。

MASAYUKI DAIJIMA

インタラクションデザイナー・WEBエンジニアとして活動されています。

BGMがイケていて、飛び回るパーティクルがスキルの高さを表しています。

Hoda’s Portfolio

Hoda氏は、31歳でIT業界に転職したエンジニアです。ゲームのコントローラーを模したメインページが、独自性にあふれたポートフォリオサイトになっています。コミカルな写真の選択、温かみのある色合い、ユーモアに富んだ言葉の使い方に特徴があると言えるでしょう。

Takumi Hasegawa

こちらもフロントエンド色がとっても強いサイトです。ご自身の強みはインタラクションだとすごく伝わります。色のバランスとか余白とかすごくいいですけど、もともとデザインされていたんでしょうか。

フリーランスのインタラクションデザイナー・テクニカルディレクション周りの方のようです。

まとめ

ポートフォリオを作成することで、Webエンジニアは自分自身を振り返り、スキルの棚卸しを行い、その成果を企業にアピールすることができます。

また、プロジェクトマネジメント能力や問題・課題解決能力など、企業の採用担当者が見ているポイントもあります。プロフィールやスキルセット、今までの実績などを載せておくことで他との差別化も図れます。Webエンジニアがポートフォリオを作成するときは、クライアントの承認を得ること、そして定期的に更新することが重要です。