VLOGパック

MO-PLUG Verified independent store

→

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap'); /* ★ デザイン設定 */ :root { --vl-zoom-scale: 1.5; /* 拡大率（150%） */ --vl-zoom-speed : 0.3s; /* 拡大の速さ */ --vl-bg-blur: 8px; /* 背景のブラー強度 */ --vl-overlay-color: rgba(15, 23, 42, 0.75); /* 暗転の濃さ */ } #vl-lp-root { font-family: 'Noto Sans JP', sans-serif; color: #111; line-height: 1.7; -webkit-font-smoothing: antialiased; width: 100%; overflow: visible !important; /* 親要素の幅制限を無効化 */ } #vl-lp-root *, #vl-lp-root *::before, #vl-lp-root *::after { box-sizing: border-box; } /* ===== 全幅レイアウト ===== */ #vl-lp-root .vl-full-section { width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important; margin-left: -50vw !important; margin-right: -50vw !important; transform: none !important; z-index: auto !important; } #vl-lp-root .vl-inner-content { max-width: 1140px; margin: 0 auto; padding: 0 32px; } /* グラデーション */ #vl-lp-root .vl-grad-text { background: linear-gradient(135deg,#5B21B6,#0891B2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* ===== HERO SECTION ===== */ #vl-lp-root .vl-hero-outer { background: #000; height: clamp(300px, 56.25vw, 80vh); overflow: hidden; display: flex; align-items: center; justify-content: center; } #vl-lp-root .vl-hero-video-container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; z-index: 0; } #vl-lp-root .vl-hero-video-container iframe { width: 100vw !important; height: 56.25vw !important; min-height: 100vh !important; min-width: 177.77vh !important; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border: none; pointer-events: none; } #vl-lp-root .vl-hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.25); z-index: 1; } #vl-lp-root .vl-hero-body { position: relative; z-index: 2; text-align: center; color: #fff; width: 90%; } #vl-lp-root .vl-hero-h1 { font-size: clamp(26px, 7.5vw, 68px); font-weight: 900; margin-bottom: 0.5em; text-shadow: 0 4px 15px rgba(0,0,0,0.5); } /* ★ サブテキストとボタンの間に十分な余白(60px)を確保 */ #vl-lp-root .vl-hero-sub { font-size: clamp(13px, 1.6vw, 18px); font-weight: 700; color: #eee; max-width: 700px; margin: 0 auto 60px; text-shadow: 0 2px 10px rgba(0,0,0,0.5); line-height: 1.8; } #vl-lp-root .vl-buy-button { display: inline-block; background: #fff; color: #000 !important; padding: 1.1em 4em; border-radius: 999px; font-weight: 800; font-size: clamp(14px, 1.2vw, 16px); text-decoration: none !important; transition: 0.2s; border: none; cursor: pointer; } #vl-lp-root .vl-buy-button:hover { transform: scale(1.05); } /* ===== INTRO SECTION ===== */ #vl-lp-root .vl-intro-section { background: #F5F5F5; padding: 80px 0; } #vl-lp-root .vl-section-title { font-size: clamp(24px, 4vw, 42px); font-weight: 900; text-align: center; margin-bottom: 40px; color: #111; } #vl-lp-root .vl-intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; } #vl-lp-root .vl-intro-card { background: #fff; padding: 40px 24px; border-radius: 20px; border: 1px solid #eee; text-align: center; } #vl-lp-root .vl-intro-card h3 { font-size: 19px; font-weight: 900; margin-bottom: 15px; background: linear-gradient(135deg,#5B21B6,#0891B2); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } #vl-lp-root .vl-intro-card p { font-size: 14px; color: #555; line-height: 1.8; } /* ===== CONTENT SECTION ===== */ #vl-lp-root .vl-content-section { background: #fff; padding: 80px 0; } #vl-lp-root .vl-category-label { font-size: 20px; font-weight: 900; text-align: center; margin: 60px 0 30px; padding-bottom: 15px; border-bottom: 2px solid #f0f0f0; } #vl-lp-root .vl-asset-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; } /* サムネイル（通常時） */ #vl-lp-root .vl-asset-item { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 12px; overflow: hidden; border: 1.5px solid #eee; cursor: pointer; z-index: 1; transform-origin: center center; transition: transform var(--vl-zoom-speed) ease, box-shadow var(--vl-zoom-speed) ease, border-color var(--vl-zoom-speed) ease; } #vl-lp-root .vl-asset-item:hover { border-color: #0891B2; } #vl-lp-root .vl-asset-video { width: 100%; height: 100%; object-fit: cover; pointer-events: none; } /* 拡大時のコンテンツ名（左下） */ #vl-lp-root .vl-asset-name { position: absolute; bottom: 10px; left: 14px; color: rgba(255, 255, 255, 0.95); font-size: 12px; font-weight: 800; letter-spacing: 0.05em; text-shadow: 0 2px 8px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.9); opacity: 0; pointer-events: none; z-index: 10; transition: opacity var(--vl-zoom-speed) ease; } /* 拡大時のスタイル */ #vl-lp-root .vl-asset-item.is-zoomed { z-index: 999999 !important; transform: scale(var(--vl-zoom-scale)); border-color: #fff; box-shadow: 0 30px 60px rgba(0,0,0,0.5); } #vl-lp-root .vl-asset-item.is-zoomed .vl-asset-name { opacity: 1; } /* 拡大用バックドロップ（背景のみ暗転・ブラー） */ .vl-zoom-backdrop { position: fixed; inset: 0; z-index: 999998; background: var(--vl-overlay-color); backdrop-filter: blur(var(--vl-bg-blur)); -webkit-backdrop-filter: blur(var(--vl-bg-blur)); opacity: 0; pointer-events: none; transition: opacity var(--vl-zoom-speed) ease; } .vl-zoom-backdrop.is-active { opacity: 1; pointer-events: auto; } /* ===== SYSTEM INFO (薄グレー背景) ===== */ #vl-lp-root .vl-info-section { background: #F5F5F5; padding: 80px 0; } #vl-lp-root .vl-info-box { background: #fff; max-width: 800px; margin: 0 auto; border-radius: 20px; padding: 40px; border: 1px solid #eee; } #vl-lp-root .vl-info-table { width: 100%; border-collapse: collapse; } #vl-lp-root .vl-info-table td { padding: 18px 0; border-bottom: 1px solid #f0f0f0; font-size: 14px; } #vl-lp-root .vl-info-table td:first-child { color: #888; width: 40%; font-weight: 700; } /* ===== FAQ SECTION (白背景) ===== */ #vl-lp-root .vl-faq-section { background: #fff; padding: 80px 0; } #vl-lp-root .vl-faq-wrap { margin-top: 40px; max-width: 800px; margin-left: auto; margin-right: auto; } #vl-lp-root details.vl-faq-item { border-bottom: 1px solid #E5E5E5; } #vl-lp-root details.vl-faq-item:first-of-type { border-top: 1px solid #E5E5E5; } #vl-lp-root summary.vl-faq-q { display: flex; align-items: center; justify-content: space-between; padding: 22px 8px; cursor: pointer; font-size: 16px; font-weight: 700; color: #111; list-style: none; } #vl-lp-root summary.vl-faq-q::-webkit-details-marker { display: none; } #vl-lp-root summary.vl-faq-q::after { content: ''; width: 20px; height: 20px; flex-shrink: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235B21B6' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; transition: transform 0.3s ease; } #vl-lp-root details[open] summary.vl-faq-q::after { transform: rotate(180deg); } #vl-lp-root .vl-faq-a { padding: 0 8px 24px; font-size: 14px; color: #555; line-height: 1.8; } /* ===== FINAL CTA ===== */ #vl-lp-root .vl-cta-section { background: #000; padding: 100px 0; text-align: center; color: #fff; } @media (max-width: 1024px) { #vl-lp-root .vl-intro-grid { grid-template-columns: 1fr; } #vl-lp-root .vl-asset-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { #vl-lp-root .vl-asset-grid { grid-template-columns: 1fr; } #vl-lp-root .vl-asset-item.is-zoomed { transform: scale(1.15); } } 日常の思い出を動画に残す VLOG動画の制作に最適化された、プロ仕様のプラグインセット。あなたの思い出を、一生モノの映像作品へ。 今すぐ購入 VLOGパックとは 旅の記録、日常の風景、大切な人との時間。Final Cut Proでの編集を劇的に効率化し、誰でも簡単におしゃれなVLOGを作れるツールを詰め込みました。 時短・効率化 ドラッグ&ドロップだけで、地図アニメーションやカレンダーを配置。面倒な作業を一瞬で終わらせます。 洗練されたデザイン ミニマルでスタイリッシュ。映像の質感を損なわず、被写体の魅力を最大限に引き出すデザインが揃っています。 豊富なバリエーション テロップからエフェクトまで、VLOGに必要な要素を網羅。あらゆるシーンに最適な演出が可能です。 収録内容 タイトル エフェクト ツール ドロップゾーン マップアニメーション テロップ システム要件・仕様 Final Cut Pro 12.0 以降 ダウンロードサイズ 34.0 MB 購入形態 買い切り アップデート対応 都度実施（追加購入等は不要） よくある質問 Final Cut Pro のバージョンは何が必要ですか？ 最新版の Final Cut Pro をご使用ください。 購入後すぐにダウンロードできますか？ 購入完了後すぐに、ダウンロードリンクが記載されたメールが届きます。また、購入完了画面からでもダウンロードが可能です。 商用利用は可能ですか？ はい、個人・商用問わずご利用いただけます。YouTube・TikTok・Instagram等の収益化動画にも使用できます。 アップデートはありますか？ 定期的にデザインを追加・アップデートします。一度購入いただいたお客様は、追加料金なしでアップデートを受け取ることができます。 返金保証はありますか？ 原則、返金はお受けしておりません。ダウンロードコンテンツという性質上、ご購入後の返金対応はできかねますので、あらかじめご了承ください。 READY TO VLOG? カートに追加する // 動画データ const assets = { title: [ { name: "タイトル01", url: "https://cdn.shopify.com/videos/c/o/v/1f63d4308a624223a497d41095e0c723.mp4", thumb: 1.5 }, { name: "タイトル02", url: "https://cdn.shopify.com/videos/c/o/v/a6634dc8c518432ba18d44b2306d51ae.mp4", thumb: 1.5 }, { name: "タイトル03", url: "https://cdn.shopify.com/videos/c/o/v/024eee9e4992445f81e3a94b4faec967.mp4", thumb: 2.5 }, { name: "タイトル04", url: "https://cdn.shopify.com/videos/c/o/v/4c5404b2c9a14352bcb279dfaaf3aeec.mp4", thumb: 2.5 }, { name: "タイトル05", url: "https://cdn.shopify.com/videos/c/o/v/9dbe09a226154089999f3d7857661304.mp4", thumb: 2.5 }, { name: "タイトル06", url: "https://cdn.shopify.com/videos/c/o/v/45226fbddf784412ad37ee041134f5e8.mp4", thumb: 1.5 }, { name: "タイトル07", url: "https://cdn.shopify.com/videos/c/o/v/19e6d682d2e1428b9fb9434b068ec046.mp4", thumb: 3.5 }, { name: "タイトル08", url: "https://cdn.shopify.com/videos/c/o/v/217c3ff3c845401ba2d3168ad588e37d.mp4", thumb: 2.5 }, { name: "タイトル09", url: "https://cdn.shopify.com/videos/c/o/v/a58214b044a14964980a6ecd9e0af510.mp4", thumb: 2.5 }, { name: "タイトル10", url: "https://cdn.shopify.com/videos/c/o/v/d4f3c605c5694903b2ce952c29b9d8d1.mp4", thumb: 2.5 }, { name: "タイトル11", url: "https://cdn.shopify.com/videos/c/o/v/9e12e0e3bd684acc8c4384e8ca38a4b9.mp4", thumb: 2.5 }, { name: "タイトル12", url: "https://cdn.shopify.com/videos/c/o/v/b945af9c94f3416e80887087b67e0b54.mp4", thumb: 3.5 }, { name: "タイトル13", url: "https://cdn.shopify.com/videos/c/o/v/061abff956d44ea5b3f74e2d10862ed4.mp4", thumb: 2.5 }, { name: "タイトル14", url: "https://cdn.shopify.com/videos/c/o/v/f251d1fed5f747baa7bd03830da2ad35.mp4", thumb: 2.5 }, { name: "タイトル15", url: "https://cdn.shopify.com/videos/c/o/v/17e904ee105e4c52a0d18cb658000b18.mp4", thumb: 3.5 }, { name: "タイトル16", url: "https://cdn.shopify.com/videos/c/o/v/858e764925c7429983828350ea861aaa.mp4", thumb: 3.5 }, { name: "タイトル17", url: "https://cdn.shopify.com/videos/c/o/v/581c2f955a594efa8079a41c388bbfd4.mp4", thumb: 2.5 }, { name: "タイトル18", url: "https://cdn.shopify.com/videos/c/o/v/4332266497d24ff6b79d1fe0c69bf013.mp4", thumb: 2.5 }, { name: "タイトル19", url: "https://cdn.shopify.com/videos/c/o/v/967c6c793f104411b974b2e11b7b91da.mp4", thumb: 2.4 }, { name: "タイトル20", url: "https://cdn.shopify.com/videos/c/o/v/843a1c28244d4365a2df228e0fe683c2.mp4", thumb: 2.5 }, { name: "タイトル21", url: "https://cdn.shopify.com/videos/c/o/v/22091b901eeb40b3acca3b0a1592e467.mp4", thumb: 2.5 } ], effect: [ { name: "ミスト", url: "https://cdn.shopify.com/videos/c/o/v/39f4d0f5972144a59bbecf6d211a202c.mp4", thumb: 4.5 }, { name: "フィルム", url: "https://cdn.shopify.com/videos/c/o/v/93e86b0896924ab8a383444b0aaef713.mp4", thumb: 4.5 }, { name: "ライトリーク", url: "https://cdn.shopify.com/videos/c/o/v/460a894723c5489ea6cfc867b60454db.mp4", thumb: 4.5 }, { name: "カメラ録画", url: "https://cdn.shopify.com/videos/c/o/v/d819caa027974212b0f1d084a41bb2e6.mp4", thumb: 4.5 }, { name: "レターボックス", url: "https://cdn.shopify.com/videos/c/o/v/8531b0c00e1c4e618c743025ee7badc3.mp4", thumb: 4.5 }, { name: "クロップ", url: "https://cdn.shopify.com/videos/c/o/v/aaa1f94dc68b4478a9a00c30e698b4b0.mp4", thumb: 4.5 } ], tool: [ { name: "カレンダー", url: "https://cdn.shopify.com/videos/c/o/v/43726580537a464187c6fb52f4e70bca.mp4", thumb: 2.5 }, { name: "デジタル時計01", url: "https://cdn.shopify.com/videos/c/o/v/deb4cb71ad6746dd9c7cecce1e09aa29.mp4", thumb: 1.5 }, { name: "デジタル時計02", url: "https://cdn.shopify.com/videos/c/o/v/abfc531b5f2643a9b2d8fa1d6a995f30.mp4", thumb: 2.5 }, { name: "時計", url: "https://cdn.shopify.com/videos/c/o/v/a1f221d068914c55919307fb21e9d6a2.mp4", thumb: 1.5 }, { name: "日付", url: "https://cdn.shopify.com/videos/c/o/v/4e2563dcfa774c74a97046d817251dbd.mp4", thumb: 1.5 } ], dropzone: [ { name: "インフォメーション01/02", url: "https://cdn.shopify.com/videos/c/o/v/ea2db87b7b3c433b95d3ba8a5f180c38.mp4", thumb: 2.5 }, { name: "インフォメーション03", url: "https://cdn.shopify.com/videos/c/o/v/60cf581cbf754954b190a19301abe595.mp4", thumb: 2.5 }, { name: "インフォメーション04", url: "https://cdn.shopify.com/videos/c/o/v/543ac2c80dc941db81547fe7a873a279.mp4", thumb: 2.5 }, { name: "フォトスナップ", url: "https://cdn.shopify.com/videos/c/o/v/5fc61df9324b4f668172a997d6e7e657.mp4", thumb: 2.5 }, { name: "フォトトランジション", url: "https://cdn.shopify.com/videos/c/o/v/7ad955826e8c49b29e3bf32d87f71036.mp4", thumb: 2.5 } ], map: [ { name: "ルートアニメーション01", url: "https://cdn.shopify.com/videos/c/o/v/0b5cc887a1ae46558fdd90ca08f90c00.mp4", thumb: 2.5 }, { name: "ルートアニメーション02/03", url: "https://cdn.shopify.com/videos/c/o/v/a555aeb88ee547d6a1ba265073b1e8da.mp4", thumb: 4.5 }, { name: "ルートアニメーション04/05", url: "https://cdn.shopify.com/videos/c/o/v/4788ab982a394c0bb9159c5598f4e411.mp4", thumb: 4.5 }, { name: "日本地図", url: "https://cdn.shopify.com/videos/c/o/v/83b24314c0394051b7bf64d417b0afe2.mp4", thumb: 3.5 } ], telop: [ { name: "テロップ01", url: "https://cdn.shopify.com/videos/c/o/v/333fb0898f4d4b6897c76527963026d9.mp4", thumb: 1.5 }, { name: "テロップ02", url: "https://cdn.shopify.com/videos/c/o/v/cc3e7ff2267947f684118d862b5ad280.mp4", thumb: 0.5 }, { name: "テロップ03", url: "https://cdn.shopify.com/videos/c/o/v/5441a9a43cc545fd84adedd73f169bdc.mp4", thumb: 0.5 } ] }; let activeZoomItem = null; function initAssets() { Object.keys(assets).forEach(cat => { const grid = document.getElementById(`grid-${cat}`); if (!grid) return; grid.innerHTML = assets[cat].map(asset => ` ${asset.name} `).join(''); }); const backdrop = document.getElementById('vl-zoom-backdrop'); const items = document.querySelectorAll('.vl-asset-item'); items.forEach(item => { const video = item.querySelector('video'); const thumbTime = parseFloat(item.dataset.thumb) || 0; const setThumb = () => { video.currentTime = thumbTime; }; if (video.readyState >= 1) setThumb(); else video.addEventListener('loadedmetadata', setThumb); item.addEventListener('mouseenter', () => { if (!item.classList.contains('is-zoomed')) { video.currentTime = 0; // ホバー時は0秒から再生 video.play(); } }); item.addEventListener('mouseleave', () => { if (!item.classList.contains('is-zoomed')) { video.pause(); setThumb(); // マウスを離したらサムネイル位置に戻す } }); item.addEventListener('click', (e) => { e.stopPropagation(); if (activeZoomItem === item) return; if (activeZoomItem) closeZoom(); item.classList.add('is-zoomed'); backdrop.classList.add('is-active'); video.currentTime = 0; // 拡大時も0秒から再生 video.play(); activeZoomItem = item; }); }); backdrop.addEventListener('click', closeZoom); document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closeZoom(); }); } function closeZoom() { if (!activeZoomItem) return; const video = activeZoomItem.querySelector('video'); activeZoomItem.classList.remove('is-zoomed'); document.getElementById('vl-zoom-backdrop').classList.remove('is-active'); video.pause(); // 閉じた後はサムネイル位置に戻す video.currentTime = parseFloat(activeZoomItem.dataset.thumb) || 0; activeZoomItem = null; } function tpAddToCart() { var sel = document.querySelector('select[name="id"], input[name="id"]'); var variantId = sel ? sel.value : null; if (!variantId) { window.location.href = '/cart'; return; } fetch('/cart/add.js', { method: 'POST', headers: { 'Content-Type': 'application/json', 'X-Requested-With': 'XMLHttpRequest' }, body: JSON.stringify({ id: parseInt(variantId), quantity: 1 }) }).then(() => { window.location.href = '/cart'; }); } document.addEventListener('DOMContentLoaded', initAssets); Show more