なぜフロントエンドエンジニアにポートフォリオが必要なのか？

フロントエンドエンジニアの面接に当たってはポートフォリオの作成が必須ですが、それにはいくつかの理由があります。企業は選考に当たってポートフォリオの提出を求めることが一般的なので、納得の上で作成に臨みましょう。ここでは、ポートフォリオが求められる理由を2つに分けて解説します。

スキルレベル・スキルセットや学習成果の客観的な証明手段

フロントエンドエンジニアの主な仕事は、WebサイトやWebアプリケーションの表示・操作に関する部分の実装（コーディング）です。しかし、転職活動で提出する履歴書や口頭による説明では成果物が見えないため、採用担当者にスキルレベル・スキルセットははっきりと伝わりません。

特に職種未経験であれば実務経験もアピールできず、学習の達成度も伝わりにくく、自己アピールの手段が必要です。ポートフォリオに成果物や実績をまとめることで、スキルレベル・スキルセットや学習成果が可視化できます。未経験者の場合、学習内容を反映した成果物が実績なので、「成果物＝実績」と考えましょう。

コロナ禍の影響で未経験者は転職に不利なため

採用担当者は通常、職種未経験者に高いスキルを求めていません。採用時には職種適性や離職リスクといった最低限の適性を判断し、入社後の成長に期待するのが一般的です。

しかしコロナ禍の影響を受けて、未経験者教育の余裕がある企業は減少しており、未経験者採用は鈍化しています。一方で、即戦力採用は依然として活況です。一定のスキルレベル以上の人材、教育コストをかけずに実務に対応できる人材を求めている企業が多いと考えられるでしょう。

さらに、経験豊富なフリーランスから正社員に戻るITエンジニアも増えている状況です。未経験者にとっては転職がやや厳しい状況となっており、学習達成度や実力をアピールできるもの、つまりポートフォリオの必要性が増しています。

そもそもポートフォリオって何？

ポートフォリオには決まった様式がなく、職種によってよく使われるメディアは異なります。フロントエンドエンジニアにとって必須なのは、Webサイトによるポートフォリオです。印刷物としてのポートフォリオも使われるケースがあり、プログラムコードの公開も実績・実力のアピールに有効です。

必須のポートフォリオサイト

ポートフォリオは就職・転職活動や自己アピールのために、成果物や実績をまとめた資料です。フロントエンドエンジニアが活用するポートフォリオには、主に「ポートフォリオサイト」と「紙ポートフォリオ」の2種類があります。 

ポートフォリオサイトは自己アピール用のWebサイトです。成果物や実績が一覧できるWebサイトを構築しますが、フロントエンドエンジニアが制作するポートフォリオサイトはそのままひとつの成果物にもなります。 

ポートフォリオサイトによる選考を必須とする企業も多く、未経験者・経験者問わずフロントエンドエンジニアの転職には不可欠です。

あると便利な紙ポートフォリオ

印刷物としてファイルにまとめたポートフォリオが紙ポートフォリオです。フロントエンドエンジニアの成果物はPCやスマホからアクセスできるものなので、紙ポートフォリオは必要ないと考えるかもしれません。

現在はポートフォリオサイトが主流ですが、企業によっては書類選考時に紙ポートフォリオの提出を求めるケースがあります。

また、面接会場にPCやインターネットアクセス環境があるとは限りません。あったとしても面接担当者のITリテラシーは予測できず、ポートフォリオサイトを有効活用できないケースも考えられるでしょう。

紙ポートフォリオがあれば、ファイルを開くだけで実績を伝えられるので、面接会場がどのような環境でも自己アピールできます。複数の成果物を比較する際にも、ポートフォリオサイト・紙ポートフォリオを見比べられて便利です。

GitHubはポートフォリオの一部

「GitHub」はプログラムコードをインターネット上で共有・公開できるプラットフォームです。オープンソースソフトウェアの開発プロジェクトで威力を発揮するサービスですが、プログラマーの履歴書としても重宝されます。

プログラマー志望であればGitHubアカウントを提示すれば履歴書提出が不要な企業もあるほどで、プログラミングに従事するITエンジニアにとっては必須ツールです。

フロントエンドエンジニアであってもプログラミングのスキル・実績を容易に判断できるため、書類選考の段階で「GitHubアカウントを送ってほしい」と求められることはよくあります。制作したWebサイトやWebアプリケーションはGitHubで公開しましょう。

フロントエンドエンジニアがポートフォリオで証明したいスキル

ポートフォリオからはスキルレベルやスキルセット、制作者の意識といったさまざまな情報が読み取れます。フロントエンドエンジニアがポートフォリオで証明したいスキルは、コーディングスキルだけではありません。ここでは、技術面のスキルを6つに分け、それぞれの内容や必要性を解説します。

【必須】HTML・CSS・JavaScriptによるコーディングスキル

Webサイトはマークアップ言語の「HTML」とスタイルシート言語の「CSS」によって、文書の構造やスタイルを定義します。それぞれの言語は改訂が続いており、最新版は「HTML5」と「CSS3」です。

HTML・CSSによるマークアップスキルは基礎中の基礎なので、初心者なら少なくともHTML5・CSS3のスキル証明は必須と考えましょう。

HTML・CSSによるコーディング（マークアップ）を専門とする職種を「マークアップエンジニア」と呼びますが、フロントエンドエンジニアには「JavaScript」によるコーディングスキルも求められます。

JavaScriptは動的コンテンツを作成できるスクリプト言語で、Webコンテンツの表示・操作に関する機能を実装するなら不可欠です。HTML・CSSだけでなくJavaScriptのスキルも分かるポートフォリオサイトを制作しましょう。

【超重要】レスポンシブWebデザインの理解と適用

インターネットユーザーはスマホからWebサイト・Webサービスにアクセスすることが一般化しており、どのデバイスでも適切に内容を表示できるデザイン手法、つまり「レスポンシブWebデザイン」の重要性が増している状況です。

また、この状況下でGoogle検索は「モバイルファーストインデックス」への移行を進めており、デスクトップ版にしか対応していないWebサイトは将来的に検索結果から除外されます。企業からすれば検索結果に表示されないWebサイトはほぼ無価値なので、SEO対策という意味でスマホ版Webサイトを制作できるスキルは必須です。

ただし、デスクトップ表示に最適化されたWebサイト制作も引き続き重要なので、レスポンシブWebデザインによるモバイルフレンドリーなWebサイト構築を心がけましょう。

CSSでスタイルを定義することで、PC・タブレット・スマホのそれぞれで表示する内容を統一しつつ、クライアントの画面サイズによって適用するスタイルを自動変換できます。

【あると高評価】バックエンド言語のスキル

フロントエンドエンジニアは基本的にクライアントサイドの実装を担当しますが、サーバーが関わる「バックエンド開発」も担当するケースがあります。

例えば、ユーザー認証（ログイン）機能を実装する場合、サーバー内のデータベースに保存されたアカウント情報へのアクセスが必要です。こういった基本的な機能は「バックエンドエンジニア」ではなくフロントエンドエンジニアの仕事となるケースがあります。

よく使われるバックエンド言語は「PHP」です。PHPはバックエンド言語として世界約80%のシェアを誇るほどで、Web系開発プロジェクトでは必須言語となっています。PHPはHTMLファイル内にサーバー側の処理を記述できるので、フロントエンドエンジニアの仕事と親和性が高い言語です。

【実践的】フレームワークが扱える

Webサイト・Webアプリケーションはゼロからでもコーディングできますが、開発現場ではプログラミング言語の「フレームワーク」を使うことが一般的です。フレームワークは一般的な機能や定型コードをライブラリとしてまとめたもので、活用すると開発期間を大幅に短縮できます。

よく使われるフレームワークの例は、JavaScriptの「Vue.js」やPHPの「Laravel」です。実践的なスキルの証明という意味で、フレームワークを活用した成果物も用意できるとよいでしょう。

ただし、フレームワークを使うとコーディングスキルが不十分でもそれなりのWebサイトが構築できてしまいます。コーディングスキルの証明として、ゼロからコーディングしたWebサイトもポートフォリオに含めるのがおすすめです。

【高需要】UI/UX設計のスキル

Webサイトの表示方法や操作方法を「UI（ユーザーインターフェース）」、使いやすさや使い勝手を「ユーザビリティ」、コンテンツ利用の始まりから終わりまでにユーザーがする体験や惹起される感情の総体を「UX（ユーザーエクスペリエンス）」と呼びます。これらを総合的に設計するのが「UI/UX設計」です。

Webサイトにはリンク構造があり、ボタンの配置や見やすさ、求める情報への行き着きやすさはWebサイトによって異なります。

見た目が良くても製品の購入やサービスの利用につながらないWebサイトには、商業的な意味がありません。「企業にとって価値の高いWebサイト」を構築するためのスキルとして、UI/UX設計スキルの高いフロントエンドエンジニアは重宝されます。

【あるとなお良い】デザインスキル

フロントエンドエンジニアにデザインスキルは強く求められません。基本的に、サイトデザインや画像要素の制作はWebデザイナーの仕事です。

Webデザイナーによるデザインをベースに、各種言語でコンテンツを実装するのがフロントエンドエンジニアの役割と考えましょう。プロジェクトによってはフロントエンドエンジニアがサイトデザインに関わるケースもありますが、メインはコーディングです。

ただし、ポートフォリオの作成においては見やすく分かりやすいWebサイトを設計するので、ある程度のデザインスキルを要します。

ポートフォリオサイト作成の流れとポイント

ポートフォリオサイトは未経験者にとっては学習達成度、経験者にとっては実績の証明手段です。作成目的や掲載コンテンツを整理して、「採用担当者に伝わる」ポートフォリオサイトの作成を目指しましょう。転職までのプラン立案からポートフォリオサイトを公開するまでの流れと、それぞれのプロセスのポイントを解説します。

1.転職までのプランを立てる

携わりたいのがWebサイト制作なのかWebアプリケーション開発なのかで、ポートフォリオに含めるべき実績や学習内容の方向性は異なります。

学習（インプット）・成果物作成（アウトプット）やポートフォリオ作成、転職活動にはある程度の期間が必要です。まずはどのようなフロントエンドエンジニアになりたいかを決め、自身に足りないスキルを分析し、どのような技術を習得するかを決めます。

大まかに「インプット・アウトプットに○か月、ポートフォリオの作成に○か月・転職活動に○か月」といった具体的なプランを立てましょう。

2.ポートフォリオサイトに載せるコンテンツを決定する

インプット・アウトプットがある程度進行し、ポートフォリオサイト作成に十分なスキル・実績があると実感できたら、掲載するコンテンツ整理します。

名前・年齢・経歴・スキル・実績は必須です。成果物のプログラムコードが一覧できるGitHubアカウントも掲載しましょう。

実績に関しては、成果物それぞれに成果物の画像とURL・作成した目的・作成にかかった時間・使った技術や言語を記載します。ここでレスポンシブWebデザインやUI/UX設計といったキーワードを含めたいところです。

面接時には成果物に関しての質問を受けることも多く、難しかった点や解決方法を言語化できる準備もしておきましょう。

3.ポートフォリオサイトのデザインや構造を決定する

掲載コンテンツを決定したら、いきなりコーディングを始めるのではなく、まずは大まかなサイトデザインやリンク構造を書き出すことが大切です。ここでどのようなデザイン・構造にするかでUI/UX設計の資質が問われます。

基本的に、フロントエンドエンジニアには高度なデザインスキルは求められていません。クオリティを求めることも大切ですが、見た目にこだわり過ぎないことが大切です。

ポートフォリオサイトは「採用担当者にスキルや適性を精査してもらえること」が主目的なので、ユーザー（採用担当者）の立場になって、見やすさやページ遷移のしやすさを重視しましょう。各ページのデザインに統一感があることもポイントです。

4.作成に使用する技術の決定とコーディング

サイトデザインやリンク構造を決定したら、ポートフォリオサイト作成に使用する技術を決定し、実際にコーディングします。ポートフォリオサイトに使われている技術からもスキルレベルは判断されるので、学習の集大成と考えましょう。

フロントエンドエンジニアにとってHTML5・CSS3のスキルは必須なので、複数ページのスタイル制御ができることをアピール・証明します。モバイルフレンドリーなサイト構築ができているかどうかは、レスポンシブWebデザインについての理解・素質の判断基準になるので要注意です。

CSSアニメーションやJavaScriptによる動的コンテンツを取り入れるのかも検討しましょう。問い合わせフォームを設置してPHPの基礎スキルを証明するのも有効です。

HTMLファイルは簡単にソースコードを確認できます。使われている技術やコーディング方法はソースコードと見比べてチェックされるので、読みやすく無駄のないコーディングを心がけましょう。

5.完成したポートフォリオサイトをホスティングする

ポートフォリオサイトは「ホスティング」することでインターネット上に公開されます。ホスティングはレンタルサーバーにWebサイトをアップロードすることです。

ドメイン取得とレンタルサーバーの取得を済ませ、ポートフォリオサイトをアップロードします。アップロードが完了したら、PC・スマホ両方で適切に表示されるかどうかをチェックしましょう。問題なければポートフォリオサイトを出力して、紙ポートフォリオも用意しておくと便利です。

ポートフォリオサイトのNG例と注意点

ポートフォリオサイトは「制作者を見せるためのWebサイト」です。不具合があったり手抜き感が出ていたりしていると、せっかくのポートフォリオサイトもマイナス評価の対象になってしまいます。ただし、こだわり過ぎると転職活動が始められないので、クオリティと制作時間のバランスも大切です。ここからは、ポートフォリオサイトのNG例と注意点を2点ずつ解説します。

【NG例】スマホに対応していない

ポートフォリオサイトは基本的にPCで制作しますが、デスクトップ表示で納得できる仕上がりになったとしても、スマホでレイアウトが崩れるならNGです。

モバイルフレンドリーなポートフォリオサイトでなければ、レスポンシブWebデザインの意識が低いとみられてしまいます。完成したポートフォリオサイトはPC・スマホ両方でチェックし、スマホでも読みやすく使いやすいことを重視しましょう。

【NG例】ページ表示速度が遅い

ページ表示速度の遅いWebサイトはユーザーにとって使いにくいだけでなく、Google検索エンジンからの評価も低いのでNGです。

また、画像を多用する際は注意を要します。画像サイズは控えめにし、画像の数もなるべく抑えましょう。無駄なコードが多いのも速度に悪影響を及ぼすので要注意です。

技術を表現しようとし過ぎると動作は重くなりがちで、独りよがりな開発をする人物とみられる恐れもあります。こだわりの技術は掲載する成果物で表現できるので、スムーズに表示できる軽量なポートフォリオサイトを目指しましょう。

【注意点】無料のデザインテンプレートは極力使わない

インターネット上には無料のデザインテンプレートが無数に公開されています。サイトデザインはWebデザイナーの仕事と割り切り、デザインテンプレートを利用すると考える人も多いでしょう。

しかし、ポートフォリオサイトはそれ自体が成果物でもあります。採用担当者からすれば、明らかにデザインテンプレートを利用したと思われるポートフォリオサイトを見ると、制作者の学習達成度や意欲に疑問を覚えるでしょう。画像要素をゼロから作る必要はありませんが、技術で表現できる部分は自力で構築することが大切です。

【注意点】ポートフォリオサイトのハードルを上げ過ぎない

ポートフォリオサイトの作成例を検索すると、プロのWebデザイナーが制作したハイレベルなWebサイトもヒットします。「これが作りたい」と思うかもしれませんが、理想的なデザインを目指すと実現までに時間がかかり過ぎることは注意点です。

また、フロントエンドエンジニアはWebデザイナーではないので、デザインスキルよりもコーディングスキルの証明を要します。比較的短期間で実現可能なプランを立て、転職に必要なスキルが身に付くまで学習し、学習成果を成果物として分かりやすく表現することが大切です。

ポートフォリオサイトは作品よりも制作者を見せるためのものなので、あくまで「現在の学習達成度や伸び代」を表現する意識を持ちましょう。

いざ転職活動！ポートフォリオサイトへの質問は必ずあると思うべし

面接においては転職理由や志望動機、キャリアプランや強み・弱みの他、ポートフォリオサイトについての質問がまず間違いなくあります。回答に詰まるとマイナス評価となるため、スムーズに答えられるように言語化の準備をしておきましょう。主な質問内容と回答のポイントを解説します。

このサイトのコンセプトは？

ポートフォリオサイトや成果物のWebサイトについて、コンセプトや思考の過程を質問されることがよくあります。「どのような背景があり、なぜこのポートフォリオサイト・成果物を作ったのか」という、分析力や構想力の基礎が問われる質問です。Webサイトの制作プロジェクトには集客・コンバージョン（成約）といった目的があるので、ビジネスを意識した回答が好まれます。

定期的にデザイン・技術のトレンドをチェックしていることや、参考にしたWebサイト、Webサイトの目的や目的達成のために追加した機能など、できるだけ細かく答えられるようにしましょう。

どれくらいの期間で作成し、使用した技術は？

制作にかかった期間や使用した技術、技術をどのように習得したかもよく質問されます。「現在のスキルレベルやスキルセットはどれくらいの水準か、どのような学習姿勢か」という、実務に対応できる人材かどうかや教育コストの判断基準になる質問です。

制作プロジェクトには納期があり、教育にかけられるコストには限りがあります。「これくらいの制作期間があればここまでの実装ができる」「書籍に当たるだけでここまでのスキルを習得できる」といった、実力や将来性がイメージしやすい回答を考えましょう。

こだわった部分やその機能をつけた理由は？

制作に当たって力を入れた部分や、気を遣った点についてもよく質問されます。「どのような実装に向いている人材か、どこまでの業務が任せられるか」という、開発現場とのマッチングを検討するための質問です。

レスポンシブWebデザインやUI/UX設計の観点から答えられるとプラス評価を受けられるでしょう。エラーがなく軽量であることや、JavaScript・PHPによる実装のこだわりも高評価を受けやすいポイントです。

フロントエンドエンジニアとして活躍するならジャパニアス！

ジャパニアスはAI・IoT・クラウドをはじめとした先端テクノロジー事業を営んでおり、ハードウェア・ソフトウェア・インフラも含めて日本のエンジニアリング業界を支え続けています。現在はAI関連事業を中心に展開しており、1999年12月の創業以来黒字成長中です。

Web系システム開発も手がけているので、フロントエンドエンジニアはさまざまなプロジェクトで活躍できます。全国各地に拠点があり、希望の勤務地で就業できることも強みです。フロントエンドエンジニアとしての転職・キャリアアップをお求めなら、ジャパニアスの中途採用枠にご応募ください。

まとめ

フロントエンドエンジニアの転職に当たっては、未経験者・経験者問わずポートフォリオサイトの制作が必須です。ポートフォリオサイトからは現段階の学習達成度が読み取れ、スキルレベル・スキルセットや教育コスト、プロジェクトとの適性も精査されます。企業のニーズも加味して成果物もしっかりと作り込み、質問に答えられる準備をしましょう。

ジャパニアスは全国16拠点で随時フロントエンドエンジニアを募集しています。希望の勤務地でレベルに合ったプロジェクトへのアサインが可能です。フロントエンドエンジニアへの転職をお求めなら、ジャパニアスの中途採用枠にご応募ください。