こんにちは、フリーランスエンジニア歴数年のしょーごです。
Web制作を学ばれている方で今この記事をご覧になっているような方なら、
いくつか自分の作品(コーディングでもデザインでも)が揃ってきた頃かと思います。
しかし、その作品群を見やすいようにまとめていますか？
え、作ったまま放置しています。営業や就活のときに提出すれば問題ないのでは？
一応ネット上に作ったサイトは公開しているのですが、それでは足りないのですか？
それでも問題ないと思うんだけど、作品群を見やすくまとめておくのは簡単にできるよ！それだけでもやっておくと更にアピールしやすくなるので、その方法を今回はご紹介します！
- ポートフォリオサイトについての役割の理解
- 作り方の流れ、手法の理解
“ポートフォリオを作ったあとの活かし方”の話は抜けがちなので、今回の記事でしっかり補足できればと思います。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
宣伝：そもそものポートフォリオの準備
ポートフォリオサイトを準備する以前に、優れたポートフォリオが無いと話にならないので、
ポートフォリオ自体まだあまり揃っていないのですが…
こういった方に「良質なポートフォリオを用意できる課題」を用意しておりますので、ご活用ください！
＼コーディング演習課題はこちらから／
大前提：サイトを公開していること
大多数の方は大丈夫だと思いますが、「ネット上にサイトを公開していること」は大前提になります。
- 実務ではネット上にサイトを公開するのが基本
- 送られてきた作品をファイルを展開して開くのはとても面倒だし、実務で見ない形式なので、スキルに疑いを感じる。
- サーバーやドメインの知識が無いと実務で詰む
まだサイトを公開したことがない人は、早急にサーバーに自分のポートフォリオを公開されることをおすすめします。
＼ポートフォリオを公開するならこのサーバー！／
また、そもそものポートフォリオが悪いと話にならないので、自分のポートフォリオの質と量も確認しておくと良いと思います。
ポートフォリオをまとめる「ポートフォリオサイト」を持とう！！
さて、ここから本題です。
この記事の結論は「ポートフォリオサイトを持とう」ということになります。
ポートフォリオサイトってポートフォリオと何が違うんですか？
簡単に言うと「ポートフォリオをまとめたサイト」なんだけど、ポートフォリオだけでは伝えられない要素や魅力を伝えるのに効果を発揮するものだよ。
ポートフォリオサイトを持つとどうなる？
ポートフォリオサイトを持つことのメリットは以下の通り。
- 閲覧者が作品群を俯瞰して見ることができるので、単発で一個一個作品を見てもらうよりも、自分のスキル感の全体像を見てもらいやすい
- 作品以外にも、自分の経歴や思いなどをアピールできる
- 作品一つ一つについても、仔細を紹介できる
- スクールの課題で作らされたサイトでないこと自体がアピールになる
- サイト設計の体験ができる
- サイトの公開方法の練習になる
- WordPressならブログ運営が可能で、Google Analytics設置、運用の練習にもなる
ちなみに、私の駆け出し期に作成したポートフォリオサイトは以下のようなものです。
2018年ですね。自分のサイトを作るのはとても楽しく、気づいたら一日14時間ぐらいコード打ってました。
ポートフォリオサイトにぜひ入れたい要素
せっかくポートフォリオサイトを用意するのであれば、ポートフォリオや営業文だけでは伝わらない「自分の魅力」をしっかりと伝えたいものです。
以下の要素をポートフォリオサイトに組み込むと良いかなと思います。
- 自分の略歴
- 作品を一覧で見れるセクション
- 作品詳細説明ページ(技術詳細や制作期間など)
- 制作への思い(人間性)
- 制作の流れ
- 仕事をする上で気をつけていること(信頼性の担保)
具体例として、私の知り合いのはにわまん(@haniwa008)師匠のサイトが参考になります。
私も駆け出し期から参考にしていたサイトです。信頼感がかなり醸し出されており、自分だったら制作を頼みたいなと思わせる雰囲気がありますね。
制作物が少ない状態で作って意味あるのか
ここで先にみなさんの疑問に回答しておこうと思います。
ポートフォリオって言っても、何個もあるわけじゃないんですけど、まとめる役割のポートフォリオサイトなんて今の段階でいるのかな？
良い気づきですね。ポートフォリオサイトはとりあえず使えるポートフォリオが最低「3つ」揃ったら準備し始めれば良いかなと思います。
ポートフォリオサイトは成長させ続けられることが最大のメリットなので、実績が貯まるほど、どんどん魅力的なサイトになっていきます。
あとこのあと解説しますが、作る工程そのものが勉強になる側面があります！
ポートフォリオサイトの公開方法は大きく4種類
ポートフォリオサイトの作り方には大きく3種類あります。
- ポートフォリオ公開サービスを活用するー難易度★☆☆☆
手軽にさっとポートフォリオを公開するなら、これ - WordPressテンプレートを活用するー難易度★★☆☆
自分のオリジナルポートフォリオサイトを勉強しつつ手軽に持つなら、これ！ - NoCodeサービスを活用して構築するー★★☆☆
WordPressを学ばなくても、ポートフォリオサイトを構築可能！ - 完全自作で制作するー難易度★★★★
サイト制作を設計・デザイン・コーディング・公開・運用まで全て行いたいなら、これ！
（ちなみに筆者はこれを当時選びました、一週間でめちゃくちゃ成長しました）
それぞれを詳しく解説していきます。
①ポートフォリオ公開サービスを利用する
まずは一番簡単な方法からご紹介します。
とりあえず時間とお金をかけずに、ポートフォリオをシンプルに一覧にして公開できたら問題ないかなぁ。
それならば、このパートで紹介する「ポートフォリオ公開サービス」を活用すれば問題ないです。
ポートフォリオ公開サービス①RESUME
まず最初に紹介するのがRESUMEです。
これを使えば簡単に自分のポートフォリオや略歴を公開することができます。
作品一つ一つに対しても細かく解説を入れられるので、これで十分という人も多いと思います。
いくつか例を提示します。
ポートフォリオ公開サービス②foriio
次に紹介するのはforiioです。
こちらも手軽にポートフォリオを公開することができるサービスになります。
どちらを使えば良いのか
正直私はどちらでも大丈夫だと思います。特に大きさな差があるわけではないので！
ポートフォリオ公開サービスはどんな人におすすめか
とにかくすぐに、ポートフォリオを一覧にしてまとめられればよく、独自性はいらない場合。
②WordPressテンプレートを利用する
次に紹介するのが「テンプレートを用いたポートフォリオサイトの構築」です。
ここでは「WordPressテンプレート」を紹介していきます。
WordPressテンプレートは簡単に言えば、既に基本的なデザインなどが用意されていて、あとはブロックなどを組んですぐにサイトを作れるものです。
WordPressブログは基本的にテンプレートを利用しています。
ちなみに、このブログでは「JIN」を利用しています。
なのでもっと自由度高く、かつ簡単に自分色を出したオリジナルのサイトを作ることができます。
- WordPressのテンプレートを活用したサイト制作の勉強になる
- 自分でサイトを公開するので、サイト公開の勉強になる
WordPressテンプレートはSNOW MONKEYがおすすめ
テンプレートを用いたポートフォリオサイトの制作なら、「SNOW MONKEY」がおすすめです。
SNOW MONKEYを利用するメリットは以下の通り。
- 実案件でも使えるぐらい高機能であるので、得たスキルはそのまま資産になる
- 自分オリジナルのページが作りやすい（キャッチコピー：”どんな味付けにも染まる、高級お出汁のよう”）
- コーポレートサイト向けのテーマや専用プラグイン、APIなどが豊富
SNOW MONKEYで作れるサイトは多種多様で、例えば以下のようなサイトを作ることができます。
多種多様なサイトが制作できますよ。
SNOW MONKEYを利用したポートフォリオサイト例
具体的なポートフォリオサイトとしては、例えば以下のようなものがありますね。
SNOW MONKEYで案件獲得も可能
SNOW MONKEYは案件でも使うことが可能です。
例えば、私の友人はSHOW MONKEYを利用した制作サービスを展開しています。
つまり、ポートフォリオサイトを作る中で培ったSNOW MONKEYのカスタマイズのスキルは、そのまま案件でも活きるということです。凄い！
“類人猿”でビジネスサイトを爆速構築も可能
SNOW MONKEYには「類人猿」と呼ばれるサードパーティーアドオンがあります。
これを入れることで、更に多様なサイトを制作できるようになります。
この拡張性の広さがSNOW MONKEYの強みですね。そのまま実案件でも使えるスキルですし。
SNOW MONKEYがおすすめな人
- 実案件まで見据えてコスパよくポートフォリオサイトを準備したい
- 案件でも使ってみたい
- WordPressを触って仲良くなりたい、
そんな人におすすめです。
③NoCodeサービスでポートフォリオサイトを制作
次にご紹介する方法は「NoCodeサービスを活用する」手法です。
ここでは具体的に「STUDIO」を取り上げます。
もともとNoCodeでサイトを制作するサービスなのに加え、サーバーはサービス側にあるので、WordPressと違って、自分で用意する必要がない点ですね。
STUIDIOで作られたポートフォリオサイト例
こちらはWebデザイナーの方が「Figmaでデザインして、STUDIOで制作」されたそうです。
めちゃくちゃクオリティが高いです…
STUDIOがおすすめな人
STUDIOはデザインの自由度がかなり高い分、Webデザインなどを自分である程度行える人におすすめです。
逆に、NoCodeツールということで、一般的なWeb制作の案件では使われることがそんなにないので、
コーディングをメインに仕事をしようとする人には、STUDIOでの制作スキルはそこまで役立たないかもしれません。
デイトラWebデザインコース内にSTUDIOコンテンツあり
ちなみにですが、Webデザインコース
内にSTUDIOでサイト制作を学べるコンテンツがあります。
個人的にSTUDIOはコーディングをバリバリ行う人よりか、Webデザインを行う人が制作も行う場合に合うかなと思っているので、
Webデザイン主体の方はSTUDIOは特にいいかなと思います。
④完全自作でポートフォリオサイトを制作する
最後に紹介するのが、最も大変ですが勉強になる「完全自作でポートフォリオサイトを制作する」手法です。
完全自作のポートフォリオ例
いくつかピックアップしてみました。
https://techmi.website/portfolio/
大変だが勉強になる完全自作ポートフォリオ制作
一からポートフォリオサイトを制作するのは大変です。なぜなら「制作のほぼ全ての工程」を経験することになるからです。
工程を一覧にして書き出してみます。
- サイト・コンテンツ設計
- ワイヤー作成・デザイン起こし
- 静的HTMLコーディング
- WordPress化
- 基本的な内部SEO対策
- サーバー・ドメインの契約と紐付け
- ローカル環境→本番環境へのアップロード
- Google Analyticsなどのタグ埋め込み
- 運用
これらを一人で行うので、当然かなりの勉強になります。
納品方法に不安がある人向けでもある
以前に「Web制作案件の納品方法」についての記事を書きました。
Web制作での納品でやはり初学者の方が一番つまずくのが「FTPでサーバーとやりとりするところ」だと思います。
下手するとサイトが消えるので、毎回ヒヤヒヤする部分でもあります…
私は自分のポートフォリオサイト制作を通してFTPとだいぶ仲良くなれたので、これが一番大きな収穫でした。
FileZillaとかで正常にサイトをアップロードできるまで、当時はまる二日かかった記憶がありますね…
今はめちゃくちゃ分かりやすい記事を私が書いたので、初学者の方が羨ましい笑（自我自尊）
個人的には実案件前にこれをこなせてから、かなり自信がつきました！
完全自作ポートフォリオサイトがおすすめな人
時間をかけてでも良いから、自分のオリジナルサイト制作を通して、制作の自信をつけたい人。
結局どの手法が一番良いの？
個人的には「SNOW MONKEY」を利用した「WordPressテンプレートを利用する」方法が一番良いかなと思います。
- 制作に時間がかからない
- デザイン素人でもそれっぽいものが作れて
- 実案件でも利用することができてスキルが資産になり
- サーバー・ドメインにも触れるので、そこのスキルも身につく
- そのままブログも運営可能
このようにメリットが非常に大きいためです。
なので私が駆け出しなら、「SNOW MONKEY」でポートフォリオサイトを制作すると思います。
案件で初見困るポイントとして、最後に地味に「Google Analyticsやサーチコンソールの設置・設定」があったりするのですが、そういう所も練習可能ですからね。
完全自作ポートフォリオサイトは勉強にはなるし楽しいですが、やはり時間はかかりますね。楽しいですが！笑
ポートフォリオサイトの注意点
全員が見てくれるわけではないことは念頭に置く
ポートフォリオサイトは、例えば案件獲得営業をかけた先の人が全員見てくれるわけではありません。
人によっては、「簡潔に作品だけまとまっていれば良い」という人もいます。
ただ、今回ご紹介したように、「ポートフォリオサイト制作を通じて勉強になる」面もあるので、私としては用意してもいいのかなと思います。
作品一覧が一番重要
ポートフォリオサイトで一番重要なのは、「作品が見つけやすいこと」です。
極端に言うと、ファーストビューすぐ近くに一覧があってもいいかなと思います。
この人の作品はどこにあるんだろう…探せない…
という状況は避けるようなデザイン・構成が良いかなと思います。そこだけ注意ですね。
閲覧者が一番気になるのは実績の部分なので…
仕事が途絶えない人はわざわざ用意する必要なし
最近の私もですが、仕事が自動的に来るような人はポートフォリオサイトを持っていないケースが多いです。
持たなくても、普段の仕事で信頼値が溜まっているので、営業をする必要もないからですね。自動的に次の仕事が決まります。
私も初見の人から新規案件を受けることは今やほとんどない状態なので、サイトは閉じてしまいました。
なので、
こういう方は、特に用意する必要もないかもです。
ただポートフォリオサイト制作を通して、Web制作の流れに関してかなり勉強になった記憶があるので、作って良かったと思っています。
ポートフォリオを複数用意する方法
ポートフォリオサイトを公開するには、複数のサイトを同じサーバーに公開することになると思いますが、そのあたりを以下の記事で詳しく解説しています。
まとめ
ここまで「ポートフォリオサイトの作り方」を解説してきました。
「必ず用意すべき！」というものではないですが、あると他のライバルと差をつけられるポイントになる上に、作る過程がとても楽しく勉強になります。
これから案件獲得営業や就職転職を考えられている方は、ぜひ！
Web制作完全独学ロードマップはこちら
私の「Web制作独学ロードマップ」の中にも「ポートフォリオサイト作成パート」をオプションで入れています。
Web制作の案件獲得&営業解説はこちら
Web制作会社への営業方法はこちら
こちらのコンテンツでは、「具体的にどうやってポートフォリオを会社へアピールすれば良いのか」を徹底解説しています！
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
このような堅めのコーポレートサイトも作れるし、