>>Webでスキルを身に付けられるHacksシリーズ

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

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

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

そこで、この記事では

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

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

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

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

監修者:平井 隆嗣 システム開発に加えてマーケティングまで対応し、集客や売上に貢献するエンジニア。 開発会社にて4年間の勤務をし、リーダーとして活躍したあとフリーランスとして独立。WordPress導入、デザイン、開発、アプリケーション開発などを幅広く手掛ける。
監修者:迫 佑樹 株式会社SkillHacks代表取締役。大学在学中からプログラミングスキルを身につけ、フリーランスエンジニアとして独立。 自身の経験を活かしプログラミングを教え、その知見からオンラインスクール事業Skill Hacksを運営。そのほか、実店舗ビジネスや知識プラットフォームBrainなどさまざまなビジネス経営中。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Webサービスを作る

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

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

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

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

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. 言語の需要が高いか
  2. 開発したものを公開しているか
  3. オリジナルかどうか

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

1. 言語の需要が高いか

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

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

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

2. 開発したものを公開しているか

開発したWebサービスはオンライン上でアクセスできるようにしておきましょう。というのも、採用担当者がポートフォリオをスムーズに確認できるからです。

やっていない場合は印象を悪くする可能性があるので、Web上に公開しておいて損はないでしょう。作成者としてもリリースまでの流れで学べることは多いですよ。

3. オリジナルかどうか

ポートフォリオはオリジナルなものを使いましょう。というのも、何人何十人の採用を担当する方なら、スクールや講座の中で作ったサービスということを容易に見破ってしまうからです。

ToDoリストなどベースは簡単なもので良いので、自分なりの工夫を加えて最低限の開発力・発想力をアピールしましょう。

Webエンジニアがポートフォリオに使うべきサービス

Webエンジニアは、ポートフォリオとして自分の制作物をWeb上に公開しておく必要があります。それでは、どんなサービスを使うのが良いのでしょうか。

こちらでは、以下5つのWebサービスを紹介していきます。

  1. GitHub Pages
  2. Qiita
  3. Twitter
  4. note
  5. Linktree

それぞれ詳しく解説します。

1. GitHub Pages

Webページを自前で公開するにはレンタルサーバーを契約する必要があり、手間や費用がかかってしまいます。そこでポートフォリオを公開するには、すでにあるWebサービスの一部を間借りする形がいちばん効率的です。

なかでも、Webエンジニアに人気なのは「GitHub Pages」です。よしこさんのポートフォリオのように、凝ったページが無料で制作できます。

GitHubはWebエンジニアにとって必須とも言えるサービスなので、必ず登録しておきましょう。

2. Qiita

Qiitaは記事を投稿する形式でエンジニアの知識を共有できるサイトです。それ自体に自分のポートフォリオを掲載するのはあまり望ましくありませんが、記事の投稿数や内容はWebエンジニアの熟練度を測る上で重要な情報になるでしょう。

ポートフォリオページからQiitaアカウントへのリンクを貼り、知識量をアピールしましょう。

3. Twitter

Twitterは今やビジネス目的で使われることが多くなってきています。投稿内容・フォロワー数などを見られることが多いので、Webエンジニア専門アカウントを作り情報発信に力を入れてみましょう。

未経験者なら学習記録を投稿したり、経験者なら技術や経歴を生かした有益な知識を発信したりするのがおすすめです。

4. note

note無料で使える記事投稿サービスです。Twitterと相性がよく、140文字では伝えられない長文を書きたいときに重宝します。

Qiitaと違うのは読者がエンジニアだけではないというところです。一般の人にも読んでもらえる可能性が高いので、なるべく専門用語には注釈を入れるなどの工夫をしてみると良いでしょう。

5. Linktree

Linktreeはポートフォリオをまとめるお役立ちサービスです。それ単体で記事を投稿したり作品を制作したりという機能はありませんが、1ページに見やすくリンクをまとめて表示できます。

視認性が高くさまざまなページにジャンプしやすいので、これまでに紹介したWebサービスをつなぐのに重宝します。サクッと簡単にポートフォリオページを作りたい方にはおすすめの方法の1つです。

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

Skill Hacksなら最速でプログラミング初心者を脱出できる

  • 初心者からWebアプリケーション開発の知識を学べる
  • 無期限の質問サポート付き
  • 買い切り型で受講期限も無制限