AIスクールの新店舗開校に伴い、既存LPをベースとしたスマートフォン向けページの再設計をご依頼いただきました。
PC向けに構築されていた既存LPの世界観は維持しながら、スマホ閲覧時の導線最適化と情報整理を目的に構造を再構築。
今後の店舗展開にも対応できるテンプレート設計として実装しています。
◆背景と課題整理
既存LPはPC閲覧を前提とした構成となっており、スマートフォンで閲覧した際に以下のような課題が見受けられました。
・情報量が多く、重要な訴求が埋もれやすい
・セクション構造が縦長画面に最適化されていない
・CTAまでの距離が長く、行動導線が弱い
また、新店舗OPEN情報を追加する必要があったため、単なる情報追加ではなく、全体構造の整理と再設計が求められるプロジェクトでした。
◆再構築の設計方針
本案件では、既存LPのブランドイメージやデザインテイストは維持しながら、スマートフォンファーストの導線へ再構築を行いました。
設計において重視したのは、以下の3点です。
・情報の優先順位の再整理
・スクロール前提での構造最適化
・CTA導線の再設計
PCデザインを単純に縮小するのではなく、「スマホで読む体験」として再構成することを目的としています。
◆情報設計のポイント
ファーストビューの再構成
既存のTOPビジュアルをベースに文言を再調整。
公式アンバサダーが視線を引く構成とし、第一印象で価値が伝わる設計にしています。
セクション構造の整理
情報をそのまま流用するのではなく、スマホ画面での可読性を優先し、情報の順序とボリュームを再編成しました。
CTA導線の最適化
行動導線が分断されないよう、スクロール中も意識に残る位置にCTAを再配置。
行動までの距離を短縮する設計としています。
◆実装・展開設計
今後の店舗増加を想定し、WordPress×Elementorでテンプレート化。
文言や画像の差し替えにより、他店舗展開にも対応できる構造で構築しています。
公開環境への移行時にはサーバー設定に起因する制限が発生しましたが、関係者と連携し環境を再調整のうえ、無事公開へ至りました。
◆成果と変化
スマートフォン閲覧時の視認性と導線が整理され、
情報理解から行動までの流れがスムーズな構造へ改善しました。
◇使用ツール
Photoshop/WordPress/Elementor
制作についてのお問い合わせ
