WEBCAMP】即戦力スキルを最短で習得!エンジニア・クリエイター特化サイト『転スト』は、IT・Web転職に役立つ情報を幅広くお届け。「デザイナーじゃないのにポートフォリオ作るの?」という疑問をお持ちのそこのあなた!!実はエンジニアの選考でもポートフォリオの提出を求める企業が最近増えています!特にその中でもweb制作会社などのフロントエンドエンジニア職はポートフォリオの提出を選考過程に含める企業も多いです。そこでこの記事では、フロントエンドエンジニア職を志望する学生に役立つ、他の学生と差をつけるwebポートフォリオ作成のコツを紹介していきます。筆者はこのwebポートフォリオでweb制作会社の大手、IMJや博報堂アイ・スタジオ、電通クリエーティブX、ミツエーリンクスなどの書類選考兼ポートフォリオ選考を全て突破しました。未経験からエンジニア転職するのにおすすめな転職サイト・転職エージェントそもそもポートフォリオって何?「ポートフォリオ」とは今まで作った作品をまとめた作品集のようなものです。自分の技術やセンス、今までの実績をアピールするためのもので、従来は紙媒体やPDF形式の資料を印刷し、直接企業に郵送して提出するタイプが主流ではありましたが、最近はwebポートフォリオサイトを作成して、選考時にメールやES(エントリーシート)等にそのURLを書いて企業に見ていただくというタイプが主流になりつつあります。webサイトなどの見た目を作るフロントエンドエンジニア職では各々自分のポートフォリオサイトを持っている学生をよく見かけます。少なくとも筆者の周りのフロントエンドエンジニアの学生はみんな持ってました(笑)。フロントエンドエンジニアでポートフォリオが必要なのか?これはフロントエンドエンジニアという職種の特徴が寄与しています。一般に、フロントエンドエンジニアはwebサイトやwebアプリの見た目をHTMLやCSS、JavaScriptを使ってコーディング・プログラムする仕事という認識がありますが、ただそれができるだけではこの職種は務まりません。JavaScript超入門|できることや学習方法など未経験者向けに解説!フロントエンドエンジニアはそのようなコーディング・プログラミングスキル以外に、「どうしたらこのwebサービスが使いやすくなるのか」「どうやったら付加価値を提供できるか」などのUIやUXを追求して開発を行ういわばクリエイティブな思考力が求められる職種でもあるからなんです!なのでフロントエンドエンジニア職の選考は単に技術力があるか否かだけでなくそういった観点も選考に含まれます。ポートフォリオの作成プロセスいきなりコーディングは良くありません!まずはどんなコンテンツを掲載してどんなデザインで作るか、どんな技術を使うかを考えなければなりません。綿密にデザイン計画をしてから開発を行います。webポートフォリオはいわばあなたの顔になります。クオリティが低ければ選考時の評価も少なからず影響します。自分が受ける企業のwebサイトがとても陳腐だと入社意欲も無くなりますよね。webポートフォリオも同じです。ポートフォリオで選考官に「この学生気になる!」と思わせられるのがベストです。以下にポートフォリオのデザインからサーバーにアップするまでの手順を簡単に紹介します。参考にしてください!1.ポートフォリオに掲載するコンテンツを決めるまずはポートフォリオに何を載せるかといったコンテンツを整理しましょう。自分の現段階のスキルや今までの実績、アウトプットをまとめましょう。2.ポートフォリオのデザインを決定する次にどんなデザインのwebサイトを作るかを考えます。技術力に自信があれば凝ったデザインやアニメーションで技術力をアピールしても構いませんが、コンテンツが見辛くなってしまっては本末転倒なので、筆者としては見やすさ重視を推奨します。3.どんな技術を使って開発するかを決定(技術選定)し、開発を行う何を使ってwebサイトを作るかを考えましょう。ブログを入れるのであればWordPressを導入するなど、手段は様々です。この開発で使った技術に関して、書類選考後の面接で問われる可能性もあります。エンジニアとしては技術力をアピールする機会にもなるので、熟慮しましょう。4.ホスティング一通り開発が終わったらホスティングをしましょう。さくらのレンタルサーバーやエックスサーバーをレンタルしてホスティングする手段も構いませんが、もっと手取り早くホスティングしたいですよね。Netlifyエンジニア向けのおすすめ無料ポートフォリオサイト作成サービス5選+1フロントエンドエンジニアのポートフォリオでアピールをするには「HTMLとCSSとjQueryが使えてwebサイト作れるからフロントエンドエンジニアを目指そう!」と思っている方。HTML、CSS程度であれば独学で勉強してもある程度は身につきます。フロントエンドエンジニアを志す学生であればこれらのスキルは当然のごとく保持しています。それらのスキルをアピールしたところで面接官からしたら「まぁ当然でしょう」と思われます。現在は無料でホームページを作成してくれるツールもあるぐらいですから、もし技術力に自信が無い方はそういったwebサービスを利用してもいいかもしれません。やって差別化を図るか。いうReactベースの静的サイトジェネレータを使って開発をしていました)。WordPressでブログを実装してみても面白いかもしれません。使って処理速度を工夫しても...とこのように工夫の余地は様々です。Vue.js入門!初心者におすすめな理由や学習法をわかりやすく解説!Reactで副業を始める!!【React入門編】できることや学習方法などを解説PHPで副業を始める!学生のための【PHP入門編】(Macユーザー向け)転職したい社会人も!ここで何を言いたいかというと、HTML、CSS以外で何かアピールできるポイントを作った方が良いということです。ポートフォリオは書類選考だけのものではありません。その後の面接でもポートフォリオに関して質問されることもあります。ポートフォリオはES以外のもう一つの自己PRだと思ってください!実際に筆者も面接時に「ポートフォリオの作成にあたって工夫したところは?」という質問をいくつも受けました。掲載コンテンツで差をつけるコンテンツの内容でも合否を分けると僕は思います。ここで私が実際に掲載したコンテンツの一部を紹介します!1.GitHubアカウントへのリンクこれを掲載するには明確な意図があります。それは面接官(エンジニア)にホスティングしていない過去の実績や作品を見てもらうため。ESにGitHubアカウントの記載を指示する企業もあります。それぐらいGitHubアカウントにあるリポジトリを評価対象に入れているということです。実際に筆者も面接時に「GitHubに載っていた〇〇ってなんで作ろうと思ったの?」とGitHubリポジトリに関する質問も受けました。フリーランスでwebサイト開発の仕事をしていたため、クライアントに掲載許可をいただいた案件をポートフォリオに掲載しました。案件以外の自分で開発したwebアプリなどのアウトプットも載せています。3.お問い合わせフォーム私はPHPができるということもあり、お問い合わせフォームをPHPで実装しました。ポートフォリオサイトに連絡先用のメールアドレスを掲載した場合、スパムメールなど悪用されかねないということもあり、お問い合わせフォームで問い合わせ形式にした方が安心でした。安価で管理画面が使いやすいので、学生や初心者でも安心して利用できます。WINGまとめ参考になりましたか?ポートフォリオサイトはあなたの顔です。開発は余裕を持って行い、力の出し惜しみはしないよう全力を出しましょう。技術力に自信がない場合は、この際ポートフォリオサイトで新しい技術に挑戦してみてもいい勉強になると思います。それが結果的に面接で話せるエピソードにもなります!フロントエンドエンジニア職の新卒は社内に2~3人、場合によっては1人しか採用しないなどの非常に狭き門です。一番はポートフォリオを頑張るのではなくポートフォリオに載せることができる実績やアウトプットを残すことです。↑[PR]:新卒でITエンジニアを目指すならここITエンジニア専門の就職エージェントで「無料カウンセリング」を受けてみる大学生におすすめなプログラミングスクール大学生が、いち早くプログラミングを習得するために通うべきプログラミングスクールを5つ紹介します。大学生向け就活対策コース|転職成功実績1,000名以上!大学生の就活に最適なカリキュラムとサポートが充実。ENGINEER(侍エンジニア)|マンツーマン&オーダーメイドカリキュラム!オーダーメイドカリキュラムなので、一人ひとりの特性や伸ばしたいスキルに合わせて学習できます|オンライン|学割あり|分割払い(クレジットカードのみ)|無料カウンセリングTechAcademy(テックアカデミー)|受講者数No.1のオンラインスクール!完全オンラインでメンターが受講生に一人ずつきます。32ものコースがあるので迷ったらここ|オンライン|学割あり|分割払い(クレジットカードのみ)|無料体験ありレバテックカレッジ|大学生/大学院生限定スクール!人材有名エージェントのレバテックが運営する大学生/大学院生限定のスクール。|オンラインか通学を選択|就活支援あり|分割払い(クレジットカードのみ)|無料相談会GeekSalon(ギークサロン)|大学生専門のプログラミングコミュニティ!大学生限定の仲間ができる『プログラミングコミュニティ』です。|オンラインか通学を選択|大学生限定スクール|分割払い(クレジットカード、デビットカード)|無料説明会もっと詳しく比較したい方は、『大学生におすすめのプログラミングスクール11選(安い+良質)!就職に強い!』という記事を参考にしてください。こちらでは、プログラミングスクールに通うメリットや選ぶ基準なども解説していますので、スクール選びに迷っている方は是非ご覧くださいね。将来エンジニアを目指す学生の就職活動におすすめの就活エージェントをご紹介します。全てのエージェントが利用無料ですので、気になるサービスがあれば気軽に相談してみましょう!就活エージェント・サービス5選!レバテックルーキー|新卒エンジニア就職エージェント!運営元:レバテック株式会社|登録無料|エンジニア就活で迷ったらまずここJobSpring(ジョブスプリング)|就活を応援するオンラインエージェント!運営元:株式会社Roots|登録無料|公式サイトにて適性検査が可能キャリアチケット|新卒就活支援。おすすめなプログラミングスクールを比較するなら、「おすすめプログラミングスクール比較11選!社会人・未経験の転職・就職にも有利!」という記事を参考にしてください。プログラミングスクール比較11選!社会人・学生さんの就職に強い!」をご覧いただき、自分の目標や目的にぴったりのスクールを見つけてくださいね。プログラミングスクール比較11選!社会人・学生さんの就職に強い!未経験からエンジニア転職するのにおすすめな転職サイト・転職エージェント未経験可のエンジニア求人を探すなら「エンジニアにおすすめ!IT/Web系に強い転職サイト11選|現役プロが比較・ランキング」という記事を参考にしてください。IT・Web系に強い転職サイトや未経験求人を多数保有した転職エージェントを比較することができるので、未経験の方でも自分にぴったりの転職先を探すことができます。大手エージェントdodaが公開した情報※によると、2020年以降コロナの影響もあり停滞傾向にあった転職市場ですが、2023年上半期のIT・通信業界にはその影響は残っておらず求人数は増加傾向にあります。経験豊かなベテランエンジニアはもちろん、ポテンシャルを期待される未経験エンジニアの採用熱が高まってきているのも大きな特徴です。リモートワークや副業、地方での就業など働き方も多様化しているため、家事・育児に忙しい主婦(夫)の方の活躍の場が広がることも予想されます。いった新人Webエンジニアや未経験・初心者に向けた記事です。...文系女子がエンジニアとして輝ける【3つのポイント】現役女性エンジニアが解説!感染症による雇用不安や社会の急速なIT化が進み、就職・転職でエンジニアを目指す人が増えています。...インフラエンジニアへの転職に必要なスキル、需要について解説!IT技術が急激に発展したことにより、サーバーやネットワークなどインフラの構成も大きく変化しています。...【体験談】プログラミング未経験者が新卒でエンジニア就職する最短ロードマップ!はじめまして。私は現在エンジニアとして働いています。大学生のときは法学部でプログラミング未経験でした。そんな私が、エンジニアとして就職できた秘訣を解説していこうと思います。[PR]:お得なキャンペーン中!!転ストの中の人エンジニア歴15年のstaffHとWebデザイナー・ディレクター歴20年のstaffMの2名が中心となりこのサイトを運営しています。転職/就職やフリーランスへの転向、未経験からのプログラミング学習など、これから”新しい一歩を踏み出そうとしている、エンジニア・クリエイター”に役立つ情報を発信しています。2023年5月23日KIMINARA(キミナラ)様にて当サイトが紹介されました。2023年5月22日イマカラ様にて当サイトが紹介されました。KIMINARA(キミナラ)様にて当サイトが紹介されました。イマカラ様にて当サイトが紹介されました。