触って、
遊んでみてください。

1つのHTMLファイルだけで動く、次のWebページを作ってください。外部のライブラリや画像ファイルは使わず、絵はSVGで描いてください。

【作るもの】喫茶店のトップページと、目で追いかけるマスコット
・架空の喫茶店「ひととき珈琲」のトップページ。上にロゴと「メニュー／お店のこと／アクセス」のリンク、右端に「席を予約」ボタンを置く
・左側に見出し「焙煎したての豆と、静かな午後を。」（明朝体）。見出しは「豆と、」のあとで改行した2行にし、行の途中では折り返さない（white-space: nowrap と、画面幅に合わせた文字の大きさ）、短い説明文、「席を予約する」「メニューを見る」の2つのボタン
・右側に、顔のついたマグカップのマスコットをSVGで描く（白目と黒目、ほっぺ、口、カップの持ち手、ソーサー、ゆらゆら昇る湯気）
・色は生成り（クリーム色）の背景に、こげ茶の文字、テラコッタ色のボタン。上品で落ち着いた雰囲気にする

【動き】
・マスコットの黒目は、ページのどこにカーソルがあっても、その方向を見る。左右の目はそれぞれの位置から向きを計算し、動きはなめらかに追いかける
・「席を予約する」ボタンにカーソルが乗ったら（キーボードでフォーカスしたときも）、マスコットがそのボタンを見て、吹き出しで「ご予約は、ここからどうぞ」と話す
・3秒ほどカーソルが動かないときは、ゆっくりあたりを見回す
・ときどき（2〜5秒おきにばらばらに）まばたきする。たまに2回続けてまばたきする
・マスコットを押す（キーボードの Enter／Space でも）と、目が「^ ^」の笑顔になり、ぴょんと跳ねて、吹き出しで一言しゃべる
・スマホでは、画面を触った場所をしばらく見る

【守ってほしいこと】
・OSの「視差効果を減らす」（prefers-reduced-motion）が有効なときは、まばたき・跳ねる・湯気の動きをやめる
・スマホ（幅375px）では見出しとボタンを上に、マスコットを下に並べ、画面の横にはみ出さない
・HTML・CSS・JavaScriptを1つのファイルにまとめ、全文を出力してください

1つのHTMLファイルだけで動く、次のWebページを作ってください。外部のライブラリや画像ファイルは使わないでください。

【作るもの】石けん店のトップページと、触るとはじけるシャボン玉
・架空の石けん店「あわい石けん店」のトップページ。上にロゴとリンク、右端に「オンラインストア」ボタン
・画面のまん中に、小さな英字「HANDMADE SOAP」、明朝体の大きな見出し「泡まで、やさしい。」（「泡まで、」のあとで改行した2行にし、行の途中では折り返さない）、説明文1行、「商品を見る」ボタン
・背景は、ごく淡いベージュから水色へのグラデーション

【シャボン玉】
・背景全体に canvas を敷き、大小（直径20〜100pxくらい）のシャボン玉を十数個、ゆっくり下から上へ漂わせる。左右にも少しゆれる
・本物のシャボン玉に見えるように描く。中はほぼ透明で、ふちだけが虹色（ピンク・黄・水色・青・紫）にゆらぎ、その色が時間とともにゆっくり回る。左上に白い光の映り込み、右下に小さな光の点。形もわずかにぷるぷる伸び縮みする
・カーソルが近づくと、シャボン玉はふわっとよける
・シャボン玉を押すと、ぱちんと消える（虹色の輪が広がって消え、小さなしずくが飛び散って落ちる）。少しして新しいシャボン玉が下から出てくる
・何もないところを押すと、そこから小さなシャボン玉がいくつか生まれて昇っていく
・上に出ていったシャボン玉は、下から出直す

【守ってほしいこと】
・文字やボタンはシャボン玉より手前に表示し、読みやすさを保つ。ボタンは押せるようにする
・画面の大きさが変わったら canvas も合わせ、高解像度の画面でもぼやけないようにする
・ページが見えていないときは描画を止める
・OSの「視差効果を減らす」（prefers-reduced-motion）が有効なときは、シャボン玉を止めて描くだけにする
・スマホ（幅375px）でも画面の横にはみ出さない
・HTML・CSS・JavaScriptを1つのファイルにまとめ、全文を出力してください

1つのHTMLファイルだけで動く、次のWebページを作ってください。外部のライブラリや画像ファイルは使わないでください。

【作るもの】美容室のトップページと、吸い寄せられる予約ボタン
・架空の美容室「hair ほとり」のトップページ。上にロゴと「メニュー／スタッフ／アクセス」、右端に「ネット予約」
・左側に明朝体の大きな見出し「髪に、余白を。」（「髪に、」のあとで改行した2行にし、行の途中では折り返さない）、その下に短い説明と「営業 10:00–19:00　定休 火曜」
・右側に、直径120pxほどの黒い丸い予約ボタン（文字は「ネット予約 ↗」）。ボタンのまわりに「ONLINE RESERVATION · OPEN 24 HOURS ·」という英字が円になって、ゆっくり回っている（SVG の textPath を使う）
・色は、あたたかいグレージュの背景に、黒の文字。余白を広めにとった上品なデザインにする

【動き】
・パソコンでカーソルがボタンのまわり90px以内に入ると、ボタンがカーソルの方へ吸い寄せられる（最大26pxまで）。中の文字はボタン本体より少しだけ遅れて動き、立体感を出す
・カーソルが離れると、バネのようにぷるんと元の位置に戻る
・カーソルがボタンに乗ると、乗った位置から別の色（キャメル色）が円形に広がって、ボタンが染まる
・押すと、押した位置から波紋が広がり、画面の下に「予約ページへ移動します」と小さなお知らせが2秒ほど出る

【守ってほしいこと】
・キーボードでもフォーカスでき、Enter や Space で押せる。フォーカスしているのが見て分かる
・タッチ端末では吸い寄せの動きはせず、押したときの波紋とお知らせだけにする
・OSの「視差効果を減らす」（prefers-reduced-motion）が有効なときは、吸い寄せ・回転・波紋をやめる
・スマホ（幅375px）では見出しの下にボタンを置き、画面の横にはみ出さない
・HTML・CSS・JavaScriptを1つのファイルにまとめ、全文を出力してください

1つのHTMLファイルだけで動く、次のWebページを作ってください。外部のライブラリや画像ファイルは使わないでください。

【作るもの】花屋のトップページと、切り替わる見出し
・架空の花屋「花屋 いちりん」のトップページ。上にロゴとリンク、右端に「花束を注文」ボタン
・画面のまん中に、小さな文字「その日のための、花束を。」、明朝体の大きな見出し「〇〇に、（改行）花を一輪。」、説明文1行、「花束を注文」「お店を見る」の2つのボタン
・見出しの最後に、小さな花のアイコン（SVGの5枚の花びら）を添え、ゆっくりゆらす
・背景はごく淡いピンクベージュ

【動き】
・〇〇の部分が、約3秒ごとに「誕生日」→「お祝い」→「ありがとう」→「おかえり」と入れ替わる
・入れ替わるときは、古い言葉の文字が1文字ずつ順番に上へ消え、新しい言葉の文字が1文字ずつ順番に下から現れる（1文字ごとに少しずつ遅らせる）
・言葉ごとに文字の色が変わる（誕生日＝ローズ、お祝い＝金色、ありがとう＝緑、おかえり＝紫）。花のアイコンの色も同じ色に変わる
・言葉の幅に合わせて、〇〇の部分の幅がなめらかに伸び縮みし、「に、」との間にすき間ができない
・〇〇の部分を押す（キーボードの Enter でも）と、すぐ次の言葉に変わる。カーソルが乗っている間は自動で変わらない

【守ってほしいこと】
・読み上げソフトにも今の言葉が伝わるようにする
・OSの「視差効果を減らす」（prefers-reduced-motion）が有効なときは、動きを付けずに言葉と色だけ変える
・見出しの文字は、スマホ（幅375px）でも24px以上、パソコンでは40px以上にし、画面の横にはみ出さない
・HTML・CSS・JavaScriptを1つのファイルにまとめ、全文を出力してください

1つのHTMLファイルだけで動く、次のWebページを作ってください。外部のライブラリや画像ファイルは使わず、絵はSVGの線画で描いてください。

【作るもの】工務店のサービス紹介ページ（スクロールで切り替わる）
・架空の工務店「木と手 工務店」のページ。上に、スクロールしても上に残るナビ（ロゴ・リンク・「無料相談」ボタン）
・最初の区間：明朝体の見出し「家のことを、まるごと。」と説明1行、下に「SCROLL ↓」
・まん中の区間（画面の高さの4倍の長さ）：スクロールしている間、次の内容が画面に貼りついたまま止まる（position: sticky）
　- 左はしに、縦の短いバーが4本。進み具合に合わせて、上から順に色が満ちていく
　- まん中に「01 / 04」の番号、大きな見出し「〇〇の（改行）リフォーム」、2行ほどの説明文
　- 右側に、〇〇に合った線画のイラスト（SVG）
・〇〇・説明・イラスト・番号は、スクロールの進み具合に合わせて4段階で切り替わる。上に戻すと逆の順で戻る
　1 キッチン（流し台・吊り戸棚）　2 お風呂（浴槽・シャワー・泡）　3 外壁（家の形・ペンキのローラー）　4 間取り（部屋を区切った平面図）
・切り替わるときは、言葉と説明が下からスッと現れ、イラストはふわっと入れ替わる。背景の色も段階ごとに少しずつ変わる
・最後の区間：濃い緑の帯に「まずは、無料の現地調査から。」と白いボタン
・色は、生成りの背景・墨色の文字・深い緑のアクセント

【守ってほしいこと】
・スクロールの処理は軽くする（requestAnimationFrame でまとめる）
・読み上げソフトにも、今の段階の言葉が伝わるようにする
・OSの「視差効果を減らす」（prefers-reduced-motion）が有効なときは、動きを付けずに切り替えだけ行う
・スマホ（幅375px）では、イラストを見出しの下に置き、見出しは24px以上にする。画面の横にはみ出さない
・HTML・CSS・JavaScriptを1つのファイルにまとめ、全文を出力してください

1つのHTMLファイルだけで動く、次のWebページを作ってください。外部のライブラリや画像ファイルは使わないでください。

【作るもの】ネットショップの管理画面で「手作業」と「AI」を比べる見本
・架空のコーヒー豆のネットショップ「まめの木」の管理画面。左に紺色のサイドメニュー（受注・商品・お客さま・設定。「受注」が選ばれている）
・右側の上に、見出し「注文メールの取り込み」と、ボタン「手で写す」「AIで取り込む」（青・目立たせる）「やり直す」
・その下に、白いカードを2つ横に並べる。「手で写した時間」「AIで取り込んだ時間」。それぞれ秒数（大きめの数字）と細い横棒グラフ
・その下の左に「受信トレイ（5件）」：注文メール5通。各行に、名字の頭文字が入った色付きの丸、件名「ご注文ありがとうございます #101」、本文の1行（お名前・商品・個数・金額。架空でよい）
・右に「受注一覧」の表：列は お名前／商品／数／金額。最初は空

【動き】
・「手で写す」：メールを1通ずつ黄色く光らせ、表のマスに1文字ずつタイプするように書き写す（文字の後ろにカーソルが点滅）。書き写している間、「手で写した時間」の秒数が増え続ける。終わったメールは薄くする
・「AIで取り込む」：受信トレイの上を青い光の帯が上から下へなぞり、そのあと表の5行が上から順に、ふわっと一瞬で埋まる。かかった時間を表示する
・2つの横棒グラフは、長いほうを100%として比べられるようにする
・「やり直す」で最初の状態に戻る。動いている途中に別のボタンを押しても、表示が混ざらない

【守ってほしいこと】
・OSの「視差効果を減らす」（prefers-reduced-motion）が有効なときは、光る・ふわっとする動きをやめ、結果だけを表示する
・スマホ（幅375px）では、サイドメニューを隠し、受信トレイと表を縦に並べ、画面の横にはみ出さない（表は枠の中だけ横にスクロールしてよい）
・ボタンはキーボードでも押せる
・HTML・CSS・JavaScriptを1つのファイルにまとめ、全文を出力してください

1つのHTMLファイルだけで動く、次のWebページを作ってください。外部のライブラリや画像ファイルは使わず、パンの絵はSVGで描いてください。

【作るもの】パン屋の「今週のおすすめ」スワイプカード
・架空のパン屋「パン工房 こむぎ堂」のページ。上にロゴとリンク、右端に「取り置き予約」ボタン
・小さな英字「THIS WEEK」、明朝体の見出し「今週のおすすめ」。見出しの右側に、丸い「←」「→」ボタン
・その下に、横に並んだカードを6枚。クロワッサン・ごまベーグル・角食パン・メロンパン・バゲット・シナモンロール。各カードの上半分は淡い色の背景にSVGのパンの絵、下半分に名前・1行の説明・値段（架空でよい）・「取り置き」のリンク
・色は、あたたかい生成りの背景、こげ茶の文字、焼き色のオレンジのアクセント

【動き】
・スマホでは指で横にスワイプ、パソコンではマウスでつかんで横にドラッグできる。離すと、いちばん近いカードがまん中にピタッと止まる（scroll-snap を使う）。勢いよく離したときは、その向きの次のカードへ進む
・まん中に来たカードは大きくはっきり、両側のカードは少し小さく薄くする（なめらかに変化）
・カードの下に、今何枚目かが分かる点（今の位置だけ横長になる）。点を押すとそのカードへ移動する
・「←」「→」で1枚ずつ移動し、端ではそのボタンを薄くして押せなくする
・ドラッグした直後は、カードの中のリンクが誤って押されないようにする

【守ってほしいこと】
・キーボードの左右の矢印キーでもカードを移動できる
・矢印・点・キーボードで移動するときは、カードの列の scrollTo だけを動かし、ページ全体がずれないようにする（scrollIntoView は使わない）
・OSの「視差効果を減らす」（prefers-reduced-motion）が有効なときは、なめらかなスクロールと拡大縮小の動きをやめる
・スマホ（幅375px）でも、開いた直後から見出しと1枚目のカードが画面の中に見え、ページ全体が横にはみ出さない（カードの列の中だけが横に動く。grid や flex で囲むときは min-width:0 や minmax(0,1fr) を使う）
・HTML・CSS・JavaScriptを1つのファイルにまとめ、全文を出力してください

1つのHTMLファイルだけで動く、次のWebページを作ってください。外部のライブラリや画像ファイルは使わないでください。サーバーへの送信はせず、ページの中だけで動けば大丈夫です。

【作るもの】美容室のネット予約が、受付票になって予約台帳に並ぶ見本
・架空の美容室「hair ほとり」。画面の左に、黒いふちのスマホの形（角の丸い枠と上の小さなバー）を描き、その中に「お客さまのスマホ」の予約フォームを置く。右に「本日の予約台帳（お店の画面）」の表を置く
・フォームの項目：お名前、ご希望日（日付）、人数（1〜4）、メニュー（カット／カラー／パーマを、横に並んだ3つのボタン型の選択肢から1つ選ぶ。選んだものは黒く塗られる）、「予約する」ボタン
・台帳の列：番号／お名前／日付／メニュー／人数。一番下に「人数の合計」。最初は「まだ予約はありません」と表示
・色は、あたたかいグレージュの背景、白いカード、キャメル色のアクセント

【動き】
・「予約する」を押すと、スマホの上に、受付番号（No.001、No.002…と増える）・お名前・日付・メニュー・人数が書かれた「受付票」のカードが、くるっと回って現れる
・受付票は約1秒見せたあと、台帳の新しい行の位置へ、小さくなりながらすべり込んで消え、その行がふわっと現れる
・人数の合計は、数字が数え上がるように増える
・入力が足りないときは送らず、足りない項目の下に赤い文字で理由を出し、最初の足りない項目にフォーカスを移す
・送ったあとはフォームを空に戻し、お名前の欄にフォーカスを戻す

【守ってほしいこと】
・ラベルと入力欄をきちんとつなぎ、キーボードだけでも操作できる（メニューの選択肢もキーボードで選べる）
・OSの「視差効果を減らす」（prefers-reduced-motion）が有効なときは、動きを付けずに台帳に行だけ追加する
・スマホ（幅375px）では、スマホの形のフォームの下に台帳を置き、画面の横にはみ出さない
・HTML・CSS・JavaScriptを1つのファイルにまとめ、全文を出力してください