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

この記事では、作品例も交え、未経験からフロントエンドエンジニアのポートフォリオの作り方を解説します。

フロントエンドエンジニアにポートフォリオは不可欠

結論からいえば、実務経験の有無に限らず、ポートフォリオはフロントエンドエンジニアの転職に不可欠です。企業の採用担当者が、成果物なしでフロントエンドエンジニアの力量を正確に判断するのは困難だからです。

ポートフォリオがあれば、採用担当者はひと目であなたのスキル度合いを理解できます。就職の際に大きな武器になるだけでなく、副業や独立の際にも営業に利用できるなど作成するメリットは大きいです。

実務経験の有無で掲載内容は異なる

ポートフォリオに記載すべき内容は、実務経験の有無によって異なります。

例えば、実務経験がある場合は、ある程度コーディング技術があることが前提で採用を進めます。そのため、コーディングができるかではなく、参加したプロジェクトの内容やポジションなどのアピールが大切です。

コーディング以外のデザインやフレームワークなどの深い知識に合わせて、チーム内での役割や成果もアピールできれば即戦力として採用される可能性が高まります。

一方で実務経験がない場合は、自分一人でどのレベルまでコーディングできるかが採用の可否に大きく関わります。ポートフォリオで自分なりの成果物を見せて、的確にスキルレベルをアピールすることが大切です。

ゼロから自分で作成した成果物があれば、採用担当者に高い学習意欲を感じ取ってもらえ、ポテンシャルの高い人材と判断してもらえます。

ポートフォリオの作成前に成果物を制作しておこう

ポートフォリオの作成前に、掲載する成果物は制作しておきましょう。ポートフォリオにはプロフィールや習得スキルなどを記載しますが、成果物作成前に記載してしまうと、使用したスキルなどを書き忘れる可能性もあります。

とくに実務経験がない未経験者は成果物作成前に作ってしまうと、習得スキルや制作実績などに何も記載できず、意味のないポートフォリオが完成してしまいます。

ポートフォリオはあくまでも自分の成果物をまとめてアピールするものなので、未経験者はとくに作成前にWebサイトなどを作っておくことが必要です。

なお、ポートフォリオ作成やフロントエンドエンジニアへの就業などにあたりどの言語が自分にあうのか、どう学習を進めればいいのかなどがあいまいな人は「プログラミング学習プラン診断」をお試しください。

かかる時間は1分ほど。4つの質問に答えるだけで、あなたにあう言語や学習プランを診断してもらえます。

効率よくプログラミングを学習したい人は、ぜひ一度お試しください。

＼ 4つの質問に答えるだけ ／

フロントエンドエンジニアのポートフォリオに記載すべき内容

ここからは、フロントエンドエンジニアのポートフォリオに記載すべき内容を、4つにまとめて解説します。

なお、今回は下に記載された侍エンジニア塾の卒業生である佐藤さんのポートフォリオを例に解説します。各項目ごとに記載すべきことを確認していきましょう。

プロフィール

まずは、自分の簡単なプロフィールを記載します。学習を開始した時期や習得した言語・スキル、作成実績や参画プロジェクトなどを簡潔にまとめましょう。

プロフィールを乗せることでスキルや専門性など、あなたのフロントエンドエンジニアとしての人となりをわかりやすく採用担当者に伝えられます。

実際に佐藤さんのプロフィールでは、Web制作や学習した内容が記載されています。対応可能な案件なども記載しておくと、より詳細にスキルレベルを理解してもらえるでしょう。

また、信頼性を高める観点から顔写真を載せておくこともおすすめです。とくにフリーランスはクライアントから信頼されるためにも設置した方が良いでしょう。

ただし、プライバシーの問題もあるため、転職などが目的の場合は無理に掲載する必要はありません。

習得スキル

フロントエンドに関する習得スキルは全て記載しましょう。デザインやプログラミングなどのスキルを記載しておくと、自分のスキルレベルを的確に採用担当者に伝えられます。

また、未経験者で多くの技術を習得している場合は、高い学習意欲もアピールできます。IT業界は新しい技術の発達など変化の激しい業界です。したがって、自分で学習ができる人材は、たとえ未経験でも長期的に活躍できると評価してもらえるでしょう。

なお、習得スキルはプロフィール内に羅列する方法もありますが、画像のように図などで整理しておくのもおすすめです。図になっていることで採用担当者もチェックしやすく、UIやUXの観点からも高い評価を得られます。

制作実績

ポートフォリオはあなたの成果物をまとめる目的のものなので、制作実績は必ず掲載します。ただし、成果物は誰もが凄いと思うようなレベルのものにこだわる必要はありません。

最も重要なことはこれまでの学習の成果がわかることです。採用する側の視点に立って、ゼロからどのレベルまでのサイトが作れたかを伝えられるようにしましょう。

工夫した点や辛かった点などを説明できるようにしておくと、自分のスキルや学習意欲に説得力を持たせられます。

ただし、企業から発注された案件の成果物を掲載する場合は、発注元に掲載許可を受ける必要がある点は注意しましょう。許可を得ずに公表してしまうと著作権侵害などトラブルに発展するケースもあるため、掲載前の確認は絶対に忘れてはいけません。

連絡先

ポートフォリオの最後には自分の連絡先を記載しておきましょう。連絡先を記載しておくことで、興味を持った企業やクライアントから直接依頼をもらえるケースもあります。

また、SNSやブログなどを運営している場合は、掲載がおすすめです。ある程度フォロワー数を獲得したSNSアカウントがあれば業界内での権威性をアピールできるうえ、投稿内容から人となりを知ってもらうきっかけにもなります。

さらに技術的な知識をアウトプットしたり様々な業界関係者とのつながりを持ったりすれば、自分で学習を深め、関係性を広げられる人と評価されるでしょう。

なお、IT企業への転職・副業での収入獲得を見据え、独学でスキル習得できるか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは、現役エンジニアと学習コーチの2名体制で学習をサポートしてもらえます。

「受講生の学習完了率98%」「累計受講者数4万5,000名以上」という実績からも、侍エンジニアなら未経験からでも挫折なく転職や副業収入の獲得が実現できますよ。

＼ 給付金で受講料が最大80%OFF ／

フロントエンドエンジニア向けポートフォリオサイトの作り方

ここからは、フロントエンドエンジニア向けポートフォリオの作り方を、5つのステップにまとめて解説します。

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

フロントエンドエンジニアがポートフォリオサイトを作成する際は、まず参考にするサイトを見つけましょう。

いきなり全てを自分でデザインし作成するのは、難易度が高く、作業効率も悪いです。開発にも非常に時間がかかるため、まずは参考にしたいサイトを見つけて構成や使われている技術を分析していくのがおすすめです。

当然、全てを完全に真似するのはNGですが、良いと思う部分を取り入れることで技術力の向上にも役立ちます。具体的には、以下のようなポートフォリオサイトが参考となるでしょう。

サイト名	内容
UNDERLINE	ディレクションやデザイン、コーディングを行う徳田優一さんのポートフォリオサイト。アイコンや画像の配置からスキルや業務内容がわかりやすくなっている。 シンプルかつ統一感のあるデザインは、サイト内を回遊しやすくUIの観点からも魅力。
KATOSHUN.com	美しい動的ビジュアルが特徴的なポートフォリオサイト。 デザインが洗練されているだけでなく、ナビゲーション機能もわかりやすくUI/UXともに高品質。
Hasegawa Hiroshi	簡潔でありつつも独創的なデザインが特徴のポートフォリオサイト。 制作実績をカテゴリごとに表示できるなど、ユーザーの見やすさを意識しつつ、デザイン性も高い。

参考にするサイトが決まったあとは、次のステップに進みます。

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

参考にするサイトが決まったら、サイト全体の構成を考えていきましょう。先ほど紹介した次の4つに加えて、参考サイトの良いところがあれば積極的に取り入れます。

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

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

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

何を・どこに・どのように配置するかをイメージできるだけ具体的にイメージして、サイト設計をしていきましょう。イメージが詳細であればあるほど、コーディングの作業をスムーズに進められます。

メニュー構成や配置場所、リンクなどの仕様を詳細に記載して、効率よくコーディングできるよう作りこむことが大切です。

なお、ワイヤーフレームについては次の記事で詳しく解説しているので参考にしてください。

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

STEP4：コーディングする

サイト全体のイメージを作成したあとは、イメージに沿ってコーディングをします。コーディングの内容は採用可否に大きく関わるため、機能として成立しているだけでなく、レビューのしやすさも意識しましょう。

具体的にはあとから採用担当者やクライアントに見られることを意識して、可読性の高さを心がけることが大切です。

とくに未経験者の場合は、HTML内にdivタグが非常に多いケースが見られます。divは段落を意味するタグなので得てして使用頻度が高くなりがちですが、あまりにも同一タグばかり利用すると修正や保守がしにくいデメリットがあります。

適宜idを設定したり別のタグに切り替えたりすることで、メンテナンス性や可読性を考えた綺麗なコードが記載でき、コーディング力の高さをアピールできるでしょう。

具体的なコーディング方法は、下の記事でも解説しているので参考にしてください。

→Webサイト制作に必要なコーディングとは？知識・やり方を紹介

STEP5：サイトを公開する

コーディングが完成したあとは、作成したポートフォリオサイトを公開します。サイトの公開はドメインを取得してアップロード先のレンタルサーバーの準備が必要です。

具体的な方法は次の記事で詳しく解説しているため、あわせて参考にしてください。

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

ちなみに、ポートフォリオサイトの公開には、WordPressを使う方法もあります。WordPressを使ったサイト作成には、PHPなどサーバーサイドの知識も必要となるため難易度は高いです。

しかし、WordPressやサーバーサイドの知識があると、市場価値も大きく高まるため興味がある人は挑戦してみましょう。

なお、IT企業への転職・副業での収入獲得を見据え、独学でスキル習得できるか不安な人は「侍エンジニア」をお試しください。

侍エンジニアでは、現役エンジニアと学習コーチの2名体制で学習をサポートしてもらえます。

「受講生の学習完了率98%」「累計受講者数4万5,000名以上」という実績からも、侍エンジニアなら未経験からでも挫折なく転職や副業収入の獲得が実現できますよ。

＼ 給付金で受講料が最大80%OFF ／

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

ここからは、未経験者がポートフォリオを作る際の注意点を、3つにまとめて解説します。

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

注意すべき点の1つ目は、高いレベルのポートフォリオを目指さないことです。とくに未経験でモチベーションが高い場合は、誰もが驚くような動的なアニメーションを施したかっこいいサイト作成を目指す人もいるでしょう。

しかし、あまりにもデザイン性に凝りすぎたWebサイトを作ると次のようなデメリットも発生します。

ポートフォリオサイトの作成において、最も重要なのは作成しきることです。そもそもサイト作成自体が完了しなければ、せっかくスキルがあってもアピールになりません。

また、デザインに凝りすぎるとかえってユーザーにとって使いにくいWebサイトになるケースもあります。かっこいいデザインを目指すよりも、まずは見る人の視点に立ってストレスなく使えるサイトを目指しましょう。

表示崩れに気をつける

未経験の人は表示崩れに気をつけましょう。とくにレスポンシブ対応のポートフォリオサイトでは、表示崩れが起こりやすいです。

パソコン上ではきれいに見えていても、スマートフォンやタブレット端末で見ると上手く表示されないケースも多いです。また、使用するブラウザによっても見え方が微妙に異なるため、開発に使ったブラウザ以外で表示崩れを起こすケースも見られます。

各ブラウザに設置されたデベロッパーツールを使用したり、Dreamweaverのようなホームページ作成ソフトを利用したりして確認しながら開発を進めましょう。

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

未経験の人は、無料のテンプレートはなるべく使わないことをおすすめします。ポートフォリオサイトの目的はあなたのスキルを証明することなので、無料のテンプレートばかり利用していると実際にどれくらいの技術力があるのかが伝わりません。

採用担当者から自分でWebパーツなどの作成ができないと評価されるケースもあるので、自分で作成した方が確実にスキルをアピールできます。

ポートフォリオ作成に行き詰まった時の対処法

最後に、ポートフォリオサイト作成に行き詰った時の対処法を、3つにまとめて紹介します。

質問サイトで相談してみる

ポートフォリオサイトの作成で行き詰った際は、質問サイトに相談するのがおすすめです。質問サイトを利用すれば現役のエンジニアがあなたの疑問点を解消してくれる可能性もあります。

また、有料質問サイトではオンラインで通話などを行いながら対面で問題解決に協力してくれるケースもあり、心強い味方となってくれます。

対話型のAIツールに聞いてみる

対話型のAIツールに疑問点を質問する方法もあります。近年ではChatGPTのように、質問を投げかけるだけでAIが解決案を出してくれるサービスもあります。

上手に活用できれば、コーディングの疑問点を効率的に解決できたり、新しいWebデザインを提案してくれたりするでしょう。

ただし、AIツールを正しく利用するためには、AIを上手に誘導する力が必要不可欠です。いわゆるプロンプトエンジニアリングの知識も重要になるので、基礎知識を学んだうえで利用しましょう。

スクールで制作を支援してもらう

などと悩んだ際は、プログラミングスクールに通い、制作を支援してもらうのも手段の1つです。

疑問点の解消には質問サイトやAIツールなど様々な解決方法がありますが、両者は結局、自分自身で解決しなければいけません。初心者の場合は「何がわからないかもわからない」という状況も多く、的確な質問自体が難しいケースも多いです。

また、疑問点がいつまで経っても解消されないと、作業効率が下がるばかりかモチベーション管理も難しいです。最悪の場合、途中でポートフォリオサイトの作成を諦めてしまうことにもなりかねません。

その点、スクールであれば現役エンジニア講師がソースコードを確認し的確なアドバイスをくれるため、わからない部分を解説してもらいながら制作を進められます。

確実にポートフォリオサイトを作り切り、人生を変えるためにもわからない部分はプログラミングスクールでプロに相談するのが最も効率的です。

なお、数あるスクールのなかでもフロントエンドエンジニアを見据えたポートフォリオ作成を目指すなら「侍エンジニア」がおすすめです。

月分割4,098円から学べる侍エンジニアでは、現役エンジニアと学習コーチが2名体制で学習をサポートしてくれるため、途中で挫折する心配はありません。「受講生の学習完了率98%」という実績からも、侍エンジニアなら挫折しづらい環境で学習を進められるといえます。

また、侍エンジニアでは最大80%OFFで受講可能な「給付金コース」を提供中。金銭面での支援を受けつつ、理想のキャリア実現に向けたスキルの習得から、転職活動・就業後のフォローアップ(※1)までを一貫してサポートしてもらえます。

※1：転職後の1年間、転職先での継続的な就業や転職に伴う賃金上昇などのフォローアップ

学習と金銭面をどちらもサポートしてくれる侍エンジニアなら、未経験からでも安心してフロントエンドエンジニアへの就業が実現できますよ。

→ 公式サイトで侍エンジニアの詳細を見る

まとめ

今回は、フロントエンドエンジニアのポートフォリオサイト作成を解説しました。フロントエンドエンジニアにとってポートフォリオサイトの作成は、実務経験の有無を問わず重要です。

作成しておくだけで他の候補者よりも的確に自分のスキルを伝えられます。また、未経験者の場合は、たとえ質が高くなくても、学習意欲の高さをアピールでき、ポテンシャルのある人材と評価してもらえるでしょう。

作っておいて損することはないので、フロントエンドエンジニアとしての道を切り開いていきたい人は本記事を参考にしてポートフォリオサイトを作成してみてください。

なお、未経験からフロントエンドエンジニアに転職する方法は、次の記事でも解説しています。

→未経験からフロントエンドエンジニアになるには？就職/転職までの7ステップ