WebデザイナーやWebディレクター、アーティストやクリエイターには欠かせないポートフォリオサイト。

ポートフォリオサイトの作り込みは、自身の仕事のお問い合わせの数に大きく影響を与えます。

特にフリーランスのような、個人の名前で食べていく人たちにとっては、いかに自分の魅力を届けたい相手に届けるかが問われます。

どこかで見たことあるようなものではなく、印象に残るようなポートフォリオサイト。

今回は、これからポートフォリオサイト制作を検討している方に向けて、参考にしていただきたい、ハイレベルなポートフォリオサイトをまとめてみました。

👉Webデザイナーとして、これから転職や独立を目指す方へ

 

Web/グラフィックデザイナー・ディレクターのポートフォリオサイト

まずはWebデザイナーやグラフィックデザイナー、Webディレクターの方のポートフォリオサイトを紹介します。

 

maima.me

Webデザイナー、ディレクターとして活躍される、Mai Imakitaさんのポートフォリオサイト。星野源さんやHERMES、伊勢丹などのWebサイトを手がけられています。

白をベースに極限までムダを削ぎ落とした、シンプルなポートフォリオサイトなので、スクロールするだけで手がけられた作品の魅力がストレートに伝わってきます。

各作品をクリックすると、一緒に携わったスタッフのクレジットも書かれており、一緒に働くスタッフへのリスペクトが伝わります。

 

TAKAAKI ISHIKAWA

都内のWebプロダクションでアートディレクター・デザイナーとして活躍される、TAKAAKI ISHIKAWAさんの個人プロジェクト「design studio drop.」のWebサイトです。

トップのアニメーションから惹きつけられます。作品とWebサイトの世界観がマッチしているのはポートフォリオサイトにおいて大事な要素だと感じさせるデザインです。

シンデザイン

東京都小金井・国分寺にてフリーランスWebデザイナーとして活動するShin Design（シンデザイン）さんのWebサイトです。

ポートフォリオページでは過去制作サイトのバックグラウンドやこだわりの紹介など、丁寧な仕事ぶりの伝わるWebポートフォリオとなっています。フリーランスのWebデザイナーを目指す方は参考にしてみるとよいでしょう。

TNGC GRAPHICS

フリーランスWebデザイナーのTNGC GRAPHICSさんのWebサイト。

Web制作会社との違いや、自分たちの強みがわかりやすくまとめられています。キャッチーな色使いのイラストに親近感がわきます。

制作実績パートも多く作品が掲載されており、安心感があります。また、依頼後の流れやFAQコーナーも設けられていることで、Webサイト探しをしているユーザーにとっての悩みも解決できる作りになってるのも魅力的です。

 

👉ポートフォリオを作る前に、もうワンランクデザインスキルを上げたい方へ

 

遠水イッカン

Webだけでなく、DTPや動画制作のプランニングやディレクションまで広くカバーする遠水イッカンさんのWebサイト。

過去のポートフォリオだけでなく、趣味であるカレーについてや、仕事をする上でのこだわりについても、独自の切り口で書かれています。

誰かと同じではなく、自分の言葉と世界観で構築されたWebサイトを作りたい方は、刺激を受けるサイトといえるでしょう。キャッチコピーやビジュアルづくりの切れ味が光っています。

UNDERLINE

フリーランスとしてWebデザインやディレクション、コーディングを手がけられている徳田優一さん（屋号：UNDERLINE）のポートフォリオサイト。

トップのファーストビューから、大事にしている価値観と、どんな領域で活躍されているのかが即座にわかる、理想的なサイト構成となっています。

また、ご自身の写真がトップに掲載されていることで、ユーザー視点では安心感が伝わります。実績パートについても、ビジュアルが大きく、インパクトがあります。ブログが定期的に更新されているのも、人となりが伝わるので、好印象です。

フリーランスのWebデザイン領域で活躍したい方にとっては、ぜひとも参考にしていただきたいサイトです。

Webデザイナー向け「ポートフォリオサイト」の作り方・デザイン

BUROKI

大阪のフリーランスデザイナー、黒木 大輔（屋号：BUROKI design）さんのポートフォリオサイト。

こちらのサイトの特徴はなんといっても、コンテンツの更新頻度が高いこと。デザインについてのTIPSや、大阪のエリア情報などを細かくブログとして更新されています。

ポートフォリオサイトは作って終わりではなく、随時更新することが大事だと実感するサイトづくりとなっています。

また、ポートフォリオパートについても「お客様の声」が載っている点も、信頼感を持てます。

コンテンツの更新はSEO効果も見込めますし、効果的にWebを通じて集客をしていきたいフリーランスデザイナーにはかなり参考になるサイトといえるでしょう。

ひつじウェブ

大阪のフリーランスWebデザイナーによるポートフォリオサイトです。

フリーランスで「Web制作×Web集客」を打ち出してポートフォリオサイトを作りたい方にとっては、参考になるサイトでしょう。

提供しているサービス内容が明確なのがひつじウェブさんの魅力です。過去実績についても、どんなサービスを提供したのかがまとめられています。

TAKAYA OHTA

CI/VI領域に強みを持つデザイナー／アートディレクターであるタカヤ・オオタさんのポートフォリオサイトです。

サイトはシンプルに過去実績が並んだ作りとなっており、クリックすることで、各作品の裏側のこだわりが丁寧にまとめられています。

ブログについては外部サイトへのリンクで設置されています。デザインのプロセス画像なども含まれているのが、実際にどのように作品をつくるのかがイメージしやすいです。

オニギリ 西村 沙羊子

ニューヨーク在住のフリーランスデザイナー、西村さんのWebサイト。

モノクロで構成されていますが、カーソルをあわせると各作品に色がつくようになっており、作品がより魅力的に見えます。

作品ページや各SNSへのリンクがわかりやすく設置されているため、サイト内外でいろんなページを見たくなるようなデザインとなっています。英語版サイトも作られているようです。

フォトグラファーのポートフォリオサイト

続いて、フォトグラファーのポートフォリオサイトを紹介します。

 

👉ポートフォリオを作る前に、デザインの基礎を固めたい

 

青山裕企

写真家の青山裕企さんのポートフォリオサイト。

トップではビジュアルが時間の経過と共に変わっていくスタイル。各種連絡先やSNSの情報だけでなく、掲載雑誌や個展の告知、通販サイトへのリンクなど、ポートフォリオサイトにとって必要な情報がわかりやすくまとまっています。

土田凌

フォトグラファーの土田凌さんのポートフォリオサイト。

まず、サイトを開いた瞬間、美味しそうなトマトの写真が画面いっぱいに飛び込んできて、一気に引き込まれます。フォトグラファーらしい、写真の魅力が最大限まで伝わるようなサイトデザインとなっています。

ギャラリーとしてWebサイト上で大サイズで写真を見られるようになっており、見ているだけでわくわくしてくるようなサイトです。

小林大輔写真事務所

広告写真を中心に活躍される小林大輔さんのポートフォリオサイト。

フォトグラファーのWebサイトには珍しく、音ありの動画がトップページで流れるようになっており、活気のある撮影現場の様子が伝わってきます。

また、掲載されている写真・作品の枚数が非常に多く、幅広い作風が伝わってきます。

中村力也

フォトグラファー中村力也さんのポートフォリオサイト。

過去のポートフォリオが人や本、旅行写真など、ジャンルごとに閲覧できるようになっています。

大サイズで写真を見ることができ、一枚一枚を見入ってしまうようなデザインとなっています。

また、サイト内のフォントやトーンも作品とマッチしたものが採用されて、独自の世界観が表現されています。

Ittetsu Matsuoka

写真家 松岡一哲さんのポートフォリオサイト。

ページをスクロールすると背景の写真がランダムに流れるようになっており、ひたすらスクロールしたくなるような、不思議な魅力のあるサイトです。

スクロールしたときに写真と共に流れる花びらのようなエフェクトがどこか儚さとあたたかさを感じさせます。

トップのボタンは「Work」と「About」のみというシンプルな作りながらも、インパクトが大きいサイトデザインです。

映像制作・映像作家のポートフォリオサイト

続いて、映像制作に携わる方や映像作家のポートフォリオサイトを紹介します。

 

👉ポートフォリオを作る前に、デザインの基礎を固めたい

 

山田智和

米津玄師の「Lemon」やサカナクションの「years」などのミュージックビデオを手掛けたことで有名な映画監督、映像作家 山田智和さんのポートフォリオサイト。

黒を基調としたデザインで、全体的にシックな雰囲気があります。

RYOJI YAMADA FILM

映像クリエイター・アニメーションアーティストの山田遼志さんのポートフォリオサイトです。

サイトをスクロールすると、音声とともに過去の山田さんプロデュースのフィルム映像が再生されるようになっており、唯一無二の世界観を生み出します。

クリックすることで、各映像のYouTube動画へのリンクが開くようになっています。

小暮哲也

フォトグラファー、シネマグラファーとして活躍される、小暮哲也さんのポートフォリオサイト。

トップでは、画面いっぱいに小暮さんの映像が次々と流れていきます。

スクロールすると各作品をたくさんの写真と共に見られるようになっています。全体的にポップな雰囲気でサイトがデザインされており、あたたかみのある小暮さんの作風をさらに魅力的に見せるポートフォリオサイトとなっています。

小高雄平

フリーランスのビデオグラファー、小高雄平さんのポートフォリオサイト。

各作品をクリックすると、Vimeoの大画面で映像を再生できるため、その美しい映像の魅力が伝わりやすいです。

また、仕事依頼後の流れやFAQなども網羅されているため、Webサイト上で気になるポイントを把握できる点もユーザーとしてはありがたいでしょう。

瀧本幹也

映画「そして父になる」「海街diary」の撮影監督しても有名な瀧本幹也さんのポートフォリオサイト。

年代ごとで作品を振り返られるようになっており、過去の作風の変化が見てとれます。

CGクリエイターのポートフォリオサイト

続いて、CGクリエイターのポートフォリオサイトを紹介します。

YUUKI MORITA

フリーランスのCGクリエイター、YUUKI MORITAさんのポートフォリオサイト。

ArtとDesignと2つから見たいほうを選び、関連したCG作品を見ることができます。美麗なCGクリーチャーを細部までWeb上で見ることができるのは、ありがたいですね。

 

CGデザイナーのポートフォリオの作り方。おすすめの内容やサイトを紹介

ポートフォリオサイト作りのポイント

ポートフォリオをこれまで紹介してきましたが、ポートフォリオサイトのデザインを考える上で重要なポイントをいくつかまとめておきます。

 

1. TOPのビジュアルにインパクトがあること
2. 自分が何者なのかわかる自己紹介があること
3. 問い合わせフォームがあること
4. 提供サービスの内容がわかること
5. 他のサイトとは違う、独自の世界観があること
6. 定期的に更新されていて、最新情報が載っていること
7. SNSへのリンクなどがあり、サイト外でその人の情報をキャッチアップできること
8. ターゲットに響くキャッチコピーがあること
9. サイト全体のトンマナが揃っていること
10. 人となりが伝わること
11. お客様の声が載っていること
12. ビジュアルだけでなく、裏側のこだわりが載っていること
13. サイトデザインが見やすく、作品に集中できること

その他にも重要な要素はたくさんありますが、自分が届けたいターゲットに合わせて、大事にしたいことを決めてからサイトを作るようにしましょう。

ポートフォリオサイト作成のポイントについては、以下の記事も参考にしてみてください。

 

【徹底解説】ポートフォリオにおける自己紹介プロフィール作成時のポイントとは

【未経験者向け】ポートフォリオの作り方を解説。職種ごとのポイントやWebと紙の違いも

 

 

👉ポートフォリオを作る前に、デザインの基礎を固めたい

 

ポートフォリオサイトに載せる作品をまずは作りたい・増やしたい方へ

ポートフォリオを作ったとしても、そこから仕事をとれるようになるには、まずは作品のクオリティアップが欠かせません。営業活動やマーケティングの前に、まずは基礎スキルの向上が重要。

クリエイターとして歴が浅い方は、まずは、自身のスキルアップに注力し、納得がいく作品が作れるようになりましょう。

せっかくたくさんの数の作品を作ったとしても、届けたい人の記憶に残らないものでは望むような成果には繋がりません。

 

そこで、「まだまだ正直レベルアップしたいフェーズだ」という方におすすめしたいのが、デジハリ・オンラインスクールです。

 

デジハリオンライン・スクールは、好きなときに好きな場所でクリエイターになるための勉強ができるスクールです。

数多のクリエイターを輩出してきたデジタルハリウッドがプロデュースする、オンラインの学校。近くにデザインスクールがない方にもおすすめです。

まずは以下のリンクから、講座情報をチェックしてみてください。

将来の夢や目標に向かって挑戦する方をデジハリオンラインは全力で応援します！

 

デジハリ・オンラインスクール👍