ChatGPTに聞いたら一発だった件｜ふわっとアニメーション入門

2025年6月8日

ふわっと表示ってなんで難しいの？

Webサイトでよく見かける「ふわっ」と表示されるアニメーション。おしゃれだし、動きがあると注目度も上がりますよね。

でも実際にやろうとすると、「CSSのアニメーション？」「JavaScript必要？」「タイミングってどうやって設定するの？」と、どこから手をつけていいかわからず詰みがち。

私もまさにその一人でした。

「テキストがふわっと出てくるだけでいいのに…」そんな軽い気持ちで始めたのに、気づけばタブを20個開いて沼ってました。

ChatGPTに聞いてみたら秒でわかった

あまりにも進まないので、ChatGPTに聞いてみたんです。

Q：ページを開いたときに、文字をふわっと表示させたい。CSSだけでできますか？

A：はい、可能です。以下のようなCSSを使うと、ふわっと表示させることができます。

返ってきたコードを貼ってみたら……ちゃんと動くじゃん！

3時間悩んでたのが嘘みたいに解決しました。

実践①：超基本！CSSだけでふわっと表示

ChatGPTが教えてくれたのは、こちらの超シンプルなCSSアニメーションです。


.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

このクラス.fade-inを、表示させたい要素に付けるだけ。


<div class="fade-in">
  はじめまして、ふわっと表示です！
</div>

これだけで、ページ読み込み時にふわっと現れるようになります。

ちなみにanimation: fadeIn 1s ease-in forwards;の部分で「1秒かけて」「なめらかに」「1回きりで完了」という指定がされています。

CSSだけでここまでできるなんて感動です。

実践②：スクロールに合わせてふわっと表示させたい！

ページ読み込み時ではなく、「スクロールしてきたタイミングでふわっと表示させたい」という場合には、JavaScript（Intersection Observer）を使います。

これもChatGPTに聞いたら一発で、こんなコードを出してくれました。


// CSS
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.fade-in.visible {
  opacity: 1;
  transform: none;
}

// JavaScript
const targets = document.querySelectorAll('.fade-in');

const observer = new IntersectionObserver((entries) =&gt; {
  entries.forEach(entry =&gt; {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
}, {
  threshold: 0.1
});

targets.forEach(target =&gt; {
  observer.observe(target);
});

.fade-inクラスを要素に付けておけば、スクロールして画面に入ったときに自動で.visibleが追加されて、アニメーションが発動します。


<div class="fade-in">
  下からふわっと現れました！
</div>

これで、ユーザーの視線に合わせて「自然に出てくる」アニメーションが完成します。

一気にサイトのプロっぽさが増すので、覚えておくとかなり便利です！

WordPressでも使える？→使えます

「これってWordPressでもできるの？」と心配になるかもしれませんが、結論から言うとできます。

Gutenberg（ブロックエディタ）でも、HTMLブロックを使えば簡単に導入可能です。

① CSSの追加方法

「外観」→「カスタマイズ」→「追加CSS」に以下のコードを貼り付けます。


.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in forwards;
}
@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

② 投稿や固定ページにHTMLブロックで追加

表示させたい箇所に、以下のようにHTMLブロックを挿入します。


<div class="fade-in">
  WordPressでもふわっと！
</div>

該当箇所の「高度な設定」ってところにfade-inクラスを追加してあげても行けると思う。たぶん。

③ JavaScriptを使いたい場合

テーマに直接JSを追記するか、プラグイン（例：Code Snippetsなど）を使うと安全です。

注意点：一部のキャッシュ系プラグインがアニメーションをブロックすることがあるので、うまく動かない場合はキャッシュクリアや無効化を試してみましょう。

番外編：ChatGPTにこう聞くと答えが神になる

ChatGPTはとても優秀ですが、質問の仕方によって答えの精度が変わってきます。

実際に試して効果的だった「聞き方のコツ」を紹介します。

キーワードはなるべく具体的に

「ふわっと表示したい」→「CSS アニメーション表示タイミング fadeIn」
「スクロールで出てきてほしい」→「IntersectionObserver 表示トリガー」

質問テンプレを使うと便利！

以下のようなテンプレートで聞くと、正確な回答がもらえます。

「○○をやりたいです。できればCSSだけで。
それが無理ならJavaScriptでもOK。
環境はWordPress（Gutenberg）です。
なるべくシンプルなコードでお願いします」

コードの意味も聞いてみよう

ChatGPTはコードだけでなく、その動きの意味もわかりやすく説明してくれます。

「このコードの解説もお願い」と一言添えるだけで、学びの深さが倍になります。

動かないときはそのコードをコピペするとおかしいところを探してくれます。

まとめ：詰まったらまずChatGPTに聞いてみよう

「ふわっと表示させたいだけだったのに、なんでこんなに難しいの…」と感じたら、まずはChatGPTに聞いてみるのがおすすめです。

ちょっとしたCSSの設定から、JavaScriptを絡めた高度な表示制御まで、聞き方次第でかなり実用的なコードがもらえます。

とくに、初心者がつまづきやすい「どこに書くの？」「どう繋がるの？」という疑問にも、丁寧に答えてくれるのが大きな魅力。

今回のような「ふわっと表示」は、ほんの入り口。
アニメーションの世界は奥が深いですが、ChatGPTという強力な相棒がいれば、怖くありません。

さあ、あなたのサイトにも“ふわっ”と魔法をかけてみましょう！

小ネタ

chatGPTは質問の回数に応じて利用制限がかかることがあります。そのため、できるだけ少ない回数の質問で問題解決に繋げられるようにすると、利用制限を引き伸ばしつつ利用できます。

URLをコピーしました！