ページの読み込みやデータ取得の「待ち時間」は、ユーザーが最も離脱しやすい瞬間です。しかし、その待ち時間をブランド体験に変えることができたら？
本記事では、CSSアニメーションだけで実装できる5つのローディングパターンをご紹介します。単なる待機画面を「おもてなし」の時間に変えましょう。
1. シンプルスピナー
最もベーシックなローディング表現です。ボーダーの一辺だけに色をつけた円を回転させるだけ。シンプルながら、ブランドカラーを使えば統一感が出ます。
CSS
.spinner {
width: 40px;
height: 40px;
border: 3px solid #EAEAEA;
border-top-color: #E31010;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
2. ドットパルス
3つのドットが波打つように順番に拡大・縮小するパターン。チャットやメッセージアプリでよく見かける「入力中...」の表現にも使えます。柔らかい印象を与えたいサイトに最適です。
CSS
.dots { display: flex; gap: 8px; }
.dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #E31010;
animation: pulse 1.4s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes pulse {
0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
40% { opacity: 1; transform: scale(1); }
}
3. プログレスバー
ページ上部に表示される細いプログレスバー。YouTubeやSlackでも採用されている、ユーザーに「もうすぐ読み込みが終わる」と安心感を与える定番パターンです。
CSS
.progress {
width: 100%;
height: 4px;
background: #EAEAEA;
border-radius: 2px;
overflow: hidden;
}
.progress__bar {
width: 0;
height: 100%;
background: #E31010;
border-radius: 2px;
animation: progress 2.5s ease-in-out infinite;
}
@keyframes progress {
0% { width: 0; }
50% { width: 70%; }
100% { width: 100%; }
}
4. ロゴフェードアニメーション
ブランドロゴやサイト名をフワフワと明滅させるパターン。ページ全体を覆うオーバーレイと組み合わせれば、ブランドの世界観に没入させるローディング体験をつくれます。
tutawaru
CSS
.logo-anim {
font-size: 1.4rem;
font-weight: 700;
color: #E31010;
animation: logoFade 2s ease-in-out infinite;
}
@keyframes logoFade {
0%, 100% { opacity: 0.3; }
50% { opacity: 1; }
}
5. スケルトンスクリーン
コンテンツが読み込まれる前に、灰色のプレースホルダーを表示するパターン。FacebookやYouTubeが採用しており、ユーザーに「もうすぐコンテンツが表示される」と直感的に伝えます。実際のレイアウトに合わせた形にするのがポイントです。
CSS
.skeleton-line {
height: 12px;
background: #EAEAEA;
border-radius: 6px;
margin-bottom: 12px;
animation: shimmer 1.5s ease-in-out infinite;
}
@keyframes shimmer {
0% { opacity: 0.4; }
50% { opacity: 1; }
100% { opacity: 0.4; }
}
まとめ：待ち時間はブランド体験の一部
ローディング画面は「仕方なく見せるもの」ではなく、ブランドの世界観を感じてもらう絶好の機会です。
- スピナー → シンプル・ミニマルに
- ドットパルス → 柔らかく親しみやすい印象
- プログレスバー → 「あと少し」の安心感
- ロゴアニメーション → ブランドの世界観への没入
- スケルトンスクリーン → 次に来るコンテンツの予告
どのパターンも animation プロパティだけで完結するため、パフォーマンスへの影響も最小限です。サイトの雰囲気に合わせて、ぜひ取り入れてみてください。
💡 ツタワルの制作では：ロゴアニメーションやスケルトンスクリーンなど、ブランドらしさを活かしたローディング体験もご提案しています。「待ち時間」も含めてトータルでデザインするのが、私たちのこだわりです。
← 前の記事：スクロールアニメーション
次の記事：レスポンシブメニュー →