ポートフォリオの作り方｜サイト構成や掲載内容を解説【事例有】
更新日 2024年2月5日（公開日 2019年3月28日）
しかしその必要性は理解していても、「印象的なポートフォリオの作り方がわからない...」という悩みは多いのではないでしょうか。
そこでこの記事では 「Web デザイン未経験でも魅力的なポートフォリオを作る」ためのポイントをくわしく説明します。ホームページの作り方の基本から、魅力的なポートフォリオにするためのコツ、そしておしゃれなポートフォリオ事例まで、全て解説します。
＼今すぐポートフォリオを作成しよう／
目次
ポートフォリオとは？
ポートフォリオ（Portfolio）とは、本来「複数の書類をまとめて運ぶケース」のことを意味します。一般的に耳にするポートフォリオは、クリエイターの実績や強み、能力を一目でアピールするための「作品集」のことを意味します。
ポートフォリオを Web サイトとしてネット上で公開したものをポートフォリオサイトと言います。ポートフォリオサイトを作成すると URL やQR コードをシェアして簡単に自分の作品をアピールできるようになり、さらに検索エンジンや SNS を通じて、作品を知ってもらう機会が増えるといったメリットがあります。
ポートフォリオサイトは、デザイナーやイラストレーターとして顧客や雇用者とのネットワークを構築することを目的に作成します。イラストレーターやデザイナーなどクリエイティブな仕事を専門にする人にとって、企業や顧客に提出する用のポートフォリオを制作することは収入に直結する需要なプロジェクトです。
ポートフォリオサイトの作り方
01. ポートフォリオの目的を明確にする
まず最初に、作ろうとしているポートフォリオサイトの目的を明確にしましょう。目的によってサイトの構成はもちろん、強調すべきアピールポイント、掲載する作品の選び方などが異なります。
例えば就職活動時に企業に提示することを目的としたポートフォリオの場合。応募する企業のことや求人内容はもちろん、業界についても事前によく調べましょう。求められている人物像やスキルに応えるように自己紹介文を書いたり実績をアピールすることが、採用確率を上げるためには大切です。また、ポートフォリオサイトも送付する企業ごとにコンテンツを最適化しましょう。応募する企業ごとにサイトを更新したり、場合によっては異なる URL のポートフォリオサイトを作成することも必要です。
一方で、オンライン上で広く集客してフリーランス案件を受注することを目的とするポートフォリオサイトでは、サイト訪問者に「この人への発注を検討したい」と思わせ、コンタクトしてもらうことがゴールです。この場合、サービス紹介ページを充実させたり、コンタクトフォームへのリンクをサイト内の分かりやすい箇所に配置したりなどの工夫も重要です。加えてポートフォリオサイトの SEO 対策も意識する必要があり、サイト内にブログを併設するのも効果的です。多くの検索ワードで上位表示させ、サイト訪問者を増やせるほど、案件の受注につながるからです。
このように「何のために作成するのか」「誰に見て欲しいのか」「見てもらった後にどのようなアクションを取って欲しいのか」をしっかり決めてから作成に取り掛かることで、仕事を獲得できるポートフォリオサイトを作ることができます。
Wix のオンラインコースなら Wix エディタの使い方から、Web デザイン講座まで専門家から学ぶことができます。ぜひチェックしてみましょう。
02. ポートフォリオサイトの構成 : 最低限必要な 5 項目
ポートフォリオサイト作成の目的を明確にしたら、実際にサイトの構成を考えていきましょう。構成に唯一の正解はありませんが、最低限は下記の５つです。ポートフォリオサイトの目的によっては他にも必要なページがあるかもしれません。その場合は、この ５ つに縛られずに、必要に応じてページを加えるようにしましょう。
Wix のポートフォリオ用テンプレートなら、すでに必要なページが作り込まれています。あなたのイメージに近いものがあれば、そこから自由にカスタマイズすることで、自分だけのユニークなサイトが簡単に作成できます。まずは、豊富なテンプレートをチェックしてみましょう。
さて、いよいよそれぞれのページの作り方を、役割や盛り込むべき要素、作り込む際のポイントと共に解説していきます。
03. トップページの作り方
ポートフォリオサイトのトップページは、あなたの第一印象を決める大切な要素です。そのため「ひと目で必要な情報がわかる」する必要があります。
採用担当者や、潜在顧客があなたのポートフォリオを見た瞬間に、魅力を伝え切れるようアイキャッチなデザインにしつつもわかりやすいページとなるよう心がけましょう。
トップページに掲載する作品を選ぼう
ポートフォリオサイトのトップページは、あなたの才能やスキルをアピールするための恰好な場所です。ぜひあなたの代表的な作品や力作を厳選して掲載しましょう。作品を 1 つに限って大きく掲載する王道スタイルから、近年の Web デザイントレンドに習いグリッドレイアウトを使って複数の作品を掲載する方法など、トップページの見せ方は様々です。迷ってしまったらポートフォリオサイトのテンプレートなどを参考に、あなたの好みにしっくりくるレイアウトを見つけましょう。
個人名もしくはビジネス名を明確に記載しよう
作品を魅せることに注力しすぎるあまり、氏名やビジネス名が小さすぎてわかりにくいポートフォリオサイトをよく見かけます。これでは「なんだかすごい」けれど「よくわからない」サイトになってしまいます。ポートフォリオサイトの主役は、あくまで「あなた」です。誰かの作品集ではなく、「あなたの作品集」であることが一瞬でわかるように、個人名もしくは屋号名などのビジネス名は、明確に記載しましょう。
職種や肩書きも明確に記載しよう
個人名やビジネス名は明記しても、職種や肩書きを表記しないのもよくあるミスの一つです。ポートフォリオサイトのトップページは、見た人が「一瞬でわかる」ことが重要です。掲載作品から職種や肩書きを察してもらうことを期待すしているのでは、取れる案件も逃してしまいかねません。例えば「山田花子/インテリアデザイナー」や「山田太郎｜クリエイティブディレクター」などのように、名前の後に「 / 」「 | 」を入れたり、名前の後に改行したりすることですっきりとわかりやすく記載することができます。
ナビゲーションメニューはわかりやすく
掲載している作品にフォーカスを当てたいあまりに、サイトのナビゲーションメニューのサイズが小さすぎたり、サイトの隅っこにさりげなく設置しているポートフォリオポートも多いものです。もっと詳細を知りたいと思った閲覧者が、すぐに他のページへ移動しやすいように、ナビゲーションメニューをわかりやすい場所に設置しましょう。ここでナビゲーションがわかりにくいと、サイトから離脱してしまう確率を高めてしまいます。
04. プロフィールページ（自己紹介）の作り方
プロフィールページ（もしくは「 About 」ページ）では、学歴や活動履歴だけでなく、あなたの仕事におけるモットーや情熱を簡潔にサイト訪問者に伝えましょう。採用担当者や案件の発注者は、デザインスキルや能力だけではなく、人間性や個性も同様に重視していることが多いからです。例えば、あなたが案件の発注側だとしたら、スキルが同等の候補者が 2 名いた場合、人物像がより伝わってくるポートフォリオを持っている候補者に先にコンタクトするでしょう。
プロフィールページに最低限必要な項目は下記の通りです。まずは思いつく限りメモに書き出してみて、その後、優先すべき要素を考えながら、サイトに載せるべきものを絞っていきましょう。
名前
職種・肩書き
簡単な自己紹介
ミッションステートメントや将来の方向性
得意の制作スタイル
スキル
実績、出展歴・受賞歴、メディア掲載情報など
Facebook、Twitter、Instagram などの SNS へのリンク
プロフィールページのコンテンツはテキストが中心になりますが、ページのビジュアルにも力を入れ、デザインと文字コンテンツの両方で個性を表現することを意識しましょう。プロフィールに載せる画像は、自身の顔写真またはアイコンを含めて 複数掲載すると、より本格的な印象になります。
05. ポートフォリオページ
実積ページ（「もしくは「 Works 」や「ポートフォリオ」）はポートフォリオサイトのメインコンテンツです。実績集を作る上での留意したいポイントは、各作品がどのように生まれたかというプロセスも併せて表現することです。こうすることでデザインスキルのみではなく、企画力や調整力なども伝えることができ、採用率や受注率を高めることができるでしょう。下記の 2 点を参考にし、実績ページを準備しましょう。
作品の適切な掲載点数
たくさんアピールしたいあまり、これまで手掛けてきた作品やプロジェクトを全て掲載したくなってしまうのが、ポートフォリオ作成時の心理です。しかし、ポートフォリオは量よりも質が重要です。
最大でも 10 〜 20 を上限として、厳選した作品のみに絞って掲載しましょう。特に就職活動のためのポートフォリオ作成時には、応募する企業や、仕事内容に関連する実績を選ぶことも重要です。
各作品に説明文を加える
単に作品を羅列して掲載しているポートフォリオサイトをよく見かけますがこれはNGです。説明文がないと、あなたの価値や個性を最大限に伝えることができないからです。具体的には下記の項目を網羅するようにしましょう。ただし情報の盛り込み過ぎは禁物です。各項目につき多くても 2 〜 3 行までとし、簡潔に表現することを心がけましょう。
① プロジェクト名と時期
② 担当した部分と駆使したスキル
③ プロジェクトのコンセプト
④ 試行錯誤した点、それを克服するために工夫した点
06. サービス概要ページの作り方
フリーランス案件を受注することが目的のポートフォリオサイトの場合、サービス概要のページを設けるようにしましょう。受注することができるタスクやプロジェクト内容を明記しておくことで、コンタクトする側の心理的障壁が低くなり、コンタクトを貰える確率がグンと上がるからです。
なお、サービス概要に料金を載せるべきか否かという点は、業界やビジネスの戦略によるので、一つの正しい答えはありません。料金を表示するにもさまざまな方法があり、最低料金のみを表示したり、だいたいの価格帯を表示したりすることで、全く予算に見合わない顧客を見切ることができるなど、サイト上に料金を提示する利点もさまざまです。逆に、各クライアントと相談しながら料金を決めたい場合は、問合せフォームを細かくカスタマイズして、出来るだけ多くのニーズを汲み取る工夫をしましょう。
07. お問い合わせページの作り方
サイトを見て興味を持った人がコンタクトできるように、「問い合わせフォーム」の設置や連絡先の明記は必ず行いましょう。特にフリーランス案件を受注することが目的のポートフォリオサイトの場合、お問い合わせページはとても重要な要素です。コンタクト率を上げるために、お問い合わせフォームへのリンクはサイト内の全てのページにわかりやすく配置するようにしましょう。また、「 3 営業日以内に返信します。」など、返信の目安を記載しておくと親切です。
08. ファビコンを設定しよう
ファビコンは PC のブラウザのタブの部分に小さく表示されるアイコンです。デザインスキルを伝えることが目的のポートフォリオサイトでは、このような小さな部分でも気を抜かないことが大切です。
すでに自分のビジネスのロゴを持っている場合は、ロゴをファビコンとして設定しましょう。まだロゴを持っていなくて、イラストレーターやグラフィックデザイナーなど絵を描くのが本業ではない場合は、ロゴメーカーなどを利用して、ファビコンを作ってみましょう。
09. SNS アカウントと連携しよう
ポートフォリオサイトと SNS アカウントは必ず連携するようにしましょう。サイト上には限定した数の作品や実績しか掲載できませんが、SNS アカウントでその他の多くの作品を見てもらうことがでできるからです。あなたへの評価をさらに上げることに繋げれるかもしれません。SNS アカウントへのリンク先は、サイトのヘッダー部分に含めるなどして、全てのページ上に表示することで、クリック率をあげる工夫もしましょう。もちろん SNS のアカウントには、あなたのポートフォリオサイトの URL を載せることを忘れずに。
10. 独自ドメインで運営しよう
ポートフォリオサイトはあなたのキャリアを左右する、とても重要なツールです。必ず独自ドメインを取得して運営しましょう。ドメイン名を選ぶ際には、自身のブランドを表現したり、ビジネスの認知度を向上したりといった利点があるからです。
ポートフォリオサイトの独自ドメインは、覚えてもらいやすいように、また一目見ただけであなたが誰なのかわかるように、戦略的に選びましょう。例えばあなたが Hanako Yamada という名の写真家であれば、氏名だけをドメイン名に入れた「hanakoyamada .com」より、氏名と専門分野をドメイン名に入れた「hanakoyamada-photography.com」としましょう。より詳細なドメイン名の選び方は過去の記事「あなたのホームぺージへ適切なドメイン名の選び方」を参考に、ドメイン名を考えてみましょう。
ここまで、ポートフォリオサイトの作りのポイントとなる要素と作成のコツを紹介しました。
次の章では、 Wix を使って作成されたポートフォリオサイトの中で、デザインの参考になるサイトをまとめました。さまざまな分野のクリエイターやアーティストが Wix を使ってポートフォリオを作成しています。
ポートフォリオサイト作成事例6選
01. むらもと ちひろさん（イラストレーター）
美しい植物やかわいらしい動物、美味しそうな食べ物をモチーフに、柔らかなイラスト作品を手掛けるイラストレーターのむらもと ちひろさん。トップページでは、ゆっくりなスピードのスライドショー機能を使って、複数の作品を1点づつ見せることに成功しています。複数の作品をじっくり見てもらいたい場合に、真似したいテクニックです。
0２. ツチヤヒトミさん（イラストレーター）
ライブペイント活動など音楽にも携わっているイラストレーターのツチヤヒトミさん。作品集である「ILLUSTRATION」のページは、作品によって表示サイズを変え、見せ方に工夫を施しています。また、手書き風の署名ロゴ「ht」を配置することで、オリジナリティと暖かみさを表現し、ブランドイメージを視覚的に認識するための上手な使い方をしています。さらに、「WORKS」に過去の実績を掲載することで、クライアントにとってイメージの湧きやすいサイトとなっています。
0３. 大串潤也さん（グラフィックデザイナー）
劇作家、演出家、パフォーマー、映像作家、そしてグラフィックデザイナーと、多方面で活躍する大串 潤也さん。「ABOUT」ページではご自身の写真と共に、活動内容と自己紹介文、仕事に対する姿勢などが簡潔にまとめられていて、大串さんの人間性がよくわかるポートフォリオとなっています。
0４. 森 洋史さん（アーティスト）
国内外で多くの個展開催や受賞歴を誇る実力派アーティスト、森洋史さん。トップページでは、作品そのものではなく自身の個展の一角を掲載することで、実力を上手くアピールしています。コンタクトフォームのページには背景に拡大されたイラスト作品を使うことでユニークでインパクトのある仕上がりとなっています。また、こうした遊び心から、森さんというアーティストの人物像がよく伝わってくる点にも注目です。
0５. Yasutomo Kato さん（写真家）
数々のフォトコンテストで受賞歴のあるフォトグラファーの Yasutomo Kato さん。ウェルカムページでは、息を呑むような美しい風景写真を、画面全体にスライドショーを用いて表示しています。また、「Gallery」ページで季節やジャンルごとの高画質な画像をスライドショーで見せることで、シンプルなサイト構造だからこそ作品のクオリティを前面に押し出したポートフォリオサイトとなっています。コンタクトフォームのページの背景にも写真を使い、サイトの隅々まで写真家らしさを発揮するデザインとなっています。
06. 丸岡 勇太 さん（硝子作家）
トップページでは、作品とその世界観を表現するスライドショーと、クリーンなメニューだけというシンプルなデザイン。しかし、ポートフォリオに訪れた人を一瞬で作品の世界に誘い込む、お手本のようなポートフォリオデザインです。
ミニマルでありながら、非常に機能的で作品そのものを表現しているかのようですね。またページを切り替えると、フェードアウトアニメーションによってページが混じり合うように移動するデザインも素敵です。
07. 白井 匠 さん（イラストレーター）
トップページのヘッダー左にプロフィール・連絡先・肩書き・SNSを掲載。右にはユーザーが使いやすいように、コンテンツの種類でフィルターがかけられるメニューを設置しています。
ポートフォリオを見た潜在顧客が、直感的に目的のコンテンツを探すことができるUI に優れたデザインです。その上、問い合わせやすい作りになっており、仕事につながる実用的なポートフォリオサイトです。職種にかかわらず、どんなポートフォリオへも適応できるコツが満載なので、ぜひ参考にしてみてください。
まとめ
ポートフォリオサイトを作成する準備は出来ましたか？ まずは、ポートフォリオを作る目的を明確にすることで、見た目だけとは言わせない、実用的なサイト作りを目指しましょう。
他にも、人気イラストレーターによるポートフォリオサイトはこちらのブログ記事でも特集しています。ぜひ、インスピレーションの参考にしてみましょう。
Wix には魅力的なポートフォリオを作成するために必要な機能が揃っています。Wix プロギャラリーを利用すれば、右クリック防止機能により無断ダウンロードが阻止できたり、アニメーションやエフェクトを追加したりすることも簡単です。
まずは無料で、Wix のパワフルなエディタを体感してみてください。
編集者：Junko Tazawa
SEO マネジャー
