これは便利！ロード時に表示するスケルトンを実際のUIから抽出して自動生成してくれるフレームワーク -Boneyard

サイト構築 -JavaScript

Post on:2026年5月13日

sponsorsr

Webサイトやスマホアプリのロード時に、実際のUIから抽出したピクセルパーフェクトのスケルトンを自動生成してくれるフレームワークを紹介します。

React, Vue, Angularなどに対応しており、数行のコードを記述するだけで、あらゆるUIのスケルトンを自動生成できます。

下記のGIFアニメーションだと分かりにくいですが、スケルトンにはキラッとひかるshimmerなども用意されています。

ロード時に実際のUIを元にしたスケルトンを自動生成するフレームワーク -Boneyard

Boneyard
Boneyard -GitHub

Boneyardの特徴
Boneyardのデモ
Boneyardの使い方

Boneyardの特徴

Boneyardは、Webページやスマホアプリ用にスケルトンのローディング画面を自動生成できるフレームワークです。仕組みとしては、実際にレンダリングされているUIコンテンツをスナップショットし、正確なサイズと配置でスケルトンを自動生成してくれます。

MITライセンスで、商用プロジェクトでも無料で利用できます。

Boneyard

Boneyardのデモ

Boneyardのデモページでは、どのように機能してスケルトンが自動生成されるのかが分かります。まずは、よく使用されるカードのコンポーネント、ヒーロー画像・タイトル・テキスト・オーサーがコンテンツに含まれています。

Example -Boneyard

スケルトンはライトモード・ダークモードの両方に対応しており、カラーやアニメーションなどのカスタマイズもできます。

ソーシャルメディアのフィードでは、アバター・テキスト・画像・エンゲージメントがコンテンツに含まれています。

Example -Boneyard

プロダクト一覧は、検索バー・画像グリッド・ボタンがコンテンツに含まれています。これは最上部のGIFアニメーションと同じです。

Example -Boneyard

テキストが多い記事コンテンツも正確なサイズと配置でスケルトンを自動生成します。

Example -Boneyard

最後のデモはかなり複雑なレイアウト。実際のUIから直接抽出されているので、スケルトンはピクセルパーフェクトです。

Complex Example -Boneyard

Boneyardの使い方

Boneyardを使用すれば、あらゆるReactアプリにスケルトンのローディング画面を簡単に追加できます。

npm install boneyard-js

1	npm install boneyard-js

コンポーネントをラップします。

import { Skeleton } from 'boneyard-js/react'

function BlogPage() {
  const { data, isLoading } = useFetch('/api/post')

  return (
    &lt;Skeleton name="blog-card" loading={isLoading}&gt;
      {data &amp;&amp; &lt;BlogCard data={data} /&gt;}
    &lt;/Skeleton&gt;
  )
}

import { Skeleton } from 'boneyard-js/react'

function BlogPage() {

const { data, isLoading } = useFetch('/api/post')

return (

{data && <BlogCard data={data} />}

</Skeleton>

)

}

各スケルトンにはnameが必要です。CLIはこのnameを使ってスケルトンを識別し、ボーンファイルを生成します。

コンポーネントがAPIからのデータを必要とする場合、または認証が必要な場合は、モックコンテンツを含むfixturepropを追加します。CLIはキャプチャ時にフィクスチャをレンダリングするため、実際のデータは必要ありません。

&lt;Skeleton
  name="blog-card"
  loading={isLoading}
  fixture={&lt;BlogCard data={{
    title: "Sample Post",
    excerpt: "Placeholder text for layout...",
    author: "Jane Doe"
  }} /&gt;}
&gt;
  {data &amp;&amp; &lt;BlogCard data={data} /&gt;}
&lt;/Skeleton&gt;

<Skeleton

name="blog-card"

loading={isLoading}

fixture={<BlogCard data={{

title: "Sample Post",

excerpt: "Placeholder text for layout...",

author: "Jane Doe"

}} />}

{data && <BlogCard data={data} />}

</Skeleton>

ボーンを生成します。
開発サーバーが起動している状態で、CLIを実行します。CLIは、複数のビューポート幅でアプリにアクセスし、名前付きの<Skeleton>ごとにスナップショットを作成し、それぞれの<Skeleton>に対して.bones.jsonファイルを作成します。

npx boneyard-js build

1	npx boneyard-js build

ボーンを登録します。
ビルド時に、ボーンと共にregistry.jsファイルが生成されます。アプリのエントリに下記の1行を追加すると、すべての<Skeleton>が名前でボーンを自動的に解決します。

import './bones/registry'

1	import './bones/registry'

これで完了です。
コンポーネントはクリーンなままで、ファイルごとのJSONインポートは不要です。

import { Skeleton } from 'boneyard-js/react'

function BlogPage() {
  const { data, isLoading } = useFetch('/api/post')

  return (
    <Skeleton name="blog-card" loading={isLoading}>
      {data && <BlogCard data={data} />}
    </Skeleton>
  )
}