ANIMATION
無料で実装できる
コーディングアニメーションのサンプル
Webサイトでよく使われる基本的なアニメーションは、CODING ARMYなら追加料金なしに対応します。以下のサンプルはすべて実際に動作しています。マウスを乗せる（スマホはタップ）・スクロールするなど、そのまま触ってお確かめください。
※ 複数の動きを重ねて組み合わせる場合は、動き同士が干渉して調整が必要になることがあり、その際は別途お見積もりとなる場合があります。
マウスを乗せたときの動き（ホバー）
ボタン・リンク・画像にカーソルを合わせたときの反応です。「押せる場所」がひと目で伝わり、操作の手応えを生みます。
ボタン
反転
無料対応主要ボタンに。背景と文字色が入れ替わります。
色変化
無料対応主要ボタンに。
背景スライドイン
無料対応CTAボタンに。
枠線が伸びる
無料対応上品なボタンに。
拡大
無料対応アイコン・ボタンに。
浮き上がり
無料対応カード一覧に。
少し傾く
無料対応遊びのある要素に。
左右に揺れる
無料対応注意を引きたい時に。
グラデが動く
無料対応華やかなCTAに。
枠が光る
無料対応目立たせたい時に。
アイコン回転
無料対応メニュー・SNSに。
押下（へこむ）
無料対応クリックの手応えに。押すと沈みます。
テキストリンク
写真・画像
画像ズーム
無料対応実績・ギャラリーに。
画像が明るく
無料対応写真サムネイルに。
写真がブラーになる
無料対応上に文字を重ねたい時に。
文字が重なる
無料対応実績・作品紹介に。
ふわっと現れる動き（フェードイン）
スクロールして要素が画面に入ると、ふわりと表示されます。出てくる方向やタイミングを変えることで、視線の流れや情報の順番を演出できます。
下から
無料対応最も自然な表示。
左から
無料対応横並び要素に。
右から
無料対応左右交互の演出に。
拡大しながら
無料対応強調したい要素に。
縮小しながら
無料対応大→適正で落ち着く動き。
ぼかしが晴れる
無料対応やわらかい印象に。
弾んで出る
無料対応元気な印象を出したい時。
めくれて起き上がる
無料対応カードが手前へ立つ動き。
反転して出る
無料対応カードめくりのような演出に。
傾きが直る
無料対応動きのあるバナーに。
上から落ちる
無料対応通知・見出しの登場に。
回転して出る
無料対応軽く回りながら整う登場に。
連続表示（少しずつ遅れて出る）
無料対応STEP紹介やカード一覧を順番に見せたい時に。
ヒアリング
お見積もり
納品
画像が切り替わる動き（スライダー）
メインビジュアルやバナー、実績紹介に。切り替え方の演出でページの印象が変わります。下の5パターンはすべて無料で対応します。
横スライド
無料対応最も一般的。左右に流れて切り替わります。
フェード
無料対応横移動せず、じわっと重なって切り替わる上品な動き。
フェード＋ズーム
無料対応表示中の画像がゆっくり拡大し続けます。写真だと風景がじわじわ迫る高級感が出ます（Ken Burns効果）。
サムネイル付き
無料対応下の小さな画像を選んで切り替え。実績紹介向き。
自動で流れる（無限ループ）
オートスクロール（マーキー）
無料対応ロゴや実績写真を横に流し続けたい時に。端まで来ても途切れず先頭へつながり、永遠にループします（マウスを乗せると一時停止）。
見出し・キャッチコピーのエフェクト
タイトルやキャッチコピーの登場に動きをつけると、ページの第一印象が大きく変わります。読ませたい一文を印象づけます。
1文字ずつ出る
無料対応メインキャッチに。
下からせり上がる
無料対応セクション見出しに。
下線が引かれる
無料対応強調したい語句に。
光が流れる
無料対応ロゴ横のコピーに。
クリックで開閉する動き（アコーディオン）
よくある質問や仕様の詳細など、情報量が多い箇所をすっきり畳んでおけます。必要な人だけが開いて読めます。
対応できるアニメーションの範囲は？
+
このページで紹介している基本的な動きは、追加料金なしで対応します。複雑な独自演出は個別にお見積もりします。
スマホでも同じように動きますか？
+
はい。レスポンシブ対応の範囲で、スマートフォンでも自然に動作するよう調整します。
既存サイトへの追加もできますか？
+
可能です。現在のサイトを確認したうえで、無理のない実装方法をご提案します。
数字が動いて増える動き（カウントアップ）
実績数や対応件数など、強調したい数字を0から増やして見せる演出です。数値が印象に残りやすくなり、信頼感の演出に役立ちます。
