高評価を受ける未経験エンジニアのポートフォリオの作り方【参考例】
こんにちは、Masaki Nishi@Twitterです。
つい先ほど、このポートフォリオ件ブログである「masakinishi.com」を開発し終えたので、そこから得られた知見をまとめていきます。
また、僕のエンジニア歴は3年ほどで、サンフランシスコ・シリコンバレーで働いていた経験もあります。
日本以外の企業でも、いくつかの面接を受けてきたので、経験則から国際的に高評価を受けるポートフォリオの作り方を説明していきます。
高評価を受けるエンジニアのポートフォリオの作り方の手順
まず大前提として、ポートフォリオは作り始める前の作業が一番重要です。ここが高評価を受ける分かれ目になります。
作る前にポートフォリオの目的を考える
まず、ポートフォリオを使って何をしたいかを明確にしましょう。
僕はいくつかの企業のオウンドメディアの立ち上げやグロースハックに携わったことがあります。経験則から、コンセプトや目的がブレるとゴール（ここでは高評価を受けること）もブレてくることがわかりました。ポートフォリオも考え方は一緒です。
以下はポートフォリオの目的の参考例です。
- 転職を成功させるために、面接でポートフォリオを有効活用したい。
- フリーランスエンジニアとして活動するためにポートフォリオから仕事を受注できるようにしたい。
- 名刺代わりとして成果物を提示したい。
上記のように想定できるだけでも3つあげられます。
一つ目の参考例では、対象企業によっても目的がさらに明確になります。技術力を重視する企業で、「github」などのURL提示が必須であることが分かっていればポートフォリオとしてgithubだけあれば十分だと言えます。
ポートフォリオはあくまで成果物を見やすく提示するものであるため、面接官がgithubに慣れているであろう企業であれば別途ポートフォリオを作るよりも、github上の成果物の完成度を充実させたほうが高評価を得られると思います。
このように、具体的な目標を定めることでポートフォリオの形が変わっていくので、できるだけ詳しく目標をあげてみましょう。
ポートフォリオの技術選定をする
ポートフォリオの目標が明確になれば、必要な機能や要件がリストアップできるかと思います。
ポートフォリオの目的の二つ目の参考例でいえば、営業ツールとしてポートフォリオを使いたいということが明確になっているため、
- 自身の知見を発信できるブログ機能が欲しい
- お問い合わせページが欲しい
- ポートフォリオ自体の開発や管理コストに時間を使いたくない
などがあげられるかと思います。
上記のような要件であれば、「WordPress」のようなブログやお問い合わせ機能を簡単に作成することができるソフトウェアを使うという形になると思います。
また、ポートフォリオの目的の三つ目の参考例では、成果物を提示するだけのため、ブログ機能などの複雑な機能は必要ないと思います。
そうなると、
- サイトの表示速度を早くしたい
- サイト自体を成果物の一つとしたいため、最新技術を使いモダンな開発をしたい
などが要件として考えられます。そうなった場合、「Gatsby.js」のようなReactを用いたシングルページアプリケーションを開発できる静的サイトジェネレーターを使用するなどが選択肢になると思います。
上記のように技術選定が終わったら、実際に開発を進めていきましょう。
ポートフォリオのデバッグは入念にする
実際に開発を終え、デバッグの段階に入ったら入念にバグを洗い出しましょう。
想像してみてほしいのですが、エンジニアのポートフォリオサイトでレイアウトが崩れていたり、ブラウザのコンソールからエラーがいくつも表示されていたらどう思いますか？
その時点で、「エンジニアとしてどうなの？」と思われてしまうこと間違いなしです。僕はエラー解決能力やデバッグの経験数がエンジニアの力量を表すと思っているので、ここは気を付けましょう。
完成したポートフォリオに意見をもらう
デバッグを終え、開発が終了したら満足せずに、身近なエンジニアや友人にポートフォリオを見せて意見をもらいましょう。
自分では気づかない誤字やレイアウトの崩れ、別デバイス・環境からのアクセスによる様々なエラーが発覚する場合があります。
よくある未経験エンジニアのポートフォリオの失敗例
全ウェブサイトのユーザビリティとして、
- 使いやすい
- 分かりやすい
は必須ですが、それ以外によくあるダメなポートフォリオの例があるので紹介します。
制作の過程が見えてこない
これは、ポートフォリオの目標がブレており、技術選定もブレている場合にありがちです。
例えば、HTMLとCSSだけによるコーディングのトップページ1枚のポートフォリオをWordpress環境で実装していたらどう思いますか？
上記の場合、僕だと「ペラページのためにWordpressは技術選定が甘いな」「実際のエンジニアリング業務の工程である上流工程の知識がほとんどないのでは？」「他の成果物も技術選定があいまいな微妙なものだろうな」と思ってしまいます。
なので、ポートフォリオの目的・技術選定はしっかりと行い、なぜ自分がこのように作ったのかという説明ができるようにしましょう。ポートフォリオに含める成果物も同様です。
技術レベルが低すぎる
最低限ポートフォリオに含めてほしい技術レベルは、
- CookieやSessionを用いたデータの入力機能（ユーザー投稿機能等）
- セキュリティを最低限理解したデータベース処理
上記の2点です。簡単な掲示板であれば上記の条件を満たすかと思います。
「HTMLとCSSのコーディングだけでやっていくぞ！」という場合を除いてエンジニアとしてポートフォリオを出すのであれば上記の技術レベルは成果物に欲しいです。
上記のような成果物が提示できないのであれば、ポートフォリオを作るメリットはないかと思います。
成果物の説明ができない（フレームワークの乱用）
WordPressやLaravel、Ruby on Railsなどは特にそうですが、データ入力機能やデータベース処理が簡単に実装できてしまうため、「あるコードがどのようにデータ処理を行っているのか」を説明できないということが未経験エンジニアだと特にあると思います。
そういったコードがある成果物をポートフォリオに含める際には、面接等で必ずその成果物についての技術的質疑応答があると思ってください。
未経験エンジニアが参考にすべきポートフォリオ
海外のエンジニアは特にポートフォリオが充実しているので紹介します。
上記のポートフォリオはまず、アニメーションが細かくて印象に残りやすいです。その他にも、洗練されたデザインや1ページのみというシンプルな見やすさが好きです。履歴書のような経歴や成果物の表示もシンプルに見やすくて参考になります。
上記の「Bestfolios」はデザイナーやエンジニアのポートフォリオを一覧で見ることができます。タグでGoogleなどの有名企業で働いている人のポートフォリオに絞ってみることができたりするので、参考になるかと思います。
相手の立場からポートフォリオを考えよう
ウェブサイト全般に言えますが、「誰に見てもらいたいか？」「その人にどう思ってもらいたいか？」ということを重視しましょう。そのために、ポートフォリオの目的を明確にすることが大事です。
僕のこのサイトは「僕を知ってもらい、SNSでフォローしてもらう」ということを目的にしているので、自己紹介が目に入るサイトデザインになっていて、フォローボタンも一番効果的な記事下に配置しています。
このようにユーザーフローを考慮したデザインができれば、より効果的で高評価なポートフォリオになると思います。
というわけで、参考になったらこの記事のシェアとフォローをお願いします。