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

一般的に、ポートフォリオとは 「自分の制作物をまとめたもの」を意味します。クライアント等に自身の成績や実績を示すときに必要となります。この記事では、ポートフォリオサイトをはじめて作る人に向けて、ポートフォリオに掲載すべき内容や作り方のコーツやおすすめのツールまで詳しく解説します。

ポートフォリオとは

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

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

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

自己紹介

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

プロフィールのサンプル

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

作品紹介

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

作品紹介のサンプル

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

スキルレベル

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

連絡先

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

【2】素材を集める

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

BiNDup

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

Portfoliobox

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

salon.io

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

Strikingly

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

WordPress

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

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

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

Mana’s Portfolio Website

シンプルで見やすい構成が魅力的なポートフォリオサイトです。作品はもちろん、自身のYouTube、ブログ、SNSなどのリンクがあり、情報量は多めです。読んだ本の感想も記載されていて、どのような人柄や思想なのかもわかります。
Mana’s Portfolio Website

UNDERLINE

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

フクシマナオキ

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

TAIKI KATO

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

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

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

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

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

TSUBAME Ikebana<

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

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

[読めばわかる、Googleサーチコンソール] 検索キーワードの調べ方と伸ばすコツ

流入キーワードを知るための基本と、伸ばすために必要な6つの改善施策を紹介。サーチコンソールですべきことがわかる徹底ガイド。

新規登録をして資料をダウンロード
  • POINT

  • ポートフォリオサイトはクライアントが知りたい情報を掲載し問合せの導線を重視する
  • 実績の掲載やスキルレベルは5段階評価で表すなど説得力ある材料でアピール
  • ポートフォリオサイトに適した作成ツールを使うとクオリティーの高いサイトが簡単に作れる