Web系フリーランスは特に欠かせないポートフォリオ。
ポートフォリオの質によって、案件獲得ができるかどうか変わってくると言っても過言ではありません。
しかし、いざポートフォリオを作成する上で、以下のような悩みを持っている方もいるかと思います。
|
確かに、色々な方のポートフォリオを見ていると、多種多様でどのようなものがベストか分からなくなってしまいますよね。
そこで、ポートフォリオの作成方法をゼロからしっかり理解していきましょう。というわけで、 本記事はフリーランス歴8年以上で現役フリーランスのミツキが解説していきます。
以下のように考えている方は、ぜひ参考にしていただければと思います。
|
それでは、一つひとつ見ていきましょう！
フリーランスにとってのポートフォリオとは
まずは、基礎知識としてフリーランスにとってポートフォリオはどのようなものなのかについて見ていきます。
そもそも「ポートフォリオ」とはどういう語源か分かるでしょうか？
ポートフォリオには本来、
- 紙ばさみ
- 折りカバン
- 書類入れ
といった意味があります。要するに「書類を運ぶためのケース」のことで、使われ方はひとつではありません。
フリーランス、特にクリエイターにとってのポートフォリオの意味は、「力量や実績を評価してもらうために作成する資料」のことを指します。
そんなこと知っている…と思う方もいるかもしれません。しかし、意味を理解しておくことは非常に重要です。
なぜなら、ポートフォリオを作っていく上で、方向性に迷った時に戻るべき原点だからです。
例えばAとBで迷った時に、「力量や実績を評価してもらうためにはどうすれば良いか？」という観点から、どちらを選択するか決める基準になります。
前置きは以上として、具体的にどのようにポートフォリオを作成すべきか見ていきましょう。
フリーランスがポートフォリオサイトに載せておくべき内容
ポートフォリオを作成する上で、まずおさえるべきポイントは「どのような内容を載せるべきか？」という点です。
最低限ポートフォリオに載せるべき内容として、以下4つがあります。
|
上記に＋＠で何か情報を載せても良いですが、その場合はクライアント目線で本当に必要かを見極めることが重要です。
それでは、上記4つについて詳しく見ていきましょう。
アピールポイント
ポートフォリオは実績をまとめるのが基本ですが、その前にアピールポイントの掲載が重要です。ただ実績だけの羅列では、ポートフォリオを見た方がどのような強みがあるか分かりません。
そのため、以下のポイントなどを考慮の上で、アピールポイントをわかりやすく記載するとよいでしょう。
|
多少実績が物足りないと感じたとしても、価値観が合いそうであれば仕事を依頼してもらえることもあります。
あなたの熱意をしっかりと伝えるようにしましょう。
今までの実績
次に、今までのあなたの実績です。実績を掲載する際は、以下のポイントをおさえると良いでしょう。
|
前者2つに関しては、ポートフォリオを作成する際のポイントの部分で詳しく解説します。オリジナルのデザインにすることも大事ですが、わかりやすさと両面で考えるようにしましょう。
対応できるサービスや料金
対応できるサービスや料金もポートフォリオに大事な要素です。サービス内容の決め方として、以下の点などを考慮することをオススメします。
|
他の項目もそうですが、なかなか案件の受注に繋がらない場合は、サービス内容や料金も見直した方がよいです。特にSNSで積極的に発信している方や売上をあげている方の戦略を参考にすると、うまくいく場合があります。
プロフィール
ポートフォリオに掲載する内容の最後は、プロフィールです。ひとつ目のアピールポイントであなたの価値観が伝えられれば、プロフィールは簡素なものでも問題ありません。以下のようなものを記載するようにしましょう。
|
また、顔写真があると親近感が湧いて、クライアントも発注がしやすくなります。可能であれば、プロに撮影してもらうとよりベストです。
フリーランスがポートフォリオを作成する際のポイント
掲載内容に続いて、ポートフォリオを作成する際のポイントを見ていきましょう。以下7つのポイントをしっかりおさえて作成すると、より質の高いポートフォリオを作成することが可能です。
|
一つひとつ詳しく見ていきましょう。
ポイント1.あなたのイメージに合うように作成する
イメージ、すなわちブランディングは非常に重要です。ポートフォリオは、あなたの名刺代わりと言っても過言ではありません。
そのため、ポートフォリオで伝わるイメージとあなたのイメージが違うのは良くないです。以下のようなステップで、あなたのことをしっかり伝えるようにしましょう。
|
ポイント2.クライアントの需要に応える
ポートフォリオは「力量や実績を評価してもらうためのもの」とお伝えしました。要するに、クライアントの目線で作ることが重要です。
僕自身も仕事を依頼する側に回る機会がありますが、以下のような点を重視することが多いかと思います。
|
自己満で作るのではなく、クライアントが求めるものは何か？を十二分に考えるようにしましょう。
ポイント3.同業他社としっかり差別化する
Webデザイナーもエンジニアも世の中に膨大な数の方がいます。そのため、同業他社としっかり差別化したポートフォリオを作る必要があります。
つまり、他者のポートフォリオを分析しないことには、ポートフォリオを作ることはできません。質の高いポートフォリオを作りたいなら、他者のポートフォリオを分析するようにしましょう。
その上で、差別化できる点を見極めて、ポートフォリオを作成することが重要です。
ポイント4.メンテナンスをしっかりする
ポートフォリオは作成して終わりではありません。営業ツールとしてポートフォリオを使うのであれば、効果測定をして日々改良していく必要があります。
少なくとも、以下の点は確認するようにしましょう。
|
基本的には、Google AnalyticsやGTMの設定をすれば計測できるものです。上記のような点を分析することで改善すべきところが見えてくるので、案件を獲得するために日々改良していくようにしましょう。
ポイント5.実績は担当範囲まで記載する
ポートフォリオに記載する内容の中で、実績はどこを担当したか記載すると良いと書きました。なぜ担当範囲を記載した方がよいかと言うと、勘違いを起こさないためです。
Webサイト制作を例にするとわかりやすいかと思います。
|
打ち合わせをすれば勘違いが起きることはありません。ですが、お互いの大事な時間をムダにしないためにも、担当範囲は書いておいた方がよいでしょう。
ポイント6.持っているスキルをポートフォリオにも活用する
ポートフォリオを作る方の中には、手を抜いて作ってしまう方がいます。特に無料で使えるポートフォリオ作成ツールで、テンプレートを使って作ってしまう方もいるでしょう。
仕事内容がWeb系以外のエンジニアや動画クリエイターなどであれば、それでも構いません。
しかし、仕事内容の中にWebデザインやWebサイト制作があるのに、手を抜いて作るとその気持ちはクライアントにもバレてしまいます。
当然、手を抜いて名刺代わりであるポートフォリオを作るような方に仕事をお願いしようと思いません。なので、しっかりと自分のスキルを120%フル活用して、ポートフォリオにも反映するようにしましょう。
ポイント7.なるべく具体的な数値を記載する
ポートフォリオへ実績などを掲載する際、抽象的な表現をしてしまう方も多いかと思います。
しかし、なるべく具体的な数値を用いた方がクライアントもイメージしやすくなります。特に実績に関して、以下のような表現ができると非常に強いです。
|
抽象的な表現をしている方が多い分、具体的な数値を書くだけで差別化にもなります。数値を用いて記載できる場合はなるべくアピールするようにしましょう。
フリーランスがポートフォリオを作成する際の注意点
ポートフォリオを作成するポイントに続いて、注意点についても見ていきましょう。ポイントの中で解説した内容を除いて、3つの注意点を解説します。
注意点1.掲載する実績は公開可能かクライアントに確認する
過去の実績をできればすべて公開したいと思うかもしれません。しかし、クライアントによってはポートフォリオへの掲載を許してくれない場合もあります。
そのため、以下をしっかりと確認するようにしましょう。
|
案件が終了してからの確認でもよいですが、できれば案件を始める前に確認した方がよいです。特に、実績が少ない場合は公開可能な案件を優先し、実績を増やすことで次の仕事も取りやすくなります。
ポートフォリオに掲載OKかと思ったら、納品終了後に実はNGだった…という感じだと悲しいので、フリーランス駆け出しの時は特にしっかり確認するようにしましょう。
注意点2.難しい表現を使わないようにする
少しいろいろなことができるようになってくると、難しい言葉や表現を使いがちです。ですが、クライアントによってはその言葉や表現を理解できないことがあります。
Webサイト制作の仕事であれば、基本的に打ち合わせで以下のような方と話すこととなります。
|
広報やWeb担当であれば、多少難しい表現でも理解してもらえます。しかし、社長や取締役の方の中には、難しい表現が通じない場合も多いです。
そのため、クライアントの目線に合わせた表現を使うようにしましょう。
注意点3.フリー素材など使う場合は規約を確認する
ポートフォリオを作る際、フリー素材などを使う場合もあるかと思います。個人だけでなく企業でも言えますが、規約違反をして素材を使っていることがよくあります。
特に違反しがちなのが口コミに使ってしまうケースです。例えば、以下のような感じで素材に映っている方がサービスを使っているように使うのは、規約違反になることが多いです。
素材サイトによって規約は異なりますが、使い方に問題ないか確認した方がよいでしょう。
※規約違反をしてもバレないことはあります。ですが、規約を知っている方が仕事の依頼先を探している場合、規約違反をしている方に仕事を依頼することはありません。
参考にしたいポートフォリオサイト
ここまでで、ポートフォリオを作成するうえでおさえるべきポイントを見てきました。
次にポートフォリオサイトを作成する具体的なステップを紹介していきますが、その前に参考になるポートフォリオを見ておきましょう。
デザイナーのタカヤ・オオタさんのポートフォリオ
デザイナーのタカヤ・オオタさんのポートフォリオサイトです。
シンプルな作りですが、実績がわかりやすくなっています。
田渕将吾さんのポートフォリオ「S5 Studios」
デザイナーやアートディレクションなどで活躍されている田渕将吾さんのポートフォリオサイトです。
きれいなアニメーションが魅了的なサイトです。
ポートフォリオサイトを作成するステップ
ここまで、ポートフォリオを作成する上での基礎知識について解説してきたので、具体的なステップを見ていきます。
6つのステップで見ていきましょう。
ステップ1.ワイヤー（大枠）を決める
まずやるべきことは、大枠であるワイヤー決めです。
ここまで解説した内容を踏まえて、以下を決めましょう。
|
ワイヤーフレーム作成ツールを用いて作るのもよいですが、Excelなどでまとめる程度でもよいでしょう。
慣れないうちは、自分がやりやすいものでやるとよいです。
ステップ2.作成するツールを決める
ワイヤーを決めたら、次にどのようなツールで作成するかを決めます。
HTML/CSSをベースに作成するのもよいですが、便利なツールをいろいろ活用するとよいでしょう。
代表的なツールは以下の通りです。
Webサイト制作を中心に仕事をしている方であれば、WordPress一択です。
逆に、ロゴ/アイコン専門のデザイナーや動画編集・イラストレーターなどの場合は、後者3ついずれかでもよいでしょう。
なぜ、Webサイト制作を中心に仕事している方はWordPressがよいかというと、以下の通りです。
|
もしかしたら、本記事を読んでいる方の中にはWordPressを使ったことがない方もいるかもしれません。
クライアントによっては、WordPressでサイトを作ってほしいと指定されることもあるので、WordPressを使えた方が仕事の幅が広がります。ちなみに、WordPressの使い方については、以下の記事にて詳しく解説していますので、参考にしてみてください。
WordPressとは、サイトを作るときによく使われるツールのひとつです。「使ってみると便利だとは聞いたことがあるけど、なんとなく難しそう」「使いこなすためには、たくさん勉強しなければいけない」…そんなイメージを持っている[…]
ステップ3.サイト上で作成準備をする
作成するツールが決まったら、サイト上で作成準備を進めていきます。
各ツールで手順は異なるので、ここではWordPressをベースに見ていきましょう。WordPressをインストールしたら、次にやるべきはWordPressテーマのインストールです。
選択肢としては、まず以下のいずれかです。
|
オリジナルのデザインにした方がよいですが、WordPressの構造をしっかり理解していない方は前者を選ぶとよいです。
テーマのインストールが完了したら、以下の記事で解説している設定を行いましょう。
新しくブログを始めるために独自ドメインを取得してレンタルサーバーも契約し、WordPressをインストールすれば、いよいよ実際にブログの記事（コンテンツ）を作成して公開となります。もちろんいきなり最初から記事を書き始めても[…]
なお、ポートフォリオを作成する際は、基本的に「5.表示の設定」では固定ページを選択します。
ステップ4.大枠を作成する
作成準備が済んだら、大枠の作成に移ります。ポートフォリオは基本的にトップページが最重要です。
トップページは、ステップ3で選択した固定ページ、もしくはテンプレートファイルを編集します。
テンプレートファイルを編集する場合は、対象ファイルをしっかり見極めなければなりません。
トップページ用のファイルは優先順位があり、基本的に以下の順番で使われます。
|
使用するテーマによって構造は異なりますが、front-page.phpを使うとわかりやすくてよいでしょう。固定ページもしくはfront-page.phpを編集し、大枠の作成をしておきます。
ステップ5.文章や細かい部分の調整を行う
大枠の作成が済んだら、文章や細かい部分の調整を行います。パソコンで見栄えよくするのはもちろんのこと、タブレットやスマホでも見栄えよく調整しましょう。
当然ですが、開発者ツールだけでなく実機で確認することが大事です。なぜなら、開発者ツールと実機で見え方が異なる場合もあるためです。
ステップ6.計測用のタグを入れる
最後に計測用のタグを入れることも忘れないようにしましょう。計測用のタグは、以下2つが必須です。
|
上記に加えて、以下のようなツールを活用すると、改善のために必要なデータが取れます。
|
まとめ
途中でも解説した通り、ポートフォリオは作成して終わりではありません。ポートフォリオに来てくれた方の行動データを見ながら、よりベストな形を追及していくことが重要です。
よりよいポートフォリオにするためにも、細部までこだわって改善していきましょう。
本記事が参考になった方は、ブックマークしておいて定期的に見返してみてくださいね！
編集部より
ミツキさんが運営されているプロテク、SEライフログの2つのブログもぜひご覧ください。
プロテクではSEOやWordPressなどの技術情報を、SEライフログではエンジニアやフリーランスに関する情報を発信されています。
