ホームページに動きを付けるAIプロンプト100｜見本を動かして選ぶ

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

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

動き：
・スマホ（幅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ファイルにまとめる

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

【ビフォーの写真】
【アフターの写真】
【写真の下に置く説明（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ファイルにまとめる

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

【質問と答え（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ファイルにまとめる