Web制作のフロントエンド転職で使うポートフォリオの作り方とは?【おすすめは1から制作です】

Web制作

この記事を読んでほしい方

  • フロントエンドエンジニアとして転職をしたい方
  • ポートフォリオの作り方を知りたい方

フロントエンドエンジニアとして転職活動を行う際、

ポートフォリオを作ることで、企業に対して自分のアピールに繋がります。

エンジニアであれば、エクセルやパワーポイントよりも、Webサイトで制作するのがいいでしょう。

僕自身、未経験だった頃に、ポートフォリオをサイトとして作って転職活動に取り組みました。

今現在では、僕が働いている会社で、コーダー・フロントエンドエンジニア採用の際に、応募者のポートフォリオを拝見することがあります。

もちろん、会社によって「どういったコーダー・エンジニアがほしいか」は変わってくるんですが、

作る際の参考になればいいなと思います!

Web制作のフロントエンド転職で使うポートフォリオの作り方とは?

結論だけ言うと、おすすめは「自身で1から制作した」ということが伝わるポートフォリオですね。

企業として、業務未経験者のポートフォリオを見て知りたいことは、

  • その人の現状のスキルや特徴、どんな人柄なのか
  • これからスキルの向上が見込めるかどうか、独学でどのくらいやってきたか

このあたりは特に重点的に見られているかと思います。

Web制作で大事なことは色々あって、

  • ユーザーから見たサイトの使いやすさ、見やすさ
  • サイトの修正・運用のしやすさ
  • デザイン・トンマナ

こういったことが重要になります。

この中で個人的に、まずはコーダー初心者としてこだわってほしいのは、「サイトの修正・運用のしやすさ」ですね。

このことを前提に記事を書いていきます。

テンプレートを使うのは、あまりおすすめしない。

実は、サイト制作のテンプレートのようなものは、世の中に出回っていることもありまして、

今まで自分が採用に携わった中で、サイトの見た目が、他の人のものとほぼ同じようなポートフォリオを見ることもありました。

この場合は、なにかしらのテンプレートを使ってポートフォリオを制作しているかと思います。

確かに、テンプレートを使うとサイトを綺麗に表示できるし、評価を受けやすいと感じるとは思います。

テンプレート自体は使っても問題ないとは思いますが、

自身でほとんどコードを触っていない、というのが分かってしまうので、

今後コードをしっかり書いていけるのか、

サイト修正・運用のしやすいコーディングを学んでいける方なのか、

などなど、疑問が残ってしまいます。

業務でもテンプレートを使っていく、といった考え方もありっちゃありなんですが、

その会社特有のデザインだったり、コード運用や修正のルールを踏まえると、

テンプレートだと「汎用性」がなかったり、「コードの使い回しがしづらい」など、

色々と壁にぶち当たる可能性があります。

サイト運用・修正のしやすさなどを考えると、

「汎用性」や「コードの使い回しのしやすさ」など、

それを達成するための考え方は、コーダーとして大事になってくるので、

「コードを1から書こうとした」ということがアピールできるといいかなと思います!

まずはサイトの見た目よりも、人柄や特徴などを伝えたい。

とはいえ、サイトを1から作ろうとすると

特に初心者はやり方を調べたりで時間もかかるし、

時間を書けた分、見た目の良いものが作れるかといったらそうではないことが多いです。

サイトの見た目にこだわっていったり、スキルを身に着けていくことは、

業務を始めたあとに積み重ねていけば良いと思うので、

まずは、「現時点でどういう考えでフロントエンドになりたいか」や、

「1からコードを書いて、どんな部分にこだわったか」など

自分の考え方の部分をポートフォリオで表現できると良いと思います。

それは、ポートフォリオサイトに表示されるテキストでそのまま表現しても良いですし、

そのサイトを構築したコーディングデータで表すのもアリです。

(とはいえ、すごくデザインに凝った制作会社に入りたいとか、Webデザインに興味ある場合は、

ある程度デザインのこだわりも見せていった方がいいとは思います。)

僕がWeb業界未経験だったときに作ったポートフォリオについて

ちなみに、僕がフロントエンド未経験で、採用をもらったときに提出したポートフォリオには、

次のような事柄を書きました。

  1. プロフィール(名前、年齢など)
  2. 転職にいたった経緯(なぜ前職を辞めて、Web業界で働きたいのか、など)
  3. その会社に入りたい理由
  4. フロントエンドとしての現時点のスキル、どの程度できるか
  5. 今後どういうふうに成長していきたいのか

このあたりが書けていれば、人柄や特徴が伝わると思います。

受ける会社によるんですが、あまり固く書かず、自分らしさを出すのもアリだと思います。

どんなサイトだったか?

サイトの見た目自体は結構ボロボロだったと思います。。

今では結構必要とされている「レスポンシブ化」にも対応していないのでPC表示しかできなかったり、

単純にグレー背景をサイト全体に敷いて、それぞれのブロックに白背景を乗っけたような

なんとも簡素なデザインでした。

それでも採用をもらえたのは、

「自分で1から作ったこと」で、自分の考え方をスムーズに伝えることができたからだと思います。

それ以前に応募した会社では、テンプレートに近いようなポートフォリオサイトでしたし、

「どこにこだわったか?」を全然答えられず、お見送りになることが多かったです。

結果として、会社に入ったあとはフロントエンドエンジニアとして活動できましたし、

Web制作に付随するワイヤー制作やデザインの一部を任せてもらうことができました。

「スキル面は入社したあとになんとかなるので、今後成長するためにどういった考え方を持っているかを伝える」くらいでポートフォリオを作ってみると良いかなと思います!

1から作ってみて「つまづいたところ」「改善策」などを伝えることができれば、ベター

ポートフォリオサイトを「1から作る」ことの付加価値として、

「1から作ったことでつまづいた点やその改善点」は言いやすくなるかなと。

ポートフォリオをサイトとして完璧に完成させるよりも

中途半端だったり抜けがあっても、サイトを作ってどうだったかなど、企業は興味あると思います。

コーディング設計はこう考えた、ユーザーのことを考えてこういった対応をした、デザインにこだわった、などですね。

実際にポートフォリオを作成しているときは、

一通り完了するまでに何かしら壁にぶち当たると思います。

そこに対する対処方法などが伝われば、今後同じような壁に当たったときに、

どんな対処をする人なのかが、ポートフォリオを見ている人に伝わるかと思います。

もちろん、そこを踏まえてフロントエンドエンジニアよりもディレクターの方が向いてるとか、企業側として色々な判断を下すと思いますが、

自分の向き不向きを企業から学び取ることも、転職活動をする上での大きな意味だと思います。

ポートフォリオを作って転職活動をするなら、エージェントがおすすめです。

ポートフォリオを作り終えたら、フロントエンドエンジニアとして転職をするために、

転職エージェントを使ってみるのがおすすめです。

レバテックさんは結構、僕も転職活動の際にお世話になってます。

レバテックルーキーに無料相談してみる

Webエンジニアの転職なら【レバテックキャリア】

まずはカウンセリングを受けてみることがおすすめです!

それでは〜。