【Next.js】ポートフォリオに動きを付ける方法

公開日: 2026年9月12日 · 読了目安 8 分

Next.js の制作ポートフォリオに、スクロールギャラリーや入場を足す方法。作品が主役のままにする境界、完成ギャラリーの流用。

先に結論：作品より先に動かない

ポートフォリオのモーションは、作品を見せるための順番作りです。パーティクルやカーソル追従が先に来ると、案件の写真が負けます。

効くのは、スクロールで作品が切り替わるギャラリーと、ケーススタディの弱い入場です。ギャラリーは https://design-layer.com/articles/nextjs-scroll-gallery-guide です。

1つ目は、同じ大きさのサムネグリッドだけなことです。1件だけ大きくします。

2つ目は、自動カルーセルで作品が流れることです。依頼主は止めたいときに止められません。

3つ目は、ケース本文より演出が長いことです。

一番見せたい案件をベントの目玉にし、残りは静的グリッド。ホバーは画像の弱いズームだけです。

スクロール位置で「今の作品」を切り替えます。枚数は4〜8が扱いやすいです。実装の詳細はギャラリー記事です。

ピンと切り替わりのタイミングは、自分で揃えると半日かかります。

DesignLayer でライブスクロールし、画像とタイトルだけ差し替えてください。https://design-layer.com/components

無料コピーは1日3回です。作品画像の権利と alt は、載せる前に確認します。