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

作品紹介のためにポートフォリオ（実績をアピールするサイト）を用意したいとは思っても、重要なポートフォリオサイトのデザインが決まらない！と悩んでしまう方も多いのではないでしょうか。

作品の評価はもちろん、ポートフォリオサイト自体も当然評価対象となりますので、素敵なデザインに仕上げたいものです。

もしポートフォリオサイトをもっとカッコよくしたいと思ったら、クオリティの高い既存のデザインを参考にするといいでしょう。今回は、ポートフォリオサイト作成の参考になるデザイン20選とポートフォリオサイトの作り方をご紹介します。
　　

【Webデザイナー・Webディレクター】のポートフォリオサイト

1. Mana's Portfolio Website

http://www.webcreatormana.com/

Web関連で有名なブログ『Webクリエイターボックス』の運営者、Mana氏のポートフォリオサイトです。シンプルな構成が特徴で、どのような仕事をしてきたかがわかりやすいデザインです。

また、英語に切り替えが可能で、海外の方にもわかるようなポートフォリオとなっています。

こういった点もポートフォリオサイトも参考例になるのではないでしょうか。

　　

2. Joyce Van Herck

http://www.joycevherck.com/

ロンドン在住のWebデザイナー、フロントエンドエンジニアのJoyce Van Herck氏のポートフォリオサイトです。三角形や斜めの線を取り入れ、シンプルながらも目を引く個性的なデザインとなっています。

ポートフォリオページの画像はスライドショーになっており、代表的な作品を見ることができます。
　　

3. UNDERLINE

http://u-d-l.jp/

大阪府でフリーランスとしてWeb制作を行う、徳田優一 氏のポートフォリオサイトです。Web関連のポートフォリオサイトで、一番最初にプロフィール写真・メッセージを掲載しているデザインというのは珍しいのではないでしょうか。メッセージと白を貴重としたページ全体のデザインから、信頼できそうな印象が伝わってきます。

サービス内容を文章だけではなく、アイコンでも説明するなど、わかりやすい作りになっているのも参考ポイントです。
　　

4. oniguili

https://www.oniguili.jp/

Webデザイナー・グラフィックデザイナーとして活動を行う、西村沙羊子 氏のポートフォリオサイトです。

シンプルなモノクロカラーでまとめながらも、個性的なレイアウトやアクセントを取り入れた遊び心のあるデザインです。作品ページのサムネイル画像も全てモノクロで、ページ全体のデザインを損なわないようになっています（画像にカーソルを合わせるとカラー画像に変化するのも参考になります）。

トップページ左端に各種SNSのリンクを設置しており、シームレスにアクセスができるのも参考例として注目です。
　　

5. S5-Style

http://www.s5-style.com/

Webデザインからアートディレクションまで、多方面で活躍している田淵将吾 氏のポートフォリオサイトです。アニメーション、音楽を効果的に活用したデザインで、ユーザーの目を引きます。作品ページの見せ方にもこだわりがみられるポートフォリオサイトです。マウスオーバーで色が変化したり、徐々に画像を表示するアニメーションを表示したりと、様々な手法を駆使しているため、技術的な参考例として注目のポートフォリオサイトといえます。
　　

6. フリーランスデザイナー フクシマナオキ

http://fukushimanaoki.com/

フリーランスデザイナー フクシマナオキ氏のポートフォリオサイトです。シンプルなシングルページで、1ページ内で作品、コンセプト、プロフィールを全て見ることができます。コンパクトにまとめることで、伝えたいことを完結かつ確実に発信することができる参考例ではないでしょうか。
　　

7. Mike Ingham Design

http://www.mikeinghamdesign.com/

Web・グラフィックデザイナー MIKE INGHAM氏のポートフォリオサイトです。デスク上にアイテムを配置したようなメイン画像と、マウスオーバーした時の色の変化が美しい、オシャレなデザインに仕上がっています。細部までこだわっているポートフォリオサイトという印象です。
　　

8. normo.jp

http://normo.jp/

デザイナー Yu Ishihara氏のポートフォリオサイトです。美しい波がゆらゆらと動く、インパクトの強いデザインです。文字だけというシンプルなデザインながら、1度見たら忘れないデザインとなっています。文字中心のポートフォリオサイトに置ける好例です。

　　

【そのほかのデザイナー】のポートフォリオサイト

9. TAIKI KATO

http://taikikato.jp/

アートディレクター・デザイナー TAIKI KATO 氏のポートフォリオサイトです。作品の一部をトップページに表示し「VIEW MORE」ボタンをクリックするとそのほかの作品が見れるようになっています。作品画像の1つひとつが美しく、細かな説明や作成手順まで掲載しています。作品を魅力的に見せるコツを学ぶことができる参考例ではないでしょうか。
　　

10. TAKAYA OHTA

http://takayaohta.com/

デザイナー タカヤ・オオタ氏のポートフォリオサイトです。サムネイル画像にマウスポインタを乗せると、ページのトップ余白部分にデザインを大きく表示します。オシャレかつ個性的な表現がポートフォリオの参考になります。
　　

11. FR/LAME MONGER BARON UEDA

http://frlamemonger.com/

イラストレーター 上田バロン氏のポートフォリオサイトです。ページ全体にキャラクターを表示したデザインによって、一目で世界観が伝わってきます。作品ページを見なくとも、どんな作品を作っているのかが瞬時にわかるポートフォリオの好例です。たくさんのアニメーションを使用していますが、デザインに統一性を持たせているところにもこだわりを感じます。
　　

12. mouf design

http://moufdesign.info/

Web、グラフィック、ゲームUIデザイン制作などを行う、勘村洋和 氏のポートフォリオサイトです。丸・三角・四角をふんだんに取り入れた、配色もオシャレなデザインです。1ページに全てまとめたデザインで、各作品画像をクリックすると詳細ページにリンクすることができ、機能面においても参考になるポートフォリオと言えます。

　　

13. STUDIO GRUB

http://kitao.grub.jp/

グラフィック・Webデザイナー 北尾知大 氏のポートフォリオです。トップページ上部ではスライドショーやユニークなレイアウトで作品画像を見せており、興味をそそるデザインとなっています。メニューアイコンの動きなどもこだわっていてオシャレなポートフォリオサイトです。
　　

14. musubime™

http://www.musubime.jp/

グラフィックデザイナー、コンセプターであるカワセ タケヒロ 氏のポートフォリオです。フィロソフィー、作品サンプル、プロフィール、コンタクトをシングルページにまとめたデザインが参考になります。

ポートフォリオサイトではあまり見ない縦書きの文字が特徴的で、目を引きます。画像だけではなく、文章でしっかりと思いを伝えるのも、ポートフォリオ制作において必要なのではないでしょうか。縦書きのレイアウトと主張を訴えるというコンセプトにおいて参考になります。

　　

【写真家】のポートフォリオサイト

15. 写真家 青山裕企

http://yukiao.jp/

写真家 青山裕企 氏のポートフォリオサイトです。画像を大胆に使ったページ構成で「ソラリーマン」「スクールガール・コンプレックス」2つのリンクを配置しています。作品紹介以外にも、日記、今後の予定……とたくさんの情報を掲載し、多数の情報をまとめるという場面で参考になるポートフォリオサイトです。
　　

16. 小林大輔写真事務所

http://www.kobaphoto.com/

写真家 小林大輔 氏のポートフォリオサイトは、背景に動画を使ったインパクトの大きなデザインです。動画背景の上に、たくさんのサムネイル画像で作品を紹介しており、あまり見ることのないユニークなポートフォリオのデザインとなっています。
　　

17. Takumi Taniguchi Photographer

http://www.takumitaniguchi.com/

写真家 谷口巧 氏のポートフォリオサイトです。ページ全体に大きく画像を配置し、ランダムに表示するようになっています。たくさんの作品をアップで見れるのがポイントで参考になる点も多く見られる好例です。

作品ページは、プライベートで撮影したものと仕事用で撮影したものとを分けて表示しています。
　　

18. Nagi Yoshida（ヨシダナギ）Official Web Site

http://nagi-yoshida.com/

写真家　ヨシダナギ 氏のポートフォリオサイトです。ページを表示すると全体に大きく写真が出現し、インパクトがあります。構成、デザインはかなりシンプルで、主役である写真を引き立てるものとなっている点に注目です。

作品ページで写真を国別にカテゴリ分けしてあるのが見やすく、世界で活躍するヨシダ氏ならではの構成として参考になります。
　　

19. 山本タカシ : Takashi Yamamoto : Photographer

写真家　山本タカシ 氏のポートフォリオサイトは、写真が次々にスクロールする動きのあるサイト構成が参考になる好例です。シンプルかつ余白たっぷりのページデザインが、中央にある写真を引き立てており、つい注目してしまいます。その他のページもトップページ同様、中央揃えのデザインにしてあり、統一感がが感じられます。
　　

【アーティスト】のポートフォリオサイト

20. MIDORI AOYAMA

http://midoriaoyama.jp/

多方面で活躍するアーティストMIDORI AOYAMA 氏のポートフォリオサイトは、トップページの写真の加工を全面に押し出しておりインパクトがあります。自身の顔写真にポリゴン加工を施した画像によって、ページ全体も個性的なカッコいい世界観に仕上がっています。
　　

ポートフォリオに含めるコンテンツ

いざデザインのイメージが固まっても、何から作ったらいいかわからない方も多いのではないでしょうか。そこで、ポートフォリオに含めるべき、最低限必要なコンテンツをご紹介します。
　　

作品

ポートフォリオサイトは自分の作品を紹介するための手段ですので、作品や実績は最も重要なコンテンツです。数が多ければ絶対に良いとは限りませんので、作ったもの全てを載せるのではなく、自信のあるものや実績のあるものをピックアップしましょう。また、単に画像だけを載せるよりも、制作時間や時期なども記載しておくとクライアントが依頼しやすくなります。

http://www.webcreatormana.com/works/

例として挙げたいのがWebデザイナー Mana氏のポートフォリオサイトです。デザイン以外にも多方面で実績があることから、ビジュアルでわかりやすくカテゴリ分けをして見せています。
　　

プロフィール

自分がどのような人物か知ってもらうためにも、自身のプロフィールは必ず書きましょう。具体的な内容としては、名前、経歴、スキル、SNSアカウントなどです。また、顔写真を掲載すると信頼感を得られやすくなります。

http://nagi-yoshida.com/wordpress/about-nagi-yoshida

プロフィールにおける好例は、ヨシダ ナギ氏のポートフォリオサイトのプロフィールページです。経歴（受賞歴）を簡単に説明し、各種SNSアカウントのリンク、作品が購入できるページへのリンクも設置して分かりやすくまとめています。
　　

問い合わせ

ポートフォリオサイトを見て興味を持ってもらえても、クライアントが問い合わせできなければ意味がありません。コンタクトフォームを設置し、問い合わせてもらえるようにしましょう。

http://moufdesign.info/

問い合わせの好例が、デザイナー勘村洋和 氏のポートフォリオサイトです。ページ全体のデザインがこだわっているだけあって、問い合わせフォームのデザインにも気を抜いていません。フォームの入力箇所が少なく、利用しやすいシンプルな構成も参考になるポイントです。
　　

ポートフォリオ作成のコツ

実際に作品・実績を効果的に紹介するポートフォリオサイトを作成するためには、どういった点に注意すればいいのでしょうか。ポートフォリオサイト作成で心がけたいポイントとしては、以下の点を挙げることができます。

・わかりやすく情報が伝わるものにする
・自分が最もアピールしたい強みを強調する
・自分らしい個性で人と差をつける
・自己満足にならないよう、見ている人の視点を忘れない
・SNSを積極的に活用する

単に作品を並べるだけでは、何を伝えたいのか、ほかの人とどこが違うのかがわかりづらくなってしまいます。作品の情報がわかりやすいデザインで、かつ自分らしさが伝わるものにすることが重要です。
　　

ポートフォリオが作成できるサービス

1. Wix

https://ja.wix.com/

Wixは誰でも簡単に、無料でホームページを作成できることで有名なサービスです。HTMLの知識は不要で、好みのテンプレートを選択し、ドラッグ＆ドロップだけでデザイン編集ができます。スマホ用サイトの対応も、もちろん可能です。

ポートフォリオだけではなく、そのほかのホームページ作成にも適した、用途に合わせて選べる200以上の機能が揃っています。

Wix公式ブログでポートフォリオサイト作成に関する記事もありますので、参考にしてみてはいかがでしょうか。

参考：
印象的なポートフォリオサイトの作り方｜Wix公式ブログ
　　

2. Portfoliobox

https://www.portfoliobox.net/jp

Portfolioboxは、その名のとおりオンラインポートフォリオサイト作成に特化したサービスです。無料で始めることができ、写真家・メーキャップアーティスト・モデル・デザイナー・アーティスト・建築家に適したポートフォリオサイトが作成できます。

ギャラリーページだけではなく、販売ページも作成できるのが特徴で、簡単にオンライン上で作品販売ができるのも強みです。

3. Salon.io

https://salon.io/

ドラッグ&ドロップ操作で簡単に無料で作品が公開できるポートフォリオサイト作成サービスです。コードの知識は不要ですが、HTML・CSSをコードエディターで追加することもできます。テキストボックスを作って組み込みコードを貼付けるだけで、簡単に組み込みも可能です。無料サービスにありがちな「広告表示」が一切ないのもポートフォリオの構成を邪魔しないという点で嬉しいポイントです。
　　

アーティストのポートフォリオサイトを参考にオリジナルのポートフォリオを作成しよう

以上、ポートフォリオサイト20選をご紹介しました。いかがでしたでしょうか。

クリエイティブな職種の方にとって、自分のスキル・活動歴をクライアントや周囲に伝えるのに有効な手段の1つがポートフォリオサイトです。
あくまで作品がメインとお考えの方も多いでしょうが、肝心のポートフォリオサイト全体のデザインが悪ければ、せっかくの作品紹介も台無しになってしまいます。

デザイン性の高いポートフォリオサイトにするためにも、優れたデザインを参考にしてみてください。

この記事を読んだ方へおすすめ

ERPパッケージとは？シェアの高いサービスを機能や形態別に比較

ERPについて調べていると、「*ERPパッケージ*」という単語を知ることになるのではないでしょうか。何かと難しいERPの用語ですが、ERPパッケージとは何のことを指すのでしょうか。この記事では、*ERPパッケージの基本と導入のメリット、そして主要なERP製品について*解説します。

SNS型eポートフォリオ「Feelnote」新たな特許取得を機に、サービスの無償提供を開始

教育コンサルティング＆クラウドサービス事業を行う株式会社サマデイ（本社：東京都千代田区六番町、代表取締役：相川秀希）は、自社が開発・提供しているSNS型eポートフォリオ「Feelnote（フィールノート）」（特許第6028123号）に用いられている、ユーザーがSNSに投稿するライフログの集積を活用して、自身の学びと成長を示すポートフォリオを作成・編集する技術について、新たに特許権を取得しました。これを機に、Feelnoteは、特許技術を利活用し、学びの環境を世界につなげるプラットフォームとしての役割を担い、日本の教育改革に貢献するため、公教育向けにサービスの無償提供を開始します。