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

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

UI・動きカタログ

スクロール・リビール

Scroll reveal

下へ進むと、カードや見出しがふわっと現れる演出です。

危険度: 通常登場

今すぐ使う

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

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

動きを試す

スクロール・リビール

要素が少し下から入りながら透明から通常表示へ変わります。

01 状況を伝える何をしたら、どうなった?

AIへの依頼文

スクロール・リビールを追加する依頼

危険度:通常

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

分かる範囲で2か所だけ

自分の状況を入れる

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

コピーされる依頼文を確認
目的:
重要な区切りが分かる、控えめなスクロール・リビールを追加する。

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

今回依頼すること:
指定した要素だけに、一度だけ短く表示されるスクロール・リビールを追加してください。動きが無効でも内容を読めるようにし、動きを減らす端末設定では演出を止めてください。

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

変更しない範囲:
本文の内容、レイアウト順、指定外の要素、操作に必要なボタンの状態は変えない。

完了条件:
- 指定した要素だけが動く
- 演出がなくても情報と操作が失われない
- 動きを減らす設定で演出が無効になる

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

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

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

10秒で分かる説明

要素が少し下から入りながら透明から通常表示へ変わります。

向いている場面

  • 章の切り替わりを伝える
  • カードのまとまりを順に見せる

確かめる

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

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

向いていない場面

  • 重要情報を演出が終わるまで隠す場合
  • すべての要素へ繰り返し使う場合

アクセシビリティ

  • 動きを減らす設定では演出を無効にする
  • 演出がなくても内容と順序を理解できるようにする

理解する

名前と仕組みを知る

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

別名・探すときの言葉

スクロールでふわっと表示・フェードイン

実装時の確認

  • 対象を少数に限定する
  • 一度だけ、短い時間で完了させる