未経験からエンジニア転職、もしくはこれからフリーランスエンジニアになろうとしている人は、ポートフォリオが必須です。とはいえ、どんなポートフォリオを作ればいいか分からないという人もいるでしょうし、優れたポートフォリオを知りたいという人もいると思います。
そんな人のためにエンジニア向けポートフォリオの例を紹介していきます。
エンジニアがポートフォリオを作成しないデメリット
まずはエンジニアがポートフォリオを作らないとどうなるのでしょうか。技術アピールが口頭だけになってしまうことから、面接でのアピールが難しくなってしまうでしょう。
1.判断材料が履歴書と職務経歴書だけになってしまう
面接官があなたを判断するのは履歴書と職務経歴書だけになります。紙2枚だけですから、やろうと思えば経歴詐称とか、そこまではいかなくても経歴を盛るくらいはできてしまいます。
面接官としては、面接の中で技術力を測ろうとするわけですが、面接官自身も技術力があるわけではなく(企業内の人事という立場でしかない)、難しいことを聞くことができないケースもあります。
また、口頭で答えられないエンジニアは結構いるもので、Google検索とかして調べることができれば優秀な人もいるわけですし、仕事をする上では検索して理解できるならそれでいいのです。
口頭で技術力を判定することは難易度も高く、フィルタリングがうまくできないというデメリットがあります。
2.面接を受けられないケースがある
ベンチャー企業なんかだと、やっぱり自分で日頃からプログラミングをしている人じゃないとついていけないですし、数少ない社員を雇うのにはより一層慎重になっています。
その社員一人のパワー次第で会社が傾くのか、上場へ向かうのかが変わる可能性があるわけですから、ポートフォリオくらいは作ってもらわないと困るわけです。
なので、もしベンチャー企業に行きたいという人であれば、ポートフォリオは100%必須と考えておきましょう。書類選考すら通らない可能性もあります。
3.他のエンジニア志望者との差別化ができない
昨今ではプログラミングスクールが流行っていて、ある程度の技術力はみんな兼ね備えています。他のエンジニアとの差別化をするためには、職務経歴書や熱意ある面接だけでは不十分で、成果物であるポートフォリオの出来が差別化になります。
目の前で動くものを見せるだけで面接官の目の色が変わりますし、たとえ技術力不足だったとしても、動くものを作り上げたという事実は熱意として伝わります。
エンジニアは営業のように言葉で熱意を伝える必要はなく、ポートフォリオで伝えるべきです。
エンジニアがポートフォリオを作成するメリット
エンジニアがポートフォリオを作っておくとどんなメリットがあるでしょうか。
1.プログラミングスキルが証明できる
プログラミングスキルをポートフォリオ無しでアピールしようとすると、職務経歴書に「PHP、HTML、Javascript」とかの技術名をつらつらと並べるだけになってしまいます。
面接官は、PHPの何をどのくらいできるかを知りたいわけで、書類選考に通した段階で書かれているスキルとのマッチングは済んでいます。
そのため、ポートフォリオの無い志望者には口頭で話を聞くわけですが、技術的なことを口頭で話されても完璧に理解できる人はほとんどいません。
ポートフォリオであれば、PHPを使ってどんなものを作れるのか、どの技術を使えるのかがハッキリするので、一目瞭然に伝わっていきます。
2.やる気や将来性を評価してもらえる
ポートフォリオを作るとなると、早くて1ヶ月〜3ヶ月くらいはかかります。
それだけの期間、やる気を維持して、時間を確保できる人はそれだけで評価されますし、入社後も自分で仕事を進められる人と思ってもらえるでしょう。
特に未経験でエンジニアを目指している人は、スキルと実績が足りない中で他の志望者と勝負しないといけません。勝てるのは熱意くらいですから、ポートフォリオ作成で熱意をアピールしていかないと勝てません。
3.入社後のミスマッチを減らせる
入社後に「こいつ違ったな、、、」と感じてしまうのが、人事としては最悪です。そのミスマッチを防ぐために人事部があるわけですし、面接をするわけです。
できるだけミスマッチしたくないのは、志望者側も同じですから、こちらとしても最大限の努力をしてミスマッチを防げるようにしてあげるべきです。
最適なのは、副業やアルバイトでお試し期間を設けてから社員として雇ってもらうことですが、そんな余裕がない人がほとんどですから、やはりポートフォリオで入社後の働きぶりをイメージしてもらいましょう。
エンジニアがポートフォリオを作成する際のポイント
エンジニアがポートフォリオを作るときに考えておくポイントは結構たくさんあります。これは企業が新しいプロダクトを作るときと何ら変わらないので、この考え方を身につけておくと、入社後も有効です。
1. 明確な目的を持つ
ポートフォリオを作る目的は、「転職時に評価されること」ですよね。これを間違ってしまうと、好きなプロダクトを作ってしまったり、マネタイズを考え始めてしまいます。
マネタイズがダメなわけではありませんが、マネタイズしたプロダクトなら評価されるというゴールを間違えないことが重要です。
2. 技術スタックの明記
使用した技術スタックは必ず明記しましょう。コードを見ただけで技術スタックを理解するのは難しいですし、そもそもちゃんとコードまで見てくれる人は少ないです。
Githubに掲載するのであれば、README.mdに書いておくとトップページに表示されるのでおすすめです。いっそのことプロダクトの初期画面に書いてしまってもいいかもしれません。その際、セキュリティに注意しましょう。
3. 問題解決の過程を記述
なぜそのポートフォリオを作ろうと思ったのか、作った結果どんな問題解決ができるのかを記載しておきましょう。
技術のアピールさえできればそこまで考える必要はないと思うかもしれませんが、プロダクトを作るのは、何かしらの問題を解決するためというのが大前提にあります。
プロダクト→問題解決→技術アピール→評価される
問題を解決していないプロダクトは価値が生まれないので、ゴールは技術アピールだとしても、プロダクトを作る目的は問題解決でないといけません。
4. UI/UXの考慮
インフラ寄りのサーバサイドエンジニアを目指す場合、UI/UXはそれほど重要視されませんが、それでも見た目は重要です。
面接官はコードを隅々まで見てくれるわけではないので、画面上から興味を出してもらわないといけませんし、画面を動かすだけで技術力をアピールできるとなお良いです。
例えば、サーバサイドエンジニアとしてデータを保存して表示させるという技術を見てほしいとします。画面上からどんなデータが送られて保存されるかを見えるようにしてしまえば、ボタンを押したときの動作をコードを見ずに理解してもらえます。
5. レスポンシブデザイン
ほとんどの面接官は面接時にPCを持っていますが、中にはスマホで見たい人もいますから、スマホの画面幅にも対応しておきましょう。
むしろ、スマホ画面で作っておいて、PC画面用に広いものを作るという順番でもいいと思います。最近のCSS技術だとスマホファーストに作られていたりします。
6. コードの品質
コードの品質は正直、細かいところまで見られることはないでしょう。考えるべきはディレクトリアーキテクチャくらいでしょう。
ファイルの中身のコードにこだわらなくてもいいので、1つのファイルに全てのコードを入れるようなことをせず、ドメイン分けしたり、適切なディレクトリ分け、APIエンドポイント分けをしておきましょう。
7. チームでの役割
ポートフォリオ作成は基本的に一人でやるものですが、プログラミングスクールに通っていて、仲間ができたりした場合は共同制作をしてもいいでしょう。
その際、チーム内での役割を明示しておくべきです。コードを書いたのか、設計したのか、DBを作ったのか、誰が何をしたかがわかるようにしておきましょう。
また、せっかくチームを作ったのであれば、コードレビューの文化やインフラ構築環境の共有化などもできると、入社後のチーム開発のイメージもしやすくなります。
8. フィードバックの収集
ポートフォリオを公開したら、エージェントや先輩エンジニア(いれば)などに見てもらいましょう。直感的に技術力が伝わりやすいのか、目的がはっきりしているか、パッと見すごい！と感じるかどうかなど、ありのままのフィードバックを受けるといいでしょう。
もちろんその後は改善です。改善した履歴も残しておくと、最初のプロダクトから今の状態になった経緯がわかるようになって、理解してもらいやすくなります。
9. 更新を怠らない
たった1ヶ月でも技術は日々更新されていきます。新しい技術が出てきたらなるべく更新しておき、ポートフォリオを見せる段階では、最新バージョンにしておきましょう。
ただ、作りたい機能がまだ終わっていない場合はそちらを優先させましょう。最新化に追われてしまっても日々更新される技術に追いつけませんし、終わらない戦いが始まるだけです。
まずは最低限ポートフォリオとして成り立つものを作ってから、ちょっとずつメンテナンスをしていく感じでいいと思います。
エンジニアがポートフォリオを作るときに気をつけること
ご紹介したポイントを考慮しつつ、いよいよポートフォリオを作成してもらうわけですが、もう少し待ってください。ポートフォリオを作るときに気をつけないといけないことがあります。
1.スクールの成果物をそのまま作らない
プログラミングスクールに通っていた人は、最終課題としてポートフォリオの作成があると思います。ですが、それをそのまま使わないでください。
エンジニアとして働いている人は、スクールのポートフォリオがどんなものかチェックしていますし、日々いろんな転職志望者を相手にしていると、「またスクールの課題か、、」と思ってしまいます。
今までに見たことのないプロダクトを作れるのが理想ですし、問題解決することを頭に入れておけば、おのずとこの世に2つとないプロダクトができあがるはずです。アイデアを出すのは大変ですが、プログラミングを学びながら、身の回りの問題を解決するようなアイデアを考えておきましょう。
2.完璧を目指さない
完璧を目指したら絶対に終わりません。理想形をゴールとしてもいいですが、ある程度期間を絞って、その中で作れるものを作っていきましょう。
スクールが終わったのが9月で、11月から転職活動を始めたいなら、ポートフォリオ作成期間は2ヶ月だけです。転職活動中もアップデートできますが、11月までには見せられるようなプロダクトを作らないといけません。
優先順位を決めて、確実に11月に目処が立つようなプロダクトを作らないといけませんし、スケジュール通りに開発をする能力も含めてエンジニアのスキルです。
3.作りたいものではなく評価されるものを作る
作りたいものを作ってしまいがちですが、インスタのような画像SNSを作ったとしても、それが評価されるかどうかは分かりません。何を評価したもらいたいのかを明確にして、その中で問題解決できることを見つけ、プロダクトになってきます。
作りたいものはエンジニアになった後に、現場で色々学びながらできるので、ポートフォリオ作成時は評価されるものを作っていきましょう。
エンジニアにおすすめ！手軽にポートフォリオ作成ができるツール
技術選定に近い話になりますが、エンジニア(主にサーバサイドorフロントエンド)が個人でサービスを公開する際に、あったら便利なツールをご紹介します。
使う技術によって使いやすさや用途は変わってくるので、各々アピールしたい技術と照らし合わせながら参考にしてください。
1.figma
Figmaはプロトタイプを作れるツールです。UIを作るときに使えますし、プロダクトのイメージもしやすくなります。
トップページから、ログイン画面や機能ページへの遷移やボタンの実装場所などをおおよそ決めておくと、開発を始めてからUIを考えることなく突き進むことができます。
サーバサイドエンジニアの場合は、最低限のUIでいいので、Figmaに時間を使いすぎないようにしましょう。
2.ChatGPT
今やエンジニアには欠かせないツールとなったChatGPTです。無料版でも充分機能するので、使ったこと無い人はまず無料版から使ってみましょう。
分からないコードやエラーメッセージを打ち込むだけで解決方法の手がかりを教えてくれますし、コードをもっときれいにしてほしいとか、複雑な条件分岐の実装を手伝ってもらうこともできます。
最近だとGoogle検索よりも早く解決するので、まずはChatGPTで調べて、うまく動作しなかったらGoogle検索に頼っています。
3.vercel
ReactのフレームワークであるNext.jsを使うならVercelを使って公開しましょう。Vercelは後述のGithubと連携させることで、簡単にWeb上にサイトを公開することができます。
Reactをアピール技術にしたい方であれば、Vercelが最も良い選択ですが、他のPHPとかRubyのようなサーバサイド言語を使用する場合は、Herokuも良いでしょう。
AWSが最も一般的なインフラツールですが、学習コストが若干高いので、AWSを学習してインフラエンジニアやフルスタックエンジニアを目指すのでなければ、いきなりAWSにする必要はありません。
4.Github
コードを管理するためにはGithubは必須です。一人で開発する場合でも差分の確認とか、VercelやHerokuへのデプロイなどに使えますし、入社後のチーム開発をする上では必須ツールなので、使い方は覚えておきましょう。
合わせてgitコマンドの使い方やGit Flowなども理解しておくと、開発をスムーズに進められるようになります。
5.VSCode
VSCodeはエディタです。各言語ごとに使いやすいツールがありますが、言語が絞りきれていない場合はVSCodeがおすすめです。
プラグインを入れれば言語の自動補完機能を付けられますし、Githubとの相性もいいので、とりあえず入れておくべきエディタです。
エディタに関しては好みがあるので、VSCode一択！とまでは言いませんが、こだわりや指定がなければVSCodeがおすすめです。
エンジニアがポートフォリオ作成後にすべきこと
ポートフォリオを作成する手順はおおよそ解説してきました。ある程度見せられるポートフォリオが作れたらすべきことを解説していきます。
転職が成功するまでポートフォリオ作成は終わりません。
1.こまめに更新する
アピールポイントが増えてきたり、技術バージョンが上がったらこまめに更新していきましょう。
Githubのトップページには、あなたがどのくらいPush(コードを更新)したかを可視化できるようになっています。これを草を生やすと言うのですが、草がいっぱい生えているほうが面接官からの印象が良いですから、定期的にコードを更新するようにしましょう。
面接に通らなかったということは、アピールが足りないことが原因でもあるので、ポートフォリオに修正が必要でもあります。
3.WebサービスにURLを載せる
ポートフォリオを見てもらいやすくするために、Webサービスに掲載しておきましょう。
- 転職エージェントのプロフィール欄
- SNSのプロフィール欄
- ブログサービスのプロフィール欄
これらのポートフォリオを掲載して、IT企業に関わる多くの人に見てもらうことで、面接時の評価だけでなく、企業側からスカウトされる可能性もあります。
ポートフォリオを掲載しておきたいWebサービス
具体的にどのWebサービスにポートフォリオを掲載しておけば良いのかについて解説します。
Wantedly
Wantedlyはビジネスマン用のSNSみたいなサービスで、転職にも使えますし、ビジネス交流の場としても使えます。
プロフィール欄には経歴やスキルを書く欄があり、ポートフォリオやSNSのURLを掲載する欄もあるので、ここにURLを掲載しておきましょう。
Wantedlyはエンジニアにとって、スタートアップ企業への転職に使います。一般的な転職サイトや転職エージェントに掲載するお金をかけられないとか、積極的に採用活動してないけど、いい人がいたら取りたいといった企業が使うからです。
SNSとして使うので、いきなり面接に進むわけではなく、まずは話を聞きに行くこと(カジュアル面談)から始め、雰囲気がマッチしそうだなと思ったら本面接に進むという流れになります。話を聞きに行く段階でポートフォリオを見られるので、Wantedlyのポートフォリオ欄は多くの企業採用担当者に見られると思っておきましょう。
Twitter(X)
Twitterでエンジニアとしてアカウントを持っているなら、プロフィール欄にポートフォリオを掲載しましょう。定期的にポートフォリオの進捗をつぶやくのも面白いですね。
他のエンジニアや企業から面白いものを作っていると思ってもらえたら、面接を飛ばして入社できるかもしれません。多くの人はSNS上での影響力はそんなに大きくないと思いますが、地道にアカウントを運用していけば、ポートフォリオが誰かの目に留まるときが来るかもしれません。
Qiita
Qiitaはエンジニア向け技術ブログ掲示板です。トップページをさっと見てみると、いろんなエンジニアが書いた記事が出てきます。Qiitaで書いた記事はとても読まれやすいので、日頃から記事をアップしておくとアクセスや反応がもらえます。
そこでプロフィール欄にポートフォリオのURLも貼っておくと、記事からプロフィールに飛んだ人にポートフォリオを見てもらえます。自分でブログを立ち上げるよりも遥かにアクセスが集まるので、Qiitaのアカウント作成と、定期的な記事更新はけっこうおすすめです。
エンジニアのポートフォリオアイデアサイト
ポートフォリオは他の人と違うもので、問題解決をするものがいいと書いてきました。でも「アイデアなんて浮かばないよ」という人もいると思います。
そもそも、問題解決ができる完璧なプロダクトが作れるのであれば、みんながスタートアップ企業を経営できてしまいます。ポートフォリオのアイデアはほんとにちょっとした問題解決ができれば充分ですし、アイデア出しにはあまり時間をかけたくないですね。
1. indiehackers
indie hackersは個人開発者たちの掲示板です。Qiitaのジャンルをもっと絞ったものだと思っていいでしょう。(影響力はQiitaより大きい)
基本英語で書かれていますが、その分世界中の個人開発者からアイデアが集まっているので、それを日本風にアレンジするだけでも、他とは違うポートフォリオが作れます。いくつかのアイデアを参考にして、自分なりのプロダクトを考えてみるといいでしょう。
2. 個人開発を投稿できるサイトを個人開発しました
https://zenn.dev/keiichiro/articles/055c24757ed7bf
個人開発を投稿できるサイトがあるので、こちらを覗いてみると、個人でどんなサービスを作っているのかがわかります。個人で作ったとは思えないほどのサービスもありますが、みんなもっと気楽に作っています。
「この程度でもいいんだ」
「そのアイデアはなかった」
と感じれるはずなので、アイデアのハードルを下げて、想像力を働かせるのにいいサービスです。
3. 個人開発にてWebサイトやWebサービスを作るときにだいたい使うもの【準備・開発・運用】
https://qiita.com/shinshin86/items/9ddf658b7f12060bb883#開発を始める前にサービスアプリの構成を考える
技術選定向けの記事ですが、サービス作りの考え方が細かく書いてあるので、アイデアをどの視点から考えればいいか、アイデアを形にするまでの流れを知りたい方におすすめです。
この記事は個人開発をする人向けなので、マネタイズまでしっかり考えていますが、ポートフォリオの場合はマネタイズまで考える必要はありませんし、UIも最低限でいいと思います。
ポートフォリオ作成にはエージェントの利用も不可欠
ポートフォリオは基本一人で作るものですが、作りながらも転職エージェントの力を借りましょう。
エージェントにポートフォリオを見せてフィードバックをもらおう
エージェントに登録して、書類選考時に「ポートフォリオも見てもらいたい」と伝えれば、エージェントによってはポートフォリオを書類選考に入れてくれます。
さらに面接時にもポートフォリオの説明時間をくれたりしますし、内容のフィードバックをもらうこともできるので、第三者視点を得るためにも、ポートフォリオ作成しながらエージェントへの登録もしておくといいでしょう。
ポートフォリオを評価してくれる企業を提案してもらおう
職務経歴書しか見ない企業もあれば、面接は非技術者の人事部が行うから、ポートフォリオはほとんど意味ないという企業もあります。そういった企業にどうしても入りたいならポートフォリオを作らないアプローチが必要ですが、ポートフォリオを見て評価してくれる企業の方が入りやすいですし、成長できるはずです。
エージェントにはポートフォリオをアピールポイントにしたいと伝えておき、ポートフォリオを評価してくれるかどうか、面接には技術者やCTOが出てくるかどうかなどを事前に調べてもらうと、ムダな面接を避けることができます。
ちなみに、ポートフォリオを評価しない企業は人事部が面接をする大企業が多く、大企業に行きたい人は、まずはベンチャー企業などで実績を積み、職務経歴書を充実させることをおすすめします。
面接回数をこなして徐々に仕上げていこう
ムダな面接は避けた方がいいとはいえ、面接回数をこなすことも重要です。面接慣れしてきて、話すのが上手になりますし、ポートフォリオがどのくらい評価されたかのフィードバックを受けることもできます。
面接後のフィードバックを受けられるのはエージェントの強みで、自分で企業を探すような転職サイトや転職SNSなどではフィードバックなしで勝負しないといけません。
まとめ：エンジニア転職にポートフォリオは必須！
エンジニアが転職をする際にポートフォリオを作ったほうがいいよ！という記事を書きました。
ポートフォリオを作る意味や、作り方、作った後の動き方など、エンジニア転職の流れに沿ってポートフォリオ作成の流れを合わせました。
未経験からエンジニア転職する人にとっては、ポートフォリオこそが経歴であり、熱意の表れです。つまり転職成功のカギはポートフォリオにかかっていると言っても過言ではありません。
経歴がある人であれば、ポートフォリオ無しでも転職できる場合もありますが、それでも年収を大きく上げたいのであれば、ポートフォリオがあって損はしません。
これから数年ごとに転職を考えている場合でも一度作ったポートフォリオはずっと使い回すことができます。定期的に更新して、すごいポートフォリオに仕上げていけば、転職するごとに良い企業に行き、年収アップに繋がる可能性が高くなるでしょう。