「デザイナーじゃないのにポートフォリオ作るの？」という疑問をお持ちのそこのあなた！！実はエンジニアの選考でもポートフォリオの提出を求める企業が最近増えています！
特にその中でもweb制作会社などのフロントエンドエンジニア職はポートフォリオの提出を選考過程に含める企業も多いです。
そこでこの記事では、フロントエンドエンジニア職を志望する学生に役立つ、他の学生と差をつけるwebポートフォリオ作成のコツを紹介していきます。筆者はこのwebポートフォリオでweb制作会社の大手、IMJや博報堂アイ・スタジオ、電通クリエーティブX、ミツエーリンクスなどの書類選考兼ポートフォリオ選考を全て突破しました。
フロントエンドエンジニアを目指す学生さんは是非参考にしてみてください！
就活エージェント・サービスおすすめ【3選】
 イロダステック |  レバテックルーキー |  キャリアチケット |
|---|---|---|
○IT業界・エンジニア職に精通したアドバイザーが専属サポート！ ○独自のカリキュラムで精度の高いマッチングを実現！ ○スキル・経験に合った優良IT企業を紹介してもらえる！ | ○年間3,000以上の企業訪問で蓄積された豊富な情報量！ ○エンジニア業界に精通したプロのアドバイザーが徹底支援！ ○利用者のプロフィールを見た企業からスカウトが届く！ | ○丁寧なヒアリングで就活生の思いや強みなどを正確に理解！ ○就活のプロが学生一人ひとりに最適な優良企業を提案！ ○1社ずつ実施する選考対策で人事に刺さる”伝え方”をアドバイス！ |
| https://tech.irodas.com/ | https://rookie.levtech.jp/ | https://careerticket.jp/ |
目次
そもそもポートフォリオって何？
「ポートフォリオ」とは今まで作った作品をまとめた作品集のようなものです。自分の技術やセンス、今までの実績をアピールするためのもので、従来は紙媒体やPDF形式の資料を印刷し、直接企業に郵送して提出するタイプが主流ではありましたが、最近はwebポートフォリオサイトを作成して、選考時にメールやES(エントリーシート)等にそのURLを書いて企業に見ていただくというタイプが主流になりつつあります。
特にwebサイトなどの見た目を作るフロントエンドエンジニア職では各々自分のポートフォリオサイトを持っている学生をよく見かけます。少なくとも筆者の周りのフロントエンドエンジニアの学生はみんな持ってました(笑)。
なぜフロントエンドエンジニアでポートフォリオが必要なのか？
これはフロントエンドエンジニアという職種の特徴が寄与しています。一般に、フロントエンドエンジニアはwebサイトやwebアプリの見た目をHTMLやCSS、JavaScriptを使ってコーディング・プログラムする仕事という認識がありますが、ただそれができるだけではこの職種は務まりません。
フロントエンドエンジニアはそのようなコーディング・プログラミングスキル以外に、「どうしたらこのwebサービスが使いやすくなるのか」「どうやったら付加価値を提供できるか」などのUIやUXを追求して開発を行ういわばクリエイティブな思考力が求められる職種でもあるからなんです！
なのでフロントエンドエンジニア職の選考は単に技術力があるか否かだけでなくそういった観点も選考に含まれます。
ポートフォリオの作成プロセス
いきなりコーディングは良くありません！まずはどんなコンテンツを掲載してどんなデザインで作るか、どんな技術を使うかを考えなければなりません。そして綿密にデザイン計画をしてから開発を行います。
webポートフォリオはいわばあなたの顔になります。クオリティが低ければ選考時の評価も少なからず影響します。自分が受ける企業のwebサイトがとても陳腐だと入社意欲も無くなりますよね。webポートフォリオも同じです。ポートフォリオで選考官に「この学生気になる！」と思わせられるのがベストです。
以下にポートフォリオのデザインからサーバーにアップするまでの手順を簡単に紹介します。是非参考にしてください！
1.ポートフォリオに掲載するコンテンツを決める
まずはポートフォリオに何を載せるかといったコンテンツを整理しましょう。自分の現段階のスキルや今までの実績、アウトプットをまとめましょう。
2.ポートフォリオのデザインを決定する
次にどんなデザインのwebサイトを作るかを考えます。技術力に自信があれば凝ったデザインやアニメーションで技術力をアピールしても構いませんが、コンテンツが見辛くなってしまっては本末転倒なので、筆者としては見やすさ重視を推奨します。
3.どんな技術を使って開発するかを決定(技術選定)し、開発を行う
何を使ってwebサイトを作るかを考えましょう。ブログを入れるのであればWordPressを導入するなど、手段は様々です。またこの開発で使った技術に関して、書類選考後の面接で問われる可能性もあります。エンジニアとしては技術力をアピールする機会にもなるので、熟慮しましょう。
4.ホスティング
一通り開発が終わったらホスティングをしましょう。さくらのレンタルサーバー
やエックスサーバー
をレンタルしてホスティングする手段も構いませんが、もっと手取り早くホスティングしたいですよね。GitHubアカウントをお持ちでしたら、GitHubリポジトリと連携ができてホスティングが非常に楽に行える Netlify がおすすめです！
格安サーバー → さくらのレンタルサーバー
高機能・安定性 → エックスサーバー
無料枠あり → Netlify
なお、ポートフォリオ作りをより高いレベルで進めたい方や、現役エンジニアから実務レベルのコードレビューを受けたい方は、就活に強いポートフォリオを作成できるプログラミングスクールを活用してみるのもおすすめです。
フロントエンドエンジニアのポートフォリオでアピールをするには
「HTMLとCSSとjQueryが使えてwebサイト作れるからフロントエンドエンジニアを目指そう！」と思っている方。正直に言います。HTML、CSS程度であれば独学で勉強してもある程度は身につきます。ましてやフロントエンドエンジニアを志す学生であればこれらのスキルは当然のごとく保持しています。
それらのスキルをアピールしたところで面接官からしたら「まぁ当然でしょう」と思われます。しかも現在は無料でホームページを作成してくれるツールもあるぐらいですから、もし技術力に自信が無い方はそういったwebサービスを利用してもいいかもしれません。
ではどうやって差別化を図るか。ポートフォリオ自体の開発技術でアピールするのであれば、JavaScriptのライブラリの React やフレームワークの Vue.js を使ってもいいかもしれません（筆者は当時 Gatsby.js というReactベースの静的サイトジェネレータを使って開発をしていました）。WordPressでブログを実装してみても面白いかもしれません。PHP を使って処理速度を工夫しても…とこのように工夫の余地は様々です。
ここで何を言いたいかというと、HTML、CSS以外で何かアピールできるポイントを作った方が良いということです。ポートフォリオは書類選考だけのものではありません。その後の面接でもポートフォリオに関して質問されることもあります。ポートフォリオはES以外のもう一つの自己PRだと思ってください！
実際に筆者も面接時に「ポートフォリオの作成にあたって工夫したところは？」という質問をいくつも受けました。
掲載コンテンツで差をつける
コンテンツの内容でも合否を分けると僕は思います。ここで私が実際に掲載したコンテンツの一部を紹介します！
1.GitHubアカウントへのリンク
これを掲載するには明確な意図があります。
それは面接官(エンジニア)にホスティングしていない過去の実績や作品を見てもらうため。ESにGitHubアカウントの記載を指示する企業もあります。それぐらいGitHubアカウントにあるリポジトリを評価対象に入れているということです。
実際に筆者も面接時に「GitHubに載っていた〇〇ってなんで作ろうと思ったの？」とGitHubリポジトリに関する質問も受けました。
2.実際に担当した制作案件
学生時代私はフリーランスでwebサイト開発の仕事をしていたため、クライアントに掲載許可をいただいた案件をポートフォリオに掲載しました。
もちろん案件以外の自分で開発したwebアプリなどのアウトプットも載せています。
3.お問い合わせフォーム
私はPHPができるということもあり、お問い合わせフォームをPHPで実装しました。
ポートフォリオサイトに連絡先用のメールアドレスを掲載した場合、スパムメールなど悪用されかねないということもあり、お問い合わせフォームで問い合わせ形式にした方が安心でした。
WordPressを使う方は「Contact Form 7」というプラグインを導入すると簡単にお問い合わせフォームを実装できます！
がおすすめ。安価で管理画面が使いやすいので、学生や初心者でも安心して利用できます。→ 1時間2円から、国内最速・高性能レンタルサーバー【ConoHa WING】
まとめ
参考になりましたか？ポートフォリオサイトはあなたの顔です。開発は余裕を持って行い、力の出し惜しみはしないよう全力を出しましょう。
もし技術力に自信がない場合は、この際ポートフォリオサイトで新しい技術に挑戦してみてもいい勉強になると思います。そしてそれが結果的に面接で話せるエピソードにもなります！
フロントエンドエンジニア職の新卒は社内に2〜3人、場合によっては1人しか採用しないなどの非常に狭き門です。一番はポートフォリオを頑張るのではなくポートフォリオに載せることができる実績やアウトプットを残すことです。
手を動かして様々な経験を積んで充実したポートフォリオを作れるように頑張りましょう！
もう一度「フロントエンドエンジニアを目指す大学生向けポートフォリオ作成術」を読む ↑
大学生におすすめなプログラミングスクール
大学生活の限られた時間の中で、市場価値の高いスキルを身に付けるにはスクール選びが重要です。
学業やアルバイト、就活準備とも無理なく両立できるよう、ここでは以下のメリットがあるスクールをピックアップしました。
- 同世代の仲間と切磋琢磨できる「大学生特化コース」がある
- 一般価格よりも圧倒的にお得な「学割」が利用できる
- 試験期間や帰省、アルバイトなど、状況に合わせてマイペースに学習できる
それぞれの特徴を比較しながら、自分に最適な環境を選んでみましょう！
- 【就活特化】プログラミングも内定対策も、学生のうちに進めるなら、テラキャン プログラミング（旧：DMM WEBCAMP） 大学生向け就活対策コース。大学生の就活に最適なカリキュラムとサポートが充実。新卒向け求人やインターンの紹介あり。｜オンライン｜学割適用｜全額返金保証｜分割払い（クレジットカードのみ）｜「転職成功実績1,000名以上！」無料相談はこちらから
- 【マンツーマン】就活で語れるポートフォリオを、確実に作るなら、SAMURAI ENGINEER（侍エンジニア）。オーダーメイドカリキュラムなので、一人ひとりの特性や伸ばしたいスキルに合わせて学習できます。｜オンライン｜学割あり｜分割払い（クレジットカードのみ）｜「受講生の継続率 97.9%！」無料カウンセリングはこちら
- 【完全無料】学習からIT就職まで、マンツーマンで進めるなら、ウズカレIT。未経験を対象に「エンジニアスキルの習得から就職」までがセットになったコースです。しかも【完全無料】です（違約金等なし）｜オンライン｜35歳以下｜完全無料｜「わずか1ヶ月でエンジニアデビュー！」無料カウンセリングはこちら
- 【完全無料】30日間で、就活で見せられるWebサイトを作るなら、ZeroPlus Gate（ゼロプラス ゲート）。【完全無料・質問し放題】30日間のプログラミング学習で副業に必要なWeb制作スキルを習得します。｜オンライン｜完全無料｜30日間｜オンデマンド教材｜「30日間＋0円でWeb制作スキルを習得！」簡単60秒の申込みはこちら
- 【大学生限定】就活で差がつくオリジナル作品を作るなら、CryptechAcademia（クリプテックアカデミア）。大学生のためのオンラインスクール。現役エンジニアがマンツーマンでサポートしてくれます。ポートフォリオの作成支援も充実。｜オンライン｜マンツーマン｜分割払い（クレジットカードのみ）｜「大学生限定スクール！」無料体験レッスンはこちら
。大学生の就活に最適なカリキュラムとサポートが充実。新卒向け求人やインターンの紹介あり。もっと詳しく比較したい方は、『大学生におすすめのプログラミングスクール15選（安い＋良質）！就職に強い！』という記事を参考にしてください。こちらでは、プログラミングスクールに通うメリットや選ぶ基準なども解説していますので、スクール選びに迷っている方は是非ご覧くださいね。
エンジニア就活におすすめのエージェント【全て無料】
将来エンジニアを目指す学生の就職活動におすすめの就活エージェントをご紹介します。全てのエージェントが利用無料ですので、気になるサービスがあれば気軽に相談してみましょう！
- irodasTech（イロダステック）｜ITエンジニア特化型の新卒エージェント！
未経験からエンジニアを目指す方に特化したサポートが魅力の就活エージェントです。個別面談では、応募者のスキルやキャリアの目標に応じて最適な求人を提案してくれます。また、企業とのマッチングに力を入れており、未経験者でも安心して挑戦できる環境が整っています。さらに、就職後もキャリア相談に応じるフォロー体制があるため、長期的な視点でキャリア形成をサポートしてくれる点も評価が高いです。
「優良IT企業の内定獲得を目指す」irodasTech（イロダステック）の無料登録はこちら - レバテックルーキー｜新卒エンジニア就職エージェント！
IT・Web業界に特化した就活エージェントで、豊富な求人案件を取り扱っています。未経験者から経験者まで幅広い応募者を対象としており、専門知識を持つアドバイザーがキャリアの悩みや希望に寄り添った提案をしてくれます。また、企業の採用基準を熟知しているため、応募書類の添削や面接対策も的確で信頼性があります。特に「エンジニアとしての実力を評価してほしい」という方におすすめです。
「8,000社以上の企業情報を保有！」レバテックルーキーの無料登録はこちら - ユニゾンキャリア就活｜IT・Web業界に特化した支援！
IT・Web業界への就活支援に特化したエージェントです。理系・文系問わず優良企業への内定実績が多数あり、『最短10日』での内定獲得を可能としています。キャリアアドバイザー全員がIT業界に精通しているため、業界での働き方やキャリアアップについてなど、リアルな実情を丁寧に説明してくれます。また、ユニゾンキャリア利用者は『完全無料』でITスクールを利用できるのは他にはないメリットです。
「口コミ評価NO.1！」ユニゾンキャリア就活の無料登録はこちら - キャリアセレクト｜大手企業へのコネクションに強み！
未経験からエンジニアを目指す方に特化したサポートが魅力の就活エージェントです。個別面談では、応募者のスキルやキャリアの目標に応じて最適な求人を提案してくれます。また、企業とのマッチングに力を入れており、未経験者でも安心して挑戦できる環境が整っています。さらに、就職後もキャリア相談に応じるフォロー体制があるため、長期的な視点でキャリア形成をサポートしてくれる点も評価が高いです。
「内定納得率 99.8%！」キャリアセレクトの無料登録はこちら - TECH-BASE 就活エージェント｜利用者満足度の高いサービス！
エンジニア就活をおこなう学生への支援実績が10年以上あるエージェントです。Web・ゲーム・ソフトウェアに特化しており、未経験からでもエンジニアを目指せるよう手厚くサポートしてくれます。また、大手企業とのコネクションも強固で、約200社の優良IT企業と繋がれることに強みを持ちます。独自の推薦枠を活用することで短期間で内定を獲得できたり、面接後のフィードバックを活かして内定獲得率を向上させられるのも魅力的なポイントです。
「アドバイザー対応力 第2位！」TECH-BASE 就活エージェントの無料登録はこちら
｜IT・Web業界に特化した支援！
｜利用者満足度の高いサービス！もっと多くのエンジニア志望者におすすめな就活エージェントを比較するなら「エンジニア志望者におすすめな就活エージェント11選！選び方と成功のコツを解説」という記事をご覧ください。IT業界に強い就活エージェントの特徴や強み、おすすめポイントを詳しく解説しています。未経験・文系もOK、もちろん完全無料なのでおすすめですよ！
フロントエンドが学べるプログラミングスクール
フロントエンドの学習に強いプログラミングスクールを紹介します。
- DMM WEBCAMP 学習コース｜フロントエンドコース
モダンなフロントエンド技術を使った、自分だけのWebサービスを公開できるレベルを目指せます - ZeroPlus（ゼロプラス）｜Webデザインコース
JSやWebデザイン、WordPressなどフリーランスを目指せるスキルを網羅的に学習できます - 忍者CODE
業界最安クラスの受講料と現役エンジニアのサポートで、未経験からプロエンジニアが目指せる人気スクールです - CodeCamp（コードキャンプ）
完全オンラインだから全国どこからでも受講可能。朝7時〜夜23時まで現役エンジニアの講師に質問し放題 - nests（ネスト）
現役クリエイター・エンジニアの指導をオンラインor通学で受けられます。受講・卒業生に向けた求人・インターン紹介あり
もっと詳しい情報を見ながら比較したい方は、「フロントエンドエンジニアを目指せる！おすすめプログラミングスクール5選！」という記事を参考にしてください。
- 転職に差がつくポートフォリオの作り方を未経験エンジニア向けに解説【参考・例あり】
- 【就活生必見】未経験でITエンジニアを目指せる資格5選！文系学生にもおすすめ
- 【IT企業の探し方】エンジニアになりたい学生必見！新卒就活におけるIT企業の選び方を解説します！
- 文系未経験がITエンジニアに転職成功する方法を解説｜ポートフォリオを作成・準備しよう
- エンジニア向けのおすすめ無料ポートフォリオサイト作成サービス5選+1
- 失敗しないWeb制作会社の選び方【フリーランスエンジニアを目指す未経験・学生必見】
- エンジニア就活と技術面接対策【エンジニア就職を目指す大学生必見】
- 自社開発の魅力とは!?受託開発と何が違うのか?【エンジニア就活生必見】
- 未経験がWebエンジニア・Webプログラマーに転職をするためにやるべき【3つのこと】
- Vue.js入門！初心者におすすめな理由や学習法をわかりやすく解説！
- Reactで副業を始める！！【React入門編】できることや学習方法などを解説
- 未経験からWebエンジニアへ転職する秘訣を実体験をもとに解説！
