【Webエンジニア就活】ポートフォリオの作り方と実際に作成したものを公開

この記事では、Webエンジニアとして就職するためには欠かせない存在であるポートフォリオの作り方や実際にどのようなものを作成すれば良いのかについて体験談を交えながら解説しています。

この記事を書いている僕は、2020年1月現在大学4回生でWeb製作会社でコーダーとしてアルバイトしており、今年の4月からWebエンジニアとして働き始めます！

そもそもポートフォリオとは何か？

ポートフォリオというのは、自分ができることや、作品・これまでの経験等を評価してもらうためのものです。

一般的には就職や転職の際にポートフォリオを使用します。後ほど紹介しますが、自分が作ったポートフォリオでは、これまでに作成してきたWebアプリやスキル等を載せています。

エンジニアやコーダーを目指しているにもかかわらず、今まで作ってきた作品がないとなると、面接官側も評価をしづらいので、ポートフォリオは用意しましょう！

ポートフォリオを作成する理由は？

ポートフォリオを作成する理由としては以下が挙げられます。

上記3点について詳しく解説していきます。

書類選考が有利になる

ポートフォリオがあることによって書類選考が有利になります。というのも、エンジニアの書類選考時にポートフォリオがないと面接が受けられないという企業もあったからです。

さらに就活早期にポートフォリオを作成しておくことによって、エンジニアの企業イベントにも行きやすくなります。

実際に就活早期にポートフォリオを作成していたことによって、エンジニアの就活イベントに参加することができました。

このイベントを通してインターンの案内も受けることができました！

【実体験有り】エンジニア向けおすすめの就活サイト5選

この記事では、エンジニアとして就活をしていた際に実際に登録していたサイトや、その中からおすすめのサイトを紹介しています。「最近エンジニアとして就活を始めたけど、何かおすすめのサイトはないか。またそのサイトはどのように使えば良いか。実際にそのサイトを活用していた人に聞きたい。できれば就活にお金をかけたくない。一日で一気に複数の企業の説明会や面接を受けたい。」と悩んでいる方は是非読んでみてください。

aka-shin.com

2021.10.10

判断材料を増やすことができる

ポートフォリオを作成することによって面接での判断材料を増やすことができます。

実務経験がない場合、履歴書のみだと判断することが難しいのは言うまでもありません。できる限りポートフォリオを充実させて自分をアピールしましょう！

自分のスキルセットを伝えることができ、企業とのミスマッチを減らせる

ポートフォリオにはスキルセットをきちんと書いておきましょう。自分がこれまで触ってきた技術だけでなく、今どういう勉強をしているのかも書いておくと尚良いです。

企業と自分がしたいことがマッチしているか判断する材料の一つとなり、企業とのミスマッチも減らせるでしょう。

ポートフォリオ作成にはどの言語を使えば良いのか？

ポートフォリオ作成をする際に困るのが、どういう言語を使って作ればいいか。これが問題になってきます。

コーダーやマークアップエンジニアとWebエンジニアでは使用言語が違ってくるのでこの2つの違いによって説明を分けました。

コーダーやマークアップエンジニアの場合

コーダーやマークアップエンジニアというのは、HTMLやCSS等のマークアップ言語を使ってコーディングする人のことを指します。

そのため、デザイナーがデザインしたものをWebで見られるようにコーディングを行うことが主な業務内容です。

なので、HTML、CSS、JavaScript（jQuery）を使って、静的なポートフォリオを作成しましょう！。後ほど自分が実際に作成したポートフォリオを紹介します。

Webエンジニアの場合

Webエンジニアとは、Web上で動作する様々なアプリやシステムなどを開発する人のことを指します。

そのため、コーダーとは違いプログラミング言語を使用して動的なWebアプリケーションを作ると良いでしょう！

例としてPHPやRubyが挙げられます。こちらに関しても後ほど自分が実際に作成したポートフォリオを紹介します。

ポートフォリオでどんなことを書けば良いか？

ポートフォリオに書く内容としては、以下のように基本的な情報や自分が作ってきた作品を載せましょう！

面接官は、多くのエンジニア就活生のポートフォリオを見ていると思うので、時間があまりないと考えておくと良いでしょう。

その際、短時間で自分を知ってもらえるよう、自分の経歴や作品など読んでもらいたい基本情報は分かりやすいようにしておくのがポイントです

実際に作成したポートフォリオ

実際に作ったポートフォリオは以下です。

それぞれのポートフォリオの中に、これまで作成してきた作品等を入れています。なぜ2つも作ったのかというと、2つ目はVue.jsの勉強のために作りました。

2つ目のポートフォリオの作成方法等に関しては以下で説明しています。

Vue.js + Firebase を用いてポートフォリオ作ってみた - Qiita

※ 本投稿はTechCommit Advent Calendar 2019 11日目の記事です。 はじめに 普段はWeb製作会社でコーダーのアルバイトをしている大学4回生です。内定先の会社でVue.jsを使っているということもあ...

qiita.com

ホスティング先

ホスティング先として、最初に作成したポートフォリオではNetlify、2つ目のポートフォリオはFirebaseを使っています。

どちらも無料なので、サーバー代やドメインを取るのは面倒という方におすすめです！

他にもホスティング先としては以下のようなものがあります。

まとめ

今回は、Webエンジニアとして就職するためには欠かせないポートフォリオの作り方や実際にどのようなものを作成すれば良いのかについて体験談を交えながら解説してきました。

ポートフォリオを作る際に、この記事を参考にしていただけると嬉しいです！