フロントエンドエンジニアのポートフォリオを作るコツ 【未経験から採用されるためにするべきこと】
フロントエンドエンジニアになりたい人「フロントエンドのエンジニアとして、ポートフォリを作ってアピールしたいけど、どうすれば効果的なのだろう？」
こういった疑問にお答えします。
結論としては、入ろうとしている企業の規模や業種によって、刺さりやすいポートフォリオを用意すべきで、可能ならそれぞれを複数作るべきです。細かい部分を含めて、フロントエンドエンジニアとして働いている僕がポートフォリオのポイントをお伝えします。
本記事の内容
- 未経験者がポートフォリオを作って企業に入社するときのポイント
- ポートフォリオはどうやって見せるか？
- ポートフォリオを作成する意味
- 面接をして採用するのは誰なのかが重要
未経験者がポートフォリオを作って企業に入社するときのポイント
具体的にどのようなポートフォリオを作るとよいかを挙げていきます。
基本的には、「見た目」「技術力」のどちらに力を入れてアピールするかになります。
Web制作会社
Web制作会社の顧客は、WordPressでホームページ制作やLP制作など中小企業が相手となります。それを意識して臨むようにします。
WordPressのオリジナルテーマでポートフォリオを作っておけると、かなりプラスです。
小さいWeb制作会社ほど、WordPressを使ってサイト制作する機会が多く、WordPressが使えることをアピールすると採用の可能性があがります。
WordPressの学習がまだの場合は、1ページの縦長でスタイリッシュな感じのホームページを作成するとよいと思います。
できるだけ新しめのCSSを使って構成する
ポートフォリオで、FlexBoxやGrid Layoutを使うなど新しめのCSSを使って、アピールすることをオススメします。
またIE11ではこのCSSは使えないなど、どのブラウザまで対応しているかなども理解し、添えて伝えるとよりよいと思います。
レスポンシブ対応する
PCとスマホの画面でレスポンシブにCSSが変わるように作ることは必須対応になるため、簡単でよいのでレスポンシブ対応はしておくようにします。
Sassを使えることをアピールする
SassはWeb制作会社でも使われることが多くなってきているので、使えるようにしておくとベターです。CSSが理解できていればSassの基本機能の理解は簡単です。Sassは機能が多いですが主要な機能のみ使えれば問題ありません。
jQueryやJavaScriptを使えることをアピールする
スムーススクロール、ハンバーガーメニュー、タブ、アコーディオンなどでjQueryやJavaScriptを実装して、JavaScriptを使えることをアピールします。
システム開発会社
開発会社は大規模プロジェクトが多く、システム開発の中でマークアップを担当することが多いです。Web制作会社でアピールすることに加えてさらにしっかりとしたポートフォリオを作り込む方がよくなります。
CSS設計がしっかりできているかどうかを見られる。
MindBEMdingやFLOCSSを使うことによって、初心者ではなくひとつ上のレベルだと認識されます。MindBEMdingやFLOCSSはコーディング規約でもよく使われるし、学習すればすぐにでも使えるものなので学習しておくことを強くオススメします。
逆に、Web制作会社の場合、スピード重視でCSS設計自体を理解している人がいないことが多いため、面接でアピールしても理解されないことが多いでしょう。
class以外にはCSS装飾しない。
開発会社などでコーディング規約がしっかりしているところでは、基本的にclass以外へのCSS装飾は基本禁止されています。例えば、idを振って装飾・タグに直接装飾ということはしません。
例）
<sytle>
/* ① classで装飾が基本 */
.block {
color: #f00;
}
/* ② idで装飾はNG */
#block {
color: #f00;
}
/* ③ タグに直接の装飾はNG */
.block span {
color: #f00;
}
</sytle>
<div class="block">①これはOK</div>
<div id="block">②これはNG</div>
<div class="block"><span>③これもNG</span></div>Web制作会社はこのあたりメチャクチャなことがほとんどなので、既存に合わせて書いてしまって問題ありません。
ただイチから自分1人で制作するサイトはMindBEMdingやFLOCSSを意識して書くといいと思います。
理由は後でポートフォリオとして転職時にポートフォリオとして紹介する際に、きちんとしたマークアップができることを示せるためです。
ReactやVueを使えることをアピール
あまり未経験でここまでできる人は稀だと思いますが、ReactやVueが使えるならアピールするとかなり強力です。
webpackの設定など環境については完全に理解していなくても大まかに理解できていればOKです。簡単なアプリを作ってWebにあげておけばよいと思います。
- ReduxやVuexまで実装できるとよいですが、このあたりは無しでもOKです。
- JavaScriptはES6で書くようにします。ReactやVueをES5で書くことはほぼ無いと思うので、ES6で書きましょう。
- ライフサイクルも少しでもよいので、できる限り軽く説明できるくらいまでは理解しておきましょう。
ポートフォリオはどうやって見せるか？
レンタルサーバーを借りるなどして簡単に確認してもらえるようにする
ポートフォリオは動くものをアクセスすれば簡単に見れるようにしておくことが重要です。面接官は忙しいので動くものを用意しておく方が、経験上見てもらえることが多いです。
サーバーのおすすめはエックスサーバーです。
WordPressなど簡単に設定でき、マルチホストに対応しているので複数ドメインの設定も可能です。またエックスサーバーはSSHでログインしてコンソールから操作することができ、Node.jsを使うことが可能です。ReactやVueの成果物をデプロイすることが可能になっています。
ドメインはエックスサーバーのサブドメインでよいですが、自分でドメインをとって公開した方が未経験者の場合はアピールにもなるのでよいかもしれません。ドメイン取得についてはどこでも構いませんが、ムームードメインがオススメです。
ソースコードの公開はGitHubを使う
GitHubが使えるならばGitHubで公開してGitHubも使えることをアピールします。
使い方がわからなければ作ったウェブサイトを公開して面談時にURLを伝えるだけでもOKです。WordPressのテーマを公開する場合などはテーマのファイルだけGitHubで公開すればよいと思います。すべてを公開する必要はありません。
また大規模なものを作るのでなく、小規模でコード量が少ない方が面接官のエンジニア側は確認しやすいです。
そのため小規模でありつつも、技術力をアピールできるエッセンスを入れたソースコードを書くべきで、何をアピールしたいかの意図を明確にしたポートフォリオを作ると効果的です。
ポートフォリオについては別紙を作っておくのがオススメ
通常の面接では、履歴書、職務経歴書を提出すると思います。経験者ならこれに加えてスキルシートを提出するかもしれません。
ポートフォリオの提出方法については、個人的なオススメは、GoogleスプレッドシートなどでポートフォリオのURLを載せた簡単な資料を作り、見せるという方法です。このスプレッドシートのURLを面談前に企業側へ送っておくのです。
凝ったものではなく、左にポートフォリオのキャプチャ、右にURLなどの説明を箇条書きでわかりやすく簡単に書くだけのシートです。
できれば、どういった意図で作っているのか（アピールできるポイントを列挙するなど）を書き、スクリーンショットを貼るなどして印刷もできるようにしておきます。できるだけわかりやすくするのがポイントです。
いちいち見てられないという担当者もいるので、URLさえシェアされればすぐにポートフォリオを見れる状態を作っておくとポイントが高いと思います。できる限り見る側の手間を減らすことがよいポートフォリオです。
技術力の高い面接官のエンジニアほどポートフォリオをよく見てくれることが多いです。
理由は採用で失敗したくないため、ポートフォリオを細かくみることによって、どれくらいの力量があるかの担保になるからです。GitHubのコードを見ることによってどのようなコードを書くかがわかれば、あとは技術知識を面談時に質問すればある程度の技術力が推測できると僕も思っています。
実際に面接官の立場になると、GitHubのコードを提出してきてくれるエンジニアはほとんどいないので、ポートフォリオがあるだけで相手の反応は全く違うでしょう。
デザインカンプはどうするべきか？
ポートフォリオのデザインカンプは無くてよいと思います。
デザインもできるということをアピールしたい場合は、デザインカンプをDropboxなどで共有できるようにしておき、URLをシェアすればよいでしょう。XDやfigmaならURL共有できるのでなお良いと思います。
最近では分業制が進んでいることが多く、デザインはデザイナーに任せるという方が多いためデザイン〜マークアップまでできることが大きなアドバンテージになりにくくなってきています。
もちろんデザインまでできるのはポイントが高いのですが、そういう会社は少なくなってきていると認識した方がよいかもしれません。逆にデザインからすべてをやってほしいと考えている会社もあると思うので、そういった会社には刺さる材料となるはずなので無駄ということはありません。
現場に入るとわかりますが、デザインを専門にやっている人はデザインのレベルが高いのはもちろん、作業スピードもかなり速いです。そしてマークアップエンジニアはマークアップになれているのでコーディングのスピードが速いわけです。
中小企業では特にスピード重視で案件を数多くこなすことになるため、スピードが重視され、中途半端に両方できるよりはまずはどちらかがスピーディーにできることが求められるはずです。
ポートフォリオを作成する意味
エージェントを通してフリーランスで企業に常駐する場合などは、ポートフォリオが見られることは非常に少ないです。
その理由はSESメインの企業が、自社の従業員をSESで企業に入れる際にポートフォリオを作って紹介するのではなく、スキルシートで過去の経験を見てもらって、面談で判断するということが多いためです。
きちんとしたポートフォリオは武器になる
以前フリーランスになる時に、エージェントへポートフォリオを提出した時に面談で見ることはないから意味がないと言われました。しかし実際の面談で運良く面接官のエンジニアにポートフォリオを見せたら、その場でGitHubのコードも見てくれ、ReactとES6のコードがしっかり書けているということでそれがきっかけで契約してもらえたことがあります。僕自身の経験からも相手によりますが、ポートフォリオは大きな武器になります。
ReactやVueなどの開発現場では、ポートフォリオがある方が強力です。
僕は面接官の立場で面談をしたことが何回もありますが、どんなコードを書くのかを判断したくてもポートフォリオを作ってくることはなく、過去の成果物もどれをその担当者が作ったのかや、詳細なコードは成果物からは見ることができない事が多いため、いつも困っていました。
もちろん、いい加減なプログラムをポートフォリオとして提出されればマイナスですが、多くの場合はポートフォリオがあった方が技術の担保となることが多いはずでプラスになると思います。
未経験者が企業に入る場合も１つでよいので作り込んだポートフォリオを提出すれば、採用される確率は格段に上がると思います。未経験者がポートフォリオを作る際はソースコードよりもサイトの見た目をきちんとした方がよく、ソースコードは見られないかもしれないので、無理にGitHubで公開したりする必要はないかもしれません。
面接をして採用するのは誰なのかが重要
面談して決定権を持っている人により、ポートフォリオで何を重視すべきなのかが変わってきます。
技術がわかっていない相手には、見た目の派手さ・きれいさを全面に押し出すことがよいです。
技術がわかっている相手には、技術的に何ができるのか、それを使える根拠（過去の制作物・ポートフォリオ）を伝えるようにします。
両方に対応できるのがベストですが、未経験者などは特に大変だと思うので、「見た目に力を入れるのか」「プログラムの中身に力を入れるのか」を意識して作るとアピールがしやすいと思います。
共通して「やる気」があることを示すことなどは必須ですが、今回はポートフォリオに絞って解説をします。
Web制作会社、開発会社をわけていますが、明確な切り分けがあるわけではないので目安として見て下さい。
小さいWeb制作会社
小規模な会社の多くの場合は技術がわからない社長が面談して判断します。現場のコーダーなどが同席する場合もあります。
社長が面談者の場合は以下をアピールするのが、効果があります。
- ポートフォリオの見た目がきれいであること（技術的なことはわからないため）
- WordPressを使っているなど素人でもわかりやすいポイントをアピールすること
- スピーディーに作業ができることをアピール
（案件を多く回すので、作業が速い人が好まれる傾向が強いため） - 売上に貢献したいということをアピール
（経営者は売上を上げたいと常に考えています）
現場の担当者が同席している場合は以下のことをアピールします。
- Sassが使える（使えなければ使えるようにしておきましょう。基礎は1日で対応可能です。）
- WordPress、jQueryなど技術的なアピールポイントがあれば伝える
経験が少なくてもやる気アピールをすれば、採用されることが多いイメージです。
大きめのWeb制作会社
規模が大きめの制作会社の場合は人数が多く、ディレクターや現場エンジニアが面接官のことが多いです。パターン別に見ていきます。
現場のエンジニア・技術のわかるディレクターが相手の場合
Sass、WordPress、jQuery、JavaScriptなど使える技術をポートフォリオの根拠を示しながらアピールします。ポートフォリオはどれくらいで作ったのか制作スピードを聞かれることもあると思います。
ポートフォリオのCSSや画像を整えてキレイにしておくと、技術力に不足があってもよい印象が与えられる可能性もあるので、軽くでいいので整えておく方がベターです。
技術がわかっていないディレクターひとりが面接官の場合
言い方が悪いですが、全く技術のことがわかっていないディレクターの方のみが面接官の場合です。
エンジニア出身でなくても技術的なことを理解をしているディレクターの方も多いのですが、エンジニアとデザイナーに指示をするだけのディレクターの方がいます。人間性を見ているだけとなるので、やる気アピールしましょう。技術的な用語を散りばめて話すとできる人だと思ってくれやすい傾向があります。
システム開発を受託している開発会社
通常は採用の責任者であるプロジェクトマネージャーと、エンジニアが同席します。
そのプロジェクトのエンジニア全員が忙しい時は、入る予定とは別プロジェクトのエンジニアが参加することも多いです。以下のことに注意してアピールします。
- 経験者ならこれまでの制作した実績と、どういった技術を使ったのかを伝えます。ポートフォリオを作っている場合はそれをベースにどういった技術が使えるかを追加でアピールします。
- 未経験者ならポートフォリオを中心に、何ができるかをアピールします。ここでも実際にその技術が使えるということをポートフォリオを担保にアピールすると説得力が増します。
- プロジェクトマネージャーなど売上にタッチしている人には、「やる気」だけでなく「売上に貢献したい」という視点でもアピールをすると好感を与えることができると思います。
まとめ：ポートフォリオはGitHubに上げて動くサンプルもサーバにアクセスすれば見れるようにしておくべき
ポートフォリオは個人的には絶対作っておくべきと思います。
きちんとしたポートフォリオを作れば、多くのケースで採用の突破口になるはずです。
GitHubのコードは短く、技術力を証明するようなエッセンスを込めたポートフォリオを作るのが効果的です。
参考になれば幸いです。
※当サイトでは一部のリンクについてアフィリエイトプログラムを利用して商品を紹介しています