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

この記事を書いている僕は、2020年1月現在大学4回生でWeb製作会社でコーダーとしてアルバイトしており、今年の4月からWebエンジニアとして働き始めます。
そもそもポートフォリオとは何か?
ポートフォリオというのは、自分ができることや、作品・これまでの経験等を評価してもらうためのものです。
一般的には就職や転職の際にポートフォリオを使用します。後ほど紹介しますが、自分が作ったポートフォリオでは、これまでに作成してきたWebアプリやスキル等を載せています。
エンジニアやコーダーを目指しているにもかかわらず、今まで作ってきた作品がないとなると、面接官側も評価をしづらいので、ポートフォリオは用意しましょう!
ポートフォリオを作成する理由は?
ポートフォリオを作成する理由としては以下が挙げられます。
- 書類選考が有利に
- 判断材料を増やすことができる
- 自分のスキルセットを伝えることができ、企業とのミスマッチを減らせる
上記3点について詳しく解説していきます。
書類選考が有利になる
ポートフォリオがあることによって書類選考が有利になります。というのも、エンジニアの書類選考時にポートフォリオがないと面接が受けられないという企業もあったからです。
さらに就活早期にポートフォリオを作成しておくことによって、エンジニアの企業イベントにも行きやすくなります。
実際に就活早期にポートフォリオを作成していたことによって、エンジニアの就活イベントに参加することができました。

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

判断材料を増やすことができる
ポートフォリオを作成することによって面接での判断材料を増やすことができます。
実務経験がない場合、履歴書のみだと判断することが難しいのは言うまでもありません。できる限りポートフォリオを充実させて自分をアピールしましょう!
自分のスキルセットを伝えることができ、企業とのミスマッチを減らせる
ポートフォリオにはスキルセットをきちんと書いておきましょう。自分がこれまで触ってきた技術だけでなく、今どういう勉強をしているのかも書いておくと尚良いです。
企業と自分がしたいことがマッチしているか判断する材料の一つとなり、企業とのミスマッチも減らせるでしょう。
ポートフォリオ作成にはどの言語を使えば良いのか?
ポートフォリオ作成をする際に困るのが、どういう言語を使って作ればいいか。これが問題になってきます。
コーダーやマークアップエンジニアとWebエンジニアでは使用言語が違ってくるのでこの2つの違いによって説明を分けました。
コーダーやマークアップエンジニアの場合
コーダーやマークアップエンジニアというのは、HTMLやCSS等のマークアップ言語を使ってコーディングする人のことを指します。
そのため、デザイナーがデザインしたものをWebで見られるようにコーディングを行うことが主な業務内容です。
なので、HTML、CSS、JavaScript(jQuery)を使って、静的なポートフォリオを作成しましょう!。後ほど自分が実際に作成したポートフォリオを紹介します。
Webエンジニアの場合
Webエンジニアとは、Web上で動作する様々なアプリやシステムなどを開発する人のことを指します。
そのため、コーダーとは違いプログラミング言語を使用して動的なWebアプリケーションを作ると良いでしょう!
例としてPHPやRubyが挙げられます。こちらに関しても後ほど自分が実際に作成したポートフォリオを紹介します。
ポートフォリオでどんなことを書けば良いか?
ポートフォリオに書く内容としては、以下のように基本的な情報や自分が作ってきた作品を載せましょう!
- 自己紹介
- 経歴・経験
- 作品
- スキル
- お問い合わせ
面接官は、多くのエンジニア就活生のポートフォリオを見ていると思うので、時間があまりないと考えておくと良いでしょう。

その際、短時間で自分を知ってもらえるよう、自分の経歴や作品など読んでもらいたい基本情報は分かりやすいようにしておくのがポイントです
実際に作成したポートフォリオ
実際に作ったポートフォリオは以下です。
- HTML、CSS、jQueryを使用したポートフォリオ → https://shintaro-portfolio.netlify.com/
- HTML、CSS、Vue.jsを使用したポートフォリオ → https://vue-portfolio-25939.firebaseapp.com/
それぞれのポートフォリオの中に、これまで作成してきた作品等を入れています。なぜ2つも作ったのかというと、2つ目はVue.jsの勉強のために作りました。
2つ目のポートフォリオの作成方法等に関しては以下で説明しています。

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

どちらも無料なので、サーバー代やドメインを取るのは面倒という方におすすめです
他にもホスティング先としては以下のようなものがあります。
- GitHub Pages
- GitLab Pages
- Heroku
まとめ
今回は、Webエンジニアとして就職するためには欠かせないポートフォリオの作り方や実際にどのようなものを作成すれば良いのかについて体験談を交えながら解説してきました。
- ポートフォリオ → 自分ができることや、作品・これまでの経験等を評価してもらうためのもの
- ポートフォリオを作る理由
- 書類選考が有利に
- 判断材料を増やすことができる
- 企業とのミスマッチを減らせる
- コーダーやマークアップエンジニアの場合
- HTML、CSS、JavaScript(jQuery)を使って、静的なポートフォリオを作成するのがおすすめ
- Webエンジニア
- PHPやRuby等を用いてWebアプリを作成
- ポートフォリオに書くと良い内容
- 自己紹介
- 経歴・経験
- 作品
- スキル
- お問い合わせ
ポートフォリオを作る際に、この記事を参考にしていただけると嬉しいです!
コメント