【簡単】WEB制作で案件受注できるポートフォリオの作り方【採用心理の裏側】

【簡単】WEB制作で案件受注できるポートフォリオの作り方【採用心理の裏側】

悩む人

WEB制作で案件受注できるポートフォリオの作り方を知りたいです。

WEB制作で案件受注できるポートフォリオの作り方を知りたいです。どうやって、ポートフォリオを作ればいいのかな?採用者に評価されやすいポイントを教えてください。

こんなお悩みを解決します。

✔︎本記事の内容

  • WEB制作で案件受注できるポートフォリオの作り方
  • WEB制作の採用者が見るポートフォリオのポイント3つ
  • WEB制作のポートフォリオに関する「よくあるQ&A」
この記事を書いている僕は、エンジニア歴2年ほど。未経験から案件受注し、リモートで暮らしています。

本記事では、WEB制作で案件受注につながるオリジナルポートフォリオの作り方を解説します。

読み終わると、

本記事を読む前に、セットで下記をどうぞ。

※ ポートフォリオとは?
ポートフォリオとは、スキル証明になる作品集のこと。就職・転職・営業などで、スキルを評価してもらうための必須自己PRツールになります。カンタンにいうと「実績」ですね。

WEB制作で案件受注できるポートフォリオの作り方

WEB制作で案件受注できるポートフォリオの作り方

手順は、下記のとおり。

  • 手順①:WEB制作の基礎スキルを習得する
  • 手順②:オリジナルポートフォリオを作る
  • 手順③:ポートフォリオを持って営業する

手順①:WEB制作の基礎スキルを習得する

WEB制作の基礎スキルは、下記のとおり。

  • HTML/CSS
  • jQuery
  • JavaScript
  • PHP
  • WordPress
  • MySQL
  • Bootstrap

上記の基礎をまずは学びましょう。世の中には便利な学習サイトやツールがゴロゴロ転がっています。しかも無料で使えるものもたくさんありますので、ぜひ有効活用しましょう。使わない手はないですよ。

基礎スキルの学習方法

学習方法は、上記の記事で解説しています。僕は上記を実践し案件受注したので、わりと信頼の担保にもなるかと。学習期間の目安は、3ヶ月を目安としましょう。案件受注は、無理じゃないですよ。

手順②:ポートフォリオを作る

基礎学習を終えたら、すぐに手を動かすべき。なぜなら、あなたの目的は、ポートフォリオから案件受注することだから。

ポートフォリオを作らないのは、履歴書を持たずに就活へ挑むようなモノ。

具体的な作り方の手順は、下記のとおり。

  • ステップ①:参考サイトを探す
  • ステップ②:ワイヤーフレームを考える
  • ステップ③:画像や動画素材を集める
  • ステップ④:サイト構成を考える
  • ステップ⑤:コーディングする
ちょっとズルい思考ですが、世の中のサイトから型をパクリましょう。「車輪の再発明」でして、オリジナリティ100%で勝負すると、失敗します。

参考サイトから型をパクリ、あとはコーディングするだけ。デザインも損なわれず、非常にオススメです。

完成したら、ネットに公開

いうまでもなく、ポートフォリオが完成したら、ネットに公開しましょう。とはいえ、独自ドメインを取得する必要はなく、GitHubにコードをUPすればOK。さらにNetlifyと連携させることで、リンクで一発アクセスできますよ。

手順③:ポートフォリオを持って営業する

ポートフォリオを完成させるだけじゃ意味ない。
就職・転職・営業に向けて、突撃しましょう。

  • 就職:履歴書+PF
  • 転職:履歴書+PF
  • 営業:お問い合わせメールにPF添付

モノづくり分野なら、ポートフォリオがあると説得力が増しますよね?口だけでいうのは誰でもできますけど、その言葉の裏に隠された根拠を採用側は求めています。

逆にいうと、ポートフォリオを持参しないと採用されません。

とはいえ、デザインに凝る必要はない

ポートフォリオ作成によくある意味ないことで、「デザインに凝る」必要は一切ありませんね。というのも、「デザインに凝る」のはあくまで主観的なお話でしかなく、相手の立場で考えていない場合が多いからです。

僕も、無駄にデザインに凝っていました...今では反省しています。

たとえば、下記のシーンを想像できます。

  • あなた:このボタンは、最新のJSを使っています。クリックすると、こんな風にアクロバティックに動作します。カッコいいでしょ?
  • 採用者:確かにカッコいいと思います。しかし、動作が少し重たいですね。それに、チカチカしてなんか見づらいですな…ウッウン…弊社では、そのようなJSの実装は致しかねます…

無意味な自己満はメリットなし。
相手の立場で考えましょう。

WEB制作の採用者が見るポートフォリオのポイント3つ

WEB制作の採用者が見るポートフォリオのポイント3つ

ただ闇雲にポートフォリオを作っても意味はない。
大切なのは、採用者の気持ちも考えることです。

  • ポイント①:サイト構成を理解してるか←仕事を任せられるのか
  • ポイント②:付加価値があるか←長期的にお付き合いできるのか
  • ポイント③:一緒に働きたいか←ここで相手の心をキャッチする

ポイント①:サイト構成を理解してるか

相手は、あなたを信頼してない。
なら、ポートフォリオで証明しましょう。

ここはシンプルなサイト構成を理解してればOK。
たとえば、下記のとおりです。

  • ヘッダー←必須
  • メインコンテンツ←必須
  • フッター←必須
  • サイドバー←PFでは、なくてもOK
  • 下層ページ←PFでは、なくてもOK
当たり前ですね。実務でも上記を扱うので、シンプルなLPやコーポレートサイトを意識して作れば問題ない。なので、ボタンのカッコよさとかは、マジでどうでもいいんです。

そして、オリジナリティを強く出しすぎると「全部メインコンテンツ」みたいな感じになり、それだと相手目線じゃないですよね?ってお話。シンプルかつ「基本に忠実」でOK。

これで、少し信頼の「芽」が生まれました。

ポイント②:付加価値があるか

次に見せるポイントは、付加価値です。

「僕、サイト作れますっ!だから仕事ちょーだい」なんて人は、ゴミのようにいます。だからこそ、付加価値があると即効で案件受注できるのもまた事実。オススメな付加価値は、下記のとおり。

  • WordPressブログ
  • マーケティング
  • SEO

上記をポートフォリオにリンクで盛り込んでおくと、説得力もかなり増しますね。

「えっ君、WordPressでブログ書いてんだ〜。えっどれどれ、ポチッ...ふーん...じゃぁ、SEOやWEBマーケティングも得意そうだね...あっはい。〇〇でして〜」みたいな話の展開にもなれるかと。

さらに、SNSが得意だと、なお素晴らしい。集客の理解やスキルの高さを買われ、案件受注も余裕かと。ポートフォリオに盛り込みつつ、あとは打ち合わせでトークすればOKですね。

信頼の「芽」→「蕾」になりました。

>>【相性抜群】ブログ×WEBデザインでスキル発信しつつ稼ぐ方法

ポイント③:一緒に働きたいか

最後は、相手の感情に訴えましょう。

一概にはいえませんけど
面接などの場では「裏切り」が大切ですよ。

なぜなら、質問に対する答えに「意外性」があると、人は興味を引かれるからです。

もちろん、一定のマナーや礼儀は必要ですよ。
誠実生を見失ってはNGです。

もしも『ひろゆき』が面接官だったら

たとえば、2chの創設者ひろゆきは、一緒に働きたい人を「おもしろい人」だと述べています。

僕の昔話も少しだけ。案件受注後、ジョージア移住でリモートワークOKっスカ?みたいなお話になった記憶があります。そしたら「今の若い人は行動力がスゴいね〜俺には真似できないよ...」と盛り上がりました。その後、契約の流れになりました。

こういった「オモシロさ」も必要かと。

基本的にポートフォリオは似たり寄ったり。
そして、決め手となるのは「人間味」かと。

「おもしろい」やり取りがあると、相手の記憶に残りやすい。というと、一緒に働きたいという気持ちに近づくので、結局は「雑談力」も大切になってきますね。

これで、信頼の「花」が咲きました。
パチパチ…おめでとうー。

WEB制作のポートフォリオに関する『よくあるQ&A』

WEB制作のポートフォリオに関する『よくあるQ&A』

最後に、よくある質問をまとめます。

質問①:紙とデジタル、どっちで作ればいいの?

基本的に、デジタル一択です。

とはいえ「職種によりけり」といった具合でして、デザイナーなら紙のポートフォリオも必要かと。

しかし、本記事では「WEBエンジニア」にフォーカスしてまして、紙のポートフォリオを提出するとなると、舐められますね。というと、案件受注のチャンスを失うので、デジタル一択でOKです。

ポートフォリオに載せるべき項目って何?

決まりはありませんが、LPやコーポレートサイトを意識すればOK。

  • その①:メインビジュアル(メニュー)
  • その②:自己紹介
  • その③:作品
  • その④:スキルレベル(使える言語の習熟度、付加価値)
  • その⑤:連絡先(SNSやメアド)
  • その⑥:お問い合わせフォーム

僕が実際に使っていたPFも載せておきます。
一応、コレでも案件受注できたので参考程度に。

>> Vergine-Portfolio

独自ドメインで、ネットに公開したいのですが…

独自ドメインを取得するなら、やはり「お名前.com」が一択レベルかと。ドメインとセットでレンタルサーバーを申し込むと、なんと、、、ドメイン料がタダになるチャンス。

なお、ドメインだけ取得しても意味ないですよ...

必ず、サーバーとセットで申し込まないと、アクセスできませんので。すでにサーバー契約してる方も、下記よりどうぞ。

>> お名前.com

案件受注は、無理じゃない

基礎学習を終えたら、即効でポートフォリオを作りましょう。ポートフォリオなしで、案件受注や採用なんてあり得ませんので。

さいごに、本記事をまとめます。

ポートフォリオの作成手順

  • 手順①:基礎学習を終わらせる
  • 手順②:ポートフォリオを作成する
  • 手順③:ネットにソースコードを公開する

採用者の見るポイント

  • その①:サイト構造を理解してるか
  • その②:付加価値はあるのか
  • その③:一緒に働きたいのか

付加価値を生む行動リンク

【無料】サルでもできる!?WordPressブログの始め方【たった10分で人生が変わった】 【無料】サルでもできる!?WordPressブログの始め方【たった10分で人生が変わった】