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

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

以下、先日のポストです。

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

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

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

入れ物より、中身
既存サービス使う方いいかも#駆け出しエンジニアと繋がりたい https://t.co/uc7ISZzeaB

— モリ｜Web系フリーランス (@MockRoll) September 2, 2022

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

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

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

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

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

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

本記事では

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

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

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

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

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

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

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

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

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

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

— たにぐち まこと／学ぶ。をちゃんと (@seltzer) August 15, 2019

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

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

前章で

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

と紹介しました。

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

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

以下のポストをご覧ください。

採用担当も経験している自分の個人的な見解ですが、ポートフォリオサイトを0から自分で構築してようが、既存のポートフォリオ生成サービスを使ってようが、PDFだろうが、気にしたことはないですー。入れ物は正直何でもよくて、その中身(載ってる制作物)で判断してます🙂
他の会社さんはどうなんだろ🤔

— まいるどしゅがー/デザインとデスクと物欲 (@whispervoiceday) July 24, 2021

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

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

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

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

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

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

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

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

転職のため、もしくはフリーランスとして仕事を取るため…など、何かしら理由があるはずです。

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

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

そもそも「何から学べばいいかわからない」「独学に限界を感じている」という方は、ポートフォリオ制作のサポートが受けられるプログラミングスクールを活用するのも一つの手です。

スクールによっては実績用のデザインカンプ素材や、コードレビューが受けられるところもあります。

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

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

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

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

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

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

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

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

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

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

また、これからレンタルサーバーを選ぶ方は、以下のいずれを選べば間違いありません。

これから初めてサーバーを触る方は、エックスサーバーがおすすめです。

ちなみに、僕は初めてのサーバー選びのとき、エックスサーバーを選びました。とにかくセットアップや設定がラクで、通信速度やつながりやすさについても、いまだに不便を感じたことは一度もありません。

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

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

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

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

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

この章では、

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

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

見られる箇所

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

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

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

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

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

人はどんな美しいデザインや画像よりも、真っ先に「人の顔」に目が行くものだからです。

見られない箇所

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

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

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

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

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

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

とはいえ、

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

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

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

①Taiki Katoさんのポートフォリオサイト

まず目を引くのは全幅で敷き詰められた画像。

カーソルを当てるとカード型の情報が表れます。

書体もおしゃれです。

②徳田 優一さんのポートフォリオサイト

信頼感、わかりやすさもありつつ、デザインもすっきりしていておしゃれ。

ポートフォリオサイトをつくるならまず参考にしたい、お手本的なサイトです。

③櫻井 優樹さんのポートフォリオサイト

余白の使い方が素晴らしいです。

フォントサイズの強弱でここまで雰囲気が変わることを実感させられます。

④わたなべみきさんのポートフォリオサイト

太めのフォント、セクションの継ぎ目のないデザインが印象的です。

下層ページトップの太い囲みも、雰囲気ピッタリです。

⑤丸岡 勇太さんのポートフォリオサイト

ありそうでないデザインのプルダウンメニューはシンプルでありながら存在感があります。

丸岡さんご自身が硝子作家であることからか、彩色少なめの透明感のあふれる仕上がりが見事です。

⑥CANOPUS公式サイト

トップページは全画面のランダム画像1枚でインパクトが強めです。

しかしそれ以上に

• 下層ページの会社
• メンバー紹介
• 実績ページの配置
• まとめ方

どれをとっても余白の使い方がたいへんキレイです。

読みやすく、見やすいサイトです。

⑦WordPressテーマ「Folclore」デモサイト

シンプルを極めたメニューバーは、マウスホバーするとさり気なくブロックが浮かび上がります。

⑧WordPressテーマ「SCREEN」デモサイト

トップページは画像のみで、詳細はメニューバーに格納されてるパターンです。

自己紹介、実績ともに大変シンプルで見やすく、参考にしたいデザインです。

⑨WordPressテーマ「Write」デモサイト

ミニマルを極めたサイトです。ブログ向けのサイトですが、

• 写真の配置やフォントのチョイス
• 読みやすい行間や文字間隔

など、ポートフォリオサイトに積極的に取り入れたい要素が盛りだくさんです。

コーダーのポートフォリオに関連するよくある質問

ポートフォリオが完成したら次にやること

ポートフォリオが完成したら、次にすべきは「実際に仕事をして、実績を増やすこと」です。

どんなに丁寧に作ったポートフォリオも、実績が1〜2件のままでは、やはり見劣りします。

逆に言えば、実績が増えるほど、ポートフォリオはより大きな力を発揮するものとなります。

最初から高単価・高難易度の案件は狙えないので、まずは小さな仕事を一本こなして、「納品した」という事実を積み重ねることが大事です。

そのための入口として使いやすいのが、クラウドワークスです。クラウドソーシングサイトの中でも、未経験・実績少なめでも応募しやすいコーディングやLPの案件が多いためです。

正直、単価は低めのものが多いですが、「仕事した」という実績は着実に積み上がり、ポートフォリオに載せられるものが増えるのは大きなメリットです。

1. 受注
2. 納品
3. ポートフォリオに追加

このサイクルが回り始めると、気づいたころには「大きな力をもつポートフォリオ」に育っています。

まとめ

以上、未経験コーダーのためのポートフォリオサイトの作り方をはじめ、見られる箇所や見られない箇所についてご紹介しました。まとめると、以下のとおりです。

目的を明確にして、必要に応じて効率よくポートフォリオを作りましょう。

あわせて読みたい

【初心者向け】差がつく！Web制作ポートフォリオサイト例10選 ポートフォリオサイトで差をつけたい。でもどんなデザインにしたらいいんだろう？なるべく人とかぶりたくない。スタイリッシュで初心者にも優しいサイトないかな。 とい...

あわせて読みたい

【必見】Web制作の面接・営業で必ず役立つポートフォリオの作り方とは？ Web制作のポートフォリオを作りたいけど、何から始めたらいいの？面接や案件獲得のために、イケてるポートフォリオを作りたい！みんなどんな感じのものを作ってるんだろ...

あわせて読みたい

コーダーはいらない？今後の時代にコーダーが稼ぐために必要なこと 検索しても予測に「コーダー いらない」って出てくる。コーダーの将来性は微妙？今後コーディングで生計立てるのは難しい？ と、お悩みの方へ向けた記事になります。 先...

あわせて読みたい

【現実】今後コーディングだけで仕事は取れない【+aでスキルを】 コーディングの単価って、思ったより安い…。今後コーディングだけでは、仕事はとれなくなるのかな。 といったお悩みをもった方へ向けた記事になります。 先日のツイート...