自宅で学ぶ「ランディングページの制作から運用」まで【まとめブログ】

 

昨今の外出自粛にともない、（一部の業種を除いて）対面での接触が物理的に制限され、原則自宅での作業が中心となっている企業様も徐々に増えている状況だと思います。

 

コンバージョンラボでも、3月下旬からリモートワークに切り替え、業務を引き続き行なっていますが、これまで対面でやりとりしていた、打ち合わせやコミュニケーションは、zoomなどのオンライン会議ツールに置き換わり、チャットやメールを利用する頻度が増え、これまでの当たり前だった行動が短期間で変化してきていることを日々実感しています。

 

そして、コミュニケーション自体が今、リアルからオンラインへシフトしています。

 

集客という観点では、多数のユーザーとのコンタクトポイントとなるwebサイトやランディングページも、これまで以上に重要になっている、または今後重要度が高まっていくという会社様もあるのではないでしょうか。

 

今の時期だからこそできることは、次に向けた準備なのかもしれません。改めて、webサイトやランディングページを見直してみる良い機会とも言えます。

 

これからランディングページを用意していこうと考えている方やすでに運用をしていて、次の打ち手や改善施策を考えている方。あるいは、インハウスでLPOをやっているが、作業効率を見直そうと考えている方など、これまでの改善レポート記事の中から、目的別に記事を分類してみました。

 

今後のリモート業務の中で、次に備えた準備の参考にお役立ていただければ幸いです。

 

 

ランディングページの基礎情報編

 

・そもそも、webサイトとランディングページは何が違うの？
・制作はどのような工程・進め方が良いの？
・制作会社に依頼を検討中。価格も違うし、何を基準に選べば良いの？

という方に向けた過去記事まとめになります。

 

 

 

WEBサイトデザインとランディングページデザインの違いを考える
https://conversion-labo.jp/report/lp_design/4685/

 

WEBサイトとランディングページの「役割としての違い」、「デザインとしての違い」について考察しています。

 

特にランディングページをデザインしていく場合の留意点について代表的なポイントをピックアップ。実例を交えて紹介しています。

 

 

 

ランディングページの制作工程でおさえておきたいチェックポイント
https://conversion-labo.jp/report/lp_design/4528/

 

思ったよりも考えるポイントが多いランディングページの制作。

この記事では、LPの制作工程を5つに分類し、戦略設計、情報開発、デザイン開発、コーディング・実装、改善・運用の各フェーズにおける押さえておきたいポイントやチェックすべきポイントについて網羅的にまとめています。

 

 

 

ランディングページ制作における制作費用の考え方
https://conversion-labo.jp/report/lp_design/6296/

 

ランディングページの制作を外注する際に、検討材料の1つとなるのが「制作費用（料金）」。

各社で制作費用が異なるため、一体どの制作会社に頼めばいいのか、選定に悩んだことのある方もいらっしゃるかもしれません。この記事では、ランディングページ制作における費用の考え方について大きく3つのポイントに分けて解説していきます。

 

 

ランディングページ制作のディレクション編

 

・ディレクションを任されたが、何をすれば良いか分からない。
・デザイナーやエンジニアへの指示が上手くできない。
・さらにスキルアップを目指すために何が必要なのかを知っておきたい。
という方に向けた過去記事まとめになります。

 

 

 

ランディングページの制作とLPOにおける、 WEBディレクターの役割とは？
https://conversion-labo.jp/report/analyze/8513/

 

webディレクターは主に何をやっているのか？それは会社によっても様々です。この記事では、主にランディングページ制作/改善運用を担っている現役のディレクターがPlan、Draft、Optimizeの3つの観点から、具体的にどのような実務を行なっているのかを解説しています。
また、体験から得たWEBディレクターに求められる4つのスキルについても紹介しています。

 

 

 

良いランディングページの成否を決める、ワイヤーフレーム設計その2
https://conversion-labo.jp/report/lp_design/6114/

 

ワイヤーフレームの設計はランディングページの重要な骨組みです。
その設計を間違えると、デザインやコーディングがしっかりしても、目指す成果を達成できないページになってしまいます。

この記事では、どのようなポイントに留意してワイヤーフレームを作成すればよいか？ということを、4つのプロセスに沿って現役のディレクターが解説しています。

 

 

 

イメージ通りのデザインを実現するために必要なランディングページのデザインディレクションの5つのポイント
https://conversion-labo.jp/report/lp_design/5663/

 

これなら絶対いいランディングページができる！と思っても、デザイナーからあがってきたデザインが「思っていたものと違う。」という状況に陥ってしまうことは現場ではよく起こりうることです。

そこで、理想のランディングページデザインを実現するために必要なデザインディレクションの5つのポイントを、「デザイン依頼を出す前」「デザイン完成後」に分けて解説しています。

 

 

 

コンバージョン獲得の確度を高めるランディングページの切り口設計
https://conversion-labo.jp/report/lp_design/7026/

 

「良いランディングページ」を目指すために最も重要な工程の一つが「切り口の設計」と言っても過言ではありません。
ランディングページ上で最も強く打ち出す訴求軸を考えるために、4つのポイントに絞って、考え方を紹介しています。

 

 

ランディングページの分析・調査編

 

・この機会に分析をしたいが、どういう手順で進めれば良いの？
・Googleアナリティクスでランディングページを分析する方法が分からない。
・運用中ランディングページの成果がでない。どうすれば良いの？
・他社のランディングページは、どのような観点で調査・分析すれば良いの？
という方に向けた過去記事まとめになります。

 

 

 

ランディングページ解析ツールの特徴と上手な使い分け
https://conversion-labo.jp/report/analyze/8289/

 

目の前のランディングページを分析しよう、改善しようと思っても、ただページを眺めているだけでは問題点は見えてきません。そこで活躍するのが、サイト解析ツールになります。数多く存在するWEB解析ツールの中でも、コンバージョンラボが実際のLPO業務でよく使用する、ランディングページの分析に特に便利なツールをLPOの現場目線で解説しています。

 

 

 

ランディングページ改善（LPO）に不可欠なGoogleアナリティクス分析
https://conversion-labo.jp/report/analyze/7849/

 

Googleアナリティクスはほぼどのサイトでも設置されていますが、活用できていないと悩んでいる企業様は少なくありません。中でもランディングページを分析するといった際にはもう少し踏み込んだ分析が必要となります。
この記事では、Googleアナリティクスの主に必要とされるデータやデータの抽出方法について、アナリストが画面キャプチャを用いて、わかりやすく解説しています。

 

 

 

コンバージョンが上がらない！ そんな時にチェックしておきたいランディングページを起点としたボトルネックの見つけ方_基礎編
https://conversion-labo.jp/report/analyze/8395/

 

運用をスタートしてみたものの、思ったように成果が上がらない。
という事態に出くわすこともあります。コンバージョンに導くうえで、オンライン広告が果たす役割は半分に過ぎず、残りの半分を担い、そして実際の成果を左右するのはランディングページであるとGoogleも見解を示すほどです。この記事では、ランディングページの分析を起点に、どこにボトルネックがありそうか？を見つけるためのポイントについて、3つの視点から図解やキャプチャを交えて解説しています。

 

 

 

ランディングページ制作に欠かせない競合LP調査
https://conversion-labo.jp/report/lp_design/7790/

 

効果的なランディングページを作る上で、自社の商品・サービスの競合となる他社のランディングページを調査することは必要不可欠です。
この記事では、調査する目的や調査の手順や方法、調査情報をどう生かすか？について実際の分析担当者が行なっているプロセスをわかりやすくまとめています。

 

 

ランディングページのデザイン・検証編

 

・ランディングページのデザインを初めて担当する
・レイアウトやデザインの引き出しが少ないと感じている
・仕上がったデザインをどういうポイントで検証すれば良いのか分からない
・デザイナーとして、どの業務領域まで踏み込めば良いのか
という方に向けた過去記事まとめになります。

 

 

 

ランディングページのUIデザインを考える
https://conversion-labo.jp/report/lp_design/4212/

 

webディレクターがまとめた情報をもとに、効果的なデザインをしようとするとどのように情報を配置するべきか？伝えたい情報をしっかり見てもらうための画面設計はどうあるべきか？など、成果につなげるためのユーザーインターフェース（UI）を考えざるをえません。
ここでは頻出する代表的なUIパターンを紹介しながら、デザイン時の注意点について解説しています。

 

 

 

文字数や文字量が多いランディングページのデザインのポイント
https://conversion-labo.jp/report/lp_design/5760/

 

webデザイナーであれば、文字数や要素が明らかに多すぎると感じてもその情報をランディングページ上で表現しなければいけないケースに遭遇することもあるでしょう。
この記事では、ちょっとした工夫で見栄えが良くなったり、ユーザーに読みやすくすることができるデザインのポイントについて、現役のデザイナーが解説しています。

 

 

 

ランディングページの見た目のデザインに差をつける「文字要素」の取り扱い
https://conversion-labo.jp/report/lp_design/7412/

 

文字要素の取り扱いを大切にするWebデザイナーほど良いデザインを作り上げることができます。
この記事では、ランディングぺージデザインにおける気をつけたい文字要素の取り扱いについて、「文字組み」「共通のルール」「文字要素のレイアウト」の観点からデザインのクオリティを高めるための留意点について解説しています。

 

 

 

ちょっと差がつくランディングページのパーツデザイン-その1
https://conversion-labo.jp/report/lp_design/5243/

 

 

ちょっと差がつくランディングページのパーツデザイン-その2
https://conversion-labo.jp/report/lp_design/8066/

 

他社のランディングページよりも、ちょっと差をつけるパーツデザインやレイアウトの一工夫という観点から、少しの工夫で、信頼感を感じさせたり、訴求力を高めるためのデザインについて、サンプルを作成し解説しています。
デザインの作業中に行き詰まった時に、参考にしてもらえると嬉しく思います。

 

 

 

デザイナー必見!ランディングページデザイン品質チェックリスト30
https://conversion-labo.jp/report/lp_design/8187/

 

デザインは作業が終えた後の細かな検証・改良が重要なのは言うまでもありません。
ここでは、ランディングページのデザイン品質を高めるために、どのような観点からチェックを行い、検証、ブラッシュアップしていくべきかについて最終工程のいわゆる「詰めの作業」にフォーカスした記事になります。
記事内では、デザイン品質チェックリストを30の項目に分けて、1つずつサンプルを用いて、解説をしています。
目の前のデザインが何かピンと来ないという場合に、チェックリストにあわせて検証してみるのも良いかもしれません。

 

 

 

BtoBとBtoCでのランディングページデザインの違いと制作ポイントを紐解く
https://conversion-labo.jp/report/lp_design/8360/

 

ビジネス形態によって、ランディングページのデザインテイストも異なります。
この記事では、「デザイン」の観点からBtoBとBtoCにおけるデザインの特徴やデザインにおける注意したいポイントについて現役デザイナーの見解をまとめています。

 

 

 

これからのwebデザイナーのキャリアアップに必要なスキルとノウハウ
https://conversion-labo.jp/report/lp_design/8489/

 

webマーケティングの現場に携わるコンバージョンラボのデザイナーが体感値をもとに、これからのwebデザイナーに必要な知見やスキルについて改めて整理してみました。
デザインスキルをベースに、どのような方向性でスキルを拡張していくべきか？について、考えられる可能性について考察してみました。

 

 

ランディングページのコーディング編

 

・LPのコーディングって主にどんな作業をしているの？
・ランディングページにおけるコーディングの役割は？
・コーディングの実務作業で特に留意すべきポイントは何なのか？
・仕上がったページをどういうポイントで検証すれば良いの？
という方に向けた過去記事まとめになります。

 

 

 

コンバージョンを向上させるコーディングの役割について考える
https://conversion-labo.jp/report/lp_report/4735/

 

ランディングページのクオリティを図式化すると構成×デザイン×コーディング＝品質とコンバージョンラボは考えています。
日常的に、ランディングページのコーディングを担っているフロントエンドエンジニアから、コーディングの役割・重要性についてを「デザインの忠実な再現」「読み込み速度（表示速度）」「運用改善のしやすさ」「OS・ブラウザなどの環境に依存しない確実な表示」の4つの観点から考察しています。

 

 

 

コンバージョンと密接に関係する表示速度の改善方法
https://conversion-labo.jp/report/lp_report/4769/

 

ランディングページは情報量が多く縦長になりがちです。
また訴求力を高めようとすると、画像も多くなってしまうため、どうしても容量が大きくなってしまい、表示速度が遅くなりがちです。
この記事では、ランディングページの表示速度を意識したうえでいかにページの軽量化を図っていくか？という7つの方法について解説しています。

 

 

 

効率よく質の高いLPを開発するフロントエンドテクニック
https://conversion-labo.jp/report/lp_coding/5150/

 

時間は有限。また、仕事には必ず納期があります。
品質を高めるために延々と時間をかけられるわけでもありません。
この記事では、限られた時間の中で高品質なランディングページを開発するために一つ一つの作業を効率化、無駄な作業の省力化という点にフォーカスし、6つの取り組み方を紹介しています。
無駄な作業を省き効率化し、「学び、検証する時間」を確保することもフロントエンドエンジニアにとって価値を生み出す大切な仕事です。

 

 

 

改善・運用のしやすいランディングページのコードとは
https://conversion-labo.jp/report/lp_report/4944/

 

ランディングページは一度作って完成するものではなく、何度も仮説を立て、検証を繰り返し、改善を図りながら育てていくものです。
そのため、ランディングページを構成しているhtml、CSS、JavaScript、PHP、画像などのファイルは頻繁に改善されることを前提に作成されなければなりません。
この記事では、「改善しやすいコードとは何か？」について考察しています。

 

 

 

エンジニア（コーダー）に求められる円滑なワークフローと連携
https://conversion-labo.jp/report/lp_coding/6135/

 

コードが素早く書ければランディングページ開発がすぐ終わるかというと実際はそんなに簡単ではありません。ディレクター、デザイナー、他のエンジニアとの連携などチームワークが求められ、コーディング完了後も、ブラウザチェックや調整作業など、やることは多岐に渡ります。
この記事では、フロントエンドエンジニアの目線で、円滑なワークフローと連携の仕方、コミュニケーションについて掘り下げについて考察しています。

 

 

 

ランディングページの品質チェックのポイント
https://conversion-labo.jp/report/lp_design/6385/

 

制作の仕事はコーディングが完了しても、全て完結したとは言えません。
ここでは、ランディングページ制作の最終工程にあたる確認・品質チェックにフォーカスした記事になります。なかなか見えづらい作業内容ではあるものの、高い品質を保つために必要不可欠な作業でもあります。
ここでは実際にどのような品質チェックを行っているのか？について実際の確認作業をベースに紹介しています。

 

 

ランディングページ最適化・運用改善編

 

・ランディングページ最適化（LPO）とは何なのか？
・どのような手順でA/Bテストをすれば良いのか？
・ヒートマップ分析を使って、どのように分析・改善すれば良いのか？
という方に向けた過去記事まとめになります。

 

 

 

Webマーケティングで注目が高まる「LPO」とは？
https://conversion-labo.jp/report/lp_design/7575/

 

手間暇かけて制作したランディングページも、実際に運用してみないとその効果は測定できません。
仮に成果が出ないとなった場合に、「このページは効果がなかった。」と切り捨て成果が出るまでランディングページを何回も制作するのも工数や費用を考えると、現実的ではありません。ここではリリースしたランディングページの実際の成果を受け止めた上で、成果を向上させるためのアプローチ＝ランディングページを育てるという考え方についてまとめています。

 

 

 

ランディングページ改善運用の4つのポイント
https://conversion-labo.jp/report/lp_design/5569/

 

コンバージョン率向上を目的に、継続的な改善が必要なランディングページ。
この記事では、「改善運用のポイント」を4つの項目に分けて整理しています。
見極めの難しい改善運用のタイミングや改善に活用するツール、改善に必要な体制などについて、概要をまとめています。

 

 

 

ランディングページのコンバージョン改善に必須のA/Bテストの基礎と実装までの手順
https://conversion-labo.jp/report/analyze/8108/

 

ランディングページの改善運用に不可欠なA/Bテストについて解説しています。
なぜ、A/Bテストが必要なのか？、実際にA/Bテストを始めるには何をすれば良いのか？効果的なA/Bテストを継続するために、どのような進め方が大切なのか？具体的なA/Bテストの進行手順などについて、重要なポイントを解説しています。

 

 

 

ヒートマップツールを用いたランディングページの分析・改善のポイント
https://conversion-labo.jp/report/lp_design/6508/

 

ランディングページは縦長であるため、構成要素が一般的なサイトよりも多く、どこがボトルネックとなっているのか、問題点の発掘が難しい傾向にあります。

そこで大いに活躍するのが、ヒートマップ分析ツールです。
この記事ではヒートマップ分析を用いた、ランディングページの改善点の抽出方法についてスクロール率を軸とした改善、注目度を軸とした改善、クリック/タップを軸とした改善の3つに分けて具体的な方法を解説しています。

 

 

まとめ

 

いろんな過去の記事を紹介させていただきましたが、「これさえやっておけば100%効果が出る」といった裏技は存在しません。

 

ランディングページやwebサイトの分析・改善は、ページを深く分析し、コンバージョンを妨げている原因を1つ1つ明確にし、最適な解決策を実践することが、効果改善の唯一の方法なのだと思います。

 

今回のブログでは、制作から運用に到るまでにこれまで書いてきた記事の中で、厳選した記事をご紹介しました。

 

ぜひご参考いただければと思います。