ポートフォリオをもっとカッコよく！上手なポートフォリオサイト20選
作品紹介のためにポートフォリオを用意したいとは思っても、重要なポートフォリオサイトのデザインが決まらない！と悩んでしまう方も多いのではないでしょうか。
作品の評価はもちろん、ポートフォリオサイト自体も当然評価対象となりますので、素敵なデザインに仕上げたいものです。
ポートフォリオサイトをもっとカッコよくしたいと思ったら、クオリティの高い既存のデザインを参考にするといいでしょう。今回は、ポートフォリオサイト作成の参考になるデザイン20選をご紹介します。
【Webデザイナー・Webディレクター】のポートフォリオサイト
1. Mana's Portfolio Website
http://www.webcreatormana.com/
Web関連で有名な ブログ 『Webクリエイターボックス』の運営者、Mana氏のポートフォリオサイトです。シンプルな構成で、どのような仕事をしてきたかがわかりやすいデザインです。
また、英語に切り替えができるようになっており、海外の方にもわかるようなポートフォリオとなっています。
2. Joyce Van Herck
ロンドン在住のWebデザイナー、フロントエンドエンジニアのJoyce Van Herck氏のポートフォリオサイトです。三角形や斜めの線を取り入れ、シンプルながらも目を引く個性的なデザインとなっています。
ポートフォリオ
ページ
の画像はスライドショーになっており、大きな作品画像をたくさん見ることができます。
3. UNDERLINE
大阪府でフリーランスとしてWeb制作を行う、徳田優一 氏のポートフォリオサイトです。Web関連のポートフォリオサイトで、一番最初にプロフィール写真・メッセージを掲載しているデザインというのは珍しいのではないでしょうか。メッセージと白を貴重とした ページ 全体のデザインから、信頼できそうな印象が伝わってきます。
サービス内容を文章だけではなく、アイコンで説明するなど、わかりやすい作りになっているのもポイントです。
4. oniguili
Webデザイナー・グラフィックデザイナーとして活動を行う、西村沙羊子 氏のポートフォリオサイトです。
シンプルなモノクロカラーでまとめながらも、個性的な レイアウト やアクセントを取り入れた遊び心のあるデザインです。作品 ページ の サムネイル 画像も全てモノクロで、 ページ 全体のデザインを損なわないようになっています。
トップページ
に各種SNSのリンクを設置しており、すぐに移動ができるのも特徴的です。
5. S5-Style
Webデザインからアートディレクションまで、多方面で活躍している田淵将吾 氏のポートフォリオサイトです。アニメーション、音楽を効果的に活用したデザインで、
ユーザー
の目を引きます。作品
ページ
の見せ方にもこだわりがあり、マウスオーバーで色が変化したり、徐々に画像を表示するアニメーションを表示したりと、様々な手法を駆使しています。
6. フリーランスデザイナー フクシマナオキ
フリーランスデザイナー フクシマナオキ氏のポートフォリオサイトです。シンプルなシングル
ページ
で、1ページ内で作品、
コンセプト
、プロフィールを全て見ることができます。コンパクトにまとめることで、伝えたいことを完結かつ確実に発信することができるのではないでしょうか。
7. Mike Ingham Design
http://www.mikeinghamdesign.com/
Web・グラフィックデザイナー MIKE INGHAM氏のポートフォリオサイトです。デスク上にアイテムを配置したようなメイン画像と、マウスオーバーした時の色の変化が美しい、オシャレなデザインです。細部までこだわっている印象を受けます。
8. normo.jp
デザイナー Yu Ishihara氏のポートフォリオサイトです。美しい波がゆらゆらと動く、インパクトの強いデザインです。文字だけというシンプルなデザインながら、1度見たら忘れないデザインとなっています。
【そのほかのデザイナー】のポートフォリオサイト
9. TAIKI KATO
アートディレクター・デザイナー TAIKI KATO 氏のポートフォリオサイトです。作品の一部を
トップページ
に表示し「VIEW MORE」ボタンをクリックするとそのほかの作品が見れるようになっています。作品画像の1つひとつが美しく、細かな説明や作成手順まで掲載しています。作品を魅力的に見せるコツを学ぶことができるのではないでしょうか。
10. TAKAYA OHTA
デザイナー タカヤ・オオタ氏のポートフォリオサイトです。
サムネイル
画像にマウスポインタを乗せると、
ページ
のトップ余白部分にデザインを大きく表示します。オシャレかつ個性的な表現が参考になります。
11. FR/LAME MONGER BARON UEDA
イラストレーター 上田バロン氏のポートフォリオサイトです。
ページ
全体にキャラクターを表示したデザインで、一目で世界観が伝わってきます。作品
ページ
を見なくとも、どんな作品を作っているのかが瞬時にわかります。たくさんのアニメーションを使用していますが、デザインに統一性を持たせているところにもこだわりを感じます。
12. mouf design
Web、グラフィック、ゲーム
UI
デザイン制作などを行う、勘村洋和 氏のポートフォリオサイトです。丸・三角・四角をふんだんに取り入れた、配色もオシャレなデザインです。1ページに全てまとめたデザインで、各作品画像をクリックすると詳細
ページ
にリンクすることができます。
13. STUDIO GRUB
グラフィック・Webデザイナー 北尾知大 氏のポートフォリオです。
トップページ
上部ではスライドショーやユニークな
レイアウト
で作品画像を見せており、興味をそそるデザインとなっています。メニューアイコンの動きなどもこだわっていてオシャレです。
14. musubime™
グラフィックデザイナー、コンセプターであるカワセ タケヒロ 氏のポートフォリオです。フィロソフィー、作品サンプル、プロフィール、コンタクトをシングル ページ にまとめたデザインです。
ポートフォリオサイトではあまり見ない縦書きの文字が特徴的で、目を引きます。画像だけではなく、文章でしっかりと思いを伝えるのも、ポートフォリオ制作において必要なのではないでしょうか。
【写真家】のポートフォリオサイト
15. 写真家 青山裕企
写真家 青山裕企 氏のポートフォリオサイトです。画像を大胆に使った
ページ
構成で「ソラリーマン」「スクールガール・コンプレックス」2つの
リンク
を配置しています。作品紹介以外にも、日記、今後の予定……とたくさんの情報を掲載しています。
16. 小林大輔写真事務所
写真家 小林大輔 氏のポートフォリオサイトは、背景に動画を使ったインパクト大なデザインです。動画背景の上に、たくさんの
サムネイル
画像で作品を紹介しており、あまり見ないデザインとなっています。
17. Takumi Taniguchi Photographer
http://www.takumitaniguchi.com/
写真家 谷口巧 氏のポートフォリオサイトです。 ページ 全体に大きく画像を配置し、ランダムに表示するようになっています。たくさんの作品をアップで見れるのがポイントです。
作品
ページ
は、個人的に撮影したものと仕事用をわけて表示しています。
18. Nagi Yoshida（ヨシダナギ）Official Web Site
写真家 ヨシダナギ 氏のポートフォリオサイトです。 ページ を表示すると全体に大きく写真が出現し、インパクトがあります。構成、デザインはかなりシンプルで、主役である写真を引き立てるものとなっています。
作品
ページ
で写真を国別にカテゴリわけしてあるのが、世界で活躍するヨシダ氏ならではです。
19. 山本タカシ : Takashi Yamamoto : Photographer
写真家 山本タカシ 氏のポートフォリオサイトは、写真が次々にスクロールする動きが特徴的です。シンプルかつ余白たっぷりの
ページ
デザインが、中央にある写真を引き立てており、つい注目してしまいます。その他のページも
トップページ
同様、中央揃えのデザインにしてあり、統一感があります。
【アーティスト】のポートフォリオサイト
20. MIDORI AOYAMA
多方面で活躍するアーティストMIDORI AOYAMA 氏のポートフォリオサイトは、
トップページ
の写真の加工だけでインパクトがあります。顔写真にポリゴン加工を施したもので、
ページ
全体も個性的なカッコいい世界観に仕上がっています。
ポートフォリオに含める コンテンツ
いざデザインのイメージが固まっても、何から作ったらいいかわからない方も多いのではないでしょうか。そこで、ポートフォリオにまずは含めるべき、最低限必要な
コンテンツ
をご紹介します。
作品
ポートフォリオサイトは自分の作品を紹介するための手段ですので、作品や実績は最も重要な コンテンツ です。数が多ければ絶対に良いとは限りませんので、作ったもの全てを載せるのではなく、自信のあるものをピックアップしましょう。また、単に画像だけを載せるよりも、制作時間や時期なども記載しておきます。
http://www.webcreatormana.com/works/
Webデザイナー Mana氏のポートフォリオサイトです。デザイン以外にも多方面で実績があることから、ビジュアルでわかりやすくカテゴリわけをして見せています。
プロフィール
自分がどのような人物か知ってもらうためにも、必ずプロフィールは書きましょう。具体的な内容としては、名前、経歴、スキル、SNS アカウント などです。また、顔写真を掲載すると信頼感を持ってもらうことができます。
http://nagi-yoshida.com/wordpress/about-nagi-yoshida
ヨシダ ナギ氏のポートフォリオサイトのプロフィール
ページ
です。経歴（受賞歴）を簡単に説明し、各種SNS
アカウント
の
リンク
、作品が購入できるページへのリンクも設置しています。
問い合わせ
ポートフォリオサイトを見て興味を持ってもらえても、問い合わせができなければ意味がありません。コンタクト フォーム を設置して、問い合わせてもらえるようにしましょう。
デザイナー 勘村洋和 氏のポートフォリオサイトです。
ページ
全体のデザインがこだわっているだけあって、問い合わせ
フォーム
のデザインにも気を抜いていません。
フォーム
の入力箇所が少なく、シンプルなのも参考になるポイントです。
ポートフォリオ作成のコツ
http://www.ashinari.com/2013/04/21-377967.php?category=279
実際に作品・実績を効果的に紹介するポートフォリオサイトを作成するためには、どういった点に注意すればいいのでしょうか。ポートフォリオサイト作成で心がけたいポイントとしては、以下の点を挙げることができます。
・わかりやすく情報が伝わるものにする
・自分が最もアピールしたい強みを強調する
・自分らしい個性で人と差をつける
・自己満足にならないよう、見ている人の視点を忘れない
・SNSを積極的に活用する
単に作品を並べるだけでは、何を伝えたいのか、ほかの人とどこが違うのかがわかりづらくなってしまいます。情報がわかりやすいデザインで、かつ自分らしさが伝わるものにすることが重要です。
ポートフォリオが作成できるサービス
1. Wix
誰でも簡単に、無料でホームページを作成できることで有名なサービスです。 HTML の知識は不要で、好みのテンプレートを選択し、ドラッグ＆ドロップでデザイン編集ができます。スマホ用サイトの対応も、もちろん可能です。
ポートフォリオだけではなく、そのほかのホーム ページ 作成にも適した、用途に合わせて選べる200以上の機能が揃っています。
Wix公式 ブログ でポートフォリオサイト作成に関する記事もありますので、参考にしてみてはいかがでしょうか。
参考：
印象的なポートフォリオサイトの作り方｜Wix公式ブログ
2. Portfoliobox
https://www.portfoliobox.net/jp
Portfolioboxは、その名のとおり オンライン ポートフォリオサイト作成に特化したサービスです。無料で始めることができ、写真家・メーキャップアーティスト・モデル・デザイナー・アーティスト・建築家に適したポートフォリオサイトが作成できます。
ギャラリー
ページ
だけではなく、販売
ページ
も作成できるのが特徴で、簡単に
オンライン
上で作品販売ができます。
3. Salon.io
ドラッグ&ドロップ操作で簡単に無料で作品が公開できる、ポートフォリオサイト作成サービスです。コードの知識は不要ですが、
HTML
・
CSS
をコードエディターで追加することもできます。
テキスト
ボックスを作って組み込みコードを貼付けるだけで、簡単に組み込みも可能です。無料サービスにありがちな「
広告
表示」が一切ないのも大きな特徴です。
まとめ
以上、ポートフォリオサイト20選をご紹介しました。いかがでしたでしょうか。
主にクリエイティブな職種の方にとって、自分のスキル・活動歴を伝えるのに有効な手段の1つがポートフォリオサイトです。
あくまで作品がメインとお考えの方も多いでしょうが、肝心のポートフォリオサイト全体のデザインが悪ければ、せっかくの作品紹介も台無しになってしまいます。
デザイン性の高いポートフォリオサイトにするためにも、優れたデザインを参考にしてみてください。