Web制作の参考になるデザインや技術のアイデアがいっぱい！クリエイターの素晴らしいポートフォリオのまとめ

サイト構築 -デザイン

Post on:2018年7月13日

sponsors

デザイン効率化の新常識！Illustratorの生成塗りつぶし（シェイプ）の活用テクニック Adobe Firefly Camp 2024年11月22日金曜日開催 20時から21時

最近のポートフォリオは、デザイン的にも技術的にもどんどん進化しています。JavaScriptのアプリ、WordPress、スタティックなど、さまざまなプラットフォームでデザイン・構築されたポートフォリオサイトを紹介します。

20 BEST NEW PORTFOLIOS, JUNE 2018

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

Bruno Ferdinand
プラットフォーム: JS app

フランスのアートディレクターのポートフォリオで、シンプルで美しいデザインです。ページ遷移も非常に面白く、水平の遷移と垂直スクロールが他には見かけない工夫がされています。動画やアニメーション、スティッキーコンテンツ、そして文字通りの無限スクロールなど、面白いアイデアがいっぱいです。

Yumpic
プラットフォーム: WordPress

食べ物の写真や動画を紹介しているポートフォリオで、Sempliceのテーマファイルが使用されています。ブルーとイエローのカラースキームが特徴的ですが、写真と動画の合間にあるイラストも非常に魅力的にデザインされています。

Duane Dalton
プラットフォーム: Static Site

一見、左右均等に分割されたレイアウトのように見えますが、左右非対称にレイアウトされた面白いデザインです。視線を大きく移動させることなく、作品を楽しめるので、こういったレイアウトも有りですね。

Kenta Toshikura
プラットフォーム: Static Site

日本人のフロントエンド制作者のポートフォリオ。ミニマルなプレゼンテーションスタイルのデザインで、使いやすさよりも、ビジュアルとスタイルに重点が置かれているように見えます。右上の「All」には、かっこいい3Dのメニューが隠されています。

Ellen Mandemaker
プラットフォーム: Static Site

アート系のポートフォリオで、その見せ方に大きな特徴があります。クリエイティブなコラージュから、シンプルなポートフォリオまで、その作品をさまざまな角度から見ることができます。何を見ているのか完全には分からないけど、それが好きだと思わせるポートフォリオの一つです。

No Plans
プラットフォーム: WordPress

WordPressで構築された縦長ページのポートフォリオで、クリーンなデザインと美しいタイポグラフィが特徴で、かなりシンプルです。

Lab101
プラットフォーム: WordPress

カーソルを変えるサイトは好きではありませんが、このサイトは別です。ミニマルでモダンなデザインにあったカーソルは、サイトの雰囲気を演出しています。カーソルを見失うこともないでしょう。contactの3Dアニメーションも記憶に残るデザインです。

Studio Bjørk
プラットフォーム: Static Site

ストックホルムのデザイン会社のポートフォリオで、モノクロのカラーパレット、対角線、水平スクロールがうまく機能しているデザインです。ダイナミックなインタラクションと繊細なディテールのバランスが素晴らしいサイトです。

Juul Hondius
プラットフォーム: Static Site

雑誌スタイルのサイトはいくつもありますが、このポートフォリオは最近見た興味深いサイトの1つです。美しい印象的な写真と一緒に文字がわずかなスペースにレイアウトされており、古い雑誌のように見えます。技術的には問題かもしれませんが、全体としてのデザインは良い印象を与えます。写真家のサイトで、テキストも読ませたい場合、あなたはどうしますか？

Thu-Van Tran
プラットフォーム: Static Site

このポートフォリオは、視覚的に非常に興味深いデザインになっています。すべてのページは1枚の紙が重なるように遷移し、レイアウトのシンプルさとタイポグラフィのパワフルさと相まって、際立っています。

Aristide Benoist
プラットフォーム: Static Site

ワーピングアニメーションを使った非常に面白いデザインで、大きく使われたタイポグラフィと視覚的な効果を演出しています。ワーピングは画像や背景にも使用されており、不思議な世界観を楽しめます。

Datagif
プラットフォーム: Static Site (おそらく)

サンセリフの書体が使用されたデザインで、一見平凡なレイアウトに見えますが、アニメーションが楽しませてくれます。遊び心を少し加えたい時の参考になるかもしれません。

Handsome
プラットフォーム: Static Site

大きなセリフの書体、背景としての暗い写真、ほとんど目に見えない繊細な直線、フラットなデザインの初期によく見かけたスタイルです。ノスタルジックなものが完全に再現されており、閲覧していると楽しくなります。

Sister
プラットフォーム: WordPress

ミニマリズムとアシンメトリーのデザインスタイルは、こういった代理店のポートフォリオにも適しています。無限スクロールが採用されており、通常のいつ次に遷移するのか分からない方法ではなく、この方法は分かりやすく遷移します。時々表示されるモーダルのポップアップは好きではありません。

Makers and Allies
プラットフォーム: WordPress

デザイン会社のポートフォリオで、多くのモーションデザインがミックスされて楽しませてくれるサイトです。デザイン的な美しさと最新のテクニックが絶妙なバランスで採用されています。テキストと背景のコントラストはぎりぎりにデザインされており、もっとコントラストをつけてもうまく機能するでしょう。

Bipolar Studio
プラットフォーム: Static Site and/or JS App

モダンで美しいモーショングラフィックと昔ながらの大きいタイポグラフィを組み合わせたデザインです。動画がメインですが、注目すべきデザイン要素もたくさんあります。各プロジェクトページの一番下にあるデータは、そのプロジェクトを完了するのに必要なことが詳しく説明されています。ロゴには細字が使用されているので、もっと大きくてもよいかもしれません。