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

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

UI・動きカタログ

カルーセル

Carousel

同じ大きさの見本を、前後へ一枚ずつ切り替えるUIです。

危険度: 通常閲覧

今すぐ使う

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

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

AIへの依頼文

カルーセルを追加する依頼

危険度:通常

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

分かる範囲で2か所だけ

自分の状況を入れる

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

コピーされる依頼文を確認
目的:
関連する複数の見本を、利用者の操作で一枚ずつ確認できるカルーセルにする。

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

今回依頼すること:
指定した見本を一枚ずつ切り替えるカルーセルにしてください。前へ・次へのボタンと現在位置を表示し、自動再生は使わないでください。キーボードで操作でき、切り替えた内容が支援技術へ適切に伝わるようにしてください。

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

変更しない範囲:
重要情報を見えないスライドへ隠す、高速な自動再生、停止できない切り替え、スワイプだけに依存する操作は行わない。

完了条件:
- 前後の操作と現在位置が分かる
- 自動で勝手に切り替わらない
- キーボードでも全スライドを確認できる

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

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

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

10秒で分かる説明

一枚の見本と現在位置が表示され、前へ・次への操作で内容が切り替わります。

向いている場面

  • 関連する少数の画像や事例を同じ大きさで見せる
  • 一つずつ集中して見てもらう

確かめる

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

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

向いていない場面

  • すべての情報を比較する必要がある
  • 重要情報が見えないスライドへ隠れる場合

アクセシビリティ

  • 自動再生を避け、使う場合は明確な停止操作を用意する
  • 前後ボタンと現在位置を文字でも伝える

理解する

名前と仕組みを知る

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

別名・探すときの言葉

スライダー・スライドショー・横送り

実装時の確認

  • スワイプだけでなくボタンでも操作できるようにする
  • 切り替え後の内容と位置を適切に通知する