7onicDESIGN SYSTEM

Skeleton

Skeletonは、コンテンツ読み込み中にプレースホルダーを表示するコンポーネントです。 実際のレイアウト構造を事前に提示することで、レイアウトシフトを防ぎ、体感速度を向上させます。

3
Variants
2
Animations
Count
Multi-line
Pure
React

Playground

Preview
text × 3pulse
Variant
Animation
Count
<Skeleton count={3} />

Variants

Text
テキスト行のプレースホルダー。角丸＋行高さ比例サイズ
Default
Circular
アバター・アイコン用の円形プレースホルダー
Avatar
Rectangular
画像・カード領域の矩形プレースホルダー
Media

Features

Animation

2種のアニメーション。pulseは明暗パルス、waveは左→右のシマーエフェクト。

pulse
wave
false (static)
<Skeleton animation="pulse" />
<Skeleton animation="wave" />
<Skeleton animation={false} />

Composition

複数のSkeletonを組み合わせてカード・リストなど複雑なレイアウトを再現できます。

<div className="flex items-start gap-4">
  <Skeleton variant="circular" />
  <div className="flex-1 space-y-2">
    <Skeleton className="w-1/3" />
    <Skeleton />
    <Skeleton className="w-4/5" />
  </div>
</div>

Count

countでテキスト行を自動生成。最終行は短く、各行は自然な幅バリエーションが付きます。

count={3}
count={5} animation="wave"
<Skeleton count={3} />
<Skeleton count={5} animation="wave" />

Loading Wrapper

loading propで条件付き描画。trueでSkeleton表示、falseでchildrenを描画します。

loading=true
JH
loading=false
<Skeleton loading={isLoading} variant="circular">
  <Avatar src={user.avatar} />
</Skeleton>

Custom Sizing

width・height・radius propで精密なサイジングが可能です。

<Skeleton width={200} height={12} />
<Skeleton variant="circular" width={64} height={64} />
<Skeleton variant="rectangular" height={120} radius={16} />

API

Component Structure

Skeleton— Pure React

スタンドアロンコンポーネント。サブコンポーネントはありません。

Props

variant"text"
"text" | "circular" | "rectangular"

形状バリアント（text: 角丸行、circular: 円形、rectangular: 矩形）

animation"pulse"
"pulse" | "wave" | false

アニメーション（pulse: 明暗パルス、wave: シマー、false: 静的）

countundefined
number

テキスト行数（text variant のみ。自動幅バリエーション付き）

loadingundefined
boolean

条件付きローディング（true: Skeleton表示、false: children描画）

widthundefined
string | number

カスタム幅

heightundefined
string | number

カスタム高さ

radiusundefined
string | number

カスタムborder-radius

childrenundefined
ReactNode

loading=false 時に描画するコンテンツ

classNameundefined
string

追加のCSSクラス

Anatomy

Text
1
Circular
2
Rectangular
3
Wave Overlay
W
1
Text
h-4 rounded-md
2
Circular
w-10 h-10
3
Rectangular
w-full h-24
W
Wave
shimmer overlay

Best Practices

✓

推奨

  • ✓実際のコンテンツレイアウトに合わせた形状・サイズを使用する
  • ✓アバターにはcircular、テキストにはtext、画像にはrectangularを使い分ける
  • ✓ページ初期表示にはloading.tsxと組み合わせる
✕

避けるべき

  • ✕実際のレイアウトと大きく異なるSkeletonを使わない
  • ✕瞬時に表示されるデータにSkeletonを使わない — 不要なちらつきの原因
  • ✕不確定な待機にはSkeletonでなくSpinnerを使用する

Accessibility

ARIA / WCAG

  • aria-hidden="true" 自動付与
  • 装飾要素としてスクリーンリーダーから非表示
  • 親コンテナにaria-busyを設定推奨
  • prefers-reduced-motion対応