スピナーの代わりにスケルトン UI を使用する必要があるのはどのような場合ですか?
画面にリスト、テーブル、CRM 行、カンバン カード、またはダッシュボード ウィジェットなどの多くのレコードが表示される場合は、スケルトン UI (ゴースト プレースホルダー) を使用します。スケルトンはデータの読み込み中にレイアウトを安定させ、ユーザーはすぐに構造をスキャンできます。スピナーは、プレビューする高密度のコンテンツ形状がない、短くアトミックなアクション (保存、送信、1 つのファイルのアップロード) に適しています。
高密度の画面上でスケルトンとスピナーが対戦します。
| オプション | こんな方に最適 | レイアウトの安定性 | 生産コスト | 正直なトレードオフ |
|---|---|---|---|---|
| スケルトン/ゴーストUI | リスト、テーブル、フィード、ダッシュボード | 高 — プレースホルダーは最終的なクロムと一致します | レイアウト テンプレート (またはジェネレーター) が必要です | 間違ったスケルトンの形状は偽物のように感じられます。役割をシンプルにする |
| センタースピナー | 短いアクション、モーダル送信 | 低 — コンテンツが到着するとページが頻繁にジャンプします | 些細な CSS | ~1 秒以内は問題ありません。長いリストの読み込みでイライラする |
| Ghost Wireframe Generator | HTML のクロムの着陸 + スケルトンの読み込み | エクスポートはデスクトップ/モバイルのレイアウトと一致します | 無料、ブラウザローカル | ライブラリ モードは v1 のみ — SVG から Figma への変換はまだありません |
リストとテーブルがゴーストを好む理由。
高密度の UI は、行、列、カードを通じて階層を伝えます。スピナーは、リクエストが終了するまでその階層を消去します。ゴースト バーとブロックを使用すると、ユーザーは実際のデータが到着する前に、「これはフィルター付きのテーブルだ」「これはカンバン ボードだ」と方向を定めることができます。そのため、製品チームはマーケティング モックアップだけでなく、CRM ビューや分析ビューのスケルトンをロードして出荷しています。
読み込み中のスケルトンを 1 分以内にエクスポートします。
- Ghost Wireframe Generator を開きます。
- CRM テーブル、分析、またはダッシュボード レイアウトを選択します。デスクトップとモバイルが必要な場合は、Combo を使用します。
- 製品の表面に合わせて色の役割を調整し、次に Copy HTML (
--ghost-*変数を含む) を調整します。 - オプション: エディターで同じコントラクトの Ghost Wireframe Skill を取得します。
Ghost Wireframe Generator ガイド の完全なウォークスルーをお読みください。