【Web制作】ポートフォリオ変えるだけで受注数2倍UPの秘密

Web制作のポートフォリオを作りたい人「ポートフォリオって絶対必要?ポートフォリオを作りたいけど、どんなポートフォリオがいいのかわからない。」
こういった疑問に答えます。
本記事でわかること
- ポートフォリオとは【ポートフォリオの重要性】
- ポートフォリオの作り方
- ポートフォリオの作成時の注意点
本記事の信憑性
記事を読んだ方からこんなお声をいただいております。
これからポートフォリオ作る人は見て🙌
記事に書いてあること守って作れば問題ない☺️🤍ちなみに私も、案件振る時ポートフォリオめちゃくちゃ見てます✌️ https://t.co/u5Ws83hOms
— ゆいか🌼生まれつきWebディレクター (@yuika_y06) February 17, 2022
ポートフォリオ作れてない人マジで見てほしい👇!!
自分も今ポートフォリオ修正してるので学びになりまくり😆
紹介される時もポートフォリオ見てお会いしたいと言って頂けること多い👍#Web制作#Webデザイン https://t.co/1fmoX9JZcv— みつる | 紹介案件が止まらない/Web制作営業 (@Mitsuru_Web) February 22, 2022
ちなみにこの記事を書いている人はこんな人です。主にWeb制作、ブログ投稿、SNS発信を行っています。
そろそろ本題に移ります。
ポートフォリオをおさらい

ポートフォリオは様々な意味を持っていますが、Web制作業界ではクリエイターが実績をアピールするための制作品集という意味で使われています。
- どんなスキルをもっているのか
- どんなサイトを作成できるのか
上記の2点を先方にお伝えするためにあります。言葉でこんなスキルをもっていますと伝えても信憑性がありませんよね。
なので自分ができることを目に見える形で表現する必要があります。
自分の場合、ポートフォリオの作成の前と後でにこんな感じで案件獲得数が変化しました。
状態 | 営業数 | 案件獲得数 |
ポートフォリオ作成前 | 50件 | 1件 |
ポートフォリオ作成後 | 50件 | 3件 |
見るからに明らかで、ポートフォリオを作成することで案件獲得の手間がグッと減ります。
今回はそんな案件獲得の肝であるポートフォリオについて、この記事を読み終わった頃にはすぐに行動を起こせる状態になるまで詳しく解説していきます。
ポートフォリオって本当に必要?【結論:未経験者にこそ必要】
ここまで聞いて大半の方はこんな感じに思っているんじゃないでしょうか。
このままじゃ、「ポートフォリオを作らない(ダサいポートフォリオのみを作る)→案件獲得できずにWeb制作を辞めていく」の流れがみえみえです。
折角この記事を読んでくれてる方にはそうなってほしくないので、いいポートフォリオを作るメリットとその作り方を解説していきます。
いいポートフォリオを作るメリット
- 案件の獲得に時間がかからなくなる
- デザインの雰囲気を伝えられる
- 受注金額を大幅に増やせる
それぞれについて解説していきます。
案件の獲得に時間がかからなくなる
そもそも未経験者は実績が無いため、どうしても仕事を依頼する人から敬遠され受注できないことが多くあります。
しかし、ポートフォリオを作成することで自分がどれくらいのレベルのものを作れるのかを発注者に視覚的に訴えることで信用を勝ち取り受注できるようになります。
もちろん、いいポートフォリオほど受注額の高い案件の獲得が容易になります。

「でも、素晴らしいポートフォリオを作るのはかなりの時間がかかるんじゃないの?」
たしかにその通りですが、
デザインの雰囲気を伝えるため
Web制作では人それぞれ好きなデザインや得意なデザインがあります。
発注者とデザインの方向性がミスマッチしていると、どれだけ完成度が高いものを制作しても満足度は低くなってしまいます。
受注金額を大幅に増やせる
ポートフォリオにクオリティの高いサイトがあると、高いお見積もりを出したとしても、これだけのサイトを作れるならこの人にお願いしようという気になります。
ポートフォリオを持っていない人に発注する際は、どれだけのものを制作できるのか分からないためどうしても報酬が低くなってしまいます。
受注が止まらないポートフォリオの作り方
だれだって受注が止まらないポートフォリオを作りたいと思いますよね。
そこで今から受注が止まらなくなるポートフォリオの作り方を解説していきます。
- ポイント①:作成サイトのクオリティについて
- ポイント②:少なくとも2つは用意(LPとHP、できれば使用するツールで1つずつ)
- ポイント③:ポートフォリオの見せ方
それぞれ詳しく解説していきます。
ポイント①:作成サイトのクオリティについて
作成するサイトのクオリティーは一言で言うと「実案件レベル」が望ましいです。実案件レベルが望ましい理由としては
理由②:ポートフォリオのクオリティが担保される
と言ったところです。実案件レベルを噛み砕いて言うと
- ページ数:4ページ以上
- アニメーションや機能:あり
- 文字や画像:本物っぽさ
こんな感じ。詳しく解説していきます。
ページ数:4ページ以上
基本的に、世の中にあるホームページは4ページ以上のものが多いです。なのでポートフォリオとして作るサイトも実際のホームページに近づけて4ページ以上にしましょう。
「4ページって言われても内訳が・・・」と思われると思いますので以下の内訳を参考にしてください。
2ページ目:商品紹介ページ
3ページ目:会社概要ページ
4ページ目:お問い合わせページ
その他:従業員紹介ページ、会社ポリシーページなど
この中から4ページを選んで作成すればバッチリなホームページが出来上がります。
アニメーションや機能:あり
実案件レベルのサイトや見栄えの良いページを作成するときはアニメーションや機能が必要になります。ただ、そこまで難しいものは必要ではありません。
・ボタンを押す際のアニメーション(文字色の変化や影の変化)
・スクロールしていくと要素がフェードイン
・画像ホバー時の効果
・スライドショー
・ポップアップ(modal)の表示
このうち2つさえ満たしていれば十分動きのあるサイトに見え見栄えがかなりよくなります。
次に機能に関してですが、以下のような機能の実装が望ましいです。
お問い合わせ機能は絶対必須というくらい必須な機能です。実際にお問い合わせができる機能を実装しましょう。つまり、返信メールの文面なんかも考える必要ありです。
逆に予約機能や決済機能などは難易度が高すぎるのでおすすめしません。挑戦する分にはいいとは思いますが、早く作り終えたいと言う方にとってはおすすめはしないです。
文字や画像:本物っぽさ
最後に紹介するのが文字や画像についてです。出来るだけ実案件レベルのサイトにするために文字や画像についてもそれっぽくみせるのが肝心です。
「そんなこと言われても写真や画像はどこから探せばいいの?」と思いますよね。そんな人のために、僕がよく使う無料で著作権フリーのサイトであるO-DANのリンクを載せておきます。
文字に関しては自分で考える必要があります。コツとしては巷のHPに書いてあるようなことを盗んできて少しだけアレンジすればいいだけです。
なかなか聞いているだけじゃ、文字や写真をどれだけ本物っぽくすればいいのかわからないと思います。以下のサイトは僕が昔、ポートフォリオサイトとして作ったカフェのサイトです。
今は全てのリンクが切れ、トップページまでしか見れませんが参考程度に見るのはおすすめです。
ポイント②:少なくとも2つは用意
ポートフォリオの数に関してよく「いくつくらい必要ですか?」と聞かれます。その時に決まって「2つ以上」と答えます。
よくよく考えれば当たり前で、1つしかサイトがない状態だとどんなホームページを作る人なのかそこまでわからないですよね。
例えば、「好きな歌手ってどんな人?」っていう質問に対して1人の歌手を答えられてもその人の指向はそこまでわかりませんが、2人答えてもらえればだいたい見えてくる。そんな感じです。
さらに言うと、もし以下のような複数のツールを使える場合は使用するツールごとに1つずつ作成するのが必須です。
・Wix
・ペライチ
・Shopify
・カラーミーショップなど
異なるツールごとに2つずつ作るのはかなりしんどいし、別のツールであってもデザインの指向性はわかるのでツールごとに1つでいいと思います。
ポイント③:ポートフォリオの見せ方
最後にですが、ポートフォリオとしてのサイトを2つ以上作れたらそれをだれでもいつでも見れる形にしましょう。
つまり、作成したサイトをサーバーにアップロードすることが必要になります。
ですので、この機会にどこでもいいのでサーバー会社と契約してサーバーにサイトをアップしましょう。
ときどきサーバー会社との契約(年1万くらい)をケチる人がいますが問題外です。「私は今後1年以内に1万円も稼げません」と言っているようなものです。
僕の場合はXserverというところで契約しているのでXserverの登録のためのリンクを下に記載しておきます。(ちなみにですが、Xserverは国内シェアNO1らしいです)
サーバーにアップロードできるようになっておけば他にもこんなメリットがあります。
- 実際の案件でサーバーの用意を頼まれることがあるのでその時の練習になる
余談ですが、ポートフォリオとして作成したサイトをまとめたサイトなんかも作ればいいという意見がありますが僕の意見では、そこまで重要じゃないかなという感じです。
できるならやっと方がいいとは思いますが、それをすることでどこまでの効果があるかは不明です。
ポートフォリオ作成時の注意点
ポートフォリオを作成する上での注意点3つがこちら。
- 注意点①:スマホ用作成(レスポンシブ対応)は必須
- 注意点②:リンクが通っているかと表示状態の確認
- 注意点③:公開可能かどうか
注意点①:スマホ用作成(レスポンシブ対応)は必須
注意点の1つ目として、絶対に押さえておきたいのがスマホ用サイトの作成(レスポンシブ対応)です。ポートフォリオのサイトといえどスマホ用も作らないといけません。
レスポンシブ対応できますと豪語しているとなおさらですね。
ですので、ポートフォリオのサイトと思って手を抜かずに作成するサイトはレスポンシブ対応にしましょう。
注意点②:リンクが通っているかと表示状態の確認
これも、当然のことですが数ページのサイトを作ったらそれぞれのボタンからちゃんと遷移できるかの確認は必須です。
あとけっこうあるのが表示崩れです。
この画面幅のときは大丈夫だがすこし画面を大きくすると表示が崩れるなどです。Windowの幅を変えながら最終チェック時にちゃんと調べるようにしましょう。
テストはけっこうめんどくさいのでやらない人がいますが、欠点があると実際に作ってもらう時もこういうことがありうるかもとお客様に悪い印象を与えてしまいます。
注意点③:公開可能かどうか
例えば、コーダーの方だと既存のサイトをコーディングしてそれをポートフォリオにしたいと考えている方がいると思います。
その時に気をつけるのはそのサイトは模写の公開をOKとしているかです。基本的には模写の公開はNGだと考えた方がいいかと。
模写の公開にOKを出しているところ(著作権フリー)を探して、そのサイトを模写するのがいいと思います。
僕のものではないんですが、以下のサイトに著作権フリーのものがたくさんありますので見てみるのもいいかなと思います。
まとめ
本記事ではWeb制作のポートフォリオに関する内容をWeb制作駆け出しの方に向けて解説しました。結論、下記が重要ということ。
- ポートフォリオは案件を獲得するために必須
- 実案件レベルのサイトを2つ以上作成する
- 完成したらサーバーにUP
ここまでが必要になります。
この記事に書いてあることができているのに案件が獲得できないのであれば、それは営業文に問題がある可能性が大きいです。以下の記事ではクラウドソーシングでの営業文(提案文)の書き方を0から解説している記事になるので参考にしてみるのがいいかもです。
>>【Web制作100万円受注】クラウドソーシング提案の方法解説【提案文も】の記事はこちら
最後になりますが、以下のLstepでは営業術・チーム化・自動化を発信しております。フォローすると時給が大幅に上がります!