【完全保存版！】デザインを参考にすべき海外のポートフォリオサイト25選
ポートフォリオサイトのデザインを考える上で参考になる海外のサイトをまとめて紹介しています。シンプルなデザインからパララックスを用いたものまでこれからWebサイトを作る上で真似したくなるデザインを寄せ集めました。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
本稿は、Webdesigner Depotのブログ記事を、Webdesigner Depotより了解を得て日本語翻訳し掲載した記事になります。またこの記事は、Ezequiel Bruni氏によって、投稿されました。
ご紹介するのは、ミニマリストデザインのサイト、伝統的なデザインのサイト、アシンメントリーなデザインのサイト、実用的ではないけれど実験的でクールなデザインを大胆に試みているサイトです。
今までには到底不可能だと思われたデザインを見ることができます。視差効果(パララックス)を利用して、良い意味で撹乱を引き起こしているデザインもあります！
pixelindustry
pixelindustryのポートフォリオは各テーマごとに作成されています。だから、厳密には世界初のオリジナルデザインではないかもしれませんが、ポートフォリオが彼ら独自の強みや才能を示すために役立っていることは、確かです。
もっとも、「テーマのある」ポートフォリオが良い方向に評価されるときにだけ効果的なのかもしれませんが。
David Alexander
David Alexanderのポートフォリオは、広くてゆったりとしていて、画像をメインとしたフレンドリーな印象のフルスクリーンのレイアウトが特徴です。
もしあなたのコンテンツが、テキストが少なめで画像を多用しているとしたら、参考にできる手法です。
Martine aimait les films
ビデオ制作会社のMartine aimait les films(フランス語で「マルタンはフィルムを愛する」の意)のポートフォリオサイトは、２分割法のようなデザインが素晴らしいです。
ビデオの背景として使われているシンプルでクオリティの高いクリップとの相乗効果で、サイト全体は現代的でプロフェッショナルな雰囲気に仕上がっています。紹介する動画のスタイルとよく合っています。
Aycan Elijah Yilmaz
私が「銀河で表現されたあご髭」を見たのは、このAycan Elijah Yilmazのポートフォリオが2回目でした。
この「銀河で表現されたあご髭」はさておき、ミニマリストデザインには大変参考になる良いサイトです。
コスパとタイパ、両方結果的に良くなる良くなる学び方とは？
「スクールは高いし時間も縛られて効率が悪い」と考える方は多いと思います。
もちろん、時間も費用もかかることは間違いありません。
ただ
結果的に無駄な学びにお金も時間もかける方がリスクが高いという考えもあります。
コスパ・タイパ最適化の参考として、
テックアカデミー卒業生がスクールを選んだ理由
をご紹介します。
- ・困ったときに、質問や相談できる相手がいるため挫折しなかった
- ・プロとして必要なスキルのみを深く学べたので無駄がなかった
- ・副業案件の提供と納品までのサポートがあったので目的を達成できた
安価・短期間で広く浅く学んでも意味がありません。
本当に自分の目的が達成できるか、それが重要です。
自分にどのスキルや学び方が合っているか、どんな学習方法かなど、お気軽に
無料相談
に参加してみませんか？
カウンセラー・現役のプロへ、何でも気軽に無料相談可能。
30分か60分お好きな時間が選べて、かつ3回まで
すべて無料で
ご利用できます。
無理な勧誘は一切ない
ので、お気軽にご参加ください。
Chris Cook
Chris Cookのポートフォリオは、シンプルで、モノトーンを基調としていて、美しいタイポグラフィでデザインされています。
私が特に好きなことろは、背景のパターンが微かなトーンで使われている点です。背景のパターンは、現代では時代遅れのデザインとして否定される傾向にありますが、このサイトは上手く取り入れています。
whitelist
ビデオ制作スタジオのwhitelistのポートフォリオは、90年代スタイルのマルチメディアのプレゼンテーションを基本としながら、現代的なテクノロジーと手法が使われています。このような種類のデザインによくあるユーザビリティの問題には、私も批判的な立場ですが、良くないデザインというわけではありません。
余分な装飾の多いファンシーなJavaScriptやアニメーションを削ぎ落とした後に残るのは、美しいミニマリストデザインのサイトです。装飾のため、またUIエレメントや重要なコンテンツに注目を集めるために、珍しい幾何学の図形を使う手法が私は特に好きです。
4musketier
4musketierはデザイン代理業の会社と思われます（私はドイツ語が読めないのであくまで推測ですが）。それほど想像力に富んだデザインではありません。模範的なフラットデザインであり、特定のカラースキームというよりも、色とりどりのパステルカラーの虹色を使ったようなデザインとして参考になります。
素晴らしいタイポグラフィ、贅沢に使われているホワイトスペース（余白）などが良い効果をもたらしているデザインです。デザイン全体を通して高い精度があり、一見の価値があります。
Lachlan Kincaid
Lachlan Kincaidのポートフォリオは、文字通りの意味の「ホワイトスペース（余白）」によって、ミニマリズムの世界を私たちに見せてくれます。
シンプルなデザインのサイトで、紹介する全ての作品に、適切なコンテクストを与えるために、テキストと画像が強調されています。高く評価できる試みです。
Electric Enjin
Electric Enjinのポートフォリオサイトは、ズームイン効果のある3Dの多面球体の登場から始まることで、衝撃的な印象を与えてくれます。これより先は、実際に見てのお楽しみとしてもらいたいので、話すのを控えます。
潜在的なユーザビリティの問題を別とすれば、これこそデザイナーがFlashを利用したサイトに追求し、その実現が難しいデザインであると表現すれば十分かもしれません。
サイトの他の部分のデザインは明らかにもっとシンプルです。壮観であり過ぎず、それでいて見ていて楽しいデザインです。トップページは訪問者に何かしら考えさせるところがあるデザインです(ブラウザ上で作動すれば)。
Olle
Olleのポートフォリオサイトは、ミニマリズムデザインと一連のバウハウス（Bauhaus）のデザイン様式を組み合わせています。ページはただデザインされたというよりも、芸術志向です。
デザイナーの方々へのメモ：芸術とは、余分な装飾の多いファンシーなレイアウトのことだけではありません。小さなディテールや全体のカラースキームを、コンテンツに合わせて変化させることも大切です。
Locomotive
Locomotiveのポートフォリオサイトは、マテリアルデザイン（Material Design）を基本としながら、Googleの模範通りには見えない素晴らしい例です。
一部の要素にはマテリアルデザイン（Material Design）に典型的な特徴を見ることができますが、独自の個性もあります。
AREA 17
モダンで美しいデザイン、ブラックとホワイトのコントラストが強調されたカラースキーム、アシンメトリーを組み合わせたのが、AREA 17のポートフォリオです。
私自身、自分のグレースケールのウェブサイトを気に入っていますが、よく知られているように、ほとんど完全なブラックカラー（スクリーン上では完全なブラックカラーに見えます。）を使ったデザインに成功するのは難しいことです。
C RCL
C RCLのポートフォリオサイトは、フルスクリーンサイズのカルーセル（回転ベルトコンベアーのような、スライドギャラリーのデザイン）をページの中央に配置するというリスキーな選択をしています。
リスクがあるというのは、このカルーセルが、彼らの紹介する作品を見るためにアクセスする唯一の方法だからです。しかし、それでも美しいデザインにまとめられています。またタイポグラフィも素晴らしいです。
Whitehall
Whitehallはニューヨークのインテリアデザインスタジオです。プロジェクトの全ての作品を素晴らしい写真で紹介していて、フルスクリーンに表示されます。ウェブサイトの他の部分はシンプルで、ユーザーは必要な情報だけを得ることができます。
「About(概要)」のページのアシンメトリーなデザインには驚きましたが、このサイト上の他の部分にはない、良いデザインに思えます。
Uzik
Uzikのポートフォリオサイトは、オリジナリティが高すぎず、上手くデザインされた例の1つです。
画像、テキスト、色など全ての要素が効果的に使われています。時々はデザインの定石に従うことにもアドバンテージがあります。Uzikはそれに成功した例です。サイトを訪問して、見てみることをおすすめします。
Dunlop Builders
Dunlop Buildersのポートフォリオは、ミニマリストデザインを利用したビジネスサイトの素晴らしい例です。
構成や使われている要素はよくあるようなデザインですが、このサイトならではの個性的なデザインもあります。その個性的なデザインは、主にレイアウトと文字に見ることができますが、画像にも見出すことができます。
David Schweitzer
作曲家のDavid Schweitzerのポートフォリオは、1ページの構成ではありません。しかし、最も重要な情報がトップページに集められているため、1ページの構成と見なすこともできるかもしれません。
ランダムに色を加えられた幾何学的な図形は、それがなければモノトーン調になるウェブサイトに、刺激的で素晴らしい効果を与えています。ただこれらの図形がテキストと重なる部分で、テキストが読みにくくなっています。
私が好きな点は、彼の音楽プロジェクトのコンテンツをクリックすると詳細が表示されるところや、小さなメディアプレーヤーでサンプル音楽を視聴できるところです。
Geordie Wood
Geordie Woodのポートフォリオは率直に言って、実用向きではない散らかったデザインです。一見、どこにメインのナビゲーションがあるのかさえわかりません。ページの右上にある矢印の要素がナビゲーションかと思ったらそうではなくて、写真家の名前のテキストをホバーしたときに現れるようになっていました。
この散らかりようは別にしても、タイポグラフィの使い方や、ホバー時にはクリックが終了するまでテキストが画像上に留まって表示されるデザインが好きです。写真の画像のホワイトスペース（余白）はそれぞれ異なる比率で与えられているのも、良いデザインです。実験的で予測不可能な印象が、紹介している写真と合っています。
ナビゲーション要素は修正されるべきですが、デザインは好きです。
Sam Lord Flavin
Sam Lord Flavinのポートフォリオでは、実験的なデザインを試みています。
このサイトは彼の主な3つのスキルセットを示す目的で使われているようです。アシンメトリーデザインと視差効果(パララックス)が、驚くほど良い効果を生んでいます。
Villa Böhnke
Villa Böhnkeは1ページで構成されたポートフォリオで、コラージュのように見えるかもしれません。
ドロップシャドウ効果、視差効果(パララックス)が用いられていてコンテンツと良い相性です。錯乱の効果があるといえます。
Jon Montenegro
Jon Montenegroのポートフォリオもまたミニマリストデザインで、1ページで構成されています。
長いリスト形式でコンテンツを列挙しているのは、人々に感銘を与えて賞賛を得ることを狙っているからでしょうか？私も実際に感銘を受けたようなので、効果があるかもしれません。
ソーシャルプルーフ(社会的証明とも呼ばれる心理学用語)の効果を得るには、良い方法の1つです。ただ1つ残念なのは、リンクのテキストをホバーした時にクリック音が鳴ることで、これさえなければと思います。
HOO KOO E KOO
HOO KOO E KOOという名前は、私は間違えるとわかっているので、声を大にして発音したいとは思いません。
トップページは、私が今までに見たPong（というゲーム）のアニメーションによる説明としては最もモダンなデザインで、良い始まり方です。スクロールダウンすると背景の色が違和感なく変化するのも、クールなデザインです。
Humans & Machines
Humans & Machinesのポートフォリオでは、アシンメトリー、ミニマリズム、素晴らしさともさらに加わったデザインを見ることができます。
Pilote
Piloteのポートフォリオで紹介されているのは、たった2枚のフォトグラフィです。
メニューをクリックすることで、文字やグラフィックのデザインをズームして見ることができます。Flashが使われているようなデザインですが、とてもユニークで興味深い手法です。
Brave People
Brave Peopleは、適度にオリジナリティがあって美しいポートフォリオサイトです。
特にタイポグラフィが素晴らしいので、見ることをおすすめします。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
プログラミングを独学で学習していて、このように感じた経験はないでしょうか？
- ・調べてもほしい情報が見つからない
- ・独学のスキルが実際の業務で通用するのか不安
- ・目標への学習プランがわからず、迷子になりそう
テックアカデミーでは、このような
学習に不安を抱えている方へ、マンツーマンで相談できる機会を無料で提供
しています。
30分間、オンラインでどんなことでも質問し放題です。
「受けてよかった」と感じていただけるよう
カウンセラーやエンジニア・デザイナー
があなたの相談に真摯に向き合います。
「自分に合っているか診断してほしい」
「漠然としているが話を聞いてみたい」
こんなささいな悩みでも大丈夫です。
無理な勧誘は一切ありません
ので、まずはお気軽にご参加ください。
※体験用のカリキュラムも無料で配布いたします。（1週間限定）
