WEBデザイナーの「超」効果的なポートフォリオの作り方！

2021年05月17日／ 2021年1月24日

WEBデザイナーの効果的なポートフォリオの作り方や掲載すべき内容知りたい！

フリーランスWEBデザイナーの「作品や過去の仕事を紹介する」ポートフォリオは、自分の代わりに「営業をしてくれるツール」として欠かせない存在。

今回は「超！効果的なポートフォリオの作り方」をあらゆる角度から解説するので、まだ十分なポートフォリオが完成していない方は、これを期に本気のポートフォリオを作って仕事をゲットしよう！

閲覧者はポートフォリオを通して何を知りたいか？

実はポートフォリオの閲覧者（見せたい人）によってその「見るポイント」は若干変わってくる。

それはあなたの立場が「現役フリーランスWEBデザイナー」「独立を目指すWEBデザイナー」「未経験のWEBデザイナー」などによって変わり、ポートフォリオを見てほしい相手は、大きく分けると次の３種類の閲覧者が存在する。

ポートフォリオの３種類の閲覧者

直クライアントの担当者
広告代理店・制作会社の担当者
採用担当者

自分が必要なターゲットに刺さるポートフォリオづくりにはこれらを意識して作る必要があるのでチェックしていこう。

1. 仕事を発注する側の「直クライアント」の場合

まずはフリーランスWEBデザイナーに仕事を発注する「直クライアント」の担当者が知りたい情報。

「直クライアント」が知りたい情報

依頼したい仕事にマッチするスキルを持っているか？
デザインセンスはどうか？
自社の商品・サービスに、デザインテイストが合うか？
丁寧な仕事をしてくれそうか？
値段はいくらくらいするのか？

直クライアントが知りたいのは、「今から依頼する仕事にピンポイントにマッチする人材か」どうか？という点。直クライアントの仕事をゲットしたい方は、そのクライアントのジャンル（たとえば飲食店なのか美容院なのかなど）を考えて、そのジャンルに刺さる作品を掲載する必要があるという事だ。

逆に言えば、やりたい仕事があるのであれば、当然そのジャンルの作品を多く掲載する事が重要になってくる。

2. 「広告代理店・制作会社の担当者」の場合

次は、直クライアントの下にいる「広告代理店や制作会社」の担当者が知りたい情報。

「代理店・制作会社」が知りたい情報

どんなスキルを持っているか？
デザインセンスはどうか？
継続して依頼できそうな人か？
丁寧な仕事をしてくれそうか？
外注費はいくらくらいか？

代理店や制作会社の担当者が知りたいのは「継続して依頼できるスキルやセンスをもった人材か」どうか？

代理店や制作会社の仕事をゲットしたい方は、ある程度幅広いジャンルのデザインやテイストを多めに準備し、この人ならいろんな仕事に対応してくれそうという印象を与えるのが理想的。

3. 「採用担当者」の場合

最後に未経験のWEBデザイナーで、これからWEB制作会社などに就職をするために、採用担当者に見てもらいたい場合

「採用担当者」が知りたい情報

どんな人物か？
どんなスキルを持っているか？
デザインセンスはどうか？
見やすいポートフォリオかどうか？
おもてなしができているか？
即戦力な（もしくは育てれば使える）人材か？
WEBデザインが好きか？

未経験の方が制作会社や代理店などの採用を目指したい場合は、一番はその会社で即戦力になれそうか？という点。

即戦力がむずかしい場合でも、「どこか光る素質をもっているな」とか「荒削りだけどポートフォリオはしっかり考えて作っているな」とか「この人はまだ実力は無いけど、WEBが好きなんだろうな〜」という印象を与えられるような作品やポートフォリオを作る必要があるという事だ。

フリーランスWEBデザイナーのポートフォリオは「何を掲載」すべきか？

ポートフォリオに何を掲載すべきだろうか？ポートフォリオの役割を考えて、ポートフォリオの閲覧者であるクライアントや代理店・制作会社が必要な情報をまとめてみたので、順番に解説していこう。

ポートフォリオに掲載すべき内容

自分のプロフィール・写真（可能であれば）
自分のスキル・セールスポイント
サービス内容・価格表（あえて無しにするのもアリ）
作品集・過去の仕事（各作品のこだわり・担当箇所）
SNS・問い合わせフォーム

1.自分のプロフィール

まずは当然自分のプロフィールで、自分の人となりを簡潔に書けばいいのだが、昨今のSEOでは「誰が書いたのか？」という情報が重要だったりもするので、丁寧に書いておいた方が良い。

写真を掲載するのはプライバシーの問題もあるので無理にとは言わないが、仕事を依頼する側からすれば、どんな人に依頼するのか顔が見えた方が安心して依頼できるのは間違いない。どこの誰か分からない人より、顔写真が見えるとなぜか安心してしまう心理が人にはあるので、ネットでの顔出しOKな人は、清潔で好印象な写真を掲載しておくことも重要だろう。

2.スキル・セールスポイント

自分に何ができるのか？何が得意かを明確にする必要がある。

例えばシンプルに「WEBデザイン／HTML／CSS／Javasｃipt／PHP／Wordpress」など箇条書きでもいいので、自分が扱えるツールや言語など分かりやすく整理しておこう。

また、単純にできる事だけでなく「最も得意な分野や、情熱を注げ得るポイントやこだわり」なども書いておくと、その熱意や意見に賛同して依頼してくれる人も出てくる。

3.仕事として提供できるサービス内容

「仕事として何を請けるか？」を明確に掲載する事が絶対に必要。逆に、できるけど受けたくないジャンルの仕事も実際あるだろう。

せっかくフリーランスとして仕事をするのであれば、効率の悪い仕事や嫌いな仕事など「請けたく無い仕事」と「請ける仕事」を区別する為にも、自分がどんな仕事を主として請け負っているか？いわゆるメニューのようなものを明確にしておいた方が良い。

「WEBデザイン」だけなのか「HTMLコーディングもやるのか、バックエンドはサーバー周りも対応するのか？」など具体的な守備範囲やサービス内容を具体的に書いておこう。

価格の表示について

価格に関しては、おおよその目安でもいいので入れておくと、依頼する側は安心して依頼できる。

WEB関連の制作については、実際に依頼内容を見てみないと値段はわからない部分が大きいので「○○円〜」などとぼかした表現が無難。

ただし、戦略的にあえて価格を表示しないというのもアリ。価格を表示する事で少し安っぽさが出てしまう場合もあるので表記の仕方は工夫が必要かもしれない。

4.WEBデザイン作品や過去の事例

画質はキレイに、閲覧しやすいユーザーインターフェイスを考える

作品集や過去の事例はポートフォリオのメインディッシュなので、デザインであればキレイな画質のイメージを表示させ、細かいディテールの処理や表現もチェックできるように「実寸大で見れる画像」を用意してあげるのが理想的なので、デザインデータをダウンロードできるようにするのもアリだろう。

※ただしデザイン・写真の盗用を避ける為に、ウォーターマーク（名前の透かし）をつけたり、場合によってはパスワードによるベーシック認証をかけたページにするなど、必要に応じた対策は必要だ。

ちなみにダウンロードさせるには、aタグにリンクをつけた上で「download属性」をつけるだけで実装でき、download="デザイン01.jpg"という形で、ダウンロード後のファイル名を変更できる。

簡単なので一度試してみよう。（サーバーにアップしないとダウンロード形式にはならない点に注意）

<a href="./img/design01.jpg" download="デザイン01.jpg">任意のテキスト</a>

また、サムネイルの並べ方や表示の仕方を工夫したり、気持ちよく閲覧できるように考えたUIデザイン設計をしよう。

各作品の担当箇所やこだわりを記載

WEBサイト制作は複数人で作業する事はめずらしくない。WEBサイトのURLを貼る場合は、自分がこのサイトのどの部分を担当したかを明確にする必要がある。

またその作品の中で特にこだわった部分や苦労した点など、ちょっとした制作ストーリーを書いておくと、見た目だけでは気づかない点や、考えぬかれたこだわりが閲覧者には刺さる！

作品掲載のポイント

画質をキレイに
デザインは実寸で見れる形が理想（ダウンロードを設置もあり）
閲覧しやすいレイアウトや画面遷移を考え抜く
各作品の担当箇所やこだわりを記載

5.SNS・お問い合わせフォーム

最後に利用しているSNSを記載したり、仕事や質問を受け付ける「お問い合わせフォーム」もしっかり設置しよう。

SNSはポートフォリオ以外でのその人の情報をキャッチアップできるメリットがあり、SNSの拡散ボタンなども設置しておくと、拡散してもらえるチャンスもあるので望ましい。

お問い合わせフォームのポイント

お問い合わせフォームはポートフォリオのゴールと言えるとても重要なページであり、「できるかぎり入力情報を少なくする」という鉄則がある。

ユーザーは入力内容が多い面倒なフォームを見ると離脱してしまう。このあたりを理解していないサイトが世になんと多い事か・・。

NGな例としては、無駄に生年月日を入力させたり、フォーム内でアンケートを取ったりするのは最悪。電話番号や住所、フリガナ、性別も最初は不要で、最初の入り口として無くても困らない入力項目は削ぎ落とすのがベスト。

個人情報が騒がれる時代において、できる限る不必要な個人情報を入力したいくないという心理もある

最低限必要な要素は「メールアドレス」「お問い合わせ内容」の２点だけである。最初の入り口の段階では、「名前」でさえ最悪無くてもなんとかなるので、入力欄は必要だが必須項目から外してもいいかもしれない。（名前なんて、後で尋ねれば良い）

WEBデザイナーのポートフォリオの画面構成

上記の掲載内容を踏まえて、メインである「作品ページ」のシンプルな画面構成を考えてみた。

ポートフォリオ自体も「１つの作品」として最高のデザインを

上記のワイヤーフレームは、構成としてはだいたいこんな感じで、スタンダードなポートフォリオができるのだが、あくまでワイヤーフレームなので、デザインやレイアウトはもっと創意工夫して自分らしさや他には無い斬新さがほしい。

ポートフォリオ自体も「１つの作品」として、完成されたデザインにすべきであり、最も重要なデザインの１つと考えて良いだろう。

もちろんポートフォリオ自体も、スマホで閲覧しやすいように、レスポンシブ対応しておくのがベストである。

導線を考えよう

導線とは、ポートフォリオを見てもらう際に「どういう順番でみてほしいか？」を考え、順番に見てもらうにはどういうレイアウトにすべきか「目線やスクロール、クリック」などを考えて配置する事を指す。

今回の場合まず最初に「デザイン」をビジュアルで見せて、かつ「スマホ対応」をしている事をアピールし、それぞれ拡大表示できるようにしておく。

その上で、詳細な情報や、作業担当箇所、工夫したポイントなどを見てもらった上で最後に「仕事依頼・お問い合わせ」ボタンを押してもらうという導線を設計している。

さらに、その作品だけでは判断できないユーザーに向けて、次の作品や一覧へ戻ってもらう為のボタンも最後に配置。

こういった具合に、どういう順番でみてもらうかを考えておくのが導線設計なので、自分のポートフォリオの記載内容にそって、導線を考えてみよう。

ポートフォリオは紙で作るかWEBでつくるか？

ポートフォリオは「紙で作るかWEBでつくるか？」と悩むかもしれないが、結論から言うと最低限WEBで作るのは必須。URLを送るだけで自分の作品を見てもらえるのはWEBの最大の魅力。手軽に修正や新しい作品を追加する事もできるので、WEBで作らない手はない。

もちろん合わせて紙で用意しておけばさらにベターだが、ポートフォリオ内で、作品を「PDFで一式ダウンロード」できるようにしておけば完璧と言える。

PDFの利用イメージとしては、仕事を依頼する方が、その上司に「こんな人に仕事を依頼しようと思うのですがどうでしょうか？」という形で会議にそのPDF資料を持っていってもらうという細かいストーリーを想像している。

使ってもらえる可能性は少ないかもしれないが、こういう細かい「おもてなしの精神」がWEBデザインではとても重要になってくるので、気づいてくれる人は最大限評価してくれるだろう。

ポートフォリオを作る際の注意点

作品点数は多いに越したことないが、古いデザインやイケてないデザインは定期的に削除していった方が良い。いくら数が多くても、ダサいデザインや古臭いデザインはその人の市場価値を下げてしまう。

せっかくアップするなら自分の自信作だけをアップしよう。どうしても過去の古い作品も事例のして残したい場合は、アーカイブ的に残して日付を明確にし、なつかしいですが若い頃にはこんな作品もやってました的に使うのはアリだろう。

しかし作品点数やデザインジャンルが少なすぎるのも問題。最低でも「１０点以上の作品」は掲載しておきたいところだが、「もう少し見たいな」というぐらいの数が、閲覧者の欲求を刺激する意味でもちょうどいいかもしれない。

また、特に代理店や制作会社から依頼をうけた作品の場合は、「デザインを作品として掲載しても良いか？」を事前に確認しておこう。案件によっては掲載NGという会社もあるので、事前の確認が必要。

ポートフォリオを作る際の注意点

古いデザインや、イケてないデザインは定期的に削除
作品数は10点以上で多すぎ無い程度に
事例を掲載してよいか、クライアントに確認する

事例が少ない場合や、未経験のWEBデザイナーの作品はどうしたらいい？

未経験の方は過去の仕事事例も何もないだろう。

そんな場合は架空のサイトやコンセプトデザインを作れば全然問題ない！架空のサイトは実際の仕事に比べてると制約もなく素材も内容も自由なので、かなり作りやすく理想のデザインが作れるのでオススメだ。

未経験のWEBデザイナーだけでなく、個人的には現役のWEBデザイナーでも作品のバリエーションを増やしたり、本当はこんなデザインテイストの作品が作りたいという理想のデザインなどを、架空のサイトやコンセプトデザインとして作成して営業するのは全然アリだと思う。

もちろん実際の仕事事例が一番説得力があるので、事例が増えてきたら徐々に架空サイトを減らしていくといいだろう。

参考になるクリエイター達のポートフォリオ

実際に世にあるポートフォリオの中でも、クリエイター達の特徴的で美しいポートフォリオの事例をいくつか紹介するので、自身のポートフォリオの参考にしてみよう。

参考になるクリエイターのポートフォリオ

ポートフォリオの拡散方法と活用の仕方

ポートフォリオを作ったはいいが「誰にも見てもらえない」では意味がない。

自分の足を使って各店舗や会社に名刺を配るだけの時代は終わった。ポートフォリオを大勢の人に見てもらったり効果的に拡散する方法はいくつかあるので紹介しよう。

ポートフォリオの拡散方法

SEOで集客
SNSのプロフィール欄に掲載
フリーランスエージェントに登録しておく

SEOで集客する現実的な方法

一番簡単に思い浮かぶのがSEOでの集客。現在のSEO集客は一朝一夕にはいかない時代となっており、コツコツ積み上げていくしか方法がない。

現実的な方法はブログを活用したSEO集客が一番無難なところ。ブログ記事はSEO効果が高く、うまくコンテンツを作成すれば、ブログ記事での広告収入も見込めるので、一石二鳥となる。

noteをうまく活用

ただ自分でブログを作りSEOを上げるのは時間がかかって大変という人は、noteというサービスに記事を書いて記事内で自分のポートフォリオのURLをプロフィール的に記載するのが上等手段。noteは鬼のようなドメインパワーがあるので、SEOで上位表示するのはそんなに難しくないので活用しない手はないだろう。

SNSでの集客

ツイッターやインスタやピンタレストをうまく活用すると、集客率は倍増する。すでにSNSでのフォロワーが多い人は、楽に集客できるが、SNSのフォロワーが少ない人どうすればいいのだろうか？

ピンタレストの活用

SNSのフォロワーが少ない方は「ピンタレスト」をうまく使うといいだろう。

ピンタレストとは簡単に言えば「自分用のブックマークツール」であり、自分が素敵だな〜と思うデザインや写真などを簡単に登録して（ピンする）いく事ができ、さらに関連するデザインなどの候補が「似ているピン」として上がってくるので、他人のピンを閲覧して、それに共感した人はさらにそのデザインをピンしていく事で拡散されるというサービス。

それぞれのピンにリンクを付ける事ができるので、そのピンを見た人は、ポートフォリオのURLに飛んできてくれるという事だ。

実際に自分の作品や他のデザインを合わせてピンしておくと、似ているピンで候補に上がった自分の作品を、他の人が閲覧してくれて、さらに拡散される可能性があるので、利用しない手はないだろう。