Category · 機能紹介セクション
機能紹介セクションのデザイン例とAIプロンプト
プロダクト機能を並べるセクションのAIプロンプト集。アイコン+見出し+短文の3列、画面キャプチャと交互配置、インタラクティブ表示など多様。
機能紹介について
プロダクトのできることを並べて見せる場所。単なるリストではなく、使用シーンが想像できる見せ方が成約につながります。アイコンと見出しと短文の3列、スクリーンショットとの交互配置、タブ切り替え、ベントー風の不均等グリッドなど、プロダクトの性質と機能数で形は変わります。すべて同じ大きさのカードは、どの機能も同じ重要度だという嘘をつきます。重みの差は面積で表現するか、1セクションの機能数を6〜9個に抑えて階層化してください。
よく使われる場面
- SaaSプロダクトの機能比較
- アプリの主要機能ハイライト
- 開発ツールのAPI・機能説明
- ハードウェアのスペック訴求
- モバイルアプリのストア向け紹介
成功のポイント
- 1機能につき見出し+1-2行の説明で簡潔に
- アイコンは同じスタイルで統一する
- 最重要機能を最初に配置する
- スクショは実データを使ってリアルさを出す
- 3-6機能までが認知しやすい
このカテゴリのデザイン
建築設計図風の機能紹介
建築・CAD図面のブループリントを再構築した機能紹介セクション。シアンブルーの方眼背景・寸法線・断面記号・コールアウトで「精密に設計された製品」の信頼感を技術的なビジュアルで叩きつける尖った設計。
アイソメトリック投影の機能紹介セクション
30度傾斜の擬似3DでUIカードを浮かべる、未来感のあるアイソメトリック機能紹介。Stripe・Linear・Vercel系のモダンSaaSの定番表現を CSS だけで再現する尖った設計。
B2Bコーポレートの機能紹介セクション
B2B SaaSやエンタープライズ製品向けの機能紹介セクション。落ち着いた寒色配色と整然としたグリッド、データ感のあるアイコンで「実用と信頼」を伝える設計。
タイル型グリッドの機能紹介
大小が異なるタイルを組み合わせて 6 機能を並べる、暗背景のベントーグリッド (タイル型レイアウト) の機能紹介セクション。主役の機能を大きく、補助機能を小さく配置することで、説明文を読まなくても重みづけが伝わる設計。