Web制作フリーランスが未経験から案件獲得に必要な営業用ポートフォリオの作り方とコツ

ポートフォリオってどうやって作るの？

どんなポートフォリオが良いのか分からない・・・

150人以上のポートフォリオを添削してきた僕がお答えしましょう！

としさん

Web制作で営業するのに必要なものと言えばポートフォリオですね。

しかし、こんな悩みをお持ちではありませんか？

本当は私がポートフォリオについてガッツリ語りたいところなのですが、ポートフォリオを作ったのは2年半以上も前でとてもじゃありませんが今使えるものではありません。

そこで今回は自らが運営するコミュニティで150人以上のポートフォリオを添削されてきた、トシさん（@ToshiTraveler）にお話を伺いました。

現在も活発に活動をしているコミュニティで多くのポートフォリオを見てきたトシさん。

トシさんは発注することもあるので、発注者目線での意見も非常に参考になると思います！

完全無料のプログラミングスクール『ZeroPlus Gate』

30日間でWeb制作を学べる無料のプログラミングスクールがこちら

• 30日間でWeb制作を学べる
• 完全無料
• 現役エンジニアへの質問無制限
• オンラインの動画学習なので時間場所を問わず勉強可能
• 最大4回の学習サポート面談
• 受付は1日25名までの先着制

無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。

いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。

現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

＼ 完全無料 ／

ZeroPlus Gate公式サイト

先着1日25名まで！

Web制作フリーランスが未経験から案件獲得に必要な営業用ポートフォリオの作り方とコツ

いきなり『ポートフォリオを作りましょう』と言われても、

課題や模写と違って1から作るとなると何から始めていいのか分からない。。。

となると思いますし、

良いポートフォリオってどうやって作るの？

という方が大半だと思います。

もし実績を並べるだけで良ければ、ポートフォリオ作成サービスを利用する方法もあります。

しかし上記の方法で作成するとしても、冒頭で書いたように分からない事が色々あると思います。

そこで今回は以下の項目についてトシさんに解説して頂きます。

それでは1つずつ解説していきますね！

としさん

Web制作営業用のポートフォリオの作り方

ポートフォリオってどうやって作ればいいの？デザインは勉強してないけどデザインからコーディングまで1から作るの？

1から作る必要はないですよ。ポートフォリオ自体よりも制作実績が重要です！

としさん

未経験での制作実績は架空サイトになると思うので、架空サイトは3つほど用意すると良いですね。

5個とか10個ある必要はなく、この次に書くようなスキルの確認が出来れば良いので、ちょっとタイプの違う架空サイトが3種類あれば十分です。

なのでこの次に書くスキルはポートフォリオの事ではなく、ポートフォリオの制作実績に載せる架空サイトの事になります。

ポートフォリオという入れ物に入れる制作実績が最重要となります。

ポートフォリオに必要なスキルについて

制作実績に載せる架空サイトはやっぱりアニメーションゴリゴリでオシャンティな方が良いの？

全然そんなことはないけど、実装出来た方がいい物もあります！

としさん

実案件では大きく分けて3種類のサイトがあります。

他にもショッピングサイトやWordPressの有料テーマを使った制作など色々ありますが、基本はこの3つになるかと思います。

そして上記については下に行くほど難易度が高いので、理想はWordPressのオリジナルテーマ制作をしたデモサイトを作ることになります。

というのも、制作会社からの案件はWordPressのオリジナルテーマ制作が非常に多く、もし出来なくてもコーディングのみで受注も可能ですが、WordPressも出来た方が当然単価は高くなります。

あとは実装したいスキルについては以下になります。

静的コーディングのお問い合わせフォームとWordPressのお問い合わせフォームは別物で、WordPressはプラグインを使って実装する事が多いですが、静的コーディングの場合はWordPressではないので当然プラグインは使えません。

これはGoogleフォームを指定される事もあれば、特に実装方法は指定されない場合もあります。

静的コーディングでのお問い合わせフォームの実装については以下の記事を参照下さい。

アニメーションやJavaScript・jQueryを使った実装については凝っている必要はなく、頻出する実装をすればOKです。

頻出する実装って何？

と思うかも知れませんが、大体以下のような実装になります。

他にも書き出したらキリがないのですが、上記はかなり頻出するので実案件では必ず実装することになると思います。

また、WordPressの『カスタム投稿・カスタムフィールド・お問い合わせフォーム』についても実案件で確実に使います。

このような実案件で実際に実装したコードをまとめた物が以下になります。

コーディングやWordPressでの実装についてはこのブログでもたくさん紹介しているので、とても参考になると思います。

僕のコミュニティでも購入者がたくさんいます！

としさん

ポートフォリオの使い方

ポートフォリオ出来たけどその後はどうすればいいの？

サーバーにアップして、そのURLを色々な場所で紹介しましょう！

としさん

ポートフォリオが出来たらまずはサーバーにアップしましょう。

ポートフォリオはサーバーにアップして、インターネット上で閲覧出来るようになって完成と言えます。

先ほどご紹介したポートフォリオ作成サービスを利用すればポートフォリオ自体はサーバーにアップする必要はありませんが、実績として載せる架空サイトなどはアップする必要があります。

サーバーにアップして公開する方法は以下の記事を参照下さい。

それでは本題であるポートフォリオの使い方ですが、ポートフォリオの目的は『クライアントに安心感を与えて、信頼して頂くこと』です。

そのため、使い方は『スキルや実績を正しく伝えること』となります。

つまりポートフォリオがあることで、学習中も含めて過去に制作した実績をクライアントに確認してもらうことが出来ます。

実際に制作の実例を見れることで『発注して大丈夫なスキル感かどうか』の判断材料にしてもらえます。

言葉だけでなく実際に制作したものを見せてくれる制作者の方が、クライアントとしてもあなたに依頼した場合の制作イメージが湧きやすいです。

ぜひあなたの実力を正しく伝えられるようにしましょう！

としさん

良いポートフォリオと悪いポートフォリオについて

ポートフォリオ出来たけど・・・ダメな所ある？どうやったらもっと良くなるかな？

良いポートフォリオと悪いポートフォリオについて解説しますね！

としさん

とりあえずポートフォリオとして形になったけど・・・

本当にこれで良いんだろうか・・・

と思いますよね？

特に他の人のポートフォリオを見ると『もっとよく出来ないだろうか・・・』とか。

良いポートフォリオの特徴

良いポートフォリオの特徴は、

の4つですね。

見やすくて綺麗

見やすくて綺麗というのは『表示崩れがなく構成も見えにくくない』ということです。

ポートフォリオや制作事例の表示がパソコン、タブレット、スマホ、それぞれ大きさの違う画面でもしっかり表示されることを確認しましょう。

構成の見えやすさに関しては、例えば『画像が小さくて見えにくい…』などがないことです。

ここは表示確認をするかしないかの違いだけなので、気を付けましょう。

実務レベルが伝わる

実務レベルが伝わるというのは、実際の制作物をインターネット上で表示した上でスキル感が伝わるようにする事です。

コーポレートサイトの架空サイトなど複数ページの制作事例が複数あれば、実際のコーディングスキルがどの程度なのか相手にとってもわかりやすいです。

どのレベルの案件なら依頼可能なのかの判断材料にもなります。

人間味が伝わる

人間味が伝わるというのは、スキルだけでなく『案件を依頼した時のコミュニケーションが気持ちよく出来そうか？』の判断材料にもなります。

出来るなら顔写真を載せたり、Web制作の事だけでなくこれまでの仕事経験など、人柄も伝わる内容を盛り込むようにしましょう。

他者評価が伝わると、実際に依頼した時のイメージがより鮮明に湧くのでより良くなります。

ただし未経験では難しいので、実際の仕事をこなした後に載せるようにしましょう。

『早くて助かってます』などコメントを頂くことがあれば、そのことも記載しておくといいですね。

例えばクラウドソーシングであれば、レビューの箇所をスクショで切り取って貼っておくのもおすすめです。

僕が掲載している他者評価事例がこちらです！

としさん

クラウドソーシングのレビュー

良いポートフォリオのまとめですが、これら4つの特徴が揃っているとクライアントとしてもあなたと仕事をする際のイメージが湧きやすいので、依頼するかしないかの判断がしやすいですよね。

ぜひ意識していきましょう。

としさん

悪いポートフォリオの特徴

悪いポートフォリオの特徴はそのまま良いポートフォリオの反対になりますね。

見えづらく綺麗さに欠ける

これは表示崩れや画像が小さい、などです。

コーディングでレスポンシブ対応が出来ないのは致命的なので、自分でもしっかり確認をするようにしましょう。

実務レベルが伝わらない

例えば制作会社に送付するポートフォリオなのにも関わらず制作事例がノーコードのみだったり、難易度の低い制作事例が1〜2つしか載っていない、などです。

CSSやWordPressの実装事例が分かるような制作事例を3つ以上は載せるようにしましょう。

人間味が伝わらない

これは以下のような場合になります。

仕事は人と人のコミュニケーションなので『あなたがどんな人か？』が伝わることは大切です。

自己紹介も兼ねてしっかり記載しましょう！

としさん

他者評価が伝わらない

これはクライアントの立場から感じたあなたの仕事ぶりがどのようなものかが判断できず、発注の判断もしづらいということになります。

案件完了後に評価を頂けたなら、ポートフォリオにはぜひ追記をしておきましょう！

ポートフォリオ・営業文の添削サービス

最後に制作会社向けの営業文・ポートフォリオの添削サービスをご紹介します。

恐らくほとんどの人は、

制作会社の営業ってどうすればいいの？

という状態だと思います。

そういう人にはこちらのサービスがおすすめです（画像クリックでアクセス👇）

私のように営業経験がない人は、どうやって営業をしていいのかさっぱり分からないと思います。

そして、

と意気込む人もいてそれも間違いではありませんが、なるべく希望の制作会社と契約したいですよね？

そのためには営業方法を学び、営業文やポートフォリオの添削を受ければ契約に至る可能性を大幅に上げることが出来ます。

そしてこちらのサービスは売りっぱなしではなく、実際に営業をする会社のリサーチをした上で添削をしてくれます。

営業は無策で挑むと消耗戦になり、次第に営業先がなくなっていくということもあり得るので、このサービスを活用して制作会社営業の打率を上げておくのがおすすめです。

まとめ：自分をしっかりアピールし、相手目線で見やすく依頼したいと思われるポートフォリオを作りましょう！

ポートフォリオは受注側が作成するものですが、見るのは発注側なので発注者目線での意見はとても参考になりますね！

ポートフォリオは派手で凝った必要はなく、自分のことを正確に見やすく相手に伝えられるようにすれば大丈夫です。

これからポートフォリオを作成する方は、この記事を参考にして頂ければと思います！

また、トシさんが運営するコードスルー ( CodeThrough )では、営業を学べてサポートもあります。

一人一人の個性に合わせて、確実に目標達成まで伴走してくれると評判です。

コードスルーの募集はLINE公式からおこなわれています。

毎回、期間限定・選別式ですが、無料の営業コンテンツも提供されているので、LINEの登録だけはしておくことをオススメします。

LINE登録はコチラ

また、としさんのブログはこちらになります。

としブログ | 世界を庭に自由に生きる

この記事が役に立ったと思ったら、シェアボタンからX（旧Twitter）などにシェアすると、いいねされてフォロワーが増えたりすることがあるよ！