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

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

この記事を書いている私は、現在Webエンジニアとして働いています

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

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

一般的には、就職や転職の際にポートフォリオを使用します。

後ほど紹介しますが、私が作成したポートフォリオでは、これまでに作成してきたWebアプリやスキル等を載せています。

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

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

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

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

書類選考が有利になる

ポートフォリオがあることによって、書類選考が有利になります

というのも、エンジニアの書類選考時にポートフォリオがないと面接が受けられないという企業もあるからです！

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

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

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

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

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

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

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

ポートフォリオには、スキルセットをきちんと書いておきましょう。

自分がこれまで触ってきた技術だけでなく、今どういう勉強をしているのかも書いておくと尚良いです。

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

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

ポートフォリオ作成をする際に困るのが、どの言語を使って作ればいいか。これに悩むかと思います・・・

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

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

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

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

なので、HTML、CSS、JavaScript（jQuery）などを使って、静的なポートフォリオを作成すると良いです！

Webエンジニアの場合

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

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

例として、PHPやRubyなどが挙げられます。

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

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

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

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

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

ポートフォリオの例

大学生の就活をしていた時に作成したポートフォリオは、以下です

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

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

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

他にも無料で利用できるホスティング先としては、「GitHub Pages」や「Heroku」などがありますね。

独自ドメインを使いたい場合は、私もよく使っている「ムームードメイン」が管理もしやすく、おすすめです！

ポートフォリオの作り方

ポートフォリオの作り方に関しては、下記記事に詳細を記載しています。

また、ポートフォリオに載せているRuby等を用いたWebアプリに関しては、独学はもちろん、テックアカデミーというオンラインスクールに通って、Webアプリを作成する技術等をしっかり学んで作りました。

テックアカデミーでは、カリキュラム内でオリジナルサービスの作成のサポートを行っていただけるので、何か作りたいけど独学だと少し不安という方にはおすすめです！

まとめ｜ポートフォリオの作り方と実際に作成したものを公開

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

今後ポートフォリオを作成しようと思っている方は、ぜひ参考にしてみてください！