こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトを開いた瞬間、ブランドロゴがふわっと表示されるアニメーション、印象的ですよね!
ファーストビューにちょっとした“演出”を加えることで、
ユーザーの第一印象をぐっと良くし、洗練された雰囲気を与えることができます。
でも、「アニメーションって難しそう…」「ライブラリが必要なのでは？」
そんな心配は不要です！
今回は、CSSとJavaScriptを使って、サイト読み込み時にロゴをフェードインさせる方法を、コピペで使えるコードとともにわかりやすく解説していきます。
完成イメージと導入のメリット
まず、こんな演出を目指します！
- サイトを開いた瞬間、ロゴがふわっと表示される
- 自動で1回だけ表示される（スクロール連動ではない）
- ページが“読み込まれた”という感覚を自然に演出
動きがあるだけで、サイト全体の雰囲気がぐっと垢抜けるので、ポートフォリオサイトや企業ページにもぴったりです。
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');
});
応用：ロゴ以外にも使える！
このフェードインアニメーションは、ロゴに限らず他の要素にも応用できます。
- キャッチコピーの見出し
- ファーストビューのメイン画像
- ローディング後に出すメニュー
また、CSSの animation プロパティを使えば、CSSのみで実装する方法も可能です（@keyframes を使う方法など）。
まとめ：第一印象は「動き」で変わる
サイトを開いたその瞬間。
何気なく目に入るロゴがふわっと表示されたら、それだけでブランドの印象が残ります。
「動き」は、情報を伝えるだけでなく、感覚や雰囲気を届けるための大切な演出。
今回のように、CSSとJSを組み合わせれば、
たった数行で「プロっぽさ」を演出できるようになります。
ぜひあなたのWebサイトでも、“はじめまして”の瞬間に差をつけるロゴアニメーション、取り入れてみてください！
satokotadesignキャンペーン実施中！
