1
2
3
社内共有 / AIへの指示用リファレンス
「この辺をおしゃれに動かして」では、AIは狙った動きを出せません。動きやパーツには名前があります。名前で頼めば、思い通りのものが一発で出てきます。スクロール演出24種と、ボタン・メニュー・フォームなどの定番UIを、実際に触って確かめられる形でまとめました。
画面に入ったら1回だけ再生する。小窓は自動でスクロールします。中をスクロールして試すこともできます。
暮らしに、
一枚の余白を。
スクロール量に比例して進む。戻せば巻き戻る（スクラブ）。
読み進めるほど、文字に色が塗られていく。スクロールした量が、そのまま読んだ量になる。
止める・送る・現在地を示す。長いページを迷わず読ませるための仕掛け。
押せるもの。役割と「状態」を名前で指定すると、デザインがぶれません。
「押した結果どうなったか」「今なにをしているか」を伝えるパーツ。
この操作は取り消せません。
気になる商品の ♡ を押すと、ここに集まります。
入力の手間とミスを減らすパーツ。問い合わせ・会員登録・検索で使う。
入力して欄の外を押してみてください
2件の条件で絞り込み中
画像や情報をどう並べ、どう切り替えて見せるか。
名前のあとに数値を添えると、仕上がりが一段そろいます。
名前に、この5つを添えると精度が上がります。
CSSだけで GSAP ScrollTriggerで Framer Motionで など。指定しないと、AIが毎回違う方法を選びます。
0.6秒 ease-out のように数値で。迷ったら「出る動きは0.6秒・ease-out」。
画面の20%に入ったら ホバーで クリックで。いつ動くかを書く。
スクロール演出は 1回だけ再生 か 戻ると巻き戻る（scrub） かで、作りが変わります。
prefers-reduced-motion で、動きが苦手な人には演出を止める。一言添えるだけでAIが対応します。
1画面に演出は1〜2種類まで。全部を動かすと、読みにくく重いページになります。
名前を押すと、その見本へ移動します。
| No | 名前 | 英語名 | ひとことで |
|---|
該当する項目がありません。別のことばで探してみてください。