スクール業向けLPのスマホ最適化・再構築事例

AIスクールの新店舗開校に伴い、既存LPをベースとしたスマートフォン向けページの再設計をご依頼いただきました。

PC向けに構築されていた既存LPの世界観は維持しながら、スマホ閲覧時の導線最適化と情報整理を目的に構造を再構築。

今後の店舗展開にも対応できるテンプレート設計として実装しています。

既存LPはPC閲覧を前提とした構成となっており、スマートフォンで閲覧した際に以下のような課題が見受けられました。

・情報量が多く、重要な訴求が埋もれやすい
・セクション構造が縦長画面に最適化されていない
・CTAまでの距離が長く、行動導線が弱い

また、新店舗OPEN情報を追加する必要があったため、単なる情報追加ではなく、全体構造の整理と再設計が求められるプロジェクトでした。

本案件では、既存LPのブランドイメージやデザインテイストは維持しながら、スマートフォンファーストの導線へ再構築を行いました。

設計において重視したのは、以下の3点です。

・情報の優先順位の再整理
・スクロール前提での構造最適化
・CTA導線の再設計

PCデザインを単純に縮小するのではなく、「スマホで読む体験」として再構成することを目的としています。

既存のTOPビジュアルをベースに文言を再調整。
公式アンバサダーが視線を引く構成とし、第一印象で価値が伝わる設計にしています。

情報をそのまま流用するのではなく、スマホ画面での可読性を優先し、情報の順序とボリュームを再編成しました。

行動導線が分断されないよう、スクロール中も意識に残る位置にCTAを再配置。
行動までの距離を短縮する設計としています。

今後の店舗増加を想定し、WordPress×Elementorでテンプレート化。
文言や画像の差し替えにより、他店舗展開にも対応できる構造で構築しています。

公開環境への移行時にはサーバー設定に起因する制限が発生しましたが、関係者と連携し環境を再調整のうえ、無事公開へ至りました。

スマートフォン閲覧時の視認性と導線が整理され、
情報理解から行動までの流れがスムーズな構造へ改善しました。

Photoshop/WordPress/Elementor

関連投稿