icon
icon

【完全保存版!】デザインを参考にすべき海外のポートフォリオサイト25選

ポートフォリオサイトのデザインを考える上で参考になる海外のサイトをまとめて紹介しています。シンプルなデザインからパララックスを用いたものまでこれからWebサイトを作る上で真似したくなるデザインを寄せ集めました。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元:GMOリサーチ株式会社 調査期間:2021年8月12日~8月16日  調査対象:2020年8月以降にプログラミングスクールを受講した18~80歳の男女1,000名  調査手法:インターネット調査

本稿は、Webdesigner Depotブログ記事を、Webdesigner Depotより了解を得て日本語翻訳し掲載した記事になります。またこの記事は、Ezequiel Bruni氏によって、投稿されました。

ご紹介するのは、ミニマリストデザインのサイト、伝統的なデザインのサイト、アシンメントリーなデザインのサイト、実用的ではないけれど実験的でクールなデザインを大胆に試みているサイトです。

今までには到底不可能だと思われたデザインを見ることができます。視差効果(パララックス)を利用して、良い意味で撹乱を引き起こしているデザインもあります!

 

pixelindustry

001-620x427

pixelindustryのポートフォリオは各テーマごとに作成されています。だから、厳密には世界初のオリジナルデザインではないかもしれませんが、ポートフォリオが彼ら独自の強みや才能を示すために役立っていることは、確かです。

もっとも、「テーマのある」ポートフォリオが良い方向に評価されるときにだけ効果的なのかもしれませんが。

pixelindustry

 

David Alexander

002-620x427

David Alexanderのポートフォリオは、広くてゆったりとしていて、画像をメインとしたフレンドリーな印象のフルスクリーンのレイアウトが特徴です。

もしあなたのコンテンツが、テキストが少なめで画像を多用しているとしたら、参考にできる手法です。

David Alexander

 

[PR] Webデザインで副業する方法とは

Martine aimait les films

003-620x427

ビデオ制作会社のMartine aimait les films(フランス語で「マルタンはフィルムを愛する」の意)のポートフォリオサイトは、2分割法のようなデザインが素晴らしいです。

ビデオの背景として使われているシンプルでクオリティの高いクリップとの相乗効果で、サイト全体は現代的でプロフェッショナルな雰囲気に仕上がっています。紹介する動画のスタイルとよく合っています。

Martine aimait les films

 

Aycan Elijah Yilmaz

004-620x427

私が「銀河で表現されたあご髭」を見たのは、このAycan Elijah Yilmazのポートフォリオが2回目でした。

この「銀河で表現されたあご髭」はさておき、ミニマリストデザインには大変参考になる良いサイトです。

Aycan Elijah Yilmaz

 

Chris Cook

005-620x427

Chris Cookのポートフォリオは、シンプルで、モノトーンを基調としていて、美しいタイポグラフィでデザインされています。

私が特に好きなことろは、背景のパターンが微かなトーンで使われている点です。背景のパターンは、現代では時代遅れのデザインとして否定される傾向にありますが、このサイトは上手く取り入れています。

Chris Cook

 

whitelist

006-620x427

ビデオ制作スタジオのwhitelistのポートフォリオは、90年代スタイルのマルチメディアのプレゼンテーションを基本としながら、現代的なテクノロジーと手法が使われています。このような種類のデザインによくあるユーザビリティの問題には、私も批判的な立場ですが、良くないデザインというわけではありません。

余分な装飾の多いファンシーなJavaScriptやアニメーションを削ぎ落とした後に残るのは、美しいミニマリストデザインのサイトです。装飾のため、またUIエレメントや重要なコンテンツに注目を集めるために、珍しい幾何学の図形を使う手法が私は特に好きです。

whitelist

 

4musketier

007-620x427

4musketierはデザイン代理業の会社と思われます(私はドイツ語が読めないのであくまで推測ですが)。それほど想像力に富んだデザインではありません。模範的なフラットデザインであり、特定のカラースキームというよりも、色とりどりのパステルカラーの虹色を使ったようなデザインとして参考になります。

素晴らしいタイポグラフィ、贅沢に使われているホワイトスペース(余白)などが良い効果をもたらしているデザインです。デザイン全体を通して高い精度があり、一見の価値があります。

4musketier

 

Lachlan Kincaid

008-620x427

Lachlan Kincaidのポートフォリオは、文字通りの意味の「ホワイトスペース(余白)」によって、ミニマリズムの世界を私たちに見せてくれます。

シンプルなデザインのサイトで、紹介する全ての作品に、適切なコンテクストを与えるために、テキストと画像が強調されています。高く評価できる試みです。

Lachlan Kincaid

 

Electric Enjin

009-620x427

Electric Enjinのポートフォリオサイトは、ズームイン効果のある3Dの多面球体の登場から始まることで、衝撃的な印象を与えてくれます。これより先は、実際に見てのお楽しみとしてもらいたいので、話すのを控えます。

潜在的なユーザビリティの問題を別とすれば、これこそデザイナーがFlashを利用したサイトに追求し、その実現が難しいデザインであると表現すれば十分かもしれません。

サイトの他の部分のデザインは明らかにもっとシンプルです。壮観であり過ぎず、それでいて見ていて楽しいデザインです。トップページは訪問者に何かしら考えさせるところがあるデザインです(ブラウザ上で作動すれば)。

Electric Enjin

 

Olle

010-620x427

Olleのポートフォリオサイトは、ミニマリズムデザインと一連のバウハウス(Bauhaus)のデザイン様式を組み合わせています。ページはただデザインされたというよりも、芸術志向です。

デザイナーの方々へのメモ:芸術とは、余分な装飾の多いファンシーなレイアウトのことだけではありません。小さなディテールや全体のカラースキームを、コンテンツに合わせて変化させることも大切です。

Olle

 

Locomotive

011-620x427

Locomotiveのポートフォリオサイトは、マテリアルデザイン(Material Design)を基本としながら、Googleの模範通りには見えない素晴らしい例です。

一部の要素にはマテリアルデザイン(Material Design)に典型的な特徴を見ることができますが、独自の個性もあります。

Locomotive

 

AREA 17

012-620x427

モダンで美しいデザイン、ブラックとホワイトのコントラストが強調されたカラースキーム、アシンメトリーを組み合わせたのが、AREA 17のポートフォリオです。

私自身、自分のグレースケールのウェブサイトを気に入っていますが、よく知られているように、ほとんど完全なブラックカラー(スクリーン上では完全なブラックカラーに見えます。)を使ったデザインに成功するのは難しいことです。

AREA 17

 

C RCL

013-620x427

C RCLのポートフォリオサイトは、フルスクリーンサイズのカルーセル(回転ベルトコンベアーのような、スライドギャラリーのデザイン)をページの中央に配置するというリスキーな選択をしています。

リスクがあるというのは、このカルーセルが、彼らの紹介する作品を見るためにアクセスする唯一の方法だからです。しかし、それでも美しいデザインにまとめられています。またタイポグラフィも素晴らしいです。

C RCL

 

Whitehall

014-620x427

Whitehallはニューヨークのインテリアデザインスタジオです。プロジェクトの全ての作品を素晴らしい写真で紹介していて、フルスクリーンに表示されます。ウェブサイトの他の部分はシンプルで、ユーザーは必要な情報だけを得ることができます。

「About(概要)」のページのアシンメトリーなデザインには驚きましたが、このサイト上の他の部分にはない、良いデザインに思えます。

Whitehall

 

Uzik

015-620x427

Uzikのポートフォリオサイトは、オリジナリティが高すぎず、上手くデザインされた例の1つです。

画像、テキスト、色など全ての要素が効果的に使われています。時々はデザインの定石に従うことにもアドバンテージがあります。Uzikはそれに成功した例です。サイトを訪問して、見てみることをおすすめします。

Uzik

 

Dunlop Builders

016-620x427

Dunlop Buildersのポートフォリオは、ミニマリストデザインを利用したビジネスサイトの素晴らしい例です。

構成や使われている要素はよくあるようなデザインですが、このサイトならではの個性的なデザインもあります。その個性的なデザインは、主にレイアウトと文字に見ることができますが、画像にも見出すことができます。

Dunlop Builders

 

David Schweitzer

017-620x427

作曲家のDavid Schweitzerのポートフォリオは、1ページの構成ではありません。しかし、最も重要な情報がトップページに集められているため、1ページの構成と見なすこともできるかもしれません。

ランダムに色を加えられた幾何学的な図形は、それがなければモノトーン調になるウェブサイトに、刺激的で素晴らしい効果を与えています。ただこれらの図形がテキストと重なる部分で、テキストが読みにくくなっています。

私が好きな点は、彼の音楽プロジェクトのコンテンツをクリックすると詳細が表示されるところや、小さなメディアプレーヤーでサンプル音楽を視聴できるところです。

David Schweitzer

 

Geordie Wood

018-620x427

Geordie Woodのポートフォリオは率直に言って、実用向きではない散らかったデザインです。一見、どこにメインのナビゲーションがあるのかさえわかりません。ページの右上にある矢印の要素がナビゲーションかと思ったらそうではなくて、写真家の名前のテキストをホバーしたときに現れるようになっていました。

この散らかりようは別にしても、タイポグラフィの使い方や、ホバー時にはクリックが終了するまでテキストが画像上に留まって表示されるデザインが好きです。写真の画像のホワイトスペース(余白)はそれぞれ異なる比率で与えられているのも、良いデザインです。実験的で予測不可能な印象が、紹介している写真と合っています。

ナビゲーション要素は修正されるべきですが、デザインは好きです。

Geordie Wood

 

Sam Lord Flavin

019-620x427

Sam Lord Flavinのポートフォリオでは、実験的なデザインを試みています。

このサイトは彼の主な3つのスキルセットを示す目的で使われているようです。アシンメトリーデザインと視差効果(パララックス)が、驚くほど良い効果を生んでいます。

Sam Lord Flavin

 

Villa Böhnke

020-620x427

Villa Böhnkeは1ページで構成されたポートフォリオで、コラージュのように見えるかもしれません。

ドロップシャドウ効果、視差効果(パララックス)が用いられていてコンテンツと良い相性です。錯乱の効果があるといえます。

Villa Böhnke

 

Jon Montenegro

021-620x427

Jon Montenegroのポートフォリオもまたミニマリストデザインで、1ページで構成されています。

長いリスト形式でコンテンツを列挙しているのは、人々に感銘を与えて賞賛を得ることを狙っているからでしょうか?私も実際に感銘を受けたようなので、効果があるかもしれません。

ソーシャルプルーフ(社会的証明とも呼ばれる心理学用語)の効果を得るには、良い方法の1つです。ただ1つ残念なのは、リンクのテキストをホバーした時にクリック音が鳴ることで、これさえなければと思います。

Jon Montenegro

 

HOO KOO E KOO

022-620x427

HOO KOO E KOOという名前は、私は間違えるとわかっているので、声を大にして発音したいとは思いません。

トップページは、私が今までに見たPong(というゲーム)のアニメーションによる説明としては最もモダンなデザインで、良い始まり方です。スクロールダウンすると背景の色が違和感なく変化するのも、クールなデザインです。

HOO KOO E KOO

 

Humans & Machines

023-620x427

Humans & Machinesのポートフォリオでは、アシンメトリー、ミニマリズム、素晴らしさともさらに加わったデザインを見ることができます。

Humans & Machines

 

Pilote

024-620x427

Piloteのポートフォリオで紹介されているのは、たった2枚のフォトグラフィです。

メニューをクリックすることで、文字やグラフィックのデザインをズームして見ることができます。Flashが使われているようなデザインですが、とてもユニークで興味深い手法です。

Pilote

 

Brave People

025-620x427

Brave Peopleは、適度にオリジナリティがあって美しいポートフォリオサイトです。

特にタイポグラフィが素晴らしいので、見ることをおすすめします。

Brave People

 

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。