どうもおはようポテト(@ohayoupoteto22)です。
ポートフォリオってさどんな感じに作るん…?
ということで今回は
新卒未経験ってどんなポートフォリオ作ればいいの?」
「ポートフォリオ作ろうとしてるんだけど気をつけるべきことってある?」
という方に向けて「内定に繋がるポートフォリオの作り方(新卒未経験エンジニア向け)」についてまとめました。
決して非凡ではないブログ主の経験に基づくものですが参考になれば幸いです⸝⸝- ̫ -⸝⸝
ブログ主
お品書き
そもそもエンジニアのポートフォリオとは?
「ポートフォリオ」という言葉の意味については業界・業種などによって変わりますが、エンジニアの場合は”アプリケーション”や”システム”と捉えてもらって大丈夫です。
就職・転職においてポートフォリオを作ると有利になる理由は以下の2つです。
スキルを証明できる
経歴や今までの活動をアピールできる
「ポートフォリオは中途の方や転職する人のためのもの」というイメージがあるかもしれませんが、
最近では新卒界隈でさえ「作ると有利になる」ではなく「作らない方が珍しい」風潮になってきています。
というのもPai〇aやProg〇teをはじめとしたオンラインで気軽に学べるサービスが出てきたことにより、そういったアプリなどを制作する難易度・敷居が低くなっているからです。
そこで周りの学生がこぞって作っていたら「自分も作らなきゃ周りと差がついてしまう」と考えるのは当然でしょう。
くるみ
これから少しだけ自分語りを挟みますが、早く結論を知りたい方はこちらからジャンプしてください。
本題の前に
簡単な自己紹介
まず初めにブログ主のスペックを少しだけ。
3年次の11月に自社開発を行なっている都内のWeb系企業6社中2社から内定をもらう(22卒)
プログラミングに関しては大学から学び始め、ほぼ独学
“実務”未経験
情報学部と聞くとバリバリプログラミングをするイメージがあるかもしれませんが、ウチの大学の場合はそんなことはなくほんっっの少し触る程度だったので主に独学で勉強を進めてきました。
ちなみに、こんな凡な学生がどのようにして第一志望のWeb系企業から内定を勝ち取ったかについては以下の記事でまとめています。
新卒未経験がWebエンジニアになるためにやった5つのこと
ブログ主が製作したポートフォリオ
そんなブログ主が就活時に苦楽を共にしたポートフォリオは、画像認識の技術を用いて大学内の忘れ物を検知・判別しそれを生徒に返却するまでの作業を効率化する「忘れ物管理Webアプリケーション」です。
使用技術は以下の通りです。
サーバーサイド:Rails
フロントエンド:Vue.js(一部jQuery)
画像認識側:Python(YOLOv5)
面接やESでアピールしたことは、画像認識云々の話は勿論のこと、RailsのAction Cableを使った非同期な(生徒と職員が行う)チャット機能と非同期な(生徒から職員のへの申請に対する)通知機能などです。

…はい。アプリの機能や出来具合からも分かるように、僕はいわゆる「よわよわエンジニア」です。決して就活を技術力や実績のみでゴリ押しできるようなスペックではありません。
ブログ主
しかしポートフォリオの作り方・アピールの仕方を工夫したことにより、就活を有利に進められたことは紛れもない事実です。
ということで今回はそんなポートフォリオを作るにあたって何を意識したのか・どのように就活で活かしたのか共有させていただきます。
内定に繋がるポートフォリオの作り方(新卒未経験エンジニア向け)
ストーリー性のあるポートフォリオにする
ポートフォリオは ESに載せて終わり、ではなく大半の人が面接でも確実にその話を掘り下げられます。そこで、面接の中で「なんでそれ作ったん?」と面接官の首を傾げさせないようにするための”ストーリー性“が大事になってきます。
ストーリー性と聞くと面倒臭そうに聞こえますが、まあ要するにポートフォリオを作るきっかけが自分の体験と絡んでいればいいわけです。例えば以下のように。
「サッカーが好きだから、草サッカーチーム同士で試合を組めるマッチングアプリを作った」
「大学の友達が大の蕎麦好きだから、近くの蕎麦専門店を探せるアプリを作った」
こういった自分の体験とリンクしたポートフォリオの場合、面接でその話になっても論理が飛躍したりして苦しくなる事が無いどころか、話が盛り上がる要素にもなり得ます。

成果物を作った後にそれっぽいきっかけを偽造する、という方法もあるっちゃありますが…
「就活はできるだけ本当の自分で勝負する」というスタンスのブログ主的にはあまりオススメできません。(※就活で嘘をつくのが悪いかどうかは別として)
ありきたりなものは作らない
面接官の方も沢山の応募者を相手にしてきてると同時に、見てきてるポートフォリオの数も多いでしょうから、ありきたりなものや特異点の無いポートフォリオだと「またこの類のものか…」となってしまいかねません。
具体的な例でいうと以下のようなものです。
Prog〇teやプログラミングスクールで作るようなもの
世に出回っているSNSもどき(Twitterなど)
技術力を高めるために世に出回っているサービスなどを真似してみる・実装してみるのは良い事だと思いますし、「選考まで間もない状況で作る余裕も時間も無いンゴ」という場合は仕方ないかもしれませんが、極力ポートフォリオはそれ以外に別で作るのがベストです。
くるみ
トップページだけでも見栄えを良くする
例えどんなに凄い機能を兼ね備えたものだとしても、デザインやUIがおざなりだとそれだけで評価はグッと下がってしまいます。しかもトップページがそうな場合は更に顕著です。
ぶっちゃけ他のページは手抜きでも、トップページだけは見栄えめっちゃ良くしてればいいと思います。極論ですけど。
ブログ主
トップページだけでもお化粧していきましょう。他はすっぴんでもいいので。(2回目)
機能を分かりやすく&操作しやすくする
「実際にURLを教えた相手が使いやすいものにし、機能を分かりやすくする」。
これはブログ主が失敗体験から学んだことです。
ブログ主が製作したものは、大学の教務課に務める人に向けたシステムだったのですが…
ユーザー(生徒)の新規登録ができるのは管理人(職員)だけで、初めて訪れた人はトップページを拝むことしかできない、という傍から見ると只のポンコツ欠陥アプリでした。
くるみ
しかしその点を新卒エージェントの「レバテックルーキー」のアドバイザーの方にご指摘をいただいたことにより、デモ動画を撮影しそれをYoutubeに投稿、そのURLを各種ESに貼ることでそのアプリの機能や挙動を分かりやすくアピールすることができました。

使っている技術はしっかりと把握する
面接において技術に明るい方が面接官の場合は、使った言語やライブラリ・フレームワーク関連のことはほぼ間違いなく聞かれます。
更に聞かれやすいのは「何故その技術を選んだのか」について。
「今まで勉強してきたから」だと勉強への積極性が欠如してると判断しかねないので、まあこの場合は「〇〇の技術はトレンドで…」「モダンな技術で将来的にも…」のようにこじつけで答えていいかもしれません。
ブログ主
ちなみにブログ主の場合は、(Railsで開発したので)使ったgemについてやセキュリティ云々のこと、「何故その技術を選択したのか」などを聞かれました。いやぁ怖かったね。
ポートフォリオを作る際に注意しなくていいこと
よく『ポートフォリオ エンジニア』などと検索すると「ポートフォリオは〇〇にすべき」や「△△しなきゃ見てすらもらえない」と謳われているのを目にしますが、それの多くは中途採用であったり最初から相応の技術力を求められる企業の場合です。
よって新卒未経験の場合ですと、緩いとまでは言いませんが面接官の目がそこまでシビアでないことから、”そこまで注意しなくてもいいこと“も生まれてきます。
コードの読みやすさ
“新卒未経験”の場合に限っては、よほどの企業でない限り「どのような経緯があって、結果どのようなモノを作ったのか」が重要視されますので、多少コードが汚くとも大目に見てくれる場合が多いです。
勿論可読性が高いに越したことはありません。越したことはないんですが、そこに固執して他の面がおざなりになってしまっては勿体ないです。
技術力
「ワイには技術力が無いから、こんなポートフォリオ意味あるんやろか…もうマヂ無理…」と思った時期が僕にもありました。しかし技術力が現時点でそこまで無くても悲観することはありません。
よほどの企業でない限り、新卒者に求めることは現時点での技術力<ポテンシャルです。
「技術力が目を見張るものがあるな」と思わせるより「この子は入社後も積極的に技術をキャッチアップしてくれそうだな」「将来伸びそうだな」と思わせることの方が重要なわけです。
そこで重要になってくるのはポートフォリオ本体ではなく、それをアピールするESや面接の場でしょう。
例えば、成果物の制作の過程で「学んだことをアウトプットしていた」や「〇〇のテックブログなどを見て技術の情報や流行を追っていた」ということがアピールできればポテンシャルの面では加点がもらえるはず。
くるみ
まとめ
以上、新卒未経験エンジニア向けの内定に繋がるポートフォリオの作り方でした。
少しでもエンジニアを目指す方の参考になれば幸いです!では⸝⸝- ̫ -⸝⸝