本文へ移動
つまずき地図Vibe Dev Navigator
メニュー

AIでサービスをつくる、非エンジニアのための実践ガイド

UI・動きカタログ

タブ切り替え

Tabs

同じ場所で、選んだ見出しの内容へ切り替えるUIです。

危険度: 通常情報整理

今すぐ使う

見た目と使いどころを確かめる

まず動きを試し、意図に合うかを見てください。停止しても内容が分かる設計です。

動きを試す

タブ切り替え

横に並ぶ短い見出しを選ぶと、その下の同じ領域だけが切り替わります。

一部分の見せ方使いたいUI・動きを選ぶ

タブ、ツールチップ、カルーセルなどから選べます。

AIへの依頼文

タブ切り替えを追加する依頼

危険度:通常

内容と対象をひと目確認してから使うと安心です。

分かる範囲で2か所だけ

自分の状況を入れる

空欄のままでもコピーできます。秘密情報は書かずにお試しください。

コピーされる依頼文を確認
目的:
種類の近い内容を、キーボードでも迷わず切り替えられるタブとして整理する。

現在の状態:
【ここに、何をしたらどうなったかを書く】

今回依頼すること:
指定した内容をタブで切り替えられるようにしてください。選択中のタブを見た目と支援技術へ伝え、左右矢印、Home、Endで移動できるようにしてください。タブ名は短くし、切り替えても入力内容を失わないようにしてください。

変更してよい範囲:
【ここに、変更してよい画面やファイルを書く】

変更しない範囲:
重要情報の削除、タブ名だけでは意味が分からない分類、URLで直接開けなくなる大きな構成変更は行わない。

完了条件:
- 選択中のタブと対応する内容が分かる
- マウスとキーボードの両方で切り替えられる
- 狭い画面でもタブ名が読める

実装前に確認すること:
- 対象とするファイル、現在の差分、関連する設定を読み取り、変更計画を短く示す
- 判断できない点があれば、変更する前に止めて質問する

実装後に報告すること:
- 変更したファイルと変更理由
- 実行した確認と、その結果
- 未解決の点や追加で確認が必要な点

使う前に確認
使った後に確認

10秒で分かる説明

横に並ぶ短い見出しを選ぶと、その下の同じ領域だけが切り替わります。

向いている場面

  • 種類の近い内容を同じ場所で比較する
  • 設定や一覧を少数の分類に分ける

確かめる

使いすぎと操作の妨げを防ぐ

見た目の気持ちよさより、読みやすさと操作しやすさを優先します。

向いていない場面

  • 順番に完了する必要がある工程
  • タブが多く、名前を短くできない場合

アクセシビリティ

  • 選択中のタブと対応するパネルを支援技術へ伝える
  • 左右矢印、Home、Endでタブ間を移動できるようにする

理解する

名前と仕組みを知る

AIへ伝えるときに役立つ名前と、実装で確認するポイントです。

別名・探すときの言葉

タブ・切り替えメニュー・タブパネル

実装時の確認

  • タブ名だけで内容の違いが分かるようにする
  • 読み込み済みの軽い内容なら、矢印移動と同時に切り替える