Hero動画付き
1ページLP制作サンプル
オンラインスナックを想定し、ファーストビューにオリジナル動画を組み込んだ1ページLPの制作サンプルです。動画でお店の世界観を伝えながら、YouTube・ラジオ・営業情報・お問い合わせへ自然に誘導できる構成にしています。
LP制作
動画セット
SEO対策
レスポンシブ
Demoサイト
デモを見る
タイプ
デモ制作
想定制作期間
2〜3週間
想定費用
¥150,000
ページ数
1ページ
このLPの構成
今回のデモは、ファーストビューの動画を起点に、店舗の雰囲気や配信内容を伝え、最後にSNS・メールでのお問い合わせへつなげる流れで構成しています。
-
ファーストビュー：オリジナル動画 ループ動画の上に店名・キャッチコピー・導線を重ね、ページを開いた瞬間に世界観が伝わる構成にしています。
-
デザイン：ネオン調の世界観 ピンクとパープルを基調に、店内写真や光の演出を組み合わせ、オンラインスナックらしい雰囲気を表現しました。
-
コンテンツ：配信先をまとめて案内 YouTube・ラジオ・営業情報を1ページに整理し、初めて訪れた人でも活動内容を把握しやすくしています。
-
操作性：スマホ・動画再生に対応 レスポンシブ表示、動画の再生停止、スムーズスクロール、フェード表示などを実装しています。
動画を取り入れたLPの特長
ファーストビューに動画を取り入れることで、文章や静止画だけでは伝えにくい雰囲気や利用イメージを、短時間で直感的に届けやすくなります。動画の編集からWebへの組み込みまでまとめて対応し、スマホでの表示や操作性にも配慮して制作しています。
💡 このデモから分かること
動画とWebページを別々に制作するのではなく、見せ方や文字の配置まで一体で設計できます。動画の雰囲気とLP全体のデザインを揃えやすく、修正や調整の窓口も一本化できます。
想定制作フロー
- ヒアリング（1日）：ターゲット・訴求ポイント・競合分析
- 構成案・ワイヤーフレーム（3日）：Figmaで設計
- 動画制作（3日）：素材選定・編集・書き出し調整
- コーディング（1週間）：HTML/CSS/JS実装
- 調整・修正（3日）：スマホ最適化・SEO対策
使用技術・ツール
- HTML5 / CSS3 / Vanilla JavaScript
- MP4 / HTML5 Video（動画の組み込み）
- レスポンシブデザイン（PC・スマホ対応）
- Google Analytics 4（計測導入対応）