【コード付き】スケルトンスクリーンUIの実装方法

2026年3月18日

デザイン見本（デモ）

コピペで使えるソースコード

HTML

<div class="sk-container">
  <div class="sk-wrapper">
    <div class="sk sk-avatar"></div>
    <div class="sk-text-group">
      <div class="sk sk-title"></div>
      <div class="sk sk-text"></div>
      <div class="sk sk-text sk-short"></div>
    </div>
  </div>
</div>

CSS

.sk-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 24px;
}

.sk-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    width: 80%;
    max-width: 480px;
    padding: 20px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

@keyframes sk-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.sk {
    background: #e2e5e7;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
}

.sk::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.4) 20%,
        rgba(255, 255, 255, 0.6) 60%,
        rgba(255, 255, 255, 0)
    );
    animation: sk-shimmer 2s infinite;
}

.sk-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sk-text-group {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.sk-title {
    width: 60%;
    height: 16px;
    margin-bottom: 4px;
}

.sk-text {
    width: 100%;
    height: 12px;
}

.sk-short {
    width: 80%;
}

実装のポイント

position: relative; overflow: hidden
シマーエフェクトを作る ::after 疑似要素を要素の内側に正しく収めるために必須の組み合わせです。overflow: hidden がないと光が要素の外にはみ出してしまいます。
::after 疑似要素で「光のオーバーレイ」を作る
position: absolute; top: 0; right: 0; bottom: 0; left: 0; で要素全体を覆うレイヤーを作ります。CSSだけで実現できるためJSは一切不要です。
background: linear-gradient(90deg, …) で光を表現
左右を透明 rgba(255,255,255,0)、中央を白半透明 rgba(255,255,255,0.6) にしたグラデーションが、すりガラス越しに光が走るような表現を生み出します。
translateX(-100%) → translateX(100%) のアニメーション
@keyframes で初期位置を左外側（-100%）に置き、右外側（100%）へ移動させます。これにより「左から右へ流れる光」が演出されます。
animation: sk-shimmer 2s infinite
infinite で無限ループします。速度は 2s 程度が自然に見えるバランスです。速すぎるとせわしなく、遅すぎると間延びした印象になります。
要素の形でコンテンツを予告する
border-radius: 50% で丸くしてアバター画像、幅60%の短い矩形でタイトル、幅100%の細い矩形でテキスト行を表現します。読み込み後のレイアウトに近い形にすることで、ユーザーが「何が来るか」を直感的に理解できます。
@keyframes はグローバルスコープ
CSSの @keyframes はクラスとは異なり、セレクタでスコープを絞れません。他のスタイルと名前が衝突しないよう、sk-shimmer のようにコンポーネント固有のプレフィックスを付けることを推奨します。

スケルトンスクリーンの使いどころ：
SNSのタイムラインやカードリストなど、コンテンツの読み込みに時間がかかる箇所に有効です。単なるくるくるローディングとは異なり、読み込み後のレイアウトを先行して見せることで、ユーザーが感じる待ち時間を心理的に短くする効果があります。

当サイトで公開しているWebデザインやUIの実装例は、一覧として以下記事に纏めています。