海外のクリエイターから学ぶ！デザイン性に優れたポートフォリオ 15 選
ポートフォリオは、デザイナーや芸術家、または写真家や Web 制作者など、視覚的なコンテンツを発信するクリエイターにとって、自分の個性やセンス、スキルをアピールできる絶好の場です。
これから紹介する才能溢れる 15 名のクリエイターは、ポートフォリオを作成するにあたり、自分のコンテンツにぴったり合った効果や機能をサイトへ実装しています。たとえば、パララックス効果やライトボックス、フォトギャラリーやソーシャルバー、お問い合わせフォームに至るまで、多様なアイデアをサイトへ施し、印象的でデザイン性に富んだ完成度の高いサイトに仕上がっています。
世界で活躍するクリエイターが作成するこのようなポートフォリオサイトを参考にすることで、Web デザインへの新しい発想や新しい切り口を見つけることができるかもしれません。
本記事では、デザイン性に優れたポートフォリオ 15 選を紹介します。
01. David Milan
この Web サイトの大部分は、フォトギャラリーで構成されています。作品を敷き詰めたレイアウトが美しくインパクトを放ち、主に画像の量が多く、それを全面に出した作品の見せ方をしたい場合に参考となる構成です。また、オリジナル性溢れるロゴと「HOME」「ABOUT」「CONTACT」の 3 つから成るシンプルなメニューバーを配置することで、仕事を依頼する側にとって作成者の目的が明確に伝わり、理解を深めることができるでしょう。
グラフィックデザインおよびブランディングに携わる制作会社のサイトです。サイトを開くと同時にアニメーション効果を用いた箇所が目につきますが、単に目立つというだけでなく、作成者が意図する箇所へ目線を誘導しアクションを促す役目を果たしています。そして、プロジェクトごとに分別された画像をクリックすると、さらなる魅力が伝わる画像と詳細で、作品に対してより深い理解を得ることができます。ビジネスにおける個々の要素を強調するための素晴らしい例と言えるでしょう。また、「About」ページには、スタッフの顔写真も掲載されており B to C 向けにビジネス展開していることから、信頼性を感じさせる工夫も施されています。
03. Annie Atkins
サイトに入ると同時に、「メールマガジン購読」を促すライトボックスが表示されます。ライトボックスは、ブログ購読や問い合わせ、セール商品の宣伝や新商品のお知らせなど、訪問者にアクションを促す場合に役立つ機能です。グラフィックデザイナーである彼女は、ワークショップやスピーカーとしてのイベントも開催しています。彼女のように複数の活動をしている場合、作品を見せる「Gallery」、イベント詳細を知らせる「Workshops」「Speaking」のように、サイト上部のメニューで明確に分けることにより、ユーザーが欲しい情報を容易に見つけることができ、操作性に優れたサイトを作成できます。
04. Reut Chen
サイトを開いたときに一番最初に目につくのが彼女の簡単な自己紹介文です。活動拠点とデザイン分野を短く３行にまとめ、訪問者がある程度のイメージを予め持ちながらサイトを閲覧できるように工夫しています。また、各画像にホバー効果を使っているため、マウスオーバーするとプロジェクト名が表示されます。プロジェクトをクリックすると、画像の並べ方やサイズなどにこだわりを持ち、いかに自分の作品を引き立たせるか考え抜かれた構成になっていることが分かります。作品以外のページに目を向けてみると、「About」ページは、見る人にとって気の散ることのない適切な範囲の躍動感を盛り込んだページで、ユーザー体験の向上をはかっています。
05. Pilgrim Creative
グラフィックデザインのスキルが活かされた自身のロゴをサイトの中心に配置。オリジナリティのあるサイトとして見る人に強く印象づけます。ポートフォリオだけでなく、サイトの至る所に彼のオリジナルデザインのアイコンが使用されているため、視覚的なインスピレーションを得るために参考となるサイトです。また、サイト上に開設されているネットショップは、購入完了までの明確なナビゲーションと万全のセキュリティ対策が施された Wix ストアを活用しています。
「Floating Llama（浮かぶラマ）」という名前の通り、サイトを開くとアニメーション効果を用いたラマがふわっと現れます。このデザインスタジオは、斬新でクールなデザインをアピールした Web サイトが多い中、可愛らしく親近感を覚えるようなアプローチをしています。また、「Testimonials」には、クライアントの顔写真とクライアントの声を一緒に掲載することで、信頼度だけでなく、好感度も高まる仕上がりになっています。
07. Nathalie Lété
イラストレーターとして活躍する彼女のサイトは、「Home」ボタンから署名ロゴまで、サイト上の至る所にオリジナルのデザインが使われています。サイトの背景をスケッチブックを意識したデザインにすることで、彼女の素敵なイラストの数々と調和の取れた一貫性のある仕上がりとなっています。自身の世界観を表現できている素晴らしい例と言えるでしょう。
08. June Digan
ファッションデザイナー兼イラストレーターである彼女のデザイン作品は、手書きロゴとでも呼べるかのように個性が反映され、印象強く描かれています。サイトは、カラフルなイラストとコントラストを出すためにホワイトスペースを適切なバランスで活用し、作品に目線が行くように工夫が施されています。また、ファーストビュー（スクロールせずに表示される範囲）には、ロゴ、メニュー、そしてメインのイラスト、といった基本的でありながら重要な要素のみを配置し、シンプルな構造でわかりやすい構成に仕上がっています。
09. Nim Ben-Reuven
デザイナーでありレタリングアーティストとしても活躍している彼のサイトは、白を基調にしたレタリングで魅力的なタッチを加え、自身の専門分野を上手にアピールしています。適切なバランスでディスプレイされた動画と画像にも、彼のレタリングを入れることで、さらに印象的な作品イメージを創り上げています。センスと技術力の高さが垣間見れる、動きのあるインタラクティブなサイトと言えるでしょう。
10. Hollie Fuller
イラストレーターである彼女のサイトは、見る人の注目を引くGIF アニメーションを配置してアクセントを付け、シンプルさの中に遊び心を盛り込んでいます。ディスプレイするイラストは同じ色味を使ったイラストを選ぶことで統一感をはかり、さらには、あえて異なる表示サイズにすることで変化をつけ、見せ方に工夫を施しています。サイト構成はシンプルに、「About」と「Store」のみで、興味を抱いた訪問者がより多くの作品やプロフィールへアクセスできるよう、SNS アカウントを設置し、無駄のないミニマルなレイアウトで視認しやすい仕上がりです。
11. Loopick
ロゴデザイナーである彼のウェルカムページは、オリジナルロゴにアニメーションの動きを加え、驚きと発見を与えてくれるかのようなインパクトの強いビジュアルです。力強い第一印象を受けた訪問者は、次に、ホワイトスペースを上手に活用した彼のポートフォリオでさらに魅了されるでしょう。全体的に見て Web デザインのスキルの高さが伺えます。いかにサイトの印象が大事であるかを学べる素晴らしい例と言えるでしょう。
この Web サイトには、多くの機能が実装されているため参考になる点が多いサイトです。まずは、３D のような奥行きや遠近感を与えることができる「パララックス効果」でサイトにダイナミックな印象を追加しています。次に、サイト上に自動表示されるポップアップ「ライトボックス」を活用しています。この機能は、メルマガ購読など訪問者に特定の行動を促す役目を果たします。最後は、問い合わせページです。問い合わせページは通常 1 つのフォームが設置されることが多いですが、このサイトの「Contact」ページには 3 つの連絡方法が用意されており、訪問者の希望に沿った連絡方法を選択できます。
アートディレクターである彼のサイトは、実に多くの色彩を使用しているにもかかわらず、乱雑な見栄えではなく、カオスを魅力的に見せるスキルを用いて見るべきところへ焦点が定まるようデザインされています。「OVERVIEW」と「PORTFOLIO」は派手な色使いをしている一方、「INFO」と「CONTACT」は、見る人の気が散らないように、そのページの目的だけを載せ、色のトーンダウンを意図的に行っています。
14. Sasha Pivovarova
アーティストとして有名メディアで活躍する彼女のサイトのオープニング動画は、人々の興味をかき立てる究極の動画に仕上がっています。画面全体を駆使したこの動画は、使用する色を黒と白だけに絞り、訪問者に不必要な情報や先入観を持たせないよう考え抜かれて制作されています。訪問者の注目を集めるためのヒントが隠された参考となる優れたサイトです。
15. Justin Lemmon
ファーストビューに現れるインパクトの大きな動画は、目のそらすことのできない魅力的なコンテンツとして訪問者の心を掴むでしょう。スクロールして次に目にするのはモーショングラフィックデザイナーとしての彼が提供するサービスの種類、そしてこれまで手掛けた数々の素晴らしいプロジェクトです。静止画と躍動感ある GIF アニメーションのバランスがさらに作品の魅力を増します。また、サイト構成は、Web デザイントレンドでもある、1 ページで完結するシングルページサイトを採用しています。所在地の地図やお問い合わせフォームも含む、段階を踏んだ優れた階層です。サイトの印象を重要視したアプローチで、見ているだけで新しい発想がわいてくるような魅力的なサイトです。
まとめ
あなたのポートフォリオをカッコよく魅力的にみせるアイデアは見つかりましたか？豊富なポートフォリオテンプレートを取り揃えている Wix で今すぐあなただけのオリジナルポートフォリオを作成しましょう！
編集者：Miyuki Shimose ブログ コンテンツマネージャー
