「VideoEdit Academy」動画編集スクール LP

【制作背景と狙い】

本サイトは、動画編集スクール「VideoEdit Academy」のランディングページ（LP）です。
「30日で動画編集スキルを習得」という明確な訴求を軸に、
受講検討者が必要な情報を短時間で理解し、行動（体験申し込み）までスムーズに到達できる構成を意識しました。

ターゲットは、

• 動画編集を副業・キャリアアップとして始めたい個人
• 効率的に短期間でスキルを習得したい社会人
• 初めて動画編集を学ぶ初心者層

短期間で成果が出るスクールの魅力を、視覚的にも説得力を持たせるデザインで表現しています。

【解決したい課題とデザインの工夫】

① 情報の信頼性と学習効果をわかりやすく伝えたい

▶︎課題

動画編集スクールのLPでは「本当に習得できるのか？」という不安を持つ人が多い。
その不安を払拭し、学習効果を信頼感を持って提示する必要がある。

▶︎工夫

• ヒーローエリアで「30日でYouTube案件が取れる」と明確に訴求
• 使用ツール（Premiere Pro / After Effects）の表示でプロ感を演出
• 「4つの理由」セクションで学習効果とサポート体制を具体的に説明

② 受講後の未来像をイメージさせ、行動を促す

▶︎課題

LPはゴール（申込み）までの導線が重要。
受講後のメリットを具体的に提示し、モチベーションを高める必要がある。

▶︎工夫

• 実際のカリキュラムを週ごとに分けて掲載し、成長過程を視覚化
• 「受講生の声」でリアルな成功体験を掲載し、共感を喚起
• 主要CTA（申込みボタン）を各重要セクション後に配置

③ 初めての訪問者でも迷わず情報にたどり着けるUI設計

▶︎課題

情報量が多いLPでは、必要な情報を探すのに時間がかかると離脱率が上がる。

▶︎工夫

• セクションごとに背景色を切り替え、視覚的に情報を区切る
• FAQをアコーディオン形式にし、必要なときだけ展開できる設計
• ヘッダーを固定し、いつでも申込みや問い合わせが可能

④ モバイルユーザーを第一に考えた快適な閲覧設計

▶︎課題

LPの閲覧者の大半はスマホユーザー。PCと同等の快適さが必須。

▶︎工夫

• レスポンシブ対応（ブレイクポイント設定・余白調整）
• ハンバーガーメニューを実装し、操作しやすいナビゲーションに
• フォーム入力エリアのタップしやすさ・視認性を改善

【技術面のポイント】

▶︎HTML + CSS + jQuery による静的LP構築

• HTMLはセマンティックタグ（<section>、<header>、<nav>、<main> 等）を使用し、SEOやアクセシビリティに配慮
• aria-属性やrole属性を適宜設定してスクリーンリーダー対応

▶︎レスポンシブデザイン

• スマホ・タブレット・PCの各画面に合わせて、余白・フォントサイズ・レイアウトを段階的に調整。
• ヘッダーはハンバーガーメニューを実装し、モバイル操作性を確保
• フォームやボタンはタップしやすい領域を確保

▶︎ナビゲーションとUI設計

• ハンバーガーメニュー＋マスク背景でモーダル風の開閉演出
• スクロール位置に関わらずCTAへアクセスできるよう、複数箇所に申込みボタン配置
• セクションごとの背景色切り替えで視認性を向上

▶︎アニメーション実装（jQuery）

• フェードインやスムーススクロールで自然な動きを実現
• FAQセクションはアコーディオン形式で、初期状態は閉じた状態から必要な質問だけ展開

▶︎フォームのユーザビリティ向上

• 必須項目の明示とrequired属性による入力チェック
• フォーム構造をシンプルにし、離脱率低下を狙う
• 送信ボタンとチェックボックスの間隔調整で誤操作防止

▶︎CTA設計

• ページ上部（ヒーロー）、中間（特徴説明後）、下部（フッター直前）にCTAを配置し、スクロール位置ごとに行動を促す
• ボタンカラーはアクセントカラーで統一し、視線誘導を意識

▶︎CSS設計

• BEM命名規則で保守性・再利用性を高めたクラス構造
• RESSリセットCSSでブラウザ差異を抑制し、統一感ある表示を実現

【ひとこと】

学習者が安心して行動できるLP」を目指し、信頼感・わかりやすさ・行動のしやすさに特にこだわって制作しました。