フロントエンドエンジニアにポートフォリオはなぜ必要か
フロントエンドエンジニアにポートフォリオが必要な理由は次の3つです。
フロントエンドエンジニアを含むエンジニアは転職時にスキルを証明する必要があります。そしてポートフォリオはスキルを証明するために重要です。未経験でポートフォリオの用意が難しそうな場合、まず「未経験からの転職では特に重要」の章をご覧ください。
フロントエンドエンジニアについて知りたい人は以下の記事を参考にしてください。
関連記事：フロントエンドエンジニアとは？仕事内容や年収、必要なスキルも解説
スキルを目に見える形でアピールするため
ポートフォリオは、職務経歴書に記載できない成果物やスキルを見えるようにするために必要です。具体的には、ソースコードを公開することや、ポートフォリオとして作成するWebサイト自体がポートフォリオになります。ポートフォリオを作成することでスキルが伝わりやすく、書類選考を通過できる確率が高まるでしょう。
たとえばスキルシートにJavaScriptと記載しているよりも、実際にJavaScriptのコードを記載して公開したり、サイトを公開した方が説得力は増します。そのため、書類選考の通過確率が高まるということです。
スキル以外の部分を伝えるため
ポートフォリオはスキル証明に役立ちますが、スキル以外の部分を伝えるのにも役立ちます。
たとえばデザインセンスなども伝わりやすいです。フロントエンドエンジニアはWebサービスの中でもユーザーの目に直接触れる部分を担当するので、デザインセンスやユーザビリティに対する考え方なども重要になります。
ポートフォリオを提出すれば、スキルシートなどに記載した文字だけでは伝わらない部分も伝わります。言い換えれば、デザインセンスやユーザビリティへの配慮など職務経歴書、スキルシートなどに記載できない部分からも自分の魅力を伝えられます。
未経験からの転職では特に重要
未経験からの転職の場合、ポートフォリオの作成は特に重要です。未経験者は過去に企業、プロジェクトに在籍して開発した実績がないからです。たとえば資料に勉強して習得したスキルを記載しても、ポートフォリオがないとスキル証明ができません。
未経験者にとってポートフォリオの作成は重要で、ポートフォリオ作成のためのスキルが不足している場合は先にスキル習得が必要です。具体的にどの程度のスキルを習得すべきかはケースバイケースです。
未経験可の求人に応募する場合は、基本テキストに記載されているサンプルシステムよりは少し難しい程度のレベルと考えてください。
ポートフォリオ作成も含めて未経験からフロントエンドエンジニアになる流れを詳しく知りたい人は、以下を参考にしてください。
関連記事：未経験からフロントエンドエンジニアになるには？求人例も紹介
ポートフォリオに含めておくべき情報
ポートフォリオに含めておくべき情報として以下が挙げられます。
これらの内容をWebページなどにまとめ、コードはgithubに公開するような方法が一般的です。フロントエンドエンジニアの場合は特にポートフォリオを掲載するWebページ自体が一つの作品になるので、デザインやユーザビリティでアピールしていく意識が重要です。
プロフィール
プロフィールには、名前（ニックネーム可）、年齢（非公開でもOK）、SNSアカウント、大まかな経歴、職業、趣味などを記載するのが一般的です。プロフィールは、取り組んでいることや人となりなどを知ってもらうことが目的です。
職務経歴
職務経歴には、在籍企業やプロジェクトの情報を記載します。在籍した時期やプロジェクトの概要を記載することはもちろん、可能であればプロジェクトメンバーの数、予算、工数などの細かい数字も記載した方が良いです。
細かい情報を記載することで採用担当者がイメージしやすくなり、また信憑性アップにもつながります。現状把握できていない情報があれば、事前に確認しておいてください。
たとえば以下のような書き方です。
| プロジェクトの概要・役割 | アパレルの販売サイト構築に フロントエンドエンジニアとして参画 |
| 期間 | 2022年4月～2022年8月の2か月間 |
| プロジェクトメンバー | 3名 |
| 費用 | 300万円程度 |
| 業務の特徴 | 少人数だったこともあり、要件定義からテストまで 1人1人が対応する業務範囲が広かったです |
関連記事：SE（システムエンジニア）の職務経歴書サンプルと書き方を解説！
これまでの実績
これまでの実績では、プロジェクト、もしくは個人で作成した成果物の情報を記載します。成果物のURL、名称、スクリーンショット、githubのURLなどを掲載するのが一般的です。またこれらの情報にくわえて、成果物の概要や力を入れたポイントなどを簡潔に記載しておくとより良いです。ただし個人情報になるような記載はしないようにしてください。
採用担当者は複数の応募者の資料を見なければならず、一人一人のリサーチにあまり時間をかけられない場合もあります。限られた時間で自分の実績を知ってもらうためには、要点を記載して伝わりやすくアピールしておくのが効果的です。
たとえば、「サイトを開いた際にキャラクターが動いて目を引くデザイン仕様になっていますが、情報を早く見たいユーザーが離脱しないようすぐに操作できるようにしています。」などです。
具体的なスキル
具体的なスキルには、プログラミング言語、ツール、データベース、開発環境、経験年数、概要などの情報を記載します。たとえば以下のような書き方です。
| 言語 | JavaScript |
| フレームワーク | React |
| 経験年数 | 8年 |
| 概要 | 社内ポータルサイトの構築 |
またスキルを記載するだけでなく、ポートフォリオを公開するWebサイトでスキルをアピールすることもできます。たとえば、扱えるプログラミング言語のアイコンをページを開いたときに立体的に浮き出る仕様にするなどです。
ポートフォリオでアピールすべきスキル
フロントエンドエンジニアがポートフォリオでアピールすべきスキルとしては以下が挙げられます。
上記の内容を意識してポートフォリオ、もしくはポートフォリオを紹介するためのWebページ作りに取り組んでください。
関連記事：フロントエンドエンジニアに必要なスキル！勉強法も一挙紹介
HTML/CSS/JavaScript
HTML/CSS/JavaScriptは、フロントエンドエンジニアにとって基本となるスキルセットです。簡単にまとめると、HTMLでテキストやボタンなどのパーツを作り、CSSでパーツのデザインや配置を指定し、JavaScriptでパーツを動かしたりWebページ自体の動作を設定します。
フロントエンドエンジニアは自分でコードを書いてポートフォリオページを作るのがおすすめです。ポートフォリオページのようなWebページは、フロントエンドエンジニアが業務で作成するものです。そのため、自分でコードを書くことで業務に直結するスキルのアピールにつながります。
ポートフォリオを記載するWebページもHTML/CSS/JavaScriptで記載することになるので、どのようなページにするかでも評価が変わってくるでしょう。ツールを使用すればノーコードでポートフォリオページを作ることも可能なのですが、
フロントエンドで使用される言語について詳しく知りたい人は以下を参考にしてください。
関連記事：
HTMLとは？CSSとの違いや代表的なタグなどをわかりやすく解説
JavaScriptとは？基本の書き方を初心者にわかりやすく解説
レスポンシブWebデザイン
レスポンシブWebデザインとは、Webページを表示するデバイスに合わせて適切に画面表示するデザインのことです。最近は多くのWebサイトがレスポンシブになっているので、基本的なスキルをきちんと押さえていることをアピールしてください。
ポートフォリオの記載ページをレスポンシブWebデザインにしておくことはもちろん、githubなどに記載するコードもレスポンシブWebデザインに対応した方が良いです。採用官のチェック項目にレスポンシブデザインになっているかどうかが入っている場合があり、そうでなくてもチェックされやすいポイントだからです。
バックエンドのプログラミングスキル
バックエンドのプログラミングスキルがあると、フロントエンドエンジニアとしての評価アップにつながります。ツールの利便性アップやサーバーのクラウド化が進んだことで、フロントエンドもバックエンドも開発のハードルが下がっています。
開発のハードルが下がると一人のエンジニアが担当する業務の幅が広がり、結果的にフルスタックエンジニアの需要が高まっています。フロントエンドエンジニアがバックエンドのスキルも習得すればフルスタックエンジニアに近づくので、市場価値が高まるでしょう。
フリーランスとして独立した後に幅広い案件に参画することや、一人でWebアプリケーション全体の開発ができることにもつながるので、その点でもフロントエンドエンジニアがバックエンドのスキル習得に取り組むのはおすすめです。
バックエンドの仕事内容やスキル習得のための方法について詳しくは以下を参考にしてください。サーバーサイドとバックエンドは同じ意味です。
関連記事：サーバーサイドエンジニアとは？仕事内容や資格、勉強方法などを紹介
フレームワークの使用
フロントエンドエンジニアにとってツールを使いこなすことも重要なスキルです。フロントエンドは特にツールによってコードの自動生成等が行いやすく、他のエンジニアよりもツールの使い方による差が出やすいでしょう。
そしてツールの中でも特に重要なものとしてフレームワークが挙げられます。フレームワークとは開発の土台になるツール（Vue.js、Reactなど）のことで、たとえばフレームワークの機能を呼び出すことでゼロからプログラミングする必要がなくなります。
コードを書くスキルが同程度でもフレームワークのスキルによって開発効率が大幅に変わってくるので、ポートフォリオでスキルアピールしてください。
UI/UX設計
UI/UX設計とは、ユーザーがWebページを使いやすくするための設計のことです。UIはユーザーインターフェースの、UXはユーザーエクスペリエンスの略です。UI/UX設計の考え方は、ユーザーが操作するボタンやアイコンを使いやすくすることで、ユーザーが良い体験を得られるというものになります。
フロントエンドエンジニアはユーザーが触れる部分を設計、開発するので、UI/UXへの意識はユーザー満足度に直結します。UI/UX設計のスキルを具体的に証明するのは難しいので、心がけているポイントなどを記載しておくと良いでしょう。また実際にUI/UX設計を意識したポートフォリオを用意することも当然重要です。
デザインスキル
フロントエンドエンジニアはユーザーの目に触れる部分を開発するので、デザインスキルの重要性が高いです。
デザインスキルはUI/UX設計とも共通しますが、使いやすさというよりはユーザーを楽しませたり感動させるためのデザインセンスのようなイメージになります。デザインスキルはポートフォリオのデザインに力を入れることや、デザインで心がけているポイントを記載してアピールしてください。
デザインもユーザー満足度に直結するのでスキルとしての価値が高く、アピールするメリットがあります。デザインの基本を押さえていることや、常に他サイトなどを見てデザインをアップデートしていることが重要です。
ポートフォリオの作り方
ポートフォリオ作成の流れは次の4つの手順になります。
事前に流れを決めてスケジュールを作成し、計画的にポートフォリオ作りを進めてください。ポートフォリオが原因で転職に挫折してしまうケースも多々見聞きしますが、そうならないためにはポートフォリオ作りを着実に成功させる必要があります。
1. アピールするスキルを決める
ポートフォリオによって何をアピールしたいか事前に明確にしてください。フロントエンドエンジニアがアピールすべきスキルは複数あるので、優先順位をつける必要もあるでしょう。
ポートフォリオの中では、以下のようなスキルアピールをするのがおすすめです。
-
・コーディングスキル
・デザインスキル
・ユーザビリティに力を入れた設計スキル
・クライアントから要望を聞き出すヒアリングスキル
・チームをまとめるマネジメントスキル
すべてを紹介するのは難しいので、特にスキルとして紹介したい・自信があるスキルのアピールをおすすめします。
2. 参考となるサイトを確認する
フロントエンドエンジニアが参考にできるポートフォリオサイトを3つ紹介します。
| ポートフォリオサイト | おすすめポイント |
|---|---|
| Nemutasさん | 個性的なデザインになっていて、GitHub、Qiitaの投稿も多いです。 フロントエンドエンジニアにとって、デザインに力を入れることや、 GitHubやQiitaに投稿していることはアピールポイントになります。 |
| manaさん | エンジニアとしてのスキル紹介だけでなく、YouTubeやブログも 連携させています。各種媒体で活動していることは、フロントエンド エンジニアとしてアンテナを貼っていることのアピールにつながります。 |
| Manato Kurodaさん | デザイン性がありながらシンプルでサイト全体を把握しやすい。 デザイン性とユーザビリティのバランスをどのように取るかは、 フロントエンドエンジニアにとって重要な課題です。 |
上記のような他サイトは積極的に参考にした方が良いです。他サイトをそのまま真似するのはNGですが、参考にするのは問題ありません。フロントエンドエンジニアのポートフォリオはネットで検索すればすぐに見つかるので、まずはいろいろなポートフォリオを見て、自分の目標になりそうなものを見つけてください。
3. 設計・開発を行う
ポートフォリオの方針が決まったら、設計・開発を行います。設計書もポートフォリオに入れるとより良いので、ドキュメント作成にも力を入れるのがおすすめです。企業はエンジニアに対して設計や要件定義を担える人材に成長してくれることを期待している場合も多いため、設計書の比重は応募者が思っているよりも高いかもしれません。ポートフォリオ用のサイトはCMSを使用しても良いですが、フロントエンドエンジニアとしてのスキルアピールのためにはゼロからコーディングするのがおすすめです。
4. ポートフォリオをgithubで公開する
ポートフォリオが完成したらgithubに公開します。githubを使ったことがない人は、以下の流れを参考にしてください。
-
ステップ①githubへの登録
ステップ②SSH keyの登録
ステップ③Sourcetreeのインストール
ステップ④レポジトリの作成
ステップ⑤ファイル作成、コードの貼り付け公開
githubのアカウントを持っていない人は作成するのがおすすめです。無料でソースコードを公開でき、また人のソースコードも見れるので勉強にもなるでしょう。Webページにgithubアカウントのリンクを入れておけば採用担当者がアクセスできます。
ただしソースコードを公開していないポートフォリオも多く、フロントエンドエンジニアの場合は特にgithubの利用は必須ではありません。Webページにアクセスすればブラウザの機能でソースコードを見れるので、作品として複数のWebページのリンクを入れておく形でも問題ありません。
githubの使用方法について詳しくはこちらのページをご確認ください。
ポートフォリオ作成する際の注意点
ポートフォリオ作成する際の注意点は以下です。
表示速度、動作の確認を必ず行う
表示速度が速いことや動作がスムーズであることは必須条件です。ポートフォリオでも本番同様にページスピードに注意してください。表示速度や動作が遅いサイトは離脱されやすいので、ページスピードの速さはWebサイトの必須条件です。
レスポンシブWebデザインの対応
レスポンシブWebデザインにすることで、Webページ、ポートフォリオの評価アップにつながるでしょう。実際のWebページではいろいろな媒体でアクセスされるので、レスポンシブにする必要があります。ポートフォリオでは採用担当者が意図的に複数媒体でアクセスしたり、レスポンシブになっているかコードを確認する可能性があります。CMSを利用する場合は勝手にレスポンシブになっていますが、自分でゼロからコーディングする場合、レスポンシブになるようにコードを書くと良いでしょう。
まとめ
フロントエンドエンジニアにポートフォリオは必須です。ポートフォリオを用意せずに転職した人もいるはずですが少数派なので、必須と考えておいてください。フロントエンドエンジニアの経験がある人はもちろん、未経験の人であってもポートフォリオがあった方が良いでしょう。
ポートフォリオの作成方法に迷ったら、すでにポートフォリオを公開しているフロントエンドエンジニアのものを参考にすると良いでしょう。ネットで検索すればいろいろな人のポートフォリオが出てくるので、参考になるはずです。おすすめのポートフォリオサイトは以下です。
| ポートフォリオサイト | おすすめポイント |
|---|---|
| Nemutasさん | 個性的なデザインになっていて、 GitHub、Qiitaの投稿も多い |
| manaさん | エンジニアとしてのスキル紹介だけでなく、 YouTubeやブログも連携させている |
| Manato Kurodaさん | ザイン性がありながらシンプルで サイト全体を把握しやすい |
最終的には自分のオリジナリティを出すことになりますが、まずはポートフォリオの基本を押さえ、いろいろな人の作品を見たうえで自分のオリジナルを作成してください。
関連記事：フロントエンドエンジニアの転職のポイント！必要なスキルも解説
ITエンジニアの転職ならレバテックキャリア
レバテックキャリアはIT・Web業界のエンジニア職を専門とする転職エージェントです。最新の技術情報や業界動向に精通したキャリアアドバイザーが、年収・技術志向・今後のキャリアパス・ワークライフバランスなど、一人ひとりの希望に寄り添いながら転職活動をサポートします。一般公開されていない大手企業や優良企業の非公開求人も多数保有していますので、まずは一度カウンセリングでお話してみませんか？（オンラインでも可能です）
転職支援サービスに申し込む
また、「初めての転職で、何から始めていいかわからない」「まだ転職するかどうか迷っている」など、転職活動に何らかの不安を抱えている方には、無料の個別相談会も実施しています。キャリアアドバイザーが一対一で、これからのあなたのキャリアを一緒に考えます。お気軽にご相談ください。
「個別相談会」に申し込む
レバテックキャリアのサービスについて
