COLUMN 2019.10.01

就職や転職、ブランディングで活用！フロントエンドエンジニアのポートフォリオ

ポートフォリオというと、Webデザイナーが就職・転職活動に向けて、あるいは個人で仕事を請け負うためにつくるものというイメージがあります。では、デザイナーではなく、フロントエンドエンジニアにはポートフォリオは必要なのでしょうか。フロントエンドエンジニアのポートフォリオ作成について見ていきましょう。

フロントエンドエンジニアの就職活動にポートフォリオは必要なのか

「ポートフォリオはデザイナーのもの」と考えるエンジニアは多いかもしれません。Webサイト制作で、フロントエンド側全般の開発を支えるフロントエンドエンジニアの場合はどうすればよいでしょうか。

デザイナーではポートフォリオは必須。エンジニアにも必要？

履歴書や職務経歴書だけではその人の能力が非常に見えにくいWebデザイナーにとっては、就職・転職活動の際にポートフォリオは必須とも言え、採用する側もほとんどがポートフォリオの提出を求めます。

Webサイトのデザインではなく、HTML/CSS/JavaScriptでのコーディングが作業の中心となるフロントエンドエンジニアの場合はどうでしょう。履歴書、職務経歴書に加えて、自分の書いたコードがGitにあればそれで十分では？と考える方もいるかもしれません。しかし、フロントエンドエンジニアにとっても、ポートフォリオがあることは非常に有効です。

Gitのソースを見ればそのエンジニアのよく使う言語や、ある程度のコードの品質は見えてきますが、それでどの程度のものが作れたのかはよくわかりません。また、コード以外にプロジェクトを進める過程で作成するドキュメントなどもGitでは分かりません。

ポートフォリオがあれば、コードを含め、自分の今までの成果の中で、どの部分に強みがあるのかといったことを強調して伝えることができます。また、ポートフォリオという一つの成果物を一人で完成まで持っていく力があるということも採用担当者に伝わります。

フロントエンドエンジニア未経験からの就職活動にはポートフォリオが特に有効！

フロントエンドエンジニアとしての経験がない状態からの就職活動にも、ポートフォリオは非常に役立ちます。

未経験の場合、スキルシートには対象技術を学習したことを書くしかありませんが、スキルシートだけでは学習した結果、本人がどのレベルまで到達しているかが見えません。ポートフォリオがあれば、応募者が現在のどのレベルにあるのか、学習することによりどの程度力を伸ばせるのかといった伸びしろを採用担当者に伝えることができます。

学習の成果と現在のレベルを伝えることが目的ですから、ポートフォリオのテンプレートサイトをつかって美麗なものを作るのではなく、現在の自分の技術を総合的に伝えられるサイトにすることが大切です。

フロントエンドエンジニアのポートフォリオに盛り込むべき内容

フロントエンドエンジニアのポートフォリオは、自分がどれだけ「使える」エンジニアであるかを採用側にアピールするもので、Webデザイナーのポートフォリオとは重点を置くところが違います。フロントエンドエンジニアのポートフォリオに盛り込むべき内容を見ていきます。

自己紹介

自己紹介は必須ですが、履歴書に書く内容をポートフォリオサイトに載せる必要はありません。また、長々と自分の人となりについての自己紹介文を書いても採用側は読む気がしませんので気をつけましょう。

盛り込むべき内容としては、

・名前
・年齢
・使用できる言語
・使用できるフレームワーク／ライブラリ
・扱えるOS
・扱える開発環境（バージョン管理システムやテストツールなど）

があります。それぞれの習熟度も含め、見やすく整理して記載しましょう。

実績の紹介

エンジニアとしての実績の紹介はポートフォリオの中核を形成します。自己のキャリアにおいて、さまざまなプロジェクトに関わってきたとしても、経験した仕事を単に時系列に並べるのではなく、自分の最もアピールしたい仕事が最初に採用担当の目にとまるような構成にしましょう。最も責任あるポジションだったもの、最も困難だったが無事に問題解決できたもの、最も大規模だったものなど、自分の最も「見せたい」プロジェクトを売り込みましょう。

各プロジェクトごとには、

・プロジェクト名
・プロジェクト概要
・制作時期／期間
・使用言語／フレームワーク（ライブラリ）／開発環境・ツール
・自分の担当ポジション

を記載します。

言うまでもないことですが、担当プロジェクトについて、特に許可を得ているものでない限り、顧客が特定できないようにするなど、情報の公開可能範囲には厳重に気を配る必要があります。

これに加えて、個人的なGitやQiita、技術ブログなどでのアウトプットがあれば、リンクを張っておきます。

転職活動用のポートフォリオであれば、サイトを作成してからも実績は追加されていくはずですので、情報は随時アップデートしておくようにしましょう。

フロントエンドエンジニアのポートフォリオ作成時に注意する点

ポートフォリオ作成にはエンジニアとして、あるいはビジネスパーソンとして、注意を払うべき点もあります。

読み手のことを考え、情報の引き出しやすい構成に

ポートフォリオは自分の技術を売り込むものですが、伝えたい思いばかりが先行して、見にくいサイトになってしまっては、採用担当者の読む気を失わせます。ターゲットである採用担当者が見たいと思う情報をスムーズに引き出せるような構成にすることが必要です。

具体的には、それぞれの情報に到達するまでのアクションはできるだけ少なくなるようにします。また、構成が複雑すぎては、せっかく盛り込んだ情報まで採用担当者が辿りかないこともあるため、全体の構造は凝り過ぎず、わかりやすいスタンダードな構成とします。

コーディングテクニックに長けたエンジニアであれば、ポートフォリオに凝った仕組みを設けたくなるかもしれませんが、そのためにページの動作が重くなってしまってもいけません。スペックの高くないPC／スマートフォンのブラウザでもスムーズに閲覧できるサイト作りを心がけましょう。

レイアウト崩れやリンク切れ、スクリプトエラーなどは厳禁

面接時の服装のマナーや履歴書の書き方のマナーと同じように、ポートフォリオでも見る人（採用担当者）に対するマナーは存在します。

Webデザイナーでは当然気を付けることではありますが、エンジニアと言えど、フォントサイズと行幅、行間などのタイポグラフィや配色が常識的な範囲で見づらくならないようなデザインになるよう気を付けます。また、ページ表示時のスクリプトエラーや、サイト中のリンク切れがあると見る側の印象が非常に悪くなるため、できればエラーチェックツールも併用してのチェックもしておきましょう。

レイアウトが崩れてしまうページがないかどうかは、できれば複数ブラウザで確認します。スマートフォン対応でレスポンシブデザインとしている場合は、画面サイズ切り替え時のレイアウト崩れにも注意が必要です。

そして、誤字脱字、変換間違い、稚拙な日本語表現が残っていることのないようにします。

多少面倒でもサイトのSSL対応は必須

近年、Webサイト全体でSSL対応が急速に進んでおり、非対応サイトを表示する際に厳しく表示の出るブラウザも増えています。ポートフォリオサイトがSSL非対応だと、この流れに無頓着であるとの印象を与えてしまいます。サイトのhttps化は証明書取得などが面倒ではありますが、Let’s Encryptといった無料証明書もありますので、きちんと対応しておきましょう。