ポートフォリオサイトの作り方【営業の成果を爆上がりさせる!】

今回は「Web制作をやっている駆け出しコーダーです。。。ポートフォリオサイトがあった方がフリーランスとして営業するときに便利と聞くけど作り方が分からない。ポートフォリオサイトってどんな手順で作って、どんな内容を入れたらいいんですか?」こんな疑問に答えていきたいと思います。

【本記事の内容】

  • ポートフォリオサイトに入れるべき項目
  • ポートフォリオサイトを作る手順

*「そもそもポートフォリオサイトってなんすか?」という方のために解説しますと

ポートフォリオサイトとは自分の作品などを公開するホームページみたいなもののことですね。

スポンサードサーチ

ポートフォリオサイトに入れるべき項目

ポートフォリオサイトに入れるべき項目見出し画像

制作会社などが営業してくるフリーランスに対して見ているものは以下の3つ。

  • 価格感
  • 実績
  • 経歴

ではこの三つについて詳しく解説します。

「価格感」

まず最初に聞かれるのは「価格感」つまりいくらで案件を受けれるのかということです。

これは必ず聞かれるのでポートフォリオに明記しておきましょう。

そして実際にフリーランスの方から話を聞いたり、Web制作会社と何社か話してわかった相場ですが下記の感じです。

  • コーディングのみ(トップページ)→10,000円〜20,000円くらい
  • コーディングのみ(下層ページ/1)→5,000円〜8,000円くらい
  • LPコーディング→20,000円〜30,000円くらい

1年目のフリーランスの場合これくらいが妥当な相場感だと思います。

ちなみにフリーランス1年目の僕の実際の価格表は以下の感じです↓

価格表画像

価格表はあくまでも「自分はこのくらいの値段で仕事しますよ」という目安なので厳密にこの価格でということにこだわらなくて良いかと思います。

特に経験の浅いフリーランスの場合は数をこなして実績やスキルを積むことが大事なので、LPのコーディングで15,000円くらいなら受けるのはアリです。

「実績」

当然ですが、一番大事なのは仕事をこなせるスキルがあるかどうかです。

なので過去の制作物を実績として載せましょう。

実績はグーグルドライブにまとめるのが良いです。

なぜかと言うとどんなものを作れるのかが制作会社側が一目でわかるからです。

グーグルドライブへのまとめ方ですが

出来上がったサイトをGoogleのFull Page Screen Captureを使ってスクショし、グーグルドライブに保存して、共有可能なリンクを取得すればOKです。

ただ、グーグルドライブだとソースコードやアニメーションの有無が見れないので、ソースコードを見れるURLも合わせていくつか用意しておく必要があります。

なのでGithubやレンタルサーバーを使っていくつかサイトを公開しておきましょう。

また、制作にかかった時間も聞かれることがあるのでわかる範囲でメモしておきましょう。

「経歴」

仕事を任せられることになるので、信用されるかどうかもとても重要になってきます。

なので経歴など信頼できる情報を載せましょう。

ポイントは下記の項目を載せることです。

  • 本名
  • 自分が活動している地域
  • 使用言語、デザインツール等
  • 顔写真

※使用言語を載せている人は結構いるんですが、使えるデザインツールを明記していない人が多いです。

デザインツールを使えるかどうかによって、制作会社側がフリーランスに任せてくれる案件がかなり変わってくるのでデザインツール(photoshop,illustratorなど)が使えるかどうかはしっかり明記しましょう。

また、この「経歴」のところに自分に頼む付加価値を明記できるとなお良いです。

では次はポートフォリオサイトを作る手順について解説します。

ポートフォリオサイトの作り方

ポートフォリオサイトの作り方見出し画像

まずは大まかな流れを説明したいと思います。

  1. 上手い人のポートフォリオサイトの分析
  2. 全体の構成を考える
  3. 紙に全体のイメージを描く
  4. コーディング
  5. ドメイン取得、サーバーレンタル
  6. FTPクライアントを使って公開
  7. 公開後、画像圧縮などの微調整

全体の流れはこんな感じです。では細かい内容を見ていきましょう。

上手い人のポートフォリオサイトの分析

とりあえず僕の知る限りでは

iSara3期のしょーごさん しょーごさんのポートフォリオ

同じくiSara3期のカトヒサさん カトヒサさんのポートフォリオ

Nobuさん Nobuさんのポートフォリオ

ハニワマンさん ハニワマンさんのポートフォリオ

あたりは非常に参考になるポートフォリオサイト を作っているので是非とも参考にしてみてください!

全体の構成を考える

先ほどのサイトの分析を踏まえて、自分はどうゆう内容を入れるか、どんな構成にするかを決めていきます。

「経歴」「実績」「価格表」は入れるとしてあとは自分の好みなどで工夫していくのがいいと思います。

ただ注意として、ポートフォリオサイトだからと言って「凝ったデザイン」とか「すごいアニメーション」とかを入れる必要はあんまりないです。

それよりも「この人に仕事を任せたい!と思ってもらえる言葉選び」や、「見やすい構成」、「HTMLのタグを適切に使用できるか」や、「メンテナンス性の高いコードを書けてるか」の方が大事です。

特にハニワマンさんのポートフォリオは非常に参考になります。

紙に全体のイメージを描く

こんな感じに紙に大まかなデザインを書いていきましょう。

紙に書き出したデザイン画像1 紙に書き出したデザイン画像2

コーディング

コーディングはデザインのイメージに沿ってやればOKです。

わからないところなどは調べながら作りましょう。

なおポートフォリオサイトはソースコードまで見られることになるので適当に書かずに綺麗なコードを描くようにしましょう!

具体的には、divばかりではなくsectionとかのタグを利用したりや、CSSを規則的に書くことですね。

ドメイン取得、サーバーレンタル

コーディングを終えたらいよいよドメイン取得とサーバーにアップです。

そのためにはドメインとレンタルサーバーを契約しないといけないのですが、オススメは下記になります。

ドメインはどこで買っても同じなので、一番安いお名前.comで買うのが良いでしょう。

またレンタルサーバーは機能面も考慮する必要があるのですが、サーバーの落ちづらさや使い勝手を考えるとエックスサーバーのx10プランが一番良いかと思います。

だいたい一年で16,000円くらいでサーバーは借りれますし、ドメインは年間500円くらいで取得できます。

なおドメイン名は.comとか.netとか.workとかでいいのでそこまでこだわる必要はないです。

 

公開するのGithubじゃダメなの?

と言われそうですが、ドメイン取得やレンタルサーバーを使ったサイト公開は必ず一度は経験した方が良いです。

なぜかと言うと、実案件ではサーバーを使うことがよくあるので、ここで一度一連の流れを経験しておくと実案件でサーバーを使うときも焦らずスムーズにこなせるようになります。

FTPクライアントを使って公開

FTPクライアントは「FileZilla」がよく使われていて、ググっても情報が多いのでオススメです。

実際僕もFileZillaを使っています。

「は?FTPクライアントって何やねん?」

と思った方もいると思うので説明すると、Atomとかで書いたコードのファイルやフォルダーをレンタルサーバーにアップロードする際に使うものです。

ここらへんは言葉で説明されてもピンとこないと思うので、実際に使いながら理解する方が近道です。

公開後、画像圧縮などの微調整

公開してみると、ブラウザの表示では発見できなかった改善点が見つかるので修正しましょう。

よく改善しなきゃいけなくなるのがサイトの重さです。

サイトが重くなる原因はだいたい画像の容量がめっちゃ大きいからです。

目安として一つの画像が「1MB」超えていたら容量が大きすぎると思った方がいいです。

重さの改善には「画像を変える」or「画像圧縮する」

をしましょう。

 

「画像の圧縮」には「JPEGmini」というツールを使うのがオススメです。

このツールだと画質をほとんど落とさずに画像の容量を減らしてくれます。

逆に他のツールを使うと容量と共に画質も落ちてしまうのでオススメできません。

 

また画像の圧縮にも限界はあるので、目安として一枚の画像が「3MB」を超えていたら他の画像に変えた方が良いと思います。

「3MB」以上あると「JPEGmini」を使っても「1MB」以下に容量を落とせません。

スポンサードサーチ

まとめ

長くなりましたが今回は

  • なぜポートフォリオサイトが必要なのか
  • ポートフォリオサイトに入れるべき項目
  • ポートフォリオサイトの作り方

を解説しました。

ポートフォリオができたらガンガン制作会社に営業をかけていきましょう!

では今回は以上です。

3 件のコメント

  • コメントを残す

    メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

    ABOUTこの記事をかいた人

    慶應の通信課程に通う大学生。現在はフリーランスとしてコーディングなどの仕事を受けながら、受託開発してる会社でインターンしてます。