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

2017年9月4日

ニュース

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

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

ポートフォリオサイトをもっとカッコよくしたいと思ったら、クオリティの高い既存のデザインを参考にするといいでしょう。今回は、ポートフォリオサイト作成の参考になるデザイン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

http://yamamototakashi.jp/

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

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

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/

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

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

http://www.ashinari.com/2013/04/21-377967.php?category=279

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

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

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

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

1. Wix

https://ja.wix.com/

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

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

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

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

2. Portfoliobox

https://www.portfoliobox.net/jp

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

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

3. Salon.io

https://salon.io/

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

まとめ

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

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

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