第9回: 高度なアニメーションと演出

この回の目標

CSSアニメーションの基本を使える
フェード・スライドなど自然な演出を入れられる
見た目のクオリティを一段上げられる

なぜアニメーションを入れるのか
CSSアニメーションの基礎
よく使う演出パターン
やってはいけない演出
ミニ課題
まとめ

なぜアニメーションを入れるのか

アニメーションは単なる「飾り」じゃなくて、ユーザーを迷わせないための「ガイド役」

目線誘導: 「次はここを読んでね」と視線を導く
フィードバック: 「これはボタンだよ、押せるよ」「今、ボタンを押したよ」という反応を返す
状態の変化: 「メニューが開いたよ」という変化を直感的に伝える

CSSアニメーションの基礎

動きをつけたい時、下記のCSSプロパティを使うのが鉄則

transition（アニメーションの速度）
transform（変形）
opacity（不透明度）

hoverアニメーションをつけてみよう

ホバーした時に「ボタン全体が少し薄くなり（不透明度）」、「矢印だけが右にピョコっと動く」演出

ボタン

<a href="" class="btn-sample">ボタン</a>

.btn-sample {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  padding: .9em 2em;
  margin-bottom: 20px;
  border-radius: 25px;
  background-color: #e67e22;
  color: #fff;
  font-size: 1em;
  text-decoration: none;
  transition: .3s;  /* アニメーションの速度 */
}

.btn-sample::after {
  content: '';
  width: 8px;
  height: 8px;
  margin-left: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(45deg);
  transition: .3s;  /* アニメーションの速度 */
}

.btn-sample:hover {
  opacity: 0.8;
}

.btn-sample:hover::after {
  transform: translateX(5px) rotate(45deg);
}

1. .btn-sample::after

擬似要素で「矢印」を作っている
正方形の「上」と「右」だけに線（border）を引いて、それを rotate(45deg) で45度回転させることで「＞」の形に見せている

2. transition: .3s;

「変化にかける時間」を指定している
これがないと、マウスを乗せた瞬間にパッ！と切り替わってしまって、アニメーションにならない
.btn-sample.btn-sample::after（矢印）の両方に書くことで、両方が滑らかに動くようになる

3. :hover 時の動き

opacity: 0.8;
ボタン全体を少し透けさせることで、「今、触ってるよ！」というフィードバックをユーザーに伝えている
transform: translateX(5px) rotate(45deg);
translateX(5px): 右方向に5px移動させる
rotate(45deg): ホバー時にも「45度回転したまま」という指示を書き直さないと、回転が解けて元の正方形に戻ってしまう
「今の形（回転）をキープしたまま、横に動かしてね！」という意味で、両方の指示を並べて書くのがルール

動きの「質感」を決める：イージング（Easing）

transition には、速度（0.3s）だけでなく「どう加速して、どう減速するか」という設定もできる
これを「イージング」と呼ぶ

ease (イーズ): 最初はゆっくり、途中は速く、最後はゆっくりになる標準的な緩急
ease-out（イーズアウト）: 最初は早くて、最後に向かって「ゆっくり」止まる
linear（リニア）: 最初から最後まで「一定」の速さ。機械的な動き

やってみよう

「色を変えてみよう」

background-color を自分の好きな色に変えて、ホバーした時の opacity を「0.5」にしてみたらどう見える？

「動きを大きくしてみよう」

translateX(5px) を「20px」に変えてみよう

「transitionを消してみよう」

CSSの .btn-sample と .btn-sample::after に書いた transition: .3s; を、あえてコメントアウト（無効化）してみよう
動きに「余韻」がないと、どこか機械的で、手作り感（初心者感）が出てしまう

.btn-sample {
  /* transition: .3s; */ /* ◀︎ ここを消してみる */
}
.btn-sample::after {
  /* transition: .3s; */ /* ◀︎ ここも消してみる */
}

「イージング（質感）の違いを比べよう」

transitionでイージングを指定して、動きの「性格」の違いを観察してみよう

transition: .3s linear; /* 最初から最後まで「一定」の速さ */
transition: .3s ease-out; /* 最初は速く、最後は「ゆっくり」止まる */

よく使う演出パターン

1. ボタン：ふわっと浮き上がる（Lift Up）

ボタン

.btn-lift {
  transition: 0.3s;
}

.btn-lift:hover {
  transform: translateY(-4px); /* 少し上に浮かせる */
  box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); /* 影を強くして浮遊感を出す */
}

【使い所】お問い合わせ（CTA）ボタン、購入ボタン
【役割】マウスを乗せた時に少し浮くことで、「押せる準備ができている（クリック可能）」というフィードバックをユーザーに返している

2. カード：ズームイン（Zoom In）

.card-zoom {
  width: 100%;
  max-width: 500px;
  overflow: hidden; /* 枠からはみ出さないように */
}

.card-zoom img {
  transition: transform 0.5s ease;
}

.card-zoom:hover img {
  transform: scale(1.1); /* 少しだけ拡大する */
}

【使い所】ブログ記事の一覧、メニュー写真、制作実績
【役割】ユーザーがその画像に興味を持った瞬間に、グッと寄ることで「没入感」を出す演出。「もっと詳しく見たい」と思わせたいギャラリーサイトでよく使われる

3. テキスト：下線が伸びる（Underline Slide）

メニュー① メニュー② メニュー③

.nav-link {
  position: relative;
  text-decoration: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #e67e22;
  transform: scaleX(0); /* 最初は長さを0に */
  transition: transform 0.3s ease;
  transform-origin: right; /* 右に消えていくように設定 */
}

.nav-link:hover::after {
  transform: scaleX(1); /* 長さを1（100%）に戻す */
  transform-origin: left; /* 左から伸びるように設定 */
}

【使い所】グローバルナビ（ヘッダーのメニュー）、関連リンク
【役割】リンクの文字が細い時でも、「今、ここを選んでいるよ」というのを上品に伝えるための演出。安易に色を変えるだけよりも、サイト全体が「洗練された」印象になる

4. フェードイン（Fade & Move）

フェードイン！

/* 最初（隠れている状態） */
.fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* クラスがついた時（現れる状態） */
.fade-up.is-show {
  opacity: 1;
  transform: translateY(0);
}

window.addEventListener("scroll", function () {
  const windowHeight = window.innerHeight;    // 画面の高さ
  const fadeup_boxes = document.querySelectorAll('.js-009fadeup');

  fadeup_boxes.forEach(function (fadeup_box) {

    const fadeup_boxTop = fadeup_box.getBoundingClientRect().top; // 要素の位置

    if (windowHeight - 100 < fadeup_boxTop) {
      fadeup_box.classList.add("is-show");
    }

  });

});

getBoundingClientRect():
「いまの画面の左上から見て、その要素がどこにいるか」という相対的な距離。その要素までの残りの距離が分かるイメージ
スクロールすればするほど、この top の数値は勝手に「小さく」なっていく

【使い所】セクションの切り替わり、サービスの特徴紹介
スクロールに合わせて「リズム」を作る。下からふわっと出てくることで、ユーザーの視線を上から下へ自然に誘導できる

5. 注目：ふわふわ動く（Floating）

ボタン

@keyframes floating {
  0% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

.btn-attention {
  animation: floating 3s ease-in-out infinite; /* 無限にふわふわさせる */
}

transition は「マウスを乗せた時」などのきっかけが必要だが、@keyframes を使うと、「何もしなくてもずっと動き続ける」演出ができるようになる

1. @keyframes で「動きの台本」を書く

floating という名前の台本を作って、時間の経過（%）ごとにどう動くかを決める

0%（スタート）: 元の場所にいる
50%（中間）: 上に 10px 浮かび上がる
100%（ゴール）: また元の場所に戻る

スタート（0%）とゴール（100%）を同じにすることで、動きが途切れず滑らかにつながる

2. animation プロパティで「実行」する

.btn-attention {
  /* 台本の名前 | 1周の時間 | 動きの質感 | 繰り返す回数 */
  animation: floating 3s ease-in-out infinite;
}

3s: 3秒かけて1周する
ease-in-out: ふわふわ感を出すために、最初と最後でゆっくり動く設定にする
infinite: これを書かないと1回で止まってしまう。「無限（インフィニティ）」に動かし続けるための言葉

【使い所】画面の隅にある「LINEで相談」や「TOPへ戻る」ボタン
【役割】ユーザーがコンテンツに夢中になっている時でも、「あ、ここに相談窓口があるな」と無意識に認識させるための演出。静止しているものより、動いているものに目は行きやすい、という人間の本能を利用している

やってはいけない演出

1. 動きすぎる（過剰な演出）

画面内のあちこちがバラバラに動いていると、ユーザーはどこを見ていいか分からず、ストレスを感じてページを閉じてしまう

具体例: すべての見出し、画像、ボタンが別々のタイミングでふわふわ動いている
解決策: 「主役」を決める。一番見せたいキャッチコピーやボタンだけを動かし、他は静止させるか、ごく控えめにする

悪い例

プレゼントキャンペーン

応募はこちら

良い例

プレゼントキャンペーン

応募はこちら

2. 文字が読めない（視認性の低下）

アニメーションのせいで文字が読みにくいのは、Webサイトとして本末転倒

具体例: 文字が1文字ずつゆっくり出てくる（読むスピードより遅いとイライラさせる）。文字が左右に激しく動く
解決策: 「静止」の時間をしっかり作る。動いた後はピタッと止まって、じっくり読める時間を確保しよう。

悪い例

文

字

ず

つ

表

示

さ

れ

ま

す

。

文字が揺れます。

良い例

文

字

ず

つ

表

示

さ

れ

ま

す

。

文字がスライドインします。

3. 処理が重い（パフォーマンス不足）

動きがカクカクしていると、どんなにオシャレな演出でも「壊れている」ように見えてしまう

具体例

width（幅）や height（高さ）を直接アニメーションさせている（ブラウザの再計算が大変）
アニメーションをたくさんの箇所に使いすぎて、全体的に処理が重くなってしまう

解決策

transform と opacity を使う（こちらの方が処理が軽い）
使う箇所や処理の数を減らしたり、無駄なコードがないか見直す

4. 目的を忘れた演出（ユーザー不在）

「自分が作りたいから」という理由だけで入れた動きは、ユーザーの邪魔になることが多い

具体例

全画面を覆うような派手な「読み込み中（ローディング）」画面が5秒以上続く
ユーザーがボタンを押そうとした瞬間に、そのボタンがヒュッと逃げるような動き（ズレ）が発生する

解決策

「ユーザーの行動を助けているか？」を自問自答しよう

ミニ課題

ボタンに「クリックしたくなる」演出をつけてみよう

ボタンを1つ作成して、ホバー演出を追加してみよう

条件1: transition を使って、滑らかに動かすこと
条件2: transform または opacity を組み合わせること
プラスアルファ: 矢印などの擬似要素を translateX で少しだけ動かしてみよう

フェードインを実装してみよう

自分のサイトに、下からふわっと出てくる演出を追加してみよう

条件1: JSで is-show クラスを付与する仕組みを使うこと
条件2: CSSで translateY の距離を調整して、出し方を工夫してみよう

「速度」の実験

transition: 0.1s; / 0.3s; / 1.0s; の3パターンを試して、ボタンの反応としてどれが一番「気持ちいい」か考えてみよう

まとめ

今回のまとめ

「意味のある動き」を目指す
transition と transform と opacity が基本
「やりすぎ」はユーザーの敵、ほどほどが正解

次回の予定

デザインを見ながら実際にサイトを作っていく方法を学びます