Web制作フリーランスとして活動するためのポートフォリオ作成方法を紹介!

Web制作フリーランスとして活動するためのポートフォリオ作成方法を紹介
目次

なぜこの記事を執筆しようと思ったのか

こんにちは。デジタルラボのらいちです。

ある程度プログラミング勉強が完了し、これからWebフリーランスとしての活動へ向けてポートフォリオを用意しようとはいうものの、作成方法がわからない方もいるでしょう。

私自身も当時、作成の手順や掲載すべき内容がわからずそもそもポートフォリオに必要性はないと考えており、ほとんど時間をかけずに作成しました。

その結果、私の人物像やスキルがクライアントに伝わらず信用も得られなかったため、案件を獲得できませんでした。

こうした状況をこれからWebフリーランスを目指す方に経験してもらいたくないため、本記事にてポートフォリオの必要性や作成方法をお伝えします。

Web制作フリーランスにおけるポートフォリオの必要性

Web制作フリーランスにおけるポートフォリオの必要性

Webフリーランスとして活動するにあたって、5つの理由からポートフォリオを作成する必要があります。

必要な理由
  • スキルと実績の提示のため
    自身に何ができるのか、どんな成果を上げてきたのかを伝える必要がある。
  • 信頼性の獲得
    本当にスキルや実績を持っているかを形で伝え、信頼してもらう必要がある。
  • 取り扱いサービスの提示のため
    どんなサービスを取り扱っているのかを伝えなければならない
  • 競合との差別化のため
    スキルや実績、ポートフォリオの質で競合と差をつける必要がある。
  • オンライン対応可能化のため
    遠くの方やネット上から頼みたいというニーズに対応する必要がある。

また、簡素なポートフォリオだとかえってクライアントに信頼されないため、クオリティを重視して作成しましょう。

らいち

下手なポートフォリオだと、スキルや実績も証明できず、案件獲得には至らないためです。

Web制作フリーランス用ポートフォリオの作成方法

Webフリーランスの活動に使えるポートフォリオの作成方法は6手順あります。

らいち

作成だけでなく公開作業もあるため、それぞれの手順について詳しく説明していきます。

手順1:ポートフォリオの方向性を決める

ポートフォリオの方向性

いきなりポートフォリオを作り始めるのではなく、まずは以下の3項目から方向性を決めていきましょう。

  • 目的
    営業ツールとして使うのか、スキル証明書として使うのか等
  • ターゲット
    個人か企業か、どんな業界の方へ向けるか
  • 印象
    Webフリーランスとしてどうブランディングしていくか

方向性を決めないと内容がブレてしまったり競合との差別化ができず案件の獲得が難しくなってしまうためです。

らいち

また、ターゲットとするクライアントに適切にスキルや実績を伝えられないという問題も発生することになります。

手順2:ポートフォリオの構成を決める

ポートフォリオの構成

手順1で決めた方向性をもとに、ポートフォリオの構成(掲載内容)を決めていきます。

構成を決めておかないと、掲載すべき内容の抜け落ちやブレが発生してしまい、クライアントに伝えたい内容や実力が伝わりません

構成がポートフォリオの効果を左右するといっても過言ではないため、時間をかけてでも決めていきましょう。

らいち

本記事では、掲載すべき内容がわからない人向けに説明もしております。詳しくはこちら

手順3:ポートフォリオのデザインを作成する

ポートフォリオのデザイン

手順2で決めた構成をもとに、ポートフォリオのデザインを作成していきます。

デザインを勉強している方であれば自身で作成できますが、そうでない場合は「ポートフォリオ 作品例」で検索し、参考サイトを探しましょう。

らいち

私もデザイン自体はできなかったので、ネット上の作品例を参考にしました。

また、ポートフォリオのデザインはFigmaAdobeXDでの作成がおすすめです。実案件でもよく使うツールであるからです。

手順4:デザインにしたがってコーディングを行う

デザインにしたがってコーディング

手順4で作成したデザインに従って、HTMLやCSS、JavaScript、PHPなどの言語を駆使してコーディングを行っていきます。

自身のサイトだからと手を抜かずに、デザイン通りのコーディングやレスポンシブ対応はもちろん、きれいなコードでの作成を心掛けましょう。

らいち

クライアントが企業の場合、内部のコードを見て依頼する判断する場合もあるためです。

また、クオリティはもちろん、効率や自身の考えを落とし込んでコーディングすることで、ポートフォリオサイト自体を制作物にできます。

手順5:サーバー契約やドメイン取得を行う

サーバー契約やドメイン取得

コーディングができたらポートフォリオをネット上に公開するために、サーバー契約やドメイン取得を行います。

基本的にレンタルサーバーを契約することになり、サーバー契約をした会社と同じ会社にてドメインも取得するのが普通です。

らいち

XserverConohaロリポップあたりがおすすめです。

お金はかかりますが、実案件でサーバー契約やドメイン取得は当たり前の業務になるため、ここでぜひ行っておきましょう。

手順6:ポートフォリオを公開する

ポートフォリオを公開

サーバー契約やドメイン取得が完了したら、コーディングデータをアップロードしていきます。

ただアップロードをしたら終わりではなく、デザイン崩れの有無レスポンシブ対応自身のデバイスから問題なく閲覧できるかを確認しましょう。

らいち

アップロード後にデザインが崩れてしまうということはよくある話なので、確認は必須です。

問題なくポートフォリオが公開され、ネット上の誰もが閲覧できる状態になっていれば、ポートフォリオの作成は完了となります。

Web制作フリーランス用ポートフォリオに掲載すべき要素

Webフリーランスとして活動するためのポートフォリオには、下記5要素を掲載する必要があります。

らいち

それぞれについてなぜ必要なのか、どう掲載すべきなのかをしっかり紹介していきます。

プロフィール

プロフィール

クライアントに自身の人物像や経験を伝えられる上、そこから信頼や共感によって案件獲得へ繋がるため、プロフィールは必須となります。

プロフィールに最低限掲載すべき内容については、以下の5項目になります。

  • 基本情報(名前・出身・性別など)
  • 肩書
  • 顔写真(似顔絵でも可)
  • 経歴(職歴・参画したプロジェクト等)
  • 連絡先

これらの要素はクライアントの信頼獲得に必須のため、どれか1つでも欠けていると案件の獲得は難しいでしょう。

らいち

また、多少盛るのは構いませんが、嘘を書くのはやめましょう。簡単に見抜かれてしまいます。

持っているスキル

持っているスキル

クライアント側は自身がどんなスキルがあるのか、何が得意なのかを知りたいため、持っているスキルの掲載は必要になります。

ポートフォリオが企業向けであれば技術的で具体的な文章で、エンドクライアント向けであれば一般の方でもイメージできる文章で掲載しましょう。

また、よくある★やグラフだけ載せるのはやめましょう。クライアント側からすれば、かなりわかりにくい表現になるためです。。

らいち

★4と★5の違いや微妙なグラフの違いだけでは、何がどう変わるのかが伝わりません

実績・制作物

実績・制作物

持っているスキルをより具体的に、かつ形で証明するため、これまでの実績や成果物を掲載するのは必須になります。

ただ単に掲載するのではなく、使用したスキル手法どんな考えのもとで作成したのかまでも掲載することで、より実力を伝えられます。

また、実案件での実績がない場合は架空のサイトでも良いので、何かしら制作物を複数掲載しましょう。

らいち

何も掲載されていないと、本当にスキルを持っているのかを怪しまれてしまいます。当時は私自身も怪しまれてしまいました。

サービス内容・料金プラン

サービス内容・料金プラン

クライアントは依頼する立場として、取り扱っているサービスや価格は最も気になるため、必ずサービス内容や料金プランは用意しましょう。

サービス内容や料金プランは飲食店でいうメニュー表であり、これがないと何ができるのか、どれだけコストがかかるのかが把握できず、依頼できないためです。

サービス名や価格を載せるのはもちろん、サービスの具体的な内容や製作期間の目安もしっかり掲載しましょう。

らいち

クライアントがサービスに対して、具体的なイメージを持てるよう掲載するのが重要です。

お問い合わせフォーム

お問い合わせフォーム

ポートフォリオを見て依頼したいと思ったクライアントがすぐに依頼できるよう、お問い合わせフォームは設置しておく必要があります。

クライアントから最低限の情報を引き出すためにも、下記5項目を入力できるようにしましょう。

  • 氏名(会社名)
  • フリガナ
  • メールアドレス
  • 件名
  • お問い合わせ内容
らいち

ヒアリングシートをダウンロードし、お問い合わせ時に送付できるようにするのもおすすめです。

お問い合わせフォームは、直接メールさせるよりも心理的負担が少ないため、比較的依頼されやすくなる効果もあります。ぜひ設置しましょう。

Web制作フリーランス用ポートフォリオ作成にあたっての注意点

Webフリーランスとしての活動に使えるポートフォリオには、下記3つの注意点があります。

らいち

どれも知っておかなければならないため、しっかりお伝えいたします。

定期的にポートフォリオを更新する

定期的にポートフォリオを更新

ポートフォリオは作成して終わりではなく、以下3つの理由から更新し続けなければならない点に注意しましょう。

  • 常に最新のスキルを提示
  • 実績の追加による信頼性向上
  • ブランディングの強化

単に一部を変更するのではなく、Webフリーランスとしての経歴や実績、サイトの構成、デザインをしっかり更新していくことが重要です。

らいち

内容が古いままだと実力を正当に評価してもらえず、活動しているのかすら怪しまれてしまいます。

ポートフォリオの画像や素材が商用利用可能かを確認する

ポートフォリオの画像や素材が商用利用可能かを確認

ポートフォリオに掲載予定の画像やパーツがネット上から取得したものの場合、商用利用できるものかを確認するのを忘れないよう注意しましょう。

もし商用利用できないのにもかかわらず掲載した場合、持ち主とのトラブルに発展したり、最悪損害賠償を請求される可能性もあります。

らいち

違反によりサイトを閉鎖され、ルールを守っていた方にも迷惑がかかるため、絶対に確認する必要があります。

実績は公開して良いものか確認する

実績は公開して良いものか確認

実案件での制作物を公開する場合、下記の3つ理由からクライアントに確認をとる必要があります。

  • クライアントの機密情報保護
  • 信頼関係の維持
  • 著作権や知的財産権の遵守

本当は公開不可なのに公開した場合には、著作権や知的財産権の侵害、クライアントとのトラブルなどに発展するため、確認は必ずとってください。

らいち

特に、クライアントが企業だった場合、多額の賠償金を請求され、路頭に迷う可能性もあります。

まとめ:Web制作フリーランスとして活動するためのポートフォリオ作成方法を紹介!

ここまでで、Webフリーランスとして活動する上でのポートフォリオの必要性や作成方法をお伝えしました。

手順
ポートフォリオの方向性を決める

3項目に従ってポートフォリオの方向性の決定をする

手順
ポートフォリオの構成を決める

方向性からポートフォリオの構成(掲載内容)を決定する

手順
ポートフォリオのデザインを作成する

決めた構成をもとにポートフォリオのデザインを作成する

手順
デザインにしたがってコーディングを行う

作成したデザインをもとに、言語を駆使してコーディングする

手順
サーバー契約やドメイン取得を行う

ポートフォリオを公開するために、サーバー契約やドメイン取得を行う

手順
ポートフォリオを公開する

ポートフォリオをネット上に公開する

本記事を読んだことで、ポートフォリオの必要性や作成方法を十分に把握できていることでしょう。

あとはこの記事で得た内容をもとにポートフォリオを作成していくのみです。

らいち

ポートフォリオが作成できれば、いよいよWebフリーランスとして案件獲得のために行動できるため、ぜひ作成していきましょう。

まだイメージがわかない、スキルや実績が足りないと感じている方は、無料カウンセリングも行っているため、ぜひお問い合わせください!

Web制作フリーランスとして活動するためのポートフォリオ作成方法を紹介

この記事が気に入ったら
フォローしてね!

役に立つと思ったらXでシェアしてね!
  • URLをコピーしました!

サイト運営者

現役WEB制作フリーランスの24歳で、制作会社から独立しフリーランス歴3年目です。
数多くの案件実績を元に、WEB制作フリーランスを目指す方が今それを知りたかったという情報を「デジタルラボ」で発信しています。

目次