Oteto Blogのロゴ

未経験の大学生エンジニアにおくるポートフォリオの作り方【実例付き】

  • 現在大学生でエンジニア希望なんだけどポートフォリオってどんな感じに作るの?
  • ポートフォリオ作ったはいいもののこれで評価されるのか分からない

という方に向けて、実際に新卒未経験でWebエンジニアを目指していた私が「内定率を上げたポートフォリオの作り方」をご紹介します。

※本記事は私のように独学で学んできて技術力にあまり自信がない方向けです。なので実務経験があったり、既に相応の技術力を持つ「つよつよ学生エンジニア」な方にはあまり参考にならないかもしれません。悪しからず。

そもそもポートフォリオとは?

「ポートフォリオ」という言葉の意味については業界・業種などによって変わりますが、エンジニアの場合は「アプリケーション」や「システム」と捉えていただいて大丈夫です。

そして就職・転職においてポートフォリオを作ると有利になる理由は下記の2つです。

  • スキルを証明できる
  • 経歴や今までの活動をアピールできる

「ポートフォリオは中途の方や転職する人のためのもの」というイメージがあるかもしれませんが、最近では新卒界隈でさえ「作ると有利になる」ではなく「作らない方が珍しい」風潮になってきています。

というのも「Progate」をはじめとしたオンラインで気軽に学べるサービスが出てきたことにより、そういったアプリケーションを制作する難易度・敷居が低くなっているからです。そこで周りの学生がこぞって作っていたら「自分も作らなきゃ周りと差がついてしまう」と考えるのは当然でしょう。

ポートフォリオを作る上で意識したこと

ストーリー性のあるものにする

ポートフォリオはESに載せて終わり、ではなく大半の人が面接でも確実にその話を掘り下げられます。そこで面接の中で「なんでそれ作ったん?」と面接官の首を傾げさせないようにするためのストーリー性が大事になってきます。

ストーリー性と聞くと面倒臭そうに聞こえますが、まあ要するにポートフォリオを作るきっかけが自分の体験と絡んでいればいいわけです。例えば下記のように。

  • サッカーが好きだから、草サッカーチーム同士で試合を組めるマッチングサイトを作った
  • 大学の友達が大の蕎麦好きだから、近くの蕎麦専門店を探せるアプリケーションを作った

こういった自分の体験とリンクしたポートフォリオの場合、面接でその話になっても論理が飛躍したりして苦しくなる事が無いどころか、話が盛り上がる要素にもなり得ます。

【回答例付き】新卒Webエンジニア面接で実際に聞かれた質問総まとめ

成果物を作った後にそれっぽいきっかけを偽造するという方法もあるかとは思いますが、「就活はできるだけ本当の自分で勝負する」というスタンスのブログ主的にはあまりオススメできません。(※就活で嘘をつくのが悪いかどうかは別として)

ありきたりなものは作らない

面接官の方も沢山の応募者を相手にしてきてると同時に、見てきてるポートフォリオの数も多いでしょうから、特徴のないポートフォリオだと「またこの類か⋯」となってしまいかねません。

具体的な例でいうと下記のようなものです。

  • Progateやプログラミングスクールで(教材通りに)作るようなもの
  • 世に出回っているSNSもどき(Twitterなど)

技術力を高めるために世に出回っているサービスなどを真似してみる・実装してみるのは良い事だと思いますし、「選考まで間もない状況で作る余裕も時間もない」という場合は仕方ないかもしれませんが、極力ポートフォリオはそれ以外に別で作るのがベストです。

トップページだけでも見栄えを良くする

例えどんなに凄い機能を兼ね備えたものだとしても、デザインやUIがおざなりだとそれだけで評価はグッと下がってしまいます。しかもトップページがそうな場合は更に顕著です。

ぶっちゃけ他のページは手抜きでも、トップページだけは見栄えめっちゃ良くしてればいいと思います。他はすっぴんでもいいので。

機能を分かりやすく、かつ操作しやすくする

「実際にURLを教えた相手が使いやすいものにし、機能を分かりやすくする」。これはブログ主が失敗体験から学んだことです。

私が製作したのは大学の教務課に務める人に向けたシステムだったのですが、ユーザー(生徒)の新規登録ができるのは管理人(職員)だけで、初めて訪れた人はトップページを拝むことしかできない、という傍から見るとただのポンコツ成果物でした。

しかしその点を新卒エージェントの「レバテックルーキー」のアドバイザーの方にご指摘をいただいたことにより、デモ動画を撮影しそれをYoutubeに投稿、そのURLを各種ESに貼ることでその機能や挙動を分かりやすくアピールできました。

【もう落ちない】就活での書類選考(ES)の通過率が低い時の対処法

使っている技術はしっかりと把握する

面接において技術に明るい方が面接官の場合は、使った言語やライブラリ・フレームワーク関連のことはほぼ間違いなく聞かれます。

特に聞かれやすいのは何故その技術を選んだのかについて。「今まで勉強してきたから」だと勉強への積極性が欠如してると判断しかねないので、まあこの場合は「〇〇の技術はトレンドで⋯」「モダンな技術で将来的にも⋯」のようにこじつけで答えていいかもしれません。

ちなみにブログ主の場合は、(Railsで開発したので)使ったgemについてやセキュリティ云々のこと、「何故その技術を選択したのか」などを聞かれました。

【回答例付き】新卒Webエンジニア面接で実際に聞かれた質問総まとめ

ポートフォリオを作る上で注意しなくていいこと

「ポートフォリオは技術的に〇〇にすべき」や「△△しなきゃ見てすらもらえない」という噂を耳にすることがあるかもしれませんが、それの多くは中途採用、もしくは最初から相応の技術力を求められる企業の場合が多いです。

ですが新卒未経験の場合ですと、緩いとまでは言いませんが面接官の目がそこまでシビアでないことから、そこまで注意しなくてもいいことも生まれてきます。

コードの読みやすさ

新卒未経験の場合に限っては、よほどの企業でない限り「どのような経緯があって、結果どのようなモノを作ったのか」が重要視されますので、多少コードが汚くとも大目に見てくれる場合が多いです。

勿論可読性が高いに越したことはありません。越したことはないんですが、そこに固執して他の面がおざなりになってしまっては勿体ないです。

技術力

「自分には技術力が無いから、こんなポートフォリオ意味あるんやろか⋯もうマヂ無理⋯」と思った時期が僕にもありました。しかし技術力が現時点でそこまで無くても悲観することはありません。

よほどの企業でない限り、新卒者に求めることは現時点での技術力<ポテンシャルです。「技術力が既に相当ある」と思わせるより「この子は入社後も積極的に技術をキャッチアップしてくれそうだな」「将来伸びそうだな」と思わせることの方が重要なわけです。

そこで重要になってくるのはポートフォリオ本体ではなく、それをアピールするESや面接の場でしょう。

例えば、成果物の制作の過程で「学んだことをアウトプットしていた」や「〇〇のテックブログなどを見て技術の情報や流行を追っていた」ということがアピールできればポテンシャルの面では加点がもらえるはず。

ポートフォリオの作成例

筆者が制作したポートフォリオのトップページ

かくいう私が当時制作したポートフォリオは、画像認識の技術を用いて大学内の忘れ物を検知・判別しそれを生徒に返却するまでの作業を効率化する「忘れ物管理Webアプリケーション」です。

筆者が制作したポートフォリオ

使用技術は下記の通り。

領域技術
サーバサイドRails
フロントエンドVue.js(一部jQuery)
画像認識(筆者の担当外)Python(YOLOv5)

ESや面接でアピールしたことは、画像認識云々の話は勿論のこと、RailsのAction Cableを使った非同期な(生徒と職員が行う)チャット機能と非同期な(生徒から職員のへの申請に対する)通知機能などです。

それから機能や出来具合からも分かるように、私には決して就活を技術力や実績のみでゴリ押しできるようなスペックではありませんでした。

しかしポートフォリオの作り方・アピールの仕方を工夫したことにより、就活をかなり有利に進められたと思っています。

【独学・文系でも出来た】新卒未経験がWebエンジニアになるまでにやったこと

就活が終わった後も、ポートフォリオは共に戦い抜いた「戦友」として愛着が湧くと思いますよ。

まとめ

以上「内定率を上げたポートフォリオの作り方」でした。

自分の作ったポートフォリオを誰かに添削して欲しい場合は、新卒エンジニア専門のエージェント「レバテックルーキー」を利用するのがおすすめです。

【内定獲得】レバテックルーキーの評判は?文系未経験が利用してみた口コミ

担当アドバイザーの方からアドバイスをいただけるだけでなく、添削をしていただける場合もあります。「まだポートフォリオ製作途中なんだけど」という場合でも一度相談してみるといいかもしれませんね。