web制作

Web制作で同じような量産型ポートフォリオだらけで見飽きた件について、どうすればよいのか

web制作 ポートフォリオ
本ページにはプロモーションが含まれています。

最新の状況ではオリジナルポートフォリオがかなり求められています!そこの追記をしています。

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

最近駆け出しの方が営業で使われる「ポートフォリオ」について、現場の方からこのような言葉を聞くことがあります。

現場の人

なんか最近営業メールで来るポートフォリオが、似たようなものばっかりで溢れていて、正直「またこれか」ってなるんだよね。

または、自分のポートフォリオに対して、

駆け出しの方
駆け出しの方
うーん、周りのみんなと同じもの作っていて大丈夫なんだろうか、最近いろんな話を聞くし、独自のものを作ったほうがいいのかな?
駆け出しの方
駆け出しの方
そもそもポートフォリオって、何が求められてるんだろう…

と心配に思っている方もいるでしょう。

実際、ポートフォリオ次第では、きちんと見直しを行わないと、この先何十件営業をかけても返信が一件も返ってこないという可能性はかなりあります。

これはなんとしても避けたいですよね。

そこで今回は、これからWeb制作会社などに営業をかける上で「どういったポートフォリオを用意するといいか

これを「営業をかけられる側の視点」で解説していきます。

私は仕事柄よく制作会社の方やフリーランスディレクターの方とお話しますし、私自身も発注するので、かなり有効性があるかなと思います。

この記事を見てもらえれば、

どういったポートフォリオを作成すれば返信率が高まるのかがわかるようになる

ので、さっそく見ていきましょう!

しょーご

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

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

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

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

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

2024年にデザインを完全リニューアルしています!

コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。

しょーごログ-コーディング課題のレビュー
レビューの様子

Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください!

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

この記事の評判

ポートフォリオ問題についてもう少し詳しく解説

まず現状認識として、最近はWeb制作を始める方が多くなっており、またスクールも増えてきたため、

「web制作」などで検索するとヒットするようなWeb制作会社や個人事業主(フリーランスディレクター)に、「定型文+定形ポートフォリオ」が大量に送られてきていている状況があります。

ここで重要なのは「Web制作という検索で乗るような会社や個人に集中している」という点です。

つまり、誰でも見つけやすい場所にみんな同じように営業をかけています。

ちなみに、日本には少なくとも2000社程度は制作会社が存在しますWeb制作会社年鑑に掲載されている分)
なので、新興スタートアップや個人事業主なども含めると、もっと多いことがわかります。駆け出しの方の目に止まらないだけですね。

私の知り合いの制作会社も週に2,3件は営業メールが来ると言っていました。

制作会社の人

正直うんざりしてきている

と言ってました。

駆け出しの方
駆け出しの方
いやそんなこと言ったら、もう諦めろということですか!?
しょーご
しょーご
いや、全然そんなことなくて、逆に「良くない例」が多いということは、少し飛び抜けるだけで「良い方向に目立てる」ということだよ!具体的にどうすればよいのかをここから解説していくね!

駆け出しの方のポートフォリオはどうするべきなのか

大前提

まず大大大前提として、ポートフォリオはURLから見れる形式、つまりネット上にアップロードされている状態である必要があります。

例えばこのしょーごログはhttps://shogo-log.comというURLで閲覧できる状態ですよね?

Webデザイン単体だったらスクショとかでもいいかもですが、コーディングスキルを売りたいのに閲覧できないのは致命的だと思います。

スクショとかだけじゃなく、ちゃんと閲覧できるようにしておきましょう。

この大前提を踏まえた上で、では駆け出しの方のポートフォリオはどうするべきかを述べていきます。

結論はこれから述べる3つを満たしていると、2021年から2022年まで戦えると思います。

①実案件レベルのポートフォリオを最低3つ用意する

これは以前から言っていますが、「現場の人間から見て実務レベルと判断できるポートフォリオ」を3つ用意して、それをメインに戦っていく必要があります。

駆け出しの方
駆け出しの方
いや実務レベルって具体的になんやねん

と言う話だと思うので、どういったものか例をいくつか特徴を出していきます。

①基本は複数ページ

実際のサイトは数十、時には数百ページで構成されています。

Webサイトでページ一枚だけという案件はそこまで多くありません。

なので、複数ページのポートフォリオのほうが実案件での働きがイメージしやすいのです。

弊コーディング課題の中級Exがまさにこんな感じです。

②1ページだが、高難易度のもの

  1. デザインが複雑
  2. CSSアニメーションやJavaScriptの実装が豊富

弊Photoshopからのコーディング課題がまさにこんな感じです。

③WordPressで機能がいくつかついたもの

  1. カスタム投稿
  2. カスタムフィールド
  3. お問合せフォーム

弊コーディング課題の上級編がまさにこんな感じです。

しょーご
しょーご
こう自分の課題が当てはまりすぎてると「自分の課題に誘導するために条件を作ってる」と思われるかもですが、順序が逆で、
しょーご
しょーご
「こういう条件を満たしたポートフォリオなら評価される!」ということで作った課題なので、逆に当てはまらないとおかしいということになります笑
しょーご
しょーご
ちなみに、これら3つを揃えて無双した人からコメントをいただいておりますので、興味がある人は見てみて下さい。

模写コーディング課題

実案件レベル以外のポートフォリオは無駄なのか

みなさん恐らく「実案件レベルに満たないポートフォリオ」もいくつかお持ちだと思います。

しかしそれは全く無駄ではなく、スキル証明として立派に役立ちます。

先程述べた3つを見て「更にスキル感を確認したい、または製作数を見たい」という見込み層にポートフォリオをまとめたポートフォリオサイトを見せることで、活用することができます。

この後解説します。

②ポートフォリオをまとめたサイト(ポートフォリオサイト)に作品をまとめる

まず、なぜポートフォリオをまとめたサイトが必要かと言うと、先程の3つの選ばれしポートフォリオは尖兵としてURLを直接営業文に載せます。

その上で「もっとこの人のポートフォリオを確認したい」という層向けに、ポートフォリオをまとめたページを見せるのです。

営業文にポートフォリオの数だけ大量にURL載せたら大変ですからね笑

よって、

  1. 3つのURL
  2. ポートフォリオをまとめたサイトへのURL

の計4つを営業文に貼ればいいわけです。

ではここから

駆け出しの方
駆け出しの方
その「ポートフォリオをまとめたサイト」はどう用意すればいいの?

という疑問にお答えしていきます。

①サービスを使ってまとめる

ポートフォリオを簡単にまとめられるサービスがあるので、それを使用していきます。

ポートフォリオを簡単にまとめられるサービス

https://www.resume.id/

まずはRESUME。こちらは

  • スキル
  • 経歴
  • ポートフォリオ

を簡単にまとめられるサービスになります。

具体的な活用法として、このサービスを立ち上げられた方のRESUMEがあるので、見てみるとわかりやすいかなと思います。

https://www.resume.id/catnose99

次にSalon.ioを紹介していきます。

これは、「ドラッグアンドドロップだけで作品を公開できる」というサービスになりますが、

活用方法としては実物を見たほうがわかりやすいかもしれません。

https://salon.io/dahlia

このサイトに並んでいるのはスクリーンショットで、そのスクショに公開しているサイトのリンクを貼っている感じです。

ポートフォリオはぶっちゃけ作ったものが見られればいいので、シンプルに画像で一覧で見せられるこのSalon.ioはとてもいいかなと思います。

②サービスを使わずにまとめる

自作でポートフォリオサイトを作ってもいいと思います。

ただその場合はある程度のデザイン性は必要になってきます

私もこれと同意見で、これを踏まえて自分で作るか判断するといいですね。

ポートフォリオサイトの例①

https://haniwaman.com/lp/

我が心の師、はにわ師匠のポートフォリオサイトです。私が駆け出し期の頃から参考にさせていただいています。

確か最初は自作テーマだったと思いますが、今はSnow Monkeyで運用していたかなと思います。

Snow Monkeyも用意されているフックやCSSの知識があればこのようなオリジナリティあふれるページが作れるので、ポートフォリオサイトは既存テーマで作っても全然いいと思いますね。

しょーご
しょーご
個人的には「いい人そう」「安心して任せられそう」な感じがファーストビューでめちゃめちゃ伝わってくるのがすごくいいなと思っています。仕事ってほとんどコミュニケーションなので、信頼できそうな人間性が現れてるのはプラスに働くと思います。

ポートフォリオサイトの例②

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

こちらも私が駆け出し期から参考にしているフリーランスWeb制作者の方のポートフォリオサイトです。

私なんかが言うのもおこがましいですが、信頼感あふれるページだなと思います。

顔出しできる人は顔を出してもいいかもしれないですね。

こちらは自作テーマで構築されているようです。

せっかくポートフォリオサイトを自分で作る場合は、このようにスキルやポートフォリオ以外に、「人間性」「経歴」「制作への思い」など、オリジナリティを出せると親しみが持てていいのではないかなと思います。

駆け出しの方の良い例

https://satoken369.com/

https://techmi.website/portfolio/

https://mari316.com/

③課題ではない、オリジナルのサイトを作成する(一番重要)

重要なのは課題解決かどうか

今回の一番大事な部分で、営業を受ける側が一番欲している部分になります。

これがあると強いのですが、

誰かの課題解決のためにサイトを作ってみる

これをぜひやってほしなと思います。

駆け出しの方
駆け出しの方
あれ、スキル面を担保するために質の良いポートフォリオを準備してきたのに、まだ足りないんですか?

こう思われるかもしれませんが、そのとおり、スキル面はここまで揃えたもので足ります。

Webサイトって、何のために作られるんだっけ?

ここでみなさん、Webサイトが何のために作られる、使われるか思い出していただきたいのですが、それは

お客さんの課題を解決するため

ですよね?

当然実務においても「顧客の利益拡大」を目標に制作がされるわけです。

なので、「Webサイトを通して顧客課題を解決した事例」というのは、現場の人間的にはとても評価が高くなります。

自作でも既存テーマやテンプレートを活用してもどちらでもいいと思います。

また、課題を作らされたのではなく自発的に作ったということで、熱意も伝わりますし、問題意識からサイト制作、そして課題解決までがストーリーになります。

ストーリーは誰にも真似できないし被らない唯一無二のものなので、どんなにWeb制作の駆け出しが増えても十分差別化要素になりえます。

オーケストラのトロンボーンパートのサイト作成→新規部員獲得

私の具合的事例をお話します。

大学時代に所属していた大学オケのトロンボーンパートは当時ちゃんとしたホームページを持っていませんでした。

私自身が高校生のときに、大学入学前に食い入るようにホームページを探し回って中々情報がキャッチできなかった記憶があるので、

同じような「入部意欲派がある見込み層」に今の状態だとちゃんと情報が届けられない

このような問題意識がありました。

そこでWordPressを一通り学んだ後、トロンボーンパートのホームページを作って、ちゃんと新入部員にアピールできるようにしようと思ったのが始まりです。

そこで、Snow Monkeyを使用してわかりやすく情報を届けられるサイトを一日で制作しました。

https://tromboneclub.site/

結果的にここのお問い合わせフォーム経由で新入生から連絡が来て、メールで質問に回答し、その後無事入部に至ったそうなので、作ってよかったと思います。

こういった「問題解決のプロセス」があると、一気に魅力的に映ると思います。

そう言っても最初の案件取るのが難しいんじゃん

そういう方の場合は、既存課題の半オリジナル化がおすすめです。

方法を以下の記事にまとめたので、参考にしてください。

表示確認は必須

ここまで3つの要素についてお話しましたが、実はここからもう一歩必要なことがあります。

それは「サイトに表示崩れがないこと」です。

ポートフォリオはだいたい崩れている

私は駆け出しの方のポートフォリオを一週間に50個ぐらい見るのですが、40個ぐらいは修正箇所があるものになります。

つまりそのまま企業に出していたら危なかったということになります。

最近知り合いのフリーランスディレクターが言っていたのですが、

知り合いのフリーランスディレクター

ファーストビューでだいたい崩れてるから、その時点でそっ閉じしてしまうね

ということでした。

これは特に「大画面」で顕著です。

大画面で崩れるとは

制作者って、画像数の大きいパソコンやモニターを使っているので、サイトを開いた時のpx数が2000pxとかあったりするんですね。

そのときに大画面で表示が崩れるような実装をしていると、最初から崩れて表示されるので「見なくていいや」となるわけです。

しかし、駆け出しの方の使われているパソコンは恐らく1400pxぐらいが最大幅のパソコンが多いと思うので、確認漏れが起きるのではないかなと思っています。

表示確認はどうすればよいのか

ではここからどうやって表示確認をすればいいのか、手段を3つ紹介していきます。

①そもそも表示確認のある教材・課題を行う

例えば私が出している課題のように、デフォルトで表示確認がある教材はいいかなと思います。

この一連の演習課題では、「2回の表示確認」を受けるられるだけでなく、

表示確認申請前にセルフチェック項目も厳しく設けて習慣づけてもらうようにしているので、ご自身の表示確認の目が養われ、

この教材以外を取り組む際でも自分で表示確認できるようになると思います。

②プロに依頼する

現場の人に依頼する方法もあると思います。

しかし現場のエンジニアは時間単価が低くても¥2.000~¥3.000あたりなので、相応のお金は必要になるかと思います。

それをサービスとして行っている方も、MENTAなど探せばいるかもしれません。

MENTA 
MENTA

\独学をプロにサポートしてもらう/

③自分で表示確認をする

なるべく現場の方に見てもらったほうがいいのですが、全てご自身でされるという方は以下の記事が参考になるかなと思います。

セルフチェックの手法を紹介しています。

まとめ

今回の内容まとめ
  1. 実案件レベルのポートフォリオを3つ用意する
  2. ポートフォリオサイトを準備する
  3. オリジナルサイトを制作する

今回の記事を通して、ポートフォリオを準備中の方も、営業をかけて今ひとつ結果が伴わない人も、

一度ご自身のポートフォリオをチェックしていただく指針としてもらえればと思います。

また、半オリジナル化は効果の高い手法なので、ぜひ検討してみてください。

ポートフォリオを活かした営業の仕方、アピール例、営業文実例を掲載しています

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

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

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

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

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

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

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

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

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

コーディング課題
まとめて購入

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

コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください!

しょーごログ-コーディング課題のレビュー
レビューの様子

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

応援して頂ける方へ

ご寄付を頂けると今後の更新の励みになります!

🍺 ビールをプレゼントする

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