エンジニアのポートフォリオを採用目線で解説


 

エンジニアのポートフォリオは何を気を付ければいいのだろうか?作り方と面接でのポートフォリオのアピールのやり方も知りたいな。こんな疑問にエンジニアの採用面接をしている僕が解説します。(フロントエンドエンジニア中心です)

 

エンジニアの転職においてポートフォリオはほぼほぼ必須なのだが、特にweb系エンジニアとしてwebサービス自社開発企業への転職ではアピールの仕方まで踏み込んでおいたほうが無難です

web系企業ではエンジニアもユーザ目線でのプロダクト作りが求められますし、仕様通り作って終わりじゃないですね

 

結論、技術力のアピールもポートフォリオでは大事なのですが、web系自社開発企業に入社したい場合は、ユーザ目線での仕様やUI/UXデザインも重要なので最低限だけ抑えておくと安心です。理由も解説します。

 

エンジニアにポートフォリオが必要な採用目線の理由

 

最初にエンジニアにポートフォリオが必要な採用目線としての理由を書きます。割とわりきたりなので読み飛ばしてもいいです。人柄を見るためってのは読んでもいいかと思います。

 

技術力チェック

主要な目的はエンジニアの技術力のチェックのためです。経験者であれ未経験者であれ、ポートフォリオは技術力チェックに役立ちます。

 

特に意味があるのは未経験者の採用の場合ですかね。経験者は口答レベルで技術力などをある程度把握できますが、未経験者で説明下手だとポートフォリオを見れたほうが早いです。

 

人柄のチェック

僕の場合は、ですが、人柄のチェックにも役立つなーと思ってますね。どんなサイトをどういう気持ちでどんな考えで作るのか?というのもポートフォリオってエンジニア自身が作りたいものを基本的に作るじゃないですか?

 

プログラミングスクールの成果物だとそうじゃないですけど、エンジニアは誰かの作ってほしいものを作ることが多いですが、ポートフォリオは違うので人柄がわかりますよね。

 

記事の後半でも書きますが、そこがけっこう差別化にもなるかなと思いますね。特にweb系自社サービス企業へ就職あるいは転職したい場合は、エンジニアにもサービス改善の気持ちを求められるのでスタンスとしてのチェックにも採用目線としては役立ちます

 

エンジニアのポートフォリオの作り方を手順で解説

 

次にエンジニアのポートフォリオの作り方を手順でざっくりと解説します。

 

企画

まずは企画段階です。ここはさほど注力すべきところではないので、解決したい課題、解決方法だけ整理しておけばよいです。基本はwebディレクターが考える段階なので、あまり気にしなくていいです。

 

出来るだけ自分がユーザになるような形で、詳しい領域で企画する方が無難です。出ないとユーザ目線で考えるチャンスを逃すので、アピールの時に不利になりがちです。

 

導線設計とWF作成

次はフロントサイド部分の実装要件となる同線設計とWF作成ですね。ここは、余力があればフロントエンドエンジニアであれば割と注力してもいいかなと思ってます。

 

ユーザの利用シーン、その利用シーンに適切なUIでWFを作成すればOKです。web系エンジニア狙いでwebサービスの自社開発企業狙いだとwebディレクターやUIデザイナーと兼任でフロントエンドエンジニアの採用をしているケースもなくはないので差別化ポイントにできます。詳しくは記事後半でも解説します。

 

仕様書作成

次はサーバサイドの要件となる仕様書の作成です。DB設計など広範囲に関係しますね。ドキュメント作成は、エンジニアであればほぼ必須の業務になってくるため分かりやすい仕様書フォーマットを意識して作成するといいですね

 

ここはポートフォリオだけで考えると、個人開発で大丈夫なんですがこういう実際のチーム開発を考慮すると集団開発を経験できる機会を持っておける方が業務には役立ちますね。

 

開発実装

あとは要件にそって開発実装していきます。ここは面接で苦労したところとか、どれくらいで何を作れたか?とかうまくいかないときにどうやって解決したか?とかを聞かれるのでエピソードとして残しておくといいですね。

 

何か記録に残しておいたほうが面接当日にスムーズに話せると思います。思い出すのは結構大変ですからね。

 

テスト

そして実装が終われば、要件通りに動作するか表示崩れはないかなどをテストしてバグを発見し、修正する段階になります。ここがおわればリリースできますね。

 

あまりここも面接で質問されることはないですが、エンジニアであれば業務として単体テストや結合テストは行うためやっておくべきです。

 

エンジニアのポートフォリオの面接でのアピールの仕方

 

次にそのポートフォリオをエンジニアの採用面接では、どうアピールすべきか解説します。ここでは技術力は聞かれたりしますから、それ以外で解説していきます。

 

ユーザ目線で利用シーンを考えUIに反映する

特にフロントエンドエンジニアやweb系エンジニア狙いの場合はユーザー目線で利用シーンを考えそれをもとにUIに反映する、そしてその思考回路を面接で伝えましょう

 

ただここは常識的なレベル感でよいと思います。マイナスポイントを作らないイメージです。例えば以下を見てみましょう。明らかにやばいUIですよね。

 


 

もっとやばいUIはこちらですね。恐怖しか感じません。明らかにやばいユーザビリティです。普通に自分がユーザ目線でどう使うかユースケースで考えればこんなことにはならないです。


 

エンジニアがUIを考える場合には、テキストボックスなのかチェックボックスなのかセレクトボックスなのかとかデフォルトの値は何がいいのか?などユーザはこういう利用シーンでこう使うことが多いはずだから、このUIなんです。が説明できればベストです。

 

 

求められそうな物を作る

あとはこれも可能であれば、、、求められそうな機能や仕様のポートフォリオを作れると安心です。例えば、口コミサイトや、ECサイト、顧客管理システムなどですかね。ただ、顧客管理システムみたいな業務系システムをポートフォリオにする場合は注意が必要ですね。

 

というのも、口コミサイトみたいな自分がユーザ目線に立ちやすいものはポートフォリオにしても比較的作りやすいですしUI的な間違いを犯しにくいです。

 

ただ、業務系は特殊なのでちょっと業務理解が必須ですし業務理解が浅いままポートフォリオを作っても評価の高いものを作るのは困難です。業務系システムをポートフォリオとして作る場合は事前にターゲット層にヒアリングして要件やUIを決めるといいです。

 

エンジニアのポートフォリオのアピール例

 

最後に事例を用いてエンジニアのポートフォリオをアピールする際のテンプレを書いておきます。技術面というよりかはUIやデザイン中心に書いていきます。

 

ポートフォリオとしては、○○を作っています。こちらを作成した理由は、XXです。(人柄出してもいいし、ビジネス的な課題提起としてもいい)

 

ユーザが〇〇という利用シーンにおいて、○○という課題があるのでそれを解決するためにXXというサイトを作成しています。

 

工夫したポイントとしては、〇〇という利用シーンにおいてはユーザがXXというところを気にしたりXXということを知りたいと思い、そういう部分を意識して作成しています。

 

実装中では初めての機能の実装をしたためバグも出ましたが、テストを行い拾って調べて解決することができました。エンジニアですがプロダクトを実際に作る立場として、ユーザが使いやすいプロダクトを作ることで貢献したいと思います

 

こんな感じで話せればエンジニアのポートフォリオのUI部分だったりのアピールとしては合格点です。技術部分は、ほかの記事を参照してください。(スイマセン)

 

まとめ

 

エンジニアのポートフォリオのアピールの仕方などを解説しました。特にweb系エンジニア狙いだったりする場合は、エンジニアもプロダクトをユーザ目線で作ることを求められるため参考にしてもらえればと思います。

 

最新情報をチェックしよう!