仕事が取れるポートフォリの作り方:10のポイントと6つの事例



この記事は 2019年3月28日に公開、2020年2月20日に更新しています。


顧客や就職先に自分の価値をアピールすることを目的として、実績やスキルなどをまとめた作品集である「ポートフォリオ」。アートやデザインなどのクリエイティブな分野で活躍するプロには欠かせない仕事道具の一つです。しかしその必要性は理解していても、ポートフォリオの構成や作り方がわからないという悩みは以外と多いのではないでしょうか。


この記事では、ポートフォリオサイトの作り方のポイントを、効率的に仕事を取るための観点から解説しています。記事の最後には6つの事例も掲載していますので、ポートフォリオサイト作りの参考にしてみてください。この記事を読み終わる頃には、効果的なポートフォリオサイトを作成する準備ができているはずです。

目次


  1. ポートフォリオの目的を明確にしよう

  2. ポートフォリオの構成:最低限必要な5ページとは

  3. トップページの作り方

  4. プロフィールページの作り方

  5. 実績集ページの作り方

  6. サービス概要ページの作り方

  7. お問い合わせページの作り方

  8. ファビコンを設定しよう

  9. SNS アカウントと連携しよう

  10. 独自ドメイン名で運営しよう

  11. ポートフォリオサイト作成事例6選


01. ポートフォリオの目的を明確にしよう


まず最初に、作ろうとしているポートフォリオサイトの目的を明確にしましょう。目的によってサイトの構成はもちろん、強調すべきアピールポイント、掲載する作品の選び方や、数、順番が異なるからです。


例えば就職活動時に企業に提示することを目的としたポートフォリオの場合。応募する企業のことや求人内容はもちろん、業界についても事前によく調べましょう。求められている人物像やスキルに応えるように自己紹介文を書いたり実績をアピールすることが、採用確率を上げるためには大切です。また、ポートフォリオサイトも送付する企業ごとにコンテンツを最適化しましょう。応募する企業ごとにサイトを更新したり、場合によっては異なる URL のポートフォリオサイトを作成することも必要です。


一方で、オンライン上で広く集客してフリーランス案件を受注することを目的とするポートフォリオサイトでは、サイト訪問者に「この人への発注を検討したい」と思わせ、コンタクトしてもらうことがゴールです。この場合、サービス紹介ページを充実させたり、コンタクトフォームへのリンクをサイト内の分かりやすい箇所に配置したりなどの工夫も重要です。加えてポートフォリオサイトの SEO 対策も意識する必要があり、サイト内にブログを併設するのも効果的です。多くの検索ワードで上位表示させ、サイト訪問者を増やせるほど、案件の受注につながるからです。


このように「何のために作成するのか」「誰に見て欲しいのか」「見てもらった後にどのようなアクションを取って欲しいのか」をしっかり決めてから作成に取り掛かることで、仕事を獲得できるポートフォリオサイトを作ることができます。



02. ポートフォリオの構成 : 最低限必要な 5 ページとは

ポートフォリオサイト作成の目的を明確にしたら、実際にサイトの構成を考えていきましょう。構成には唯一の正解はありませんが、最低限含めたいページは下記の5つです。ポートフォリオサイトの目的によっては他にも必要なページがあるかもしれません。その場合は、この 5 つに縛られずに、必要に応じてページを加えるようにしましょう。


(1) トップページ

(2) プロフィールページ

(3) 実績ページ

(4) サービス概要

(5) お問い合わせフォーム


下記 03.〜07. ではそれぞれのページの作り方を、役割や盛り込むべき要素、作り込む際のポイントと共に解説していきます。


03. トップページの作り方

ポートフォリオサイトのトップページは、あなたの第一印象を決める大切な要素です。採用担当者や、検索結果画面から流入した潜在顧客がポートフォリオサイト全体に目を通すか否かの判断材料となるので、アイキャッチなデザインにしつつもわかりやすいページとなるように工夫しましょう。


(1)トップページに掲載する作品を選ぼう


ポートフォリオサイトのトップページは、あなたの才能やスキルをアピールするための恰好な場所です。ぜひあなたの代表的な作品や力作を厳選して掲載しましょう。作品を 1 つに限って大きく掲載する王道スタイルから、近年の Web デザイントレンドに習いグリッドレイアウトを使って複数の作品を掲載する方法など、トップページの見せ方は様々です。迷ってしまったらポートフォリオサイトのテンプレートなどを参考に、あなたの好みにしっくりくるレイアウトを見つけましょう。


(2)個人名もしくはビジネス名を明確に記載しよう


作品を魅せることに注力しすぎるあまり、氏名やビジネス名が小さすぎてわかりにくいポートフォリオサイトをよく見かけます。これでは「なんだかすごい」けれど「よくわからない」サイトになってしまいます。ポートフォリオサイトの主役は、あくまで「あなた」です。誰かの作品集ではなく、「あなたの作品集」であることが一瞬でわかるように、個人名もしくは屋号名などのビジネス名は、明確に記載しましょう。


(3)職種や肩書きも明確に記載しよう


個人名やビジネス名は明記しても、職種や肩書きを表記しないのもよくあるミスの一つです。ポートフォリオサイトのトップページは、見た人が「一瞬でわかる」ことが重要です。掲載作品から職種や肩書きを察してもらうことを期待すしているのでは、取れる案件も逃してしまいかねません。例えば「山田花子/インテリアデザイナー」や「山田太郎|クリエイティブディレクター」などのように、名前の後に「 / 」「 | 」を入れたり、名前の後に改行したりすることですっきりとわかりやすく記載することができます。


(4)ナビゲーションメニューはわかりやすく


掲載している作品にフォーカスを当てたいあまりに、サイトのナビゲーションメニューのサイズが小さすぎたり、サイトの隅っこにさりげなく設置しているポートフォリオポートも多いものです。もっと詳細を知りたいと思った閲覧者が、すぐに他のページへ移動しやすいように、ナビゲーションメニューをわかりやすい場所に設置しましょう。ここでナビゲーションがわかりにくいと、サイトから離脱してしまう確率を高めてしまいます。



04. プロフィールページの作り方

プロフィールページ(もしくは「 About 」ページ)では、学歴や活動履歴だけでなく、あなたの仕事におけるモットーや情熱を簡潔にサイト訪問者に伝えましょう。採用担当者や案件の発注者は、デザインスキルや能力だけではなく、人間性や個性も同様に重視していることが多いからです。例えば、あなたが案件の発注側だとしたら、スキルが同等の候補者が 2 名いた場合、人物像がより伝わってくるポートフォリオを持っている候補者に先にコンタクトするでしょう。


プロフィールページに最低限必要な項目は下記の通りです。まずは思いつく限りメモに書き出してみて、その後プライオリティ付けをしながらサイトに載せるべきものを絞っていきましょう。


(1) 名前

(2) 職種・肩書き

(3) 簡単な自己紹介

(4) モットー

(5) スキル

(6) 実績、出展歴・受賞歴、メディア掲載情報など

(8) Facebook ページや Twitter 、LinkedIn などの SNS アカウントへのリンク


プロフィールページのコンテンツはテキストが中心になりますが、ページのビジュアルにも力を入れ、デザインと文字コンテンツの両方で個性を表現することを意識しましょう。プロフィールに載せる画像は、自身の顔写真を含めて 2 〜 3 点を目安に掲載すると良いでしょう。



05. 実績ページの作り方


実積ページ(「もしくは「 Works 」や「ポートフォリオ」)はポートフォリオサイトのメインコンテンツです。実績集を作る上での留意したいポイントは、各作品がどのように生まれたかというプロセスも併せて表現することです。こうすることでデザインスキルのみではなく、企画力や調整力なども伝えることができ、採用率や受注率を高めることができるでしょう。下記の 2 点を参考にし、実績ページを準備しましょう。


(1) 作品の適切な掲載点数

たくさんアピールしたいあまり、これまで手掛けてきた作品やプロジェクトを全て掲載したくなってしまうのが、ポートフォリオ作成時の心理です。しかし、ポートフォリオは量よりも質が重要です。最大でも 10 〜 20 を上限として、厳選した作品のみに絞って掲載しましょう。特に就職活動のためのポートフォリオ作成時には、応募する企業や、仕事内容に関連する実績を選ぶことも重要です。


(2) 各作品には説明文を加えよう

単に作品を羅列して掲載しているポートフォリオサイトをよく見かけますがこれはNGです。説明文がないと、あなたの価値や個性を最大限に伝えることができないからです。具体的には下記の項目を網羅するようにしましょう。ただし情報の盛り込み過ぎは禁物です。各項目につき多くても 2 〜 3 行までとし、簡潔に表現することを心がけましょう。


① プロジェクト名と時期

② 担当した部分と駆使したスキル

③ プロジェクトのコンセプト

④ 試行錯誤した点、それを克服するために工夫した点



06. サービス概要ページの作り方


フリーランス案件を受注することが目的のポートフォリオサイトの場合、サービス概要のページを設けるようにしましょう。受注することができるタスクやプロジェクト内容を明記しておくことで、コンタクトする側の心理的障壁が低くなり、コンタクトを貰える確率がグンと上がるからです。


なお、サービス概要に料金を載せるべきか否かという点は、業界やビジネスの戦略によるので、一つの正しい答えはありません。料金を表示するにもさまざまな方法があり、最低料金のみを表示したり、だいたいの価格帯を表示したりすることで、全く予算に見合わない顧客を見切ることができるなど、サイト上に料金を提示する利点もさまざまです。逆に、各クライアントと相談しながら料金を決めたい場合は、問合せフォームを細かくカスタマイズして、出来るだけ多くのニーズを汲み取る工夫をしましょう。



07. お問い合わせページの作り方


サイトを見て興味を持った人がコンタクトできるように、「問い合わせフォーム」の設置や連絡先の明記は必ず行いましょう。特にフリーランス案件を受注することが目的のポートフォリオサイトの場合、お問い合わせページはとても重要な要素です。コンタクト率を上げるために、お問い合わせフォームへのリンクはサイト内の全てのページにわかりやすく配置するようにしましょう。また、「 3 営業日以内に返信します。」など、返信の目安を記載しておくと親切です。



08. ファビコンを設定しよう


ファビコンは PC のブラウザのタブの部分に小さく表示されるアイコンです。デザインスキルを伝えることが目的のポートフォリオサイトでは、このような小さな部分でも気を抜かないことが大切です。


すでに自分のビジネスのロゴを持っている場合は、ロゴをファビコンとして設定しましょう。まだロゴを持っていなくて、イラストレーターやグラフィックデザイナーなど絵を描くのが本業ではない場合は、ロゴ作成サービスなどを利用して、ファビコンを作ってみましょう。



09. SNS アカウントと連携しよう


ポートフォリオサイトと SNS アカウントは必ず連携するようにしましょう。サイト上には限定した数の作品や実績しか掲載できませんが、SNS アカウントでその他の多くの作品を見てもらうことがでできるからです。あなたへの評価をさらに上げることに繋げれるかもしれません。SNS アカウントへのリンク先は、サイトのヘッダー部分に含めるなどして、全てのページ上に表示することで、クリック率をあげる工夫もしましょう。もちろん SNS のアカウントには、あなたのポートフォリオサイトの URL を載せることを忘れずに。



10. 独自ドメインで運営しよう


ポートフォリオサイトはあなたのキャリアを左右する、とても重要なツールです。必ず独自ドメインを取得して運営しましょう。ドメイン名を選ぶ際には、自身のブランドを表現したり、ビジネスの認知度を向上したりといった利点があるからです。


ポートフォリオサイトの独自ドメインは、覚えてもらいやすいように、また一目見ただけであなたが誰なのかわかるように、戦略的に選びましょう。例えばあなたが Hanako Yamada という名の写真家であれば、氏名だけをドメイン名に入れた「hanakoyamada .com」より、氏名と専門分野をドメイン名に入れた「hanakoyamada-photography.com」としましょう。より詳細なドメイン名の選び方は過去の記事「あなたのホームぺージへ適切なドメイン名の選び方」を参考に、ドメイン名を考えてみましょう。



11. ポートフォリオサイト作成事例6選


ここからは、 Wix を使って作成されたポートフォリオサイトの例を6つ紹介するので上記のポートフォリオの作り方のポイントと照らし合わせてみましょう。お手本となるような要素がたくさん詰まっています。効果的なポートフォリオサイトを作成するための参考として、各サイトを見てみましょう。



(1) むらもと ちひろさん(イラストレーター)


美しい植物やかわいらしい動物、美味しそうな食べ物をモチーフに、柔らかなイラスト作品を手掛けるイラストレーターのむらもと ちひろさん。トップページでは、ゆっくりなスピードのスライドショー機能を使って、複数の作品を1点づつ見せることに成功しています。複数の作品をじっくり見てもらいたい場合に、真似したいテクニックです。



(2) ノナカ正視さん(イラストレーター)



数々のイラストレーションコンテストで受賞歴のあるノナカ正視さん。サイト中のギャラリーでは、作品にマウスオーバーすると作品タイトルが表示されるデザインになっています。また、自己紹介の「About Me」ページと「Contact」ページに挿絵を入れることで、イラストレーターのポートフォリオらしいサイトに仕上がっています。



03. ツチヤヒトミさん(イラストレーター)



ライブペイント活動など音楽にも携わっているイラストレーターのツチヤヒトミさん。作品集である「ILLUSTRATION」のページは、作品によって表示サイズを変え、見せ方に工夫を施しています。また、手書き風の署名ロゴ「ht」を配置することで、オリジナリティと暖かみさを表現し、ブランドイメージを視覚的に認識するための上手な使い方をしています。さらに、「WORKS」に過去の実績を掲載することで、クライアントにとってイメージの湧きやすいサイトとなっています。



04. 大串潤也さん(グラフィックデザイナー)



劇作家、演出家、パフォーマー、​映像作家、そしてグラフィックデザイナーと、多方面で活躍する​​大串 潤也さん。「ABOUT」ページではご自身の写真と共に、活動内容と自己紹介文、仕事に対する姿勢などが簡潔にまとめられていて、大串さんの人間性がよくわかるポートフォリオとなっています。



05. 森 洋史さん(アーティスト)



国内外で多くの個展開催や受賞歴を誇る実力派アーティスト、森洋史さん。トップページでは、作品そのものではなく自身の個展の一角を掲載することで、実力を上手くアピールしています。コンタクトフォームのページには背景に拡大されたイラスト作品を使うことでユニークでインパクトのある仕上がりとなっています。また、こうした遊び心から、森さんというアーティストの人物像がよく伝わってくる点にも注目です。



06. Yasutomo Kato さん(写真家)



数々のフォトコンテストで受賞歴のあるフォトグラファーの Yasutomo Kato さん。ウェルカムページでは、息を呑むような美しい風景写真を、画面全体にスライドショーを用いて表示しています。また、「Gallery」ページで季節やジャンルごとの高画質な画像をスライドショーで見せることで、シンプルなサイト構造だからこそ作品のクオリティを前面に押し出したポートフォリオサイトとなっています。Yaコンタクトフォームのページの背景にも写真を使い、サイトの隅々まで写真家らしさを発揮するデザインとなっています。



いかがでしたでしょうか。Wix ならポートフォリオサイトを簡単に作ることができます。まずは無料で試してみましょう!



東福 千恵

コミュニティ マネジャー



#ポートフォリオ #クリエイター #サイト作成事例

ja03.png