【採用率激増】Webエンジニアはポートフォリオが重要！5つの作り方やおすすめサービスを紹介

「ポートフォリオって作ったほうが良いの？」
「作り方が知りたい」
「充実させるコツってあるの？」

「Webエンジニアとして転職したい」「副業を始めたい」と思ったとき重要になるのがポートフォリオ（自分の作品集）です。他の応募者と差別化するためには、ポートフォリオを充実させることが必須です。

そこで、この記事では

ポートフォリオを作るべき3つの理由
作り方・充実させるコツ
ポートフォリオに使うべきサービス

とポートフォリオに関する内容を徹底的に解説していきます。

参考URLも豊富に紹介していくので、全くポートフォリオを作ったことがない方も必見です。

ぜひWebエンジニアの方は、この記事を参考にポートフォリオを作ってみてください！

監修者：平井　隆嗣
システム開発に加えてマーケティングまで対応し、集客や売上に貢献するエンジニア。
開発会社にて4年間の勤務をし、リーダーとして活躍したあとフリーランスとして独立。WordPress導入、デザイン、開発、アプリケーション開発などを幅広く手掛ける。

監修者：迫　佑樹
株式会社SkillHacks代表取締役。大学在学中からプログラミングスキルを身につけ、フリーランスエンジニアとして独立。
自身の経験を活かしプログラミングを教え、その知見からオンラインスクール事業Skill Hacksを運営。そのほか、実店舗ビジネスや知識プラットフォームBrainなどさまざまなビジネス経営中。

Webエンジニアはポートフォリオを作るべき！3つの理由を紹介

Webエンジニアとして仕事を獲得したい、転職を考えているという方は必ずポートフォリオを準備しましょう！

こちらでは、ポートフォリオを用意すべき理由を以下3つ紹介していきます。

志望先に意欲を示せる
ポテンシャルや技術力を評価してもらえる
採用側の判断材料が増える

経験者はもちろん、未経験でWebエンジニアになりたい方も絶対に必要です。

それぞれ詳しく解説していきます。

1. 志望先に意欲やポテンシャルを示せる

特に未経験の方がWebエンジニアを志望するとき、たとえ簡単なWebサービスしか作れなかったとしてもポートフォリオを提示することが重要です。というのも「この人は自走できる・努力できる」と思ってもらえるからです。

プログラミングは日常生活に馴染みがない分、挫折しやすいと言われています。そんな中、未経験ながらWebサービスを形にしているという点で意欲・ポテンシャルの高さを評価してもらえるでしょう。

2. 技術力を評価してもらえる

実際の制作物を提示することで「〇〇ができます！」と口でいうだけよりも説得力が増します。特に、腕に自身のある経験者なら自分が作ったWebサービスを見せることで、志望先の方に技術を正しく評価してもらえるでしょう。

また「このプロジェクトに入れても大丈夫そうだな」と採用担当者に具体的なイメージを持ってもらえるので、他の応募者に比べて印象に残りやすくなりますよ。

3. 採用側の判断材料が増える

採用する理由が多いというのは非常に大切な視点です。他の応募者と評価が拮抗しているとき、採用の決め手は理由の多さになるからです。

特に、採用担当者が「なぜこの応募者を選んだのか」と上司から質問されたときに答えやすくなります。そういった点からも自分が提示できるポートフォリオを出し惜しみする必要はないでしょう。

無期限質問サポート付き
>>Skill Hacksの詳細はこちら

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

Webエンジニアとして仕事をもらうためには、ポートフォリオが必須です。こちらでは、ポートフォリオの作り方を解説していきます。

ポイントは以下の5点です。

Webサービスを作る
スキルシートを作る
ソースコードを公開する
プロクラウドワーカーを参考にする
Github Pagesを参考にする

それぞれ解説していきます。

1. Webサービスを作る

そもそも自分が作ったWebサービスを持っていないという場合は、制作するところから始めましょう。働きたい仕事や企業に合わせて、アプリ・Webサイトなど制作物の種類を決めると良いでしょう。

たとえば、弊社ではプログラミング未経験からWebアプリ開発まで学べるオンライン講座「Skill Hacks」を提供しています。最低限のWebサイト制作に必要な知識も学べるので「Webエンジニアに興味はあるけど、何から手を付けたらいいかわからない」という方にもおすすめです。

プログラミングスクールに通うよりも低価格で、あなたのペースで学習を進められます。

ぜひ「Skill Hacks」でWebアプリ開発を学んでみましょう。

無期限質問サポート付き
>>Skill Hacksの詳細はこちら

2. スキルシートを作る

スキルシートとは、Webエンジニアの経験や技術力をアピールする資料です。だいたいA4サイズ1〜2枚程度でまとめる例が多いです。

明確なフォーマットは定まっていませんが、

使えるプログラミング言語
関わったプロジェクトの概要・役割
自己PR　など

はマストで含めておく必要があります。

作例として、リクナビNEXT「エンジニアのスキルシートの書き方とテンプレートダウンロード」を参考にしてみると良いでしょう。

3. ソースコードを公開する

WebエンジニアはただWebサービス・アプリが作れるだけではNGです。プログラミングのコードを誰がみてもわかりやすく記述できるかというのも重要な観点だからです。

大規模システムを制作するなど多くのWebエンジニアをアサインしたり、メンテナンスしたりするときにコードの読みやすさは作業効率の向上につながります。
仕事しやすい人と思ってもらうためにも、なるべくシンプルなコード進行を身につけましょう。

ソースコードはGithubで公開することが一般的です。GithubはWebエンジニアの中で常識となりつつあるので、まだアカウントを持っていない方は至急作成することをおすすめします。

4. プロクラウドワーカーを参考にする

自分をアピールする文章をイチから作成するのは難しいです。なぜなら、客観的に自分が優れている部分を抽出したり、相手が求めている情報をわかりやすく見せたりという技術が必要になるからです。

そのため、評価されている自己PRを参考にすると良いでしょう。特に大手クラウドソーシングサービスの「クラウドワークス」で高い評価を得ている「プロクラウドワーカー」のプロフィールを見てみることがおすすめです。

熟練者の方は実際に仕事を発注してみると、応募者のプロジェクト提案文が見れるので、参考にしてみるという裏技もありますよ。

5. Github Pagesを参考にする

Githubを使ってWebページをネット上に公開できる「Github Pages」では多くのWebエンジニアがポートフォリオを制作しています。

たとえば、以下のエンジニアを参考にしてみると良いでしょう。

Github PagesでWebページを公開すると、ドメインが「（アカウント名）＋.github.io」になるのが特徴です。

経歴やスキルを紹介しつつ、デザインや機能で技術力をアピールできるので、実力がある方にとっては一石二鳥となります。

Webエンジニアがポートフォリオを充実させる3つのコツ

まだポートフォリオを作っていない方は、求められている技術から逆算して制作物を決めると良いでしょう。

たとえば、以下3つのポイントを満たしているかは非常に重要な視点です。

言語の需要が高いか
開発したものを公開しているか
オリジナルかどうか

1つひとつ詳しくみていきます。

1. 言語の需要が高いか

たとえすごい技術を持っていても、習得しているプログラミング言語がマイナーで需要がなければ、活躍できる範囲は限られてしまいます。

そこで、これから言語を学ぼうと考えている方は以下の人気なものから選ぶと良いでしょう。

Ruby：純国産のプログラミング言語。フレームワーク「Ruby on Rails」により効率的に開発できるのでスタートアップ企業にも人気。講座「Skill Hacks」で学べる。
PHP：フロントエンド言語（HTML・CSS・JavaScript）やデータベース言語（MySQL）などとも相性が良い。シンプルな記述で未経験者にもおすすめ。講座「PHP Hacks」で学べる。
Python：アプリ・システムなどさまざまな開発に使える。人工知能・ブロックチェーンなど最新技術にも使われており注目されている。難易度もそれほど高くなく、初心者にもおすすめ。