【未経験者必見】webエンジニアがポートフォリオを作る方法とは。例や作り方を徹底解説します

Webエンジニアになるためにスキルを証明する方法で「ポートフォリオ」を作ると良いって聞いたけど、どうすればいいんだろう。。実際の例もみてみたいなぁ。

こういった疑問に答えます。

こんにちは、リバティエンジニアのFUNA（フナ）です。

現役でフリーランスのエンジニアとしてアプリケーション開発やWeb制作、SEOやブログ運営をしています。

未経験の方に限らずWebエンジニアになるために、企業やクライアントに自身のスキルをアピールする方法として、「ポートフォリオ」があります。

この記事では、ポートフォリオの作り方や実際に現役エンジニアが作成したポートフォリオ例をご紹介します。

Webエンジニアのポートフォリオとは

ポートフォリオは一般的に「作品の一覧集」のことを指します。

一覧集を作ることでお手軽に自身の実績をアピールすることができますね。

Webエンジニアのポートフォリオは、自分のスキルや実績を掲載するだけでなく、そのポートフォリオサイト自体のコードも見られることになります。

そのため、サイトの構成やデザインも含めてしっかりと作り込むことが大切となります。

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

ここでは、様々なエンジニアのポートフォリオサイトを紹介します。

自分のポートフォリオを作る前に、まずはお手本となるようなサイトを見てみて、盗めるところはどんどん盗んでそれにプラスαしてオリジナルのサイトを作ってみてください！

UNDERLINE

: UNDERLINEポートフォリオサイト

フリーランスでディレクションやデザイン、コーディングを行う徳田優一さんのポートフォリオサイトです。

トップページは、アイコンや画像を効果的に配置することで「何をしている人なのか」が明確にわかりやすく伝わります。

デザインもシンプルでぜひ参考にしておきたいですね！

maima.me

: maima.meポートフォリオサイト

Webディレクションやデザインを手がけているMAI IMAKITAさんのポートフォリオサイトです。

このポートフォリオは1ページで完結していて、シンプルで自分の強みを十分にアピールできているポートフォリオサイトとなっています。

実績を並べることで、文字では多くを語らないスタイルはかっこいいので参考にしたいですね！

TAIKI KATO

: TAIKI KATOポートフォリオサイト

広告やグラフィックデザイン・WEBデザインなどを手掛けて、東京を拠点にアートディレクター、デザイナーとして活動している加藤タイキさんのWebポートフォリオです。

デザイナーらしい素晴らしいデザインのサイトですね。

見やすさももちろんのこと、空間・余白のつかいかたが絶妙でアンニュイな雰囲気がとても良いです。

Takumi Hasegawa

: Takumi Hasegawaポートフォリオサイト

こちらのポートフォリオはなんといってもこの動きですね。

この方はWebGLとかの３Dを表現するのが得意なエンジニアです。

実際にサイトに行ってみると分かりますが、次元が違います。

こんな洗練されて高度な技術を盛り込むことは難しいですが、将来的にこんなこともできるようになりたい！と参考にするのも良いでしょう。

未経験Webエンジニアがポートフォリオを作成するメリット

未経験のWebエンジニアがポートフォリオを作成することには、とても多くのメリットがあります。

自身のスキルの証明ややる気のアピール、クライアントや企業とのミスマッチを避けることができます。

特に重要でおおきなメリットを紹介します。

【メリット1】プログラミングのスキルが証明できる

まず1番大きなメリットでもあり、ポートフォリオを作成する目的なのがこちらですね。

Webエンジニアとして、「何ができるのか」「過去にどんなものを作ったのか」などをアピールすることが出来ます。

また、ポートフォリオサイト自体のコードを見てもらうことで、評価してもらえるのも良い点ですね。

【メリット2】やる気や将来性をアピールできる

ポートフォリオがあるだけで、やる気や将来性をアピールすることができます。

もちろん一定のクオリティは求められますが、無いよりは全然あったほうが評価は高いです。

作って損することは無いので、必ず作るようにしましょう。

【メリット3】入社後のミスマッチが減らせる

ポートフォリオで自分のできることを明確に相手に伝えることが出来ます。

転職活動時にたまに起こる「ミスマッチ」ですが、原因の多くは口頭でのみスキルやできることを説明したことが多いのです。

ミスマッチして入社してしまうと、自分の得意分野でもなければ、やりたくないことをやらされる羽目になりますので、注意してください。

未経験Webエンジニアがポートフォリオを作成しないデメリット

ポートフォリオを作成しないデメリットは非常に多くあります。

順番に解説していきますね。

【デメリット1】判断材料・アピールポイントが減る

まずはこちらの「判断材料・アピールポイントが減る」ということです。

転職活動中に、面接などの際にポートフォリオがあるのであれば、それを見せるだけでOK。

サイトの内容がわかりやすければわかり易いほど、そのサイトだけであなたのスキルや技術を証明できます。

なので、ポートフォリオを作らないということは、それだけで大きなデメリットであることがわかります。

【デメリット2】そもそも面接してもらえないことも

企業によっては、面接時にポートフォリオの提示が必須となるところも少なくありません。

職務経歴書と一緒に提示出来なければ、面接出来ないとなると企業側もエンジニア側にとっても機会損失ですよね。

【デメリット3】競合エンジニアとの差別化ができない

口頭で「こんな事ができます！」と言っても、それは他のエンジニアも同じです。

他のエンジニアと差をつけるためにも、しっかりと作り込まれたポートフォリオサイトを持つことは大きなアドバンテージですね。

FUNA

ポートフォリオは作るだけで得にしかなりません。損することは絶対に無いので必ず作りましょう！

Webエンジニアがポートフォリオを作成する8つのポイント

ここでは、Webエンジニアがポートフォリオを作る時に意識すると良いポイントを紹介します。

 Webエンジニアがポートフォリオを作成時【8つのポイント】

順番に解説します。

【ポイント1】シンプルで見やすく

まず、ポートフォリオサイトはシンプルに設計・デザインして見やすいものにしましょう。

デザイン性や動きにこだわりすぎて、伝わりづらいものは避けましょう。

最新の技術を取り入れたいのはわかりますが、そのような技術は実績として別のページで紹介するといいでしょう。

【ポイント2】レスポンシブ対応をする

当たり前ですが、レスポンシブ対応は必須です。

実務ではPCだけでなくスマートフォンやタブレットで見たときも、キレイに表示する必要があります。

そのため、実績やスキルを証明するポートフォリオサイトにも取り入れて、レスポンシブ対応もできることをアピールしましょう。

【ポイント3】コードをきれいに書く

サイトのデザインや見やすさも大切ですが、Webエンジニアの場合ポートフォリオサイト自体のコードも見られます。

見られても恥ずかしくないようにコードはキレイに書くようにしましょう。

コードをキレイに書けるということは、チームなどの大人数で行う開発にも影響するので、重要なこととなります。

大前提は「動くコード」ですが、改修・機能追加を第三者が行ってもスムーズにできるようなコード設計・書き方も最初の内からできるようにしておいて損はないでしょう。

【ポイント4】ユーザビリティを意識する

当たり前ですが、Web制作は自分の自己満でするものではありません。

必ず「見る人」の目線で開発をすすめるようにしましょう。

【ポイント5】自分は何ができるかをわかりやすく

ポートフォリオは自分が何が出来て、何が得意で、どんなものを作ってきたのかをアピールするためにあります。

そのため、実績やスキルの紹介がわかりにくくなってしまわないように注意しましょう。

【ポイント6】オリジナリティや独創性をもたせる

ポートフォリオを作ると言っても、テンプレートなどを使ったり、誰かのデザインや機能を真似するのではだめです。

参考にすることはあっても同じにするのはやめましょう。

ポートフォリオサイト自体も評価の一つとしてみてもらうためには、オリジナリティや独創性は必要不可欠です。

どこかで見たことがあるようなものにするのではなく、オリジナリティがあるけど見やすいものにしましょう。

【ポイント7】使用した技術やそれを選んだ理由を明確に

ポートフォリオサイトを作るに当たって、掲載する実績やスキルに対して、「なぜこの技術を使おうとおもったのか」その理由を明確にしましょう。

実務に入ると、要件にたいしてどのような技術を使って実現するかを考える必要があります。

しっかりとした根拠を持つことで説得力をもたせて、相手を納得させられるようにしておくと良いです。

【ポイント8】実績が見やすくわかりやすく紹介できているか

これは当たり前ですが、せっかく掲載する実績は見やすく・わかりやすいように紹介しましょう。

頑張って取り組んだアピールポイントも見にくく、わかりにくいものでは勿体ないです。

「これが実績です！！」と目に見えてわかるくらいがちょうど良いですよ。

未経験のWebエンジニアがポートフォリオを作成する手順

ここからは、実際にポートフォリオサイトを作るための具体的な手順を説明します。

全体の流れは下記のとおりです。

順番に見ていきましょう！

【Step1】参考にするサイトを探す

前半でも紹介しましたが、まずは参考にしたいサイトを探してみましょう！

このサイトでは、一覧で色んな人が作ったポートフォリオを見ることができます。

もし、気に入ったデザインや技術があった場合は取り入れられるかどうかを考えてみましょう。

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

では次にサイト全体の構成を考えていきます。

1ページで完結させるのか、よく見るサイトのように親子構造にして複数ページで作るのか。

これらはStep1で参考にしたサイトなどを元に構成を作りましょう。

特に必要な項目としては以下のようなものがあります。

これらにプラスしてなにか必要なものがあれば、追加していくと良いでしょう。

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

サイト構成が考えられたら、いよいよサイトのイメージを書き出してみましょう。

この作業が「ラフ」や「ワイヤーフレーム」といったものを作ることを言います。

ここでの作業は非常に重要になってきます。

どこになにをどのように配置するのかを決めていくのですが、この作業を丁寧に作り込むことで次のコーディングのやりやすさが変わってきます。

【Step4】コーディング

ここまできたらあとは実際にコーディングしましょう。

特に気をつけてほしいのが、「キレイにコーディングする」ことです。

IDやクラスの命名規則であったり、適切なセレクターが使われているかなどを大切にしてください。

【Step5】アップロード

コーディングができたら、あとはサーバー上にアップロードするだけです。

アップロードが出来たら、様々なデバイスやOS、ブラウザで表示のチェックをすることも忘れないようにしてくださいね！

未経験のWebエンジニアがポートフォリオ作成後にやるべきこと

Webエンジニアが無事ポートフォリオの作成が完了したら、それでOKではありません。

作成後にもやらなければいけないことがあります。

順番に詳細を説明していきます。

作成後にやること① 定期的な更新

まず、必ず忘れてはならないのが「定期的な更新」です。

ある程度仕事を受けられるようになると、ポートフォリオの更新をせずに昔の情報のままのエンジニアがよくいます。

ですが、これは間違っています。

Webエンジニアの守備範囲は開発だけでなく、運用・保守も含まれます。

作成したサイト（ポートフォリオ）を運用・保守出来ない人はエンジニアとして失格ですね。

更新する内容ですが、例えば「実績」などの追加はもちろん、日々の実務や学習で身に付けた新しい技術を盛り込むのも良いでしょう。

学習のアウトプットとしてもポートフォリオは活用できますので、ぜひ使っていきましょう。

作成後にやること② SNS等で拡散する

作成したポートフォリオサイトはSNS等で積極的に公開・拡散しましょう。

SNSで見てもらえると、お仕事を依頼してくれる人がいたり、褒めてもらえたり指摘をしてもらうことが出来ます。

「指摘されるのはいやだ。」という人もいるかも知れませんが、その言葉というのは見た人（第三者）がサイトを見て思ったことです。

つまり、指摘やお褒めの言葉こそが作ったポートフォリオサイトの評価になります。

このような経験を通して、さらなる改善やカスタマイズをすることが可能です。

作成後にやること③ 名刺などにURLを記載する

ポートフォリオを作ったなら、名刺などの自分を紹介するものには掲載しましょう。

頑張って作ったサイトなので、できるだけ多くの人の目に触れられるようにできるといいですね。

また、名刺を持つことにより色々な場面で役に立つので、エンジニアの方は持っておくと良いでしょう。

関連記事