01 Slide
スライド
写真が横に送られて切り替わる。いちばん定番で、枚数が多くても見せやすい。
KEY VISUAL GIMMICKS
キービジュアルの動き 見本帳
SERICA NATURELLE（White Rabbit）の写真で、KVによく使われる動きを19個並べました。すべて自動でループします。マウス追従だけは、カーソルを乗せると反応します。
切り替え方
Slider
02 Crossfade
クロスフェード
前の写真が消えながら次の写真が重なって現れる。落ち着いた印象で、コスメと相性がよい。
03 Fade + Zoom
フェード＋ズーム
クロスフェードに少しの縮小を足したもの。切り替えのたびに写真が奥へ引いていく。
04 Wipe
ワイプ
幕を引くように、次の写真が端から覆いかぶさる。スライドより写真が動かず、締まって見える。
写真の見せ方
Photo
05 Ken Burns
ケンバーンズ
静止画をゆっくり拡大して、動画のように見せる。写真1枚でも間が持つ。
06 Mask Reveal
マスク・リビール
アーチ窓の形から写真が広がって現れる。読み込み直後の1回だけ使うことが多い。
07 Split
分割表示
写真を短冊に切って、上下から時間差で組み上げる。新商品の発表などで目を引く。
08 Movie
動画背景
短いループ動画を流す。SERICAのLPで実際に使っている動画。容量は1MB前後に抑える。
スクロール・操作に反応するもの
Scroll & Hover
09 Parallax
パララックス
奥の葉はゆっくり、手前の商品は速く動かして奥行きを出す。ここではスクロールを自動で再現している。
写真は止まったまま、文字の面だけが上に流れていく。
窓からのぞくように、同じ写真が見え続ける。
10 Fixed Background
背景固定
写真を画面に固定して、上のコンテンツだけをスクロールさせる。章の区切りに使いやすい。
Silk Conditioning
スクロールで全画面へ
11 Scroll Zoom
スクロールで拡大
アーチ窓の小さな写真が、スクロールに合わせて全画面まで広がる。ブランドサイトで多い。
カーソルを乗せて動かす
12 Mouse Follow
マウス追従
カーソルの位置に合わせて、写真と手前の飾りが逆方向に少しずれる。スマホでは効かない。
文字の出し方
Typography
絹のひかりを、毎日に。
13 Stagger Text
文字の時間差フェード
キャッチコピーを1文字ずつ、少しずつ遅らせて出す。短いコピーほどきれいに見える。
14 Typing
タイピング
文字が打ち込まれるように増えていく。コスメなら、成分や想いを語る場面に向く。
15 Text Mask
テキストマスク
文字の形に写真を抜いて、中の写真を動かす。ブランド名など短い英字で使う。
SERICA NATURELLE — Silk Conditioning Care —
SERICA NATURELLE — Silk Conditioning Care —
16 Marquee
マーキー
英字を横に流し続ける。写真の上に重ねると、静かなKVにも動きが出る。
演出・装飾
Effect
17 Line Drawing
線画の描画
金の細い線でアーチが描かれ、うさぎが現れる。ロゴや手描きイラストと組み合わせる。
SERICA NATURELLE
18 Opening
オープニング
ロゴを見せてからKVへ移る。印象は強いが、待たされて離脱が増えることもある。
19 Falling Leaves
舞い落ちる葉
透過PNGの葉を、回転させながらゆっくり落とす。花びら・雪・泡などでも同じ作り方。