おしゃれなポートフォリオサイトの参考事例 23 選：国内外のクリエイターまとめ
この記事は 2016 年 9 月 25 日に公開、2022 年 11 月 24 日に更新しています。
クリエイター、写真家、イラストレーターなど、個人で仕事をしている人にとって、ポートフォリオサイトはギャラリーと同じく、自分の作品を紹介する手段のひとつです。ギャラリーや美術館に作品を展示するとなると、どうしてもキュレーターやディーラーといった第三者の目が必要になるのに対して、ホームページを自作すれば自分の作品を理想の形で紹介することができます。
「ポートフォリオサイト」として知られるアーティストの個人サイトは、クリエイティブな仕事をしているプロにとって欠かせない存在です。新しいオーディエンスに自分のことを知ってもらいファンを増やすのはもちろん、サイト上で作品を販売することだってできます。ハッとするような魅力的なビジュアル、見る人を引き込むコピー、そして高度なマーケティングツールを組み合わせることで、ビジネスを効果的にアピールできるサイトが完成します。
この記事では、世界各国のクリエイターやアーティストが作成したおしゃれなポートフォリオサイトの中から厳選したものを紹介します。訪問者を惹きつける Web デザインのコツを知りたい人も、デザインのインスピレーションを得たい人も、ぜひ自身のポートフォリオ作成の参考にしてみてください。
良いポートフォリオサイトデザインとは？
良いポートフォリオとは、自らの作品を魅力的に紹介し、見栄えの良いポートフォリオサイトであるだけでなく、目的を達成することができるサイトのことです。ポートフォリオサイトを作成する目的はなんでしょうか？
「お問合せフォームから仕事の依頼を増やしたい」「転職活動に利用したい」「 SNS で拡散してもらいたい」といったゴールを設定し、ポートフォリオサイトに訪れた人が、スムーズに必要な情報にアクセスできるようにデザインしましょう。 ポートフォリオサイトには見せ方のコツがあります。自分のサイトのデザインを始める前に、よくある失敗例にも目を通し、戦略的にポートフォリオサイトを作成しましょう。
ポートフォリオサイト制作について知っておくべき 5 つのヒント
魅力的な事例について説明していく前に、まずはポートフォリオサイトを作成する際に覚えておきたい簡単なヒントをいくつか紹介します。
ポートフォリオサイト用テンプレートから作成： テンプレートを利用すれば、すぐにポートフォリオサイトが作成できます。テンプレートには、クリエイターとしての成功につながる基本機能がたくさん含まれており、カスタマイズも自由自在。
サイトにプロフィールページを追加： あなた自身のことやプロとしての経験、実績を訪問者に知ってもらいましょう。プロフィールページを充実させることで、仕事につながる可能性を高めることができます。
ソーシャルバーを追加して SNS アカウントをアピール： 訪問者があなたに気軽に連絡できるよう、サイトに SNS アカウントをリンクしましょう。また、問い合わせのページを追加することもおすすめです。
フォトギャラリーを追加して作品を視覚的に紹介： ポートフォリオサイトには美しい画像の掲載が必須です。Wix のプロギャラリーなら、多くのレイアウトデザインがあり、ギャラリーを自在にカスタマイズできます。こちらの記事も参考にして自分の作品に合ったものを探してみましょう。
自分の作品に合ったカラースキームを選択： カラースキームを統一することで、洗練された雰囲気のポートフォリオサイトに仕上げましょう。パステルカラーからモノトーンまであらゆるカラーのサイトが揃った、デザインが素敵なポートフォリオサイトの事例も参考にしてみてください。
おしゃれなデザインのポートフォリオサイト参考事例
NFT からイラスト、写真まで、美しく戦略的なデザインのポートフォリオサイトを 20 サイト以上にわたり紹介します。いずれのサイトも、作品が印象的なのはもちろん、デザイン性にも富んだものばかりです。いいと思うデザインが見つかれば、ぜひ自身のサイトに取り入れてみてください。
01. Zaria Forman
画面いっぱいに表示された絵画の画像が目立つ、Zaria Forman さんのポートフォリオサイト。完成間近の大きなキャンバスに向かう彼女の姿は、訪問者に「サイトで紹介されている他の作品も見たい」と思わせるだけの強烈な説得力とインパクトを放っています。彼女が得意とする超写実的なスタイルを見事にあらわしているのはもちろん、絵画を白いフレームで囲っていることですっきりと見やすいデザインに仕上がっています。
Zariaさんは、地球の気候変動をテーマにパステル画を制作しているアーティスト。サイトではナビゲーションメニューを充実させ、世界のあちこちで描いた自身の作品を簡単に閲覧できるようにしています。
02. Karen J. Revis
アート自体にすでに多くの要素が詰め込まれている場合は、ミニマルな Web デザインが最適です。版画家の Karen J. Revisさんの作品はユニークな質感と鮮やかな色遣いが特徴で、このポートフォリオサイトでは、使いやすさと見やすさを重視したシンプルなレイアウトで自身の作品を紹介しています。
サイトはシンプルなデザインながら、作品ギャラリーや経歴などに加え、ネットショップへのリンクも張られており、訪問者は Karenさんのオリジナル作品をオンラインで簡単に購入することができます。
03. Louise Hourcade
パリを拠点に活動する Louise Hourcadeさんのサイトは、カスタマイズされたスプラッシュページが特徴。サイトを開くとまず生き生きとしたデザインのスプラッシュページが表示され、クリックするとポートフォリオサイトのトップページに移動します。サイト上では作品がギャラリー形式にまとめられ、見やすく整理されています。
白を基調としたサイトは、彼女が描くダイナミックなイラストと相性抜群。フォントカラーにも黒や赤など強い色を使用しているため、白い背景の上でカラフルなイラストと文字が引き立っています。
硝子作家の丸岡 勇太さんのサイトは、余白を大切にした美しい空間が特徴です。白を基調として、余計な色を取り除いたポートフォリオデザインとシンプルなラインのメニューは、作品の印象を邪魔しないように構成されています。
メニューの 757 glass mill をクリックすると、工房の詳細がフェードインで表示されます。なめらかな動きのあるポートフォリオデザインと、プロジェクトごとに異なるギャラリーを活用して作品を引き立てています。
05. 中田写真事務所
写真撮影を専門とする会社、中田写真事務所は、ポートフォリオを利用したホームページです。ホームページトップでは、スライダー形式のギャラリーが時間と共に移り変わります。
ロケーション撮影に特化した出張撮影サービスのナナイログラフを紹介するページでは、パララックスエフェクトを見事に使いこなしています。スクロールダウンすると、背景写真の空間が 3D のようになり、上に重ねられたロゴが視覚的に面白い効果を発揮しています。
06. 白井図画室
イラストレーター 白井 匠さんのホームページは、サイトに入ると全実績が画面いっぱいに広がります。ポートフォリオとして活用しているのは、グリッド機能の中のメーソンリー表示で、見やすくすっきりとしたデザインです。それぞれの作品には実績の詳細が記載され、訪れた人の目を意識したポートフォリオとなっています。
白井図画室のメニューはフィルターとして機能しており、これまでの実績をカテゴリーごとに探すことができるようになっています。
複数の作品を紹介するのにぴったりのフルスクリーンスライドショー。この機能を見事に使いこなしているのが、アーティストの Ellen Von Wiegandさんのホームページです。また、このサイトではマーケティングに効果的な仕掛けもうまく使用されています。サイトを開くと美しいイラストが描かれたライトボックスが表示されるので、思わずメルマガを購読したくなってしまいますよね。
08. Asya Lisina
Asya Lisinaさんのポートフォリオサイトは、ディテールまで繊細に描かれた、どこかファンタジックなイラストが目を引くデザイン。下向きのピースサインに目を描いた Asyaさんのカスタムロゴは、サイトのブランディングとしてだけではなく、ナビゲーションメニューで移動したときの（現在位置を示す）ガイドツールやファビコンとしても使われています。また、モダンなサンセリフフォントが、芸術的かつおしゃれな雰囲気を醸し出しています。
09. Charly Palmer
サイトを開くと流れる背景動画、メッセージ性の高いコピー、巧みなアニメーション使いなど、どこを取ってもおしゃれで気分が上がる Charly Palmerさんのポートフォリオサイト。動画には Charlyさんの制作風景も含まれており、それぞれの作品ができるまでの過程を垣間見ることができます。Web デザインの原則をふまえてサイトを見てみると、Charlyさんはこのサイトで、動き、視覚的な階層、シャープなカラーコントラストなど、かなりの数の要素を取り入れていることがわかります。
10. Lisa Brandon
さまざまな分野で活躍するアーティスト、Lisa Brandonさんのポートフォリオサイト。トレンドを取り入れたスタイリッシュなデザインと背景のダークカラーは、既成の概念にとらわれない、モダンでシックな彼女の作品にぴったり。クラシックなセリフ体フォントも、サイト全体の雰囲気と見事に調和して独自の雰囲気を醸し出しています。
11. David Milan
サイトのあちこちに散りばめられた手書きのカラフルな文字が目を引くサイトは、ハンドレタリングアーティストの David Milanさんのもの。ロゴデザインから使用するフォント選び、色使いまで一貫したトーンでブランディングが行われているのがわかります。こうして自分のポートフォリオサイトで個性を存分に発揮することで、その個性的なスタイルに共感してくれるユーザーを惹きつけることができます。
12. Lirona Ashkenazi
小さなディテールがいかに大きな役割を果たすかを教えてくれる、Lirona Ashkenaziさんのポートフォリオサイト。大きなフォントと、訪問者に語りかけるような口調のメッセージは、アーティストとしての彼女の自信をあらわすだけでなく、見る人にとって非常に魅力的なアプローチでもあります。トップページに設置されたグリッドギャラリーは、大きなサイズの画像を使用したゆったりとした配置が特徴。各画像をクリックすると、特定のプロジェクトに関する詳細情報を記したランディングページが表示されるようになっています。
13. Irina Pandeva
単なるアーティストのポートフォリオだけではなく、彼女の芸術的なマインドも垣間見ることができる Irina Pandevaさんのサイト。ブログを活用して、芸術の探求に関する記事や詩などを投稿しています。ポートフォリオサイトにブログを開設することで新しい顧客とつながり、あなたの作品についてより多くのインスピレーションを提供することができます。
Piergiorgio Del Benさんのサイトは、彼が描いたキャンバス画が大きく表示されるのが特徴です。独特のスタイルの絵画を間近で見ることができる、アート好きやファンにはたまらないデザインです。
ポートフォリオサイトは、厳選した画像を掲載して自分の作品を存分にアピールするための場です。スライドショー、個々の画像、ギャラリーなど、作品を最も大胆かつ魅力的に見せてくれるレイアウトを選んで、アートに興味のある訪問者を魅了しましょう。
14. Lili Arnold
手書きのロゴからナビゲーションメニューやテキストの色まで、トロピカルな配色をまとった Lili Arnoldさんのサイトは、植物を中心とした彼女のアートの精神を見事に反映しています。ありとあらゆる色が使われているにもかかわらず、カラフルな色が混ざり合って調和のとれたデザインに仕上がっているのが特徴です。全体のバランスを整える白い背景もポイント。
15. Jessica Bearden
カラフルな自画像が目立つ Jessica Beardenさんのサイト。今回紹介している事例はどれも優れたものばかりですが、その中でもひときわ目を引くポートフォリオサイトに仕上がっています。見どころはやはり、サイトの背景画像になっている彼女の自画像。一目で惹きつけられるビビッドな色使いはもちろん、よく見ると絵ではなく「物」でできており、しかもアニメーションで動くというのも驚きです。幅広デザインのヘッダーもこのビジュアルをさらに引き立てるパーツのひとつ。ヘッダーから、作品一覧、問い合わせ先、Instagram フィードなどのページに移動して、彼女が作り出す世界観をより深く知ることができます。
16. Timothy Goodman
ニューヨークを拠点に活動する Timothy Goodmanさんのサイトは、明るい黄色の背景に黒と白のテキストを組み合わせたデザイン。躍動感を感じさせる生き生きとした色の組み合わせで、サイト上の重要な情報を際立たせています。また、プロフィールページ（About）では、経歴、プロフィール画像、顧客の一覧、連絡先など、それぞれのセクションで黒、黄、白のカラーブロックを使い分けてコンテンツを見やすく配置しています。
17. Paul Octavious
写真家の Paul Octaviousさんは、サイト上で大胆なデザインを採用する一方で、実用的なデザインの原則を守ることで使いやすいサイトに仕上げています。ショップサイトでは、レインボーライトを使用してかわいい犬の写真を撮影するフォトセッション、「Rescue Rainbows」の予約を受け付けています。
18. Dayday Key
さまざまな要素を詰め込んだ楽しいサイトがお好みなら、Dayday Key さんのサイトからインスピレーションが得られるはず。アニメーション、グラデーションデザイン、鮮やかなネオンカラーのアクセントに加え、大胆な90 年代風のデザインを採用しています。Web デザインのトレンドを取り入れすぎるとやり過ぎ感が出てしまいがちですが、こちらの Keyさんのようなスタイルなら、訪問者の注目を集めるだけでなく、クリエイターとしての自分の感性も併せてアピールすることができます。
19. Ruifa Zenda
立体的な影絵からユニークな画像やアニメーションまで、Ruifa Zendaさんの印象的なサイトには、シンプルながら計算しつくされたエフェクトがたくさん。作品ページには、多彩なスキルとスタイルを持つ彼が、これまでのキャリアの中で制作した多種多様な作品が展示されています。ポートフォリオサイトを作成するなら、この例のように作品サンプルを豊富に掲載し、自分のプロとしての経験を訪問者にまとまった形で伝えられるページを作っておくことが重要です。
20. William LaChance
パララックススクロールと動画という最強の組み合わせを斬新に活用しています。William さんのように非対称のレイアウトをプラスすれば、ほかにはない印象的なデザインに仕上がります。このサイトの最大の特徴は、奇抜なデザインでありながら同時にバランスが取れていること。ウェブサイトの階層の原則にならって、最も重要な要素に最初に目がいくよう設計されています。
Daniel Aristizabalさんのサイトは、黒一色の背景上にさまざまな作品のイメージが表示される個性的なレイアウトが特徴です。それぞれのブロックにアニメーションを加えることで訪問者を魅了し、スクロールを続けてもらうことができます。また、フルスクリーンで表示される作品を目立たせるよう、ハンバーガーメニューを使用してナビゲーションを表示しているのもポイントです。こうすることで、作品を表示するためのより大きなスペースを確保しつつ、問い合わせフォームやプロフィールページ、SNS アカウントといった重要なページへのリンクをまとめて設置することができます。
22. Hedof
Hedof は、Rick Berkelmansさんによるイラストレーションスタジオで、The New York Times、YouTube、Facebook など、名だたる企業を顧客に持っています。ライトグレーの背景は、よくある白背景のサイトと差別化したいときにうってつけの選択肢です。Hedof のネイビーブルーのロゴとの相性も抜群です。
23. Pierre Brault
幾何学模様の魅力的な映像が出迎えてくれる、Pierre Braultさんのポートフォリオサイト。自身のアートのスタイルに合わせて近未来的なフォントを使用しています。ナビゲーションメニューにマウスオーバーすると、ドロップダウンが現れるのも粋なデザイン。訪問者が必要なものをすぐに見つけられるだけでなく、サイトに洗練された雰囲気も与えてくれます。
まとめ
いかがでしたか？
準備ができたら、さまざまなサイトを見て得られたインスピレーションをもとにポートフォリオサイトを作成し、自分の作品を理想的な形で紹介してみましょう。
Wix なら、豊富なポートフォリオテンプレートのなかから、気に入ったものを自由にカスタマイズして理想のサイトをスピーディに作成できます。魅力的なサイトに仕上がったら、URL を名刺に記載したり、クライアントにサイトのリンクを送って実績を簡単にアピールすることができます。さらに、偶然サイトを見た企業などから新規の仕事依頼を獲得できる可能性も高まります。
分野別のサイトを紹介した以下の事例記事も併せてご覧ください。
編集者：Miyuki Shimose
ブログ コンテンツマネージャー
