プログラミング、気楽な生き方を中心に発信しています。
  • twitter
  • instagram
  • facebook

ポートフォリオの作り方を解説【未経験からデザイナー、コーダー、エンジニアを目指す】

吹き出しくん

ポートフォリオって何だろう。ポートフォリオって必要なのかな?どうやって作るか知りたい。未経験だけどWEBエンジニアになりたい!

こんな悩みを持っている方へ

ポートフォリオはエンジニアを目指す方にとっても必需品とも言えます。

本記事では未経験でWEBエンジニアを目指している方向けにポートフォリオの作り方を解説していきます。プログラミングの基礎学習が1通り終わり、実務に入りたいという方は参考にどうぞ。

僕について

大学時代にプログラミング学習をして、新卒でWEB制作会社に入社しました。現在はフリーランスとして生きています。

ポートフォリオって何?必要性は?

ポートフォリオって何?必要性は?

まずはポートフォリオに関する基礎知識を解説します。

ポートフォリオって何?

自分をアピールするための資料です。

エンジニアとしての自分を知ってもらう為の実績などをまとめます。営業をして案件を獲得したり、就活をする時に使用します。

主に下記のような事をポートフォリオにまとめます。

  • 自己紹介
  • スキル
  • 実績
  • 制作依頼の価格
  • お問い合わせ

自分のスキルなどを自分の言葉でまとめる事でアピールする事ができます。

Twitterなどで「#駆け出しエンジニア」と検索するとポートフォリオを公開している方がいますので参考にしてみましょう。

ポートフォリオの必要性

デザイナー、コーダー、エンジニアを目指すなら必須です。

基本的にエンジニア系の仕事をしたいという方は大体の方はご自身の実績をポートフォリオにまとめている方が多いです。

業種別にポートフォリオに載せる実績は変わってきます。

  • デザイナー:バナー、サイトデザイン、グラフィックデザインの実績
  • コーダー:コーディングの実績
  • エンジニア:自作のアプリ、自作サービスの実績

主に上記のようになりたい業種によって載せる内容は変わってきます。自分がなりたい職を明確にしてポートフォリオを作っていきましょう。

最近はWEBデザイナーを目指す場合でも、コーディングスキルが必須になってきたりしていますので入りたい会社の必要スキルをしっかりと把握しておく必要があります。

自分はまだまだ実力が足りないかもと思う方は、テックアカデミーで基礎から学び直すのもアリです。テックアカデミーは基礎から学べて最後にはポートフォリオにもなる自作サイト、サービスを作るところまで学べるのでオススメです。無料体験も行っておりますので気になる方はどうぞ。

»テックアカデミーの無料体験はこちら

ポートフォリオの目的を決める

ポートフォリオを作る目的によってコンテンツを変えていく必要があります。

ザックリと下記の通りです。

  • 就活に使いたい:自分をとことんアピールするコンテンツ
  • 営業に使いたい:スキルと料金などのコンテンツ

営業というのはフリーランスなどになって自分で仕事をもらって仕事をしたい場合です。そういう場合は自分のスキルと制作彫金をメインに作っていく必要があります。

逆に就活用にポートフォリオを作る方は、料金表とかは必要ないです。

会社の方に自分を知って貰えるようにスキルやプログラミング学習をした経緯などをしっかりと書く必要があります。

就活用、営業用でのコンテンツの例を作ってみました。

就活用のポートフォリオ

  • 自己紹介
  • スキル
  • 制作実績
  • 自問自答Q&A
  • お問い合わせ

自問自答Q&Aがあると面白いなと思い追加しました。【Q:趣味は何ですか?A:読書、昆虫採集】みたいな感じです。ポートフォリオの最後にこういうコンテンツを用意しとくと書類選考の時点で興味を持ってもらえる確率が増えそう。

※僕は虫が嫌いです。昔の上司の趣味です。

営業用のポートフォリオ

  • 簡単な自己紹介
  • スキル
  • 制作実績
  • 制作の流れ&説明
  • 制作の価格
  • お問い合わせ

スキル、実績、制作の流れなどを分かりやすく書いて強みなども追加できれば尚良いです。とはいえ、営業は実績と提案方法が大事ですのでポートフォリオにこだわる必要はそんなに無いかと思います。

無難なポートフォリオを1つ用意しておきましょう。

公開:僕の就活時代のポートフォリオ

僕は幅広く学習していたので学習していた事、全てを載せていました。

  • サイトデザイン
  • JSを使ったサイトコーディング
  • 自作のWordPressテーマ

サイトデザイン、コーディング、WordPressを使ったCMS構築なども行っていましたので幅広く載せていました。

結果としては、ベンチャーのWEB制作会社から内定をいただき入社後も幅広く実務をこなしていました。

文章や実績などは伏せてありますが、僕が就活に使っていたポートフォリオを公開します。雰囲気だけ共有できたらと思います。デザインセンスに自信がなかったので素人感が出ないように白基調のシンプルなサイトにしていました。

»僕の就活時代のポートフォリオ

ポートフォリオの作り方を解説

ポートフォリオの作り方を解説

僕なりのポートフォリオの作り方を解説していきます。
参考程度にどうぞ。

個性を出したサイトにする

良い意味での個性をだしたサイトが良いです。ふざけるとはまた違います。

ただ自分のスキルなどを載せているだけだと、周りのライバル達と差別化ができないのでもっと人間味を出すのが良いと思っています。

人間味を出す事で入社後の自分がイメージしやすいし、親近感が湧きます。

自分がこういう人間だとしっかりアピールできると良いです。

僕の場合はサイトの最後に自作自演のQ&Aを作って、自分の趣味などをアピールしていました。堂々と趣味などを書くのに抵抗があったので、さりげなく書いていました。

※マイナスな事ではなくて、プラスになるポジティブな内容が良いです。

フリー素材よりもオリジナルの画像が良い

ポートフォリオに使用する画像はフリー素材の綺麗な画像を使うのも良いですが、なるべくオリジナルの画像を使った方がオリジナリティーが出ます。

自作のバナーや自分の写真を使った方が好印象だと思います。僕が就活に使っていたポートフォリオでは大学時代のサークルの集合写真などを使っていました(笑)少しやり過ぎだったかもですが結果的に就職できたのでOKです。

ポートフォリオを作る意味は「自分というものアピール」する事なのでフリー素材を使っていたら勿体ないです。なるべくオリジナルの画像を用意しましょう。

実績を載せる

未経験の方は「実績なんかないよ」と思うかもですが実務経験はいらないです。自分で自作したものでしたら何でも実績にできます。

例を挙げると下記の通りです。

  • デザイナー:バナートレース 、デザイン模写、オリジナルデザイン
  • コーダー:模写コーディング、オリジナルサイト
  • エンジニア:自作アプリ、自作サービス

上記のように実務経験も不要です。

自分が今のスキルで作れるものを制作して実績としてポートフォリオにまとめましょう。こういうものが作れると相手に伝わればそれは実績です。自信を持って掲載しましょう。

コーダーを目指している方で、模写コーディングをやった事がない方は「【簡単】模写コーディングの手順とやり方を徹底解説【脱初心者】」という記事で解説していますのでどうぞ。

作成後はサーバーにアップロード

ポートフォリオ作成後はサーバーにアップロードして公開します。

公開方法は有料と無料の方法があります。

  • 有料:レンタルサーバーで公開
  • 無料:Githubで公開

phpなどの言語を使う場合は有料ですが、レンタルサーバーを借りて公開する必要があります。

php言語を使わずに、HTML,CSS,JSのみの場合はGithubで無料で公開する事ができます。自分のポートフォリオに合わせて公開方法を選びましょう。

レンタルサーバーで公開する方法ですと、費用的には月々1000円程度かかります。勉強になるのでレンタルサーバーを借りるのが個人的におすすめです。

サイトの公開方法は下記の記事で解説しておりますのでどうぞ。

ポートフォリオを作成してからがスタートライン

ポートフォリオ作成までは、ウォーミングアップのようなものです。ここまで努力次第で誰でも達成できますが、ここから先は根性と気合いが必要です。

WEB制作会社に就職するなら面接対策が必要になりますし、副業など個人で稼ぎたいという方は案件を獲得する必要があります。ポートフォリオは道具の1つなので、作っただけでは意味がないです。ここからさらに行動して自分の目的を達成しましょう。

僕はWEB制作会社も個人で稼ぐも経験しており、ノウハウは全て公開しておりますので参考にしてみてください。

WEB制作会社の面接対策

WEB制作で個人で稼ぐ

それでは頑張ってください。