サイトに 動きを付ける プロンプト100

ページのいちばん上（ファーストビュー）を作り、見出しに動きを付けてください。

【会社名】
【見出し（2行）】
【説明文（1文）】
【ボタンの文字】
【写真】

動き：
・読み込みが終わったら、見出しを1行ずつ下から浮かび上がらせる。各行は「下に24pxずれた位置・透明」から「元の位置・不透明」へ0.8秒。2行目は1行目の0.15秒あとに始める
・各行を overflow: hidden の枠で包み、行の外にはみ出した部分は見せない
・見出しの最後の行が出終わってから0.2秒あとに、説明文とボタンを0.6秒かけて表示する（読み込みから約1.2秒後）
・写真は1.06倍から等倍へ、1.6秒かけてゆっくり戻す。写真の枠からはみ出した部分は見せない（写真は CSS で height: auto と object-fit: cover を指定し、縦に引き伸ばされないようにする）
・イージングは cubic-bezier(0.2, 0.8, 0.2, 1)
・動かすのは transform と opacity だけ
・動きを減らす設定（prefers-reduced-motion: reduce）の人には、動かさず最初から表示する
・スマホでは、文字→写真の順に縦に並べ、見出しは画面幅に収まる大きさにする
・HTML・CSS・素のJavaScriptだけで作り、動きのための外部ライブラリは読み込まない（Webフォントの読み込みはよい）。1つのHTMLファイルにまとめる

やらないこと：
・会社名や見出しの文字を崩したり、入れ替えたりする演出
・見出しを1文字ずつ出す（読み終わるまで待たされる）
・動きを自動で何度もくり返す

実績の数字を並べるセクションを作り、数字が増えていく動きを付けてください。

【見出し】
【数字と単位と項目名（3〜4つ）】

動き：
・数字の列が画面の下から3分の1の高さまで来たら、0から目標の数字まで1.6秒で増やす。終わりに近づくほどゆっくり（ease-out）
・1回だけ動かす。画面から出て戻ってきても、もう一度は数えない
・小数のある数字（5.5など）は、小数点以下の桁数を最後まで保つ
・数字の幅で文字が左右に揺れないよう、数字は等幅にする（font-variant-numeric: tabular-nums）
・単位（棟・年・％など）は動かさず、最初から表示する
・創業年や西暦など、途中の数字が事実と違って見えるものは数えず、最初から最後の数字を表示する
・動きを減らす設定（prefers-reduced-motion: reduce）の人には、最初から最終の数字を表示する
・スマホでは2列×2段に並べる
・HTML・CSS・素のJavaScriptだけで作り、動きのための外部ライブラリは読み込まない（Webフォントの読み込みはよい）。1つのHTMLファイルにまとめる

数えないもの（最初から最終の数字を表示する）：
・創業年・西暦・電話番号・郵便番号（数えている途中の数字が、間違った年や番号に見えるため）

本文の中の大切な言葉に、蛍光ペンのようなマーカーが左から引かれる動きを付けてください。

【本文（2〜3文）】
【マーカーを引く言葉（本文の中の一部・2か所まで）】
【マーカーの色】

動き：
・本文が画面の下から3分の1の高さまで来たら、1か所目のマーカーを左から右へ0.8秒で引く。2か所目は、1か所目が引き終わってから0.2秒後に同じように引く
・マーカーは、言葉に背景のグラデーションで色を塗り、background-size を 0% から 100% へ動かして引く。塗るのは文字の下半分（高さ40%）だけ
・マーカーの色は【マーカーの色】を不透明度0.35程度に薄めて使い、上の文字がはっきり読めるようにする
・言葉が2行にまたがっても、行ごとに引く（display: inline と box-decoration-break: clone）
・イージングは cubic-bezier(0.65, 0, 0.35, 1)。1回だけ動かす
・本文は18px（スマホ16px）、行の高さ1.9
・見本では、上に画面1つ分の余白を取り、スクロールして動きを確かめられるようにする

・動きを減らす設定（prefers-reduced-motion: reduce）の人には、動かさずに表示する（上の「動き」に書き方の指定があるときは、そちらに従う）
・スマホ（幅375px）でも横にはみ出さず、文字が画面に収まるようにする。スマホの形に切り替えるのは、画面の幅が767px以下のとき（上の「動き」に別の幅が書いてあるときは、そちらに従う）
・写真を使うときは、object-fit: cover で枠に収め、img の height 属性のせいで縦に引き伸ばされないようにする（枠の高さを決めない写真は height: auto）
・HTML・CSS・素のJavaScriptだけで作り、動きのための外部ライブラリは読み込まない（Webフォントの読み込みはよい）。1つのHTMLファイルにまとめる

同じ場所のビフォーとアフターの写真を重ね、境目のつまみを左右に動かして見比べられる部品を作ってください。

【ビフォーの写真】
【アフターの写真】
【写真の下に置く説明（1文）】

動き：
・2枚の写真を同じ枠に重ねる。枠は縦横比3:2、横幅はPCで最大800px、スマホで画面の幅いっぱい（左右の余白を除く）。下にアフター、上にビフォーを置き、ビフォーは clip-path: inset(0 ◯% 0 0) で左側だけを見せる
・境目に縦の線（太さ2px・白）を引き、線の上下中央に丸いつまみ（直径44px・白・中に「◀ ▶」を12pxで）を置く。最初の境目は枠の左から50%
・動かし方は1つにする。枠の上に、枠と同じ大きさの透明な input type="range"（0〜100・step 0.1）を重ね、その値で境目の位置を決める。これでマウスのドラッグ・指でなぞる・キーボードの左右キーのどれでも動かせる。input には aria-label="ビフォーとアフターの境目" を付ける
・境目は手の動きにそのまま付いてこさせ、transition は付けない
・写真の左上に「ビフォー」、右上に「アフター」の小さな札（背景 rgba(0,0,0,0.55)・白い文字14px・内側の余白 4px 8px・角丸2px）を、写真の上に重ねて置く
・枠の全体が画面に入ったら（枠の下端が画面の下端より上に来たら）、1回だけ、境目を50%→35%→50%と1.2秒で動かし、動かせることを知らせる（イージングは ease-in-out）。それまでに利用者が枠に触れていたら（押す・なぞる・キーで動かす）、この動きはしない。動いている途中で触れられたら、その場で止めて手の操作を優先する
・説明は写真の下に置き、写真の上に重ねない。長いときは折り返す（文章は切らない）
・見本では、上に画面1つ分、下に画面の60%の余白を取り、スクロールして知らせる動きを確かめられるようにする
・動きを減らす設定の人には、知らせる動きをしない。手で境目を動かすことは、そのままできるようにする

・動きを減らす設定（prefers-reduced-motion: reduce）の人には、動かさずに表示する（上の「動き」に書き方の指定があるときは、そちらに従う）
・スマホ（幅375px）でも横にはみ出さず、文字が画面に収まるようにする。スマホの形に切り替えるのは、画面の幅が767px以下のとき（上の「動き」に別の幅が書いてあるときは、そちらに従う）
・写真を使うときは、object-fit: cover で枠に収め、img の height 属性のせいで縦に引き伸ばされないようにする（枠の高さを決めない写真は height: auto）
・HTML・CSS・素のJavaScriptだけで作り、動きのための外部ライブラリは読み込まない（Webフォントの読み込みはよい）。1つのHTMLファイルにまとめる

事例のカードを並べ、上に並べた種類のボタンを押すと、その種類のカードだけに絞り込まれ、残ったカードが滑らかに並び替わる動きを付けてください。

【種類（3〜4つ）】
【事例（6つ前後）：写真・名前・種類】
【アクセントの色】

動き：
・カードの上に種類のボタンを横に並べ、先頭に「すべて」を置く。ボタンには aria-pressed を付け、押されているボタンは背景を【アクセントの色】・文字を白にする。ほかのボタンは白の背景に1pxの線（#DCDFDB）。ボタンの高さは44px、横に並びきらないときは折り返す
・カードはPC 3列・スマホ 1列（間は24px）。写真は縦横比4:3で、名前と種類は写真の下に置く
・ボタンを押したら、次の3つを行う
  1. 外れるカードを、0.25秒で透明・0.96倍にしてから非表示（display: none）にする（イージングは ease-in）。外れるカードが無いときは、待たずに 2. と 3. を始める
  2. 1. が終わったら、残ったカードを新しい位置へ0.4秒で動かす。動きは FLIP のやり方で作る（並び替える前の位置を覚えておき、並び替えた後の位置との差を transform で打ち消してから、transform を0に戻す。イージングは cubic-bezier(0.2, 0.8, 0.2, 1)）
  3. 新しく出てくるカードは、2. と同時に、0.96倍・透明から1倍・不透明へ0.3秒で表示する（イージングは 2. と同じ）
・動いている途中に別のボタンが押されたら、いまの動きを止め、その時点で見えている位置から新しい並びへ動かす
・カードの並びの上に「◯件の事例」と件数を出し、ボタンを押した瞬間に書き換える（aria-live="polite"）
・動きを減らす設定の人には、消す・並び替える・出すを、すべて一瞬で行う

・動きを減らす設定（prefers-reduced-motion: reduce）の人には、動かさずに表示する（上の「動き」に書き方の指定があるときは、そちらに従う）
・スマホ（幅375px）でも横にはみ出さず、文字が画面に収まるようにする。スマホの形に切り替えるのは、画面の幅が767px以下のとき（上の「動き」に別の幅が書いてあるときは、そちらに従う）
・写真を使うときは、object-fit: cover で枠に収め、img の height 属性のせいで縦に引き伸ばされないようにする（枠の高さを決めない写真は height: auto）
・HTML・CSS・素のJavaScriptだけで作り、動きのための外部ライブラリは読み込まない（Webフォントの読み込みはよい）。1つのHTMLファイルにまとめる

スクロールして読み進めると、スマホでは画面の下に「電話」と「予約」のボタンを並べた帯が現れ、ページのいちばん下まで来たら引っ込む動きを付けてください。

【電話のボタンの文字と電話番号】
【予約のボタンの文字とリンク先】
【ボタンの色】

動き：
・スマホ（幅767px以下）では、画面の下に横幅いっぱいの帯を固定する（position: fixed・bottom: 0）。帯の高さは64pxに、iPhone の画面下の余白（env(safe-area-inset-bottom)）を足したもの。帯の上に1pxの線（#DCDFDB）、背景は白
・帯の中に、電話のボタン（白い背景・1pxの線と文字【ボタンの色】）と予約のボタン（背景【ボタンの色】・白い文字）を、半分ずつの幅で並べる（間8px・左右の余白12px・ボタンの高さ48px・文字16px）。電話のボタンは a 要素の href="tel:電話番号"
・PC（幅768px以上）では、同じ2つのボタンを横に並べた箱を、画面の右下（右と下から24px・幅360px・白い背景・1pxの線 #DCDFDB・内側の余白12px）に固定する
・帯（PCは箱）は、最初は下へ隠しておき（transform: translateY(100%)。PCは translateY(calc(100% + 24px))）、下へ画面の高さの半分より多くスクロールしたら（window.scrollY が window.innerHeight × 0.5 より大きくなったら）、0.3秒で元の位置へ出す（イージングは ease-out）。それより上に戻ったら、同じ0.3秒で隠す
・ページのいちばん下のフッターが画面に入ったら（IntersectionObserver）、帯を隠す。フッターに電話番号を書いておけば、二重に並ばない
・隠れているあいだは、ボタンが Tab キーで選ばれないようにする（visibility: hidden を、隠し終わってから切り替える）
・スマホでは、ページの最後の部分が帯に隠れないよう、body の下に帯の高さ分の余白（padding-bottom）を付ける。帯の中のボタンは、帯の上下中央に置く
・見本では、本文の段落を縦に画面3つ分ほど並べ、いちばん下に電話番号（tel: のリンク）を書いたフッターを置く
・動きを減らす設定の人には、出し入れに transition を付けない

・動きを減らす設定（prefers-reduced-motion: reduce）の人には、動かさずに表示する（上の「動き」に書き方の指定があるときは、そちらに従う）
・スマホ（幅375px）でも横にはみ出さず、文字が画面に収まるようにする。スマホの形に切り替えるのは、画面の幅が767px以下のとき（上の「動き」に別の幅が書いてあるときは、そちらに従う）
・写真を使うときは、object-fit: cover で枠に収め、img の height 属性のせいで縦に引き伸ばされないようにする（枠の高さを決めない写真は height: auto）
・HTML・CSS・素のJavaScriptだけで作り、動きのための外部ライブラリは読み込まない（Webフォントの読み込みはよい）。1つのHTMLファイルにまとめる

料金表の上にスイッチを置き、「月払い」と「年払い」を切り替えると、金額が下から入れ替わる動きを付けてください。

【プラン（2〜3つ）：名前・月払いの金額・年払いの金額・ひとこと】
【年払いのおトクの書き方（例：年払いは2か月分おトク）】
【アクセントの色】

動き：
・スイッチは button 要素（role="switch"・aria-checked。年払いのときを true にし、button の名前は「年払い」）で作る。button の外の左に「月払い」、右に「年払い」の文字を置き、間に幅52px・高さ28px・角丸14pxの台を置く。台の中に直径22pxの白い丸を置く（台の角丸は、スイッチの形のため 2px の決まりから外してよい）
・月払いのとき台は #C9D3CC、丸は左。年払いのとき台は【アクセントの色】、丸は右。丸は0.25秒で左右に動かす（transform: translateX・イージングは cubic-bezier(0.2, 0.8, 0.2, 1)）。いま選んでいる側の文字は #1F2320・太さ500、もう一方は #6B716C（太さが変わっても文字の幅が変わらないよう、太字の幅を先に取っておく）
・左右の文字を押しても、その側に切り替える
・年払いの文字の右に、【年払いのおトクの書き方】の小さな札（12px・背景 #E3EDE6・文字【アクセントの色】・内側の余白 2px 8px・角丸2px）を置く
・プランのカード（白い背景・1pxの線 #DCDFDB・角丸2px・内側の余白24px）に、名前（18px）・金額（32px・white-space: nowrap）・単位（14px・「/月」か「/年」）・ひとことを置く。年払いのときは、金額の下に「月あたり ◯円」（14px・#6B716C）を出す。「月あたり」の行は月払いのときも場所だけ取っておき（visibility: hidden）、切り替えでひとことが上下しないようにする
・切り替えたら、いまの金額（単位と「月あたり」も一緒に）を上へ12px動かしながら0.15秒で透明にし、それが終わってから、新しい金額を下12pxの位置・透明から元の位置へ0.15秒で表示する（どちらも ease-out）。金額の入る枠の高さは固定し、入れ替えの間に下の文がずれないようにする
・金額が変わったことを画面読み上げに伝える（金額を囲む要素に aria-live="polite"）
・カードはPC 横に並べる（間24px）・スマホ 1列
・動きを減らす設定の人には、丸の移動と金額の入れ替えを一瞬で行う

・動きを減らす設定（prefers-reduced-motion: reduce）の人には、動かさずに表示する（上の「動き」に書き方の指定があるときは、そちらに従う）
・スマホ（幅375px）でも横にはみ出さず、文字が画面に収まるようにする。スマホの形に切り替えるのは、画面の幅が767px以下のとき（上の「動き」に別の幅が書いてあるときは、そちらに従う）
・写真を使うときは、object-fit: cover で枠に収め、img の height 属性のせいで縦に引き伸ばされないようにする（枠の高さを決めない写真は height: auto）
・HTML・CSS・素のJavaScriptだけで作り、動きのための外部ライブラリは読み込まない（Webフォントの読み込みはよい）。1つのHTMLファイルにまとめる

よくある質問を一覧にし、質問を押すと答えが下に開き、右の「＋」の印が「－」に変わる動きを付けてください。

【質問と答え（4〜8組）】
【アクセントの色】

動き：
・1組を「質問の行」と「答え」にする。質問の行は button 要素（文字17px・太さ500・左に「Q」の文字【アクセントの色】・右に「＋」の印）で、aria-expanded と aria-controls を付ける。組と組の間に1pxの線（#DCDFDB）を引き、質問の行の上下の余白は20px
・「＋」の印は、横線と縦線（どちらも長さ16px・太さ2px・【アクセントの色】）を重ねて作る。開いたら縦線を0.3秒で縦に縮めて消し（transform: scaleY(0)）、「－」にする。閉じたら同じ0.3秒で戻す（イージングは ease-out）
・答えは、質問の行の下に開く（答えの下の余白は20px）。高さは、答えを包む要素の grid-template-rows を 0fr から 1fr へ0.3秒で変えて開く（イージングは cubic-bezier(0.2, 0.8, 0.2, 1)）。答えの文字は、開き始めてから0.1秒後に透明から0.2秒で表示し、閉じるときは待たずに0.2秒で透明にする。閉じ終わったら visibility: hidden にする
・答えの左には「A」の文字（#6B716C）を置き、答えの文は16px・行の高さ1.8
・ほかの質問を開いても、開いている質問は閉じない
・質問の行（button）に id を付け、アドレスの # がその id と同じときは、ページを開いたときにその質問を、動きなしで開いた状態にしておく
・動きを減らす設定の人には、開け閉めと印の変化を一瞬で行う

・動きを減らす設定（prefers-reduced-motion: reduce）の人には、動かさずに表示する（上の「動き」に書き方の指定があるときは、そちらに従う）
・スマホ（幅375px）でも横にはみ出さず、文字が画面に収まるようにする。スマホの形に切り替えるのは、画面の幅が767px以下のとき（上の「動き」に別の幅が書いてあるときは、そちらに従う）
・写真を使うときは、object-fit: cover で枠に収め、img の height 属性のせいで縦に引き伸ばされないようにする（枠の高さを決めない写真は height: auto）
・HTML・CSS・素のJavaScriptだけで作り、動きのための外部ライブラリは読み込まない（Webフォントの読み込みはよい）。1つのHTMLファイルにまとめる

口コミの抜粋をカードにして横一列に並べ、左へゆっくり流し続ける動きを付けてください。止めるボタンも付けてください。

【口コミ（6〜10件）：星の数（5点満点）・抜粋（1〜2文・60文字まで）・お名前と時期（例：S様・2025年10月）】
【口コミの出どころ（例：Googleの口コミより）】

動き：
・カード（横幅300px・スマホ260px・白い背景・1pxの線 #DCDFDB・角丸2px・内側の余白20px）に、上から星（SVG・16px・金色 #C9A227）、抜粋（16px・行の高さ1.8）、お名前と時期（14px・#6B716C）を置く。星には role="img" と aria-label="5点中5点" のように付ける
・カードを横一列に並べた帯を2つ続けて置き（同じ並びを2回・2つ目は aria-hidden="true"）、帯全体を左へ、1つ分の長さだけ60秒で動かしてくり返す（@keyframes で translateX(0) から translateX(-50%)・linear・infinite）。カードの間は20pxで、つなぎ目で跳ばないよう、各帯の右端にも20pxの余白を付ける
・帯にマウスを乗せているあいだと、中にフォーカスがあるあいだは止める（animation-play-state: paused）。カードにリンクが無いときは、帯を包む要素に tabindex="0" と role="region"・aria-label を付けて Tab キーで入れるようにし、フォーカスの枠はぼかしの外側の要素に出す
・帯の下に、左に出どころ（14px・#6B716C）、右に「止める」ボタン（文字14px・押せる範囲は縦横44px以上）を置く。押したら止め、文字を「動かす」に変える（ボタンの文字が操作を表すので、aria-pressed は付けない）。星の塗らない部分は #DCDFDB
・流れる帯の左右の端は、白へ溶けるようにぼかす（mask-image・ぼかす幅はPC 64px・スマホ 32px）
・ページの横にはみ出さないよう、帯を包む要素に overflow: hidden を付ける
・動きを減らす設定の人には流さず、カードを横にスクロールできる一列として表示する（overflow-x: auto。2つ目の帯・「止める」ボタン・左右のぼかしは外す）

・動きを減らす設定（prefers-reduced-motion: reduce）の人には、動かさずに表示する（上の「動き」に書き方の指定があるときは、そちらに従う）
・スマホ（幅375px）でも横にはみ出さず、文字が画面に収まるようにする。スマホの形に切り替えるのは、画面の幅が767px以下のとき（上の「動き」に別の幅が書いてあるときは、そちらに従う）
・写真を使うときは、object-fit: cover で枠に収め、img の height 属性のせいで縦に引き伸ばされないようにする（枠の高さを決めない写真は height: auto）
・HTML・CSS・素のJavaScriptだけで作り、動きのための外部ライブラリは読み込まない（Webフォントの読み込みはよい）。1つのHTMLファイルにまとめる

入力欄から離れたときに中身を確かめ、間違いがあれば欄の下に、直し方の分かる短い文をすっと出す動きを付けてください。直したら、その場で文を消してください。

【入力欄（3〜4つ）：項目名・確かめる決まり・間違いのときの文（例と直し方を入れる）】
【アクセントの色】

動き：
・確かめるのは、欄から離れたとき（blur）。一度間違いを出した欄は、そのあとは1文字打つたびに確かめ直し、正しくなったらすぐに文を消す（打っている途中では、新しく間違いを出さない。出すのは次に欄から離れたとき）
・間違いのときは、入力欄の線を2pxの #B3261E にし（box-shadow: inset 0 0 0 1px で1px足す）、欄の下に文（14px・#B3261E）を出す。文は、上に4pxずれた位置・透明から元の位置へ0.2秒で表示する（ease-out）。消すときは0.15秒で透明にする
・文の前には「！」などの記号を付けず、言葉だけで書く。色だけに頼らないよう、文の頭に「入力を確かめてください：」のような言葉を入れる
・入力欄に aria-invalid="true" と、文の id を aria-describedby で付ける。正しくなったら aria-invalid="false" にし、aria-describedby を外す
・文を出すたびに下の欄がずれて見えないよう、文の入る場所を最初から取っておく（高さは、その欄の文が入りきる行数分。スマホでは2〜3行になる。文は文節で折り返す）
・送信ボタンを押したときは、すべての欄を確かめ、間違いのある最初の欄にフォーカスを移す。間違いが無ければ送る（見本では送らずに「送信できる状態です」と出す）。ブラウザの入力チェックの吹き出しは出さない（form に novalidate）
・入力欄は高さ48px・1pxの線 #C9CDC9・角丸2px・文字16px。項目名は欄の上に置く。欄と欄の間は12px（文の入る場所を除く）
・動きを減らす設定の人には、文の出し入れを一瞬で行う

・動きを減らす設定（prefers-reduced-motion: reduce）の人には、動かさずに表示する（上の「動き」に書き方の指定があるときは、そちらに従う）
・スマホ（幅375px）でも横にはみ出さず、文字が画面に収まるようにする。スマホの形に切り替えるのは、画面の幅が767px以下のとき（上の「動き」に別の幅が書いてあるときは、そちらに従う）
・写真を使うときは、object-fit: cover で枠に収め、img の height 属性のせいで縦に引き伸ばされないようにする（枠の高さを決めない写真は height: auto）
・HTML・CSS・素のJavaScriptだけで作り、動きのための外部ライブラリは読み込まない（Webフォントの読み込みはよい）。1つのHTMLファイルにまとめる