MOTION LIBRARY

できる動きの一覧

ホームページに組み込める「動き（アニメーション）」を、ひとつずつ名前をつけてご紹介します。下のカードは実際に動いています。気になった動きの名前を伝えていただければ、御社のサイトに組み込みます。

立ち上げ
MOTION 01
立ち上げ
Rise / Mask Reveal
文字が下からせり上がって現れる、最も印象的な見出し演出。ページを開いた瞬間の主役。
向く場所: ヒーローの大見出し
一行ずつ、順番に、明かしていく。
MOTION 02
行明かし
Line Reveal
本文や見出しが一行ずつ時間差で立ち上がる。読ませたい文章にリズムと品を与える。
向く場所: 見出し・キャッチコピー
0+
MOTION 03
数字カウント
Count Up
数字がゼロから一気に回って実数に着地。実績・年数・件数を力強く見せる。
向く場所: 実績・強みの数字
0
MOTION 04
ロード
Loading
読み込み中の数%とラインで「ちゃんと作り込まれている」第一印象を演出。高級サイトの定番。
向く場所: サイト入場時
WEB DESIGN★KOHAKU★WEB DESIGN★KOHAKU★
MOTION 05
流し帯
Marquee
横に流れ続ける文字帯。リズムと勢いを足し、ブランドワードを刷り込む。
向く場所: セクションの区切り
MOTION 06
寄り（ホバー拡大）
Hover Zoom
カーソルを乗せると画像がゆっくり寄る。※カードにマウスを乗せてください。一覧に上質な反応を。
向く場所: 実績・商品の一覧
お問い合わせ
MOTION 07
満ち（塗り上がり）
Fill Sweep
ボタンに乗せると下から色が満ちる。※乗せてください。押したくなるボタンの定番演出。
向く場所: 主要ボタン・CTA
MOTION 08
ともしび
Floating Glow
背景でゆっくり漂う光。静かな画面に奥行きと温度を与える、雰囲気づくりの演出。
向く場所: ヒーロー背景・余白
SCROLL PROGRESS
MOTION 09
プログレス
Progress Bar
スクロール量に応じて上部の光るバーが伸びる。今どこを読んでいるか直感的に分かる。
向く場所: 縦長ページ・記事
MOTION 10
重ね積み
Stack Cards
スクロールでカードが重なりながら縮んでいく。サービス紹介を立体的に見せる上級演出。
向く場所: サービス・特徴の列挙
MOTION 11
層パララックス
Layered Parallax
スクロールで画像と背景が違う速度で動き、奥行きが生まれる。写真を活かす定番。
向く場所: 写真の見せ場
01
02
03
04
05
01
02
03
04
05
MOTION 12
横流し（固定横スクロール）
Pinned Horizontal
縦スクロールに合わせて画面が固定され、中身が横に流れる。制作の流れや作品紹介の見せ場に。
向く場所: 工程・ギャラリー
SILK SCROLL
MOTION 13
なめらかスクロール
Silk Scroll
スクロールに慣性をつけ、ぬるっと滑らかに動く。このページ自体もそうです。全体の質感が一段上がる。
向く場所: サイト全体の土台
MOTION 14
粒子（質感ノイズ）
Grain Texture
画面全体に微細な粒子を重ね、デジタル臭さを消してフィルムのような質感に。高級感の隠し味。
向く場所: サイト全体の質感
スタジオ・コハク
MOTION 15
タイプ打ち
Typewriter
一文字ずつ打ち込まれるように現れる。語りかけるような親しみと、注目を集める効果。
向く場所: キャッチコピー・導入文
GLITCH
MOTION 16
グリッチ
Glitch
文字が一瞬ぶれるデジタルノイズ風。エッジの効いた、先進的・尖った印象に。
向く場所: クリエイティブ・テック系
MOTION 17
立体チルト
3D Tilt
カードが立体的に傾く。奥行きと高級感を出し、要素に触れたくなる質感を与える。
向く場所: サービスカード・商品
SHIMMER
MOTION 18
きらめき
Shimmer
文字の上を光が横切る。上質でラグジュアリーな輝きを添える、見出し向けの演出。
向く場所: ブランド見出し・ロゴ周り
MOTION 19
フリップ
Flip
要素がくるりと反転。表と裏で情報を切り替えられ、遊び心と機能性を両立。
向く場所: メンバー紹介・Before/After
ふわり
MOTION 20
ふわり
Blur In
ぼやけた状態からピントが合うように現れる。やわらかく、上品な登場演出。
向く場所: 写真・見出しの登場
MOTION 21
ポップ
Pop In
小さく弾んで飛び出す。元気で楽しい印象。行動を促すボタンやバッジに。
向く場所: バッジ・アイコン・CTA
MOTION 22
線描き
Line Draw
線が手で描かれるように引かれていく。ロゴやアイコンの登場を印象的に演出。
向く場所: ロゴ・アイコン・図解
ゆらぐ文字
MOTION 23
ゆらぎ
Wave
文字が波のように順番に上下する。リズミカルで軽やか、目を引くアクセント。
向く場所: 見出しのアクセント
MOTION 24
寄せ引き
Ken Burns
写真がゆっくり寄りながら動く、映画的な演出。静止画に生命感を与える。
向く場所: ヒーロー写真・背景
WIPE
MOTION 25
ワイプ
Wipe
色がスッと横切って中身が現れる。切り替えのキレを出す、洗練された遷移演出。
向く場所: セクション切替・画像登場
MOTION 26
波紋
Ripple
水面の波紋のように広がる。クリックの反応や、注目させたい点の強調に。
向く場所: ボタン・注目ポイント
MOTION 27
スポット
Spotlight
光がカーソルや要素を照らすように動く。暗い画面に視線誘導と高級感を生む。
向く場所: ダーク基調のヒーロー
フェードアップ
MOTION 28
フェードアップ
Fade Up
下から少し上がりながら、ふわっと現れる定番。どんなサイトにも馴染む基本の登場演出。
向く場所: ほぼ全要素の登場
MOTION 29
ズームイン
Zoom In
小さな状態から拡大して現れる。要素に勢いと存在感を持たせたいときに。
向く場所: 画像・アイコン・カード
MOTION 30
回転イン
Rotate In
くるっと回りながら登場。遊び心のある、印象に残る現れ方。
向く場所: アイコン・バッジ
カーテン
MOTION 31
カーテン
Curtain Reveal
上から下へ幕が下りるように姿を現す。劇場のような期待感を演出。
向く場所: 見出し・キービジュアル
スタガー↑
MOTION 32
文字スタッガー
Stagger
一文字ずつ時間差で立ち上がる。タイプ打ちより上品で、リズミカルな見出しに。
向く場所: 大見出し
MOTION 33
弾み
Bounce
ぽよんと弾む、親しみやすい動き。やわらかい・楽しいブランドに。
向く場所: アイコン・キャラ要素
SHAKE
MOTION 34
シェイク
Shake
小刻みに震えて注意を引く。エラー表示や「ここ見て」の強調に効く。
向く場所: 注意喚起・通知
MOTION 35
鼓動
Pulse
呼吸するように脈打つ。生きている感じと、押したくなる誘導効果。
向く場所: CTAボタン・録画中表示
MOTION 36
流れる枠
Running Border
枠線を光が走り続ける。要素を際立たせる、テック感のあるアクセント。
向く場所: 注目カード・特典枠
下線のび
MOTION 37
下線のび
Underline Grow
文字の下線が左から伸びる。リンクや見出しの上品な強調に。
向く場所: リンク・小見出し
MOTION 38
グラデ背景
Gradient Flow
背景の色がゆっくり流れ動く。静止画面に温度と奥行きを与える。
向く場所: ヒーロー背景・帯
NEON
MOTION 39
ネオン
Neon Flicker
ネオン管のように瞬く発光。夜・バー・エンタメ系の世界観に。
向く場所: 飲食・ナイト系
MOTION 40
持ち上げ
Lift
乗せると浮き上がる。※マウスを乗せてください。触れる楽しさと立体感を出す。
向く場所: カード・ボタン
MOTION 41
タイル展開
Tiles Cascade
マス目が順番に現れる。ギャラリーやメニューの登場を華やかに。
向く場所: 画像ギャラリー・一覧
FASTBEAUTIFULGROWFASTBEAUTIFULGROW
MOTION 42
縦流し
Vertical Marquee
縦方向に文字が流れ続ける。サイドや余白を活かしたモダンな見せ方。
向く場所: サイド・余白の装飾
速い美しい
MOTION 43
スライド入れ替え
Slide Swap
言葉が横にスライドして次々入れ替わる。複数の強みをテンポよく見せる。
向く場所: キャッチの言い換え

気になった動き、組み込みます。

「立ち上げ」と「重ね積み」を入れたい、のように名前で指定してください。

相談する →