未経験からフロントエンドエンジニアに必要なポートフォリオの作り方！コツや例も紹介

未経験からフロントエンドのHTML/CSSやJavaScriptを学習して、就職や案件獲得のためにそろそろポートフォリオを制作したいなとお考えの方も多いのではないでしょうか？

でもポートフォリオを作りたいけど、

このような悩みをお持ちの方も多いと思います。

そこでこの記事では、フロントエンド未経験から就職や案件獲得するためのポートフォリオ作成手順とどういうポートフォリオを作成するのが良いかを紹介します。

この記事を読むことで、未経験であっても評価されるポートフォリオ作成術をマスターすることができます。

未経験フロントエンドエンジニアに求められるポートフォリオサイトとは

ポートフォリオ制作は考えればいくらでも案はでてきますし、作っている間にあれもこれもと追加したくなってしまいます。ですが、ポートフォリオの目的は就職や案件の獲得です。見る人の目線になって制作をすすめましょう。

未経験フロントエンジニアに求められるポートフォリオサイトで大事になことが2つあります。

この2点について解説します。

これまでの学習の積み重ねが分かる成果物を乗せる

未経験者に求められるポートフォリオの1つ目は、これまでの学習の積み重ねが分かる成果物を乗せることです。

採用する側の視点に立ち、あなたがどの言語を学習して、0からどのくらいのレベルのものが作れるのかを先ずはしっかり伝わるものを作りましょう。

とはいっても見る人も、誰もがすごいというような物は求めていません。きちんと学習してきたのかという点と学習の成果がでているかを見られることが多いです。

未経験者の場合、学習期間と制作にかかった時間とつまずいたところや工夫したところも合わせて語れるようにしておきましょう。

学習意欲やポテンシャルがあることが分かる

次に重要なのが、学習意欲や今後成長するポテンシャルがあるかどうかです。

そのため、メインでつけた技術に加えて、今どんなことを学習をしているかや、今後身につけたいスキルを明確にしておくと、意欲が伝わります。

未経験からの採用であれば、現状のスキルよりも今後の伸びしろを期待しています。Web業界は技術の流行や進歩が早く、新たな技術を学んでいかないと置いていかれます。

そのため、主体的に動けるということをアピールしましょう。企業側も受け身な人や意欲がない人を採用したくないですからね……。

未経験から就職・転職活動を成功させる記載すべき内容

ポートフォリオに入れるべき項目を紹介します。

プロフィール

プロフィールは必ず入れましょう。ただ長くなりすぎないように簡潔にまとめることが重要です。プロフィールに入れる内容は下記の4つです。

最低限、これらを入れるようにしましょう。上記に加えて趣味や今はまっていることなど入れておくと面接するときに話が盛り上がることもあるので、好みで入れましょう。

制作実績

制作実績一覧を載せましょう。

先ほども紹介しましたが未経験の場合、すごい物は期待されていません。「学習して0から作った」ということをアピールしましょう。

一緒に乗せるべき項目は、

それぞれの成果物に対して記載をします。

制作実績を紹介するときは、上手くいかなったところと、それをどう解決したかを上手く語れるようにしましょう。

アウトプットしていることが分かるもの

最近はアウトプットを積極的に行っているかというのも重要視されています。アウトプットをしっかりおこなっている人のところには、新しい情報や繋がりができやすいからだと推測されます。

下記3つのどれかは最低限、実施するようにしておきましょう。

面接に行くだけではなく、情報発信を積極的におこなっていると、案件獲得やよりよい条件での転職の可能性が高まります。個人としてのメリットも大きいので今のうちに、実績の発信や情報発信に力を入れておくと他の人と差別化できるのでオススメです。

ポートフォリオサイトを作る手順

これまでは、作成前のこころ構えと最低限必要な情報について紹介してきました。ここからは、具体的にどういう手順で作成するのかを紹介します。

ポートフォリオの作成手順は下記の通りです。

上記の順序で行っていきましょう。

Step1：参考にするサイトを見つける

いきなり全て自分でデザインを決めるというのは、難易度も高く時間も掛かります。そのため、先ずは参考にしたいポートフォリオサイトを見つけて、構成や使われている技術を分析してみましょう。

参考にしたいデザインや構成などが見つかったら次のStepに移りましょう！

Step2：全体のサイト構成を考える

Step1の参考サイトを踏まえてどんな内容にするのか、どんな構成にするのかを決めていきます。

先ほど紹介した

上記4つに加えて、参考にしたサイトでいいところがあればとりいれてみましょう。

フリーランスとして活動する場合は、目安となる価格表やお問い合わせフォームを入れておくと案件獲得につながります。

Step3：サイト全体のイメージを作成する

サイト全体の構成を考えたら、サイト全体のイメージを紙やパワポなどのツールを使って書き出してみましょう。これを「ラフ」や「ワイヤーフレーム」といったりします。

ここで重要なのはサイト全体のイメージを書き出して、設計図を作るということです。つまり、何を・どこに・どのように配置するかを決める作業です。

これをしっかりやってこくことで、コーディングするときに迷いなくスムーズに取り掛かることができます。

なおワイヤーフレーム詳しい解説については、「【5分でわかる】ワイヤーフレームとは？概要やおすすめツールを簡単解説！」にて紹介しています。

【5分でわかる】ワイヤーフレームとは？概要やおすすめツールを簡単解説！

更新日：2023年10月10日

Step4：コーディング

サイト全体のイメージを作成したらイメージに沿ってコーディングをしていくだけです。ここでの注意点は、きれいなコードでコーディングすることです。

ポートフォリオは正しくコードが使えているかチェックされることになります。そのため、CSSを規則的に書いたり、適切なタグを使って書くようにしましょう。

Step5：アップロード

コーディングが完成したら、インターネット上にアップロードする必要があります。アップロードの前に、ドメイン取得とレンタルサーバーの準備が必要です。

ドメイン取得とレンタルサーバの取得は、下記リンク先「【専門用語なし】WordPressを使ったブログの作り方をフローで紹介」のStep3まで実施すれば準備できます。

【専門用語なし】WordPressを使ったブログの作り方をフローで紹介

更新日：2023年10月10日

ここまでできたら、サーバーにファイルをアップロードします。

ちなみに、ポートフォリオサイトを公開する方法として、WordPressを使う方法もあります。WordPressを使って作成するには、WordPressとPHPのスキルが必要になります。フロントエンドにおいてWordPressの需要は高いので扱えると市場価値が高まります。

未経験者がポートフォリオを作る際の注意点3つ

最後に未経験者がポートフォリオを作るときに、注意しておくこと3つを紹介します。

注意するべきこと3つは下記の通りです。

それぞれ解説します。

高いレベルのポートフォリオを目指さない

まず1つ目は高いレベルのポートフォリオを目指さないことです。

世の中のポートフォリオを見渡すと本当にすごいデザインやこった演出をするポートフォリオがあって、自分もこんなかっこいいサイト作りたいと思うかもしれません。

しかし始めから凝ったものを作ると

このようなことが起こってしまいます。まずは凄いものを目指さずに正しくコードが書けて見やすいサイトを作ることに専念しましょう。

かっこよくしたい気持ちもでてきますが、先ずは見る人の視点に立ってストレスなく使えるサイトを目指しましょう。

表示崩れに気をつける

未経験の方は表示崩れには注意しましょう。

最近はスマートフォンが普及しレスポンシブ対応のサイトが一般的になりました。きちんと対応させたつもりでも、スマートフォンやタブレットで表示したら上手く表示されていないということがあります。

そのため、表示崩れには注意を払って、ブラウザのデベロッパーツールを使って確認するようにしましょう。

無料のテンプレはなるべく使わない

最近は、簡単にポートフォリオを作成できるサービスや、テンプレが多く存在しますが、無料の作成サービスは使わないようにしましょう。

理由は、ポートフォリオサイトとは、自分の技術を証明するためのサイトだからです。

採用する人の立場たって考えるとわかりますが、本当に技術があるか疑問を持ったり、学習意欲があるのか疑問を持ってしまいますよね。

特にフロントエンドエンジニアはサイトの見た目を作る人なので、無料サービスに頼らずに自分で作成して技術をアピールするようにしましょう。

まとめ

この記事では、フロントエンド未経験者がポートフォリオを作成するときのコツと具体的な手順について紹介してきました。

簡単にまとめると、今もっている技術と今後のポテンシャルをアピールすることが重要になります。目的を明確にしたうえで、今回紹介した注意点をあたまに入れた上で作成してみましょう。

採用されるためには採用する側の目線を考えて、ポートフォリオ作成が重要です。これから仕事をする上でユーザー目線を持つことが大事なので、まずは、採用者目線で作成をすすめましょう。