悩む人
WEB制作で案件受注できるポートフォリオの作り方を知りたいです。
WEB制作で案件受注できるポートフォリオの作り方を知りたいです。どうやって、ポートフォリオを作ればいいのかな?採用者に評価されやすいポイントを教えてください。
こんなお悩みを解決します。
✔︎本記事の内容
- WEB制作で案件受注できるポートフォリオの作り方
- WEB制作の採用者が見るポートフォリオのポイント3つ
- WEB制作のポートフォリオに関する「よくあるQ&A」
この記事を書いている僕は、エンジニア歴2年ほど。未経験から案件受注し、リモートで暮らしています。
本記事では、WEB制作で案件受注につながるオリジナルポートフォリオの作り方を解説します。
読み終わると、
本記事を読む前に、セットで下記をどうぞ。
※ ポートフォリオとは?
ポートフォリオとは、スキル証明になる作品集のこと。就職・転職・営業などで、スキルを評価してもらうための必須自己PRツールになります。カンタンにいうと「実績」ですね。
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つ
ただ闇雲にポートフォリオを作っても意味はない。
大切なのは、採用者の気持ちも考えることです。
- ポイント①：サイト構成を理解してるか←仕事を任せられるのか
- ポイント②：付加価値があるか←長期的にお付き合いできるのか
- ポイント③：一緒に働きたいか←ここで相手の心をキャッチする
ポイント①：サイト構成を理解してるか
相手は、あなたを信頼してない。
なら、ポートフォリオで証明しましょう。
ここはシンプルなサイト構成を理解してればOK。
たとえば、下記のとおりです。
- ヘッダー←必須
- メインコンテンツ←必須
- フッター←必須
- サイドバー←PFでは、なくてもOK
- 下層ページ←PFでは、なくてもOK
当たり前ですね。実務でも上記を扱うので、シンプルなLPやコーポレートサイトを意識して作れば問題ない。なので、ボタンのカッコよさとかは、マジでどうでもいいんです。
そして、オリジナリティを強く出しすぎると「全部メインコンテンツ」みたいな感じになり、それだと相手目線じゃないですよね?ってお話。シンプルかつ「基本に忠実」でOK。
これで、少し信頼の「芽」が生まれました。
ポイント②：付加価値があるか
次に見せるポイントは、付加価値です。
「僕、サイト作れますっ!だから仕事ちょーだい」なんて人は、ゴミのようにいます。だからこそ、付加価値があると即効で案件受注できるのもまた事実。オススメな付加価値は、下記のとおり。
- WordPressブログ
- マーケティング
- SEO
上記をポートフォリオにリンクで盛り込んでおくと、説得力もかなり増しますね。
「えっ君、WordPressでブログ書いてんだ〜。えっどれどれ、ポチッ...ふーん...じゃぁ、SEOやWEBマーケティングも得意そうだね...あっはい。〇〇でして〜」みたいな話の展開にもなれるかと。
さらに、SNSが得意だと、なお素晴らしい。集客の理解やスキルの高さを買われ、案件受注も余裕かと。ポートフォリオに盛り込みつつ、あとは打ち合わせでトークすればOKですね。
信頼の「芽」→「蕾」になりました。
>>【相性抜群】ブログ×WEBデザインでスキル発信しつつ稼ぐ方法
ポイント③：一緒に働きたいか
最後は、相手の感情に訴えましょう。
一概にはいえませんけど
面接などの場では「裏切り」が大切ですよ。
なぜなら、質問に対する答えに「意外性」があると、人は興味を引かれるからです。
もちろん、一定のマナーや礼儀は必要ですよ。
誠実生を見失ってはNGです。
もしも『ひろゆき』が面接官だったら
たとえば、2chの創設者ひろゆきは、一緒に働きたい人を「おもしろい人」だと述べています。
僕の昔話も少しだけ。案件受注後、ジョージア移住でリモートワークOKっスカ?みたいなお話になった記憶があります。そしたら「今の若い人は行動力がスゴいね〜俺には真似できないよ...」と盛り上がりました。その後、契約の流れになりました。
こういった「オモシロさ」も必要かと。
基本的にポートフォリオは似たり寄ったり。
そして、決め手となるのは「人間味」かと。
「おもしろい」やり取りがあると、相手の記憶に残りやすい。というと、一緒に働きたいという気持ちに近づくので、結局は「雑談力」も大切になってきますね。
これで、信頼の「花」が咲きました。
ﾊﾟﾁﾊﾟﾁ…おめでとうー。
WEB制作のポートフォリオに関する『よくあるQ&A』
最後に、よくある質問をまとめます。
質問①：紙とデジタル、どっちで作ればいいの?
基本的に、デジタル一択です。
とはいえ「職種によりけり」といった具合でして、デザイナーなら紙のポートフォリオも必要かと。
しかし、本記事では「WEBエンジニア」にフォーカスしてまして、紙のポートフォリオを提出するとなると、舐められますね。というと、案件受注のチャンスを失うので、デジタル一択でOKです。
ポートフォリオに載せるべき項目って何?
決まりはありませんが、LPやコーポレートサイトを意識すればOK。
- その①：メインビジュアル（メニュー）
- その②：自己紹介
- その③：作品
- その④：スキルレベル（使える言語の習熟度、付加価値）
- その⑤：連絡先（SNSやメアド）
- その⑥：お問い合わせフォーム
僕が実際に使っていたPFも載せておきます。
一応、コレでも案件受注できたので参考程度に。
独自ドメインで、ネットに公開したいのですが…
独自ドメインを取得するなら、やはり「お名前.com」が一択レベルかと。ドメインとセットでレンタルサーバーを申し込むと、なんと、、、ドメイン料がタダになるチャンス。
なお、ドメインだけ取得しても意味ないですよ...
必ず、サーバーとセットで申し込まないと、アクセスできませんので。すでにサーバー契約してる方も、下記よりどうぞ。
>> お名前.com
案件受注は、無理じゃない
基礎学習を終えたら、即効でポートフォリオを作りましょう。ポートフォリオなしで、案件受注や採用なんてあり得ませんので。
さいごに、本記事をまとめます。
ポートフォリオの作成手順
- 手順①：基礎学習を終わらせる
- 手順②：ポートフォリオを作成する
- 手順③：ネットにソースコードを公開する
採用者の見るポイント
- その①：サイト構造を理解してるか
- その②：付加価値はあるのか
- その③：一緒に働きたいのか
付加価値を生む行動リンク
【無料】サルでもできる!?WordPressブログの始め方【たった10分で人生が変わった】
