縦タブ機能紹介

このパーツの使いどころと実装ポイント

縦タブ機能紹介は、左に機能リスト、右に詳細プレビューを並べたタブUIです。grid-template-columns:280px 1fr で固定幅のナビと可変幅の本文を横に並べ、左の <a> に is-act を付けて選択中の機能を示します。各項目の先頭にはインラインSVGアイコンが入り、機能の性格をひと目で伝えます。クリックで右側の内容を切り替える前提の構造です。

向いている場面

• 機能が多く一覧では伝えきれないSaaS製品
• 用途別に説明を出し分けたいツールやアプリ
• 限られた縦スペースで複数機能を紹介したいLP

固有の勘所は、左リストの項目名を短く具体的にすること。「高速処理」のように一語で性格が分かると選びやすくなります。右側のプレビューには実際の画面やスクリーンショットを入れると、抽象的な説明より一気に伝わります。

実装上の注意

横並びのタブは画面が狭いと窮屈なので、スマートフォンでは上下積みのアコーディオン的な形に切り替えると読みやすくなります。タブはキーボードでも選べるよう、選択中の項目に aria-selected を付けるなどの配慮があると操作性が上がります。切り替え時に右側だけが更新され、ページ全体が再読み込みされない作りにしておくと快適です。