フリーランスのデザイナーとして活動していくには、ポートフォリオサイトの作成は欠かせません。

ポートフォリオサイトは自身が作った作品をまとめたWebサイトのことで、新しいクライアントに対してスキルや実績をアピールすることを目的としています。
ただ、いざ作成するとなるとどういった項目を記載すればいいのか迷ってしまう方も多いのではないでしょうか。

今回は、ポートフォリオサイトの基本的な作り方とポートフォリオを作成できる4つのサービスを紹介します。

ポートフォリオサイトは、クライアントが最初に見るあなたの作品です。ぜひ基本的なポイントをおさえて、自身の作品の魅力を引き出せるサイトを作成しましょう。

ポートフォリオサイトとは

「Portfolio（ポートフォリオ）」とは、もともと書類をまとめて持ち運べるケースを指す言葉であり、主に以下のような意味で利用されています。

1.金融・投資：所有有価証券の一覧表または最も有利な分散投資を行う選択のこと
2.教育：成績表などの生徒や教師が利用する個人評価ツールのこと
3.クリエイティブ業界：今まで作成した作品をまとめた作品集のこと

「ポートフォリオサイト」というと、一般的には3の「自身の作成した作品集」としての意味を指すことが多く、デザイナーや写真家にとっての実績を表すツールの1つとして利用されています。

参考：
岩波書店『広辞苑第六版』2008,2009

MAシェアと国産MAツールランキングを紹介

資料を無料ダウンロード

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

ポートフォリオサイトを作成する際に最低限記載すべきものと追加で工夫したいポイントを紹介します。
サイトを作成して公開した後に「あれもこれも」と考えてしまうと、無駄に手間がかかってしまいます。ぜひ作成する前に基本的なポイントは押さえておくようにしましょう。

参考：
[印象的なポートフォリオサイトの作り方｜Wix公式ブログ] (https://ja.wix.com/blog/2015/11/%E5%8D%B0%E8%B1%A1%E7%9A%84%E3%81%AA%E3%83%9D%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%AA%E3%82%AA%E3%82%B5%E3%82%A4%E3%83%88%E3%81%AE%E4%BD%9C%E3%82%8A%E6%96%B9/)
【え、無料で？】ポートフォリオサイトの作り方と作成のポイントとは | ボクシルマガジン
世界で活躍するデザイナーから学ぶ！ポートフォリオサイトをより効果的にみせるアイデア7選｜ferret [フェレット]

ポートフォリオに最低限記載すべきもの

ポートフォリオサイトは、自身の作品をいかに魅力的に見せるかが重要となります。
特にデザイナーや写真など、ビジュアルが重視される職種の場合、見た目にはこだわりたいところでしょう。

ですが、見た目だけでなく、基本的な情報を記載しておかなければサイトを訪れた人が「この人は信頼できる、仕事を依頼したい」という気持ちにはなりません。
ポートフォリオサイトに掲載する作品には最低限、下記の項目を記載するようにしましょう。

・制作に携わったWebサイトの名前や作品のタイトル
・写真やキャプチャなど作品のビジュアル
・作品の目的、コンセプト、ターゲット、担当した部分、制作期間などの作業内容
・制作する上で挑戦した点や工夫した点など作品のポイント

また、自身のメールアドレスやSkypeのID、SNSのアカウントといった自身と連絡をとる方法や連絡先を記載するのも忘れないようにしましょう。

参考：
[便利すぎる！ポートフォリオ作成サービス8選まとめ | マイナビクリエイター] (https://mynavi-creator.jp/knowhow/article/service-to-create-a-portfolio)

追加で工夫したいポイント

基本的な情報からさらにレベルアップしたサイトに仕上げたいという方は、以下のポイントも参考にしてみてください。

 ・長所をアピールできるシンプルで短いキャッチフレーズを添える
 ・作品を損なわないナビゲーションメニューを設置する
 ・カラーなどを統一し、ブランドイメージを作る
 ・複数の作品を組み合わせて、ページストーリー性を作り出す
  ・自分が何を行えるかを端的に示す説明文を入れる

特にWebデザイナーの場合、ポートフォリオサイト自体が自身の作品としての価値を持ちます。
アニメーションやスライドショーなどの動的な要素を取り入れて魅力を出すのもいいでしょう。

また、下記の記事では参考となる海外クリエイターのポートフォリオサイトを紹介しています。より魅力的なデザインを作成したい方はこちらも合わせて見てみましょう。

参考：
ポートフォリオをもっとカッコよく！上手なポートフォリオサイト20選｜ferret [フェレット]

無料で利用できるポートフォリオサイト作成サービス

ポートフォリオサイトは制作会社に依頼したり、有料ツールを使ったりしなくても無料のツールで作成できます。主なサービスを4つ紹介します。

参考：
意外と重要！クリエイターがポートフォリオサイトを作る時のポイントと役立つツール5選｜ferret [フェレット]

1.salon.io

Salon.io___A_Whole_New_Way_Of_Presenting_Artwork_Online.png
https://salon.io/

「salon.io」は画像ファイルをドラッグ&ドロップするだけで、ポートフォリオサイトが作成できるサービスです。
3ページまでの利用は無料であり、HTMLとCSSでカスタマイズすることもできます。

独自ドメインの取得や3ページ以上のサイトの作成にあたっては月4ユーロからの有料プランを契約する必要があるので注意してください。

2.WordPress

日本語_—_WordPress.png
https://ja.wordpress.org/

「WordPress」は自分でブログやWebサイトが作成できるツールです。基本利用料金は無料であり、テーマやアドオンをインストールすることでカスタマイズすることができます。

「WordPress」では、ユーザー自身が作成した「WordPress」のデザインをテーマとして公開できる機能があり、デザイナーや写真家のポートフォリオサイト向けのテーマも数多く公開されています。

参考：
【厳選】デザイナーやクリエイターのポートフォリオにオススメするWordPressテーマ15選｜ferret [フェレット]
ポートフォリオに最適！写真やイラストを魅力的にレイアウトできるWordPressテーマ10選｜ferret [フェレット]

3.Strikingly

Strikingly___あなただけのウェブサイトを制作するための、最高のウェブビルダー.png
https://www.strikingly.com/?locale=ja

「Strikingly」は端末に合わせたデザインサイズに自動で調整されるレスポンシブデザインのWebサイトが作成できるサービスです。

豊富なテーマが用意されているだけでなく、画面そのままのデザインで編集ができるのも特徴です。

有料機能を利用すれば、ネットショップの機能もつけることができるので自身のオリジナルグッズを販売する場合にも活用しやすいでしょう。

4.Portfoliobox

Portfoliobox－あなたのオンラインポートフォリオウェブサイト.png
https://www.portfoliobox.net/jp

「Portfoliobox」はポートフォリオサイトの作成に特化した制作サービスです。
無料でオリジナルのポートフォリオサイトが作成できるだけでなく、公式サイト上では、魅力的なサイトを作成する方法やデザインのポイントが動画で紹介されています。

複数のテーマも用意されているので、初心者でも作成できます。

まとめ

ポートフォリオサイトは、自身の作品をまとめたサイトであり、スキルや実績をアピールするために活用できます。
作成にあたって最低限下記のような作品情報は記載しておくようにしましょう。

・制作に携わったWebサイトの名前や作品のタイトル
・写真やキャプチャなど作品のビジュアル
・作品の目的、コンセプト、ターゲット、担当した部分、制作期間などの作業内容
・制作する上で挑戦した点や工夫した点など作品のポイント

今回紹介したように、無料でポートフォリオサイトを作成できるサービスもあります。
サービス自体の使いやすさだけでなく、自分の作品の魅力を引き出すことができるデザインを実現できるのかといった視点でサービスは選びましょう。

こちらも合わせてチェック

ポートフォリオをもっとカッコよく！上手なポートフォリオサイト20選

ポートフォリオをもっとカッコよく！上手なポートフォリオサイト20選

ポートフォリオサイトのデザインがなかなか決まらない！という方も多いのではないでしょうか。 今回は、そんな悩みを持つ方に向けて、ポートフォリオサイト作成の参考になる20デザインをご紹介します。
世界でシェアを誇る有名CMSを比較！それぞれのメリット・デメリット

世界でシェアを誇る有名CMSを比較！それぞれのメリット・デメリット

Webサイトを制作する際によく利用されるCMS。いざ利用しようと思っても、たくさん種類があるためどれを利用すべきか迷ってしまうこともあるのではないでしょうか。この記事では、世界シェア上位5位までのCMSを、メリット・デメリットを挙げながら比較してみました。CMS選びの際に、ぜひ参考にしてみてください。