【Next.js】機能紹介セクションの作り方を解説

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

Next.js の機能紹介（Features）を、アイコン3列で終わらせない作り方。見出しの型、入場の遅延、ベントとの使い分け、完成セクションの流用。

先に結論：機能名ではなく、できるようになることを書く

機能紹介が SaaS 顔になるのは、アイコンと短い名詞を3列に並べたときです。カードの見出しは機能名ではなく、訪問者ができるようになることにします。

枚数は3か6が安定です。9枚以上は「全部載せる」印象になり、読まれません。

動きは、カードが下から少し遅れて揃う程度です。ホバーは影より、枠かアイコンの色を変えます。

1つ目は、本文が機能の再掲なことです。見出しが「高速」なら、本文は誰の何が速くなるかです。

2つ目は、アイコンが全部同じ線の太さで、情報が無いことです。無くても意味が通るなら、アイコンは装飾です。

3つ目は、ヒーローと同じ強さのモーションです。ここは読む場所です。

見出し、短いリード、3カード。カード内はアイコン、見出し、2行の本文。均等な余白の方が、変なモーションより今っぽく見えます。

機能が画面そのもののときは、スクリーンショットを左右交互に置きます。入場は画像を少し遅らせます。ヒーローの作り方は https://design-layer.com/articles/nextjs-animated-hero-section-guide です。同じ強さは付けません。

ホバーでカードが持ち上がり、アイコンが少し動く塊は、shadcn の Card 連打では出ません。

DesignLayer でライブ確認し、見出しだけ差し替えてください。https://design-layer.com/components

無料枠は1日3回です。機能と料金を同じ日に取る計画が現実的です。料金表は https://design-layer.com/articles/nextjs-pricing-table-guide です。

構成で繰り返し出る質問です。

写真や数字を大きく見せたいならベントです。説明文が主なら3列の方が読めます。ベントの作り方は別記事にまとめています。