エンジニアの転職

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

更新日: ※本記事は[プロモーション]が含まれています

書類選考で 差をつける ポートフォリオ 作成術!

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

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

失敗しないWeb制作会社の選び方【フリーランスエンジニアを目指す未経験・学生必見】

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

フロントエンドエンジニアを目指す学生さんは是非参考にしてみてください!

エンジニア就活を最短で決めるなら!!

就活エージェント・サービスおすすめ【3選】

イロダステック(irodasTech)の公式サイトへ
イロダステック
レバテックルーキーの公式サイトへ
レバテックルーキー
キャリアチケットの公式サイトへ
キャリアチケット

○IT業界・エンジニア職に精通したアドバイザーが専属サポート!

○独自のカリキュラムで精度の高いマッチングを実現!

○スキル・経験に合った優良IT企業を紹介してもらえる!

○年間3,000以上の企業訪問で蓄積された豊富な情報量!

○エンジニア業界に精通したプロのアドバイザーが徹底支援!

○利用者のプロフィールを見た企業からスカウトが届く!

○丁寧なヒアリングで就活生の思いや強みなどを正確に理解!

○就活のプロが学生一人ひとりに最適な優良企業を提案!

○1社ずつ実施する選考対策で人事に刺さる”伝え方”をアドバイス!

https://tech.irodas.com/https://rookie.levtech.jp/https://careerticket.jp/

もっと多くのエンジニア志望者におすすめな就活エージェントを比較するなら「エンジニア志望者におすすめな就活エージェント9選!選び方と成功のコツを解説」という記事をご覧ください。IT業界に強い就活エージェントの特徴や強み、おすすめポイントを詳しく解説しています。未経験・文系もOK、もちろん完全無料なのでおすすめですよ!

エンジニア志望者におすすめな就活エージェント7選!選び方と成功のコツを解説

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

疑問のイメージ

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

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

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

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

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

JavaScript超入門|できることや学習方法など未経験者向けに解説!

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

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

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

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

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

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

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

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

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

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

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

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

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

4.ホスティング

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

格安サーバー → さくらのレンタルサーバー
高機能・安定性 → エックスサーバー
無料枠あり → Netlify

もっと詳しく、エンジニア向けレンタルサーバーについて比較したい方は、「初心者必見!レンタルサーバーおすすめ9選【現役エンジニアが推薦】」をご覧ください!料金や特徴、おすすめポイントの他、選び方についても解説しているため、初心者の方でも自分”ぴったり”のレンタルサーバーが見つかりますよ!

初心者必見!レンタルサーバーおすすめ9選【現役エンジニアが推薦】

エンジニア向けのおすすめ無料ポートフォリオサイト作成サービス5選+1

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

アピールのイメージ

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

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

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

Vue.js入門!初心者におすすめな理由や学習法をわかりやすく解説!

Reactで副業を始める!!【React入門編】できることや学習方法などを解説

PHPで副業を始める!学生のための【PHP入門編】(Macユーザー向け)転職したい社会人も!

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

今なら最大50%OFFも!
WordPressを手軽に始めるなら、ConoHa WINGがおすすめ。安価で管理画面が使いやすいので、学生や初心者でも安心して利用できます。
→ 1時間2円から、国内最速・高性能レンタルサーバー【ConoHa WING】

ConoHa WING

まとめ

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

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

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

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

もう一度「フロントエンドエンジニアを目指す大学生向けポートフォリオ作成術」を読む ↑

[広告・PR]:新卒でITエンジニアを目指すならここ

ITエンジニア専門の就職エージェントで「無料カウンセリング」を受けてみる

大学生におすすめなプログラミングスクール

大学生が、いち早くプログラミングを習得するために通うべきプログラミングスクールを5つ紹介します。

大学生におすすめのプログラミングスクール5選!

  1. DMM WEBCAMP 大学生向け就活対策コース|転職成功実績1,000名以上!
    大学生の就活に最適なカリキュラムとサポートが充実。新卒向け求人やインターンの紹介あり|オンライン|学割適用|全額返金保証|分割払い(クレジットカードのみ)|無料相談
  2. SAMURAI ENGINEER(侍エンジニア)|マンツーマン&オーダーメイドカリキュラム!
    オーダーメイドカリキュラムなので、一人ひとりの特性や伸ばしたいスキルに合わせて学習できます|オンライン|学割あり|分割払い(クレジットカードのみ)|無料カウンセリング
  3. GeekSalon(ギークサロン)|大学生専門のコミュニティ型プログラミングスクール!
    大学生限定の【コミュニティ型プログラミングスクール】です。3ヶ月でオリジナルアプリ公開までを経験可能です|オンラインか通学を選択|大学生限定スクール|分割払い(クレジットカード、デビットカード)|無料説明会
  4. プログラマーの種|大学生限定のコミュニティ型プログラミングスクール!
    【学生に特化したスクール】チーム開発やChat GPTを活用するなど、実践的なスキルを最短26週間で習得することが可能です|オンライン|大学生限定スクール|銀行口座振替とクレジットカードが利用可能|無料体験
  5. TechAcademy(テックアカデミー)|受講者数No.1のオンラインスクール!
    完全オンラインでメンターが受講生に一人ずつきます。32ものコースがあるので迷ったらここ|オンライン|学割あり|分割払い(クレジットカードのみ)|無料体験あり


もっと詳しく比較したい方は、『大学生におすすめのプログラミングスクール13選(安い+良質)!就職に強い!』という記事を参考にしてください。こちらでは、プログラミングスクールに通うメリットや選ぶ基準なども解説していますので、スクール選びに迷っている方は是非ご覧くださいね。

大学生におすすめのプログラミングスクール11選(安い+良質)!就職に強い!

エンジニア就活におすすめのエージェント【全て無料】

将来エンジニアを目指す学生の就職活動におすすめの就活エージェントをご紹介します。全てのエージェントが利用無料ですので、気になるサービスがあれば気軽に相談してみましょう!

就活エージェント・サービス5選!

  1. irodasTech(イロダステック)|ITエンジニア特化型の新卒エージェント!
    運営元:株式会社 irodas|無料会員登録|サービス満足度95%
  2. レバテックルーキー|新卒エンジニア就職エージェント!
    運営元:レバテック株式会社|登録無料|魅力的な企業からのスカウトあり
  3. キャリアチケット|新卒就活支援。量より質の就活準備!
    運営元:レバレジーズ株式会社|登録無料|就活セミナーあり|無料のコミュニティスペースあり
  4. エンジニア就活|ITエンジニアに特化した就活ナビサイト!
    運営元:シンクトワイス株式会社|無料会員登録|無料のプログラミング研修あり
  5. キャリアパーク就活エージェント|IT企業への独自ルートが強み!
    運営元:ポート株式会社|登録無料|最短1週間のスピード内定

もっと多くのエンジニア志望者におすすめな就活エージェントを比較するなら「エンジニア志望者におすすめな就活エージェント9選!選び方と成功のコツを解説」という記事をご覧ください。IT業界に強い就活エージェントの特徴や強み、おすすめポイントを詳しく解説しています。未経験・文系もOK、もちろん完全無料なのでおすすめですよ!

エンジニア志望者におすすめな就活エージェント7選!選び方と成功のコツを解説

人気のプログラミングスクール

未経験・社会人、学生におすすめなプログラミングスクールを比較するなら、「おすすめプログラミングスクール比較11選!社会人・未経験の転職・就職にも有利!」という記事を参考にしてください。

おすすめプログラミングスクール比較11選!社会人・未経験の転職・就職にも有利!

転職付き(転職保証型)のプログラミングスクールの詳細を知りたいかたは、「【無料あり】転職支援・保証型プログラミングスクール比較13選!社会人・学生さんの就職に強い!」をご覧いただき、自分の目標や目的にぴったりのスクールを見つけてくださいね。

【無料あり】転職支援・保証型プログラミングスクール比較11選!社会人・学生さんの就職に強い!

未経験からエンジニア転職するのにおすすめな転職サイト・転職エージェント

未経験可のエンジニア求人を探すなら「IT/Web系エンジニアにおすすめな転職サイトランキング15選!未経験OKあり」という記事を参考にしてください。IT・Web系に強い転職サイトや未経験求人を多数保有した転職エージェントを比較することができるので、未経験の方でも自分にぴったりの転職先を探すことができます。

大手エージェントdodaが公開した情報によると、2024年下半期のITエンジニアの転職市場は引き続き好調と予想されています。インフラエンジニアですと、上半期よりも増加傾向が見込まれています。特にセキュリティー・クラウド関連のスキルを保有したエンジニアの需要が増加傾向にあります。アプリケーションエンジニアですと、2025年問題に対応する企業からの業務可視化・効率化へのニーズが高く、SES企業やSIerでの未経験者の積極採用もおこなわれています。インフラエンジニアの転職では、LPIC2~3/LinuC2~3、CCNP、AWS認定資格、IPA関連資格などの資格・経験が評価されやすく、アプリケーションエンジニアの転職では、資格保有が直接採用に結びつくわけではありませんが、Oracle系の資格、AWSやAzureといったクラウド関連の資格、応用情報技術者などのIT系の資格やビジネス力をアピールできると有利に働くでしょう。最短かつ確実に内定を勝ち取るためにも、自身の『棚卸し』はプロである転職エージェントを積極的に活用しましょう! ※引用:https://doda.jp/guide/market/001.html

IT/Web系エンジニアにおすすめな転職サイトランキング11選!未経験OKあり

フロントエンドエンジニアに強い転職サイト・求人サイトを探すなら、「フロントエンドエンジニアの求人ならここ→おすすめ転職サイト14選!未経験OKあり」という記事がおすすめ。年収・キャリアアップはもちろん、未経験OKな求人を多数保有した転職・求人サイトを徹底的に比較できますよ!

フロントエンドエンジニアの求人ならここ→おすすめ転職サイト9選!未経験OKあり

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

関連記事

リモートワークでダラダラと仕事をしないコツを【現役システムエンジニアが解説】

リモートワークでダラダラと仕事をしないコツを【現役システムエンジニアが解説】

システムエンジニアはリモートワークと相性のよい職種の一つではないでしょうか。基本的にパソコン一つあれば完結できる仕事が多いため、出社しなくても仕事は可能です。パンデミックの影響を受けて、リモートワーク …

エンジニア副業40代で目指す収入アップ!初心者でも挑戦しやすい理由とは

エンジニア副業40代で目指す収入アップ!初心者でも挑戦しやすい理由とは

副業を検討する40代のエンジニアの中には、「本業を続けながら、どのように収入を増やせるのか」「未経験分野に挑戦するのは難しいのではないか」と不安を抱く方も多いでしょう。特に土日や週10時間といった限ら …

新人エンジニアが身につけておくべきスキルを解説!これを読んで転職・就職に活かそう!

新人エンジニアが身につけておくべきスキルを解説!これを読んで転職・就職に活かそう!

イラスト素材:https://loosedrawing.com/ 今回はエンジニア転職をするにあたって、企業に就業する際に最低限必要になるスキルを紹介します。 この記事の対象となる方 プログラミングに …

フリーランスのAIエンジニアになる完全ガイド【未経験者は必見】

フリーランスのAIエンジニアになる完全ガイド【未経験者は必見】

フリーランスとしての自由を求めつつ、AIエンジニアリングのスキルを活かしたいあなたへ。 この道を志す多くの方が抱える不安や疑問を解決するために、「フリーランスAIエンジニアになる完全ガイド」をご紹介し …

文系女子がエンジニアとして輝ける【3つのポイント】現役女性エンジニアが解説!

文系女子がエンジニアとして輝ける【3つのポイント】現役女性エンジニアが解説!

感染症による雇用不安や社会の急速なIT化が進み、就職・転職でエンジニアを目指す人が増えています。 他職種に比べ待遇も悪くない上、これからますます需要の高まりが見込まれ、「手に職」をつけたい人にとっては …

[PR]:
お得なキャンペーン中!!

転ストの中の人

  • 運営者のstaff H
  • 運営者のstaff M

エンジニア歴15年のstaffHとWebデザイナー・ディレクター歴20年のstaffMの2名が中心となりこのサイトを運営しています。転職/就職やフリーランスへの転向、未経験からのプログラミング学習など、これから”新しい一歩を踏み出そうとしている、エンジニア・クリエイター”に役立つ情報を発信しています。

プロフィール詳細 / Twitter