フロントエンドエンジニアの転職におけるポートフォリオの必要性と作成のポイント

人材力とは、その人が持つ魅力そのもの。単純にスキルのみで測れるものではありません。制作物に対して、どんな考えを持っているのか、どんな姿勢で取り組んだのかなど、1つの作品を作り上げるプロセスにこそ、その人の人材力が発揮されます。

エンジニアの転職において、スキルが重要事項であることは間違いありませんが、それは実際に成果物としてできあがったWebサイトの仕上がりを見れば、ある程度の予測ができます。しかし、人材力については成果物を見ただけではわかりません。

制作におけるプロセスや、留意した点をポートフォリオで紹介することで、スキル以外の人材力をアピールすることができ、採用担当者にも評価してもらいやすくなるでしょう。

ポートフォリオの作成には実際の業務で発生するような技術的な制約やWebマーケティングの成果に基づいた要件がありません。つまり、自分の持っているスキルをフルに活用して、自由に制作ができるということです。

デザイン、インタラクション、情報設計、使用する言語やフレームワークに、自分のフロントエンド開発に対するこだわりを盛り込んで制作することで、ポートフォリオそのものがスキルの証明となり、採用担当者への強いアピールへと繋がります。

フロントエンド開発のスキル・成果は平面・静止画では表現しきれません。その真価は実物に触れてもらって初めて理解してもらえるもの。Webサイトとして見てもらえる、直に利用してもらえる状況を作ったほうが、スキルのアピールには適しているのです。

この「見せられる、触ってもらえる」というポートフォリオのメリットが最も効果を発揮するのが面接時。中途採用では多くの場合、即戦力が求められており、スキルやできることの有無に質問が集中します。そんなとき、言葉だけで「できます」「作れます」と答えるよりも、実物を見せ、触ってもらいながら本当に「できること」「作れること」を示したほうが効果的なのです。実物があったほうがコミュニケーションが活発になるという側面もあります。

ポートフォリオは自分のスキルを示すためのもの。実際の業務では定められた要件（言語、サーバー環境など）の中でフロントエンド開発を行うのが一般的ですが、ポートフォリオにはそのような制約はありません。自分のスキルを目一杯アピールできる環境で制作手法を検討するのがいいでしょう。

フロントエンドエンジニアの場合、HTML、CSSだけのシンプルなコーディングでは技術的に不十分な印象を与えてしまう可能性があるため、JavaScript、TypeScriptなどを用いて、アニメーションにしたり、動的に表示されたりするWebサイトを制作するのがいいでしょう。また、近年はReactやVue.jsを用いたコーディングも評価されやすい傾向にあります。

どのような内容のWebサイトにするかを決めます。といっても複雑な情報設計が必要なわけではありません。基本的に必要な情報は下記のとおりシンプルなものです。ワイヤーフレームやUIの作成は、「Figma」などの無料ツールを使用してもいいでしょう。

フロントエンドエンジニアの場合、主な評価の対象はコーディングのスキルなので、むやみにデザインに凝る必要はありません。デザインスキルに自信がないなら、デザインを別の人に依頼してもOK。そのデザインをいかに再現できるかが重要です。

フロントエンドエンジニアのポートフォリオ作成のメインイベントはもちろんコーディング作業。自分の持っている最大限のスキルを使ってコーディングをします。

ポイントはいかに美しいコードを書くか。構文に誤りがない、エラーがないことは大前提として、運用性やコードのシンプルさ、わかりやすさを特に意識することをおすすめします。実際のフロントエンド開発業務は複数のエンジニアがかかわることがほとんど。複雑で自分勝手な記述しかできない人は共同作業に支障をきたしてしまうからです。

また、デザインにもいえることですが、ユーザビリティへの配慮も重要です。スキルをアピールしようとむやみにアニメーションを駆使したり、インタラクションを活用しすぎたりすると、動作が遅くなり、使いづらい、わかりづらいWebサイトになってしまいます。コーディングの際は、「誰かに見て、使ってもらうもの」という観点を常に持ち続けましょう。