2021年3月21日はじめてのランディングページ(LP)!基礎知識や注意点を学ぼう!ランディングページとは、Web広告や検索結果をクリックした際に到着する最初のページのことです。このように感じている方のために、この記事ではランディングページの基礎知識やメリット・デメリット、制作上の注意点をご紹介します。No.1のCodeCampが運営するプログラミング未経験の方のための学習メディアですCodeCampとは?(受講生体験記)「エンジニアは女性のキャリアとして魅力的」未経験からの転職体験記リモートワーク×多拠点居住の新しい生き方を実現する。Web広告や検索結果をクリックした際、最初に到着したページをランディングページといいます。実はランディングページには広い意味(広義)でのランディングページ、狭い意味(狭義)でのランディングページがあります。最初のうちは勘違いしやすいため、まずは2つの違いを押さえておきましょう。広義のランディングページとは、ユーザーが最初にアクセスしたページのことであり、英語のland(着地する)からこう呼ばれています。広義のランディングページはサイトのトップページとは限らず、Google検索の結果から下層ページに直接アクセスがあればそのページがランディングページです。Googleアナリティクスで計測されているランディングページは、こちらを指しています。狭義のランディングページとは、商品やサービスのアピールに特化したWebページのことをいいます。Web広告や検索結果から流入してきたユーザーに商品の魅力を伝え、商品の注文や申し込み、問い合わせといった成約に直接結びつけるためのページです。あなたも新発売の商品の特設ページを見ているうちに、つい購入ボタンを押してしまったという体験があるのではないでしょうか。ランディングページ次第で売り上げや顧客を増やせるため、とても重要なページになります。公開後もページ内容や紐づけるWeb広告の改善を繰り返して運用していくことから、マーケティング施策としても扱われることの多いページです。この記事ではこれ以降、狭義のランディングページのことをランディングページと表記して解説していきます。一般的なランディングページには、3つの大きな特徴があります。それぞれ詳しくご説明します。縦長ページランディングページは、商品やサービスを売るためのセールストークを1ページの中で表現します。ターゲットの悩みに深く共感し、その悩みの解決策としておすすめする商品のメリットを紹介して、商品の信頼性を伝えるといったようなストーリー仕立ての構成です。画像を多く利用することで最後まで飽きさせない工夫をし、成約前にページから離れないようにしています。その結果、情報量が多くなり縦に長くスクロール量の多いページになるのです。リンクが少ないランディングページは通常のホームページと違い、商品の注文や申し込みといったゴールを1つに絞ります。ページ内のコンテンツで成約ページ(問合せフォーム)まで誘導して、アクションを起こしてもらうのが最大の目的です。記事の途中で気になる記事リンクが入っていると、ついそちらに興味がうつってしまいます。ユーザーが興味を失って離脱することを防ぐため、成約ページ以外への導線をなるべく減らして構成しているのです。目を引く世界観や大胆なレイアウト、つい見てしまうアニメーションといったデザインを実現するのがランディングページです。Appleの新商品のページをイメージしてみてください。ランディングページは通常のホームページと違い、グローバルナビゲーションやサイドメニューを設置する必要もなく、デザインに制限がありません。そのためチラシやCM広告のように視覚的にインパクトが大きく、自由度の高いデザインを作りやすいのです。商品やサービスの訴求力を高められるランディングページですが、いいことばかりではありません。メリット・デメリットを理解して作成しましょう。ランディングページは1ページで商品の訴求を完結するため、ユーザーは他のページまで情報を探し回る必要がありません。1ページで商品に関する情報がすべて手に入るように作られています。余分な情報を省いて、必要な情報だけで構成することが可能です。そのため、ユーザーの「この商品を買いたい」という気持ちを途切らせることなく申し込みや問い合わせに結びつけられます。セールストークには、効果的に気持ちを盛り上げる流れがあります。通販番組をイメージしてもらうとわかりやすいかもしれません。いった順番で語ることにより、ユーザーの気持ちを盛り上げて購入へとつなげていきます。この順番ではなくランダムに読まれた場合、気持ちが盛り上がらず商品の魅力が伝わりにくくなるかもしれません。通常のホームページでは一定のレイアウトルールが存在し、セールスに理想的な順番で情報を提供できるとは限りません。ランディングページなら制作側が届けたい理想の順番で情報を提供できます。ランディングページは広告によってリンク先を変更し、広告内容に合わせた訴求が可能です。「高校生のお子さまをもつお父さんへ」というWeb広告からのリンクでは、高校生の子どもをもつ父親向けのランディングページを表示します。「高校生のお子さまをもつお母さんへ」というWeb広告からは、キャッチコピーや文章を母親向けに変更したランディングページでの訴求が可能です。検索結果やWeb広告、SNSといった流入経路ごとにメッセージを入れたり、文章を入れ替えたりすることもできます。いった成果を計測しやすいため、分析・改善に非常に役立ちます。ランディングページは、1ページだけだからといって安く制作できるわけではありません。1ページの中に成約率を上げるための導線や効果的な見せ方、高いデザイン性といったさまざまな要素が必要になります。成果を出せるランディングページを作成するためには、制作者の経験値や知識が必要になり、安価での作成はできません。スマホやパソコンといった端末による表示最適化をどこまで対応するかによって、さらに費用が高くなる可能性もあります。ランディングページはインパクトのあるデザインで視覚的に情報を伝えるため、画像で文字を表現することが多くあります。Google検索のクローラーが画像から読み取れるのは、alt属性で指定した代替えテキストのみです。サイト内にテキスト量が極端に少ないと「このサイトは情報量が少なくて有益ではないサイトだな」とGoogleに判断されてしまう可能性があります。画像や動画を多用するため、データ量が多くなりページの表示時間が遅くなるとSEO面では不利です。Web広告やSNSからの流入で集客する場合はあまり問題にならないでしょう。検索結果で上位表示したい場合は適切にテキストを配置し、画像データ量を軽減する設計が必要になります。運用方法や目的に合わせた設計をしましょう。ランディングページはコンテンツの準備のために商品理解の深い人物からのヒアリングや文章作成、関係者やユーザーのインタビューが必要になることもあります。情報を並べて掲載するだけではなく、商品の魅力を引き立て、ユーザーの気持ちを盛り上げて成約につなげるストーリーを考えなければいけません。どの広告媒体からの集客にするのか、集客の導線はどうするのかといった面も大切です。効果の出るランディングページを作成するためには検討・検証すべき内容が多いため、素早く作って公開するのはむずかしくなります。ランディングページを作成して商品訴求をする際に、注意したい点が3つあります。どれも大切なことですので押さえておきましょう。スマホの所有率は年々上がり、スマホで気軽に買い物を楽しむ生活が浸透してきました。そのためランディングページを作成する際には、スマホで情報を見やすく、成約につながるボタンをタップしやすいレイアウトやデザインが必須です。サービスやターゲット層によって、パソコンでの閲覧を重視することもあるかもしれません。スマホでの見やすさ・使いやすさを無視したランディングページでは、ユーザーのストレスとなり成約のチャンスを失ってしまいます。どのようにスマホやパソコンで表示するのか、設計の時点でしっかりと検討しましょう。ランディングページでは商品を魅力的に伝えようとするあまり、法律違反の表現をしてしまっているページも少なくありません。このような商品の場合、薬機法に沿った表現をしなければいけません。サプリメント紹介のページで「このサプリを飲めば痩せる!」というキャッチコピーを使っているとします。これは医薬品的な効能効果といえないため薬機法に違反しており、表現を変更する必要があります。「日本で一番お得!」といった表現は誇大広告とみなされ、景品表示法に違反する可能性があります。その他にも著作権や肖像権、商標権を侵害していないかどうかもチェックしましょう。法律に違反したページは広告の審査が通りませんので、早い段階で表現方法を細かくチェックしましょう。ランディングページは公開してからの検証と改善が大切です。公開後に一定のアクセスデータが集まってから、流入経路や成約率といった様々なデータを検証します。検証から改善点を見つけ出し、それを元にランディングページの修正や流入経路であるWeb広告の調整をしましょう。一定期間のデータを集め、改善点がどう影響したのかを再度検証し、また改善点を洗い出します。して繰り返し検証と改善を繰り返し、より効果の出るページに最適化していくのです。WebデザインコースならWebデザイナーになるのに必要なスキルが身につく当メディアを運営しているCodeCampでは、マンツーマンで現役エンジニアから学べるWEBデザインコースを提供しています。ランディングページは目を引くデザインで商品の魅力を伝えられます。ターゲットやゴールを見失わず、最初から最後まで訴求内容を脱線させない設計が重要です。ランディングページはユーザーの満足度が成約率につながります。2022年版】社会人でも通いやすいプログラミング教室5選|選び方の基準も解説プログラミング学習プログラミングスクール・サービス塾講師からエンジニアへ26才で転職。先生の支えがあって成長できました。Ltd.CodeCampusテクノロジーの「学ぶ・働く」を知るメディアプログラミングWEBデザインテクノロジーアプリ開発ビジネススキルキャリア学習ガイドtwitterLINE。