エンジニアのポートフォリオ例7選!作成するメリット・作り方のコツも解説

しかしポートフォリオを初めて作る際には、具体的な作り方や完成イメージがわからない方も多いでしょう。ブログ記事やnote、Qiitaといったサービスを使ったシンプルなポートフォリオではなく、デザインにこだわったポートフォリオをアピールしたいのであれば、先輩エンジニアのポートフォリオ例を参考にするのがおすすめです。
本記事では、エンジニア就活で役立つポートフォリオの作成例について、作成するメリットや具体的な作り方などとともにご紹介します。
関連記事:エンジニアの就活はこれでバッチリ!スケジュールや準備事項をマルっと解説

- 1.エンジニアのポートフォリオ例7選
- 2.エンジニア就活に役立つポートフォリオとは?
- 3.エンジニア就活でポートフォリオを作成するメリット
- 4.エンジニア就活で好印象につながるポートフォリオの作り方
- 5.まとめ
\15年超の実績を持つレバテックが運営/
\15年超の実績を持つレバテックが運営/
1.エンジニアのポートフォリオ例7選
まずは先輩エンジニアのポートフォリオの作成例をそれぞれご紹介します。ここでは下記の7名のエンジニアのポートフォリオを順番に解説しています。
-
1.Naoto Suzukiさん
2.Hodaさん
3.Ao Nagahamaさん
4.Rin Takatsujiさん
5.Manato Kurodaさん
6.Makoto Hiraoさん
7.Yohei Munesadaさん
それぞれのポートフォリオページを実際に訪れながら、どのようなポートフォリオを作成するかイメージを膨らませておきましょう。
Naoto Suzukiさんのポートフォリオ例
https://nsuzuki7713.github.io/portfolio/
Naoto Suzukiさんのポートフォリオ例は、コンパクトにまとめられたシンプルなページです。フロントエンド・バックエンド・データベース・インフラなどのジャンルごとにスキルレベルを視覚的に表現しているので、どのような強みを持ったエンジニアなのかが伝わりやすい設計となっています。
保有資格のほか、制作実績がGitHubのページとともに掲載されているので、ソースコードを見たいと考える企業のニーズにも応えるポートフォリオです。連絡先はSNSのDM機能に集約しているため、企業側はSNSの普段の投稿をチェックして人物性を評価できるほか、気軽な相談ベースで採用活動を行えるように配慮されています。
Hodaさんのポートフォリオ例
https://hodalab.com/portfolio/
31歳でメーカーからIT業界へ転身した経歴を持つ、エンジニアHodaさんのポートフォリオ例です。レーダーチャートを用いたスキルレベルの紹介、使用言語やコメントとともに紹介する制作実績により、エンジニアとしての強みや専門分野を効果的にアピールしています。
エンジニアとしてのスキル・実績だけではなく、個人として大切にしている想いについても記載されているので、人物性に魅力を感じた企業からの依頼も届いていると予想されます。エンジニア就活では、人物面や価値観が重視されることも多いので、自分のポートフォリオにもぜひ取り入れてみると良いでしょう。
Ao Nagahamaさんのポートフォリオ例
Ao Nagahamaさんのポートフォリオ例は、エンジニアのインターンシップへ応募する際に制作したものだそうです。観光・旅行・ゲームと興味のあるテーマについて触れているほか、過去の制作実績を使用言語とともにアピールされています。インターン応募に使用するという目的から、実務未経験であることを明記し、個人開発に取り組んできた活動を誠実に記載しているのも特徴です。
実務未経験からエンジニア求人に応募する際には、こうしたポートフォリオを制作するだけでも、Web制作のスキルを持っている学生であると印象付けることができます。経験豊富な先輩エンジニアのポートフォリオを目指すのも良いですが、こうしたシンプルなポートフォリオを参考例としてみるのがおすすめです。
\15年超の実績を持つレバテックが運営/
\15年超の実績を持つレバテックが運営/
Rin Takatsujiさんのポートフォリオ例
https://portfolio.rinblog.net/
Webエンジニア・コーダーとして活躍されているRin Takatsujiさんのポートフォリオです。プロフィール・スキル・制作例・問い合わせフォームのシンプルな構成のページなので、実務未経験の方でも参考にしやすいでしょう。運営されているブログへのリンクも記載されており、エンジニアの人物性について詳しく知りたいという企業側のニーズにも応えています。
Web制作だけではなく、会計・英語といった強みをアピールすることで、ほかのエンジニアとの差別化を図っているのも特徴です。エンジニアのポートフォリオでは、プログラミング言語や制作実績しかアピールしてはいけないというルールはないため、強みや長所についても積極的に記載してみましょう。
Manato Kurodaさんのポートフォリオ例
http://manato.ca/
カナダ・バンクーバーで活動するManato Kurodaさんのポートフォリオ例は、すべて英語のページとなっており、英語圏の企業をターゲットとしていることがうかがえます。背景には立体的なWebデザインを実装しているほか、スキルレベルや制作実績をアニメーションとともに表示することで、印象的なポートフォリオページを実現しています。
エンジニア就活で参考にするにはややハードルが高いですが、ポートフォリオを提示する相手をイメージしながら制作する姿勢は非常に参考になるでしょう。将来は外資系企業や海外企業で活躍したいと考えている方も、ぜひ一度訪れておくことをおすすめします。
Makoto Hiraoさんのポートフォリオ例
https://hiraomakoto.jp/
WebデザイナーのMakoto Hiraoさんのポートフォリオ例では、ページのスクロールに合わせた大胆なアニメーションが実装されており、ページを見ているだけでも楽しめる設計となっています。これまでの制作実績を前面にアピールするポートフォリオであり、Promise、Policyといったコンテンツでデザイナーとしての考え方や信念についても記載されています。
Webデザイナー個人としての強力なブランディングにも成功しているポートフォリオなので、WebデザイナーやWebエンジニアを目指している方には非常に参考になるはずです。
Yohei Munesadaさんのポートフォリオ例
https://www.yoheim.net/portfolio/
Yohei Munesadaさんのポートフォリオ例は、マウスオーバーすることでトップページが大きく変化する、遊び心が取り入れられたデザインです。スキル・実績やプロフィールに関してはシンプルに記載されており、優れたデザインと読みやすさを両立させた設計となっているのが特徴です。
また、詳細な履歴書・職務経歴は、閲覧権限を付与された人だけがポートフォリオ上から確認できる仕組みです。ページを訪れるユーザーの目的ごとにコンテンツを分けることで、ポートフォリオページとしてもプロフィールページとしても活用できるアイデアが取り入れられています。
\15年超の実績を持つレバテックが運営/
\15年超の実績を持つレバテックが運営/
2.エンジニア就活に役立つポートフォリオとは?
ここまでエンジニア就活で役立つポートフォリオの作成例について、先輩エンジニアの作品をもとにご紹介してきました。数々の例からもわかる通り、エンジニア就活におけるポートフォリオは、自分自身のスキルや実績をアピールするためのものです。履歴書やエントリーシートなどでは伝わりにくい資格的な情報をアピールするのに効果的で、自分自身の強みを自由なデザインを使って伝えられるのが魅力です。
ポートフォリオの書き方には決まったルールなどは存在せず、上記の参考例でも取り上げた通り、英語力や保有資格についてアピールしたり、エンジニアとしての信念・ポリシーを伝えたりするのも有効です。なるべく詳細なポートフォリオを作成することで企業とのミスマッチを減らし、理想の職場へ就職できるチャンスが得られます。
履歴書・エントリーシートとの違い
エンジニア就活では履歴書やエントリーシートを提出するのが一般的ですが、これらの選考書類は決まったフォーマットの中で、決まった質問に答える形で記載するのがルールです。写真やイラストなどを使ってアピールすることも難しいので、どれだけプログラミングの実績があったとしてもアピールしにくいデメリットがありました。
しかしポートフォリオを作成して企業へ提出することにより、エンジニアとしてのスキルレベルをより正確に伝えることが可能になるほか、Webデザインを駆使して印象的なページをアピールすることも可能です。ポートフォリオを通じて採用担当者の興味を引き、評価を高めやすくなるので、積極的に活用することをおすすめします。
関連記事:エンジニア職に応募するESの書き方解説!志望動機のコツや求められる人物像も
就活ではポートフォリオ作成が実績に
なお、実務未経験のエンジニア採用に応募する際には、ポートフォリオを作成すること自体が実績になることも多いです。ポートフォリオページを実装するためには、Web制作を学んで実装し、サーバーを契約してインターネット上に公開する必要があります。この一連の作業を通じて、Web制作についての一通りの工程を経験できるので、ポートフォリオを持っている学生は即戦力のエンジニアとして評価されやすくなるのです。
そのためポートフォリオの提出が義務付けられていない企業へ応募する際にも、エントリーのタイミングでポートフォリオをまとめたURLを送付して、企業側へ制作実績をアピールすることをおすすめします。
\15年超の実績を持つレバテックが運営/
\15年超の実績を持つレバテックが運営/
3.エンジニア就活でポートフォリオを作成するメリット
エンジニア就活の際に、ポートフォリオを作成することは必須ではありません。プログラミングスキルに自信がない場合や、選考までに時間の余裕がない場合には、無理にポートフォリオを用意する必要はないでしょう。しかし事前にポートフォリオを準備しておくことにより、次のようなメリットが得られます。
-
・視覚的にスキル・実績をアピールできる
・エンジニアとしての意欲を伝えられる
・制作過程がアウトプット学習につながる
それぞれ順番にご紹介しましょう。
視覚的にスキル・実績をアピールできる
エンジニア就活でポートフォリオを用意することで、自分のスキル・実績を視覚的にアピールできるメリットがあります。Web制作に携わった経験を文章でアピールするだけの場合と比べて、ポートフォリオページで視覚的にアピールした方が、採用担当者へのインパクトは大きくなります。Web系の企業で働くエンジニアであれば、ポートフォリオを見るだけでエンジニアとしてのスキルレベルを推測できるので、高い評価を得やすくなるのです。
エンジニアとしての意欲を伝えられる
エンジニア就活でポートフォリオを準備することは、エンジニアへの志望意欲の高さをアピールできるメリットもあります。プログラミングスキルを学び、実際にポートフォリオページを作成して成果物を作ることにより、強い目的意識を持ってエンジニアを目指している姿勢が伝わります。プログラミング言語を独学したことをアピールするだけよりも、ポートフォリオを作成してアピールした方が、説得力も高まるでしょう。
制作過程がアウトプット学習につながる
エンジニア就活に向けてポートフォリオを作成すること自体が、プログラミングスキルのアウトプット学習につながるというメリットもあります。これまでに独学した知識を活かしてWebサイトを構築し、ユーザー目線に立ったページを作成することにより、エンジニアとしてのスキルアップに直結するのです。書籍や動画サイトなどを使ったインプット学習だけではなく、こうしたアウトプット学習にも取り組めると、即戦力のエンジニアとして企業から評価されやすくなります。
\15年超の実績を持つレバテックが運営/
\15年超の実績を持つレバテックが運営/
4.エンジニア就活で好印象につながるポートフォリオの作り方
最後に、エンジニア就活で企業から好印象を持ってもらうためのポートフォリオの作り方をご紹介しましょう。
-
・志望する業界・職種に合わせてアピールするスキルを決める
・プロフィールや自己紹介を詳しく記載する
・ユーザー目線に立って設計する
これらのポイントに沿って、自分だけのポートフォリオを作成してみてください。
志望する業界・職種に合わせてアピールするスキルを決める
エンジニア就活のためのポートフォリオでは、志望する業界・職種に合わせた内容に統一するのがコツです。いくつかのプログラミング言語を学んできた方であれば、志望企業で使用する言語を優先して記載して、即戦力で活躍できることをアピールすると良いでしょう。企業が定める歓迎スキルや、望ましいスキルが求人に記載されているのであれば、それらのスキルを取り上げるのも効果的です。
Webエンジニアに応募する場合には、フロントエンド開発の実績を積極的にアピールして、スマホアプリ開発の実績は控えめにアピールするという作戦も考えられます。志望する企業の採用担当者になったつもりで、ぜひ採用したいと思われるようなポートフォリオを心がけましょう。
プロフィールや自己紹介を詳しく記載する
エンジニア就活でポートフォリオを作る時には、スキル・実績だけではなく、プロフィールや自己紹介を詳しく記載するのもポイントです。新卒採用では、人物重視のポテンシャル採用を実施している企業が大半で、履歴書やエントリーシートだけでは把握できない人物性をチェックする企業も多いからです。
プログラミングスキル以外にも、英語力やコミュニケーション力、アルバイト経験なども記載しておくと、より採用担当者に刺さりやすいポートフォリオとなります。ただし履歴書・エントリーシートの内容と重複してしまうと、ポートフォリオのスペースの無駄遣いになってしまうので注意しましょう。
ユーザー目線に立って設計する
エンジニア就活でポートフォリオを作る時には、派手なアニメーションや目新しいグラフィックなどを実装するよりも、ユーザー目線に立った読みやすさ重視のページを設計するのが大切です。ユーザー目線が抜けてしまうと、ポートフォリオのデザインにこだわりすぎて、読みにくいページになってしまうからです。
印象的で採用担当者の記憶に残るようなポートフォリオを作ることも重要ですが、あくまでも読みやすさを重視して、シンプルな構成のポートフォリオを心がけてみてください。
\15年超の実績を持つレバテックが運営/
\15年超の実績を持つレバテックが運営/
5.まとめ
本記事では、エンジニア就活のためのポートフォリオの作成例として、7人の先輩エンジニアのポートフォリオページをご紹介してきました。それぞれのポートフォリオを参考に、自分自身のスキル・実績を効果的にアピールできるポートフォリオを作成してみると良いでしょう。
効果的なポートフォリオを用意できれば、採用担当者に対して視覚的にスキルをアピールできるほか、エンジニアへの志望意欲を伝えることにも役立ちます。本記事でご紹介してきたポートフォリオの作り方を参考に、自分だけのアピールポイントを伝えましょう。
ITエンジニアを目指す新卒学生向け就活エージェントならレバテックルーキー
レバテックルーキーは、レバテックが運営するITエンジニア専門の就活エージェントです。多数のITエンジニアのキャリア支援経験のあるアドバイザーが、あなたのスキルと希望に合わせた企業の紹介から、人事目線での面接対策など、就職までを一貫してサポートします。ES添削、面接対策、ポートフォリオ作成サポートなども実施していますので、まずは一度カウンセリングにお越しください。
就活アドバイザーに相談してみる
関連記事









