「ポートフォリオって何？」、「ポートフォリオを作るように言われたのだけれども、どうやって作ればいいの？」と悩んでいませんか？
フリーランスのエンジニアにとって、ポートフォリオは企業担当者に自分のスキルや実績をアピールするためのツールとなります。また、最近は、フロントエンドエンジニアのスキルを評価するツールとして活用する企業が多くなっています。このため、ポートフォリオの出来が案件獲得に大きな影響を及ぼすのです。
この記事ではフリーランスのフロントエンドエンジニアが案件を獲得する際に必要となる「ポートフォリオの作成のポイント」について紹介します。
＼ フリーランスエンジニア向けの求人サイト ／
ポートフォリオとは？
まずはポートフォリオについて説明しますね。
ポートフォリオ（Portfolio）は英語で、直訳すると「書類入れ」や「折かばん」という意味で、「書類を運びながら出し入れできるケース」をいうイメージを表しています。なお、ポートフォリオの根本には、「相手によって、または状況によって変えていく」という意味があります。
元々はデザイナーが就職活動や転職活動で、自分が描いたイラスト集や、撮影した写真集などをまとめて企業に提出していた資料を「ポートフォリオ」と呼んでいました。また、金融業界では、ファンドの運用構成（日本株、外国株、国債、外国債などの比率）を表す資料を「ポートフォリオ」と呼んでいます。
では、エンジニアのポートフォリオとはどのようなものでしょうか？
エンジニアのポートフォリオもデザイナーと同様に、自分の能力や実績を評価してもらうための対外的な資料となります。
具体的には、「自己紹介、過去に参画したプロジェクトや、作成したプログラムなどの実績、自己PRなどを公開したWebページ」となります。エンジニアのポートフォリオは、HTMLやCSSはもちろん、PhotoshopやIllustrator、JavaScript、PHPなどを用いて作成します。
フロントエンドエンジニアを目指すうえでポートフォリオが絶対必要な理由
フリーランスのエンジニアが案件を獲得する上で、ポートフォリオは絶対に必要です。
なぜなら、ポートフォリオを作成した方が、仕事を獲得する上で有利に働くからです。また、最近は企業もエンジニアとしてのスキルを評価するにあたり、ポートフォリオを参照するケースが増えています。
ポートフォリオの持つ役割は、以下の2つです。
- 成果物を見て、過去の実績や持っているスキルの判断材料となる
- 成果物を見て、必要とするスキル要件と合っているかどうかの判断材料となる
ポートフォリオを作成する最大のメリットは、企業担当者に自分の実績をわかりやすく提示することができる点です。企業担当者がエンジニアであれば、ポートフォリオを見ることでフロントエンドエンジニアとしてのスキルや実績を評価できるため、企業に対する自分のアピール材料となります。
なお、未経験者であってもポートフォリオを作成した方が有利に働きます。未経験者の場合は、自分で自主的に作成した制作物をポートフォリオとして公開すると良いでしょう。
IT企業全体がエンジニア不足ということもあり、たとえ実戦経験がなくともフロントエンジニアの採用意欲を持っています。このため、成果物が何もない応募者よりも、ポートフォリオを持っている応募者の方が、企業担当者にはるかに効果的にアピールができますね。
＼ すでにポートフォリオがある人はここから案件検索！ ／
フロントエンドエンジニアがポートフォリオに掲載する項目
では、フロントエンドエンジニアがポートフォリオに掲載すべき項目にはどのようなものがあるのでしょうか？以下で具体的に紹介します。
ポートフォリオの構成1:過去の制作実績
まずは過去の制作実績を掲載します。
企業は即戦力としてフリーランスエンジニアを求めています。
制作実績を掲載することで、企業担当者に自分の実績やスキルをわかりやすくアピールできます。フロントエンドエンジニアとして採用するかどうかの最初の判断は、チームリーダーやマネージャーの役割を担うエンジニアがほとんどです。このため、自分のスキルや実績を理解してもらうのにポートフォリオは非常に有効です。
一方、フロントエンドエンジニアとしての実務経験がない場合、ポートフォリオがないと、企業担当者の判断材料は職務経歴書のみとなります。こうなると、スキルをアピールできる物がないため、採用担当者の評価をえることは難しくなります。仮に職務経歴書でポテンシャルを評価されたとしても、待遇面では厳しい条件となることが予想されます。
経験者の場合、今までに参加したプロジェクトや作成したWebアプリケーションを事例として紹介するのがよいでしょう。ただ、企業との間で取り交わした守秘義務契約により一般公開できないものもあります。その場合は、公開可能な範囲で紹介しましょう。また、ディスクリプションはなるべく詳しく説明するようにしましょう。
未経験者の場合は、0から成果物を作ることになります。とはいえ、最初から大規模なWebアプリケーションを作成する必要はありません。企業の評価ポイントは、「コーディング技術はどの程度あるか？」、「0からどの程度まで作成することができるか？」という点です。まずはシンプルなアプリケーションで良いので完成させ、公開しましょう。
こちらもチェック：未経験からフロントエンドエンジニアは目指せる？現役エンジニアが徹底解説！
こちらもチェック：30代ビジネスマンがプログラミングスキル習得を目指すのは遅い？
ポートフォリオの構成2:SNS・ブログなどのソーシャルアカウントのリンク
SNS、ブログなどのソーシャルアカウントを運用した実績があれば、それらのリンクを貼って紹介することをおすすめします。
企業側は、その人のSNSやブログを通じて、「その人が過去にどのようなアウトプットを行なってきたか？」、「定期的にアウトプットを行なってきたか？」などを確認することができます。そして、発信内容やアウトプット内容を通じて、「前向きな姿勢」や「積極性」を企業側にアピールできます。
また、技術ブログなどの発信内容を通じて、企業への「技術力のアピール」や、コミュニケーションがスムーズに進むメリットがあります。
GitHubアカウントを持っているのであれば、それも載せましょう。GitHubでソースコードを公開することで、企業は作ったプログラムのソースコードを見ることができるため、「技術力のアピール」にもつながります。
自分というエンジニアを企業により深く理解してもらうきっかけとなるので、SNSやブログなどのソーシャルアカウントのリンクを貼りましょう。
ポートフォリオの構成3:もちろんプロフィールも
もちろん、プロフィールもポートフォリオに記載しましょう。
プロフィールには、以下の内容を記載します。
- 氏名
- 顔写真
- 生年月日などの基本情報
- 学歴・職歴
- 言語やツールのスキルレベル
- 自己PR
プロフィールの記述例を以下に紹介します。
- 氏名：田中一郎
- 生年月日：1995年11月3日（25歳）
- 居住地：東京都
- 学歴・職歴：A大学理工学部卒業。大学時代はUI/UXについて学ぶ。大学卒業後、ECサイト運営企業に就職。フロントエンドエンジニアとして従事し、UI/UXの改善でアクセス数アップや顧客満足度アップに貢献した。
- スキルレベル
| 技術 | 経験年数 | スキル |
|---|---|---|
| HTML | 3年 | ★★★★★ |
| CSS | 3年 | ★★★★★ |
| Java Script | 2年 | ★★★★ |
| Leact | 1年 | ★★★ |
- 自己PR：
初めまして。田中一郎と申します。大学卒業後、ECサイト運営会社に就職し、フロントエンドエンジニアとしてUI/UX改善業務に携わってきました。Webサービスの改善業務に幅広く携わりたいと思い、2020年からフリーランスのフロントエンドエンジニアとして活動しています。得意分野はPDCAを回しながらのWebサイトの改善です。よろしくお願いいたします。
＼ ポートフォリオを作成したら求人を見てみる ／
ポートフォリオを作成するステップと注意点
ここでは、ポートフォリオを作成するステップと注意点を紹介します。
1.参考にするサイトを探す
まずは参考にするサイトを探しましょう。「フロントエンドエンジニア ポートフォリオ 例」で検索すると、参考になるサイトを探すことができます。
参考になる7サイトをこちらに記載しておきます。URLをクリックするとポートフォリオサイトをチェックすることができるので参考にしてくださいね。
ポートフォリオはそれ自体が企業の評価対象となります。このため、クオリティの高いポートフォリオを参考にすることで、高い評価につながります。
では、検索したポートフォリオを、どのようなポイントで見るとよいでしょうか？それは、以下の点です。
- UI/UXの設計やWebページの構成（動作やページ遷移など、ユーザビリティをどのように考慮しているか？）
- 公開されている成果物やWebサービスを確認
- 使用技術やコーディング（ソースコードや開発者ツールで確認）
ただし、「ポートフォリオサイトが公開した成果物を全て真似をする」ことはやめましょう。著作権侵害として訴えられる可能性があります。あくまでも参考程度にとどめ、自分のオリジナルの成果物として設計した上で作っていきましょう。
2.ポートフォリオ全体のデザインを決定
参考にするポートフォリオが決まったら、ポートフォリオ全体のデザインを決定していきましょう。このとき、いきなりコーディングするのではなく、サイト全体のイメージを紙やパワーポイントなどに書き出し、ポートフォリオの構成を設計しましょう。紙やパワーポイントに書き出したポートフォリオの設計図を「ワイヤーフレーム」と呼びます。
ワイヤーフレームを作ることで、ポートフォリオ全体のイメージをつかむことができます。また、コーディング時にスムーズに進めることができます。
デザインを決定するためのポイントとして、「UI/UXを意識する」ことが必要です。これは「見やすさ」や「使いやすさ」につながります。
「見やすいポートフォリオ」はファーストインプレッションで企業担当者に良い印象を与えます。それは、フロントエンドエンジニアとしての「UI/UXの設計力」の評価となります。
とはいえ、あまり凝ったデザインは必要ありません。シンプルな構成の方が見やすいからです。逆に凝った演出を詰め込みすぎたポートフォリオの場合、それを見た企業担当者のストレスを生みかねません。
なぜなら、企業担当者は他の業務があるため、ポートフォリオを見るための時間をかけたくないというのが本音だからです。
このため、凝ったデザインに時間をかけるよりは、実績をわかりやすく書くなど、「見やすさ」に時間をかけた方が有益です。
また、成果物として公開したプログラムの動作が重いと、それだけで企業担当者のストレスになりかねません。このため、成果物となるプログラムの動作は重くならないように気をつけましょう。
3.コーディング
デザインが決まったら、コーディングでポートフォリオを作成しましょう。あらかじめワイヤーフレームを作成しているため、それに沿ってコーディングを進めていくだけです。
コーディングする際のポイントは、「きれいなコードでコーディングする」ことです。
企業担当者はコードの内容をチェックします。例えば、「読みづらい」、「CSSのネーミングが規則的でない」、「適切なタグを使用していない」などのコードの場合、評価は下がります。
また、エラー発生も印象が悪くなります。このため、テストをしっかりと行い、エラーが発生しないようにチェックも忘れずに。
細部まで注意し、きれいなコードを書くよう心がけましょう！
サンプルコードを少し加工しただけの成果物の作成はやめましょう。
企業担当者は多くのポートフォリオを目にしています。このため、サンプルコードを少し加工しただけの成果物の場合、他の応募者が類似のコードを既に提出している可能性があります。そうなると、「本当にプロジェクトに必要とする技術力があるのか？」と企業担当者に疑問を持たれかねません。
また、無料のテンプレートを用いたポートフォリオの作成や、ポートフォリオ作成サービスを利用した場合も、同様の疑問を持たれかねません。
ポートフォリオは自分の技術力を証明するサイトです。サンプルコードや無料サービスに頼るのではなく、参考にしつつも、あくまでも自力でフォートフォリオサイトを作成し、自分の技術力をアピールしましょう。
以下のポートフォリオサイトは、「Snow Monkey」というテーマを使って作成したポートフォリオサイトです。こちらの作成で気になるところがあれば気軽に連絡してください。お問い合わせからお願いします！
受け手に好印象を与えるポートフォリオ作成時の工夫
ここでは、受け手に好印象を与えるポートフォリオ作成時の工夫を3つ紹介します。
レスポンシブデザインは最低限行おう！
1つのHTML+CSSで複数のデバイス(PC・スマホ・タブレット)の画面に合わせて、ストレスなく表示させる事が出来る制作方法の一つです。
1ソースでデバイスごとにサイト作成をする必要がないのが最大のメリットで、管理も楽な上にコストも手間もかからない事からWebサイト作成の主流となっています。
GoogleもレスポンシブWEBデザインを推奨していることから、企業に見せるポートフォリオは最低限レスポンシブデザインで作成しましょう。
ユーザーインターフェースを工夫する
ユーザインタフェースはポートフォリオの印象だけでなく、あなた自身の評価に大きな影響を及ぼします。また、ユーザインタフェースへの配慮が、UI/UXの設計力をアピールでき、企業担当者に高印象を与えます。
このため、企業担当者がスマホでも見ることができるようにレスポンシブデザインにする、操作がしやすいようにボタンの配置を考慮するなど、受け手目線でしっかりと工夫しましょう。
フレームワークを活用する
フレームワークを活用してポートフォリオを作成しましょう。
最近のWebサービスの開発では、「React」などのフレームワークが用いられています。特に「React」、「Vue」、「AngulasJS」は人気のフレームワークとなっています。企業側も積極的に導入したいフレームワークとして注目しており、これらのフレームワークに知見のあるフロントエンドエンジニアの需要が高まっています。
また、フレームワークの活用経験がフロントエンドエンジニアとしての評価に影響を及ぼします。フレームワークを用いて成果物を作成し、技術力のアピールにつなげましょう。
まとめ：自分でこだわったポートフォリオを作成しよう！
この記事ではフリーランスのフロントエンドエンジニアが案件を獲得する際に必要となる「ポートフォリオの作成のポイント」について紹介しましたが、いかがでしたか？
ポートフォリオは、企業担当者にフロントエンドエンジニアとしての自分のスキルや実績をアピールするために、氏名などの基本情報、プロジェクトやアプリケーション開発の実績、成果物などを紹介したWebサイトです。最近はフロントエンドエンジニアのスキルを評価するツールとして活用する企業が多くなっています。このため、フリーランスエンジニアの案件獲得において、ポートフォリオは大きな影響を及ぼします。
ポートフォリオを作成するに当たって、まずは優れたポートフォリオを検索して参考にしましょう。とはいえ、全て真似すると、著作権侵害で訴えられる場合があります。また、企業との守秘義務契約を結んでいる場合、実績を紹介できない場合もあります。このため、ポートフォリオの作成では、著作権侵害や守秘義務契約に配慮しましょう。
ユーザインタフェースや操作エラーが発生させないなど、細かい点に配慮することも必要です。受け手となる企業担当者にストレスを与えてしまっては、せっかくの努力が水の泡です。努力が報われるためにも、配慮を怠らないようにしましょう。
＼ IT業界に精通したスタッフが対応するので安心！ ／