Savvy Code

フロントエンドエンジニアのポートフォリオの作り方と実例を紹介！

シロ

フロントエンドエンジニアのポートフォリオの作り方について今日は紹介するよ！

  • エンジニアのポートフォリオってどうやって作るの？
  • フロントエンドエンジニアを目指してるけど、ポートフォリオの作り方が分からない
  • 未経験者はどんなポートフォリオを作ればいいんだろう？

などの疑問をお持ちの方の悩みを解決できる記事になっています！

エンジニアがポートフォリオを持つメリットはたくさんあります。

実際に、フリーランスエンジニアの私も、ポートフォリオをきっかけにスカウトや案件を頂いたことがあります。

エンジニアに転職を目指している人は、ポートフォリオを持ちましょう！

特に、フロントエンドエンジニアを目指す人は、自作のポートフォリオを持つと転職に有利です。なぜなら、フロントエンドで必要とされるスキルをポートフォリオを通して、アピールすることができるからです。

この記事では、フロントエンドエンジニア向けのポートフォリオの作り方と実例をご紹介します！

記事を読めば、ポートフォリオの作り方をイメージできると思います！

では、見てみましょう。

こんな人におすすめ
  • フロントエンドエンジニアに転職を考えている人
  • フロントエンドエンジニアのポートフォリオの作り方を知りたい人

ポートフォリオは必要なの？

一般的に、ポートフォリオは、Webデザイナーやカメラマンなどのクリエイティブ職の人が作品をまとめるためのツールとして使用しています。

しかし、最近では、エンジニアもポートフォリオを持つ意義が高まっています。

エンジニアがポートフォリオを持つメリットは、

などがあります。

フロントエンドエンジニアを目指す人は、まずはエンジニアがポートフォリオを持つ必要性を理解しましょう。

こちらの記事で詳しく解説しているので、確認してくださいね。

エンジニア未経験者でもできる！絶対ためになる魅力的なポートフォリオの作り方！

フロントエンドエンジニアに必要なポートフォリオとは

エンジニアのポートフォリオの重要性は理解したけど、

など、疑問に感じる人もいると思います。

フロントエンドエンジニアのポートフォリオの作り方を見る前に、フロントエンドの業務や必要なスキルについて知りましょう。

フロントエンドエンジニアの業務とは

フロントエンドエンジニアの業務は、次の通りです。

最近では、フロントエンドで出来ることはもっと複雑化していますが、主なフロントエンドエンジニアの業務は、Webサイトやアプリの「UI(ユーザーインターフェース)」を作ることです。

UI(ユーザーインターフェース)とは、Webサイトの部品のことを言います。例えば、ボタン、文字、アイコン、フォームなど、ユーザーが触る箇所をUIと呼びます。

フロントエンドエンジニアは、このUIを綺麗に組み立てたり、アニメーションをつけたり、ユーザーに使いやすいサイト作りをする役割を担っています。

そして、この業務で必要なスキルは多岐に渡ります。

ポートフォリオを作成するときは、フロントエンドで必要なスキルセットを盛り込みましょう。フロントエンドエンジニアのスキルをアピールすることで、転職を有利に進めることができます。

フロントエンドエンジニアでアピールしたいスキル

では、実際に、フロントエンド業務で使うスキルセットを見てみましょう。

一番重要なのは、「JavaScript」と「モダンなフレームワーク(React、Vue.js、Angular)」です。

フロントエンドエンジニアの業務で使うプログラミング言語は、「JavaScript」が圧倒的に多いです。(最近では、TypeScriptが台頭してきましたが、初心者の人はJavaScriptから始めましょう。)

ただ、JavaScriptだけでなく、その周辺のフレームワークも抑えておきたいです。

最近では、React.jsやVue.jsが非常に人気です。多くの企業が扱っている技術なので、習得しておく価値は高いです。

初心者の人は、React.jsかVue.jsのどちらかを選びましょう。

そして、ポートフォリオに載せる作品やブログには、この技術を扱ってください。

例えば、技術ブログを開設して、Vue.jsの使い方や仕様についてまとめてみましょう。アウトプットすることで、その技術を深く理解できます。

作品では、React.jsを使ったWebサイトを1つ制作してみましょう。実際に使うことで、React.jsの特徴を知ることができます。

やみくもに取り組むのではなく、「アピールしたい言語」をベースにポートフォリオを作りましょう。

ポートフォリオは何かしらの目的があって、作るものです。

フロントエンジニアへの転職が目的ならば、フロントエンドの技術をベースにアピールポイントを作るのです。

このように戦略的に取り組むことで、書類選考や面接を有利に進められれますよ！

中級・上級者の方は

中級・上級者の方は、より深い知識が必要なスキルを目指しましょう。

例えば、最近だと次のような技術が注目を浴びています。

  • SSR周りの技術(Next.js、Nuxt.js)
  • Node.js
  • マイクロフロントエンド
  • Atomic Design
  • Webコンポーネント
  • 状態管理ライブラリ (Redux、Vuexなど)
  • ビルドツール(Webpack)
  • PWA
  • npm / yarn
  • CSS in JS

フロントエンドは日々進化しています。ポートフォリオに実績を載せるつもりで、色々とチャレンジしてみましょう！

フロントエンドエンジニアのポートフォリオに入れたい項目

次に、フロントエンドエンジニアがポートフォリオに入れたい項目を見てみましょう。

エンジニアの方は、「プロジェクト経歴 / 職務経歴」を充実させると、採用担当者は興味を持ってくれます。

エンジニア未経験の方は、「作品」「スキルセット」に力を入れましょう。実務経験がないので、スキルでアピールするしかありません。

もし、掲載するものが何もない場合は、簡単なものでいいので制作してください。

Webサイト全体でなくても、ログインページやTodoリストの一覧だけでもいいです。

大事なことは、「何かアウトプットする」ことです。いくら頑張って本を読んでも、アピールするものが何もないと、面接では苦戦してしまうでしょう。

転職で有利になるためにも、アウトプットを意識してください。

フロントエンジニアのポートフォリオの作り方

では、具体的にポートフォリオの作り方を見てみましょう。

  1. 実例を見て、サイトのイメージを決める
  2. figma、XD、Sketchなどのツールでデザインを作る
  3. 制作開始

実例を見て、サイトのイメージを決める

まずは、自分が作りたいポートフォリオサイトをイメージしてください。

「いきなりそんなこと言われても思いつかないよ…」

と思う人もいるでしょう。

最初は、ざっくりとした雰囲気で大丈夫です。

例えば、

など、なんとなくのイメージを思い描いていください。

そして、実際のポートフォリオサイトを見てください。その中で「これいいな」と思うものをメモしておきましょう。

例えば、先ほどのイメージだとこんなサイトが最適かもしれません。

引用元: UNDERLINE

UNDERLINEさんのポートフォリオサイトです。白を基調として、非常に綺麗な印象ですよね。

「スキル」「作品」「ブログ」情報を上手にまとめています。シンプルでありながら、分かりやすい作りなので参考にできそうですね。

 

ポートフォリオサイトを見るときのチェックポイントは、

などを意識して見ましょう。

最初は、気に入ったサイトを真似して作ってみましょう。真似して作っていると、自分のオリジナルのアイデアが出てきます。(コピペして全く同じものにしちゃダメですよ！)

色んなポートフォリオサイトをみて、良いところを部分的に自分のサイトに取り組んでみるのをおすすめします。

figma、XD、Sketchなどのツールでデザインを作る

ポートフォリオのイメージができたら、デザインを作ってみましょう！

フロントエンドエンジニアも、デザインの理解があると重宝されます。この機会に、自分で考えてデザインの練習をしてみましょう。

デザイン作成ツールは、何でもいいと思います。figma、XD、Sketchなどは人気で、多くの企業で使われています。

個人的には、サクッと使える「figma」がいいと思います。Webブラウザで動作しますし、直感的で使いやすいです。

デザインする際は、先ほど見た項目をチェックしてくださいね。

制作開始

デザインが終われば、あとは作るのです！

WixやWordpressなどのツールもありますが、なるべく自分の手で作りましょう。

ポートフォリオサイトは、自分のスキルをアピールする場なので、ポートフォリオサイト自体も凝った作りがいいと思います。

特に、フロントエンドエンジニアはデザインやUIにこだわりがあると、高評価を貰えることが多いですよ！

HTML&CSSやJavaScriptを使って、自分だけのオリジナルを目指しましょう！

参考にしたいフロントエンジニアのポートフォリオ実例集5選

Takumi Hasegawaさん

引用元: Takumi Hasegawa

インタラクティブなデザインが特徴的で、とてもクリエイティブな印象ですね。

フロントエンド技術の高さを感じます。

Nitta.Studioさん

引用元: Nitta.Studio

アニメーションが面白いポートフォリオです。デザインと開発が得意なのが分かりますね。

Takeshi Oideさん

引用元: Takeshi Oide

クリエイティブでデザインセンスの感じられる作品です。アニメーションを駆使して、ユーザーの興味をそそる作りになっています。

manaさん

引用元: mana

女性らしいかわいいデザインのポートフォリオサイトです。シンプルで文字は少なめだけど、しっかりと実績をアピールできていますね。

Sho Yamaneさん

引用元: Sho Yamane

シンプルだけど、軽快なアニメーションがあり、見やすいポートフォリオサイトです。

スキルセット、できること、仕事内容など上手にまとめていますね。

エンジニアへの転職を考えている人は

フロントエンドエンジニアに転職を考えている人は、自身のポートフォリオで転職を有利に進めてください。

最短でエンジニアになるためには、正しい方法を知る必要があります。

こちらの記事を参考に、エンジニアへの一歩を踏み出してください。

【初心者のための】未経験からWebエンジニアになる3ステップ【完全保存版】

まとめ

この記事では、フロントエンドエンジニア向けのポートフォリオの作り方と実例について解説しました！

最後にもう一度内容を確認しましょう。

ポートフォリオに入れたい項目

ポートフォリオ作成のステップ

  1. 実例を見て、サイトのイメージを決める
  2. figma、XD、Sketchなどのツールでデザインを作る
  3. 制作開始

フロントエンドエンジニアの需要は今後も高まっていきます。

なぜなら、フロントエンドの技術が進化し、それに伴い、その技術を活用する企業が増えるからです。

フロントエンドエンジニアを目指す人は、今のうちにポートフォリオで自身のブランディング をしましょう。

せっかく勉強したスキルをアピールしないともったいないですよね。

それに、ポートフォリオを充実させるために、アウトプットをたくさんする癖がつきますよ。

一緒に、エンジニアとして成長していきましょう！