ポートフォリオをもっとカッコよく！上手なポートフォリオサイト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度見たら忘れないデザインとなっています。文字中心のポートフォリオサイトに置ける好例です。