Facebook LP改善&コーディング|webデザインスクール
Logo

LP改善&コーディング|webデザインスクール

クレジット
Avatar
WEBデザイナー
コーダー
LP改善&コーディング|webデザインスクール-1
シェア

LP改善&コーディング|webデザインスクール

参考サイト→ https://hizumippc.github.io/coding202606/ Famm様より、LPの改善をお任せいただきました。 スマホサイズのレスポンシブ対応は対象外とのお話でしたが、 PC・スマホの中間サイズで閲覧された際にレイアウトが崩れることを避けるため、 タブレットサイズのレスポンシブも追加で実装しています。 元LPの課題点を、以下の視点で調整をしております。 ・セクションの順序を  「悩み→解決策→実績→サポート→料金→比較→受講生の声→FAQ→CTA」  の流れに整理し、ユーザーが自然に申し込みへ向かう導線を意識。 ・横幅の最大値を指定することで、  PC等閲覧時に画像と文字サイズがチグハグになる現象を改善。 ・情報過多であったことから一部情報を削除。  情報量の多い箇所をアコーディオン形式にし、ページ全体の見通しを改善。 ・画像で表示されていたテキストをHTML/CSSで実装し、  検索エンジンからの評価も意識。 ・画面下部に追従するCTAボタンを追加し、  どのセクションを読んでいても申し込みに進みやすい設計に変更。 ・スクロール時のフェードインアニメーションを追加。
クレジット
Avatar
WEBデザイナー
コーダー
シェア
まちゃ|PPCの他の作品
foriio

あなたのforiioを無料で作成

fori.io/
LP改善&コーディング|webデザインスクール-1

LP改善&コーディング|webデザインスクール

参考サイト→ https://hizumippc.github.io/coding202606/ Famm様より、LPの改善をお任せいただきました。 スマホサイズのレスポンシブ対応は対象外とのお話でしたが、 PC・スマホの中間サイズで閲覧された際にレイアウトが崩れることを避けるため、 タブレットサイズのレスポンシブも追加で実装しています。 元LPの課題点を、以下の視点で調整をしております。 ・セクションの順序を  「悩み→解決策→実績→サポート→料金→比較→受講生の声→FAQ→CTA」  の流れに整理し、ユーザーが自然に申し込みへ向かう導線を意識。 ・横幅の最大値を指定することで、  PC等閲覧時に画像と文字サイズがチグハグになる現象を改善。 ・情報過多であったことから一部情報を削除。  情報量の多い箇所をアコーディオン形式にし、ページ全体の見通しを改善。 ・画像で表示されていたテキストをHTML/CSSで実装し、  検索エンジンからの評価も意識。 ・画面下部に追従するCTAボタンを追加し、  どのセクションを読んでいても申し込みに進みやすい設計に変更。 ・スクロール時のフェードインアニメーションを追加。
クレジット
Avatar
WEBデザイナー
コーダー
シェア
まちゃ|PPCの他の作品
foriio

あなたのforiioを無料で作成

fori.io/