webエンジニアに転職したい方へポートフォリオを作るコツを解説！

こんな悩みを解決できる記事になっています！

なぜなら、私がこれから紹介する「ポートフォリオの作り方」を実施したことで、未経験からWebエンジニアに転職することができたからです。

この記事を読み終えることで、作品の作り方を理解できるだけでなく、書類選考を通過しやすい「ポートフォリオ」の制作技術が身についた状態になります。

記事の前半では『ポートフォリオを作る際の考え方』を解説しつつ、記事の後半では『ポートフォリオの具体的な制作手順』と書類選考で落とされやすいポートフォリオの特徴を具体的に解説しますのでじっくり読み込んでくださいね！

【前提】そもそもなぜポートフォリオを作るのか

ポートフォリオを作るゴールは、企業から内定をもらうことがゴールです。

当然内定をもらうためには、企業に自分の「スキル」や「ポテンシャル」をアピールする必要があります。

そのアピールする最適な手段がポートフォリオということです！

特にここ数年は、未経験エンジニアの転職者が多いことから企業側の採用基準にポートフォリオがふくまれています。

つまり、ポートフォリオを提出しない場合書類選考が通らないことも多いのです。

以上の事から内定をもらうために良質なポートフォリオを作り上げていきましょうね！

【重要】ポートフォリオを作る際の考え方

ポートフォリオを作る際に重要な考え方は、自分が使いたいと思う作品を考えましょう。

なぜなら自分が使いたいと感じれば、自分と同じ悩みをもったユーザーの問題を解決できるからです。

この考えがまとまっていない状態で作ると、誰の問題も解決できないポートフォリオが完成してしまいます。

いきなり、ユーザーの課題解決を考えるのは難しいので「自分の課題を解決できるのか」深掘りしてからポートフォリオを作成するようにしましょうね！

ルーティンワークがポートフォリオになる話

作りたいポートフォリオが見つからない時は、今までやった事のあるルーティン業務の自動化にチャレンジしてみてください！

なぜなら、ルーティン業務を自動化することができればそれは立派なポートフォリオになるからです。

実際に私も作成したポートフォリオの一つは、その時務めていたルーティン業務の自動化を作品にしてました。

もちろん、現職の守秘義務を守る必要がありますので共有しても問題ない範囲で公開する事をおすすめします。

大切なのは「誰かの問題を解決」するためにポートフォリオを作ってくださいね！

ポートフォリオを作成する5ステップ

ここからは、具体的にポートフォリオを作る手順を5ステップでまとめました！

この手順を参考にポートフォリオ完成までのイメージに役立てください！

STEP1:要件定義【問題解決の洗い出し】

誰のどんな問題をどのようにして解決するのかまとめる段階です。

前述でもお伝えしたとおり解決する問題を明確にしないと、企業側にポートフォリオの意図が伝わりずらくなります。

例えば以下のように自分が使いたくなるツールをリストアップしてみましょう！

業務自動化に関しては、会社の同僚に「こんなツールあったら便利かな？」と言った相談をするのもありですね！

STEP2:設計

ポートフォリオを実装する前に最低限行いたい設計2つ紹介していきます。

この2つ設計の理想のゴールは、実装後の完成のイメージが持てればGoodです！

逆に設計を行わずに実装を始めてしまうと、手探りでコーディングをすることになるので結果遠回りになります。

そのため、開発現場でも重要な工程になりますので是非確認してくださいね！

 データベース設計

システムが動作する際にデータの持ち方や関係性を整理する工程です。

以下はリレーショナルデータベース設計の例ですが、このようにデータの持ち方を整理しておくことで、スムーズに実装ができるようになります。

ポートフォリオはどのようにデータを扱うのか実装する前に設計に落とし込みましょう！

 画面設計

ここでは、システムのフロントエンド側の設計です。

具体的に「画面の遷移」「レイアウトの配置」「ボタンをクリックした際のイベント」などを決定していきます。

この工程を入れることで一貫したHTMLの構造を保ちやすくなりますので、実装する前にざっくりでいいので設計しましょうね！

STEP3:実装【バージョン管理は必須】

実装と同時にGitとGitHubを使ってバージョン管理を行う事を強くおすすめします。

理由は一つ、企業側がポートフォリオと合わせてGitHubのアカウントの提出を求めることがあるからです。

私も転職活動する際にほとんどの企業からGitHubのアカウントの提出を求められました。

というわけで、GitHubのアカウントを持っていない人はすぐにこちらから登録してバージョン管理を始めてくださいね！

補足として、開発現場は必ずバージョン管理をしますので今のうちに少しでも慣れておくといいですよ！

STEP:4テスト【ユニットテストも重要】

実装が完了したポートフォリオに致命的なバグがあった場合、企業からの評価が落ちてしまうことがあります。

少なくとも好印象にはならないでしょう。

なぜならテストを怠ったことが伝わってしまうからですね。

例えば、運用中のサービスの不具合で多くのユーザーに迷惑をかけると多大なコストが発生します。

当然このような状況を防ぎたいと企業は考えますので、ポートフォリオのテストを怠ったことが伝わってしまうと好印象にはならないですよね。

そのため、公開する前には必ず動作確認をしましょうね！

 ユニットテストもしよう

できればユニットテストも実装するようにしましょう！

ユニットテストのメリットの一つとして、バグの早期発見につながります。

最近はユニットテストを導入している企業が多く、テストコードの知見が必要になりますのでこれを機に実装にチャレンジしてみてくださいね！

STEP:5公開

URLをクリックしたらポートフォリオを見れる状態しましょう！

公開しないと企業側がポートフォリオを確認することができないので。

また、公開するにはサーバーが必要になります。

作るポートポートフォリオにもよりますが、複雑なインフラが必要じゃない場合はレンタルサーバーがいいかなと。

データベースも利用できて月額1,000円程です。

なのでお金をかけたくない場合はいいと思います！

1からインフラを構築する場合

「AWS」「Azure」「GCP」のいずれかのクラウドサービスを利用すればいいと思います。

なぜなら、Webサービスのインフラ基盤に扱うのが今紹介した3つのクラウドサービスだからです。

特にこだわりがなければ、シェア率が最も高いAWSがおすすめ。

1からインフラを構築したい場合が是非ご検討ください！

【注意】書類選考が通らないポートフォリオの特徴

いくらポートフォリオを作成しても書類選考が通らない特徴もあります。

プログラミングスクールの講師の時に100以上のポートフォリオを添削してきた経験から、書類選考が通らない特徴のポートフォリオを紹介していきますね！

ぜひ自分に該当していないか確認してみてください！

問題解決の定義が抽象的なポートフォリオ

作成したポートフォリオが以下の要点をつかめていないと印象に残るポートフォリオは作れません。

なぜなら、問題定義が抽象的なサービスはすでに世の中に出回っているからですね。

例えば、「Twitter」「Facebook」「メルカリ」と言ったサービスが代表例です。

このようなサービスに似せたポートフォリオは、オリジナル性に欠けるのでおすすめできません。

繰り返しになりますが、「誰の」「どんな問題を」「どのようにして解決するのか」を絞り込むことでユニークなポートフォリオを作成しやすくなりますので、具体的に問題定義を設計しましょうね！

また、未経験エンジニアのポートフォリオの例を以下の記事で紹介しておりますので、気になる方は目を通してください！

すぐに利用できない

技術力が高いポートフォリオでも、動作確認するまでに労力を要するポートフォリオは企業側が離脱する可能性があります。

たとえば、動作条件で「アカウント」や「登録項目」が複数必要なシステムの場合、企業にポートフォリオを見てもらえない可能性があります。

こう言った事態にならないためにも、設計段階で簡易的に動かせる事を目指しましょうね！

自分のポートフォリオに情熱がない

要件定義から公開まで妥協せずに作成することです。

なぜなら企業側はたくさんのポートフォリオを見ているので、手を抜いたことが伝わってしまうからです。

事実、私もポートフォリオを添削してきたのでよくわかります。

書類選考が通過しても情熱のないポートフォリは面接でアピールすることが難しいため、面接対策の為にも手を抜かず作成していきましょうね！

まとめ

今回解説した「ポートフォリオ作る際の考え方」を元に作品制作を実施していただくと、書類選考が通過しやすいポートフォリオを作れるようになります。

最後に復習していきましょう！

ポートフォリオを作る過程はとてもしんどいことですが、未経験からエンジニアを目指す過程で必須になりますので今回の記事を参考にポートフォリオを作り上げてくださいね！

また、未経験エンジニアに求められるポートフォリオのレベルが気になる方は以下の記事にも目を通してください！

あわせて読みたい

未経験エンジニアが評価されるポートフォリオのレベルとは？ 未経験エンジニアが評価されるポートフォリオのレベルとは？