WEBエンジニアに重要なポートフォリオ！作成のコツを徹底解説

WEBエンジニア転職で、必ず話題に上がるポートフォリオ。
名前は知っていても、具体的にどのようなものか分からない方もいることでしょう。

ポートフォリオとは、履歴書や職歴書とは違う事故アピールのための必須アイテムです。

個々のWEBエンジニアとしての力量を端的に証明する紹介状！

このコラムでは、未経験者がWEBエンジニアへ転職する際のポートフォリオについて、その概要から作成ポイントまでを分かりやすく解説します。

未経験のWEBエンジニア転職ならポートフォリオで自己アピール

WEBエンジニアの職につく際、自己アピールの素材としてポートフォリオを提出するのが一般的です。

WEBエンジニアとして活躍している方はポートフォリオの重要性を認識し、オリジナリティあふれるポートフォリオの作成に余念がありません。

これからWEBエンジニアを目指す方、特に未経験の方はポートフォリオについての理解を深めておくようにおすすめします。

WEBエンジニアにとってのポートフォリオとは

WEBエンジニアにとって、ポートフォリオは転職や仕事依頼を得るための客観性をもつ自己アピール資料です。

日々進化するインターネット技術にあって、現時点での知識・スキルのレベルを端的に表現できるのがポートフォリオ。

なお、WEBエンジニアのフィールドはかなり広範囲で、職場ごとに必要とされる知識・スキルが異なります。

そのため、ポートフォリオは企業やクライアントが求める知識・スキルとのマッチングに役立ちます。

また、クライアントの要求するサービスやシステムを完成させる技量があるかどうか、転職にあっては会社に収益をもたらす人材であるかどうかの判断材料となります。

WEBエンジニアの未経験者のアピールポイント

WEBエンジニアとしての経験の有無によって、作成するポートフォリオのアピールポイントが変わってきます。

ちなみに、WEBエンジニアとして活躍している場合は、参加プロジェクトの内容や役割・これまでに開発したアプリやシステムがアピールポイントです。

なお、ポートフォリオによって得意な分野やプログラム言語を効果的にアピールすることで、これからの転職や依頼受託にプラス材料となります。

一方、未経験者の場合は、本人がどのレベルの作品が作れるのか・コーディング技術やデザイン力・表現力のレベルをアピールすることが重要です。

したがって、未経験の方は、基礎レベルの知識・スキルの習得を明確に示せる作品を提示しましょう。

その上で、より高いスキルやオリジナリティある表現にチャレンジしている現状をアピールすれば、転職先の企業や依頼主からプラス評価が得られます。

アピールポイントは、次の3点です。

• ユーザーファーストのサービス：ユーザーが実際に欲しいと望むサービスを形にする
• ソリューションの提案：サービス開発を通してユーザーの悩みを解決する
• 利便性と妥当性を意識：開発者目線の独りよがりな不要なサービスを排除する

WEBエンジニアがポートフォリオを作成するメリット

WEBエンジニアがポートフォリオを作成するメリットは、主に次の4つを挙げることができます。

• ポートフォリオは自分の能力・スキルを的確にアピールできる
• ポートフォリオは転職時のミスマッチを回避させる
• ポートフォリオはキャリアプランの整理となる
• 未経験者はポートフォリオで差がつけられる

ポートフォリオは自分の能力・スキルを的確にアピールできる

WEBエンジニアの職務は実に広範囲で、会社や職場ごとで要求される知識・スキルが変わります。

例えばWEBサイト制作会社のUI/UXのエンジニアであれば、JavaScript（動的な表現のプログラム言語）などによるライブラリ（簡単に実装できるプログラム群）の知識・スキルが重視される傾向です。

一方、アプリ開発の職場であれば、アプリケーションのシステム設計からプログラミング、動作テスト、運用、メンテナンスの各場面で使われる知識・スキルの習得レベルが評価されます。

そのため、自分が目指す分野における実力をポートフォリオでアピールすることが重要です。

もちろん、自分の得意分野をポートフォリオにまとめて、その知識・スキルが活かせる職場を探すこともできます。

未経験者であれば、まったくのゼロベースから企画・立案して、デザインや表現方法も自分のアイデアで構成します。

つまり、目指す職場に応じて個々のクリエイト力を客観的に表現するのがポートフォリオの役目であり、最も効果的な自己アピール手段と言えるでしょう。

ポートフォリオは転職時のミスマッチを回避させる

入社後に配属された職場の業務でのミスマッチを避けるためにポートフォリオが役立ちます。

先にポートフォリオは企業やクライアントが求める知識・スキルとのマッチングに役立つと述べましたが、特に転職時に重視されます。

面接時に、単にWEB系の専門学校で学んだことを述べたとしても、企業側の求める知識・スキルに合致するかどうか、あるいはレベル的に満たされているかどうかが明確ではありません。

応募者の習得した知識・スキルと求人企業の求めるところの間に食い違いが生じることは、両者にとって大きな損益です。

特に応募者にとっては、描いたキャリアプランの変更を余儀なくされるリスクもあるため、企業が求める人材であるとポートフォリオで徹底的に自己アピールできる意義があります。

ポートフォリオはキャリアプランの整理となる

ポートフォリオの作成・更新は、自分のキャリアを客観的にチェックし、今後のキャリアプランを整理する良い機会です。

WEBエンジニアの未経験者でも、継続的なポートフォリオの作成・更新がスキルアップの効果をもたらします。

ポートフォリオを更新するには、リサーチや新しい技術取得へのチャレンジが欠かせません。

一般的にWEBエンジニアは日々更新される新技術や表現方法を積極的にリサーチし、新技術や表現方法を習得するために独自にサービスやアプリ作成に取り組みます。

また、独自に開発したサービスやアプリを駆使した作品にも挑戦します。

このように、ポートフォリオを作成・更新することが、すなわち自己のエンジニアレベルを向上させ、自分の能力が活かせるキャリアプランを明確化させます。

未経験者はポートフォリオで差がつけられる

WEBエンジニアの未経験者の採用では、過去の実績を参考にできないためポートフォリオを重視します。

なぜなら、クリエイトの職場では作品が本人の才能・資質・将来性を判断するモノサシだからです。

未経験者にとってポートフォリオの作成には労力も時間もかかりますが、持てる力を集中して転職に臨む意義は大いにあります。
何度も改正・更新を重ねて、充実したポートフォリオ作成に臨んでみてください。

WEBエンジニアのポートフォリオの作り方

実際にポートフォリオの作成について解説していきます。

既に実務経験がある方も、ポートフォリオ未経験者の方も、セオリーとしての作成方法を紹介しますのでご参考ください。

ポートフォリオ作成のセオリー

ポートフォリオ作成のセオリーは、採用担当者が履歴書や職務経歴書、スキルシートに記載された内容を具体的に確認できるようにすること。

そのためには、主に次の2点に注意しましょう。

• ポートフォリオは前提条件が最重要
• ポートフォリオの定番GitHubを活用

ポートフォリオは前提条件が最重要

ポートフォリオの作成では、設定した課題とそれに対するソリューションの提示が重要。

目的や対象者などの前提条件に合わせたポートフォリオ作成が効果的なアピールにつながります。

効果的なアピールのために、ポートフォリオで明確にすることは次の4点です。

• テーマ設定：制作の具体的な目的
• ターゲティング：情報を伝えたい相手を絞り込む
• ソリューション：解決したい課題
• コンバージョン：達成したいゴール

ポートフォリオに掲載する作品それぞれに明確なテーマが必要です。

『誰に対して何のために情報発信するのか、何をどのように見せたいのか』を明確してください。

そして、設定されたターゲット層（自己作品ではターゲット層もリサーチ）に応じたユーザーニーズをリサーチします。

ポイントは、ニーズを満たす解決策を制作物によって提示することと、設定したコンバージョンへとユーザー喚起する内容であることです。

ポートフォリオの定番GitHubを活用

採用試験等などでポートフォリオ提出する際は、GitHubを活用した作成が便利です。

GitHubとはソースコード共有プラットフォームで、作成したファイルをネット上に保存でき、変更履歴（バージョン）の管理、ネット上への公開などが無料でできます。

ポートフォリオ作成の具体的な流れ

ポートフォリオ作成の具体的な流れは、主に次の4ステップです。

• 作成するサービスやアプリを考案・設計する
• 概要や選定理由などをまとめる
• スキルシートを作成
• ソースコードやレイアウトをまとめて公開

作成するサービスやアプリを考案・設計する

作成するアプリやサービスのテーマを考案します。

転職先の企業やポジションを決めている場合は、企業ニーズに合った制作物を手掛けると良いでしょう。

その際、使用する言語や技術も転職先企業を意識して選ぶこともポイントですが、未経験者の場合は誰が見てもわかりやすい言語や設計を選択することが大切です。

なお、過去の作品でテーマが合致したものがあれば、一緒にポートフォリオに掲載しましょう。

概要や選定理由などをまとめる

具体的にはサービスの説明書となるREADME（リード・ミー）を作成するようにおすすめします。

READMEの構成は、一般的に次の通りです。

1. サービス・アプリのキャッチコピーとイメージ画像
2. サービス・アプリのURL.（無登録で試用できるページを設定）
3. 作品の概要と開発した背景（ターゲット設定やソリューション、開発の動機など）
4. 画面や機能の説明
5. 主な使用技術

ちなみに、構想の段階では上記3番目の『サービスの概要やターゲット設定、ユーザーが持つ課題とソリューション』を作成します。

完成後に全5つの構成をREADMEにまとめて、ポートフォリオに添付します。

ソースコードやレイアウトをまとめて公開

次に、ルーティングの設計や必要な機能をリストアップして、実際の政策に入ります。

デザインツールを使用しますが、簡易的に画面遷移を確認できるものとしては無料でシンプル機能の「Adobe XD」がおすすめです。

作成の際に注意すべきは、次の4点です。

• ターゲットユーザーの抱える課題にソリューションが提示されているか
• ユーザーが使いやすい画面遷移になっているかどうか
• 不要な機能・オプションが入っていないか
• ルーティング設計に欠陥がないか

画面遷移図ができたら、次はテーブル設計を作成します。

テーブル設計とは、簡単に図式化した情報フォーマットで、各ページにおける保存しておくべき情報の見取り図です。

なお、テーブル設計は後の修正が困難なデメリットがあり、実装の前に記載事項をしっかりとまとめておきましょう。

テーブル設計を完成させれば、いよいよ実装に入ります。
WEBエンジニアのポートフォリオには、使用したプログラム言語とシステム・技術を明記することがポイント。

なお、開発工程も評価されます。
そのため、作品のソースコードやレイアウトが公開しやすいGitHubなどの無料開発プラットフォームを使用していれば、開発工程を容易に共有可能です。

ポートフォリオ提示においては、ソースファイルで相手に送ることもできますが、コンパイルなどが手間であること、知らない相手のファイルを開くリスクなどから敬遠されがちです。

基本的には個々が作品をネット上に公開し、そのURLをポートフォリオに記載するようにしましょう。

スキルシートを作成

ポートフォリオには提示する作品と合わせて、習得したスキルやエンジニア経験などを効率的に伝えるためにスキルシートを添付します。

記載事項は、これまでに取得した言語や技術、実務経験年数や現在学習中のスキルや言語などです。

このスキルシートと作品とが、読み手に分かりやすくリンクするようにも注意しましょう。

WEBエンジニアのポートフォリオの作成ポイント・注意点

WEBエンジニア未経験者のポートフォリオにおいては、まず基礎ができているか、ユーザーが見やすい・使いやすい形に整えられているか注意しましょう。

ポイントは次の2点です。

• コードにオリジナリティを表現する
• ポートフォリオはブラッシュアップ・改訂にも気を配る

コードにオリジナリティを表現する

WEBエンジニアのポートフォリオでは、他の応募者との差別化を意識することがプラス評価につながります。

デザインやレイアウトを整理整頓することで、ユーザーの利便性や視認性が高まります。

コードにおいても同様で、無駄のないシンプルなコーディングを心がけ、その上でオリジナリティを加味する形が望ましいでしょう。

具体的には次の4つのポイントを参考にしてみてください。

• トレンド・需要のある技術にチャレンジ
• オリジナリティをアピール
• ユーザー目線で設計する
• コードの整理整頓

トレンド・需要のある技術にチャレンジ

ポートフォリオに載せる作品では、現時点で需要の高い言語・技術を使うように心がけてください。

刻々と進化するWEB技術にあって、絶えず最新の知識・スキルを取り入れる努力は評価されます。

過去に作ったものであっても、可能な限りブラッシュアップしてみると良いでしょう。

オリジナリティをアピール

ポートフォリオは自己アピールの決め手です。
ここで個々のオリジナリティを強調して、他者との差別化を図りたいところです。

もちろん、作品自体にオリジナリティを発揮できれば申し分ありませんが、実績のない現状で無理な背伸びは逆効果に終わるかもしれません。

そこで、自分なりの工夫ポイントや制作意図を丁寧に述べるように心がけてください。

また、今後のキャリアプランや展望なども盛り込んで、独自性のあるポートフォリオに仕上げましょう。

ユーザー目線で設計する

WEBエンジニアのポートフォリオに載せる作品は、とにかくユーザー目線のシンプルでわかりやすいものでなければなりません。

近年ではUI/UXのレベルも上がっていて、操作性や視認性への配慮が欠かせません。

また、サービスやアプリの開くスピードが遅いこともマイナス評価です。
いくら凝った作品であっても、スムーズに動かなければユーザーがそのまま離脱してしまうリスクが否めません。

いかにユーザビリティの高い開発ができるかという点も評価されます。

コードの整理整頓

繰り返しになりますが、すぐれたWEBエンジニアは誰もが見やすいコード作成が上手です。

特にチームで制作する職場では、整理整頓されたコーディングは重宝されます。

UI/UXと同等に、ソースコードの読みやすさ・シンプルさにも注意を払っていきましょう。

ポートフォリオはブラッシュアップ・改善にも気を配る

ポートフォリオは、一度作って終わりではありません。

WEBエンジニアとして活動をするならば、キャリアプランに沿ったステップアップの場面でもポートフォリオの必要が生じることを知っておきましょう。

つまり、WEBエンジニアにとってポートフォリオは名刺代わりであり、可視化された履歴書ということです。

したがって、ポートフォリオはネット上に挙げましょう。
公開後は検索順位やアクセス数、コメントなどの評価を受けつつ、定期的にブラッシュアップするようおすすめします。

これまで作った作品と新たに作ったものをファイリングして、プロジェクトごとに必要に応じてポートフォリオの編成に励みましょう。

なお過去作品については、流行や普及に応じたブラッシュアップ（新技術の追加など）を施すこともプラスになります。

WEBエンジニアのポートフォリオの参考例

最後にWEBエンジニアのポートフォリオの実例を2つ挙げておきましょう。

• フロントエンドエンジニアの平尾さんのポートフォリオ
• インフラ（クラウド）エンジニアのchibiharuさんのポートフォリオ

フロントエンドエンジニアの平尾さんのポートフォリオ

『コードはデザインである』のキャッチコピーが印象的で、全体のレイアウト・デザイン構成に独創的なインパクトが顕れています。

ポートフォリオ全体が黒で統一され、アニメーションの動きも実にスムーズ。

フロントエンドエンジニアとしてのアイデンティティが明確で、かつ見る側にオリジナリティを強調するUI/UXの処理が巧みです。

特徴的なのは、海外のシェアを意識して英語表記をメインにしている点。

わざとページを部分表示することで、ユーザーにスクロールしてもらう意図（その先を見たいと思わせる工夫）が明確なコーディングも興味深いところです。

インフラ（クラウド）エンジニアのchibiharuさんのポートフォリオ

モノトーンベースで余白も多く、全体的に落ち着いた雰囲気を感じさせるデザインが印象的です。

作品群においてもシンプルなデザイン・コーディングが特徴的で、実務経験の浅さを隠すのではなく、むしろ誠実に等身大の自分をアピールしている点が好印象となっています。

まお、習得したスキルの表記では、項目ごとに動的な棒グラフで見せるあたりも独自の工夫が伺われます。

まとめ

WEBエンジニアを目指す方、特に実務が未経験な方はポートフォリオで他の応募者との差別化を図ってください。

転職先の職場に応じた作品をラインナップすることが望ましいですが、作品群に余裕のない場合は、たとえ畑違いであっても自信作をストレートにぶつけてみてください。

アピールポイントは先に述べた通り、自分の長所意を端的にアピールできるように、ポートフォリオを作り込むことに専念してください。

コメントは受け付けていません。