フロントエンドエンジニアを目指そう！ポートフォリオ作成のコツ伝授します

IT化が進んだ現代社会ではエンジニア職の需要が高まっており、狙い目の業界としてフロントエンジニアへの転職を志望している人も多いのではないでしょうか。フロントエンジニア志望の方にとって、避けられないのがポートフォリオ作成です。しかし、ポートフォリオの作り方やコツが分からないという人も少なくありません。ここでは、ポートフォリオ作成について、未経験者や学生の方にも分かりやすく網羅的にご紹介します。

1. ポートフォリオ（サイト）が必要な理由は？

ポートフォリオとは自身が今までに制作した作品をまとめたものであり、言わばエンジニアとしての作品集のようなものです。転職に際してこのポートフォリオが必要となる理由としては、まず「学習成果の確認」のためという点が挙げられます。企業側としては、応募者がどの程度の知識やスキルを身につけているのかを採用試験の段階で把握しておく必要がありますが、面接や履歴書だけではその判断は難しいものです。そのため、制作した作品をポートフォリオとしてまとめておけば、採用担当官が視覚的に応募者の実力を判断しやすくなります。特にフロントエンジニアはWebサイトにおいてユーザーが直接見る部分を担当する仕事であるため、ポートフォリオは重要視されます。エンジニア未経験者の場合は仕事として携わった作品の実績がありませんから、ポートフォリオは貴重なアピールポイントとなる点にも留意しておきましょう。

また、日本ではIT化の波に対してエンジニア職が不足していると言われており、人材市場は転職希望者が有利の売り手市場が続いていました。しかし、企業側が即戦力の人材を求める傾向が強くなっているというのもまた事実です。企業は多数の応募者を比較して、より優秀と思われる人材を採用しています。応募者同士で比較する際にはポートフォリオのような分かりやすい資料が手っ取り早いため、求められることが多くなっています。

他にも、ポートフォリオは応募者のポテンシャルや学習意欲の高さを見極めるための判断材料にもなります。特に業界未経験者の場合、企業としては今後の成長が期待出来る人材を積極的に採用したいところでしょう。そのためにはポートフォリオで現時点での知識やスキルを示すと同時に、今後学習していきたい言語や身につけたいスキルを明確にしておく事が重要です。ポートフォリオは自分の主体性もアピール出来るという認識を持っておきましょう。
 

2.絶対に記載すべき内容

ポートフォリオに決まった形式は存在しませんが、必ず記載しておくべき内容というものはあります。まずは自分の氏名、年齢、経歴、持っているスキルなどを簡単にまとめましょう。イントロダクションとなりますから、長くなり過ぎて不快感を与えないように気をつけます。余裕があれば、趣味なども付け加えておくとそれとなく人となりをアピール出来るほか、採用面接の際に話題として掘り下げてもらえる可能性もあります。

次に、自分が実際に制作した作品の実績をまとめていきましょう。サムネイルとして掲載する印象的な画像とgoogleで検索をした時のURLを中心として据えます。その下には作成にかかった所要時間や使用した言語の種類、気を付けたり工夫したポイントなどを簡潔にまとめて記載します。ポートフォリオのデザインは3～4カラム程度のカードタイプが主流となっています。複数の作品を並べる際は、自分がアピールしたいものから順番に記載していきましょう。また、前職で携わった作品を掲載する場合は守秘義務や著作権に配慮した上でリンク掲載の可否を判断することが大切です。

可能であれば、ポートフォリオには自分の作品を発信している媒体も記載しておきましょう。例えば、github・qiita・SNS・ブログなどが一例として挙げられます。誰でも情報を発信・受信出来るようになった現代では、エンジニアの情報発信力も重要視されています。こうした日ごろのアウトプットに対する取り組みや姿勢は、採用面接の際にも質問される可能性が高いので知っておくと有利です。ただし、エンジニア未経験者の場合はあくまでエンジニア本来の知識やスキルを先に身につけて欲しいというのが企業の本音です。そのため、未経験の場合は無理に情報発信力をアピールする必要がない点は覚えておきましょう。
 

3.ポートフォリオの作り方

実際にポートフォリオを作成するには、まずお手本・参考資料となるポートフォリオを探すところから始めましょう。未経験者のうちは、特に0からデザインや構成を考えてポートフォリオを完成させるのはハードルが高いです。ポートフォリオはWeb上で様々なものが公開されていますので、自分が気に入る雰囲気の作品を探してみましょう。参考資料が見つかったら、自分のポートフォリオの全体構想を考えていきます。先に述べた「必ず記載したい内容」を中心にして、参考にするポートフォリオから適宜アイデアを取り入れてみましょう。

次に、練り上げた構想に沿ってサイト全体のイメージを作成します。構想通りにポートフォリオを組み上げた場合に、どのようなデザインに仕上がるのかを紙に書き出したり、パワーポイントで出力するなどして確認します。この段階で書き出したものは「ラフ」または「ワイヤーフレーム」などと呼ぶ事が多いので覚えておきましょう。

ラフに問題がなければ、実際にコーディングしてサイトを組み上げる作業に移ります。この時、コードはなるべく見やすくキレイな形で書く事を意識しましょう。これはポートフォリオを見た採用担当官がコードの記述内容を確認する事が多いためです。ポートフォリオが完成したら、Web上にアップロードしておきます。アップロードするには、ドメインとレンタルサーバーを用意しておく必要があるので注意が必要です。無料のアプリもありますから、こうしたものを利用してみるのも良いでしょう。
 

4.未経験者のポートフォリオ作成の注意点

エンジニア未経験者がポートフォリオを作る際、アピール力を高めようと凝ったデザインに手を出しがちですが、未経験のうちほどポートフォリオはシンプルなものに留めておくのが無難と言えます。参考サイトなどを眺めていると、秀逸なデザインや派手な演出に目を奪われる事もあるでしょう。しかし、こうしたクオリティの高いポートフォリオを完成させるには高度な知識や技術が必要になります。未経験者がこうしたデザインを実装するには、多大な労力と時間を要してしまうでしょう。ポートフォリオはあくまで実績をアピールするためのものであり、大切なのは作品です。ポートフォリオ自体はシンプルなもので構いませんから、確実に完成させられるレベルで作り上げましょう。

また、ポートフォリオは採用担当官に見てもらうためのものですから、「見やすさ」も重要なポイントとなります。情報が多くごちゃごちゃしたポートフォリオは、見る側からすると印象の良いものではありません。文字数や実績作品数が多くなりそうな場合は、削れるポイントを探しましょう。デザインはなるべくシンプルで表示崩れのないものを心がけ、凝った演出は実装しないのが吉です。過度な演出実装によってポートフォリオ作成にかかる時間が増えてしまうほか、演出によってかえって見にくくなってしまう場合もあります。加えて、ポートフォリオの作成自体も自分の実力を証明するための取り組みですから、極力無料のテンプレートなどは使わないようにしましょう。
 

ポートフォリオ作成はフロントエンドエンジニアになる第一歩！

今回はポートフォリオの作成について網羅的にノウハウをご紹介しました。ポートフォリオがなぜ重要なのか、どのように作成したら良いのかといったポイントは把握出来たでしょうか。未経験からフロントエンジニアを目指すのであれば、自分の実力を確実に証明出来るポートフォリオが重要なカギになります。見やすくシンプルなポートフォリオを作成して、自分をアピールしていきましょう。