2026年に最高の20のポートフォリオウェブサイト、ライブチェック済み・速度テスト済み

現在のところ、最高のポートフォリオウェブサイト20サイトをご紹介します。デザイナー、開発者、写真家、建築家が自分たちの作品を提示し、スタジオとエージェンシーがそれらを販売し、さらにブランドブックと業界レポートなどのいくつかのプロジェクトサイトがあります。好みはリストの決定要因ではありませんでした。私は、23のライブで手作業でレビューされたポートフォリオサイトから20サイトをランダムに抽出し、各サイトが読み込まれることを確認し、携帯電話で測定し、独自のサイトに適応させることができるものを記録しました。驚き: 十分なリアルユーザーデータを持つ8つのサイトのうち、Googleの3つのCore Web Vitalsすべてをパスするものはなく、モバイルLighthouseスコアの中央値は61.5です。これは64の美しいウェブサイト、ライブチェック済み・速度テスト済みのポートフォリオスポークです。

この20サイトがどのように選定およびテストされたか

最高のポートフォリオウェブサイトのほとんどのリストはキュレーションされたお気に入りです。それらの選択が読み込み時間でどのようなコストがかかるかについて何も述べていないため、代わりにランダムドローを使用しました。

• プール: 私が保持しているキュレーションされたデザインデータベースから23のライブポートフォリオウェブサイト。すべて手作業でレビューされ、デスクトップとモバイルのキャプチャがあり、過去30日間の可用性チェックに合格しています。
• ドロー: 固定ランダム順序の20サイト。1つのスタジオから最大2つまで。スワップが必要なものはありませんでした。ここに含まれるものは私のクライアント作業ではなく、掲載費用を支払ったものもありません。
• ライブチェック、すべてのサイトは2026年10月31日にブラウザ(Chromium)で開かれ、リストされているのと同じサイトを読み込みました。
• ラボテスト、2026年10月12日から20日間のサイトあたり1回のモバイルLighthouseテスト。パフォーマンススコア、Largest Contentful Paint、ページ重量を記録しました。
• リアルユーザーデータ: 携帯電話のChrome UXレポート数字で、Googleはリアルのchromeユーザーから収集します。ページは十分なビジターがあってはじめて表示されます(Chrome UXレポート)。多くの個人ポートフォリオがこれに到達することはないため、20のうち11サイトは「データなし」と表示されます。
• ランキングではなく、以下の順序は抽出順序です。

20のポートフォリオウェブサイトが速度でかかるコスト

Googleは、最大の視覚的ペイント(LCP)が2.5秒以下、次のペイントへのインタラクション(INP)が200ミリ秒以下、累積レイアウトシフト(CLS)が0.1以下で測定されたページをよいとマークします(ページロードの75パーセンタイル)。ページはすべての3つを満たす場合にのみCore Web Vitalsをパスします(web.dev)。

比較として、GoogleのChrome UX Report 2026年9月リリースでは、18,376,044のオリジン中、Core Web Vitalsが良好なオリジンのシェアは55.9%です(Chrome UX Reportリリースノート)。ここで判定した8つのポートフォリオはいずれも合格していません。8つ中7つは2.5秒のLCP目標を下回り、5つはタップに対する応答が遅く、2つはレイアウトシフトが大きすぎます。

軽量なページが必ずしも高スコアを保証するわけではなく、重いページが必ずしも低スコアをもたらすわけでもありません。Karl Barnardのポートフォリオは0.7MBですがラボスコアは37で、スクリプト実行中のブロッキング時間が908msでした。Glitch&Gritは47.4MBありながらスコアは66。このセレクション中最小のページはGØDN.studioで0.2MBですが、唯一90以上のスコアを獲得しています。

ラボと実訪問者の見解はここでも一致していません。Gionatan Neseはラボでスコア37ですが、実訪問者はメインコンテンツが1.2秒で表示されると見ています。サイトはレスポンシブ性でのみ不合格で、Googleの200ms基準に対して232msです。Lighthouseはエミュレートされたスマートフォンでの1回の実行に過ぎず、Chrome UX Reportと矛盾する場合、web.devは実訪問者のデータがより正確な見解である可能性が高いと述べています(web.dev)。

これらの20はどのように構築されているか

Next.jsは20中6サイトで使用。NuxtとWebflowは各2サイト、Framer、SvelteKit、WordPressは各1サイトです。その他7サイトはHTMLからスタックが読み取れませんでした。Félix Péaultの写真ポートフォリオはSvelteKitで構築され、1.4MBのページで76点を獲得。自分のサイト用にフレームワークを選択する場合は、<a id="1">Astro対Next.js</a>をご覧ください。

20が共通に持つもの

データベース内のすべてのサイトはレビュー中にスタイルタグを取得し、スタックはライブHTMLから検出されるため、これは印象ではなく実数です。

• 大きなタイプが特徴。20中11は名前または見出しを非常に大きなタイプで設定。グループ内で最も一般的なタグです。ポートフォリオでは、名前が最初の画面全体であることがよくあります。
• 装飾よりもインタラクション。7つはインタラクティブとタグ付けされ、他のどのスタイルよりも多い。3Dシーン、カーソルに反応する背景、並べ替え可能なプロジェクトリング。ミニマルとタイポグラフィックが次点で各6つです。
• 作品が営業活動をします。9つは写真をトップに配置し、8つはイラストをトップに配置。優れたものは10個の小さい作品ではなく、1つの大きな作品を表示しています。
• モーションは動作を遅くしていません。6つはGSAPやLenisなどのスムーズスクロールまたはアニメーションライブラリを読み込みます。これらのラボスコアの中央値は77で、他の14つは57.5なので、このセレクション内ではアニメーションだけが遅いスコアを説明していません。

20のポートフォリオウェブサイト

20個すべてが以下に描画順に表示され、測定値が最初に、その後各サイトの詳細を、ホームページキャプチャ、借りるべきパターン、理解すべきトレードオフとともに示しています。実訪問者の数字はスマートフォンからのもの。「データなし」はGoogleが報告するのに十分な訪問者がいないことを意味します。自分のサイトについては、ポートフォリオウェブデザインをご覧ください。

1. Hobro Digital

その名前は白い非常に太くて幅広いサンセリフで、深い赤とアンバーのぼかした顔写真の端近くまで引き伸ばされている。暖色は一つのファミリー内に留まるため、白いレタリングがすぐに読める。その下の小さな等幅フォントの行は、エージェンシーの説明と場所を示し、分厚いディスプレイタイプと軽いタイプライタースタイルのテキストのコントラストが階層を明確に保つ。

これを応用する: スタジオ名を1つの太いディスプレイフォントで全幅にわたって、ぼかした温色の写真またはビデオスチルの上に配置し、小さな等幅フォントの説明行と組み合わせる。

注意する点: ページは平均よりも重く、ラボテストの結果は中程度である。実際のユーザーは、メインコンテンツの読み込みが遅く、タップやクリックへの反応が緩慢であることにも気付く。これは全画面の動くバックドロップとスクリプトアニメーションに適合している。

社内デザイン。hobro.digitalを参照。

2. Valentin Gassend

その名前が機能する。太くて背の高い狭いサンセリフが黒で積み重なり、GとNは緑のブラシスクリプトに切り替わり、シンプルなワードマークに個性を与える。薄い緑のグリッド線が薄いピンクの背景をセルに分割し、小さな大文字のキャプションがコーナーに配置される一方、中心は開いたままになる。

これを応用する: 名前を1つの太いフォントで巨大なサイズで設定し、いくつかの文字を1つのアクセントカラーのスクリプトフォントに変更し、そのカラーを背後の薄いグリッド線で繰り返す。

注意する点: ラボテストは軽い重量にもかかわらずページが遅いと評価し、Googleは実際のユーザーがどのようなパフォーマンスを発揮するかを確認するのに十分なリアルユーザーデータを保有していない。

社内デザイン。valentingassend.comを参照。

3. Vivien's Creative

淡い砂丘の全面写真が画面を満たし、濃色のコートを着た2人の歩行者が砂に対して小さく配置され、ページにスケール感と落ち着きを与える。導入部は薄くて風味のあるセリフで灰緑色の空の上に配置され、下の名前は巨大で太い白のサンセリフを使用して端から端まで走る。小さな大文字のメニューリンクが邪魔にならないため、画像と名前が冒頭を担う。

これを応用する: 全面写真と、下部の端に切り取られた超大型のワードマーク、そして上部の短いセリフ導入部を組み合わせることで、小さなスタジオが良い画像と2つのフォントのペアから確信に満ちた最初の画面を得られるようにする。

注意する点: ページは軽いが、ラボテストの結果は中程度にすぎず、Googleは実際の人々がどのようなパフォーマンスを発揮するかを判断するのに十分なリアルユーザーデータを保有していない。

Christopher Doyle & Co.が制作した。vivienscreative.com.auを訪問しよう。

4. Oimachi

見出しは単一のイタリックセリフ単語に対して大きくシンプルなグロテスク書体を設定し、誰もが本文を読む前にページに明確な声を与える。薄いグレーの背景、タイトなマージン、2つのクリーム色の丸い形を持つ大きなダークパネルがパレットを静かに保ち、右側のポストカードの狭い列は写真とオレンジのアクセントを追加する。モバイルでは、同じ見出しが太い黒いアイコンのグリッドの上にきちんと積み重なり、かすかな建設グリッドの上に描かれている。

これを応用する: シンプルなサンセリフの見出しと単一のイタリックセリフ単語を組み合わせてテキストベースのヒーローに認識可能な声を与え、アイコンなどのプロセス作業をかすかな建設グリッドの上に表示する。

注意する点: ラボテストはページが遅く非常に重いこと、およびGSAPモーションがWebflowと一緒に検出されたことを判明させ、実際のユーザーがどのようなパフォーマンスを発揮するかを言うのに十分なGoogleからのリアルユーザーデータがなかった。

社内設計。oimachi.coをご覧ください。

5. Squarespace Foundations

ほぼ黒いフィールドが短くセンタリングされたステートメント、きれいで均等な太さのサンセリフを保持し、他に何も競争しない。小さな画像タイル、アイソメトリック傾斜に斜めに配置され、白いロゴマーク、温かみのある影のセラミックジャグ、薄いメタリック帯を混ぜて、ルーズな軌道のような端の周りに配置される。抑制と広いスペーシングはページに落ち着きと自信を感じさせ、傾いたタイルは動きを暗示する。

これを参考に: クリーンなサンセリフで短い1文を書き、ダークで平らな背景に傾いた画像タイルを数枚配置します。トリミングした画像数枚とCSSトランスフォームがあれば十分です。

気をつけて: これは売上ページではなくブランドブックの没入感で、画像が大きなダウンロードを生み出します。実際の訪問者はGoogleのメインコンテンツ目標より長く待ち、タップの反応も遅くなります。

制作: Resn。brand.squarespace.com にアクセス。

6. AI in Design Report 2026

グレーとピーチの色褪せた反転花写真の背後に、オレンジ、ライラック、グリーンのざらざらしたグラデーション カードが散りばめられています。各カードには職種を示す小さなモノスペース ラベルがあり、コラージュに静かな編集的な秩序をもたらします。中央の黒いパネルに太い白いジオメトリック サンセリフのワードマークが構成を固定し、モバイルビューではパレットを保ちながら黒いロゴブロックの横に鮮やかなオレンジのメニューバーを表示します。

これを参考に: 1つの大きく密集したサンセリフ見出しと小さなモノスペース ラベルを組み合わせ、1枚の色合い写真の上に重ねたざらざらしたグラデーション画像数枚からヒーローコラージュを作成します。

気をつけて: ページは平均より重く、実際の訪問者はメインコンテンツの読み込みが遅く、レイアウトシフトもあるため、大きなコラージュが最初に確認すべき対象です。

制作: ++hellohello。stateofaidesign.com にアクセス。

7. Julia Stafi

ページはほぼ全て白い空間で、中央にハイコントラストのセリフ ワードマークがあり、短い自己紹介はより軽いテキスト セリフで設定されています。intro 行はページを横切って段違いの対角線パターンで配置され、装飾なしにプレーンな段落に動きを与えます。その下に、風化した斑点のある壁に対して黒い建築家の背の高いポートレートがあり、唯一の強い色調を追加するため、暗い画像と淡いページはお互いにバランスします。

これを参考に: intro の行をシンプルな左インデントでページ全体に段違い配置し、プレーン ホワイト グラウンドの背の高いポートレートと組み合わせます。

気をつけて: ページは平均より重く、ラボテストでは中程度であり、これは大きな写真を中心に構築されたレイアウトに適しています。実際のユーザーのパフォーマンスについてGoogleから十分なリアルビジター データがありません。

制作: Sasha Khudova。juliastafi.com にアクセス。

8. Studio K95

フラットで彩度の高い青が画面を満たし、ペールなガラスのようなブロックで作られたピクセル化されたローズが中央に何も競争なく座ります。小さなプロジェクト カードが環の中で漂い、赤とクリーム色のポスターがPhone ビューで青に映えます。ナビゲーションは白い小さな大文字サンセリフを使用するため、アートワークがリードし、インターフェースは静かなままです。

これを参考に: 強い色のフラット ブロックをステージとして使用し、小さな Rings と Spiral スタイルトグルを追加してプロジェクト サムネイルを再配置し、同じ作業を異なるレイアウトで参照できるようにします。

気をつけて: ページ自体は軽いのに、ラボテストでは中程度で、実際の訪問者はメインコンテンツの読み込みが遅く、タップとクリックの反応も遅いため、3D シーンが最初に確認すべき対象です。

社内で設計された。k95.itを訪問しよう。

9. Direct Design

光沢のあるレンダリング信号機が柔らかい黄色のグラデーション背景に置かれており、緑色のニコニコランプとダイアモンドサインがエージェンシーの方向性のアイデアを一枚の画像に変えています。見出しは大きく、タイトな無装飾サンセリフを黒い背景に白で使用しており、画像の横で一度に読めます。黒い丸みを帯びたナビゲーションバーと小さな黄色のお問い合わせボタンがパレットを黒、白、黄色、緑に保ちます。

これを参考にしてください: 単一のカスタムレンダリングオブジェクトと非常に大きな見出しを組み合わせ、その色をメニューバーとボタンに反映させることで、多くのアセットを必要とせずにページがブランド化された感覚になります。

注意してください: ページは平均より重く、ラボテストでは中程度の評価であり、これはレンダリングされた画像とアニメーションライブラリに合致していますが、Googleから実ユーザーのデータが不足しており、実際のユーザーに対するパフォーマンスについては判断できません。

COSMOFLOW Agencyが制作しました。wearedirect.coをご覧ください。

10. House of Honey

ワードマークは端から端まで、重く幅広い黒いウェイトのサンセリフで走り、薄いイタリック体セリフの「of」が対比を作るため通り抜けています。フラットな淡いピンクに濃いチョコレートブラウンで設定されており、一度に読めて温かみを感じさせます。タグラインは各コーナーの小さな大文字セリフに配置され、フル幅の内部写真はパレットのピンクとオレンジを繰り返しています。

これを参考にしてください: 非常に重いサンセリフワードマークと単一の繊細なイタリック体セリフの単語を組み合わせ、パレットを1つのフラット背景色と1つの濃いインクに保つことで、写真が他のすべてを表現します。

注意してください: ページ自体は軽いですが、実ユーザーはメインコンテンツの読み込みが遅い（LCP）ことを経験しており、これは大きなフル幅の写真が最初に表示される場合の一般的なコストであり、ラボ結果は中程度の評価のみです。

Edoardo Lunardi が制作。houseofhoney.com をご覧ください。

11. Félix Péault

ページはほぼグラデーションのみで、深い青から明確な緑を経て温かいオフホワイトに走っており、このカラーウォッシュがすべての色を処理しています。巨大な濃い文字のペア、FとPがモノグラムのようにコーナーに座り、背の高いコンデンスサンセリフがタグラインと小さなメニューを運びます。モバイルでは、上から見た人々の写真に長い影が付き、唯一の画像を追加します。

これを参考にしてください: イニシャルを対向するコーナーの巨大な文字として設定し、背景をソフトグラデーションで埋めることで、ページは重い画像なしでアイデンティティを持ちます。

注意してください: ラボテストは中程度の評価でしたが、ページ自体は軽く、Googleから実ユーザーのデータが不足しており、実際のユーザーに対するパフォーマンスについては判断できません。

社内で設計。felixpeault.com をご覧ください。

12. Karl Barnard

見出しはハイコントラストのセリフを使用し、1つの単語がすべての強調を運ぶ緑色のイタリック体に切り替わります。他のすべてはおとなしく保たれます: 温かいオフホワイトの背面、淡いグリッド線、ラベル用の小さな等幅フォント。肖像画は文字で構成されているため、画像はタイプを反映し、ページは部品の集まりではなく1つのアイデアのように感じられます。

これを参考にしてください: 見出しの1つの単語を選択し、イタリック体と単一のアクセントカラーで設定し、パレットの残りをニュートラルトーンのままにしてください。

注意してください: ラボテストはページ自体は軽いにもかかわらずページを低速と評価し、Googleから実ユーザーのデータが不足しており、実際のユーザーに対する感じについては判断できません。

社内制作。karlbarnard.co.zaをご覧ください。

13. Gionatan Nese

白いページ、小さなプロダクトショット、ポスター、オブジェクトのクラスタが緩いリングで配置され、他にはほぼ何もありません。上部の小さなメニューはイニシャル用のシンプルなサンセリフと「Creative Space」用の洗練されたセリフを軽い灰色のタブで組み合わせており、静かなコントラストを与えます。画像はさまざまなサイズで重なるため、目はリングを一周し、空の白いマージンが各サムネイルを展示品のように感じさせます。

これを参考に: 自分の最高のプロジェクトサムネイルを厳選して白い無地のページに緩いリング状に配置し、重なりや大きさを変えることで、ヒーロー画像やヘッドラインなしに作品そのものを語らせる。

注意点: ラボテストではページが遅く非常に重いと判定され、実際のユーザーはタップへの応答が遅い (INP) と感じるが、メインコンテンツ自体は素早く到着する。

社内デザイン。gionatannese.com を訪問。

14. SUSO Digital

ヒーローは落ち着いた白い背景の上に留まり、薄い白のワイヤーフレーム形状の背後にはピーチ、ライラック、薄青のやさしいグラデーション輝きが1つあります。ヘッドラインは大きなサイズのクリーンで均整の取れたサンセリフを使用し、その上に小さい等幅ラベルがあり、下に2つのクリアなピル型ボタンがあります。間隔は広々としているため、ページは素早く読み込まれ、1つのグラフィックだけが装飾となります。

これを参考に: クリーンなサンセリフのヘッドラインに小さい等幅ラベルとボタンを組み合わせ、テキストの背後に1つのやさしいグラデーションギラフィックを配置することで、写真がなくても設計されたページに見せる。

注意点: ページは軽いが、実際のユーザーはメインコンテンツの読み込み速度 (LCP) に問題を感じ、ヒーロー内の大きなグラデーショングラフィックが最初に確認すべき箇所の可能性が高い。

製作: Fhoke。susodigital.com を訪問。

15. Nordpixel

暗くモヤがかかった山の写真がスクリーン全体を埋め、下右には薄く灯りが灯ったガラス張りのキャビンが見えます。ワードマークは中央に広く間隔を取った太い幾何学的な大文字で配置され、ロゴとボタンで繰り返される青いドットで終わります。白い角丸のメニューバーが画像の上に浮かぶため、青いアクセントと淡い文字が全てのコントラストを提供します。

これを参考に: フルブリード写真にオーバーレイで暗くしたものと、広く間隔を取った太いワードマークを組み合わせ、ドットとボタンにのみ単一のアクセントカラーを使う。

注意点: ページは平均より重く、ラボテストでは中程度の判定が出ています。これはフルスクリーン写真の代価としては仕方ありませんが、Google からの実際のユーザーデータが不足しているため、実際のユーザーへのパフォーマンスについては判断できません。

Michael Schnyder が制作。nordpixel.ch をご覧ください。

16. Alvara House

夕暮れの平屋の家のフルブリード写真が巨大な白いサンセリフのワードマークの下に位置し、HOUSE という単語は屋根のラインを半透明で横切るため、文字と建物が1つの画像として機能します。青い空は小さなコーナーラベルのためのクリーンで静かなスペースを提供し、窓の温かい輝きはクールな背景と対比します。ピル型ボタン1つとフロストガラス風カード1つが唯一の競合要素です。

これを参考に: 1つの強力な写真に対象と重なる巨大なワードマークを組み合わせ、他のすべての要素を小さく隅に配置する。

注意点: ページが軽いにも関わらずラボテストで中程度の判定が出たため、大きなヒーロー写真が改善の可能性が最も高い箇所であり、Google からの実際のユーザーデータが不足しているため実際の使い心地については判断できません。

製作: Visuvate Studio。alvara.visuvate.com を訪問。

17. Haoqi Wen

つやのある青い風船のような文字で「hello」と書かれたテキストが薄い空色の背景の上に浮かんでいて、細い格子線と小さな十字マークで満たされたページの中で唯一やわらかい物体です。太くて黒い sans serif の大見出しが左下を固定し、単間隔フォントがナビゲーションとプロフィール部分を担当しています。遊び心と技術的な側面のこの対比は、設計エンジニアに最適です。

これを参考に: タッチ感のある描写されたオブジェクト 1 つと厳密なヘアライングリッド、そして小さいテキスト用の単間隔フォント 1 つを組み合わせれば、個人サイトがあたたかみと正確さを両立できます。

注意: ラボテストではページが遅く非常に重く、実際のユーザーはロード、応答性、レイアウト安定性で問題を目にします。これは大きな描写ヒーローと動的詳細の通常のコストです。

社内設計。haoqi.design を訪問してください。

18. Warm & Fuzzy

フルブリード、やさしくぼかされたフィルムスチルが画面全体を満たし、キャンディーピンク、からし色黄色、緑の葉が冒頭を運びます。つやのあるバブルレタリングが中央に座り、小さなナビゲーションは素朴な sans serif で脇に控えめにとどまります。ページの下端を横切る太いグロテスク見出しはページを固定し、親しみやすく自信に満ちたトーンを設定します。

これを参考に: フルスクリーンの動く画像 1 つを全体の冒頭として使用してから、ロゴ、いくつかの短いリンク、太い 1 行のテキストのみを上に重ねた家具とします。

注意: ページ自体は軽いにもかかわらずラボテストは中程度の結果でした。フルスクリーン動画背景が可能性の高いコストで、Google からの実ユーザーデータが不足しているため、実際のユーザーがどう感じるかは言えません。

Neutral Studio が開発。warmnfuzzy.tv を訪問してください。

19. Glitch&Grit

ページは画面を真ん中で分割し、左側の平らな黒い部分に大きな灰色の花のシルエットが配置され、右側は少し明るいチャコールグレーです。両方の上に、柔らかいライムグリーンの太い開放的な sans serif の巨大な見出しが乗り、灰色と黒の両方に対して読みやすいままです。ナビゲーションとスタジオ名は小さな白い大文字で隅に配置されているため、中央は明確なままです。

これを参考に: 巨大な見出しを単一のアクセントカラーで分割フラット背景と切り抜き形状と組み合わせれば、ページは写真予算がなくても特徴的に見えます。

注意: ページは非常に重くラボテストでは中程度で、Google は実際の使用感について言うのに十分な実ユーザーデータを持たないため、大きなビジュアルが最初に削減を検討する場所です。

glitchandgrit.com を訪問してください。

20. GØDN.studio

ほぼ黒い背景に 1 つの巨大な陳述が重い、タイトに設定されたグロテスク大文字であり、最後の単語は軽いイタリック serif にドロップして声を一度に変わります。粒状でまばらなマーク が静止のようにタイプの後ろに座り、写真なしで深さを加えます。小さく、広くスペースされた単間隔大文字ラベルが周囲に静かに留まるため、見出しが最初に読まれます。

これを参考に: 太い sans 見出しと軽いイタリック serif で 1 つの単語を組み合わせ、その他はすべて暗い背景上の小さくスペースされた単間隔大文字に保ちます。

注意: ページはラボテストで高速で軽く、GSAP と Three.js を実行していることを考えるといいですが、実ユーザーパフォーマンスについて言うのに Google からの実ユーザーデータが不足していました。

Bruno Godinho が開発。studio.godn.pt を訪問してください。

美しく、高速なポートフォリオを作る方法

上記の20サイトは、ポートフォリオがほぼすべてのスタックで独特の見た目を実現できることを示しています。高速なサイトと低速なサイトの違いは、作品自体をどのように読み込むかにあります。

• 3〜5個のプロジェクトを適切に掲載します。採用に関わるUXプロフェッショナル204人を対象としたNielsen Norman Groupの調査では、詳細なケーススタディとして3〜5個のプロジェクトを選ぶことを勧めており、量より質を重視すべきとされています(NN/g)。
• スキャンしやすくします。同じ調査では、採用担当者がポートフォリオ全体をじっくり読むことはめったにないことがわかっているため(NN/g)、問題、あなたの役割、その結果を、ざっと目を通す人の目に留まる場所に配置します。
• 最初の画像を早く読み込みます。最初の画面を埋める画像にloading="lazy"を設定しないでください。JavaScriptで追加するのではなくページのHTMLに含め、fetchpriority="high"を指定します(web.dev)。
• 下にあるものはすべて遅延読み込みし、サイズを設定します。最初の画面外の画像にのみloading="lazy"を使用し、すべての画像にwidthとheightを追加してレイアウトシフトを防ぎます(web.dev)。
• 合計に注意してください。90パーセンタイルではサイト全体で既に5MB以上の画像を送信しており(web.dev)、これら20個のポートフォリオのうち5つは合計で10MB以上の重さがあります。
• 実際の訪問者を自分で測定します。小規模なポートフォリオはChrome UXレポートに掲載されるほどのトラフィックを獲得できないことがあり、web.devは独自のリアルユーザーモニタリングの設定を強く推奨しています(web.dev)。

見た目が良いだけでなく、仕事を獲得するポートフォリオが必要な場合、ポートフォリオのウェブデザインは私の構築方法です。高速で、検索に見つかりやすく、作品を中心に構成されています。現在のサイトが単に新しい見た目と高速な最初の画面が必要な場合は、ウェブサイトのリデザインから始めましょう。

よく聞かれる質問

優れたポートフォリオウェブサイトの要件は何ですか。

作品を大きく早く表示し、それを説明するのに十分なコンテキストを付けます。これら20サイト全体で、最も強力な最初の画面は1つのことを実現しています。非常に大きなタイプの名前、1つのプロジェクト、または1つの写真です。Nielsen Norman Groupの調査は、仕事を獲得する重要な要素を加えています。完成した画像の壁ではなく、ケーススタディとして書き上げられた数個のプロジェクト(NN/g)です。

ポートフォリオは何個のプロジェクトを掲載すべきですか。

Nielsen Norman Groupは詳細なケーススタディとして3〜5個のプロジェクトを選ぶことを推奨しており、量より質を優先すべきです(NN/g)。プロジェクトが少なく、深さがあれば、ページ上の大きな画像も減ります。

ポートフォリオウェブサイトに最適なプラットフォームは何ですか。

このデータではどのスタックに勝敗がついていません。Next.jsは20個中6個で使用され、NuxtとWebflowはそれぞれ2個、Framer、SvelteKit、WordPressはそれぞれ1個で、7個は検出不可能な方法で構築されています。Next.jsだけでも79と37の両方がここにあるため、最新の状態を保つことができ、画像の読み込み方法に時間をかけることができるものを選択してください。

ポートフォリオウェブサイトが遅い理由は何ですか。

原因は通常、作品自体です。最初の画面に大きなサイズの画像とビデオ、または遅延読み込みやJavaScriptで追加されるために読み込みが遅い最初の画像(web.dev)です。この調査では、Googleによって評価された8個のポートフォリオのうち7個が2.5秒のLCP目標を逃しています。

ポートフォリオのCore Web Vitalsデータがない理由は何ですか。

Chrome UXレポートには、統計的に有意なサンプルを形成するのに十分な訪問者がいるページとサイトのみが含まれます(Chrome UX Report)。これら20個のポートフォリオのうち11個は実訪問者データをまったく持っていません。その間はLighthouseなどのラボテストを使用し、フィールド数が必要な場合は独自のリアルユーザーモニタリングを追加してください。

より美しいウェブサイトはどこで見ることができますか?

64の美しいウェブサイトの柱は8つのカテゴリを同じテストでカバーしています。レストランと食品ブランドについては、20の優れたレストランと食品ウェブサイトを参照し、閲覧用のギャラリーについては、ウェブデザインインスピレーションサイトのまとめを参照してください。