01 SLIDE
スライド
写真が横に送られて切り替わる。いちばん定番で、枚数が多くても見せやすい。
KEY VISUAL GIMMICKS
キービジュアルの動き 見本帳
KVでよく使われる動きを18個、同じイラストで並べました。すべて自動でループします。マウス追従だけは、カーソルを乗せると反応します。
切り替え方（スライダー系）
02 CROSSFADE
クロスフェード
前の写真が消えながら次の写真が重なって現れる。落ち着いた印象で、美容・住宅向き。
03 FADE + ZOOM
フェード＋ズーム
クロスフェードに少しの縮小を足したもの。切り替えのたびに写真が奥へ引いていく。
04 WIPE
ワイプ
幕を引くように、次の写真が端から覆いかぶさる。スライドより写真が動かず、締まって見える。
写真の見せ方
05 KEN BURNS
ケンバーンズ
静止画をゆっくり拡大して、動画のように見せる。写真1枚でも間が持つ。
REVEAL
図形の中から写真が広がる
06 MASK REVEAL
マスク・リビール
円や四角の中から写真が広がって現れる。読み込み直後の1回だけ使うことが多い。
07 SPLIT
分割表示
写真を短冊に切って、上下から時間差で組み上げる。ファッションやイベント向き。
08 CINEMAGRAPH
シネマグラフ
写真の一部だけが動く（ここでは波だけ）。湯気・水面・髪の揺れなどで使う。
スクロール・操作に反応するもの
手前は速く動く
背景はゆっくり
速度の差で奥行き
09 PARALLAX
パララックス
背景と手前の要素でスクロール速度をずらす。ここではスクロールを自動で再現している。
写真は止まったまま、文字の面だけが上に流れていく。
窓からのぞくように、同じ写真が見え続ける。
10 FIXED BACKGROUND
背景固定
写真を画面に固定して、上のコンテンツだけをスクロールさせる。章の区切りに使いやすい。
ZOOM IN
スクロールで全画面へ
11 SCROLL ZOOM
スクロールで拡大
最初は小さい写真が、スクロールに合わせて全画面まで広がる。ブランドサイトで多い。
カーソルを乗せて動かす
12 MOUSE FOLLOW
マウス追従
カーソルの位置に合わせて、奥と手前が逆方向に少しずれる。スマホでは効かない。
文字の出し方
ことばが、ひと文字ずつ。
13 STAGGER TEXT
文字の時間差フェード
キャッチコピーを1文字ずつ、少しずつ遅らせて出す。短いコピーほどきれいに見える。
14 TYPING
タイピング
文字が打ち込まれるように増えていく。IT・スクール・採用サイトと相性がよい。
15 TEXT MASK
テキストマスク
文字の形に写真を抜いて、中の写真を動かす。英字の太い書体で使う。
KUMO DESIGN — KEY VISUAL —
KUMO DESIGN — KEY VISUAL —
16 MARQUEE
マーキー
英字を横に流し続ける。写真の上に重ねると、静かなKVにも動きが出る。
演出・装飾
17 LINE DRAWING
線画の描画
SVGの線が描かれていく。ロゴや手書き風のイラストと組み合わせる。
KUMO
18 OPENING
オープニング
ロゴを見せてからKVへ移る。印象は強いが、待たされて離脱が増えることもある。