スケルトン

component

データを読み込んでいる間、表示される予定の中身と同じ形・大きさの淡いグレーの面を置いておく仮の表示です。何がどこに出るかを先に伝え、読み込みが終わって中身に差し替えたときにレイアウトがずれないようにします。

土台の .skeleton に形のクラスを組み合わせる。幅・高さは w-* / h-* / aspect-* で実物に合わせる

skeleton-text に置き換え先と同じ typo-* を付けると、高さがその文字の行と同じになる（面の高さは文字の大きさ、上下の余白は行間）

typo-* スケルトン読み込み後

typo-xlarge

事業の概要

typo-large

譲渡の希望条件

typo-medium

地域に根ざした洋菓子店です

typo-small

2026 年 10 月 16 日に更新

複数行の本文は skeleton-lines で包む（最後の行は自動で短くなる）。読み込み中の領域に aria-busy="true"、面は aria-hidden="true"

本文

一覧の行

カード（見出しは取得を待たずに出し、データの部分だけスケルトンにする）

このコンポーネントの用途

データを取得している間に、画面の骨組み（文字の行・画像・アバター）を先に見せて
「何がどこに出るか」を伝え、読み込み後にレイアウトがずれないようにする。
ボタンを押したあとの処理待ちは btn の data-loading、読み込みの失敗は alert / inline-message。

推奨される使い方と、やりがちな NG パターン

✓読み込み後の中身と同じ形・大きさ・並びで置く（差し替えたときにレイアウトがずれない）。
✓文字の行は skeleton-text にし、置き換え先と同じ typo-* を付ける。複数行の本文は skeleton-lines で包む。
✓見出しやラベルなど、取得を待たずに出せる文言はそのまま出し、取得するデータの部分だけをスケルトンにする。
✓読み込み中の領域に aria-busy="true" を付け、スケルトン自体は aria-hidden="true" で読み上げから外す。「読み込み中」であることは sr-only の文言で伝える。

✕ボタンを押したあとの処理待ちに使わない → btn の data-loading（二重送信も防げる）。
✕読み込みに失敗したとき・結果が 0 件のときにスケルトンのまま残さない → 失敗は alert / inline-message、 0 件は空の状態の案内に差し替える。
✕中身と違う形（行数・大きさがまったく違うもの）を置かない → 差し替えたときに画面が大きく動く。
✕独自の点滅・光が流れるアニメーションを足さない → 既定のゆっくりした変化のまま使う（速い明滅は WCAG 2.3.1）。

スケルトンにする範囲

Good

希望条件

見出しは取得を待たずに出す。何を読み込んでいるかが分かり、データの部分だけが待ち状態になる。

Don't

固定の見出しまでスケルトンにすると、何を待っているのかが分からない。