WEBサイト
LP(鍵屋)
- TECH
使用技術 - Design / HTML/CSS / JavaScript / 広告運用 / GitHub
Episode
制作エピソード
鍵屋LP
依頼があり、Google広告運用のための、鍵屋さんのランディングページを作成しました。
デザインとコーディングを行いました。
Google広告を使用して、広告運用も携わっております。
サイトのURLは、広告データに影響する可能性や、依頼主の情報が入っているため非公開とさせていただいております。
ターゲット
鍵のトラブルで困っている20~50代、モバイル端末で検索している人
目的
・元々あったLPのコンバージョン成績が悪いため、リニューアルのご依頼
・緊急を要するトラブルで、他社と比較し、クライアント主の会社に依頼したいと思わせられるようなLPにする
・ページ離脱をさせないようなLPにする
製作期間
サイト作成:3週間
その後もLP修正などの管理を行っている
URL
非公開
制作に関するエピソード
「LPの変更により、契約数が上昇!」
今回は、元々あったLPのリニューアルを目的として作成しました。
リニューアル後より、広告表示、クリック数が増え、CVも 8%から10%に。
クライアント様より、過去最高の契約数を獲得できたとの報告がありました。
現在も、CVを高めるために、評価修正を繰り返しています。
広告運用は、私一人で行っているわけではないため、情報を共有したり、整理したりするのにGitHubを使用しています。
Issuesを使用して連携をとったり、ブランチを切って作業を行うようにしています。
「LP作成は、改良を重ねることが重要!」
自分の中で、初めに完成したLPは未熟で、配信し始めてからが本番というイメージになりました。
最初に作成したサイトは、広告との関連性があっているのか、CV獲得につながるサイトなのか、競合を比較してどのくらいのランクにいるのか、配信しなくてはわからないことだらけです。
CVボタン一つでも緑がいいのか、オレンジがいいのか、なんていうキャッチコピーがいいのか、などなど、改良を重ねていく必要があります。
数値で効果がわかる面白さを感じる反面、修正したことが逆効果なこともあり、難しさを感じています。
自己満足のサイトとは全く違うLP作成。
ヒートマップを使用しながら、今後も改良を進めています。
「ページ表示速度を高めるように試行錯誤」
Google広告でのランディングページの利便性は重要であり、今回は平均より低く、広告ランクが低い状態で、検索しても上位に掲載されない状態だったので、利便性を高められるように試行錯誤を繰り返しました。
ページ速度が重要になるため、画像の圧縮、CSSの圧縮、アナリティクスの読み込みを遅延させるなどを実施し、PageSpeed Insightsを使用した値で、数値が20から80まで上昇させることに成功しました。
「他社のLPの研究」
LP制作が未熟だったので、あらゆる会社のLPの研究を頑張りました。
会社の商品によっては、デザイン、色、素材が変わってくるので、なぜそういうデザインを競合会社はしているのか、考えながら作成する必要があると感じました。
「子ページの追加が大変でPHPを使用」
LPは子ページの追加も大切で、情報量を増やしてCVにつなげられるようにする必要があります。
問題が、子ページが増えるにつれてヘッダーフッターが変化しますが、それの編集が大変だということです。
毎回子ページのヘッダー・フッター部分を修正していると大幅に時間が割かれるとともに、間違いが起こる可能性があります。
そのため、PHPを使用して管理することにしました!
VScodeでPHPが使用できる環境を作成し、ファイルの拡張子を変更して、変更しやすくしました。
「デザインについて」
デザインカンプに、Figma、画像はCanvaを使用しました。
スピード対応を訴求とする、鍵屋さんのようなLPは、ファーストビューに必要な情報をわかりやすく入れることが重要ということで、他社とどこが違うのか、何を一番アピールしたいのか、ユーザーに伝えられるようなデザインにするよう心掛けました。
ヒートマップを使用して、コンテンツの配置などにもこだわっています。
緊急を要するものなので、赤や黄色を使用し、コンバージョンボタンには緑を使用して、CV獲得につなげられるようにしています。