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

2020年09月14日（公開: 2017年09月04日）

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

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

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

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

1. Mana's Portfolio Website

Mana's Portfolio Website
http://www.webcreatormana.com/

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

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

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

2. Joyce Van Herck

Joyce Van Herck
http://www.joycevherck.com/

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

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

3. UNDERLINE

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