{"slug":"uiux-state-skeleton-screen","title":{"ja":"スケルトン画面","en":"Skeleton screen"},"summary":{"ja":"読み込み中の画面に、これから出る内容の形だけを灰色の面で先に見せる。","en":"Grey placeholder shapes show the layout of the content before it loads."},"categories":["uiux","motion"],"subAspects":["uiux.state"],"aspects":["uiux"],"tags":["skeleton","loading","placeholder"],"keywords":["skeleton screen","content placeholder","shimmer loading"],"traits":{"en":["The layout is shown with grey blocks where images, headings and text lines will go","Text lines are rounded bars of varying length; images are rounded rectangles or circles","No real text or images yet; colors are low-contrast","In motion, a soft highlight sweeps across the blocks (shimmer)"],"ja":["画像・見出し・本文の行が入る所に、灰色の面を置いて配置を見せる","本文の行は長さの違う角丸の棒、画像は角丸の長方形か円","まだ文字や画像はなく、色のコントラストは低い","動きでは、やわらかい光が面の上を横切る（シマー）"]},"prompt":"Skeleton screen: grey low-contrast placeholder blocks in an app layout, rounded rectangles for images, circles for avatars and rounded bars of varying length for text lines, no real content yet. In motion, a soft shimmer sweeps across the blocks.","negativePrompt":"real text and photos, spinner, error message, bright colors","contrasts":[{"slug":"uiux-state-spinner","title":{"ja":"スピナー","en":"Spinner"},"difference":{"en":"A skeleton screen previews the layout: grey blocks in the shape of the coming text and images, often with a shimmer. A spinner shows only that something is happening: a single rotating ring with no hint of what will appear.","ja":"スケルトンスクリーンはこれから出る内容の配置を先に見せ、文章や画像の形をした灰色のブロックに、光の走る演出を付けることが多い。スピナーは処理中であることだけを示し、回る輪が1つあるだけで、何が出るかは示さない。"}}],"images":[],"references":[{"label":"remotion-video-ui-library — Loading/SkeletonScreen","url":"https://github.com/asamiile/remotion-video-ui-library/tree/main/src/Loading/SkeletonScreen"}],"links":{"page":{"ja":"https://visual-gallery.asami.tokyo/ja/styles/uiux-state-skeleton-screen","en":"https://visual-gallery.asami.tokyo/en/styles/uiux-state-skeleton-screen"},"json":"https://visual-gallery.asami.tokyo/api/v1/styles/uiux-state-skeleton-screen","markdown":"https://visual-gallery.asami.tokyo/api/v1/styles/uiux-state-skeleton-screen/md"}}