{ "catalogVersion": 1, "designSchemaVersion": 2, "generatedAt": "2026-10-13T10:57:38.866Z", "count": 9, "decks": [ { "id": "deck:scroll-motion-ambient", "slug": "scroll-motion-ambient", "title": { "ja": "空気感と補助 40–44 — 読み心地を整える演出", "en": "Atmosphere and Utilities 40–44 — Effects That Tune the Feel of Reading" }, "summary": { "ja": "ベロシティスキューから追従 CTA まで 5 種。主役にはならないが、ページの手触りと導線を整える動き", "en": "Five effects from velocity skew to the sticky CTA. They are not the main act, but tune how the page feels and where the reader is led" }, "count": 5, "slides": [ { "position": 1, "slug": "motion-velocity-skew", "kind": "motion", "title": { "ja": "ベロシティスキュー", "en": "Velocity skew" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-velocity-skew", "en": "https://design-vault.pages.dev/en/designs/motion-velocity-skew", "json": "https://design-vault.pages.dev/ai/assets/motion-velocity-skew.json", "designJson": null } }, { "position": 2, "slug": "motion-rotate-on-scroll", "kind": "motion", "title": { "ja": "スクロール回転", "en": "Rotate on scroll" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-rotate-on-scroll", "en": "https://design-vault.pages.dev/en/designs/motion-rotate-on-scroll", "json": "https://design-vault.pages.dev/ai/assets/motion-rotate-on-scroll.json", "designJson": null } }, { "position": 3, "slug": "motion-circular-progress", "kind": "motion", "title": { "ja": "円形プログレス", "en": "Circular scroll progress" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-circular-progress", "en": "https://design-vault.pages.dev/en/designs/motion-circular-progress", "json": "https://design-vault.pages.dev/ai/assets/motion-circular-progress.json", "designJson": null } }, { "position": 4, "slug": "motion-blend-invert", "kind": "motion", "title": { "ja": "ブレンド反転", "en": "Blend invert" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-blend-invert", "en": "https://design-vault.pages.dev/en/designs/motion-blend-invert", "json": "https://design-vault.pages.dev/ai/assets/motion-blend-invert.json", "designJson": null } }, { "position": 5, "slug": "motion-sticky-cta", "kind": "motion", "title": { "ja": "追従 CTA", "en": "Sticky CTA bar" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-sticky-cta", "en": "https://design-vault.pages.dev/en/designs/motion-sticky-cta", "json": "https://design-vault.pages.dev/ai/assets/motion-sticky-cta.json", "designJson": null } } ], "urls": { "ja": "https://design-vault.pages.dev/decks/scroll-motion-ambient", "en": "https://design-vault.pages.dev/en/decks/scroll-motion-ambient", "json": "https://design-vault.pages.dev/ai/decks/scroll-motion-ambient.json" } }, { "id": "deck:scroll-motion-depth", "slug": "scroll-motion-depth", "title": { "ja": "画像と奥行き 30–34 — 面を切る、裏返す、飛び込む演出", "en": "Imagery and Depth 30–34 — Wipe, Flip and Fly Through a Surface" }, "summary": { "ja": "ビフォーアフターからアイリスマスクまで 5 種。画像や面の見せ方を変える動きで、製品紹介の山場に向く", "en": "Five effects from the before/after wipe to the iris mask. They change how an image or surface is shown, and suit the high point of a product story" }, "count": 5, "slides": [ { "position": 1, "slug": "motion-compare-wipe", "kind": "motion", "title": { "ja": "ビフォーアフター", "en": "Before/after wipe" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-compare-wipe", "en": "https://design-vault.pages.dev/en/designs/motion-compare-wipe", "json": "https://design-vault.pages.dev/ai/assets/motion-compare-wipe.json", "designJson": null } }, { "position": 2, "slug": "motion-card-flip-3d", "kind": "motion", "title": { "ja": "3D カードフリップ", "en": "3D card flip" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-card-flip-3d", "en": "https://design-vault.pages.dev/en/designs/motion-card-flip-3d", "json": "https://design-vault.pages.dev/ai/assets/motion-card-flip-3d.json", "designJson": null } }, { "position": 3, "slug": "motion-perspective-tilt", "kind": "motion", "title": { "ja": "パースペクティブ", "en": "Perspective tilt" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-perspective-tilt", "en": "https://design-vault.pages.dev/en/designs/motion-perspective-tilt", "json": "https://design-vault.pages.dev/ai/assets/motion-perspective-tilt.json", "designJson": null } }, { "position": 4, "slug": "motion-tunnel-fly", "kind": "motion", "title": { "ja": "トンネル", "en": "Tunnel" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-tunnel-fly", "en": "https://design-vault.pages.dev/en/designs/motion-tunnel-fly", "json": "https://design-vault.pages.dev/ai/assets/motion-tunnel-fly.json", "designJson": null } }, { "position": 5, "slug": "motion-iris-mask", "kind": "motion", "title": { "ja": "アイリスマスク", "en": "Iris mask" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-iris-mask", "en": "https://design-vault.pages.dev/en/designs/motion-iris-mask", "json": "https://design-vault.pages.dev/ai/assets/motion-iris-mask.json", "designJson": null } } ], "urls": { "ja": "https://design-vault.pages.dev/decks/scroll-motion-depth", "en": "https://design-vault.pages.dev/en/decks/scroll-motion-depth", "json": "https://design-vault.pages.dev/ai/decks/scroll-motion-depth.json" } }, { "id": "deck:scroll-motion-entrances", "slug": "scroll-motion-entrances", "title": { "ja": "出てくる動き 01–08 — 画面に入ったときの演出", "en": "Entrances 01–08 — What Happens as Things Enter the Viewport" }, "summary": { "ja": "フェードインからカウントアップまで 8 種。どれも「画面に入ったら一度だけ再生する」動きで、同じ配色・同じ舞台に載せてあるので、違いは動き方だけ", "en": "Eight effects from fade-in to count-up. Each plays once on entering the viewport, and all wear the same palette, so the only difference is how they move" }, "count": 8, "slides": [ { "position": 1, "slug": "motion-fade-in", "kind": "motion", "title": { "ja": "フェードイン", "en": "Fade-in" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-fade-in", "en": "https://design-vault.pages.dev/en/designs/motion-fade-in", "json": "https://design-vault.pages.dev/ai/assets/motion-fade-in.json", "designJson": null } }, { "position": 2, "slug": "motion-slide-in", "kind": "motion", "title": { "ja": "スライドイン", "en": "Slide-in" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-slide-in", "en": "https://design-vault.pages.dev/en/designs/motion-slide-in", "json": "https://design-vault.pages.dev/ai/assets/motion-slide-in.json", "designJson": null } }, { "position": 3, "slug": "motion-stagger", "kind": "motion", "title": { "ja": "スタッガー", "en": "Stagger" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-stagger", "en": "https://design-vault.pages.dev/en/designs/motion-stagger", "json": "https://design-vault.pages.dev/ai/assets/motion-stagger.json", "designJson": null } }, { "position": 4, "slug": "motion-text-reveal", "kind": "motion", "title": { "ja": "テキストリビール", "en": "Text reveal" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-text-reveal", "en": "https://design-vault.pages.dev/en/designs/motion-text-reveal", "json": "https://design-vault.pages.dev/ai/assets/motion-text-reveal.json", "designJson": null } }, { "position": 5, "slug": "motion-mask-reveal", "kind": "motion", "title": { "ja": "マスクリビール", "en": "Mask reveal" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-mask-reveal", "en": "https://design-vault.pages.dev/en/designs/motion-mask-reveal", "json": "https://design-vault.pages.dev/ai/assets/motion-mask-reveal.json", "designJson": null } }, { "position": 6, "slug": "motion-blur-in", "kind": "motion", "title": { "ja": "ブラーイン", "en": "Blur-in" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-blur-in", "en": "https://design-vault.pages.dev/en/designs/motion-blur-in", "json": "https://design-vault.pages.dev/ai/assets/motion-blur-in.json", "designJson": null } }, { "position": 7, "slug": "motion-typewriter", "kind": "motion", "title": { "ja": "タイプライター", "en": "Typewriter" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-typewriter", "en": "https://design-vault.pages.dev/en/designs/motion-typewriter", "json": "https://design-vault.pages.dev/ai/assets/motion-typewriter.json", "designJson": null } }, { "position": 8, "slug": "motion-count-up", "kind": "motion", "title": { "ja": "カウントアップ", "en": "Count-up" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-count-up", "en": "https://design-vault.pages.dev/en/designs/motion-count-up", "json": "https://design-vault.pages.dev/ai/assets/motion-count-up.json", "designJson": null } } ], "urls": { "ja": "https://design-vault.pages.dev/decks/scroll-motion-entrances", "en": "https://design-vault.pages.dev/en/decks/scroll-motion-entrances", "json": "https://design-vault.pages.dev/ai/decks/scroll-motion-entrances.json" } }, { "id": "deck:scroll-motion-lettering", "slug": "scroll-motion-lettering", "title": { "ja": "文字の演出 45–60 — 一画から粒子まで、文字そのものを動かす", "en": "Lettering in Motion 45–60 — From a Single Stroke to Particles" }, "summary": { "ja": "筆順・粒子・波・曲線・縦書きなど、文字を書く・砕く・集める動きと、一部を伸ばす・消す・星を散らすといったタイトル文字の飾り計 16 種。見出しの印象をスクロールで強める", "en": "Sixteen effects that write, shatter and gather letters, plus title-lettering touches such as stretching or erasing one part and scattering sparkles, slashing through, bleeding ink and linking letters. They sharpen a headline’s impression as the page scrolls" }, "count": 16, "slides": [ { "position": 1, "slug": "motion-stroke-order", "kind": "motion", "title": { "ja": "筆順", "en": "Stroke order" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-stroke-order", "en": "https://design-vault.pages.dev/en/designs/motion-stroke-order", "json": "https://design-vault.pages.dev/ai/assets/motion-stroke-order.json", "designJson": null } }, { "position": 2, "slug": "motion-text-shatter", "kind": "motion", "title": { "ja": "粒子ばらけ", "en": "Text shatter" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-text-shatter", "en": "https://design-vault.pages.dev/en/designs/motion-text-shatter", "json": "https://design-vault.pages.dev/ai/assets/motion-text-shatter.json", "designJson": null } }, { "position": 3, "slug": "motion-text-gather", "kind": "motion", "title": { "ja": "粒子集結", "en": "Text gather" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-text-gather", "en": "https://design-vault.pages.dev/en/designs/motion-text-gather", "json": "https://design-vault.pages.dev/ai/assets/motion-text-gather.json", "designJson": null } }, { "position": 4, "slug": "motion-char-wave", "kind": "motion", "title": { "ja": "文字の波", "en": "Character wave" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-char-wave", "en": "https://design-vault.pages.dev/en/designs/motion-char-wave", "json": "https://design-vault.pages.dev/ai/assets/motion-char-wave.json", "designJson": null } }, { "position": 5, "slug": "motion-text-on-path", "kind": "motion", "title": { "ja": "曲線に沿う文字", "en": "Text on a path" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-text-on-path", "en": "https://design-vault.pages.dev/en/designs/motion-text-on-path", "json": "https://design-vault.pages.dev/ai/assets/motion-text-on-path.json", "designJson": null } }, { "position": 6, "slug": "motion-vertical-write", "kind": "motion", "title": { "ja": "縦書きの筆記", "en": "Vertical writing" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-vertical-write", "en": "https://design-vault.pages.dev/en/designs/motion-vertical-write", "json": "https://design-vault.pages.dev/ai/assets/motion-vertical-write.json", "designJson": null } }, { "position": 7, "slug": "motion-letters-scatter", "kind": "motion", "title": { "ja": "文字の集合", "en": "Letters scatter" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-letters-scatter", "en": "https://design-vault.pages.dev/en/designs/motion-letters-scatter", "json": "https://design-vault.pages.dev/ai/assets/motion-letters-scatter.json", "designJson": null } }, { "position": 8, "slug": "motion-stretch-stroke", "kind": "motion", "title": { "ja": "一部を伸ばす", "en": "Stretch a stroke" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-stretch-stroke", "en": "https://design-vault.pages.dev/en/designs/motion-stretch-stroke", "json": "https://design-vault.pages.dev/ai/assets/motion-stretch-stroke.json", "designJson": null } }, { "position": 9, "slug": "motion-gradient-sweep", "kind": "motion", "title": { "ja": "グラデ文字", "en": "Gradient sweep" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-gradient-sweep", "en": "https://design-vault.pages.dev/en/designs/motion-gradient-sweep", "json": "https://design-vault.pages.dev/ai/assets/motion-gradient-sweep.json", "designJson": null } }, { "position": 10, "slug": "motion-erase-part", "kind": "motion", "title": { "ja": "一部を消す", "en": "Erase a part" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-erase-part", "en": "https://design-vault.pages.dev/en/designs/motion-erase-part", "json": "https://design-vault.pages.dev/ai/assets/motion-erase-part.json", "designJson": null } }, { "position": 11, "slug": "motion-sparkle-scatter", "kind": "motion", "title": { "ja": "装飾を散らす", "en": "Sparkle scatter" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-sparkle-scatter", "en": "https://design-vault.pages.dev/en/designs/motion-sparkle-scatter", "json": "https://design-vault.pages.dev/ai/assets/motion-sparkle-scatter.json", "designJson": null } }, { "position": 12, "slug": "motion-slash-strike", "kind": "motion", "title": { "ja": "斜線を入れる", "en": "Diagonal slashes" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-slash-strike", "en": "https://design-vault.pages.dev/en/designs/motion-slash-strike", "json": "https://design-vault.pages.dev/ai/assets/motion-slash-strike.json", "designJson": null } }, { "position": 13, "slug": "motion-one-letter-big", "kind": "motion", "title": { "ja": "一文字だけ大きく", "en": "One letter bigger" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-one-letter-big", "en": "https://design-vault.pages.dev/en/designs/motion-one-letter-big", "json": "https://design-vault.pages.dev/ai/assets/motion-one-letter-big.json", "designJson": null } }, { "position": 14, "slug": "motion-ink-bleed", "kind": "motion", "title": { "ja": "滲み", "en": "Ink bleed" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-ink-bleed", "en": "https://design-vault.pages.dev/en/designs/motion-ink-bleed", "json": "https://design-vault.pages.dev/ai/assets/motion-ink-bleed.json", "designJson": null } }, { "position": 15, "slug": "motion-english-underline", "kind": "motion", "title": { "ja": "下に英語", "en": "English underneath" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-english-underline", "en": "https://design-vault.pages.dev/en/designs/motion-english-underline", "json": "https://design-vault.pages.dev/ai/assets/motion-english-underline.json", "designJson": null } }, { "position": 16, "slug": "motion-linked-letters", "kind": "motion", "title": { "ja": "文字を繋げる", "en": "Linked letters" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-linked-letters", "en": "https://design-vault.pages.dev/en/designs/motion-linked-letters", "json": "https://design-vault.pages.dev/ai/assets/motion-linked-letters.json", "designJson": null } } ], "urls": { "ja": "https://design-vault.pages.dev/decks/scroll-motion-lettering", "en": "https://design-vault.pages.dev/en/decks/scroll-motion-lettering", "json": "https://design-vault.pages.dev/ai/decks/scroll-motion-lettering.json" } }, { "id": "deck:scroll-motion-linked", "slug": "scroll-motion-linked", "title": { "ja": "スクロールに連動する動き 09–16 — 進めた分だけ進む演出", "en": "Scroll-linked 09–16 — Effects That Advance as Far as You Scroll" }, "summary": { "ja": "読了バーからマーキーまで 8 種。時間ではなくスクロール量で進むので、止めれば止まり、戻せば戻る", "en": "Eight effects from the progress bar to the marquee. They run on scroll distance rather than time: stop and they stop, go back and they rewind" }, "count": 8, "slides": [ { "position": 1, "slug": "motion-scroll-linked", "kind": "motion", "title": { "ja": "スクロール連動", "en": "Scroll-linked animation" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-scroll-linked", "en": "https://design-vault.pages.dev/en/designs/motion-scroll-linked", "json": "https://design-vault.pages.dev/ai/assets/motion-scroll-linked.json", "designJson": null } }, { "position": 2, "slug": "motion-parallax", "kind": "motion", "title": { "ja": "パララックス", "en": "Parallax scrolling" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-parallax", "en": "https://design-vault.pages.dev/en/designs/motion-parallax", "json": "https://design-vault.pages.dev/ai/assets/motion-parallax.json", "designJson": null } }, { "position": 3, "slug": "motion-scroll-zoom", "kind": "motion", "title": { "ja": "スクロールズーム", "en": "Scale on scroll" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-scroll-zoom", "en": "https://design-vault.pages.dev/en/designs/motion-scroll-zoom", "json": "https://design-vault.pages.dev/ai/assets/motion-scroll-zoom.json", "designJson": null } }, { "position": 4, "slug": "motion-image-sequence", "kind": "motion", "title": { "ja": "画像シーケンス", "en": "Scroll-scrubbed image sequence" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-image-sequence", "en": "https://design-vault.pages.dev/en/designs/motion-image-sequence", "json": "https://design-vault.pages.dev/ai/assets/motion-image-sequence.json", "designJson": null } }, { "position": 5, "slug": "motion-svg-line-draw", "kind": "motion", "title": { "ja": "SVGラインドロー", "en": "SVG line drawing" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-svg-line-draw", "en": "https://design-vault.pages.dev/en/designs/motion-svg-line-draw", "json": "https://design-vault.pages.dev/ai/assets/motion-svg-line-draw.json", "designJson": null } }, { "position": 6, "slug": "motion-text-fill", "kind": "motion", "title": { "ja": "テキストフィル", "en": "Text fill on scroll" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-text-fill", "en": "https://design-vault.pages.dev/en/designs/motion-text-fill", "json": "https://design-vault.pages.dev/ai/assets/motion-text-fill.json", "designJson": null } }, { "position": 7, "slug": "motion-bg-color-transition", "kind": "motion", "title": { "ja": "背景色トランジション", "en": "Background color transition" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-bg-color-transition", "en": "https://design-vault.pages.dev/en/designs/motion-bg-color-transition", "json": "https://design-vault.pages.dev/ai/assets/motion-bg-color-transition.json", "designJson": null } }, { "position": 8, "slug": "motion-marquee", "kind": "motion", "title": { "ja": "マーキー", "en": "Marquee (scroll velocity)" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-marquee", "en": "https://design-vault.pages.dev/en/designs/motion-marquee", "json": "https://design-vault.pages.dev/ai/assets/motion-marquee.json", "designJson": null } } ], "urls": { "ja": "https://design-vault.pages.dev/decks/scroll-motion-linked", "en": "https://design-vault.pages.dev/en/decks/scroll-motion-linked", "json": "https://design-vault.pages.dev/ai/decks/scroll-motion-linked.json" } }, { "id": "deck:scroll-motion-lp", "slug": "scroll-motion-lp", "title": { "ja": "LP の構成 35–39 — 区画のつなぎ方を決める演出", "en": "Landing-Page Structure 35–39 — Effects That Decide How Sections Connect" }, "summary": { "ja": "タイムラインからヒーロー縮小まで 5 種。区画の並べ方と切り替え方を決める動きで、LP の骨組みになる", "en": "Five effects from the timeline to the shrinking hero. They decide how sections are laid out and handed over, and form the frame of a landing page" }, "count": 5, "slides": [ { "position": 1, "slug": "motion-timeline-fill", "kind": "motion", "title": { "ja": "タイムライン", "en": "Timeline progress fill" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-timeline-fill", "en": "https://design-vault.pages.dev/en/designs/motion-timeline-fill", "json": "https://design-vault.pages.dev/ai/assets/motion-timeline-fill.json", "designJson": null } }, { "position": 2, "slug": "motion-opposite-columns", "kind": "motion", "title": { "ja": "逆走カラム", "en": "Opposing-scroll columns" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-opposite-columns", "en": "https://design-vault.pages.dev/en/designs/motion-opposite-columns", "json": "https://design-vault.pages.dev/ai/assets/motion-opposite-columns.json", "designJson": null } }, { "position": 3, "slug": "motion-curtain-reveal", "kind": "motion", "title": { "ja": "カーテンリビール", "en": "Curtain reveal" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-curtain-reveal", "en": "https://design-vault.pages.dev/en/designs/motion-curtain-reveal", "json": "https://design-vault.pages.dev/ai/assets/motion-curtain-reveal.json", "designJson": null } }, { "position": 4, "slug": "motion-bar-grow", "kind": "motion", "title": { "ja": "バーの成長", "en": "Bars grow" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-bar-grow", "en": "https://design-vault.pages.dev/en/designs/motion-bar-grow", "json": "https://design-vault.pages.dev/ai/assets/motion-bar-grow.json", "designJson": null } }, { "position": 5, "slug": "motion-hero-shrink", "kind": "motion", "title": { "ja": "ヒーロー縮小", "en": "Hero title shrink" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-hero-shrink", "en": "https://design-vault.pages.dev/en/designs/motion-hero-shrink", "json": "https://design-vault.pages.dev/ai/assets/motion-hero-shrink.json", "designJson": null } } ], "urls": { "ja": "https://design-vault.pages.dev/decks/scroll-motion-lp", "en": "https://design-vault.pages.dev/en/decks/scroll-motion-lp", "json": "https://design-vault.pages.dev/ai/decks/scroll-motion-lp.json" } }, { "id": "deck:scroll-motion-pinning", "slug": "scroll-motion-pinning", "title": { "ja": "固定・送り・ナビ 17–24 — 画面を留める、送る、現在地を示す", "en": "Pinning, Paging, Navigation 17–24 — Hold the Screen, Step It, Show Where You Are" }, "summary": { "ja": "スティッキーからスクロールスパイまで 8 種。ページの進み方そのものを変える動きで、LP の骨組みになる", "en": "Eight behaviours from sticky to scrollspy. These change how the page itself advances — the frame an LP is built on" }, "count": 8, "slides": [ { "position": 1, "slug": "motion-sticky", "kind": "motion", "title": { "ja": "スティッキー", "en": "Sticky" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-sticky", "en": "https://design-vault.pages.dev/en/designs/motion-sticky", "json": "https://design-vault.pages.dev/ai/assets/motion-sticky.json", "designJson": null } }, { "position": 2, "slug": "motion-pin-scrub", "kind": "motion", "title": { "ja": "ピン留め＋スクラブ", "en": "Pin + scrub" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-pin-scrub", "en": "https://design-vault.pages.dev/en/designs/motion-pin-scrub", "json": "https://design-vault.pages.dev/ai/assets/motion-pin-scrub.json", "designJson": null } }, { "position": 3, "slug": "motion-scrollytelling", "kind": "motion", "title": { "ja": "スクロールテリング", "en": "Scrollytelling" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-scrollytelling", "en": "https://design-vault.pages.dev/en/designs/motion-scrollytelling", "json": "https://design-vault.pages.dev/ai/assets/motion-scrollytelling.json", "designJson": null } }, { "position": 4, "slug": "motion-stacking-cards", "kind": "motion", "title": { "ja": "カードスタック", "en": "Stacking cards" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-stacking-cards", "en": "https://design-vault.pages.dev/en/designs/motion-stacking-cards", "json": "https://design-vault.pages.dev/ai/assets/motion-stacking-cards.json", "designJson": null } }, { "position": 5, "slug": "motion-scroll-snap", "kind": "motion", "title": { "ja": "スクロールスナップ", "en": "Scroll snap" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-scroll-snap", "en": "https://design-vault.pages.dev/en/designs/motion-scroll-snap", "json": "https://design-vault.pages.dev/ai/assets/motion-scroll-snap.json", "designJson": null } }, { "position": 6, "slug": "motion-horizontal-scroll", "kind": "motion", "title": { "ja": "横スクロール", "en": "Horizontal scroll" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-horizontal-scroll", "en": "https://design-vault.pages.dev/en/designs/motion-horizontal-scroll", "json": "https://design-vault.pages.dev/ai/assets/motion-horizontal-scroll.json", "designJson": null } }, { "position": 7, "slug": "motion-hide-on-scroll-header", "kind": "motion", "title": { "ja": "隠れるヘッダー", "en": "Hide-on-scroll header" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-hide-on-scroll-header", "en": "https://design-vault.pages.dev/en/designs/motion-hide-on-scroll-header", "json": "https://design-vault.pages.dev/ai/assets/motion-hide-on-scroll-header.json", "designJson": null } }, { "position": 8, "slug": "motion-scrollspy", "kind": "motion", "title": { "ja": "スクロールスパイ", "en": "Scrollspy" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-scrollspy", "en": "https://design-vault.pages.dev/en/designs/motion-scrollspy", "json": "https://design-vault.pages.dev/ai/assets/motion-scrollspy.json", "designJson": null } } ], "urls": { "ja": "https://design-vault.pages.dev/decks/scroll-motion-pinning", "en": "https://design-vault.pages.dev/en/decks/scroll-motion-pinning", "json": "https://design-vault.pages.dev/ai/decks/scroll-motion-pinning.json" } }, { "id": "deck:scroll-motion-type", "slug": "scroll-motion-type", "title": { "ja": "文字の動き 25–29 — 文字そのものを動かす演出", "en": "Type in Motion 25–29 — Effects That Move the Letters Themselves" }, "summary": { "ja": "テキストスクランブルからオドメーターまで 5 種。見出しや数字の見せ方を変える動きで、LP の第一印象を作る", "en": "Five effects from text scramble to the odometer. They change how a headline or a figure appears, and set the first impression of a landing page" }, "count": 5, "slides": [ { "position": 1, "slug": "motion-text-scramble", "kind": "motion", "title": { "ja": "テキストスクランブル", "en": "Text scramble" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-text-scramble", "en": "https://design-vault.pages.dev/en/designs/motion-text-scramble", "json": "https://design-vault.pages.dev/ai/assets/motion-text-scramble.json", "designJson": null } }, { "position": 2, "slug": "motion-tracking-expand", "kind": "motion", "title": { "ja": "字間の開閉", "en": "Letter-spacing on scroll" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-tracking-expand", "en": "https://design-vault.pages.dev/en/designs/motion-tracking-expand", "json": "https://design-vault.pages.dev/ai/assets/motion-tracking-expand.json", "designJson": null } }, { "position": 3, "slug": "motion-highlighter-sweep", "kind": "motion", "title": { "ja": "マーカー線", "en": "Highlighter sweep" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-highlighter-sweep", "en": "https://design-vault.pages.dev/en/designs/motion-highlighter-sweep", "json": "https://design-vault.pages.dev/ai/assets/motion-highlighter-sweep.json", "designJson": null } }, { "position": 4, "slug": "motion-word-swapper", "kind": "motion", "title": { "ja": "ワードスワッパー", "en": "Rotating word swapper" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-word-swapper", "en": "https://design-vault.pages.dev/en/designs/motion-word-swapper", "json": "https://design-vault.pages.dev/ai/assets/motion-word-swapper.json", "designJson": null } }, { "position": 5, "slug": "motion-odometer-roll", "kind": "motion", "title": { "ja": "オドメーター", "en": "Odometer" }, "useCase": null, "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/motion-odometer-roll", "en": "https://design-vault.pages.dev/en/designs/motion-odometer-roll", "json": "https://design-vault.pages.dev/ai/assets/motion-odometer-roll.json", "designJson": null } } ], "urls": { "ja": "https://design-vault.pages.dev/decks/scroll-motion-type", "en": "https://design-vault.pages.dev/en/decks/scroll-motion-type", "json": "https://design-vault.pages.dev/ai/decks/scroll-motion-type.json" } }, { "id": "deck:system-project", "slug": "system-project", "title": { "ja": "システム開発案件の資料一式 — RFP から切替まで", "en": "System Project Deck — From RFP to Cutover" }, "summary": { "ja": "表紙から付録の扉まで 16 枚。並べて 1 冊になる前提で、配色を淡地と濃地の 2 組に揃えてある", "en": "Sixteen slides from the cover to the appendix door, drawn to sit together — two palettes, light and dark, and nothing else" }, "count": 16, "slides": [ { "position": 1, "slug": "deck-cover-project-brief", "kind": "artboard", "title": { "ja": "案件資料の表紙 — 件名の下に発行情報を並べる", "en": "Project Deck Cover — Subject Above the Issue Record" }, "useCase": "cover", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/deck-cover-project-brief", "en": "https://design-vault.pages.dev/en/designs/deck-cover-project-brief", "json": "https://design-vault.pages.dev/ai/assets/deck-cover-project-brief.json", "designJson": "https://design-vault.pages.dev/ai/designs/deck-cover-project-brief.json" } }, { "position": 2, "slug": "agenda-numbered-sections", "kind": "artboard", "title": { "ja": "目次 — 章ごとに「決めたいこと」を添える", "en": "Agenda — Each Section Carries What It Asks For" }, "useCase": "agenda", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/agenda-numbered-sections", "en": "https://design-vault.pages.dev/en/designs/agenda-numbered-sections", "json": "https://design-vault.pages.dev/ai/assets/agenda-numbered-sections.json", "designJson": "https://design-vault.pages.dev/ai/designs/agenda-numbered-sections.json" } }, { "position": 3, "slug": "scope-in-out-two-fields", "kind": "artboard", "title": { "ja": "スコープの線引き — 対象と対象外を同じ大きさで並べる", "en": "Scope Boundary — In and Out at the Same Size" }, "useCase": "scope", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/scope-in-out-two-fields", "en": "https://design-vault.pages.dev/en/designs/scope-in-out-two-fields", "json": "https://design-vault.pages.dev/ai/assets/scope-in-out-two-fields.json", "designJson": "https://design-vault.pages.dev/ai/designs/scope-in-out-two-fields.json" } }, { "position": 4, "slug": "phase-divider-step-rail", "kind": "artboard", "title": { "ja": "工程の中扉 — 全工程の並びの上に現在地を打つ", "en": "Phase Divider — The Whole Process, With a Mark on Now" }, "useCase": "section-divider", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/phase-divider-step-rail", "en": "https://design-vault.pages.dev/en/designs/phase-divider-step-rail", "json": "https://design-vault.pages.dev/ai/assets/phase-divider-step-rail.json", "designJson": "https://design-vault.pages.dev/ai/designs/phase-divider-step-rail.json" } }, { "position": 5, "slug": "architecture-3tier-stack", "kind": "artboard", "title": { "ja": "システム構成 — 層を 3 つに畳み、新設の 1 層だけを塗る", "en": "System Architecture — Three Tiers, One of Them New" }, "useCase": "architecture", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/architecture-3tier-stack", "en": "https://design-vault.pages.dev/en/designs/architecture-3tier-stack", "json": "https://design-vault.pages.dev/ai/assets/architecture-3tier-stack.json", "designJson": "https://design-vault.pages.dev/ai/designs/architecture-3tier-stack.json" } }, { "position": 6, "slug": "requirements-response-table", "kind": "artboard", "title": { "ja": "要求一覧への回答 — 代替提案の行だけを塗る", "en": "Requirement Responses — Only the Alternative Is Filled" }, "useCase": "requirements", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/requirements-response-table", "en": "https://design-vault.pages.dev/en/designs/requirements-response-table", "json": "https://design-vault.pages.dev/ai/assets/requirements-response-table.json", "designJson": "https://design-vault.pages.dev/ai/designs/requirements-response-table.json" } }, { "position": 7, "slug": "team-structure-joint-pmo", "kind": "artboard", "title": { "ja": "体制図 — 決める場を頂点に、合同の窓口を 1 つに絞る", "en": "Team Structure — One Place to Decide, One Joint Desk" }, "useCase": "org", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/team-structure-joint-pmo", "en": "https://design-vault.pages.dev/en/designs/team-structure-joint-pmo", "json": "https://design-vault.pages.dev/ai/assets/team-structure-joint-pmo.json", "designJson": "https://design-vault.pages.dev/ai/designs/team-structure-joint-pmo.json" } }, { "position": 8, "slug": "wbs-gantt-six-phases", "kind": "artboard", "title": { "ja": "工程表 — 帯の長さを期間に、重なりを引き継ぎに使う", "en": "Phase Schedule — Length Is Duration, Overlap Is Hand-off" }, "useCase": "roadmap", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/wbs-gantt-six-phases", "en": "https://design-vault.pages.dev/en/designs/wbs-gantt-six-phases", "json": "https://design-vault.pages.dev/ai/assets/wbs-gantt-six-phases.json", "designJson": "https://design-vault.pages.dev/ai/designs/wbs-gantt-six-phases.json" } }, { "position": 9, "slug": "estimate-breakdown-by-phase", "kind": "artboard", "title": { "ja": "見積の内訳 — 総額より先に構成比を読ませる", "en": "Estimate Breakdown — Share of Cost Before the Total" }, "useCase": "pricing", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/estimate-breakdown-by-phase", "en": "https://design-vault.pages.dev/en/designs/estimate-breakdown-by-phase", "json": "https://design-vault.pages.dev/ai/assets/estimate-breakdown-by-phase.json", "designJson": "https://design-vault.pages.dev/ai/designs/estimate-breakdown-by-phase.json" } }, { "position": 10, "slug": "test-v-model-paired", "kind": "artboard", "title": { "ja": "テスト計画 — 作る工程と受け入れる試験を行で対にする", "en": "Test Plan — Each Phase Paired With What Accepts It" }, "useCase": "testing", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/test-v-model-paired", "en": "https://design-vault.pages.dev/en/designs/test-v-model-paired", "json": "https://design-vault.pages.dev/ai/assets/test-v-model-paired.json", "designJson": "https://design-vault.pages.dev/ai/designs/test-v-model-paired.json" } }, { "position": 11, "slug": "change-request-flow-gates", "kind": "artboard", "title": { "ja": "変更管理 — 各段に営業日を与え、否認の行き先まで描く", "en": "Change Control — Business Days on Every Step, and Where a Refusal Goes" }, "useCase": "change-control", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/change-request-flow-gates", "en": "https://design-vault.pages.dev/en/designs/change-request-flow-gates", "json": "https://design-vault.pages.dev/ai/assets/change-request-flow-gates.json", "designJson": "https://design-vault.pages.dev/ai/designs/change-request-flow-gates.json" } }, { "position": 12, "slug": "status-report-rag-rows", "kind": "artboard", "title": { "ja": "進捗報告 — 信号の色を使わず、手当ての欄で危険を示す", "en": "Status Report — No Traffic Lights, a Remedy Column Instead" }, "useCase": "status", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/status-report-rag-rows", "en": "https://design-vault.pages.dev/en/designs/status-report-rag-rows", "json": "https://design-vault.pages.dev/ai/assets/status-report-rag-rows.json", "designJson": "https://design-vault.pages.dev/ai/designs/status-report-rag-rows.json" } }, { "position": 13, "slug": "defect-severity-status-matrix", "kind": "artboard", "title": { "ja": "品質状況 — 残件の合計ではなく、出荷を止める区画を読む", "en": "Defect Status — Read the Blocking Cell, Not the Total" }, "useCase": "testing", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/defect-severity-status-matrix", "en": "https://design-vault.pages.dev/en/designs/defect-severity-status-matrix", "json": "https://design-vault.pages.dev/ai/assets/defect-severity-status-matrix.json", "designJson": "https://design-vault.pages.dev/ai/designs/defect-severity-status-matrix.json" } }, { "position": 14, "slug": "cutover-runbook-timeline", "kind": "artboard", "title": { "ja": "切替当日の手順 — 戻す判断の時刻を手順の中に置く", "en": "Cutover Runbook — The Rollback Call Has a Clock Time" }, "useCase": "migration", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/cutover-runbook-timeline", "en": "https://design-vault.pages.dev/en/designs/cutover-runbook-timeline", "json": "https://design-vault.pages.dev/ai/assets/cutover-runbook-timeline.json", "designJson": "https://design-vault.pages.dev/ai/designs/cutover-runbook-timeline.json" } }, { "position": 15, "slug": "closing-decision-request", "kind": "artboard", "title": { "ja": "締めの 1 枚 — お願いする判断を期限つきで 3 件だけ", "en": "Closing Slide — Three Decisions, Each With a Date" }, "useCase": "summary", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/closing-decision-request", "en": "https://design-vault.pages.dev/en/designs/closing-decision-request", "json": "https://design-vault.pages.dev/ai/assets/closing-decision-request.json", "designJson": "https://design-vault.pages.dev/ai/designs/closing-decision-request.json" } }, { "position": 16, "slug": "appendix-index-grid", "kind": "artboard", "title": { "ja": "付録の扉 — 収録物を番号つきの格子で見せる", "en": "Appendix Door — What Is Inside, as a Numbered Grid" }, "useCase": "appendix", "role": null, "urls": { "ja": "https://design-vault.pages.dev/designs/appendix-index-grid", "en": "https://design-vault.pages.dev/en/designs/appendix-index-grid", "json": "https://design-vault.pages.dev/ai/assets/appendix-index-grid.json", "designJson": "https://design-vault.pages.dev/ai/designs/appendix-index-grid.json" } } ], "urls": { "ja": "https://design-vault.pages.dev/decks/system-project", "en": "https://design-vault.pages.dev/en/decks/system-project", "json": "https://design-vault.pages.dev/ai/decks/system-project.json" } } ] }