美容・サロン向けLPテンプレート｜PC・スマホ対応／動画MV・スライダー付き

美容・サロン・コスメ・ウェルネス商品の紹介に使える、PC・タブレット・スマートフォン対応のLPテンプレートです。

淡いブルーの世界観に合わせたMV、商品特徴、処方紹介、3ステップの使用方法、使用シーン、お客さまの声、購入導線を1ページにまとめています。

「LPをゼロから作るのは難しいけれど、ありきたりなテンプレートでは物足りない」

「自分の商品に合わせて、AIにも相談しながらカスタマイズしたい」

という方に向けた、編集しやすい土台です。

このテンプレートの特徴

・PC / タブレット / スマートフォン対応

・MVの動画背景と静止画フォールバック

・商品特徴を見せる3つの円形ピラー

・処方紹介のスライダー

・スクロールやスワイプで切り替わる3ステップの使用方法

・使用シーンのチェックリスト

・お客さまの声のカルーセル

・購入モーダルのデモ

・編集場所を指定できるdata-edit-id

・GPT / Codexへ依頼するときの文例つき

ダウンロードできるもの

・React / Viteソース一式

・サンプル画像・動画

・購入者向けREADME

・編集ID一覧とカスタマイズガイド

・GPT / Codex依頼テンプレート

・PDFマニュアルと編集用Markdown

・利用条件（LICENSE.md）

・素材・外部サービスの確認事項（ASSET-LICENSES.md）

・販売時点の完成プレビュー

購入後の流れ

1. ZIPをダウンロードして解凍

2. まずREADMEとPDFマニュアルを確認

3. Node.js 20 LTS以降を用意

4. npm installを実行

5. npm run devでローカル確認

6. src/App.jsxやsrc/styles.css、public/assetsを編集

7. npm run buildを実行

8. 生成されたdist/client/の中身をご自身のサーバーへアップロード

編集IDを使えば、GPTやCodexに「どの場所をどう変えたいか」を伝えやすくなります。AIを使わず、通常のコードエディターで編集することもできます。

動作環境

・Node.js 20 LTS以降

・npm

・最新版に近いChrome / Edge / Safariなどのブラウザ

・完成データを公開するための静的ファイル対応サーバー

GPTやCodexのアカウント、利用料は商品に含まれません。無料プランではファイル添付や利用量などに制限が出る場合があるため、AIでまとまった編集を行う場合は各サービスの有料プランが安心です。

ご購入前にご確認ください

・Node.jsやnpmの操作、サーバーへのアップロードが必要です。完全なノーコード商品ではありません。

・SORA VEIL SERUM、画像内の表記、成分、価格、口コミは架空のデモです。

・実際に公開する場合は、商品情報、画像、リンク、価格、成分表示、法令表示を必ずご自身の内容へ差し替えてください。

・同梱のサンプル画像や動画をそのまま商用利用できるとは限りません。公開前にASSET-LICENSES.mdを確認し、必要に応じてご自身で用意した素材へ差し替えてください。

・デモの購入ボタンは実際の決済を行いません。販売時は購入先URLや決済サービスへ接続してください。

・決済、問い合わせフォームのバックエンド、サーバー契約、ドメイン取得、公開代行は含まれません。

利用条件

1購入につき、購入者自身、または購入者が制作を依頼された1つのWebサイトで利用できます。

完成後のWebサイトは商用利用できますが、テンプレート本体、ソースコード、画像、動画、マニュアルの再配布・再販売は禁止です。

詳しい条件は、同梱のLICENSE.mdをご確認ください。

サポート範囲

同梱ファイルとガイドの不備に関する質問を対象とします。

個別のデザイン変更、文章制作、画像制作、AIへの依頼代行、サーバー設定、公開代行、環境固有の不具合、公開後の保守はサポート対象外です。