エンジニアの転職

公開日:2020/05/17|最終更新日:2020/05/26

フロントエンドエンジニアを目指す大学生は必見!【書類選考で差をつけるポートフォリオ作成術】

フロントエンドエンジニアのポートフォリオのイメージ

「デザイナーじゃないのにポートフォリオ作るの?」という疑問をお持ちのそこのあなた!!実はエンジニアの選考でもポートフォリオの提出を求める企業が最近増えています!

特にその中でもweb制作会社などのフロントエンドエンジニア職はポートフォリオの提出を選考過程に含める企業も多いです。

そこでこの記事では、フロントエンドエンジニア職を志望する学生に役立つ、他の学生と差をつけるwebポートフォリオ作成のコツを紹介していきます。筆者はこのwebポートフォリオでweb制作会社の大手、IMJや博報堂アイ・スタジオ、電通クリエーティブX、ミツエーリンクスなどの書類選考兼ポートフォリオ選考を全て突破しました。フロントエンドエンジニアを目指す学生さんは是非参考にしてみてください!


そもそもポートフォリオって何?

疑問のイメージ

「ポートフォリオ」とは今まで作った作品をまとめた作品集のようなものです。自分の技術やセンス、今までの実績をアピールするためのもので、従来は紙媒体やPDF形式の資料を印刷し、直接企業に郵送して提出するタイプが主流ではありましたが、最近はwebポートフォリオサイトを作成して、選考時にメールやES(エントリーシート)等にそのURLを書いて企業に見ていただくというタイプが主流になりつつあります。

特にwebサイトなどの見た目を作るフロントエンドエンジニア職では各々自分のポートフォリオサイトを持っている学生をよく見かけます。少なくとも筆者の周りのフロントエンドエンジニアの学生はみんな持ってました(笑)。

なぜフロントエンドエンジニアでポートフォリオが必要なのか?

ノートパソコンのイメージ

これはフロントエンドエンジニアという職種の特徴が寄与しています。一般に、フロントエンドエンジニアはwebサイトやwebアプリの見た目をHTMLやCSS、JavaScriptを使ってコーディング・プログラムする仕事という認識がありますが、ただそれができるだけではこの職種は務まりません。

フロントエンドエンジニアはそのようなコーディング・プログラミングスキル以外に、「どうしたらこのwebサービスが使いやすくなるのか」「どうやったら付加価値を提供できるか」などのUIUXを追求して開発を行ういわばクリエイティブな思考力が求められる職種でもあるからなんです!

なのでフロントエンドエンジニア職の選考は単に技術力があるか否かだけでなくそういった観点も選考に含まれます。

ポートフォリオの作成プロセス

ポートフォリオの作成プロセス

いきなりコーディングは良くありません!まずはどんなコンテンツを掲載してどんなデザインで作るか、どんな技術を使うかを考えなければなりません。そして綿密にデザイン計画をしてから開発を行います。

webポートフォリオはいわばあなたの顔になります。クオリティが低ければ選考時の評価も少なからず影響します。自分が受ける企業のwebサイトがとても陳腐だと入社意欲も無くなりますよね。webポートフォリオも同じです。ポートフォリオで選考官に「この学生気になる!」と思わせられるのがベストです。

以下にポートフォリオのデザインからサーバーにアップするまでの手順を簡単に紹介します。是非参考にしてください!

1.ポートフォリオに掲載するコンテンツを決める

まずはポートフォリオに何を載せるかといったコンテンツを整理しましょう。自分の現段階のスキルや今までの実績、アウトプットをまとめましょう。

2.ポートフォリオのデザインを決定する

次にどんなデザインのwebサイトを作るかを考えます。技術力に自信があれば凝ったデザインやアニメーションで技術力をアピールしても構いませんが、コンテンツが見辛くなってしまっては本末転倒なので、筆者としては見やすさ重視を推奨します。

3.どんな技術を使って開発するかを決定(技術選定)し、開発を行う

何を使ってwebサイトを作るかを考えましょう。ブログを入れるのであればWordPressを導入するなど、手段は様々です。またこの開発で使った技術に関して、書類選考後の面接で問われる可能性もあります。エンジニアとしては技術力をアピールする機会にもなるので、熟慮しましょう。

4.ホスティング

一通り開発が終わったらホスティングをしましょう。サクラサーバーやエックスサーバーをレンタルしてホスティングする手段も構いませんが、もっと手取り早くホスティングしたいですよね。GitHubアカウントをお持ちでしたら、GitHubリポジトリと連携ができてホスティングが非常に楽に行える NetlifyNetlify がおすすめです!

フロントエンドエンジニアのポートフォリオでアピールをするには

アピールのイメージ

「HTMLとCSSとjQueryが使えてwebサイト作れるからフロントエンドエンジニアを目指そう!」と思っている方。正直に言います。HTML、CSS程度であれば独学で勉強してもある程度は身につきます。ましてやフロントエンドエンジニアを志す学生であればこれらのスキルは当然のごとく保持しています。

それらのスキルをアピールしたところで面接官からしたら「まぁ当然でしょう」と思われます。しかも現在は無料でホームページを作成してくれるツールもあるぐらいですから、もし技術力に自信が無い方はそういったwebサービスを利用してもいいかもしれません。

ではどうやって差別化を図るか。ポートフォリオ自体の開発技術でアピールするのであれば、JavaScriptのライブラリの React やフレームワークの Vue.js を使ってもいいかもしれません(筆者は当時 Gatsby.js というReactベースの静的サイトジェネレータを使って開発をしていました)。WordPressでブログを実装してみても面白いかもしれません。PHPを使って処理速度を工夫しても…とこのように工夫の余地は様々です。

プログラミング初心者におすすめなフレームワーク「Vue.js」超入門。

ここで何を言いたいかというと、HTML、CSS以外で何かアピールできるポイントを作った方が良いということです。ポートフォリオは書類選考だけのものではありません。その後の面接でもポートフォリオに関して質問されることもあります。ポートフォリオはES以外のもう一つの自己PRだと思ってください!

実際に筆者も面接時に「ポートフォリオの作成にあたって工夫したところは?」という質問をいくつも受けました。

掲載コンテンツで差をつける

掲載コンテンツで差をつけるイメージ

コンテンツの内容でも合否を分けると僕は思います。ここで私が実際に掲載したコンテンツの一部を紹介します!

1.GitHubアカウントへのリンク

これを掲載するには明確な意図があります。

それは面接官(エンジニア)にホスティングしていない過去の実績や作品を見てもらうため。ESにGitHubアカウントの記載を指示する企業もあります。それぐらいGitHubアカウントにあるリポジトリを評価対象に入れているということです。

実際に筆者も面接時に「GitHubに載っていた〇〇ってなんで作ろうと思ったの?」とGitHubリポジトリに関する質問も受けました。

2.実際に担当した制作案件

学生時代私はフリーランスでwebサイト開発の仕事をしていたため、クライアントに掲載許可をいただいた案件をポートフォリオに掲載しました。

もちろん案件以外の自分で開発したwebアプリなどのアウトプットも載せています。

3.お問い合わせフォーム

私はPHPができるということもあり、お問い合わせフォームをPHPで実装しました。

ポートフォリオサイトに連絡先用のメールアドレスを掲載した場合、スパムメールなど悪用されかねないということもあり、お問い合わせフォームで問い合わせ形式にした方が安心でした。

WordPressを使う方は「Contact Form 7」というプラグインを導入すると簡単にお問い合わせフォームを実装できます!


まとめ

参考になりましたか?ポートフォリオサイトはあなたの顔です。開発は余裕を持って行い、力の出し惜しみはしないよう全力を出しましょう。

もし技術力に自信がない場合は、この際ポートフォリオサイトで新しい技術に挑戦してみてもいい勉強になると思います。そしてそれが結果的に面接で話せるエピソードにもなります!

フロントエンドエンジニア職の新卒は社内に2~3人、場合によっては1人しか採用しないなどの非常に狭き門です。一番はポートフォリオを頑張るのではなくポートフォリオに載せることができる実績やアウトプットを残すことです。

手を動かして様々な経験を積んで充実したポートフォリオを作れるように頑張りましょう!

大学生向けのプログラミングスクール

大学生におすすめのプログラミングスクール5選!
  1. Tech Academy
    オンライン|学割あり|無料体験あり|分割払い(クレジットカードのみ)
  2. クリプテックアカデミア
    オンライン|大学生限定スクール|無料体験あり|分割払い(クレジットカードのみ)
  3. テックキャンプ プログラミング教養
    オンライン・オフライン(東京ほか)|各種割引あり|無料体験あり|分割払い(クレジットカードのみ)
  4. スキルハックス
    オンライン|サンプル動画(無料体験版)あり|クレジットカード・銀行振込
  5. GEEK JOB(ギークジョブ)
    オンライン・オフライン(東京)|マンツーマン|無料

就活におすすめのエージェント

就活エージェントおすすめ5選!
  1. キャリアチケット
    運営元:レバレジーズ株式会社|登録無料|就活セミナーあり|無料のコミュニティスペースあり
  2. 就職エージェントneo
    運営元:株式会社ネオキャリア|登録無料|合同説明会あり
  3. ジョブスプリング
    運営元:株式会社Roots|登録無料|公式サイトにて適性検査が可能
  4. 就職shop
    運営元:株式会社リクルートキャリア|面談予約無料|累計8500社から企業を紹介
  5. キャリアパーク就職エージェント
    運営元:ポート株式会社|無料相談|運営元は上場企業

-エンジニアの転職
-, , , , , , ,

関連記事

ビジネスマンとビルのイメージ

40代・未経験から機械設計エンジニアに転職するコツや、スキル・経験などを解説!年収・キャリアの話も!

現役「機械設計エンジニア」の池田さん(仮名)からアドバイス! 一般的には困難だと言われる40代からの転職。それが未経験からとなれば尚の事で、ものづくり系業界においてもそれは例外ではありません。 そこで …

Webエンジニア・プログラマー転職で未経験が準備すべき 【3つのこと】

未経験がWebエンジニア・Webプログラマーに転職をするためにやるべき【3つのこと】

皆さんは未経験からWEBエンジニア・WEBプログラマへの転職をするためにやるべきことをご存知ですか。 WEBエンジニア・WEBプログラマへの転職は準備するものも方法も普通の転職活動とは異なります。WE …

ノートパソコンでプログラミングするイメージ

先輩に聞いた!企業で働く「業務系プログラマー(常駐フリーランス)の1日」の仕事の流れと勤務時間や業務内容

トモヤさん(仮名) の場合 年齢 40代 性別 男性 会社の業種 銀行業務系、保険業務系、薬局業務系、物流。現在はフリーランス 担当の職種 業務系プログラマー(VB.netやC#)。現在は業務系システ …

未経験者がプログラマーとして採用される7つのポイント!

《面接官から見た》未経験者がプログラマー・エンジニアとして採用される7つのポイント!

この記事を読んでいる皆さんは、 「未経験なのにプログラマーやSEを目指すのは所詮無理・・・」 「プログラマーやエンジニアって理系出身ばかりで、文系が目指すには難しい職種」 というイメージをお持ちではな …

機械設計エンジニアの仕事内容

【未経験の転職】機械設計エンジニアの仕事内容を解説!必要なスキルや知識・経験とは?

本記事は、機械設計エンジニアへの転職を目指しているかたへ向けた記事となります。 現役の機械設計エンジニアである池田さん(仮名)に寄稿して頂きましたので、未経験から機械設計エンジニアやものづくり業界を目 …





マイナビクリエイター
ページのトップへ戻る