モーダル・通知・タブコード生成用
スケルトンローディング
読み込み中は、内容の形をしたグレーの枠を。
用途・説明
データを読み込んでいるあいだ、実際の内容と同じ形のグレーの枠（スケルトン）を表示するパーツを作成します。ぐるぐる回る表示よりも待ち時間が短く感じられ、表示されたときのがたつきも防げます。カードの一覧を例に実装します。
カラーとサイズを選ぶ
選んだ内容は、上の仕上がり例と下のプロンプト全文に反映されます。
カラー
サイズ
書き換える項目
プロンプト内の［ ］の部分を、つくりたいサイトに合わせて書き換えてから使ってください。
[読み込む内容]- 例：画像・タイトル・説明2行のカードを3列
[使用技術]- 例：HTML/CSS、React + Tailwind CSS
プロンプト全文
あなたはWebデザイナー兼フロントエンドエンジニアです。 以下の条件で「スケルトンローディング」を実装してください。 ## 作るもの - 読み込む内容：[読み込む内容] - 読み込み中の表示（スケルトン）と、読み込み後の表示の両方 - 2つを切り替えて確かめるための、サンプルのボタン ## レイアウト - スケルトンは、読み込み後の内容と、同じ大きさ・同じ位置にする（切り替わったときに、まわりが動かないように） - 文字の部分は、行の高さに合わせた横長の棒にする。最後の行は幅を60%にして、文章らしく見せる - 画像の部分は、画像と同じ縦横比の四角にする ## デザイン - スケルトンの色：#EDF1F7、角丸 4px（画像の部分は、実際の画像と同じ角丸） - 光が左から右へ流れる動き：linear-gradient（#EDF1F7 → #F7F9FC → #EDF1F7）を、1.5秒かけて横に動かし、くり返す - カードの枠（背景 #FFFFFF、枠線 1px solid #E2E8F0、角丸 12px）は、読み込み中も同じように表示する - 読み込み後のカード：タイトル 16px・font-weight 700・色 #1B2A44、説明 14px・色 #5F6D84、リンク 14px・font-weight 700・色 #1463F0 ## 動作 - 読み込みが 0.3秒以内に終わるときは、スケルトンを表示しない（ちらつきを防ぐ） - 読み込み後の内容は、0.2秒でフェードインする - 読み込みに失敗したときは、スケルトンを消して「読み込めませんでした」と「もう一度試す」のボタンを表示する ## 部品 - 棒・四角・円の3つの形を、幅と高さを指定して使える部品として用意する - それらを組み合わせた、カード用のスケルトンを用意する ## アクセシビリティ - 読み込み中の領域に aria-busy="true" を付け、スケルトン自体は aria-hidden="true" にする - 読み上げ用に「読み込み中」の文字を置く - 光が流れる動きは prefers-reduced-motion で止め、色だけにする ## 出力形式 - [使用技術]のコードを1つ出力
使い方
- 1「書き換える項目」を見ながら、プロンプト内の［ ］の部分を自分のサイトの内容に書き換えます。色とサイズはこのページ上で選ぶと、プロンプトに自動で反映されます。
- 2「プロンプトをコピー」を押し、Claude・ChatGPT・GeminiなどのAIにそのまま貼り付けて送信します。
- 3出力されたコードを自分のサイトに貼り付けて表示を確認します。直したいところは「余白をもう少し広く」のように、続けてAIに伝えると調整できます。