プログラミング/仕事

エンジニア・デザイナー向けポートフォリオサイトの作り方【自作orテンプレート両方解説】

エンジニアに必須のポートフォリオサイトの作り方【自作orテンプレート両方解説】
本ページにはプロモーションが含まれています。

こんにちは、フリーランスエンジニア歴数年のしょーごです。

Web制作を学ばれている方で今この記事をご覧になっているような方なら、

いくつか自分の作品(コーディングでもデザインでも)が揃ってきた頃かと思います。

しかし、その作品群を見やすいようにまとめていますか?

まさひろくん

え、作ったまま放置しています。営業や就活のときに提出すれば問題ないのでは?

駆け出しさん

一応ネット上に作ったサイトは公開しているのですが、それでは足りないのですか?

しょーご

それでも問題ないと思うんだけど、作品群を見やすくまとめておくのは簡単にできるよ!それだけでもやっておくと更にアピールしやすくなるので、その方法を今回はご紹介します!

この記事でわかること
  • ポートフォリオサイトについての役割の理解
  • 作り方の流れ、手法の理解

“ポートフォリオを作ったあとの活かし方”の話は抜けがちなので、今回の記事でしっかり補足できればと思います。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

オリジナルポートフォリオも準備できるようになりました!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

Web制作の営業文を添削するサービスはこちらから
目次
  1. 宣伝:そもそものポートフォリオの準備
  2. 大前提:サイトを公開していること
  3. ポートフォリオをまとめる「ポートフォリオサイト」を持とう!!
  4. ポートフォリオサイトにぜひ入れたい要素
  5. 制作物が少ない状態で作って意味あるのか
  6. ポートフォリオサイトの公開方法は大きく4種類
  7. ①ポートフォリオ公開サービスを利用する
  8. ②WordPressテンプレートを利用する
  9. ③NoCodeサービスでポートフォリオサイトを制作
  10. ④完全自作でポートフォリオサイトを制作する
  11. 結局どの手法が一番良いの?
  12. ポートフォリオサイトの注意点
  13. ポートフォリオを複数用意する方法
  14. まとめ

宣伝:そもそものポートフォリオの準備

コーディング課題 XD PSDデザインデータ配布

ポートフォリオサイトを準備する以前に、優れたポートフォリオが無いと話にならないので、

まさひろくん

ポートフォリオ自体まだあまり揃っていないのですが…

こういった方に「良質なポートフォリオを用意できる課題」を用意しておりますので、ご活用ください!

コーディング演習課題はこちらから/

大前提:サイトを公開していること

大多数の方は大丈夫だと思いますが、「ネット上にサイトを公開していること」は大前提になります。

サイトをネット上に公開する理由
  • 実務ではネット上にサイトを公開するのが基本
  • 送られてきた作品をファイルを展開して開くのはとても面倒だし、実務で見ない形式なので、スキルに疑いを感じる。
  • サーバーやドメインの知識が無いと実務で詰む

まだサイトを公開したことがない人は、早急にサーバーに自分のポートフォリオを公開されることをおすすめします。

\ポートフォリオを公開するならこのサーバー!

また、そもそものポートフォリオが悪いと話にならないので、自分のポートフォリオの質と量も確認しておくと良いと思います。

ポートフォリオをまとめる「ポートフォリオサイト」を持とう!!

さて、ここから本題です。

この記事の結論は「ポートフォリオサイトを持とう」ということになります。

まさひろくん

ポートフォリオサイトってポートフォリオと何が違うんですか?

しょーご

簡単に言うと「ポートフォリオをまとめたサイト」なんだけど、ポートフォリオだけでは伝えられない要素や魅力を伝えるのに効果を発揮するものだよ。

ポートフォリオサイトを持つとどうなる?

ポートフォリオサイトを持つことのメリットは以下の通り。

  • 閲覧者が作品群を俯瞰して見ることができるので、単発で一個一個作品を見てもらうよりも、自分のスキル感の全体像を見てもらいやすい
  • 作品以外にも、自分の経歴や思いなどをアピールできる
  • 作品一つ一つについても、仔細を紹介できる
  • スクールの課題で作らされたサイトでないこと自体がアピールになる
  • サイト設計の体験ができる
  • サイトの公開方法の練習になる
  • WordPressならブログ運営が可能で、Google Analytics設置、運用の練習にもなる

ちなみに、私の駆け出し期に作成したポートフォリオサイトは以下のようなものです。

しょーご

2018年ですね。自分のサイトを作るのはとても楽しく、気づいたら一日14時間ぐらいコード打ってました。

このポートフォリオサイトは現在は非公開です。その理由は最後の方に述べます。

ポートフォリオサイトにぜひ入れたい要素

せっかくポートフォリオサイトを用意するのであれば、ポートフォリオや営業文だけでは伝わらない「自分の魅力」をしっかりと伝えたいものです。

以下の要素をポートフォリオサイトに組み込むと良いかなと思います。

  1. 自分の略歴
  2. 作品を一覧で見れるセクション
  3. 作品詳細説明ページ(技術詳細や制作期間など)
  4. 制作への思い(人間性)
  5. 制作の流れ
  6. 仕事をする上で気をつけていること(信頼性の担保)

価格表に関しては、個人的には特にいらないかなと思います。駆け出し期は「極端な低単価&短納期」で設定しがちですが、そこはきちんと話し合いで決めるべきかなと。

具体例として、私の知り合いのはにわまん(@haniwa008)師匠のサイトが参考になります。

引用:https://haniwaman.com/lp/
しょーご

私も駆け出し期から参考にしていたサイトです。信頼感がかなり醸し出されており、自分だったら制作を頼みたいなと思わせる雰囲気がありますね。

制作物が少ない状態で作って意味あるのか

ここで先にみなさんの疑問に回答しておこうと思います。

まさひろくん

ポートフォリオって言っても、何個もあるわけじゃないんですけど、まとめる役割のポートフォリオサイトなんて今の段階でいるのかな?

しょーご

良い気づきですね。ポートフォリオサイトはとりあえず使えるポートフォリオが最低「3つ」揃ったら準備し始めれば良いかなと思います。

ポートフォリオサイトは成長させ続けられることが最大のメリットなので、実績が貯まるほど、どんどん魅力的なサイトになっていきます。

あとこのあと解説しますが、作る工程そのものが勉強になる側面があります!

ポートフォリオサイトの公開方法は大きく4種類

ポートフォリオサイトの作り方には大きく3種類あります。

ポートフォリオ公開方法と難易度
  1. ポートフォリオ公開サービスを活用するー難易度★☆☆☆
    手軽にさっとポートフォリオを公開するなら、これ
  2. WordPressテンプレートを活用するー難易度★★☆☆
    自分のオリジナルポートフォリオサイトを勉強しつつ手軽に持つなら、これ!
  3. NoCodeサービスを活用して構築するー★★☆☆
    WordPressを学ばなくても、ポートフォリオサイトを構築可能!
  4. 完全自作で制作するー難易度★★★★
    サイト制作を設計・デザイン・コーディング・公開・運用まで全て行いたいなら、これ!
    (ちなみに筆者はこれを当時選びました、一週間でめちゃくちゃ成長しました

それぞれを詳しく解説していきます。

①ポートフォリオ公開サービスを利用する

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

まずは一番簡単な方法からご紹介します。

まさひろくん

とりあえず時間とお金をかけずに、ポートフォリオをシンプルに一覧にして公開できたら問題ないかなぁ。

それならば、このパートで紹介する「ポートフォリオ公開サービス」を活用すれば問題ないです。

ポートフォリオ公開サービス①RESUME

まず最初に紹介するのがRESUMEです。

これを使えば簡単に自分のポートフォリオや略歴を公開することができます。

作品一つ一つに対しても細かく解説を入れられるので、これで十分という人も多いと思います。

いくつか例を提示します。

自分のスキルをグラフで表示できたり

引用:https://www.resume.id/terico

自分の略歴を時系列順に入力することができたり

引用:https://www.resume.id/terico

自分のポートフォリオについて一つ一つ詳しく述べることができます。

引用:https://www.resume.id/terico

ポートフォリオ公開サービス②foriio

ポートフォリオ公開サービス

次に紹介するのはforiioです。

こちらも手軽にポートフォリオを公開することができるサービスになります。

こちらも同様に作品を一覧で紹介できて

引用:https://www.foriio.com/odenweb

作品一つ一つに対して説明を添付することができます。

引用:https://www.foriio.com/odenweb

どちらを使えば良いのか

正直私はどちらでも大丈夫だと思います。特に大きさな差があるわけではないので!

ポートフォリオ公開サービスはどんな人におすすめか

メリット

とにかくすぐに、ポートフォリオを一覧にしてまとめられればよく、独自性はいらない場合。

②WordPressテンプレートを利用する

次に紹介するのが「テンプレートを用いたポートフォリオサイトの構築」です。

ここでは「WordPressテンプレート」を紹介していきます。

ありさちゃん
ありさちゃん
さきほどのサービスとWordPressテンプレートって、何が違うんですか?
しょーご

WordPressテンプレートは簡単に言えば、既に基本的なデザインなどが用意されていて、あとはブロックなどを組んですぐにサイトを作れるものです。
WordPressブログは基本的にテンプレートを利用しています。
ちなみに、このブログでは「JIN」を利用しています。

しょーご

なのでもっと自由度高く、かつ簡単に自分色を出したオリジナルのサイトを作ることができます。

他の相違点
  • WordPressのテンプレートを活用したサイト制作の勉強になる
  • 自分でサイトを公開するので、サイト公開の勉強になる

WordPressテンプレートはSNOW MONKEYがおすすめ

テンプレートを用いたポートフォリオサイトの制作なら、「SNOW MONKEY」がおすすめです。

SNOW MONKEYを利用するメリットは以下の通り。

SNOW MONKEYがおすすめな理由
  • 実案件でも使えるぐらい高機能であるので、得たスキルはそのまま資産になる
  • 自分オリジナルのページが作りやすい(キャッチコピー:”どんな味付けにも染まる、高級お出汁のよう”)
  • コーポレートサイト向けのテーマや専用プラグイン、APIなどが豊富

SNOW MONKEYで作れるサイトは多種多様で、例えば以下のようなサイトを作ることができます。

このような堅めのコーポレートサイトも作れるし、

引用:https://snow-monkey.2inc.org/2022/09/08/ichinose-c-jp/

おしゃれなサロンサイトも作成することができます。

引用:https://snow-monkey.2inc.org/2022/03/31/cacheri/

和風サイトだっていけますよ!

引用:https://snow-monkey.2inc.org/2022/07/11/chasanraku/

以下は私が過去に所属している団体向けに作ったサイトです。

新潟大学管弦楽団トロンボーンパート
引用:https://tromboneclub.site/
しょーご

多種多様なサイトが制作できますよ。

SNOW MONKEYを利用したポートフォリオサイト例

具体的なポートフォリオサイトとしては、例えば以下のようなものがありますね。

引用:http://hosifuluko.com/uebudo/

SNOW MONKEYで案件獲得も可能

SNOW MONKEYは案件でも使うことが可能です。

下請けのコーディング案件としてというよりは、自分で直接案件を受注した、自分で直接顧客と商談可能な場合です。

例えば、私の友人はSHOW MONKEYを利用した制作サービスを展開しています。

Snow Monkeyを使った格安ホームページ制作サービス

しょーご

つまり、ポートフォリオサイトを作る中で培ったSNOW MONKEYのカスタマイズのスキルは、そのまま案件でも活きるということです。凄い!

“類人猿”でビジネスサイトを爆速構築も可能

引用:https://rui-jin-en.com/

SNOW MONKEYには「類人猿」と呼ばれるサードパーティーアドオンがあります。

これを入れることで、更に多様なサイトを制作できるようになります。

しょーご

この拡張性の広さがSNOW MONKEYの強みですね。そのまま実案件でも使えるスキルですし。

SNOW MONKEYがおすすめな人

メリット デメリット
  • 実案件まで見据えてコスパよくポートフォリオサイトを準備したい
  • 案件でも使ってみたい
  • WordPressを触って仲良くなりたい、

そんな人におすすめです。

③NoCodeサービスでポートフォリオサイトを制作

次にご紹介する方法は「NoCodeサービスを活用する」手法です。

ここでは具体的に「STUDIO」を取り上げます。

ようこちゃん
ようこちゃん
え、これはこれまでの手法と何が違うんですか?
しょーご

もともとNoCodeでサイトを制作するサービスなのに加え、サーバーはサービス側にあるので、WordPressと違って、自分で用意する必要がない点ですね。

STUIDIOで作られたポートフォリオサイト例

引用:https://makikosakamoto.design/

こちらはWebデザイナーの方が「Figmaでデザインして、STUDIOで制作」されたそうです。

めちゃくちゃクオリティが高いです…

STUDIOがおすすめな人

STUDIOはデザインの自由度がかなり高い分、Webデザインなどを自分である程度行える人におすすめです。

逆に、NoCodeツールということで、一般的なWeb制作の案件では使われることがそんなにないので、

コーディングをメインに仕事をしようとする人には、STUDIOでの制作スキルはそこまで役立たないかもしれません。

デイトラWebデザインコース内にSTUDIOコンテンツあり

ちなみにですが、Webデザインコース内にSTUDIOでサイト制作を学べるコンテンツがあります。

デイトラWebデザインコース公式

https://www.daily-trial.com/web_design

個人的にSTUDIOはコーディングをバリバリ行う人よりか、Webデザインを行う人が制作も行う場合に合うかなと思っているので、

Webデザイン主体の方はSTUDIOは特にいいかなと思います。

④完全自作でポートフォリオサイトを制作する

最後に紹介するのが、最も大変ですが勉強になる「完全自作でポートフォリオサイトを制作する」手法です。

完全自作のポートフォリオ例

いくつかピックアップしてみました。

https://u-d-l.jp/

https://satoken369.com/

https://techmi.website/portfolio/

大変だが勉強になる完全自作ポートフォリオ制作

一からポートフォリオサイトを制作するのは大変です。なぜなら「制作のほぼ全ての工程」を経験することになるからです。

工程を一覧にして書き出してみます。

  • サイト・コンテンツ設計
  • ワイヤー作成・デザイン起こし
  • 静的HTMLコーディング
  • WordPress化
  • 基本的な内部SEO対策
  • サーバー・ドメインの契約と紐付け
  • ローカル環境→本番環境へのアップロード
  • Google Analyticsなどのタグ埋め込み
  • 運用

これらを一人で行うので、当然かなりの勉強になります。

納品方法に不安がある人向けでもある

以前に「Web制作案件の納品方法」についての記事を書きました。

Web制作での納品でやはり初学者の方が一番つまずくのが「FTPでサーバーとやりとりするところ」だと思います。

下手するとサイトが消えるので、毎回ヒヤヒヤする部分でもあります…

私は自分のポートフォリオサイト制作を通してFTPとだいぶ仲良くなれたので、これが一番大きな収穫でした。

FileZillaとかで正常にサイトをアップロードできるまで、当時はまる二日かかった記憶がありますね…

今はめちゃくちゃ分かりやすい記事を私が書いたので、初学者の方が羨ましい笑(自我自尊)

しょーご

個人的には実案件前にこれをこなせてから、かなり自信がつきました!

完全自作ポートフォリオサイトがおすすめな人

メリット

時間をかけてでも良いから、自分のオリジナルサイト制作を通して、制作の自信をつけたい人。

結局どの手法が一番良いの?

評判

個人的には「SNOW MONKEY」を利用した「WordPressテンプレートを利用する」方法が一番良いかなと思います。

  • 制作に時間がかからない
  • デザイン素人でもそれっぽいものが作れて
  • 実案件でも利用することができてスキルが資産になり
  • サーバー・ドメインにも触れるので、そこのスキルも身につく
  • そのままブログも運営可能

このようにメリットが非常に大きいためです。

なので私が駆け出しなら、「SNOW MONKEY」でポートフォリオサイトを制作すると思います。

案件で初見困るポイントとして、最後に地味に「Google Analyticsやサーチコンソールの設置・設定」があったりするのですが、そういう所も練習可能ですからね。

しょーご

完全自作ポートフォリオサイトは勉強にはなるし楽しいですが、やはり時間はかかりますね。楽しいですが!笑

ポートフォリオサイトの注意点

全員が見てくれるわけではないことは念頭に置く

ポートフォリオサイトは、例えば案件獲得営業をかけた先の人が全員見てくれるわけではありません。

人によっては、「簡潔に作品だけまとまっていれば良い」という人もいます。

ただ、今回ご紹介したように、「ポートフォリオサイト制作を通じて勉強になる」面もあるので、私としては用意してもいいのかなと思います。

作品一覧が一番重要

ポートフォリオサイトで一番重要なのは、「作品が見つけすいこと」です。

極端に言うと、ファーストビューすぐ近くに一覧があってもいいかなと思います。

アイコン名を入力

この人の作品はどこにあるんだろう…探せない…

という状況は避けるようなデザイン・構成が良いかなと思います。そこだけ注意ですね。

しょーご

閲覧者が一番気になるのは実績の部分なので…

仕事が途絶えない人はわざわざ用意する必要なし

最近の私もですが、仕事が自動的に来るような人はポートフォリオサイトを持っていないケースが多いです。

持たなくても、普段の仕事で信頼値が溜まっているので、営業をする必要もないからですね。自動的に次の仕事が決まります。

私も初見の人から新規案件を受けることは今やほとんどない状態なので、サイトは閉じてしまいました。

なので、

ゆうすけくん
ゆうすけくん
駆け出しですが、既に案件がたくさん来ています。

こういう方は、特に用意する必要もないかもです。

しょーご

ただポートフォリオサイト制作を通して、Web制作の流れに関してかなり勉強になった記憶があるので、作って良かったと思っています。

ポートフォリオを複数用意する方法

ConoHa WINGでポートフォリオサイトを公開する方法を丁寧に解説

ポートフォリオサイトを公開するには、複数のサイトを同じサーバーに公開することになると思いますが、そのあたりを以下の記事で詳しく解説しています。

まとめ

ここまで「ポートフォリオサイトの作り方」を解説してきました。

「必ず用意すべき!」というものではないですが、あると他のライバルと差をつけられるポイントになる上に、作る過程がとても楽しく勉強になります。

これから案件獲得営業や就職転職を考えられている方は、ぜひ!

Web制作完全独学ロードマップはこちら

私の「Web制作独学ロードマップ」の中にも「ポートフォリオサイト作成パート」をオプションで入れています。

Web制作の案件獲得&営業解説はこちら

Web制作会社への営業方法はこちら

web制作会社営業方法・文

こちらのコンテンツでは、「具体的にどうやってポートフォリオを会社へアピールすれば良いのか」を徹底解説しています!

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,XD,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. オリジナルポートフォリオとして準備できる

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2023年7月に改定を行い、オリジナルポートフォリオ、つまり「他人と被りにくいポートフォリオ」まで準備できるようになりました!

オリジナルポートフォリオコーディング課題
Web制作 コーディング課題 オリジナルポートフォリオ
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

デザインカンプからのコーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

あなたに是非読んでほしい記事です!