雑貨店 HAKOの動く秋の投稿

Animationテンプレートで、架空の雑貨店「HAKO」の秋の新入荷を知らせるSNS用の動く投稿を制作してください。ほかの作例のデザインに合わせる必要はありません。

目的：音声なしでも「秋の新入荷」「3つの商品」「店頭で出会える」がわかる12秒のシームレスに近いループ。正方形1080×1080が原寸、スマホで見ても読める日本語。既存ブランドの模倣や著作物の流用をせず、オリジナルの図形/SVGで商品を魅力的に描く。

意匠：マスタード、深い紫、やわらかなピンクの大胆で上品なカラーブロック。切り紙のような器・布・花瓶と、大きく明快な日本語タイポグラフィ。楽しさと手触り。激しいフラッシュ、文字が読めない回転、常時揺れは避ける。

構成・時間：
0〜3秒：「秋の、いいもの。」／HAKO／AUTUMN FINDS。紙片が集まりリムマグが現れる。
3〜6秒：「暮らしに、小さな彩り。」 リムマグ 2,400円（税込）、リネンクロス 1,800円（税込）、一輪挿し 2,200円（税込）の3品をリズムよく見せる。主要な価格は十分な時間静止させる。
6〜9秒：「秋の新入荷、届きました。」3品の構図が完成。
9〜12秒：「今週末は、HAKOへ。」／「店頭でお待ちしています」／「架空店舗の制作サンプル」の小さな注記。日付・住所・特典など事実のない情報を加えない。
外周8%の安全領域を確保。文字と背景のコントラストを確保。音声/BGMは不要。

成果物は、ブラウザで再生できる animation.html（CSS/JS/SVGを内包し、外部通信・ライブラリ・画像・フォント依存なし）。アニメの外側に再生/一時停止、最初から、0〜12秒を指定するシークバー、現在秒数を置く。ループON/OFF切替もあるとよい。初期は再生、prefers-reduced-motionでは完成構図で停止し、ユーザーが再生した場合だけ動く。シーク時は一時停止してその正確な時間の画を表示し、操作UIは投稿画像の安全領域外へ置く。正方形のまま狭い画面に縮小。

notes.txtに秒単位の絵コンテ、配色、テキスト全文、ブラウザ作品とSNSにアップできる動画ファイルの違いを記載。可能なら動画も書き出してよいが、未生成のMP4を生成済みとは言わない。HTML・メモはプロジェクトに保存し、ループ、停止、シーク、日本語の切れを自分でもチェックして修正してください。

店名・商品・価格・色の指定を、自分のお店に合わせて書き換えてください。生成結果は利用前に確認しましょう。