40歳未経験でWebエンジニアへの転職に成功しました。転職活動期間は約1ヶ月間。40歳という高齢、しかも実務未経験という状況にも関わらず、短期間でWebエンジニアへの転職が決まったのは、まさにポートフォリオのおかげ！私がWebエンジニアへの転職活動で作成したポートフォリオについて、どんなポートフォリオを作成したのか解説します。

本記事は下記の5本立てです。

Webエンジニア未経験が転職活動のために作成したポートフォリオ数

４０歳Webエンジニア未経験で転職に成功したゆかこです。

年齢、経歴からも確実に無謀な転職活動だったわけですが、幸運にも転職活動１ヶ月ほどで内定をいただくことができました。

私の転職活動の詳細については下記記事でお伝えしているので、興味がありましたらチェックしてみてください^^

40歳で未経験だけどエンジニア転職に成功しました～成功体験談～

40歳で実務未経験にもかかわらず、正社員のエンジニア転職に成功しました。転職活動前の準備、転職活動の期間・方法、未経験エンジニア求人の探し方、求人に応募した総数、落ちた数、受かった数など私の転職活動の詳細を公開します。転...

なぜ年齢的に見ても経歴的に見ても私が短期間でWebエンジニアへの転職に成功できたのかと今振り返ってみると、ポートフォリオの存在が大きかったように思います。

私がWebエンジニアへの転職活動のために作成したポートフォリオの数は3つです。

ジャンル(?)がかぶらないように、作成しました。

具体的には下記の3種類です。

これら３つのURLを取得して、自分が契約しているレンタルサーバーにアップ、そしてポートフォリオ紹介用のLPを作成して、そこに3つのポートフォリオのリンクと説明を掲載しました。

このポートフォリオ紹介用のLPも作品とみなすならば、ポートフォリオ数は全部で4つとなります。

転職活動のために作成したポートフォリオの解説

私が転職活動のために作成した3つのポートフォリオは、全部Webで閲覧できるものですが、全然違います。

それぞれ詳しく解説します。

LP(ランディングページ)

ランディングページというのは、縦長レイアウトの1枚のページのことです。

商品紹介ページで下へスクロールしていくと、購入ボタンがある…というとイメージが付きやすいかも？

Webサイトの基本、HTMLとCSSがあれば作成できるので、未経験だけどWebエンジニアへの転職を目指したい！という方に、最初に作成するポートフォリオとしておすすめです^^

私が作成したLPで使用した言語は下記です。

上記の通り、実はHTML、CSSの他に、JavaScriptも盛り込んでいます。

どういうふうに盛り込んでいるかというと、ページの画像の一部に、パララックス効果を実装しました。

下へスクロールしていくと、ある画像背景のところで、画像の中でもスクロールが起きて視覚差異を起こす…というものです。

イメージとしては、下記サイトを御覧ください。

» 背景パララックスの例

上記サイトではトップ画像がスクロールスピードより遅いスピードでスクロールして、視覚差異を起こしています。

私のLPでは、スクロール途中の画像にこの視覚差異を入れました。

また、一番下には問い合わせ用のがあり、「入力内容を確認する」ボタンを押下すると内容を確認してメールを送信する…という想定で作成しているのですが、ボタンの実装はしておりません。

ポートフォリオとして作成したLPの目的は、LP作成スキルの証明だったことと、ボタン実装に労力をかけるならもっと他のポートフォリをを作成するほうがいいなと思ったからです。

ECサイト

こちらはWordPressというCMSを使ったネットショッピングをイメージしたサイトです。

WordPressは簡単にブログやサイトを構築できるのでコーディングスキルの証明にはならないと考えて、無料のテーマを使ってカスタマイズしました。

ポートフォリオへは下記を記載しました。

テーマというのはWebサイトのデザイン(テンプレート)です。

Xeory ExtensionはWeb集客(SEO)に特化したルーシーという会社が提供しているWordPressのテーマです。

バズ部というとご存じの方も多いかも？

Xeory Extensionは無料で誰でも使えるWordPressのテーマなのですが、シンプルすぎてそのままでは使うのは現実的ではなく、おそらくカスタマイズされることを前提に提供されているのだと思います。

» Xeory Extensionのテーマはこちら

ちなみにこのブログは同じバズ部のブログに特化したWordPressのテーマ『Xeory』をカスタマイズしたものです^^

ECサイトなので購入ボタンも用意しているのですが、こちらもLPのメール送信ボタン同様、実装はしていません。

購入ボタンは、BASEなどの支払いサイトと連携させる想定で作成したので、わざわざ自分で実装する必要はないと判断したからです。

そもそも、個人が購入を管理するシステムを作成するのは現実的ではない(顧客情報の管理責任が負えない)ので、実装は不要と判断しました。

ツイッター風SNS

私が一番力を入れたポートフォリオであり、一番苦労した作品です。

こちらはデータベースのCRUD処理を実装するスキルの証明のために作成したポートフォリオなので、サイトデザインに力入れず、見た目はシンプルです。

CRUDというのは、Create（作成する）、Read（読み込む）、Update（更新する）、Delete（削除する）というコンピュータソフトウェアが持つ永続性の基本的な４つの機能のことです。

記事の投稿、記事を読む、記事の更新、記事を削除するといったことができます。

このポートフォリオで記載したスキルは下記のとおりです。

フレームワークにLaravelを使っています。

Bootstrapはログイン・ログアウト機能の実装で利用しました。

サーバーにアップして公開する際にGitHubを利用したので、このツイッター風SNSについては転職活動ではポートフォリオだけでなく、ソースコードを公開しているGitHubのURLも紹介しました。

ポートフォリオに対する会社の反応

実際にこれらポートフォリオをひっさげて転職活動をしてみて、ポートフォリオに興味を示してくださった会社が多かったように思います。

面接時に、「このLPのボタンは実装しているの？ECサイトの購入ボタンは？」、「LPのデザインはどうやって考えたの？」「制作時間はどのくらい？」など質問いただきました。

一番反応が良かったポートフォリオが、3つ目に作成したツイッター風SNSでした。

「一見シンプルだけど、すごい作り込んでいるでしょ？すごいね。」と褒めてくださったときには、本当に苦労して作成したので評価していただいたことに嬉しかったです。

エンジニア未経験者が転職活動用ポートフォリオを作成する方法

上記は私が作成したポートフォリオを紹介している動画です。

もしかしたら、未経験でこれからエンジニアへ転職したい！と思っている方が、私のポートフォリオを見て、「こんなの作れない！」とドン引きしている方もいらっしゃるかもしれません。

でも大丈夫！

これから具体的にWebエンジニア未経験の私がポートフォリオを作成した過程をお伝えします。

ポートフォリオ作成に必要なもの

私がポートフォリオ作成で利用したものは

作成したポートフォリオを公開するには、サーバーが必要です。

私が作成したポートフォリオもWebで公開されていて、URLさえわかれば誰でも閲覧できます。

私がポートフォリオ公開に利用しているサーバーはXserverというレンタルサーバーです。

ポートフォリオだけでなく、このブログも同じXserverで公開しています。

Xserverだけで、ドメイン取得やWordPress構築も簡単にできるため、私が作成したECサイトのようなポートフォリオはすぐに作成して公開することができます。

Xserverのリンクはこちら　→ https://www.xdomain.ne.jp/

プランが3種類ありますが、未経験でこれからエンジニア転職を目指す方なら、まずスタンダードプランで問題ないです。

私はXserverを利用してもう１０年くらいになり、このブログ以外にも２つブログを持っていますが、ずーっとスタンダードプランで不便したことがありません。

ソースコードエディタは、私はポートフォリオ作成やプライベートでWebプログラミングの勉強をするときには、VSCode(Visual Studio Code)を利用しています。

誰でも無料で使えるエディタで、ターミナルが一体となっているため、別途コマンドプロンプトを起動させる必要がなく、効率よくプログラミングできるので愛用しています。

» VSCode公式サイトはこちら

私のポートフォリオでは、LPとツイッター風SNSの作成で利用しました。

ツイッター風SNSについて、Gitでのソース管理、GitHubへのアップロード、XserverへのアップロードもVSCodeのターミナルから行いました。

ECサイトはWordPressなので、別途エディタは必要なくて、Xserverさえあれば開発できました。

残りの３つ、開発環境、ソースコード管理、プラットフォームはLPやECサイトのポートフォリオでは一切利用していなくて、全てツイッター風SNSのポートフォリオ作成で利用したものです。

これらツールや環境があれば、私が作成したポートフォリオが作成できます。

ポートフォリオ作成に必要なエンジニアスキルの身につけ方

私の場合ですが、独学でWebプログラムの言語を習得しました。

というのも、元々システムエンジニア・プログラマーの経験があったので、エンジニアスキル習得の独学が可能だったからです。

とはいえ、同じエンジニアといえども、全然分野・ジャンルが違うので、膨大な時間と労力をかけましたが…(汗)

これまで一切エンジニア経験がなく、Webエンジニア転職を目指すという方で、膨大な時間と労力を費やする余裕があるという方なら独学でもいいと思います。

ただ、年齢が上がってくるにつれて未経験でのエンジニア転職は厳しいデス…。

４０歳で未経験でのWebエンジニアへの転職活動を経験した私が言うのだから、間違いありません…。

未経験だけど、本気でWebエンジニア転職を目指したい！という方は、プログラミングスクールの検討をおすすめします。

私も全くのエンジニア未経験の時代があったわけですが、私が全くの未経験からエンジニアスキルを身につけられたのは新卒で入社した会社の新卒研修で平日５日間(8時間)×2ヶ月間、ガッツリプログラミングを勉強したからです。

それでも未経験独学でのWebプログラミングスキルの習得には途中で多々ドン詰まることがあり、苦労しました…。

もしプログラミングスクール選びで悩んでいるなら、下記記事を参考にしてみてください。

元SEの理系女が社会人におすすめするプログラミングスクールはここ！

「独学できるならしたいけれど、独学できる自信がない。プログラミングスクールを検討しているけれど、会社を辞めずに勉強したい。社会人におすすめのプログラミングスクールがあれば教えて欲しい。」という方向け。 社会人におすすめな...

「エンジニア目線で、もし自分が未経験ならこのプログラミングスクールを選ぶな」という視点で選んでいます。

参考にしてみてください^^

ポートフォリオのアイディアはどうする？

開発環境を整えてプログラミングスキルを身に着けても、「一体どんなポートフォリオを作れば良いんだ？」という壁にぶち当たると思います。

私もぶち当たりました…。

最終的に３つのポートフォリオを作成した私ですが、一つずつどうやってポートフォリオのアイディアを出したのか経緯をお伝えします。

まずLPですが、実はコレ、私のアイディアではありません。

Webエンジニアとして副業へチャレンジしてみようと、とある会社の求人へ応募したときに、課題として出されたのが、あのLPだったりします。

「LP作成の課題なんてあるのかよ！？Σ(ﾟДﾟ)しかも難しいんだけど！！」と泣きじゃくりながら急いで、完成させた思い出があります…。

わからないけど誰にも聞ける人いないし、課題だから時間をかけるわけにも行かないし…と、かける時間に焦りながら自分で調べながら苦労して作成したLPです。

無事課題が評価され採用されたのですが、実際入ってみると求人内容とかけ離れていたためすぐ辞めてしまいました…。

エンジニアとしての経歴も残せず、結局残ったのはあのLPだけ…という状態でしたが、求人突破できるほどのスキルがあると判断されたLPなので、手を加えて転職活動時にポートフォリオとして利用することにしました。

２つ目のECサイトですが、実はポートフォリオ３つの中で一番最初に着手し完成させた作品です。

こちらは完全自分で考えて作成しました。

ネットショッピングは今後も衰退しあいだろうし、ECサイト作成のスキルもありますよと証明できると良いなという思いから出たアイディアです。

３つ目のツイッター風SNSは、独学でLaravelを勉強しながら思いついたアイディアです。

オンラインで勉強できるプログラミング動画サイトでLaravelを勉強していて、一通り終えた後に復習がてら自分でもう一度最初から構築しつつ、「もっとこうしてみようかな」と自分なりのアイディアを盛り込んで作成しました。

ポートフォリオを作成する上で、このアイディアが一番悩みどころだったかも…。

プログラミングスクールならプロのエンジニアにポートフォリオ作成の相談も乗ってくれるはず。

未経験で少しでも早くエンジニア転職を成功させたいという方は、プログラミングスクールでスキルを習得しつつポートフォリオを作成するというのが最短ルートだと思います。

まとめ

それでは今回の記事のまとめです。

私は元システムエンジニア・プログラマーという経歴はあるものの、ブランクは１５年以上もありました。

経歴はどうしようもない、年齢もどうしようもない、では今から自分の努力でなんとかなるものはなんだろうかと考えたときに、ポートフォリオの作成がありました。

ポートフォリオのおかげで転職活動開始から１ヶ月ほどで内定をいただけたと思います。

ちなみに高校生が将来なりたい職業の３位がシステムエンジニア・プログラマーなんだそうです。

» 高校生が将来一番就きたい職業　3位「プログラマー」、2位「教員」、1位は？（ITmedia ビジネスオンラインより）

エンジニア・プログラマーのスキルは一生モンです。

ブランク１５年以上でも未経験のWebプログラミングを独学で習得してポートフォリオを作成した私がいうので間違いなし！

また、下記のような記事を目にするたびに、独身アラフォーの私はエンジニア転職してよかったなと思います。

» 働くシニア世代の本音「生涯現役がいい」「年金だけでは足りない」 ドンキの早朝シフトで活躍する72歳、コンピューターで設計する80歳も（FNN プラインオンラインより）

エンジニア不足と言われていますが、今後もっとエンジニアは不足するという経済産業省の資料にも記載されています。

» 参考資料 （IT人材育成の状況等について） - 経済産業省

人生１００年時代と言われる今日、しかも年金はあてにできない…となると、生涯働き続ける必要があります。

歳を取ると仕事がなくなりがちですが、エンジニアは今後不足が見込まれているため、老後でも仕事に就ける可能性が高く、しかも技術職なのでベテランとして高齢でも現役バリバリで仕事できます。

私がWebエンジニアに転職した最大の理由は、スキルを身に着けて老後に備えるためだったりします。

エンジニアは４０歳未経験でも転職できるほど人材採用に力を入れていて、年金に頼らずとも生活できる一生モンのスキルなので、これからエンジニアを目指すという方はぜひ！頑張ってください！

私の経験が少しでもお役に立てましたら幸いです。

ではでは〜ノシ