https://design-layer.com/ja/components/brand-bar-header https://design-layer.com/catalog-previews/brand-bar-header.jpg ブランドバーヘッダー フル幅バー型のサイトヘッダー。左にブランド、中央にナビ、右にアクセント CTA を置いたダークテーマの完成パーツです。SaaS やプロダクト、コーポレートサイトのトップにそのまま埋め込めます。スクロールすると中央のフローティング pill に変形し、ロゴ・メニューラベル・CTA とアクセント色だけ差し替えて公開できます。スマホではナビを畳み、パソコン幅では実寸の3カラムで表示されます。 https://design-layer.com/catalog-previews/brand-bar-header.jpg ブランドバーヘッダー フル幅バー型のサイトヘッダー。左にブランド、中央にナビ、右にアクセント CTA を置いたダークテーマの完成パーツです。SaaS やプロダクト、コーポレートサイトのトップにそのまま埋め込めます。スクロールすると中央のフローティング pill に変形し、ロゴ・メニューラベル・CTA とアクセント色だけ差し替えて公開できます。スマホではナビを畳み、パソコン幅では実寸の3カラムで表示されます。 https://design-layer.com/catalog-previews/brand-bar-header.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/brand-bar-header https://design-layer.com/catalog-previews/brand-bar-header.jpg Brand Bar Header A full-width site header with brand on the left, navigation in the center, and an accent CTA on the right — a production-ready dark bar for SaaS, product, and corporate sites. On scroll it morphs into a floating center pill. Swap the logo, menu labels, CTA, and accent color, then ship. Nav collapses on phones and lays out as three columns on desktop. https://design-layer.com/catalog-previews/brand-bar-header.jpg Brand Bar Header A full-width site header with brand on the left, navigation in the center, and an accent CTA on the right — a production-ready dark bar for SaaS, product, and corporate sites. On scroll it morphs into a floating center pill. Swap the logo, menu labels, CTA, and accent color, then ship. Nav collapses on phones and lays out as three columns on desktop. https://design-layer.com/catalog-previews/brand-bar-header.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/product-feature-bento https://design-layer.com/catalog-previews/product-feature-bento.jpg 製品機能ベントー ダークな製品スペックを、ポートレート・横長・ワイドの非対称グリッドで並べるベントーです。線画アイコンと公式サービスロゴで機能を見せ、プロダクトLPの中盤にそのまま置けます。見出しテキストと連携サービス名を差し替えて公開できます。 https://design-layer.com/en/components/product-feature-bento https://design-layer.com/catalog-previews/product-feature-bento.jpg Product Feature Bento A dark product-spec bento: portrait, landscape, and wide tiles in an asymmetric grid. Line-art icons and official service logos present features, ready to drop into the middle of a product landing page. Swap the headlines and integration names, then ship. https://design-layer.com/ja/components/portfolio-profile-music-player https://design-layer.com/catalog-previews/portfolio-profile-music-player.jpg ポートフォリオミュージックプレイヤー 画面右下に固定される pill 型のミュージックプレイヤーです。YouTube の URL または動画 ID を渡すと、隠し iframe で再生／一時停止できます。曲名・アーティスト名を差し替えて、ポートフォリオやプロフィールページにそのまま置けます。 https://design-layer.com/en/components/portfolio-profile-music-player https://design-layer.com/catalog-previews/portfolio-profile-music-player.jpg Portfolio Profile Music Player A pill music player fixed to the bottom-right. Pass a YouTube URL or video ID to play and pause via a hidden iframe. Swap the artist and track label, then drop it onto a portfolio or profile page. https://design-layer.com/ja/components/template-showcase-marquee https://design-layer.com/catalog-previews/template-showcase-marquee.jpg テンプレートショーケースマーキー Safari 風モックにテンプレートのスクリーンショットを載せ、無限スクロールで流すショーケースです。見出しと各カードの画像・URL を差し替えて、プロダクト LP やテンプレート一覧の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/template-showcase-marquee.jpg テンプレートショーケースマーキー Safari 風モックにテンプレートのスクリーンショットを載せ、無限スクロールで流すショーケースです。見出しと各カードの画像・URL を差し替えて、プロダクト LP やテンプレート一覧の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/template-showcase-marquee.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/template-showcase-marquee https://design-layer.com/catalog-previews/template-showcase-marquee.jpg Template Showcase Marquee An infinite-scroll showcase of template screenshots inside Safari-style mockups. Swap the heading and each card’s image and URL, then drop it into a product landing page or template gallery. https://design-layer.com/catalog-previews/template-showcase-marquee.jpg Template Showcase Marquee An infinite-scroll showcase of template screenshots inside Safari-style mockups. Swap the heading and each card’s image and URL, then drop it into a product landing page or template gallery. https://design-layer.com/catalog-previews/template-showcase-marquee.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/floating-pill-header https://design-layer.com/catalog-previews/floating-pill-header.jpg フローティング pill ヘッダー 画面上部に浮かぶ pill 型ヘッダー。ガラスのぼかしとコンパクトなナビで、ヒーローの上に重ねて使えます。ブランド名・メニュー・CTA と色を差し替えて、ランディングやポートフォリオにそのまま置けます。 https://design-layer.com/en/components/floating-pill-header https://design-layer.com/catalog-previews/floating-pill-header.jpg Floating Pill Header A floating pill header with glass blur, meant to sit over a hero. Swap brand, menu, CTA, and color, then drop it onto a landing page or portfolio. https://design-layer.com/ja/components/product-viewer https://design-layer.com/catalog-previews/product-viewer.jpg プロダクトビューア 中央の製品ビジュアルと、周囲に浮かぶ＋ピルでディテールを切り替えるプロダクトビューアです。見出し・各ピルの文言と画像を差し替えて、プロダクトLPの中盤にそのまま置けます。 https://design-layer.com/en/components/product-viewer https://design-layer.com/catalog-previews/product-viewer.jpg Product Viewer A product viewer with a centered hero visual and floating plus-pills for feature details. Swap the heading, pill copy, and images, then drop it into the middle of a product landing page. https://design-layer.com/ja/components/ncs-sound-halo https://design-layer.com/catalog-previews/ncs-sound-halo.jpg グラスオーブヒーロー 黒い画面いっぱいに、虹彩のガラスオーブが粒子で浮かぶフルスクリーン Hero です。キッカーと見出しを差し替えて、プロダクトやブランド、クリエイティブ系 LP の先頭に置けます。 https://design-layer.com/catalog-previews/ncs-sound-halo.jpg グラスオーブヒーロー 黒い画面いっぱいに、虹彩のガラスオーブが粒子で浮かぶフルスクリーン Hero です。キッカーと見出しを差し替えて、プロダクトやブランド、クリエイティブ系 LP の先頭に置けます。 https://design-layer.com/catalog-previews/ncs-sound-halo.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/ncs-sound-halo https://design-layer.com/catalog-previews/ncs-sound-halo.jpg Glass Orb Hero A full-screen hero with an iridescent glass orb of particles on black. Swap the kicker and title, then drop it onto a product, brand, or creative landing page. https://design-layer.com/catalog-previews/ncs-sound-halo.jpg Glass Orb Hero A full-screen hero with an iridescent glass orb of particles on black. Swap the kicker and title, then drop it onto a product, brand, or creative landing page. https://design-layer.com/catalog-previews/ncs-sound-halo.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/saapro-hero https://design-layer.com/catalog-previews/saapro-hero.jpg 砂色スクロールヒーロー ベージュ枠と砂色カードのフルスクリーン Hero です。sticky スクロールに合わせて、中央の草木 Lottie の後ろから見出し全文が文字ごとに現れます。見出し・サブコピー・ロゴ・Lottie を差し替えて、環境・テック・ブランド系 LP の先頭に置けます。 https://design-layer.com/catalog-previews/saapro-hero.jpg 砂色スクロールヒーロー ベージュ枠と砂色カードのフルスクリーン Hero です。sticky スクロールに合わせて、中央の草木 Lottie の後ろから見出し全文が文字ごとに現れます。見出し・サブコピー・ロゴ・Lottie を差し替えて、環境・テック・ブランド系 LP の先頭に置けます。 https://design-layer.com/catalog-previews/saapro-hero.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/saapro-hero https://design-layer.com/catalog-previews/saapro-hero.jpg Sand Scroll Hero A full-screen hero with a beige frame and sandy card. As you scroll the sticky stage, the headline reveals letter by letter from behind a central greenery Lottie. Swap the headline, subcopy, logo, and Lottie, then drop it onto an environment, tech, or brand landing page. https://design-layer.com/catalog-previews/saapro-hero.jpg Sand Scroll Hero A full-screen hero with a beige frame and sandy card. As you scroll the sticky stage, the headline reveals letter by letter from behind a central greenery Lottie. Swap the headline, subcopy, logo, and Lottie, then drop it onto an environment, tech, or brand landing page. https://design-layer.com/catalog-previews/saapro-hero.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/golden-oracle-hero https://design-layer.com/catalog-previews/golden-oracle-hero.jpg ゴールデン・オラクルヒーロー 白枠とゴールドの背景イラストの上に、ナビ・キャラ名・ロア・CTA を重ねるフルスクリーン Hero です。キャラ名・肩書き・説明文・ナビ・背景画像・ロゴを差し替えて、ゲームやエンタメ系 LP の先頭にそのまま置けます。 https://design-layer.com/en/components/golden-oracle-hero https://design-layer.com/catalog-previews/golden-oracle-hero.jpg Golden Oracle Hero A full-screen hero with a white frame over golden character artwork. Navigation, character name, lore, and pill CTAs sit on top of the illustration. Swap the copy, nav labels, background image, and logos, then drop it onto a game or entertainment landing page. https://design-layer.com/ja/components/sakura-editorial-poster https://design-layer.com/catalog-previews/sakura-editorial-poster.jpg 桜エディトリアルポスター 外周余白つきの桜ポスター Hero です。初回は背景と桜枝の画像のみ。スクロールすると枝の後ろから巨大タイトルが文字ごとに現れ、最後に下部の和洋混在コピーが出ます。タイトル・見出し・本文・キーワード・背景／前景画像を差し替えて、文化・旅行・ブランド系 LP の先頭に置けます。 https://design-layer.com/catalog-previews/sakura-editorial-poster.jpg 桜エディトリアルポスター 外周余白つきの桜ポスター Hero です。初回は背景と桜枝の画像のみ。スクロールすると枝の後ろから巨大タイトルが文字ごとに現れ、最後に下部の和洋混在コピーが出ます。タイトル・見出し・本文・キーワード・背景／前景画像を差し替えて、文化・旅行・ブランド系 LP の先頭に置けます。 https://design-layer.com/catalog-previews/sakura-editorial-poster.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/sakura-editorial-poster https://design-layer.com/catalog-previews/sakura-editorial-poster.jpg Sakura Editorial Poster A framed sakura poster hero. The first view is image-only; on scroll the oversized title reveals letter by letter from behind the branch, then editorial copy slides up. Swap the title, headlines, body, keywords, and background or foreground images, then drop it onto a culture, travel, or brand landing page. https://design-layer.com/catalog-previews/sakura-editorial-poster.jpg Sakura Editorial Poster A framed sakura poster hero. The first view is image-only; on scroll the oversized title reveals letter by letter from behind the branch, then editorial copy slides up. Swap the title, headlines, body, keywords, and background or foreground images, then drop it onto a culture, travel, or brand landing page. https://design-layer.com/catalog-previews/sakura-editorial-poster.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/digital-rain-name-footer https://design-layer.com/catalog-previews/digital-rain-name-footer.jpg デジタルレイン・ネームフッター 黒地にティールのデジタル画素が下から上へ流れ続けるフルスクリーン Footer です。中央に大きく名前を置き、右下に著作権文を添えます。名前とコピーライト文を差し替えて、ポートフォリオやクリエイティブ系 LP の末尾に置けます。 https://design-layer.com/catalog-previews/digital-rain-name-footer.jpg デジタルレイン・ネームフッター 黒地にティールのデジタル画素が下から上へ流れ続けるフルスクリーン Footer です。中央に大きく名前を置き、右下に著作権文を添えます。名前とコピーライト文を差し替えて、ポートフォリオやクリエイティブ系 LP の末尾に置けます。 https://design-layer.com/catalog-previews/digital-rain-name-footer.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/digital-rain-name-footer https://design-layer.com/catalog-previews/digital-rain-name-footer.jpg Digital Rain Name Footer A full-screen footer of teal digital pixels rising from bottom to top on black. A large centered name and a bottom-right copyright line. Swap the name and legal copy, then drop it at the end of a portfolio or creative landing page. https://design-layer.com/catalog-previews/digital-rain-name-footer.jpg Digital Rain Name Footer A full-screen footer of teal digital pixels rising from bottom to top on black. A large centered name and a bottom-right copyright line. Swap the name and legal copy, then drop it at the end of a portfolio or creative landing page. https://design-layer.com/catalog-previews/digital-rain-name-footer.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/portfolio-types-section https://design-layer.com/catalog-previews/portfolio-types-section.jpg ポートフォリオタイプ・デッキ スクロールに合わせてカードがデッキ状に積み上がるポートフォリオ領域セクションです。各領域の文言と画像／動画を差し替えて、クリエイティブスタジオやエージェンシーの LP 中盤にそのまま置けます。 https://design-layer.com/en/components/portfolio-types-section https://design-layer.com/catalog-previews/portfolio-types-section.jpg Portfolio Types Deck A scroll-driven deck of portfolio discipline cards. Swap card copy, images, and videos, then drop it into a creative studio or agency landing page. https://design-layer.com/ja/components/integrations-hub https://design-layer.com/catalog-previews/integrations-hub.jpg インテグレーションハブ 既存ツールのロゴが中央ハブに集約される連携図です。パルスが線上を流れ、狭い画面でも同じ放射レイアウトを縮小表示します。ハブ文言と各ツールの画像を差し替えて、SaaS や業務系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/integrations-hub.jpg インテグレーションハブ 既存ツールのロゴが中央ハブに集約される連携図です。パルスが線上を流れ、狭い画面でも同じ放射レイアウトを縮小表示します。ハブ文言と各ツールの画像を差し替えて、SaaS や業務系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/integrations-hub.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/integrations-hub https://design-layer.com/catalog-previews/integrations-hub.jpg Integrations Hub An integrations diagram where tool logos gather into a center hub with pulsing connector lines. The same radial layout scales down on narrow screens. Swap the hub label and tool images, then drop it into a SaaS or ops landing page. https://design-layer.com/catalog-previews/integrations-hub.jpg Integrations Hub An integrations diagram where tool logos gather into a center hub with pulsing connector lines. The same radial layout scales down on narrow screens. Swap the hub label and tool images, then drop it into a SaaS or ops landing page. https://design-layer.com/catalog-previews/integrations-hub.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/grainient-images-section https://design-layer.com/catalog-previews/grainient-images-section.jpg グレイニエント画像セクション 黒地にグラデーション画像が浮かぶフルブリードセクションです。画面固定のままスクロールすると画像群全体が画面中央へズームインし、最後に中央見出しが出現します。見出しと各タイル画像を差し替えて、デザイン系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/grainient-images-section.jpg グレイニエント画像セクション 黒地にグラデーション画像が浮かぶフルブリードセクションです。画面固定のままスクロールすると画像群全体が画面中央へズームインし、最後に中央見出しが出現します。見出しと各タイル画像を差し替えて、デザイン系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/grainient-images-section.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/grainient-images-section https://design-layer.com/catalog-previews/grainient-images-section.jpg Grainient Images Section A full-bleed black section where gradient tiles zoom in as you scroll, then a centered headline fades in. Swap the title and tile images, then drop it into a design or creative landing page. https://design-layer.com/catalog-previews/grainient-images-section.jpg Grainient Images Section A full-bleed black section where gradient tiles zoom in as you scroll, then a centered headline fades in. Swap the title and tile images, then drop it into a design or creative landing page. https://design-layer.com/catalog-previews/grainient-images-section.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/clicky-keyboard https://design-layer.com/catalog-previews/clicky-keyboard.jpg クリッキィキーボード Mac 配列の Keyboard Simulator です。キーをクリックするか、実機のキーボードで入力するとメカニカルなクリック音が鳴り、押したキーが上にプレビューされます。プロダクトやテック系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/clicky-keyboard.jpg クリッキィキーボード Mac 配列の Keyboard Simulator です。キーをクリックするか、実機のキーボードで入力するとメカニカルなクリック音が鳴り、押したキーが上にプレビューされます。プロダクトやテック系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/clicky-keyboard.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/clicky-keyboard https://design-layer.com/catalog-previews/clicky-keyboard.jpg Clicky Keyboard A Mac-layout Keyboard Simulator. Click a key — or type on your own keyboard — to hear a mechanical click and see the key preview above. Drop it into a product or tech landing page. https://design-layer.com/catalog-previews/clicky-keyboard.jpg Clicky Keyboard A Mac-layout Keyboard Simulator. Click a key — or type on your own keyboard — to hear a mechanical click and see the key preview above. Drop it into a product or tech landing page. https://design-layer.com/catalog-previews/clicky-keyboard.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/cinematic-audio-player https://design-layer.com/catalog-previews/cinematic-audio-player.jpg シネマティック・オーディオプレイヤー 横長のシネマティックなオーディオプレイヤーです。ジャケット・曲名・シークバー・シャッフル／リピートと音量を備え、YouTube URL のプレイリストで連続再生できます。曲情報とカバー画像を差し替えて、ポートフォリオやエンタメ系 LP にそのまま置けます。 https://design-layer.com/en/components/cinematic-audio-player https://design-layer.com/catalog-previews/cinematic-audio-player.jpg Cinematic Audio Player A wide cinematic audio player with cover art, seek bar, shuffle/repeat, and volume. Drive a YouTube playlist for continuous playback. Swap track metadata and cover art, then drop it onto a portfolio or entertainment landing page. https://design-layer.com/ja/components/abstract-mask https://design-layer.com/catalog-previews/abstract-mask.jpg アブストラクトマスク 白地に、小さな角丸カードの窓が開くフルブリードセクションです。スクロールすると窓が画面いっぱいに広がり、内側のカラー面とコピーが現れます。ラベル・見出し・本文を差し替えて、エージェンシーやテック系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/abstract-mask.jpg アブストラクトマスク 白地に、小さな角丸カードの窓が開くフルブリードセクションです。スクロールすると窓が画面いっぱいに広がり、内側のカラー面とコピーが現れます。ラベル・見出し・本文を差し替えて、エージェンシーやテック系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/abstract-mask.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/abstract-mask https://design-layer.com/catalog-previews/abstract-mask.jpg Abstract Mask A white full-bleed section whose small rounded card window expands to fill the viewport on scroll, revealing a solid color field and copy inside. Swap the labels, headline, and body, then drop it into an agency or tech landing page. https://design-layer.com/catalog-previews/abstract-mask.jpg Abstract Mask A white full-bleed section whose small rounded card window expands to fill the viewport on scroll, revealing a solid color field and copy inside. Swap the labels, headline, and body, then drop it into an agency or tech landing page. https://design-layer.com/catalog-previews/abstract-mask.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/pixel-arc-loader https://design-layer.com/catalog-previews/pixel-arc-loader.jpg ピクセルアーク・ローダー ボケた風景写真の上に、アーチ状の 3D ピクセルロゴが文字ごとに波打つフルスクリーンのローディング画面です。ロゴ文言と背景写真を差し替えて、ゲームやクリエイティブ系サイトの読み込み待ちにそのまま置けます。 https://design-layer.com/catalog-previews/pixel-arc-loader.jpg ピクセルアーク・ローダー ボケた風景写真の上に、アーチ状の 3D ピクセルロゴが文字ごとに波打つフルスクリーンのローディング画面です。ロゴ文言と背景写真を差し替えて、ゲームやクリエイティブ系サイトの読み込み待ちにそのまま置けます。 https://design-layer.com/catalog-previews/pixel-arc-loader.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/pixel-arc-loader https://design-layer.com/catalog-previews/pixel-arc-loader.jpg Pixel Arc Loader A full-screen loader with a blurred landscape behind an arched 3D pixel logo. Letters bob in a traveling wave. Swap the title and background photo, then drop it onto a game or creative site while content loads. https://design-layer.com/catalog-previews/pixel-arc-loader.jpg Pixel Arc Loader A full-screen loader with a blurred landscape behind an arched 3D pixel logo. Letters bob in a traveling wave. Swap the title and background photo, then drop it onto a game or creative site while content loads. https://design-layer.com/catalog-previews/pixel-arc-loader.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/home-point-ba https://design-layer.com/catalog-previews/home-point-ba.jpg ビフォーアフター・スクロール スクロールすると画面が止まったまま、ビフォーの写真が横に拭き取られてアフターへ切り替わります。そのあと、もう1枚の写真が小さく現れて画面いっぱいに広がります。ラベル・写真・注記を差し替えて、美容やプロダクト LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/home-point-ba.jpg ビフォーアフター・スクロール スクロールすると画面が止まったまま、ビフォーの写真が横に拭き取られてアフターへ切り替わります。そのあと、もう1枚の写真が小さく現れて画面いっぱいに広がります。ラベル・写真・注記を差し替えて、美容やプロダクト LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/home-point-ba.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/home-point-ba https://design-layer.com/catalog-previews/home-point-ba.jpg Before After Scroll As you scroll, the screen stays put. Before wipes sideways into After, then a third photo grows in and fills the view. Swap labels, photos, and notes, then drop it into a beauty or product landing page. https://design-layer.com/catalog-previews/home-point-ba.jpg Before After Scroll As you scroll, the screen stays put. Before wipes sideways into After, then a third photo grows in and fills the view. Swap labels, photos, and notes, then drop it into a beauty or product landing page. https://design-layer.com/catalog-previews/home-point-ba.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/home-point-ingredient https://design-layer.com/catalog-previews/home-point-ingredient.jpg 成分スクロール 横画面では左の縦ビジュアルが中央から寄って拡大し、右に成分カードが交互に現れます。カードの名前・説明と写真、縦ビジュアルを差し替えて、美容やプロダクト LP の中盤にそのまま置けます。 https://design-layer.com/en/components/home-point-ingredient https://design-layer.com/catalog-previews/home-point-ingredient.jpg Ingredient Scroll On landscape screens, a vertical visual slides in from the center and grows on the left while ingredient cards stagger in on the right. Swap the card copy, photos, and media, then drop it into a beauty or product landing page. https://design-layer.com/ja/components/owners-pricing-section https://design-layer.com/catalog-previews/owners-pricing-section.jpg オーナーズ料金 夜景のオフィス写真の上に濃い黒のオーバーレイを重ね、料金・特典リスト・ストア導線とプロダクト写真を置く会員プライシングです。見出し・価格・特典文と背景／商品写真を差し替えて、金融や会員制 LP の中盤にそのまま置けます。 https://design-layer.com/en/components/owners-pricing-section https://design-layer.com/catalog-previews/owners-pricing-section.jpg Owners Pricing A membership pricing block over a night-office photo with a 78% black overlay. Price, two-column perks, store badges, and a product still sit on top. Swap the copy and photos, then drop it into a finance or members landing page. https://design-layer.com/ja/components/pin-spacer-works https://design-layer.com/catalog-previews/pin-spacer-works.jpg ピンスペーサー・ワークス スクロールすると画面が固定（pin-spacer）され、左右に並んだ作品写真が奥から手前へ飛び出す 3D フライスルーです。背景にはアクティブな作品のぼかし写真がクロスフェードし、下部にアクティブな作品名が追従します。作品名・クライアント名・写真を差し替えて、フォトグラファーやクリエイティブ系ポートフォリオの中盤にそのまま置けます。 https://design-layer.com/catalog-previews/pin-spacer-works.jpg ピンスペーサー・ワークス スクロールすると画面が固定（pin-spacer）され、左右に並んだ作品写真が奥から手前へ飛び出す 3D フライスルーです。背景にはアクティブな作品のぼかし写真がクロスフェードし、下部にアクティブな作品名が追従します。作品名・クライアント名・写真を差し替えて、フォトグラファーやクリエイティブ系ポートフォリオの中盤にそのまま置けます。 https://design-layer.com/catalog-previews/pin-spacer-works.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/pin-spacer-works https://design-layer.com/catalog-previews/pin-spacer-works.jpg Pin Spacer Works A pinned full-screen works gallery. As you scroll, photos alternating left and right fly out of the distance toward the camera while a blurred backdrop of the active work crossfades behind them. The active work's name follows along the bottom bar. Swap the talent names, clients, and photos, then drop it into a photographer or creative portfolio. https://design-layer.com/catalog-previews/pin-spacer-works.jpg Pin Spacer Works A pinned full-screen works gallery. As you scroll, photos alternating left and right fly out of the distance toward the camera while a blurred backdrop of the active work crossfades behind them. The active work's name follows along the bottom bar. Swap the talent names, clients, and photos, then drop it into a photographer or creative portfolio. https://design-layer.com/catalog-previews/pin-spacer-works.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/video-production-works https://design-layer.com/catalog-previews/video-production-works.jpg 映像ワークス・コラージュ 濃いグレーのフルビューポートに、斜めのフォトコラージュが下から上へ流れ続けます。左上に見出しと本文、最下に巨大なセリフ英字を重ねます。文言と写真を差し替えて、映像やクリエイティブ系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/video-production-works.jpg 映像ワークス・コラージュ 濃いグレーのフルビューポートに、斜めのフォトコラージュが下から上へ流れ続けます。左上に見出しと本文、最下に巨大なセリフ英字を重ねます。文言と写真を差し替えて、映像やクリエイティブ系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/video-production-works.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/video-production-works https://design-layer.com/catalog-previews/video-production-works.jpg Video Works Collage A full-viewport works block: a diagonal photo collage drifts upward on charcoal, with a serif headline, body, CTA, and oversized type at the bottom. Swap the copy and stills, then drop it into a film or creative landing page. https://design-layer.com/catalog-previews/video-production-works.jpg Video Works Collage A full-viewport works block: a diagonal photo collage drifts upward on charcoal, with a serif headline, body, CTA, and oversized type at the bottom. Swap the copy and stills, then drop it into a film or creative landing page. https://design-layer.com/catalog-previews/video-production-works.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/enk-gallery https://design-layer.com/catalog-previews/enk-gallery.jpg 境内ギャラリー 画面が止まったまま、2枚組の写真がスクロールで下から上へワイプして次の組へ切り替わります。写真と代替テキストを差し替えて、庭園や文化、宿泊系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/enk-gallery.jpg 境内ギャラリー 画面が止まったまま、2枚組の写真がスクロールで下から上へワイプして次の組へ切り替わります。写真と代替テキストを差し替えて、庭園や文化、宿泊系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/enk-gallery.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/enk-gallery https://design-layer.com/catalog-previews/enk-gallery.jpg Temple Grounds Gallery A sticky full-viewport gallery. Paired photos wipe upward as you scroll, then the next pair takes their place. Swap the stills, then drop it into a garden, culture, or hospitality landing page. https://design-layer.com/catalog-previews/enk-gallery.jpg Temple Grounds Gallery A sticky full-viewport gallery. Paired photos wipe upward as you scroll, then the next pair takes their place. Swap the stills, then drop it into a garden, culture, or hospitality landing page. https://design-layer.com/catalog-previews/enk-gallery.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/onsen-section https://design-layer.com/catalog-previews/onsen-section.jpg 温泉スクロール帯 画面が止まったまま、温泉写真がスクロールで切り替わるフルブリード帯です。ぼかした背景の上に前景パネルと縦書き見出し、和英の詩的コピーが並びます。見出し・本文・写真を差し替えて、旅館や温泉、宿泊系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/onsen-section.jpg 温泉スクロール帯 画面が止まったまま、温泉写真がスクロールで切り替わるフルブリード帯です。ぼかした背景の上に前景パネルと縦書き見出し、和英の詩的コピーが並びます。見出し・本文・写真を差し替えて、旅館や温泉、宿泊系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/onsen-section.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/onsen-section https://design-layer.com/catalog-previews/onsen-section.jpg Onsen Scroll Band A sticky full-bleed onsen band. Hot-spring stills crossfade as you scroll, with a blurred backdrop, a sharp foreground panel, a vertical heading, and bilingual verse. Swap the copy and photos, then drop it into a ryokan or hospitality landing page. https://design-layer.com/catalog-previews/onsen-section.jpg Onsen Scroll Band A sticky full-bleed onsen band. Hot-spring stills crossfade as you scroll, with a blurred backdrop, a sharp foreground panel, a vertical heading, and bilingual verse. Swap the copy and photos, then drop it into a ryokan or hospitality landing page. https://design-layer.com/catalog-previews/onsen-section.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/shuku-hero https://design-layer.com/catalog-previews/shuku-hero.jpg 宿ヒーロー 古蔵の写真がゆっくりズームしながら切り替わるフルスクリーン Hero です。スクロールするとイントロが消え、右寄りの本文が出ます。文言と写真を差し替えて、旅館や宿泊系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/shuku-hero.jpg 宿ヒーロー 古蔵の写真がゆっくりズームしながら切り替わるフルスクリーン Hero です。スクロールするとイントロが消え、右寄りの本文が出ます。文言と写真を差し替えて、旅館や宿泊系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/shuku-hero.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/shuku-hero https://design-layer.com/catalog-previews/shuku-hero.jpg Inn Hero A full-screen inn hero. Brewery stills Ken Burns and crossfade; on scroll the intro fades and right-aligned body copy appears. Swap the copy and photos, then drop it onto a ryokan or hospitality landing page. https://design-layer.com/catalog-previews/shuku-hero.jpg Inn Hero A full-screen inn hero. Brewery stills Ken Burns and crossfade; on scroll the intro fades and right-aligned body copy appears. Swap the copy and photos, then drop it onto a ryokan or hospitality landing page. https://design-layer.com/catalog-previews/shuku-hero.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/sd-projects https://design-layer.com/catalog-previews/sd-projects.jpg スタンダードデザイン・作品グリッド 建築・リノベ作品を masonry で並べる作品グリッドです。写真にホバーすると拡大し、下にタイトルとタグ、最下部に All Projects 帯があります。作品名・タグ・写真を差し替えて、建築やデザイン事務所の LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/sd-projects.jpg スタンダードデザイン・作品グリッド 建築・リノベ作品を masonry で並べる作品グリッドです。写真にホバーすると拡大し、下にタイトルとタグ、最下部に All Projects 帯があります。作品名・タグ・写真を差し替えて、建築やデザイン事務所の LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/sd-projects.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/sd-projects https://design-layer.com/catalog-previews/sd-projects.jpg Studio Projects Grid A masonry works grid for architecture and renovation. Photos zoom on hover, with serif titles, tags, and an All Projects band. Swap the titles, tags, and stills, then drop it into an architecture or studio landing page. https://design-layer.com/catalog-previews/sd-projects.jpg Studio Projects Grid A masonry works grid for architecture and renovation. Photos zoom on hover, with serif titles, tags, and an All Projects band. Swap the titles, tags, and stills, then drop it into an architecture or studio landing page. https://design-layer.com/catalog-previews/sd-projects.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/yohobrewing-footer https://design-layer.com/catalog-previews/yohobrewing-footer.jpg ヤッホーブルーイング・フッター 紺ボディにロゴ、3カラムナビ、SNS、コピーライトを置くクラフトビール向けフッターです。文言とロゴを差し替えて、飲食やブランド LP の末尾にそのまま置けます。 https://design-layer.com/en/components/yohobrewing-footer https://design-layer.com/catalog-previews/yohobrewing-footer.jpg Yoho Brewing Footer A navy site footer with logo, three-column nav, social icons, and copyright. Swap the copy and logo, then drop it at the end of a food or brand landing page. https://design-layer.com/ja/components/dark-infra-story https://design-layer.com/catalog-previews/dark-infra-story.jpg ダークインフラ・ストーリー帯 黒地に青写真グリッドを敷き、1枚の写真が左から右、中央、画面いっぱいに動くスクロール帯です。コピーと写真を差し替えて、テックやインフラ系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/dark-infra-story.jpg ダークインフラ・ストーリー帯 黒地に青写真グリッドを敷き、1枚の写真が左から右、中央、画面いっぱいに動くスクロール帯です。コピーと写真を差し替えて、テックやインフラ系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/dark-infra-story.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/dark-infra-story https://design-layer.com/catalog-previews/dark-infra-story.jpg Dark Infra Story Band A zinc-950 scroll band with a blueprint grid. One still moves left, then right, then center, then fills the viewport. Swap the copy and photo, then drop it into a tech or infrastructure landing page. https://design-layer.com/catalog-previews/dark-infra-story.jpg Dark Infra Story Band A zinc-950 scroll band with a blueprint grid. One still moves left, then right, then center, then fills the viewport. Swap the copy and photo, then drop it into a tech or infrastructure landing page. https://design-layer.com/catalog-previews/dark-infra-story.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/dark-infra-footer https://design-layer.com/catalog-previews/dark-infra-footer.jpg ダークインフラ・フッター コンクリート建築の写真を全面に敷き、下部に見出し・リンク列・CTA・SNS・コピーライトを置くフルブリードフッターです。文言と背景写真を差し替えて、テックやインフラ系 LP の末尾にそのまま置けます。 https://design-layer.com/en/components/dark-infra-footer https://design-layer.com/catalog-previews/dark-infra-footer.jpg Dark Infra Footer A full-bleed photo footer over brutalist concrete, with a headline, link columns, CTA, social icons, and copyright along the bottom. Swap the copy and still, then drop it at the end of a tech or infrastructure landing page. https://design-layer.com/ja/components/path-drawing-portfolio-hero https://design-layer.com/catalog-previews/path-drawing-portfolio-hero.jpg パス描画ポートフォリオ・ヒーロー 暗い画面中央に、名前がストロークで描かれていくフルスクリーン Hero です。上に小さなラベル、下に肩書きとスクロール合図があります。表示名・肩書きを差し替えて、ポートフォリオの先頭にそのまま置けます。 https://design-layer.com/catalog-previews/path-drawing-portfolio-hero.jpg パス描画ポートフォリオ・ヒーロー 暗い画面中央に、名前がストロークで描かれていくフルスクリーン Hero です。上に小さなラベル、下に肩書きとスクロール合図があります。表示名・肩書きを差し替えて、ポートフォリオの先頭にそのまま置けます。 https://design-layer.com/catalog-previews/path-drawing-portfolio-hero.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/path-drawing-portfolio-hero https://design-layer.com/catalog-previews/path-drawing-portfolio-hero.jpg Path Drawing Portfolio Hero A full-screen hero whose name draws in as an SVG stroke. A small eyebrow sits above, a tagline and scroll cue below. Swap the name and line, then drop it at the top of a portfolio. https://design-layer.com/catalog-previews/path-drawing-portfolio-hero.jpg Path Drawing Portfolio Hero A full-screen hero whose name draws in as an SVG stroke. A small eyebrow sits above, a tagline and scroll cue below. Swap the name and line, then drop it at the top of a portfolio. https://design-layer.com/catalog-previews/path-drawing-portfolio-hero.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/portfolio-morph-contact https://design-layer.com/catalog-previews/portfolio-morph-contact.jpg モルフポートフォリオ・コンタクト 白地に左の大きな見出しと、右の浮遊フォームカードを置くお問い合わせセクションです。メール、SNS、名前／メール／本文、興味タグ、送信ボタンが並びます。見出しと窓口を差し替えて、ポートフォリオの末尾近くにそのまま置けます。 https://design-layer.com/en/components/portfolio-morph-contact https://design-layer.com/catalog-previews/portfolio-morph-contact.jpg Morph Portfolio Contact A contact block on white: a large headline on the left and a floating form card on the right. Email, social, name/email/message, interest chips, and a send button. Swap the copy and inbox, then drop it near the end of a portfolio. https://design-layer.com/ja/components/video-production-contact https://design-layer.com/catalog-previews/video-production-contact.jpg 映像制作・コンタクト フルブリード写真の上に暗いオーバーレイを重ね、中央に CONTACT US・案内文・メール、下部に3分割 CTA を置くお問い合わせです。文言と背景写真を差し替えて、映像やクリエイティブ系 LP の末尾近くにそのまま置けます。 https://design-layer.com/en/components/video-production-contact https://design-layer.com/catalog-previews/video-production-contact.jpg Video Production Contact A full-bleed photo contact with a dark overlay, a centered CONTACT US lockup, email, hours, and a three-split CTA row. Swap the copy and still, then drop it near the end of a film or creative landing page. https://design-layer.com/ja/components/album-package-showcase https://design-layer.com/catalog-previews/album-package-showcase.jpg アルバムパッケージ・ショーケース アルバムのパッケージ一式を斜めに重ねた 16:9 のエディトリアルセクションです。縦書きの帯、中央のジャケット、背後で回り続けるレコード盤、右の大見出し、右下のバーコード付き裏面カードが、それぞれ別のリズムで浮遊します。見出し・作品名・アーティスト名とジャケット画像を差し替えて、音楽リリースやアートワーク紹介の LP 中盤にそのまま置けます。 https://design-layer.com/en/components/album-package-showcase https://design-layer.com/catalog-previews/album-package-showcase.jpg Album Package Showcase A 16:9 editorial section that fans a full album package across the frame: a vertical obi strip, the cover art, a vinyl record spinning behind it, an oversized serif title, and a barcoded back card. Each layer drifts on its own rhythm while sparkles and a lens flare breathe. Swap the title, album name, artist, and cover image, then drop it into a music release or artwork landing page. https://design-layer.com/ja/components/flip-cta-newsletter https://design-layer.com/catalog-previews/flip-cta-newsletter.jpg フリップCTAニュースレター 白い背景に、エレクトリックマゼンタの 3D フリップボタンが印象的なニュースレター登録ブロックです。ボタンの各語がホバーで順番にめくれ、メール入力のバリデーションと成功表示を備えます。コピー・ボタン文言・プレースホルダーを差し替えて、EC やブランドサイトのフッター前にそのまま置けます。 https://design-layer.com/en/components/flip-cta-newsletter https://design-layer.com/catalog-previews/flip-cta-newsletter.jpg Flip CTA Newsletter A newsletter signup block on a white canvas with an electric-magenta 3D flip CTA. Each word of the button flips in sequence on hover, with email validation and a success state built in. Swap the copy, button label, and placeholder, then drop it before the footer of a brand or e-commerce site. https://design-layer.com/ja/components/borderless-account-vaults https://design-layer.com/catalog-previews/borderless-account-vaults.jpg ボーダレス口座ヴォールト 白地の中央に大きな見出しを置き、周囲の角丸 UI カードが最初は中央に集まり、セクションが表示されたときに星座状の最終位置へ広がるボーダレス口座セクションです。見出しと各カードの画像を差し替えて、フィンテックや SaaS の LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/borderless-account-vaults.jpg ボーダレス口座ヴォールト 白地の中央に大きな見出しを置き、周囲の角丸 UI カードが最初は中央に集まり、セクションが表示されたときに星座状の最終位置へ広がるボーダレス口座セクションです。見出しと各カードの画像を差し替えて、フィンテックや SaaS の LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/borderless-account-vaults.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/borderless-account-vaults https://design-layer.com/catalog-previews/borderless-account-vaults.jpg Borderless Account Vaults A borderless-account section with a large centered headline. Rounded UI cards start clustered in the middle, then expand into a constellation when the section enters the viewport. Swap the title and each card image, then drop it into a fintech or SaaS landing page. https://design-layer.com/catalog-previews/borderless-account-vaults.jpg Borderless Account Vaults A borderless-account section with a large centered headline. Rounded UI cards start clustered in the middle, then expand into a constellation when the section enters the viewport. Swap the title and each card image, then drop it into a fintech or SaaS landing page. https://design-layer.com/catalog-previews/borderless-account-vaults.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/benefits-scroll-list https://design-layer.com/catalog-previews/benefits-scroll-list.jpg ベネフィット・スクロールリスト 黒地の左に小さな sticky ラベル、右に巨大な大文字の単語リストを置くスクロールセクションです。ビューポート中央に来た語だけがシャープになり、上下はぼかして消えます。ラベルと単語を差し替えて、ウェルネスやブランド、プロダクト LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/benefits-scroll-list.jpg ベネフィット・スクロールリスト 黒地の左に小さな sticky ラベル、右に巨大な大文字の単語リストを置くスクロールセクションです。ビューポート中央に来た語だけがシャープになり、上下はぼかして消えます。ラベルと単語を差し替えて、ウェルネスやブランド、プロダクト LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/benefits-scroll-list.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/benefits-scroll-list https://design-layer.com/catalog-previews/benefits-scroll-list.jpg Benefits Scroll List A dark scroll section with a small sticky label on the left and an oversized uppercase word list on the right. The word in the middle of the viewport stays sharp; words above and below fade and blur. Swap the label and words, then drop it into a wellness, brand, or product landing page. https://design-layer.com/catalog-previews/benefits-scroll-list.jpg Benefits Scroll List A dark scroll section with a small sticky label on the left and an oversized uppercase word list on the right. The word in the middle of the viewport stays sharp; words above and below fade and blur. Swap the label and words, then drop it into a wellness, brand, or product landing page. https://design-layer.com/catalog-previews/benefits-scroll-list.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/collections-scroll-slider https://design-layer.com/catalog-previews/collections-scroll-slider.jpg コレクション・スクロールスライダー 砂色の右パネルとフルブリード背景が、sticky ピン留め中のスクロールで同期して切り替わるコレクション・スライダーです。タイトル・製品リスト・パックショット・導入文がパネル内でフェード／スライドします。コピーと画像を差し替えて、ラグジュアリーやプロダクト LP のヒーローにそのまま置けます。 https://design-layer.com/catalog-previews/collections-scroll-slider.jpg コレクション・スクロールスライダー 砂色の右パネルとフルブリード背景が、sticky ピン留め中のスクロールで同期して切り替わるコレクション・スライダーです。タイトル・製品リスト・パックショット・導入文がパネル内でフェード／スライドします。コピーと画像を差し替えて、ラグジュアリーやプロダクト LP のヒーローにそのまま置けます。 https://design-layer.com/catalog-previews/collections-scroll-slider.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/collections-scroll-slider https://design-layer.com/catalog-previews/collections-scroll-slider.jpg Collections Scroll Slider A full-screen collections slider: scroll through full-bleed backgrounds while a sand-colored right panel stays pinned and syncs titles, product lists, packshots, and intros. Swap the copy and images, then drop it onto a luxury or product landing page. https://design-layer.com/catalog-previews/collections-scroll-slider.jpg Collections Scroll Slider A full-screen collections slider: scroll through full-bleed backgrounds while a sand-colored right panel stays pinned and syncs titles, product lists, packshots, and intros. Swap the copy and images, then drop it onto a luxury or product landing page. https://design-layer.com/catalog-previews/collections-scroll-slider.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/home-projects-stack https://design-layer.com/catalog-previews/home-projects-stack.jpg ホームプロジェクト・スタック オリーブ地の左に巨大な3行見出し・吹き出し絵文字・アバター列、右にストーリー型の縦カードが横に並ぶ作品セクションです。カードはドラッグで切り替わり、上のバーが自動で進みます。見出し・タグ・写真を差し替えて、エージェンシーやスタジオの LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/home-projects-stack.jpg ホームプロジェクト・スタック オリーブ地の左に巨大な3行見出し・吹き出し絵文字・アバター列、右にストーリー型の縦カードが横に並ぶ作品セクションです。カードはドラッグで切り替わり、上のバーが自動で進みます。見出し・タグ・写真を差し替えて、エージェンシーやスタジオの LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/home-projects-stack.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/home-projects-stack https://design-layer.com/catalog-previews/home-projects-stack.jpg Home Projects Stack An agency works section: oversized headline, emoji bubble, and avatars on the left; Instagram-style portrait cards slide on the right. Drag to change cases, story bars auto-advance stills. Swap the copy and photos, then drop it into a studio or agency landing page. https://design-layer.com/catalog-previews/home-projects-stack.jpg Home Projects Stack An agency works section: oversized headline, emoji bubble, and avatars on the left; Instagram-style portrait cards slide on the right. Drag to change cases, story bars auto-advance stills. Swap the copy and photos, then drop it into a studio or agency landing page. https://design-layer.com/catalog-previews/home-projects-stack.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/moonsworth-companies-grid https://design-layer.com/catalog-previews/moonsworth-companies-grid.jpg ムーンズワース・カンパニーグリッド 白地に2×2の大型カードを1画面に収めるサイトグリッドです。各カードは背面にシャープなサイトプレビューを置き、ホバーで写真が縮みぼかしが入り四隅に丸ドットが現れると同時に、サイト名・業種/年/役割のメタ・ティールの CTA が表示されます。文言と写真を差し替えて、ポートフォリオやスタジオの実績紹介にそのまま置けます。 https://design-layer.com/catalog-previews/moonsworth-companies-grid.jpg ムーンズワース・カンパニーグリッド 白地に2×2の大型カードを1画面に収めるサイトグリッドです。各カードは背面にシャープなサイトプレビューを置き、ホバーで写真が縮みぼかしが入り四隅に丸ドットが現れると同時に、サイト名・業種/年/役割のメタ・ティールの CTA が表示されます。文言と写真を差し替えて、ポートフォリオやスタジオの実績紹介にそのまま置けます。 https://design-layer.com/catalog-previews/moonsworth-companies-grid.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/moonsworth-companies-grid https://design-layer.com/catalog-previews/moonsworth-companies-grid.jpg Moonsworth Companies Grid A white one-viewport sites grid with a 2×2 card layout. Each card shows a sharp website preview at rest; on hover the photo shrinks and blurs, corner dots appear, and the title, project meta (industry / year / role), and teal CTA fade in. Swap the copy and images, then drop it into a portfolio or studio works section. https://design-layer.com/catalog-previews/moonsworth-companies-grid.jpg Moonsworth Companies Grid A white one-viewport sites grid with a 2×2 card layout. Each card shows a sharp website preview at rest; on hover the photo shrinks and blurs, corner dots appear, and the title, project meta (industry / year / role), and teal CTA fade in. Swap the copy and images, then drop it into a portfolio or studio works section. https://design-layer.com/catalog-previews/moonsworth-companies-grid.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/music-video-pin-stack https://design-layer.com/catalog-previews/music-video-pin-stack.jpg ミュージックビデオ・ピンスタック 白い画面を sticky ピン留めし、中央のミュージックビデオ・サムネイルが下から積み上がるスクロールセクションです。左右に曲名・レーベル／リリース日が切り替わり、右端のドットが進捗を示します。見出し・曲情報・写真を差し替えて、アーティストやレーベルの LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/music-video-pin-stack.jpg ミュージックビデオ・ピンスタック 白い画面を sticky ピン留めし、中央のミュージックビデオ・サムネイルが下から積み上がるスクロールセクションです。左右に曲名・レーベル／リリース日が切り替わり、右端のドットが進捗を示します。見出し・曲情報・写真を差し替えて、アーティストやレーベルの LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/music-video-pin-stack.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/music-video-pin-stack https://design-layer.com/catalog-previews/music-video-pin-stack.jpg Music Video Pin Stack A sticky pin-stack music video section on a white field. Thumbnails rise from the bottom and layer in the center while the track title and label/release meta flicker on the sides, with progress dots on the right. Swap the heading, track info, and stills, then drop it into an artist or label landing page. https://design-layer.com/catalog-previews/music-video-pin-stack.jpg Music Video Pin Stack A sticky pin-stack music video section on a white field. Thumbnails rise from the bottom and layer in the center while the track title and label/release meta flicker on the sides, with progress dots on the right. Swap the heading, track info, and stills, then drop it into an artist or label landing page. https://design-layer.com/catalog-previews/music-video-pin-stack.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/pastel-pill-navbar https://design-layer.com/catalog-previews/pastel-pill-navbar.jpg パステル pill ナビ 淡いピンクの背景に浮かぶ白い pill 型ナビです。左にアプリグリッド、中央にアクティブ pill 付きメニュー、右にアバター・メール・通知・＋・メニューを並べます。ラベル・アバター・アクセント色を差し替えて、クリエイティブやプロフィール系サイトの先頭にそのまま置けます。 https://design-layer.com/en/components/pastel-pill-navbar https://design-layer.com/catalog-previews/pastel-pill-navbar.jpg Pastel Pill Navbar A soft white floating pill nav on a blush background. Apps grid on the left, active-pill menu in the center, avatar plus mail, notifications, add, and menu on the right. Swap labels, avatar, and accent colors, then drop it onto a creative or profile site. https://design-layer.com/ja/components/knockout-wordmark-opener https://design-layer.com/catalog-previews/knockout-wordmark-opener.jpg ノックアウト・クラウドオープナー サイトを開いた瞬間、塗りつぶした雲ロゴの窓が中のページを切り抜いて見せ、バブルで全画面になるオープニングです。先頭のヒーローや1ページを children に入れて使います。ロゴだけ差し替えて、ブランドサイトの読み込み演出にそのまま置けます。 https://design-layer.com/catalog-previews/knockout-wordmark-opener.jpg ノックアウト・クラウドオープナー サイトを開いた瞬間、塗りつぶした雲ロゴの窓が中のページを切り抜いて見せ、バブルで全画面になるオープニングです。先頭のヒーローや1ページを children に入れて使います。ロゴだけ差し替えて、ブランドサイトの読み込み演出にそのまま置けます。 https://design-layer.com/catalog-previews/knockout-wordmark-opener.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/knockout-wordmark-opener https://design-layer.com/catalog-previews/knockout-wordmark-opener.jpg Knockout Cloud Opener A site-open mask: a filled cloud window reveals the page inside, then a bubble mask expands to full screen. Wrap your existing hero or page as children. Swap the logo mark, then drop it at the top of a brand site. https://design-layer.com/catalog-previews/knockout-wordmark-opener.jpg Knockout Cloud Opener A site-open mask: a filled cloud window reveals the page inside, then a bubble mask expands to full screen. Wrap your existing hero or page as children. Swap the logo mark, then drop it at the top of a brand site. https://design-layer.com/catalog-previews/knockout-wordmark-opener.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/story-mode-expand https://design-layer.com/catalog-previews/story-mode-expand.jpg ワークス・エキスパンダ 白地に錆色の巨大見出しと、左の3分割画像ストリップ、右の番号付きリストを置く作品セクションです。ホバーで画像が横に広がり、MORE+ で詳細が下に開きます。他の項目の説明文は隠れ、タイトルと番号は残ります。見出し・案件名と写真を差し替えて、建築やデザイン事務所の LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/story-mode-expand.jpg ワークス・エキスパンダ 白地に錆色の巨大見出しと、左の3分割画像ストリップ、右の番号付きリストを置く作品セクションです。ホバーで画像が横に広がり、MORE+ で詳細が下に開きます。他の項目の説明文は隠れ、タイトルと番号は残ります。見出し・案件名と写真を差し替えて、建築やデザイン事務所の LP 中盤にそのまま置けます。 https://design-layer.com/catalog-previews/story-mode-expand.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/story-mode-expand https://design-layer.com/catalog-previews/story-mode-expand.jpg Works Expand A numbered works section on white: an oversized rust heading, a three-pane image strip on the left, and a project list on the right. Hover widens the active still. MORE+ expands details below while the other items keep their titles and hide only the short descriptions. Swap the heading, project copy, and photos, then drop it into an architecture or studio landing page. https://design-layer.com/catalog-previews/story-mode-expand.jpg Works Expand A numbered works section on white: an oversized rust heading, a three-pane image strip on the left, and a project list on the right. Hover widens the active still. MORE+ expands details below while the other items keep their titles and hide only the short descriptions. Swap the heading, project copy, and photos, then drop it into an architecture or studio landing page. https://design-layer.com/catalog-previews/story-mode-expand.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/product-wordmark-hero https://design-layer.com/catalog-previews/product-wordmark-hero.jpg プロダクト・ワードマークヒーロー 薄紫のグラデーションに、左へ積み上げた白い製品名を置き、その下にサムネイル付きの仕様カード、右に製品写真を置くプロダクト Hero です。製品の背後には縦書きの淡い文字があります。製品名・仕様の文言と写真を差し替えて、ガジェットやブランド系 LP の先頭にそのまま置けます。 https://design-layer.com/en/components/product-wordmark-hero https://design-layer.com/catalog-previews/product-wordmark-hero.jpg Product Wordmark Hero A product hero on a lilac gradient: a stacked white title on the left, spec cards with thumbnails under the title, and a packshot on the right. A pale vertical word sits behind the product. Swap the title lines, spec copy, and photos, then drop it onto a gadget or brand landing page. https://design-layer.com/ja/components/sneaker-bold-hero https://design-layer.com/catalog-previews/sneaker-bold-hero.jpg スニーカー・ボールドヒーロー 白地の中央にスニーカーを置き、左に商品名とサムネ、右にサイズ丸・レビュー・価格・カラーを並べるシューズ Hero です。ホイールで次のカラーウェイへ切り替わります。コピーと写真を差し替えて、スニーカーやファッション系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/sneaker-bold-hero.jpg スニーカー・ボールドヒーロー 白地の中央にスニーカーを置き、左に商品名とサムネ、右にサイズ丸・レビュー・価格・カラーを並べるシューズ Hero です。ホイールで次のカラーウェイへ切り替わります。コピーと写真を差し替えて、スニーカーやファッション系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/sneaker-bold-hero.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/sneaker-bold-hero https://design-layer.com/catalog-previews/sneaker-bold-hero.jpg Sneaker Bold Hero A white product hero: centered packshot, title and thumbs on the left, size circles, reviews, price, and color dots on the right. Scroll or swipe to step through colorways. Swap the copy and photos, then drop it onto a footwear landing page. https://design-layer.com/catalog-previews/sneaker-bold-hero.jpg Sneaker Bold Hero A white product hero: centered packshot, title and thumbs on the left, size circles, reviews, price, and color dots on the right. Scroll or swipe to step through colorways. Swap the copy and photos, then drop it onto a footwear landing page. https://design-layer.com/catalog-previews/sneaker-bold-hero.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/sneaker-focus-carousel https://design-layer.com/catalog-previews/sneaker-focus-carousel.jpg スニーカー・フォーカスカルーセル 白地のファッション Hero です。上にサークルロゴとナビ、左にカテゴリ、中央に3足の円軌道カルーセルを置き、下に巨大ブランド名とキャプション、SEE MORE を置きます。中央の足はシャープ、左右はぼかします。ブランド名・ナビ・写真を差し替えて、スニーカーやファッション系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/sneaker-focus-carousel.jpg スニーカー・フォーカスカルーセル 白地のファッション Hero です。上にサークルロゴとナビ、左にカテゴリ、中央に3足の円軌道カルーセルを置き、下に巨大ブランド名とキャプション、SEE MORE を置きます。中央の足はシャープ、左右はぼかします。ブランド名・ナビ・写真を差し替えて、スニーカーやファッション系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/sneaker-focus-carousel.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/sneaker-focus-carousel https://design-layer.com/catalog-previews/sneaker-focus-carousel.jpg Sneaker Focus Carousel A white fashion hero: circle mark and nav on top, category rail on the left, three sneakers on a circular carousel, then an oversized brand wordmark, caption, and See more pill. The focused pair stays sharp; the sides blur. Swap the brand, nav, and photos, then drop it onto a footwear landing page. https://design-layer.com/catalog-previews/sneaker-focus-carousel.jpg Sneaker Focus Carousel A white fashion hero: circle mark and nav on top, category rail on the left, three sneakers on a circular carousel, then an oversized brand wordmark, caption, and See more pill. The focused pair stays sharp; the sides blur. Swap the brand, nav, and photos, then drop it onto a footwear landing page. https://design-layer.com/catalog-previews/sneaker-focus-carousel.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/pricing-roi-calculator https://design-layer.com/catalog-previews/pricing-roi-calculator.jpg 料金ROI計算機 白地に見出しと2カラムのカードを置く料金ROI計算機です。左で開発時間と時給をスライダー入力し、右に内製コストと月額プランの差額・時給換算を出します。コピーと比較月額を差し替えて、SaaS やプロダクト LP の料金ページにそのまま置けます。 https://design-layer.com/en/components/pricing-roi-calculator https://design-layer.com/catalog-previews/pricing-roi-calculator.jpg Pricing ROI Calculator A light ROI calculator: heading plus a two-column card. Sliders on the left estimate in-house hours and rate; the right column shows the gap versus a monthly plan and the labor-time equivalent. Swap the copy and comparison amount, then drop it onto a SaaS pricing page. https://design-layer.com/ja/components/japan-travel-hero https://design-layer.com/catalog-previews/japan-travel-hero.jpg ジャパン・トラベルヒーロー 開いた直後は夜のコンビニだけが見えます。スクロールすると切り抜いた富士が現れ、さらに進むと巨大ワードマークが山の後ろから出てきます。見出し・ナビと富士／コンビニ写真を差し替えて、旅行や観光系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/japan-travel-hero.jpg ジャパン・トラベルヒーロー 開いた直後は夜のコンビニだけが見えます。スクロールすると切り抜いた富士が現れ、さらに進むと巨大ワードマークが山の後ろから出てきます。見出し・ナビと富士／コンビニ写真を差し替えて、旅行や観光系 LP の先頭にそのまま置けます。 https://design-layer.com/catalog-previews/japan-travel-hero.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/japan-travel-hero https://design-layer.com/catalog-previews/japan-travel-hero.jpg Japan Travel Hero A full-screen travel hero that starts on a night convenience store. Scroll to reveal a cut-out Mount Fuji, then the oversized wordmark rises from behind the mountain. Swap the copy and the two stills, then drop it onto a travel landing page. https://design-layer.com/catalog-previews/japan-travel-hero.jpg Japan Travel Hero A full-screen travel hero that starts on a night convenience store. Scroll to reveal a cut-out Mount Fuji, then the oversized wordmark rises from behind the mountain. Swap the copy and the two stills, then drop it onto a travel landing page. https://design-layer.com/catalog-previews/japan-travel-hero.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/statue-404 https://design-layer.com/catalog-previews/statue-404.jpg スタチュー 404 ざらついた紙地に巨大な 404 を置き、中央に石像の切り抜きを重ねるエラー画面です。文言・像の画像・アクセント色を差し替えて、サイトの not-found にそのまま置けます。 https://design-layer.com/en/components/statue-404 https://design-layer.com/catalog-previews/statue-404.jpg Statue 404 An editorial 404 on textured paper: a giant wordmark with a marble statue cut-out in the center. Swap the copy, statue still, and accent color, then drop it into not-found. https://design-layer.com/ja/components/space-explore-section https://design-layer.com/catalog-previews/space-explore-section.jpg スペース・エクスプロア 白地の一画面に、黒いフォンカードを4枚並べるセクションです。SPACE / MARS / EARTH / MERCURY の縦積みワードマークと、惑星または宇宙飛行士が入ります。見出し・本文と写真を差し替えて、宇宙やトラベル、エンタメ系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/space-explore-section.jpg スペース・エクスプロア 白地の一画面に、黒いフォンカードを4枚並べるセクションです。SPACE / MARS / EARTH / MERCURY の縦積みワードマークと、惑星または宇宙飛行士が入ります。見出し・本文と写真を差し替えて、宇宙やトラベル、エンタメ系 LP の中盤にそのまま置けます。 https://design-layer.com/catalog-previews/space-explore-section.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/space-explore-section https://design-layer.com/catalog-previews/space-explore-section.jpg Space Explore A white one-screen gallery of four black phone cards — SPACE, MARS, EARTH, MERCURY. Each card keeps the oversized stacked wordmark and planet or astronaut. Swap the titles, copy, and stills, then drop it into a space, travel, or entertainment landing page. https://design-layer.com/catalog-previews/space-explore-section.jpg Space Explore A white one-screen gallery of four black phone cards — SPACE, MARS, EARTH, MERCURY. Each card keeps the oversized stacked wordmark and planet or astronaut. Swap the titles, copy, and stills, then drop it into a space, travel, or entertainment landing page. https://design-layer.com/catalog-previews/space-explore-section.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/garden-prompt-hero https://design-layer.com/catalog-previews/garden-prompt-hero.jpg ガーデン・プロンプトヒーロー 草原の丘と青空を全面に敷いた1画面 Hero です。上部にロゴとナビ、中央に見出しとプロンプト入力欄が並びます。文言と背景写真を差し替えて、ビジネス向け AI の LP 先頭にそのまま置けます。 https://design-layer.com/en/components/garden-prompt-hero https://design-layer.com/catalog-previews/garden-prompt-hero.jpg Garden Prompt Hero A one-screen business AI hero over grassy hills and blue sky: brand and nav on top, headline and a prompt field in the center. Swap the copy and background photo, then drop it onto an enterprise AI landing page. https://design-layer.com/ja/components/floating-poster-orbit https://design-layer.com/catalog-previews/floating-poster-orbit.jpg フローティングポスター・オービット 暖色のグローを背景に、角丸ポスターを3段の横並びで流す1画面 Hero です。上段と下段は左へ、中段は右へループします。写真を差し替えて、映像・エンタメ・プロダクト LP の先頭にそのまま置けます。 https://design-layer.com/en/components/floating-poster-orbit https://design-layer.com/catalog-previews/floating-poster-orbit.jpg Floating Poster Orbit A one-screen cinematic field of rounded posters in three horizontal rows over a warm projector glow. The top and bottom rows drift left, the middle row drifts right. Swap the photos, then drop it onto a film, entertainment, or product landing page. https://design-layer.com/ja/components/magnetic-cta-button https://design-layer.com/catalog-previews/magnetic-cta-button.jpg マグネティック CTA ボタン 白いガラスの pill 型 CTA です。右に矢印の丸バッジがあり、その縁を虹色が回ります。ラベルとリンクを差し替えて、ヒーローや料金プランの CTA にそのまま置けます。 https://design-layer.com/en/components/magnetic-cta-button https://design-layer.com/catalog-previews/magnetic-cta-button.jpg Magnetic CTA Button A white glass pill CTA. An arrow sits in a round badge on the right, with a rainbow edge orbiting the badge. Swap the label and href, then drop it onto a hero or pricing block. https://design-layer.com/ja/components/glass-sidebar-nav https://design-layer.com/catalog-previews/glass-sidebar-nav.jpg ガラスサイドバーナビ 暗い抽象彫刻の壁紙を1画面いっぱいに敷き、その上にガラスの縦型サイドバーを置くナビです。macOS 風の赤黄緑ドット、中央のブランド、MENU とセカンダリ項目、下部のアカウント行を frosted panel にまとめます。背景写真・ブランド名・メニュー文言・アバターとアクセント色を差し替えて、ダッシュボードやソーシャル系 UI にそのまま置けます。 https://design-layer.com/en/components/glass-sidebar-nav https://design-layer.com/catalog-previews/glass-sidebar-nav.jpg Glass Sidebar Nav A full-viewport dark abstract sculpture wallpaper with a tall frosted-glass sidebar on top: macOS traffic-light dots, a centered brand wordmark, MENU and secondary rows, and an account footer. Swap the background, brand, menu labels, avatar, and accent color, then drop it into a dashboard or social-style UI. https://design-layer.com/ja/components/liquid-glass-login https://design-layer.com/catalog-previews/liquid-glass-login.jpg リキッドガラス・ログイン 自然風景を1画面いっぱいに敷き、中央にリキッドガラスのログインカードを置く認証画面です。ユーザー名とパスワード、Remember me、緑の Login、その下に Google / Apple ログインを並べます。見出し・プレースホルダー・ボタン文言と背景写真を差し替えて、アプリや SaaS のログインにそのまま置けます。 https://design-layer.com/en/components/liquid-glass-login https://design-layer.com/catalog-previews/liquid-glass-login.jpg Liquid Glass Login A full-viewport nature login: a liquid-glass card over a landscape photo with username, password, Remember me, a green Login button, then Google and Apple sign-in. Swap the copy and background photo, then drop it onto an app or SaaS login screen. https://design-layer.com/ja/components/center-plus-tab-bar https://design-layer.com/catalog-previews/center-plus-tab-bar.jpg センタープラス・タブバー 淡いグレーのキャンバスに浮かぶ白い pill 型タブバーです。ホーム・検索・メッセージ・通知・プロフィールを並べ、選択中の位置でバーを半円にえぐる円がスライドします。ラベル・アクセント色・リンクを差し替えて、アプリやモバイル向けサイトの下端ナビにそのまま置けます。 https://design-layer.com/en/components/center-plus-tab-bar https://design-layer.com/catalog-previews/center-plus-tab-bar.jpg Center Plus Tab Bar A floating white pill tab bar on a light gray canvas. Home, search, messages, notifications, and profile sit in a row; a circle slides to the active tab and bites a semicircle out of the bar. Swap labels, accent color, and links, then drop it onto an app or mobile-style site. https://design-layer.com/ja/components/night-messenger-chat https://design-layer.com/catalog-previews/night-messenger-chat.jpg ナイトメッセンジャー 夜の山並み壁紙の上に、角丸のデスクトップ・チャットウィンドウを置くメッセンジャー画面です。左レール、検索、ストーリー、スター付きスレッド、吹き出し、入力バーを1画面にまとめます。連絡先名・プレビュー文・吹き出しとアクセント色を差し替えて、ソーシャルや SaaS のチャット UI にそのまま置けます。 https://design-layer.com/en/components/night-messenger-chat https://design-layer.com/catalog-previews/night-messenger-chat.jpg Night Messenger Chat A desktop messenger window over a night mountain wallpaper: icon rail, search, stories, starred threads, chat bubbles, and a composer. Swap names, previews, bubble copy, and accent color, then drop it into a social or SaaS chat UI. https://design-layer.com/ja/components/album-calendar https://design-layer.com/catalog-previews/album-calendar.jpg マンスリーカレンダー 草原と積乱雲の写真を全面に敷き、中央にリキッドガラスのマンスリーカレンダーを置くフルスクリーンセクションです。月名と前後送り、曜日行、日付グリッドが揃っています。背景写真を差し替えて、プロダクトやブランドの LP 中盤にそのまま置けます。 https://design-layer.com/en/components/album-calendar https://design-layer.com/catalog-previews/album-calendar.jpg Monthly Calendar A full-screen monthly calendar over a grassy hill and towering cloud. A liquid-glass card holds the month label, weekday row, and date grid. Swap the background photo, then drop it into a product or brand landing page. https://design-layer.com/ja/components/kinetic-service-pricing https://design-layer.com/catalog-previews/kinetic-service-pricing.jpg キネティック・サービス料金 黒地に巨大な「Pricing」の文字を敷き、その上にすりガラスのプランカードを3枚重ねる料金セクションです。中央の売りたいプランは一回り大きく明るく持ち上げ、縁を光が一周し、白い購入ボタンがカーソルに吸い寄せられます。見出しは一文字ずつせり上がり、カードは下から重なるように現れ、価格は桁ごとにロールし、Billed Yearly の切り替えで年払い価格へ回ります。プラン名・価格・機能リスト・ボタン文言・アクセント色を差し替えて、SaaS やアプリの料金ページにそのまま置けます。 https://design-layer.com/en/components/kinetic-service-pricing https://design-layer.com/catalog-previews/kinetic-service-pricing.jpg Kinetic Service Pricing A black pricing section with a giant “Pricing” wordmark behind three frosted-glass plan cards. The featured center plan is larger, brighter, and lifted, with light orbiting its edge and a magnetic white CTA. The wordmark rises letter by letter, cards sweep up over it, prices roll digit by digit, and the Billed Yearly switch rolls them to yearly rates. Swap plan names, prices, features, button copy, and accent color, then drop it onto a SaaS or app pricing page. https://design-layer.com/ja/components/insight-fan-cards https://design-layer.com/catalog-previews/insight-fan-cards.jpg インサイト・ファンカード 明るいグレー地の中央に、小さなバッジ・大見出し・イタリックの強調語を置き、その下に写真カード5枚を扇状に重ねるヒーローです。中央のカードが一番手前で大きく、外側ほど小さく少し下がり、外側の縁が奥へ倒れます。カードはボタンのあたりから、ぼかしが抜けながらせり上がって扇状に広がります。カーソルを動かすと扇がゆっくり流れ、乗せたカードは少し浮き上がり、カーソルの方へ傾いて光が追いかけます。ボタンはカーソルに吸い寄せられます。最下部には白い丸矢印付きの、墨色からグレーへのグラデーション pill ボタンを置きます。見出し・カードのタイトルと説明・写真・ボタン文言・ボタンのグラデーションを差し替えて、SaaS やサービス LP のファーストビューにそのまま置けます。 https://design-layer.com/en/components/insight-fan-cards https://design-layer.com/catalog-previews/insight-fan-cards.jpg Insight Fan Cards A light hero with a small badge, a bold headline with an italic serif accent word, and five photo cards fanned out in 3D below. The center card sits in front and largest while the outer cards shrink, drop slightly, and tilt their outer edges away; on entry the cards rise blurred from the button and settle into the fan. The fan drifts with the cursor, the hovered card lifts, tilts toward the pointer with a moving glare, and the CTA pulls magnetically. A charcoal-to-stone gradient pill CTA with a white arrow circle closes the section. Swap the headline, card titles, descriptions, photos, button copy, and button gradient, then drop it into a SaaS or service landing page hero. https://design-layer.com/ja/components/scroll-accordion-showcase https://design-layer.com/catalog-previews/scroll-accordion-showcase.jpg スクロール・機能ショーケース 明るいグレー地の左に「Insights」「Pricing」のような大きな見出しを縦に並べ、右にコンポーネント画面の背景パネルを置くショーケースです。選んでいる見出しだけ黒の太字になり、少し右へずれます。スクロールすると次の見出しに切り替わり、見出しをクリックするとその項目まで移動します。切り替えのたびに次のパネルが下端から上へ、ぬるっと見えていきます。見出しと背景画像を差し替えて、機能紹介にそのまま置けます。 https://design-layer.com/en/components/scroll-accordion-showcase https://design-layer.com/catalog-previews/scroll-accordion-showcase.jpg Scroll Feature Showcase A light showcase with large stacked headings such as “Insights” and “Pricing” on the left and a component screen on the right. The active heading turns bold black and nudges right. Scrolling steps to the next heading and clicking a heading scrolls to it; each switch reveals the next panel from its bottom edge upward. Swap the headings and background images, then drop it into a feature section. https://design-layer.com/ja/components/milestone-bento-card https://design-layer.com/catalog-previews/milestone-bento-card.jpg 物件ベントーカード 明るいグレー地の中央に縦長 3:4 の写真カードを1枚置き、左右に別の架空物件を見切れさせて並べる物件紹介カードです。写真の下半分はぼかして沈め、その上に太字の宿名と、その下の少し小さい価格、住所、紹介文、星評価つきのレビュー数と部屋数を縦線で区切って並べます。カードはぼかしから浮き上がり、文字は順にせり上がります。カーソルを乗せるとカードが傾いて光が追いかけ、写真が少しずれます。価格・物件名・住所・紹介文・数値・写真を差し替えて、不動産や宿泊サイトの物件一覧・おすすめ枠にそのまま置けます。 https://design-layer.com/en/components/milestone-bento-card https://design-layer.com/catalog-previews/milestone-bento-card.jpg Listing Bento Card A light listing card: one tall 3:4 photo card at the center, with two different fictional listings peeking in from the left and right. The lower half of the photo is blurred and darkened under a bold lodging name with a smaller price beneath it, the address, a short intro, and a star rating with the review count beside the room count, split by a thin divider. The card rises out of a blur, the text steps in, and on hover the card tilts toward the cursor with a moving glare and a shifting photo. Swap the price, name, address, intro, stats, and photo for real-estate or stay listings. https://design-layer.com/ja/components/numbered-faq-panel https://design-layer.com/catalog-previews/numbered-faq-panel.jpg ナンバー付きFAQパネル 風景の上に、背景が透けるリキッドグラスの大きな角丸カードを置く FAQ セクションです。中央に大見出しを置き、その下に番号つきの質問を縦に並べます。閉じた行は半透明の角丸に黒丸の＋、開いた行は白地に虹色の細い縁と淡い光がにじみ、＋が回って白丸の×に変わります。回答は高さがなめらかに伸びて現れ、最下部には問い合わせへの導線を置きます。見出し・質問と回答・問い合わせの文言とリンク先を差し替えて、SaaS やサービス LP の FAQ にそのまま置けます。 https://design-layer.com/en/components/numbered-faq-panel https://design-layer.com/catalog-previews/numbered-faq-panel.jpg Numbered FAQ Panel A FAQ section: a large rounded liquid-glass card floating over a landscape, with the scenery showing through. A big headline sits above a stack of numbered questions. Closed rows are translucent pills with a black plus button; the open row turns white with a thin iridescent edge and a soft glow, and the plus rotates into a white ×. Answers expand smoothly, and a contact link closes the card. Swap the headline, questions, answers, and contact copy and link, then drop it into a SaaS or service landing page. https://design-layer.com/ja/components/file-upload-panel https://design-layer.com/catalog-previews/file-upload-panel.jpg ファイルアップロード 緑の丘陵と積雲の写真を背景に、空のフォルダを置くカードです。中央に封筒と石の静物イラストを置き、その下に見出しと説明、Start over と Add a file を置きます。ファイルを入れると Mac 風フォルダと Uploading Files に替わり、完了後は同じカードに Upload complete とファイル名を残します。見出し・説明・ボタン文言とイラストを差し替えて、ダッシュボードにそのまま置けます。 https://design-layer.com/en/components/file-upload-panel https://design-layer.com/catalog-previews/file-upload-panel.jpg File Upload An empty folder card on a green-hills photograph: a still life of an envelope, a loose sheet, and a stone, then a title, description, and Start over plus Add a file. Adding a file swaps in a Mac-style folder and Uploading Files; when it finishes, the same card shows Upload complete and the file name. Swap the copy and illustration, then drop it into a dashboard. https://design-layer.com/ja/components/spotlight-reviews https://design-layer.com/catalog-previews/spotlight-reviews.jpg スポットライトレビュー オリーブ地の中央に薄いパネルを置き、見出しの下へ口コミを3枚横並びにするセクションです。カード自体はぼかさず、左右で見切れた端だけを溶かして隠します。カードは止まらず右から左へ流れます。見出しとレビューを差し替えて、SaaS の LP 中盤にそのまま置けます。 https://design-layer.com/en/components/spotlight-reviews https://design-layer.com/catalog-previews/spotlight-reviews.jpg Spotlight Reviews An olive page with a pale panel: a centered heading and three review cards in a row. The cards stay sharp, and only the clipped left and right edges fade out, while the row scrolls continuously. Swap the heading and reviews, then drop it into a SaaS landing page. https://design-layer.com/ja/components/ink-reveal-cta https://design-layer.com/catalog-previews/ink-reveal-cta.jpg インクリビール CTA 図面シートの余白に破線を置き、中央に見出しと一文を並べる CTA です。下段中央の画像は、スクロールに合わせて線画からカラーへインクの縁で滲みます。見出し・一文・線画とカラー写真を差し替えて、建築やプロダクト LP の終盤にそのまま置けます。 https://design-layer.com/en/components/ink-reveal-cta https://design-layer.com/catalog-previews/ink-reveal-cta.jpg Ink Reveal CTA A drawing-sheet CTA: dashed rules frame a centered headline and one sentence. The image in the center column bleeds from a line drawing into full color with an ink edge as you scroll. Swap the copy, sketch, and color photo, then drop it near the end of an architecture or product landing page. https://design-layer.com/ja/components/partner-cylinder-reel https://design-layer.com/catalog-previews/partner-cylinder-reel.jpg パートナー・シリンダー 白地の1画面に社名を円筒で並べ、スクロールに合わせて手前の名前だけが濃く残るセクションです。左右の端の横線は、スクロールに合わせて太さの山が上下へ流れます。社名の配列を差し替えて、実績やパートナー紹介の中盤にそのまま置けます。 https://design-layer.com/en/components/partner-cylinder-reel https://design-layer.com/catalog-previews/partner-cylinder-reel.jpg Partner Cylinder Reel A white one-screen reel of partner names set on a cylinder. Scroll to bring the next name to the front while the others stay faint. Horizontal lines at the left and right edges grow and travel with the scroll. Swap the names, then drop it into the middle of a credentials or partners section. https://design-layer.com/ja/components/destination-coverflow-hero https://design-layer.com/catalog-previews/destination-coverflow-hero.jpg デスティネーション・カバーフロー 暗い霧の背景に、曲面の横長タイルを円筒の外周へ一周並べて流し続ける旅行 Hero です。両端のタイルは奥へ回り込み、背面を通って次の写真に替わります。背景のぼかしも中央の写真に合わせて切り替わります。写真を差し替えて、旅行やアウトドア LP の先頭にそのまま置けます。 https://design-layer.com/en/components/destination-coverflow-hero https://design-layer.com/catalog-previews/destination-coverflow-hero.jpg Destination Coverflow Hero A dark, misty travel hero with curved landscape tiles wrapped around the outside of a drum that keeps streaming right to left. The ends curve away into the distance and swap to the next photo round the back. The blurred backdrop follows the photo at the center. Swap the photos, then drop it at the top of a travel or outdoor landing page. https://design-layer.com/ja/components/plan-pill-switch https://design-layer.com/catalog-previews/plan-pill-switch.jpg プランピルスイッチ 白地の pill の中で、選んだプランが黒いカプセルへ滑るスイッチです。左は Free、右は Premium と Monthly · Annual。ラベルを差し替えて、料金の先頭にそのまま置けます。 https://design-layer.com/en/components/plan-pill-switch https://design-layer.com/catalog-previews/plan-pill-switch.jpg Plan Pill Switch A white pill switch. The selected plan slides into a black capsule: Free on the left, Premium with Monthly · Annual on the right. Swap the labels, then drop it at the top of a pricing block. https://design-layer.com/ja/components/support-split-contact https://design-layer.com/catalog-previews/support-split-contact.jpg サポート分割コンタクト 白地の左に太字の見出しと説明、その下に名前・メール・種別・本文のフォームを置き、右に角丸のループ動画を並べるお問い合わせです。種別は下から開くメニューで、選んだ項目にチェックが付きます。送信ボタンの直下にメールアドレスを置きます。見出し・項目・動画を差し替えて、サポートや問い合わせのページにそのまま置けます。送信はデモで、メッセージは保存されません。 https://design-layer.com/en/components/support-split-contact https://design-layer.com/catalog-previews/support-split-contact.jpg Support Split Contact A white contact split: a bold headline and short note on the left, then name, email, topic, and message fields. A rounded looping video sits on the right. The topic menu opens downward with a check on the selected row, and the inbox address sits directly under the send button. Swap the copy and video, then drop it onto a support page. Submit is a demo and does not store the message. https://design-layer.com/ja/components/liquid-glass-signup-steps https://design-layer.com/catalog-previews/liquid-glass-signup-steps.jpg リキッドガラス・サインアップ 森の写真の上に、リキッドガラスのカードを3ステップで置くサインアップです。ステップが横に滑り、パスワードの強さバーと、受信箱を確認する完了画面があります。リキッドガラス・ログインと対になる画面です。文言と背景写真を差し替えて、アプリや SaaS の登録にそのまま置けます。送信はデモで、内容は保存されません。 https://design-layer.com/en/components/liquid-glass-signup-steps https://design-layer.com/catalog-previews/liquid-glass-signup-steps.jpg Liquid Glass Signup Steps A three-step liquid glass signup with sliding steps, a password strength bar and a done screen. Pairs with Liquid Glass Login. Swap the copy and background photo, then drop it onto an app or SaaS signup. Submit is a demo and nothing is stored. https://design-layer.com/ja/components/spring-command-palette https://design-layer.com/catalog-previews/spring-command-palette.jpg スプリング・コマンドパレット ⌘K（Windows は Ctrl+K）で開く検索とコマンドのダイアログです。上に入力欄、その下に Pages、Actions、Recent が並び、文字を打つと絞り込みます。項目は配列で渡します。SaaS のダッシュボード、開発ツール、管理画面に置けます。ダークとライトがあり、キーボードと Open palette ボタンの両方で開けます。 https://design-layer.com/catalog-previews/spring-command-palette.jpg スプリング・コマンドパレット ⌘K（Windows は Ctrl+K）で開く検索とコマンドのダイアログです。上に入力欄、その下に Pages、Actions、Recent が並び、文字を打つと絞り込みます。項目は配列で渡します。SaaS のダッシュボード、開発ツール、管理画面に置けます。ダークとライトがあり、キーボードと Open palette ボタンの両方で開けます。 https://design-layer.com/catalog-previews/spring-command-palette.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/en/components/spring-command-palette https://design-layer.com/catalog-previews/spring-command-palette.jpg Spring Command Palette A command palette React UI: a ⌘K search modal React teams can paste in like a react cmdk component. Pages, Actions, and Recent come from a props array and filter as you type. Drop it onto SaaS dashboards, dev tools, and admin panels. Dark and light, with spring motion and full keyboard support. https://design-layer.com/catalog-previews/spring-command-palette.jpg Spring Command Palette A command palette React UI: a ⌘K search modal React teams can paste in like a react cmdk component. Pages, Actions, and Recent come from a props array and filter as you type. Drop it onto SaaS dashboards, dev tools, and admin panels. Dark and light, with spring motion and full keyboard support. https://design-layer.com/catalog-previews/spring-command-palette.mp4 2026-09-17T00:00:00+00:00 yes no https://design-layer.com/ja/components/spring-toast-stack https://design-layer.com/catalog-previews/spring-toast-stack.jpg スプリング・トーストスタック 操作の結果を、右下にリキッドガラスの通知で返すトーストです。色のついた丸アイコン、見出し、短い本文が並び、新しい通知はスプリングで入ります。横にスワイプすると閉じます。成功、エラー、読み込みがあり、読み込み中のカードは同じカードのまま成功に変わります。背景は白です。 https://design-layer.com/en/components/spring-toast-stack https://design-layer.com/catalog-previews/spring-toast-stack.jpg Spring Toast Stack A toast stack for app feedback. Each result appears as a liquid-glass pill at the bottom-right, with a colored icon, a title, and a short line, and new toasts spring in. Swipe a card sideways to dismiss it. Success, error, and loading are included, and a loading toast can turn into success in the same card. The background is white. https://design-layer.com/ja/components/feature-tabs-showcase https://design-layer.com/catalog-previews/feature-tabs-showcase.jpg AI機能カード 中央の見出しの下に、AIプロダクト向けの3枚の機能カードを並べるセクションです。エージェントの実行、流れる返答、ブランドロゴのモデル経路は、セクションが画面内にあるときだけ動きます。眉見出し・見出し・説明を差し替えて、AI製品のLP中盤にそのまま置けます。 https://design-layer.com/en/components/feature-tabs-showcase https://design-layer.com/catalog-previews/feature-tabs-showcase.jpg AI Feature Cards Three dense feature cards for an AI product, under a centered header: an agent run, a streaming answer, and model routing with brand logos. They move only while the section is on screen. Swap the eyebrow, title, subtitle, and the three captions, then drop it into an AI product landing page. https://design-layer.com/ja/components/wordmark-panel-footer https://design-layer.com/catalog-previews/wordmark-panel-footer.jpg ワードマーク・パネルフッター 白地に、等間隔の小さな点で描いた大きなワードマークを敷き、その下端を1枚の黒いパネルで隠すフッターです。左にロゴ、短い説明、メール登録、右に見出し付き3列のナビを置きます。右下に小さいSNSアイコンとコピーライトが並びます。文字の上をマウスが通ると、点だけが球面状に膨らみます。リンク、SNS、文言、登録の処理は props で渡します。スマホでは左右が縦に並びます。登録はコールバックで受け取り、送信先は持ちません。 https://design-layer.com/en/components/wordmark-panel-footer https://design-layer.com/catalog-previews/wordmark-panel-footer.jpg Wordmark Panel Footer A footer on white with a huge wordmark made of evenly spaced dots, its lower edge tucked behind one black panel. The left side holds the logo, a short description, and an email signup. The right side holds three headed link columns, with small social icons beside the copyright. Moving the pointer over the letters bulges only the dots, like a sphere. Links, socials, copy, and the subscribe handler are typed props. The two sides stack on mobile. Signup goes through your own callback; no backend is included. https://design-layer.com/ja/components/whats-new-card https://design-layer.com/catalog-previews/whats-new-card.jpg 新着アップデートカード ダッシュボードの右下に置く、製品アップデートの告知カードです。スライドは配列で渡し、上の細い進捗は進んだ本数まで白く溜まります。ボタンはそのスライドの処理を呼びます。autoAdvanceMs を渡すと横に自動で送り、今の線が伸びます。 https://design-layer.com/en/components/whats-new-card https://design-layer.com/catalog-previews/whats-new-card.jpg What's New Card A compact what’s-new card for the bottom-right of a dashboard. Slides come from an array, the thin progress marks fill in as you move forward, and the button calls that slide’s own action. Pass autoAdvanceMs to scroll ahead while the current line fills. https://design-layer.com/ja/components/clipboard-copy-button https://design-layer.com/catalog-previews/clipboard-copy-button.jpg クリップボード・コピーボタン 白い pill 型のコピーボタンです。押すとコピーのアイコンがチェックに変わり、Copied の文字が下から入ってから元に戻ります。コピーする値と2つのラベルを差し替えて、インストールコマンドや API キー、招待リンクの横にそのまま置けます。 https://design-layer.com/en/components/clipboard-copy-button https://design-layer.com/catalog-previews/clipboard-copy-button.jpg Clipboard Copy Button A white pill copy button. Click it and the copy icon turns into a check while “Copied” slides in, then both slide back. Swap the value and the two labels, then drop it next to an install command, API key, or invite link. https://design-layer.com/ja/components/interval-seg-control https://design-layer.com/catalog-previews/interval-seg-control.jpg 期間セグメントコントロール ダッシュボード向けの小さな期間切り替えです。グレーのトラックに 24h・7d・30d・90d が並び、選んだ期間へ白いつまみが滑ります。矢印キーでも動きます。選択肢を差し替えて、グラフや数値の行の上にそのまま置けます。 https://design-layer.com/en/components/interval-seg-control https://design-layer.com/catalog-previews/interval-seg-control.jpg Interval Seg Control A compact range switch for dashboards: 24h, 7d, 30d, and 90d on a soft gray track. A white thumb slides to the chosen range, and the arrow keys move it too. Swap the options, then drop it above a chart or a stats row. https://design-layer.com/ja/components/count-stepper https://design-layer.com/catalog-previews/count-stepper.jpg カウントステッパー 席数や数量を選ぶ、白い pill 型のステッパーです。マイナス・数字・プラスが並び、数字は増減の向きに合わせて上下に滑ります。上限と下限ではボタンが薄くなります。範囲と刻みを差し替えて、購入画面やチーム料金の中にそのまま置けます。 https://design-layer.com/en/components/count-stepper https://design-layer.com/catalog-previews/count-stepper.jpg Count Stepper A white pill stepper for seats or quantity: minus, the number, plus. The number slides up or down to the next value, and each button dims at its limit. Arrow keys, Page Up/Down, Home, and End work on the number. Swap the range and step, then drop it into a checkout or team plan. https://design-layer.com/ja/components/soft-switch https://design-layer.com/catalog-previews/soft-switch.jpg ソフトスイッチ ラベル付きの小さなオン・オフスイッチです。つまみが横に滑り、グレーのトラックが黒へ溶けるように変わります。Space と Enter でも切り替わります。ラベルと説明文を差し替えて、設定画面や通知設定の一覧にそのまま置けます。 https://design-layer.com/en/components/soft-switch https://design-layer.com/catalog-previews/soft-switch.jpg Soft Switch A small on/off switch with a label. The thumb slides across while the gray track crossfades to near-black. Space and Enter toggle it. Swap the label and add a short description, then drop it into a settings list or notification preferences. https://design-layer.com/ja/components/underline-tab-switch https://design-layer.com/catalog-previews/underline-tab-switch.jpg アンダーラインタブ 選んだタブの下へ、細い下線が幅を合わせて滑るテキストタブです。ラベルの後ろに件数の小さな pill を付けられます。矢印キーと Home・End で移動できます。選択肢を差し替えて、プロジェクト画面や設定パネルの上部にそのまま置けます。 https://design-layer.com/en/components/underline-tab-switch https://design-layer.com/catalog-previews/underline-tab-switch.jpg Underline Tab Switch Text tabs with a thin underline that slides and resizes to the selected tab. An optional count pill sits after a label. Arrow keys, Home, and End move between tabs. Swap the options, then drop it at the top of a project page or settings panel. https://design-layer.com/ja/components/theme-mode-switch https://design-layer.com/catalog-previews/theme-mode-switch.jpg テーマモードスイッチ ライト・ダーク・システムを3つのアイコンで選ぶ、ヘッダー向けの小さなスイッチです。丸いつまみが選んだモードへ滑り、ダークを選ぶと pill 全体が暗くなります。選んだ値を返すだけなので、テーマの切り替えは自前の仕組みにつなぎます。ラベルとアイコンを差し替えて、ヘッダーや設定メニューにそのまま置けます。 https://design-layer.com/en/components/theme-mode-switch https://design-layer.com/catalog-previews/theme-mode-switch.jpg Theme Mode Switch A compact header switch for Light, Dark, and System, drawn as three icons in a pill. A round thumb slides to the chosen mode, and the whole pill turns dark when Dark is picked. It only reports the choice, so wire it to your own theme provider. Swap the labels or icons, then drop it into a header or settings menu. https://design-layer.com/ja/components/filter-chip-row https://design-layer.com/catalog-previews/filter-chip-row.jpg フィルターチップ列 件数付きのフィルターチップを横一列に並べます。選んだチップは黒く塗られ、ラベルの横にチェックが滑り込みます。multiple を渡すと複数を同時に選べます。選択肢を差し替えて、一覧やギャラリー、検索結果の上にそのまま置けます。 https://design-layer.com/en/components/filter-chip-row https://design-layer.com/catalog-previews/filter-chip-row.jpg Filter Chip Row A horizontal row of filter chips with counts. The selected chip fills black and a check slides in beside its label. Pass multiple to let several chips stay on at once. Swap the options, then drop it above a list, a gallery, or search results. https://design-layer.com/ja/components/progress-steps https://design-layer.com/catalog-previews/progress-steps.jpg プログレスステップ Account・Plan・Checkout のような3〜5段階を横に並べる進捗表示です。進むと間の線が塗られ、終わった段階はチェックに変わり、今の段階には輪が付きます。onStepClick を渡すと前の段階へ戻れます。段階を差し替えて、登録や購入の流れの先頭にそのまま置けます。 https://design-layer.com/en/components/progress-steps https://design-layer.com/catalog-previews/progress-steps.jpg Progress Steps A horizontal step indicator for 3 to 5 steps, such as Account, Plan, and Checkout. The line between steps fills as you move on, finished steps turn into checks, and the current one gets a ring. Pass onStepClick to let people jump back. Swap the steps, then drop it at the top of a signup or checkout flow. https://design-layer.com/ja/components/rating-star-row https://design-layer.com/catalog-previews/rating-star-row.jpg 星評価 5つの星と、Poor から Excellent までの一言を並べる評価欄です。ホバーで評価を先に見せ、選ぶと星が順に弾みます。矢印キーでも変えられ、readOnly で表示専用になります。ラベル・一言・星の数を差し替えて、レビュー投稿やフィードバック欄にそのまま置けます。 https://design-layer.com/en/components/rating-star-row https://design-layer.com/catalog-previews/rating-star-row.jpg Rating Star Row A five-star rating row with a word beside it, from Poor to Excellent. Hovering previews the rating, and picking one makes the stars pop in turn. Arrow keys change the value, and readOnly turns it into a display. Swap the label, the words, and the star count, then drop it into a review form or a feedback prompt. https://design-layer.com/ja/components/notice-count-badge https://design-layer.com/catalog-previews/notice-count-badge.jpg 通知カウントバッジ 赤い件数バッジ付きの丸いベルボタンです。件数は 99+ で止まります。0 から増えるとバッジが弾んで現れ、ベルが一度揺れます。アイコン・ラベル・上限を差し替えて、アプリのヘッダーやダッシュボードの上部にそのまま置けます。 https://design-layer.com/en/components/notice-count-badge https://design-layer.com/catalog-previews/notice-count-badge.jpg Notice Count Badge A round bell button with a red count badge that caps at 99+. When the count goes from zero to one or more, the badge pops in and the bell swings once; later increases give it a small bump. Swap the icon, label, and cap, then drop it into an app header or a dashboard top bar. https://design-layer.com/ja/components/source-flow-card https://design-layer.com/catalog-previews/source-flow-card.jpg ソースフローカード 左の3行（Banks・Ledger・Billing）から細い線が伸び、光る点が右の白いハブへ流れ込みます。ハブの中では点線のスピナーが回ります。背景は塗らず、暗い面の上に置きます。行のラベルとアイコンを差し替えて、フィンテックやデータ連携の機能グリッドにそのまま置けます。 https://design-layer.com/en/components/source-flow-card https://design-layer.com/catalog-previews/source-flow-card.jpg Source Flow Card Three labeled rows on the left (Banks, Ledger, Billing) send small glowing dots along thin lines into a white hub with a dotted spinner. The diagram has no fill of its own, so place it on a dark surface. Swap the sources and their icons, then drop it into a fintech or data feature grid. https://design-layer.com/ja/components/sync-pulse-card https://design-layer.com/catalog-previews/sync-pulse-card.jpg 同期パルスカード つながったソースを1行ずつ同期していく、ダークな一覧カードです。同期中の行には光が流れ、アイコンの周りに輪が広がります。終わるとチェックと Last synced just now に変わり、次の行へ移ります。画面外では止まり、動きを減らす設定ではループしません。ソース名と時刻を差し替えて、連携やデータ同期の機能紹介にそのまま置けます。 https://design-layer.com/en/components/sync-pulse-card https://design-layer.com/catalog-previews/sync-pulse-card.jpg Sync Pulse Card A dark list of connected sources that syncs one row at a time. The active row gets a soft sweep and a pulsing ring, then flips to a check with “Last synced just now” before the next row starts. The loop pauses off screen and stops under reduced motion. Swap the sources and timestamps, then drop it into an integrations or data-pipeline feature block. https://design-layer.com/ja/components/status-pipeline-card https://design-layer.com/catalog-previews/status-pipeline-card.jpg ステータスパイプラインカード Queued・Running・Done を縦に並べた、ジョブのダークカードです。青い光がノードを1つずつ下へ進み、Done で緑のチェックに変わって止まります。少し待ってから最初に戻ります。段階・説明・止まる時間を差し替えて、CI やビルド、自動化の機能紹介にそのまま置けます。 https://design-layer.com/en/components/status-pipeline-card https://design-layer.com/catalog-previews/status-pipeline-card.jpg Status Pipeline Card A dark job card with a vertical pipeline: Queued, Running, Done. A blue highlight moves down the track node by node, holds on Done with a green check, then starts over. Swap the stages, their details, and how long each one holds, then drop it into a CI, build, or automation feature block. https://design-layer.com/ja/components/deploy-tick-card https://design-layer.com/catalog-previews/deploy-tick-card.jpg デプロイティックカード 環境名・短いコミットハッシュ・ドメイン・細い進捗バーを並べた、デプロイのダークカードです。バーが伸びる間、下の一行が Building から Assigning domain まで進みます。最後はチェックと緑の Live に変わり、もう一度始まります。環境名・コミット・ドメイン・ラベルを差し替えて、ホスティングや DevOps の機能紹介にそのまま置けます。 https://design-layer.com/en/components/deploy-tick-card https://design-layer.com/catalog-previews/deploy-tick-card.jpg Deploy Tick Card A dark deploy card with the environment, a short commit hash, the domain, and a thin progress bar. While the bar fills, the line under it steps through Building, Uploading assets, and Assigning domain. It finishes with a check and a green Live dot, then runs again. Swap the environment, commit, domain, and labels, then drop it into a hosting or DevOps feature block. https://design-layer.com/ja/components/uptime-signal-card https://design-layer.com/catalog-previews/uptime-signal-card.jpg アップタイムシグナルカード 大きな稼働率（既定は 99.99%）の下に、日ごとの棒を並べたダークカードです。画面に入ると棒が左から順に立ち上がり、今日の棒だけがゆっくり明滅します。黄色と赤は不調の日です。数字・ラベル・日ごとの状態を差し替えて、ステータスページの入口やインフラの機能グリッドにそのまま置けます。 https://design-layer.com/en/components/uptime-signal-card https://design-layer.com/catalog-previews/uptime-signal-card.jpg Uptime Signal Card A dark status card with a large uptime figure (99.99% by default) above a row of daily ticks. The ticks rise in from left to right when the card scrolls into view, amber and red mark rough days, and today's tick pulses. Swap the figure, label, and tick list, then drop it into a status page teaser or an infrastructure feature grid. https://design-layer.com/ja/components/usage-meter-card https://design-layer.com/catalog-previews/usage-meter-card.jpg 使用量メーターカード 20席中12席のような使用量を、270°のメーターで見せる白いカードです。画面に入ると弧が伸び、数字が値まで数え上がります。85%を超えると弧がローズ色に変わります。値・上限・ラベル・単位を差し替えて、請求画面やプラン設定、料金の機能紹介にそのまま置けます。 https://design-layer.com/en/components/usage-meter-card https://design-layer.com/catalog-previews/usage-meter-card.jpg Usage Meter Card A white usage card with a 270° meter, such as 12 of 20 seats. When the card scrolls into view, the arc fills and the number counts up to the value. Past 85% the arc turns rose. Swap the value, max, label, and unit, then drop it into a billing page, plan settings, or a pricing feature grid. https://design-layer.com/ja/components/event-stream-card https://design-layer.com/catalog-previews/event-stream-card.jpg イベントストリームカード invoice.paid や charge.failed などのイベントが流れる、Webhook のダークカードです。各行に色の点・経過時間・HTTP ステータスが並びます。数秒ごとに新しい行が上から入り、いちばん古い行は下でフェードして消えます。画面外と動きを減らす設定では止まります。イベント・エンドポイント・間隔を差し替えて、API や決済の機能紹介にそのまま置けます。 https://design-layer.com/en/components/event-stream-card https://design-layer.com/catalog-previews/event-stream-card.jpg Event Stream Card A dark webhook feed: event names like invoice.paid and charge.failed, each with a tone dot, its age, and an HTTP status. A new row eases in at the top every few seconds while the oldest slides out under a fade. It pauses off screen and under reduced motion. Swap the events, endpoint, and interval, then drop it into an API or payments feature block. https://design-layer.com/ja/components/presence-stack-card https://design-layer.com/catalog-previews/presence-stack-card.jpg プレゼンススタックカード 共有ドキュメントやボード向けの、在席状況を見せる白いカードです。タイトルの下に、状態の点が付いたアバターが重なって並びます。右上の pill はライブの点が光り、3 online のように人数を示します。下には誰が何をしているかが並びます。画面に入るとアバターが1人ずつ浮かび上がります。メンバー・写真・状態・ラベルを差し替えて、コラボ機能の紹介にそのまま置けます。 https://design-layer.com/en/components/presence-stack-card https://design-layer.com/catalog-previews/presence-stack-card.jpg Presence Stack Card A white presence tile for a shared doc or board: a title, overlapping teammate avatars with status dots, a “3 online” pill with a live ping, and who is doing what. Avatars rise in one by one when the card comes into view. Swap the people, photos, statuses, and labels, then drop it into a collaboration or multiplayer feature grid. https://design-layer.com/ja/components/latency-heat-card https://design-layer.com/catalog-previews/latency-heat-card.jpg レイテンシーヒートカード 地域ごとの遅延を1行ずつ並べるダークカードです（既定は US・EU・APAC）。画面に入るとバーがミリ秒の値まで伸び、横の数字も数え上がります。バーの色は速さに合わせて緑・黄・赤に変わります。地域・値・しきい値を差し替えて、インフラや CDN、エッジの機能紹介にそのまま置けます。 https://design-layer.com/en/components/latency-heat-card https://design-layer.com/catalog-previews/latency-heat-card.jpg Latency Heat Card A dark latency card with one row per region (US, EU, APAC by default). Bars grow to their millisecond values when the card comes into view, the numbers count up beside them, and each bar is tinted green, amber, or red by speed. Swap the regions, values, and thresholds, then drop it into an infrastructure, CDN, or edge feature block. https://design-layer.com/ja/components/sparkline-kpi-card https://design-layer.com/catalog-previews/sparkline-kpi-card.jpg スパークライン KPI カード ラベル・大きな数字・増減の pill・小さな折れ線を並べた白い KPI カードです。画面に入ると折れ線が左から描かれ、下の面がふわっと現れて、終点が小さく光ります。ラベル・値・増減・データ点を差し替えて、ダッシュボードの一列や分析機能の紹介にそのまま置けます。 https://design-layer.com/en/components/sparkline-kpi-card https://design-layer.com/catalog-previews/sparkline-kpi-card.jpg Sparkline KPI Card A white KPI tile: a label, a big figure, a delta pill, and a small sparkline. When the card comes into view, the line draws itself from left to right, the area underneath fades in, and the end point pings. Swap the label, value, delta, and points, then drop it into a dashboard row or an analytics feature grid.