この記事では、ページ読み込み中に表示するスケルトンローダーの概要と実装方法を解説します。
結論から書くと、灰色のブロックに光が流れるアニメーションを重ねるだけで作れます。読み込みが終わったらクラスを付け替えて消します。
スピナー（くるくる回るアイコン）との違いは、これから何が表示されるかが分かることです。レイアウトの形をそのまま見せるので、読み込み後に画面が飛び跳ねる感じも減ります。
スポンサーリンク
スケルトンローダーCSSの概要
スケルトンローダーは、ウェブサイトのパフォーマンスを向上させるためのテクニックの一つです。
ウェブページの読み込み中処理を実装していない場合、ユーザーには何も表示されないか、一時的な空白が表示されてしまいます。これは、ユーザーが何が起こっているのかを理解できない上に、ストレスを感じさせる要因となります。しかし、スケルトンローダーを実装して、ページの読み込み待ち時間に視覚的な代替デザインを表示することで、ユーザーに読み込み進行中であることを伝えることができます。
スケルトンローダーCSSの実装方法
スケルトンローダーは、以下の手順で実装できます。
HTMLの構造を設計する
スケルトンローダーを表示するためには、まずHTMLの構造を適切に設計する必要があります。主要なコンテンツエリアに対応する要素には、<div>などの適切なHTMLタグを使用します。
CSSを追加する
次に、スケルトンローダーのスタイルを定義するためのCSSを追加します。以下は、基本的なスケルトンローダーのCSSコードの例です。
.skeleton-loader {
/* 灰色の下地に、明るい帯を重ねる */
background-color: #eee;
background-image: linear-gradient(
90deg,
#eee 0%,
#f5f5f5 50%,
#eee 100%
);
background-size: 200% 100%;
animation: skeleton-loading 1.2s infinite linear;
border-radius: 4px;
}
@keyframes skeleton-loading {
from { background-position: 200% 0; }
to { background-position: -200% 0; }
}
/* 読み込み完了後に隠すためのクラス */
.skeleton-loader.hidden {
display: none;
}光の帯が流れる見せ方にすると、止まっているのではなく処理中だと伝わりやすくなります。グラデーションを要素の2倍の幅で敷き、background-position を動かすことで実現しています。
background-position はアニメーション可能なプロパティなので、この方法が使えます。background-image 自体はアニメーションできないので、画像を切り替える形では実装できません。
形はコンテンツに合わせて用意します。見出し用、本文用、画像用と分けておくと使い回せます。
.skeleton-title {
height: 24px;
width: 60%;
margin-bottom: 12px;
}
.skeleton-text {
height: 14px;
margin-bottom: 8px;
}
.skeleton-text:last-child {
width: 80%; /* 最終行は短くすると自然に見える */
}動きを減らす設定にしている人への配慮を入れてください。繰り返し動き続けるアニメーションは、この設定の対象になりやすい表現です。
@media (prefers-reduced-motion: reduce) {
.skeleton-loader {
animation: none;
}
}アニメーションを止めても、灰色のブロックは表示されたままなので「読み込み中」であることは伝わります。
JavaScriptで表示・非表示を切り替える
最後に、JavaScriptを使用してスケルトンローダーを実際に適用します。JavaScriptを使用することで、ページの読み込み状態を監視し、必要なタイミングでスケルトンローダーを表示・非表示にすることができます。以下は、基本的なJavaScriptコードの例です。
window.addEventListener('load', function() {
// ページの読み込みが完了したらスケルトンローダーを非表示にする
document.querySelector('.skeleton-loader').classList.add('hidden');
});
この例では、loadイベントでページの読み込み完了を監視し、スケルトンローダーを非表示にしています。
.hidden クラスは自分でCSSに定義しておく必要があります。上のCSSに含めた display: none がそれです。JavaScriptでクラスを付けるだけでは何も起きません。
実際のデータ読み込みに合わせるなら、load イベントではなく取得処理の完了に合わせてください。load はページ全体の読み込み完了なので、APIからデータを取ってくる場合はタイミングが合いません。
async function loadContent() {
const skeleton = document.querySelector('.skeleton-loader');
const content = document.querySelector('.content');
try {
const res = await fetch('/api/items');
const data = await res.json();
render(data);
} finally {
// 成功しても失敗してもスケルトンは消す
skeleton.classList.add('hidden');
content.classList.remove('hidden');
}
}finally で消すのが重要です。try の中だけで消していると、通信に失敗したときにスケルトンが永久に表示され続けます。
スポンサーリンク
スケルトンローダーCSSの利点
スケルトンローダーCSSの利点は以下の通りです。
- ユーザーに読み込み進行中であることを視覚的に伝えることができる。
- ユーザーの待ち時間を有意義に活用し、イライラや離脱を軽減することができる。
- ページの表示速度が改善されることで、ユーザーエクスペリエンスとSEOの両面でメリットが生まれる。
スケルトンローダーを使うときの注意
結論：実際のレイアウトと形が違うと、かえって違和感が出ます。
スケルトンは「この形のものが来る」という予告です。表示されたコンテンツと大きさや位置がずれていると、読み込み完了の瞬間に画面が動き、目的だったはずの安心感が損なわれます。
読み込みが一瞬で終わる場面では、出さないほうが良いこともあります。100ミリ秒程度で消えるスケルトンは、点滅しているようにしか見えません。表示までに遅延を入れる方法もあります。
// 300ms 以上かかりそうなときだけ表示する
const timer = setTimeout(() => skeleton.classList.remove('hidden'), 300);
// 読み込み完了時
clearTimeout(timer);クラスの付け外しで見た目を切り替える実装は、CSSとjQueryでアコーディオンを実装するでも同じ考え方を使っています。
クラスの変更を検知して処理を走らせたい場合は、JavaScriptでclassの変更を検知する方法をどうぞ。
▼HTML/CSS/JavaScriptの学習本を探してる方はこちらの記事をどうぞ
まとめ
この記事では、スケルトンローダーの概要と実装する方法について解説しました。
