【練習】ランディングページ

■架空サイトのテーマ

【業種】

• オンライン英会話スクール

【目的】

• スクールの認知をより向上させ、更に会員数を増やしたい → 無料体験の予約増 → 新規会員の増加

【ターゲット】

• 20代以上の大人世代を中心に、会社終わりや休日に学びたい会社員層、子供が不在の日中に学びたい主婦層など
• 対面式ではなくオンライン講義なので、場所に左右されず学びたい方

【内容】

• ヘッダー、Mv、スクールについて、特徴、受講者の声、講師の紹介、コースの紹介、料金プラン、よくある質問、CTAボタン、フッター

■情報

【ペルソナ】

• 30代男性会社員。平日昼間は仕事で忙しく、夜もスクールに通うのは難しいため、場所を問わないオンラインスクールを探している

【ビジュアルデザイン】

［コンセプト］

• 大人向けを感じる高級感、清潔感
• 敷居を低くする落ち着き、安心感
• 挑戦への心が躍るワクワク感

【配色】

• アクセントカラーにはスクールのイメージカラーであるレッド系（#D0142C）を使い、スクールの雰囲気を出しつつ活動的な印象を出した。ベースには薄めのグレー系（#f2f2f2 ）を用いることで落ち着きを出し、少しの高級感を与えた。メインカラーにはホワイト系（#ffffff）を使用し、清潔感を出した

【フォント】

• 幾何学的な特徴を活かしつつ、高級さを感じるスタイリッシュさが出せる「Josefin Sans」を欧文フォントとして使用した。日本語フォントは「Noto Sans Japanese」を使用、いい意味で特徴がなくおおらかな印象を与え、落ち着きを感じさせる

■実装内容

【cssにて実装】

• スクロールに追従してヘッダーを固定させた

【jQuery/JavaScript にて実装】

• ナビゲーションメニューをハンバーガーに収納しました
• ナビゲーションメニューにスムーススクロールの設定
• よくある質問をアコーディオンメニューで作成した
• 一定量のスクロールで表示と非表示に対応したページトップボタンを作成しました

■ポイント

【ヘッダー】

• サイト内回遊率を高めたかったのでヘッダーを上部に固定させた

• ナビゲーションメニューが長くなることの煩わしさを懸念し、ハンバーガーメニューで省スペース化させた

【ファーストビュー】

• メインビジュアルには女性が屋外でオンライン学習をしている様子の画像を選択し、場所を問わない”オンライン”学習の強み、魅力をイメージさせた
• 無料体験のCTAボタンをメインビジュアル上に表示させた。境界線や矢印で"CTAボタン"であることを認識させ、矢印を右に移動させるホバーアクションを設定

【スクールについて】

• Aboutセクションでスクールについて触れた後、スクールの特徴を簡潔にポイント化させた。読み手の注意をファーストビューで惹きつけ、興味を更に持たせる流れを意識

【スクールの特徴】

• それぞれの特徴をカード型でまとめ、要素の範囲を明確にし、他との区別をハッキリさせるため、カードにドロップシャドウの効果を付けた
• カード背景を内容に応じた写真にすることで文字以外からコンテンツ内容の強調を与え、認識を強めた

【お客様の声】

• 受講者の声、体験談を掲載し、スクールの魅力や特徴を伝え、第三者からの視点を含めることで信憑性を強める
• 年齢、性別、職業を記載し、リアルさをより鮮明にした

【講師の紹介】

• 人気講師を紹介し、実績のある経歴を示すことでスクールの信頼、安心感を強めた

【FAQ】

• FAQの設置で受付の負担軽減を見込み、アコーディオンメニューで作成。限りありスペースに収め、ユーザーが求めている情報を取捨選択できるようにした

【CTAボタン】

• 文言として「無料体験を申し込む」を記載し、ボタンをクリックした後に何が起こるのか、具体的なアクションを説明した
• CTAボタンの領域の背景色を変更、他との差別を図り目立たせることを意識した。ホバーアクションではボタンの背景色と文字色、矢印の色を変更させる

• スクロール途中からページ右下部にCTAボタンを固定させ、常にユーザーの視線に留まらせる