【お手本あり】コーダーのポートフォリオ制作手順と見られる箇所

2022年9月2日2023年9月8日

悩む人

未経験コーダーがポートフォリオ作るなら、何からやるべき？
事例とかあれば見てみたい。

といったお悩みの方へ向けた記事になります。

以下、先日のツイートです。

未経験コーダーのポートフォリオ

見られる部分
・職務経歴
・スキルセット
・過去の実績
・表示崩れの有無
・顔写真

見られない部分
・ポートフォリオ自体（入れ物）のデザイン
・長ったらしい自己紹介やエピソード

入れ物より、中身
既存サービス使う方いいかも#駆け出しエンジニアと繋がりたい https://t.co/uc7ISZzeaB
— モリ｜Web系フリーランス (@MockRoll) September 2, 2022

未経験コーダーのポートフォリオ

見られる部分
・職務経歴
・スキルセット
・過去の実績
・表示崩れの有無
・顔写真

見られない部分
・ポートフォリオ自体（入れ物）のデザイン
・長ったらしい自己紹介やエピソード

入れ物より、中身
既存サービス使う方いいかも

この記事を読むメリット

就職や案件獲得に役立つポートフォリオが作れます。
未経験でもムダなく効率的にポートフォリオが作れます。
未経験者でもマネできそうなお手本もまとめてあるので、ライバルと差別化できます。

【お手本あり】コーダーのポートフォリオ制作手順と見られる箇所

未経験者向けのポートフォリオの作成方法を検索すると、非効率なやり方でポートフォリオをつくっている人がたくさんいます。

本記事では

未経験コーダーが就職するため
またはコーディング案件を獲得するため

の、効率のいいポートフォリオの作り方を紹介します。

クライアントや採用担当に見られるポイントなどもまとめていますので、ぜひ参考にしてください。

大前提：ポートフォリオ＝入れ物

作り方を紹介する前に、大前提の話をします。

以下のような勘違いをしている人がたくさんいます。

ポートフォリオ＝「自己紹介サイト」とか、「自らが作った作品」

しかし本来、ポートフォリオ＝入れ物という意味。

みなさんが頑張って作るべきなのはポートフォリオという箱ではなく、中身です。

ポートフォリオを「サンプルサイト」と勘違い（？）している人たちがいると聞いて衝撃を受けたのですが、Portfolioって「入れ物」って意味ですからね、、それ自身が作品になると思ったら本末転倒ですからね、、中身を作ろう。https://t.co/Ar4h5BbWXG
— たにぐちまこと／学ぶ。をちゃんと (@seltzer) August 15, 2019

ポートフォリオを「サンプルサイト」と勘違い（？）している人たちがいると聞いて衝撃を受けたのですが、Portfolioって「入れ物」って意味ですからね、、それ自身が作品になると思ったら本末転倒ですからね、、中身を作ろう。

ポートフォリオ自体の作成は、既存サービスでOK

前章で

ポートフォリオ＝入れ物なので、注力すべきは中身。

と紹介しました。

しかしポートフォリオという入れ物に対し、強いこだわりをもつ方がいます（凝ったデザインなど）。

実際、ポートフォリオ自体のデザインにこだわる必要はありません。

以下のツイートをご覧ください。

https://twitter.com/whispervoiceday/status/1418842060669427713

ポートフォリオ自体をこだわって自作しても、場合によって減点されます。

そのため以下のような、既存のサービスを使う方が無難です。

おすすめのポートフォリオサービス

4ステップ：ポートフォリオの中身を作る手順

この章では、ポートフォリオの中身（実績）の作り方を以下の4ステップでご紹介します。

ステップ①：目的を明確にする
ステップ②：デザインカンプからコーディングする
ステップ③：レンタルサーバーにアップロードする
ステップ④：URLをポートフォリオに掲載する

ステップ①：目的を明確にする

まずは以下を明確にしましょう。

何のためにポートフォリオを用意するのか？

転職のため、もしくはフリーランスとして仕事を取るため…

何かしら理由があって、ポートフォリオの作り方を検索しているはずです。

ます目的を明確にした後、それに必要となる情報やスキルを作るようにしましょう。

最初から目的があやふやだと時間もかかるうえ、まとまりのないポートフォリオとなってしまいます。

ステップ②：デザインカンプからコーディングする

ステップ①で定めた目的に合わせ、デザインカンプを決めましょう。

その後、これまでやってきたとおりにコーディングを行います。

注意点ですが、必ず実績としての掲載が認められているデザインカンプを選びましょう。

後にサーバーにアップロードし、ネット上で公開するためです。

掲載が認められてないサイトを模写してアップロードすれば、著作権問題が絡んでしまうので要注意です。

ステップ③：レンタルサーバーにアップロードする

デザインカンプのコーディングをしたら、レンタルサーバーにアップロードしましょう。

レンタルサーバーにアップロードすることで、URLとしてネット上に公開できます。

アップロード方法は以前の記事、【初心者向け】作成したHTMLをサーバーにアップロードする方法で詳しく紹介しています。

また、これからレンタルサーバーを選ぶ方は、王道ですが以下のいずれかがおすすめです。

おすすめのレンタルサーバー

エックスサーバー：国内人気No1。高スペックで通信速度・安定感ともに定評。

ConoHa WING：WordPress簡単セットアップに対応。通信速度と金額のバランス◎。

ロリポップ：WordPressとの相性抜群。価格も優しく個人利用には十分。

ステップ④：URLをポートフォリオに掲載する

サーバーにアップロード後、URLとして公開できたら、あとはそれをポートフォリオに掲載します。

ステップ②～④を繰り返し、ポートフォリオの中身を充実させましょう。

ポートフォリオの中身が充実しているほど、パッと見の印象が良くなるからです。

ポートフォリオで見られる箇所・見られない箇所

この章では、

ポートフォリオでとくに見られる箇所
とくに見られない箇所

を、それぞれご紹介します。

見られる箇所

ポートフォリオを提出した時に、とくに見られる箇所は以下です。

とくに見られる箇所

職務経歴
スキルセット
これまでの実績
表示崩れの有無
顔写真

まず最初に見られる箇所が、スキルセットと実績。

もはやポートフォリオは、これの証明のために作るようなものです。

なるべく中身を充実させて、ボリュームを増やすことです。

また顔写真ですが、できれば載せましょう。

人が真っ先に注目するのは、どんな美しいデザインや画像より、顔です。

見られない箇所

逆に、とくに見られていない箇所は以下です。

ポートフォリオ自体（入れ物）のデザイン
長ったらしい自己紹介やエピソード

ポートフォリオ自体のデザインは見られてません。
見やすければOKなので、0から自分で作るより既存サービスを使ったほうが早いでしょう。

また、長ったらしい自己紹介やエピソードをポートフォリオに盛り込む方がいます。
じっくり読まれることはないと思っていただいて差し支えありません。

200～300文字程度の簡単な自己紹介と、職務経歴があれば十分です。

ポートフォリオ自作派の方へ：お手本9選

ポートフォリオはあくまで入れ物なので、既存サービスを使うのがいいと前述しました。

とはいえ、

デザイナー希望でもあるので、自分でデザインを考えたい
どうせ作るなら、愛着のあるポートフォリオにしたい
自分で考えて作ることが、ひとつの楽しみでもある

という方もいるでしょう。

そのような方に向け、お手本となりそうなポートフォリオ10選を以下のとおりご紹介します。

①Taiki Katoさんのポートフォリオサイト
②徳田優一さんのポートフォリオサイト
③櫻井優樹さんのポートフォリオサイト
④わたなべみきさんのポートフォリオサイト
⑤丸岡勇太さんのポートフォリオサイト
⑥CANOPUS公式サイト
⑦WordPressテーマ「Folclore」デモサイト
⑧WordPressテーマ「SCREEN」デモサイト
⑨WordPressテーマ「Write」デモサイト