本文へスキップ
ひとりAIラボ

HTMLアニメーションのエフェクト

スケルトン

Skeleton screen

読み込みのあいだ、中身の形をした灰色の骨組みを先に見せる表示。

見本：灰色の骨組みの上を光が3回流れて止まる見本。動きを減らす設定のときは、光を出さず灰色だけです。ひとりAIラボが作った、その場で動くHTMLとCSSです。

使いどころ　一覧やカードの読み込みを待ってもらうとき。

コピペ用プロンプト

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

日本語

読み込み中は、[カード]の形をしたスケルトンを出してください。光が流れる演出は transform で動かし、5秒以内に止める。動きを減らす設定の人には、光を出さず灰色のブロックだけにしてください。

English

While loading, show a skeleton shaped like [the cards]. Move the shimmer with transform and stop it within 5 seconds. For people who prefer reduced motion, skip the shimmer and show plain gray blocks.

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

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

スケルトンが各社の公式プロンプトガイドに載っているか
ガイド記載
v0公式記載なし[1][2][3]
Lovable公式記載なし[4][5]
MDN公式記載なし[6][7][8][9][10][11][12][13]

3つのガイドとも、スケルトンという言葉は見当たりませんでした。web.dev の prefers-reduced-motion の記事には出てきます。[14]

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

気をつけること

  • 自動で動くものは、5秒以内に止めるか、止める手段を用意します（WCAG 2.2.2）。この見本も5秒以内に止まります。[15]
  • 動かすのは transform と opacity にします。レイアウトや描画のやり直しが起きるプロパティは、どうしても必要なとき以外は避けます。[16]

出典

  1. 1.v0 Docs（トップ）（外部サイト、新しいタブで開く）https://v0.app/docs
  2. 2.v0 Docs「Text Prompting」（外部サイト、新しいタブで開く）https://v0.app/docs/text-prompting
  3. 3.v0 Docs「Design Mode」（外部サイト、新しいタブで開く）https://v0.app/docs/design-mode
  4. 4.Lovable Docs「Prompting best practices」（外部サイト、新しいタブで開く）https://docs.lovable.dev/prompting/prompting-one
  5. 5.Lovable Docs「Prompt library」（外部サイト、新しいタブで開く）https://docs.lovable.dev/prompting/prompting-library
  6. 6.MDN「Using CSS animations」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animations/Using_CSS_animations
  7. 7.MDN「Using CSS transitions」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_transitions/Using_CSS_transitions
  8. 8.MDN「View Transition API」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/API/View_Transition_API
  9. 9.MDN「CSS scroll-driven animations」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_scroll-driven_animations
  10. 10.MDN「animation-timeline」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/animation-timeline
  11. 11.MDN「prefers-reduced-motion」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion
  12. 12.MDN「steps()」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/easing-function/steps
  13. 13.MDN「position」（外部サイト、新しいタブで開く）https://developer.mozilla.org/en-US/docs/Web/CSS/position
  14. 14.web.dev（prefers-reduced-motion の記事）（外部サイト、新しいタブで開く）https://web.dev/articles/prefers-reduced-motion
  15. 15.W3C「Understanding SC 2.2.2: Pause, Stop, Hide」（外部サイト、新しいタブで開く）https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html
  16. 16.web.dev（アニメーションの性能の記事）（外部サイト、新しいタブで開く）https://web.dev/articles/animations-guide

今週の一歩

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

できた見本を短い動画にするならClaude Codeで短いモーション動画を作るへ（ターミナルを使います）。