ポートフォリオサイトを自分で作るコツ｜掲載内容や初心者におすすめツールも紹介

ポートフォリオは、「自分の制作物をまとめたもの」で、クライアントなどに自身の成績や実績を示すときに必要です。
ホームページ作成サービスBiNDupには、フォトグラファーやアーティストなど様々な職種を想定したポートフォリオサイトのテンプレートを揃えています。
この記事では、ポートフォリオサイトをはじめて作る人に向けて、ポートフォリオに掲載すべき内容や作り方のコーツやおすすめのツールまで詳しく解説します。

→テンプレートでおしゃれなポートフォリオサイトがすぐに作れるBiNDupを30日間無料体験

ポートフォリオとは

ポートフォリオには、本来「複数の書類をまとめるケース」のことを意味します。しかし、一般的には、その人の実績や作品などをまとめ、一目で能力やスキルがわかるもののことを指します。ポートフォリオの目的は、クライアントに対して自分のアピールポイントをみせることです。具体的に実績を提示できれば、クライアントも安心して依頼できます。

ポートフォリオに載せるべき項目

ポートフォリオはそれぞれによって載せる項目は異なりますが、以下の項目は基本的に掲載したほうがよいでしょう。

自己紹介

自身のプロフィールを記載します。ここでは、自分が伝えたいことよりもクライアントが知りたい情報を重視して掲載します。学歴や資格、自分が歩んだキャリアパスなど、業務上役に立つ経歴をもっていることをアピールしましょう。

BiNDupのポートフォリオテンプレートAgatha Photo｜経歴や受賞歴で実績をわかりやすく紹介し、その直下に問合せフォームを設置

作品紹介

今まで制作してきた作品を掲載します。自分の魅力や能力がわかやすい作品を選びましょう。それぞれの作品には、作品説明をつけると丁寧な印象となります。工夫した点やクライアントに喜ばれたところなど、簡潔に書いてみてください。

BiNDupのポートフォリオテンプレートJAZZ PIANIST AYAME｜サムネイルを作品の写真にすることでギャラリー風に。詳細はそれぞれのページに掲載するスタイル

スキルレベル

自分がどの程度のことなら引き受けられるのか、スキルレベルを掲載します。エンジニアの場合は、使用できるツールや言語、使用歴など、具体的に記載しましょう。それぞれどの程度使いこなせるのかのレベルを5段階評価で記載するとわかりやすくなります。

連絡先

クライアントが作品を気に入ったときすぐに連絡をとれるように、自分の連絡先を記載しておきましょう。メールアドレスのほかSNSのアカウントを掲載する場合もあります。SNSで作品を発表している場合は、新たに作品をみてもらえます。

企業がポートフォリオの提示を求める理由

企業がポートフォリオを求める理由を解説します。企業の意図がわかると、アピールすべきポイントが見えてきます。

スキルやセンスを見るため

企業は、ポートフォリオの情報を手がかりに、その人のスキルやセンスを確認しています。スキルを見る理由は、専門性を仕事に活かせそうか見極めるためです。自社の方向性とマッチする人を採用するため、センスも見られています。

人柄を確認するため

企業が人柄を確認する理由は、採用後の働きぶりを推測し、性格や考え方に合う仕事を割り当てるためです。クリエイティブ職の場合は、チームを組んだりクライアントと一緒に働いたりする機会が多く、相性を見るためにも人柄が重視されます。

→テンプレートでおしゃれなポートフォリオサイトがすぐに作れるBiNDupを30日間無料体験

ポートフォリオサイトを作る際のコツ

ポートフォリオサイトを作成するときは、以下のようなコツに気をつけてみて下さい。

作品ページは簡潔に伝わりやすく作る

作品ページには、自分のこだわりの作品をなるべく多く掲載したくなる人も多いでしょう。しかし、あまりに多いと逆に伝えたいことが分散し、大切なことが伝わりにくくなります。そのため、作品紹介ページは20ページほどにおさえるようにします。それぞれの解説は200～400文字程度がおすすめです。プロセスが伝わるように完結に作成しましょう。

志望する企業に合わせた内容を意識する

自己本位ではなく、志望企業に合わせた自己紹介を作りましょう。企業ごとに興味があるスキルや経歴は異なります。自分のことを知ってもらい、採用したいと思ってもらえるように、アピールするポイントを検討してください。

職種ごとのポイントをおさえて作る

それぞれの職種ごとのポイントについて解説します。

Webデザイナーのポートフォリオ

Webデザイナーはオリジナリティあるふれる作品はもちろん、コーディング技術が備わっていることが伝わるものを掲載しましょう。デザインでよくこだわっている部分や、具体的な実績も反映するようにすると、よりわかりやすくなります。Webデザイナーの場合、オリジナルのサイト自体をポートフォリオにすると、より説得力が増します。

グラフィックデザイナー・イラストレーターのポートフォリオ

こういった職業の場合、作品の色合いや質感を伝えることが重要です。そのため、実際の作品を再現しやすいPDFファイルや紙で作品を用意するとよいでしょう。見やすいように作品を配置し、プロセスがわかるような文章も掲載するとわかりやすくなります。

UI/UXデザイナーのポートフォリオ

今までの実績や、自身の仕事によりどのような改善がみられたのか、結果を定量的に伝えます。ビフォー、アフターの両方とも掲載すれば、違いがわかりやすいうえ、クライアントに大きなインパクトを与えるでしょう。

CGデザイナーのポートフォリオ

CGデザイナーにも、2次元、3次元さまざま作品があるでしょう。得意なもの1種類にするのではなく、静止画、動画、平面、立体とさまざまな種類を掲載します。ポートフォリオサイトでしたら、動画の掲載も可能です。それぞれの作品に施した工夫も具体的に記載します。

映像制作クリエイターのポートフォリオ

作成した映像をみせるためには、ポートフォリオサイトに掲載、もしくは名刺にQRコードなどを掲載し、YouTubeの自分のチャンネルに誘導するとよいでしょう。どの程度のスキルをもっているのか5段階評価を記載しておくと、クライアントも声をかけやすくなります。

ゲームクリエイター・デザイナーのポートフォリオ

ポートフォリオサイトに自身が作成したゲームを掲載し、クライアントに実際にみてもらいます。担当箇所、開発時間、開発環境、使用言語なども掲載します。
デザイナーは自身が担当したキャラクターのキャプチャ画像などをポートフォリオにまとめるとよいでしょう。

構成は作品数に合わせて検討する

ポートフォリオサイトの構成は、掲載する作品数に合わせて検討しましょう。作品数の観点から構成作りのポイントを解説します。

作品数が少ない場合

長期にわたるプロジェクトにかかわってきた場合は、制作期間を示しつつ工夫した部分が伝わる構成を考えます。また、経験が少ない場合でも、中途半端な作品の掲載はおすすめしません。自信のある作品のみ掲載し、これまでの経験・強みなどをアピールして伸び代を見せましょう。

作品数が多い場合

ポートフォリオサイトの作品数が多すぎると、採用担当者に負担をかけてしまうため好ましくありません。応募する企業に合わせて、掲載する作品を絞り込む構成力が求められます。

作成時の注意点

クオリティの低いポートフォリオサイトは、採用担当者を不安にさせる恐れがあります。ポートフォリオサイト作成時の注意点を解説します。

誤字脱字はないか

誤字脱字や、企業名や商品名に関する間違いなどがあると、不注意な人という印象を与えかねません。ポートフォリオサイトを作成したら何度も見直して、表記ミスがないか、自己紹介の内容に間違いがないかを確認しましょう。

読みやすいレイアウトになっているか

ポートフォリオサイトは、読みやすさ・わかりやすさが重要です。書体や文字のサイズ、画質、配色などにこだわって、採用担当者がすんなりと理解できるサイトを作りましょう。

→テンプレートでおしゃれなポートフォリオサイトがすぐに作れるBiNDupを30日間無料体験

ポートフォリオサイトの基本的な作り方

それぞれの職業によってポートフォリオサイトの作り方は違うため、どの職業でも変わらない基本的な作り方を解説します。

【1】ポートフォリオを作る目的を明確化する

まとまった内容で、伝えたいことをしっかり伝えられるポートフォリオサイトを作成するためには、まず目的を明確化します。誰にみてもらうのか、どのようなイメージをもってほしいのか、具体的に練り上げてみましょう。

【2】素材を集める

ポートフォリオサイトに掲載する素材を集めます。先程解説しました、ポートフォリオサイトに掲載すべき項目を参考に、それぞれどのようなコンテンツを集めるべきか考えましょう。特に自分のスキルや作品を伝える項目には工夫が必要です。

Webサイトで使う画像素材の選び方と加工テクニック

【3】参考にしたいデザインのサイトを探す

Webデザイナーなど、デザインを職業としている人はオリジナルのサイトを作成します。しかし、それ以外の職業の人は既存のポートフォリオサイトを参考にしてみてください。見やすいサイト、伝わりやすいサイトの特徴を分析し、自分のポートフォリオに活かしましょう。

7つのデザイン手法に見るWebトレンドを分析！オススメの使い方

【4】サイトの構成を考える

トップページからどのような構成にするのか、サイトマップを考えます。手書きで作成してみてもよいですが、ビジネスソフトや専用のツールもあります。クライアントがサイトをどのような導線で参照するのか、相手のことを考えつつ決めていきましょう。

【5】ワイヤーフレームを作成する

問合せフォームの場所や、作品ページへのボタンなど、どこに何を配置するのかを決め、ワイヤーフレームを作成します。こまかなデザイン変更はあとからできるため、おおまかに決めても問題ありません。

【6】コーディングを行う

サイトをWeb上に表示させるためにはHTMLとCSSでコーディングを行います。コーディングの知識がない場合、jQueryやCMSを利用する方法がおすすめです。jQueryとは、初心者でも使いやすいJavaScriptのライブラリです。CMSはコーディングが不要でサイトを作成できるツールです。自分でコーディングをしたことがない場合は利用しましょう。問合せフォームを作成し、問い合わせが確実に届くよう確認もしましょう。

【7】ドメインやサーバーを取得し、アップロードする

ポートフォリオサイトを公開するためには、サイトのドメインを取得し、サーバーを用意しなければなりません。それぞれ費用がかかりますが、ポートフォリオ作成ツールのなかには無料で公開できるものもあります。

→テンプレートでおしゃれなポートフォリオサイトがすぐに作れるBiNDupを30日間無料体験

ポートフォリオ作成ツールを活用する方法

Webデザイナーなどでコーディングできる人以外は、ポートフォリオ作成ツールの活用がおすすめです。ポートフォリオサイト作成に適したツールを利用することで、短時間でクオリティの高いサイトを作成できます。ポートフォリオ作成ツールのメリット、デメリットを紹介します。

ポートフォリオ作成ツールを活用するメリット

ポートフォリオ作成ツールは、サイト作成で必須とされるHTMLやCSSの知識がなくても問題ありません。コーディング未経験や、初心者でも簡単にデザイン性に優れたサイトを作成可能です。

ポートフォリオ作成ツールを活用するデメリット

ポートフォリオ作成ツールは、用意されたテンプレートを活用する場合が多く、あまり自由度が高いものではありません。また、無料で使用できるポートフォリオ作成ツールは、機能に制限があります。

ポートフォリオ作成におすすめのサイト作成ツール5選

数あるポートフォリオ作成ツールのなかで、特におすすめのものを5つ紹介します。

BiNDup

BiNDupは国産のCMSのため、日本語での操作ができるほかノーコードで作成できるため初めての方でも安心です。ポートフォリオ向けのテンプレートが豊富なだけでなく、直感的な操作によりレイアウトの追加や削除、順番の変更も自由自在でカスタマイズを楽しめます。無料で作成できるコースもありますが、おすすめはサポート付きの有料コースです。

Portfoliobox

カメラマンやデザイナー、イラストレーターなど、アーティスティックな職業の人におすすめのポートフォリオ作成ツールです。カスタマイズ性が高く、ユニークでオリジナリティあふれるポートフォリオサイトを作成できます。

salon.io

ドラッグアンドドロップで簡単に作成できるサイト作成ツールです。組み込みが容易にできるため、YouTubeやVimeo、SoundCloudなどに掲載している作品の自動表示も可能です。CGデザイナーや映像制作クリエイターに便利な機能が多いです。

Strikingly

クリエイターや起業家からも支持されるWebサイト作成支援ツールです。直接編集によりサイトを作成していくとため、30分もかからずにポートフォリオサイトを作成することもできます。

WordPress

多くのサイトで使われています。テンプレートが豊富にあり、Webデザイナーでなくてもプロ仕様のレイアウトを使用可能です。ただ、オリジナリティあふれるポートフォリオサイトを作るためには、WordPressのプラグインに関する知識が必要となります。

→テンプレートでおしゃれなポートフォリオサイトがすぐに作れるBiNDupを30日間無料体験

ポートフォリオサイトの参考事例

実際にあるポートフォリオサイトを紹介します。自身のサイト作成の参考にしてください。

wonder PHOTO PROJECT

こちらのポートフォリオはBiNDupで作られたもので、写真や映像作品が掲載されています。「高いカメラである必要はなく、スマホのカメラでも構わない」、「目の前の「wonder」を記録することこそが大切」というコンセプトが明確に伝わります。

UNDERLINE

アイコンや画像の配置に特徴があり、導線が整っています。迷わずにほしい内容にたどり着けるでしょう。問合せフォームへのボタンもわかりやすく、依頼しやすくなっています。

フクシマナオキ

1ページ内に作品の一覧がすっきりと配置され、一目でどのような作品を作っているのかわかります。ポートフォリオサイト自体がハイセンスで洗練されているため、Webデザイナーとしての実力が感じられるでしょう。

TAIKI KATO

実績である「WORKS」をトップページに配置し、どのような作品があるのか積極的にアピールしているポートフォリオサイトです。掲載されている作品数が豊富で、クライアントは安心感を得られるでしょう。

→テンプレートでおしゃれなポートフォリオサイトがすぐに作れるBiNDupを30日間無料体験

本格的なポートフォリオサイトが作れるBiNDup

ポートフォリオは自身の作品をまとめ、クライアントに自身の力をアピールするために必要なものです。ポートフォリオサイトであれば、動画や実際に作成したWebサイトなどを掲載できます。ポートフォリオ作成ツールなどを活用すれば、初心者でも洗練されたポートフォリオサイトを作成可能です。

サイト作成ツールであるBiNDupは国産CMSのため、日本語表示で直感的に操作できます。有料コースには専用サポートを用意しているので、初めてポートフォリオサイトを作る人も安心です。

業種ごとにおすすめのコンテンツで構成したポートフォリオサイト向けのテンプレートも豊富で、独自のデザインを実現できる自由なカスタマイズも可能です。ぜひ試してみてください。

BiNDupのポートフォリオサイト向けの新作テンプレートTSUBAME Ikebana

無料でBiNDupを使ってみるBiNDの制作事例を見る