ロゴをふわっと表示！CSSとJavaScriptで実装するフェードインアニメーションの基本

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webサイトを開いた瞬間、ブランドロゴがふわっと表示されるアニメーション、印象的ですよね!

ファーストビューにちょっとした“演出”を加えることで、
ユーザーの第一印象をぐっと良くし、洗練された雰囲気を与えることができます。

でも、「アニメーションって難しそう…」「ライブラリが必要なのでは？」
そんな心配は不要です！

今回は、CSSとJavaScriptを使って、サイト読み込み時にロゴをフェードインさせる方法を、コピペで使えるコードとともにわかりやすく解説していきます。

完成イメージと導入のメリット

まず、こんな演出を目指します！

動きがあるだけで、サイト全体の雰囲気がぐっと垢抜けるので、ポートフォリオサイトや企業ページにもぴったりです。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

HTML：ロゴ画像の配置

<header>
  <img src="logo.png" alt="サイトロゴ" id="logo" class="logo">
</header>

ここでは、ロゴ画像に id="logo" と .logo クラスを設定しておきます。

CSS：フェードインのアニメーション

.logo {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1s ease, transform 1s ease;
}

.logo.fade-in {
  opacity: 1;
  transform: translateY(0);
}

JavaScript：読み込み完了時にクラスを付与

window.addEventListener('load', () => {
  document.getElementById('logo').classList.add('fade-in');
});

window.addEventListener('load', …) を使えば、ページ全体の読み込みが完了したタイミングでロゴに .fade-in を追加できます。

応用：ロゴ以外にも使える！

このフェードインアニメーションは、ロゴに限らず他の要素にも応用できます。

また、CSSの animation プロパティを使えば、CSSのみで実装する方法も可能です（@keyframes を使う方法など）。

まとめ：第一印象は「動き」で変わる

サイトを開いたその瞬間。
何気なく目に入るロゴがふわっと表示されたら、それだけでブランドの印象が残ります。

「動き」は、情報を伝えるだけでなく、感覚や雰囲気を届けるための大切な演出。

今回のように、CSSとJSを組み合わせれば、
たった数行で「プロっぽさ」を演出できるようになります。

ぜひあなたのWebサイトでも、“はじめまして”の瞬間に差をつけるロゴアニメーション、取り入れてみてください！

 

satokotadesignキャンペーン実施中！