【未経験エンジニア向け】転職活動を有利に進めるポートフォリオの作り方

こんにちは、やなっぎです。

アーリーステージからメガベンチャーまでWebエンジニアとして10年以上活動しています。

ポートフォリオは、未経験エンジニアの方が転職活動で自分のスキルをアピールするためにとても役立ちます。実務経験がない未経験の方は、スキルを証明するためにほぼ必須といえるでしょう。

今回は、ポートフォリオの目的とレベル感を理解し、他の人よりも有利に転職活動を進められるポートフォリオの作り方を具体的に解説します。

ポートフォリオとは

エンジニアのポートフォリオとは、個人で作成したWebサービスやモバイルアプリなどの作品または作品集のことです。

転職活動の中でポートフォリオを採用担当者に見せることで、自分の技術力やポテンシャルをアピールすることができます。

特に、未経験からエンジニアになろうとする場合、実務経験がないためアピールする実績がありません。

そのため、ポートフォリオを作ることで技術力をアピールすることができるので、転職活動を有利に進められます。

ポートフォリオの目的

未経験のエンジニアがポートフォリオを作成する目的は次の３つです。

ポートフォリオ作成には多くの時間がかかるので、転職活動でポートフォリオを有効活用できるように目的を意識しながらポートフォリオ作成を進めていきましょう。

Webサービスの開発ができることを証明するため

ポートフォリオを作成することでWebサービスを一通り開発できる基本的なスキルがあることを証明できます。

ポートフォリオを作成する流れは、Webサービスの企画、設計、実装、公開となっています。

ポートフォリオ作成をすることで、プログラミングスキルだけでなく、コンピュータ、ネットワーク、サーバー、データベース、Git/GitHubなどのWebサービスを開発するための全般的な知識があることをわかりやすく採用担当者に証明することができます。

開発スキルをアピールするため

ポートフォリオの一部として、Webサービスのサービス概要、設計書、ソースコードをGitHubで公開することで、開発スキルのレベル感をアピールできます。

採用目線では、Webサービスを開発できることがわかった場合、次は「スキルがどのぐらいのレベル感なのか？」ということが知りたくなります。

例えば、ベテランのエンジニアがソースコードを読むと、よく考えられた良いコードなのか、そうでもないコードなのかが一目でわかります。

ポートフォリオとして作成したWebサービスの設計書、ソースコードも一緒に公開することで、企画力、設計力、プログラミングなどのスキルをアピールできるようになります。

入社後のポテンシャルをアピールするため

ポートフォリオを作る過程で記事を書くことで入社後のポテンシャルをアピールできます。

採用企業が未経験からエンジニアになりたい人に求めていることは、転職活動時のスキルはもちろんですが、今後の成長というポテンシャルも重要視しています。

ポテンシャルを判断するのは難しいのですが、

• 現在のスキルレベル
• 技術に対する興味やモチベーション
• 行動量

などから複合的に判断されます。

多くの場合、Qiita, Zenn, 個人ブログなどでの技術記事の執筆やGitHubでのソースコードの公開などの継続的なアウトプットがあるとポテンシャルを大きく感じてもらいやすいです。

そのため、ポートフォリオを作る過程でわかったことや学んだことを投稿したり、技術検証のソースコードをGitHubで公開したりすることで、ポテンシャルが高いことをアピールしやすくなります。

ポートフォリオの作り方

ポートフォリオを作る流れは次のとおりです。一般的なWebサービスを開発する流れとほぼ同じ流れになっています。

ステップ①：Webサービスを企画する

自分でゼロからWebサービスを作るために企画をねります。

いきなりWebサービスを作りたくなるかもしれませんが、オリジナルのポートフォリオ作成では最初に企画を作ることが結果的に近道になります。

Webサービスのアイデアを考え、サービスの概要を決めて、必要な機能や画面を洗い出していきます。

サービスのアイデアを考える

自分の困りごと、興味のある分野などからサービスのアイデアを出します。

コツは、とりあえずいろいろだすことが大事です。

また、検索してみて周辺領域でどんなサービスがあるかを調べてみるとアイデアの幅が広がるので良いでしょう。

そして、自分の興味や開発できそうと感じるWebサービスを１つ決めます。

サービス概要をまとめる

次に、サービス概要をまとめます。

企画がメインでアピールしたい部分ではないので、詳細な分析よりはざっくりと押さえるべきところを決めます。

サービス概要をまとめておくと、Webサービスの設計や実装で迷った時の指針になるので箇条書きレベルでいいのでまとめておきましょう。

Webサービスの必要な機能や画面を洗い出す

サービス概要が決まったので、必要な機能や画面を洗い出します。

ターゲットユーザーのことを想像しながら、必要な機能や画面をリストアップしていきます。また、

どんな機能や画面が必要か悩む場合は、ターゲットユーザーへヒアリングしたり、類似サービスを調査することでアイデアを詰めることができます。

そして、リストアップした機能や画面で優先度をつけてポートフォリオでどこまで作るかを決めます。

ステップ②：Webサービスを設計する

ポートフォリオとして作成するWebサービスの概要、機能、画面が決まったので、Webサービスを設計していきます。

実現性を確認しながら技術選定をして設計をしていきます。

実現性を確認して技術選定をする

作成するWebサービスが「時間的な制約がある中で技術的に実現できるのかどうか」、「どんな技術を使って実現するか」を考えます。

転職活動で使うポートフォリオという観点では、「スクールで学んだこと」と「新しい技術的な挑戦」をバランスよく混ぜると良いでしょう。

「新しい技術的な挑戦」が多すぎると開発期間が長くなってしまいます。また、「スクールで学んだこと」だけだとスキルという観点で弱くなってしまいます。

バランスの目安としては、個人差によりますが、「スクールで学んだこと 8：新しい技術的な挑戦 2」がちょうど良いのではないでしょうか。

インフラ構成やシステムの設計をする

インフラ構成、シーケンス図、テーブル設計などをしながら開発するものを具体化させていきます。

設計の話は１つ１つが専門的な領域になるので、ここではざっくり説明します。

インフラの場合、HerokuやRenderのようなホスティングサービスを使うのか、AWSやGCPのようなクラウド環境を使うなどを考え、サーバーやネットワークの構成を考えます。

シーケンス図は、ブラウザとサーバーでどういう順序でやり取りをするかを時系列で書いていきます。すべてを書くというよりも複雑な処理だけ書けば良いでしょう。

テーブル設計では、機能や画面から必要なデータを洗い出し、データモデリングをして、テーブルとして情報をどう保持するかを考えていきます。

ステップ③：Webサービスを実装する

設計をしたら、いよいよプログラミングをしながらWebサービスを実装していきます。

GitHubで公開しながら開発する

GitHubでパブリックリポジトリを作成して、設計やソースコードを公開しながら開発をすることをおすすめします。

GitHubは多くのWebエンジニアが実務でも使っており、GitHubでの開発に慣れていることをアピールできます。また、採用担当者にソースコードを共有するときにもそのまま使えます。

さらに、スクールに通っている場合は、メンターや同期・先輩にソースコードを見てもらうことで、コード品質を高めることもできます。

そのため、必要な機能をIssueで作成し、コードの変更はPull Requestで作っていく実務に近いスタイルで開発すると良いでしょう。

可読性が高いコードを書くことを意識する

可読性の高いコードを書けるかどうかは、より高いレベルでプログラミングのスキルがあることをアピールできます。

はじめの方は作ることに夢中で綺麗なコードも書くことが難しいかもしれません。

しかし、ある程度慣れてきたら、リファクタリングという利用者に対する動作を変えずにコードを綺麗にする作業を行うことでコードを綺麗にしていきます。

ステップ④：Webサービスを公開する

いよいよ、Webサービスを公開していきます。

理想的にはクラウドサービスで公開する

HerokuやRenderなどのホスティングサービスを使うことで比較的簡単にWebサービスを公開することができます。

しかし、スキルをアピールするという観点では、AWSやGCPなどのクラウドサービスを使ってWebサービスを公開することがおすすめです。

理由としては、「多くの現場でクラウドサービスが使われていること」と「他の未経験エンジニアと差別化がしやすいから」です。

READMEを綺麗にする

GitHubのリポジトリのREADMEを綺麗にします。

READMEはポートフォリオとして実際に公開されているWebサービスと一緒に採用担当者に見てもらうことになるので、わかりやすく技術をアピールできるようにしておきましょう。

READMEに書く内容としては次のような情報をまとめておきます。

READMEを綺麗にしておくことで、採用担当者が「スキルのレベル感を判断しやすくなる」、「図解できるレベルには理解していることをアピールできる」というメリットがあります。

ステップ⑤：Webサービスを運用する

多くの場合、Webサービスを公開して終わってしまいます。

しかし、公開した自分のサービスを使ってもらい、フィードバックから改善をする経験ができると、面接でグッとアピールしやすくなります。

フィードバックをもらって改善する

実際に周りの人にWebサービスを使ってもらいましょう。

実際に使ってもらうことで、良い点や改善点などいろいろフィードバックがもらえるでしょう。自分が良かれと思ったところがうまく伝わらなかったり、逆に、そうでもないところを良いと思ってもらったりといろいろな学びや発見を得られるでしょう。

ある程度フィードバックをもらったら、その中からサービス概要と照らし合わせながら必要な箇所を改善しましょう。

そして、フィードバックをもらった人に改善したことを伝えて改めてフィードバックをもらいます。

このように、ユーザーからのフィードバックを得て改善をするという経験は、実際のWebサービスでも常日頃に行われていることであり、その経験を持っていることは貴重です。
ぜひ、面接で強くアピールしていきましょう。

モニタリングをする

せっかくWebサービスとして公開したので、モニタリングをして定量的にもWebサービスの改善点を探っていきましょう。

Google Analyticsなどのアクセス解析ツールを入れてよくアクセスされている画面を分析したり、NewRelicやDatadogなどのモニタリングツールを入れてCPUやメモリ使用量などを確認して負荷状況が大きすぎないかを確認したりすると面白いです。

ポートフォリオのレベル感

採用目線でのポートフォリオのレベル感の目安を説明します。

ここで紹介するのはあくまで目安であり、最終的には企業やライバルに依存するのでどこまで作るかの最終判断は自分で決めてください。

ポートフォリオのレベルの目安感としては、「必須レベル」は押さえておき、「いいねレベル」で何か1,2つ取り組めるだけでも転職活動を有利に進めていけるでしょう。

必須レベル

必須レベルとしては次のとおりです。本記事の「ポートフォリオの作り方」の流れでWebサービスを公開までできれば概ね達成できるでしょう。

また、スクール卒業生のポートフォリオを数十件以上みた結果として、Webサービスの規模感の目安としては次のとおりです。どれぐらいの規模感のWebサービスを作れば良いか悩んでいる場合は参考にしてください。

画面数	10〜15画面
テーブル数	5〜10テーブル
実装コード行数	1,000〜3,000行 ※プログラミング言語により異なるのであくまで目安

いいねレベル

「いいねレベル」は、「必須レベル」に1つ、2つ工夫をすることで採用担当者に「いいね・頑張ってるね」と思わせることができるレベル感です。

例えば、次のような工夫ができると良いでしょう。

これら全てを実施できれば良いですが、ポートフォリオ作成の時間が限られた中で転職活動を有利に進めるという観点では、１、２件ほど取り組めると良いでしょう。

なかなかすごいレベル

「なかなかすごいレベル」は、「いいねレベル」にプラスして実運用まで意識して開発ができると思わせるレベル感です。

ここら辺のスキルや経験は実務を通して身につければ良いと思うので、多くの人はここまでやる必要はありません。人気な急成長企業やメガベンチャーなどに転職をしたい人向けのおまけ程度に紹介しておきます。

ポートフォリオ作成でよくある悩みと対策方法

実際にポートフォリオ作成でよくある悩みと対策方法について紹介します。

何を作ったら良いかわからない、思い浮かばない

ポートフォリオで何を作ったら良いかわからない、アイデアが思い浮かばないということはよくあります。

実際のスクール卒業生のポートフォリオを見たり、スクールに通っている場合はメンターに壁打ちしてもらうことで作りたいものを決めていきましょう。

参考：RUNTQEQの卒業生のポートフォリオ

必ずしも良いアイデアが思いつかないからエンジニアに向いていないというわけではありません。諦めずに頑張ってください。

どのぐらい作り込んだら良いかわからない

ポートフォリオのレベル感に正解はないです。

本記事の「ポートフォリオのレベル感」を参考にしつつ、行きたい企業、ライバルとなる転職活動中のエンジニアとの差別化を意識してどこまで作り上げていくか決めます。

個人的には、ポートフォリオを「いいねレベル」まで作り込むのがおすすめです。

作り込む中で自分のスキルを高めつつ、転職後に良いスタートがきれるので、その後のキャリアを積みやすくなるためです。

サービス公開まで時間がかかりすぎる

アイデアがあふれて、作りたいものや作るべきものがたくさんあり、Webサービスの公開まで時間がかかりすぎてしまう場合があります。

この対策として、実務でも使える大事な考えで MVP（Minimum Variable Product）を意識して機能を削ることです。

「何でもできるは何もできない」という言葉があるように、あれこれ機能があるとユーザーはうまく機能を使いこなせず、サービスから離反してしまいます。

そのため、企画で決めたターゲットユーザーに対してグッとささるWebサービスにするため、焦点がブレるものは思い切って削りましょう。まして、ポートフォリオなので１つに特化したサービスで十分です。

このように、本当に必要な機能以外を削ることで、作るものを減らしてサービス公開までの時間を減らすことができます。

まとめ：ポートフォリオを作って転職活動を有利に進めよう！

今回は、「未経験エンジニア向けの転職活動を有利に進めるポートフォリオの作り方」を解説しました。

エンジニアのポートフォリオとは、個人で作成したWebサービスやモバイルアプリなどの作品または作品集のことです。

実務経験がない未経験エンジニアの方は、ポートフォリオを作ることで技術力をアピールすることができるので、転職活動を有利に進められます。

ポートフォリオの目的は３つあります。
目的を意識しながらポートフォリオ作成をすることでより効果的にスキルやポテンシャルをアピールすることができるようになります。

実際にポートフォリオを作成するステップは５つです。
実務でのWebサービス開発の流れと同じ流れで作ることで、Webサービスの開発ができることを証明できます。

ここまででポートフォリオ作り方を解説してきました。

採用者目線としては、ぜひポートフォリオを面接の場でもアピールしてもらえると一緒に働くイメージが湧くのでおすすめです。

• どこにこだわったか、どんな工夫があるか
• どこで苦労して、どうやって解決したか
• ポートフォリオ作成を通して何を学んだか

といったことを想いを込めて語って欲しいです！