Webデザイン・UIの頼み方

アニメーション

Animation

表示やホバーのときに、要素を少しだけ動かすこと。

見本：記事のカードが下から順にふわっと出てくる動きを、はじめからおわりまでコマ送りで並べた画面です。ひとりAIラボが作ったサンプル画面です。

使いどころ　ボタンやカードに、さわった手ごたえを足したいとき。

関連　フェードイン、ホバーで浮かせる

コピペ用プロンプト

[ ] のところを書きかえて使ってください。英語のほうが伝わりやすいツールもあります。

日本語

[カードやボタン]に、控えめなアニメーションをつけてください。表示されるときにふわっと出て、ホバーで少し浮く程度に。動きを減らす設定の人には動かさないでください。

English

Add subtle animation to [the cards or buttons]: fade in gently when they appear and lift slightly on hover. Turn it off for people who prefer reduced motion.

ひとりAIラボ作成のテンプレートです（各社の公式ガイドの文ではありません）。

公式ガイドに載っているか

アニメーションが各社の公式プロンプトガイドに載っているか
ガイド	記載
v0	公式記載なし^[1]^[2]^[3]
Lovable	載っている^[4]

確認日 2026年11月2日。公式ガイドのページを開いて、本文にこの言葉（英語）が出てくるかを見ました。「公式記載なし」は、出典のページに見当たらなかったという意味です。

出典

1.v0 Docs（トップ）（外部サイト、新しいタブで開く）https://v0.app/docs
2.v0 Docs「Text Prompting」（外部サイト、新しいタブで開く）https://v0.app/docs/text-prompting
3.v0 Docs「Design Mode」（外部サイト、新しいタブで開く）https://v0.app/docs/design-mode
4.Lovable Docs「Prompting best practices」（外部サイト、新しいタブで開く）https://docs.lovable.dev/prompting/prompting-one

今週の一歩

上のコピペ用プロンプトの日本語版を写して、[ ] を自分の内容に書きかえ、v0 の無料版（1日7メッセージ）で作りかけの画面に1回だけ足して、前と見くらべてください。

どのAIに頼むか（v0・Bolt などの無料版）は開発する人のAIの使い分け（UI試作）にまとめています。