見落とし注意！LPが完成したときにチェックすべき10のポイント

新しいLP（ランディングページ）を制作し、いざ広告で配信！というときに、こんな冷や汗をかいたことはありませんか？

誤字脱字を見落としていた
一部のボタンやリンクが動作しない
タグが正しく設定されておらず初動の効果測定ができなかった

これらのミスの原因は、制作の過程で何度も確認しているうちに「見慣れてしまう」ことにあります。せっかく時間をかけて作ったLPだからこそ、完璧な状態でユーザーに届けたいですよね。

そこでおすすめなのが「チェックリスト化」です。本記事では、LP完成時に確認すべきポイントと具体的な確認方法を解説します。

①誤字脱字・表記ゆれがないか
②リンクが正しく設定されているか
③画像が正しく表示・使用されているか
④PC・スマホの表示崩れはないか
⑤ページの表示速度は基準を満たしているか
⑥フォーム送信や追従ボタンなどが正しく動作するか
⑦計測タグが埋め込まれているか＆動作するか
⑧OGPは設定されているか
⑨タイトルタグは設定されているか
⑩ファビコンは設定されているか
「画竜点睛を欠く」ことがないようにチェックをしよう

①誤字脱字・表記ゆれがないか

誤字脱字や表記ゆれは些細なミスに見えても、読者に「ちゃんとチェックしない会社なのかな」と不信感を与える可能性があるため、丁寧に確認しましょう。

誤字脱字を確認するとき、特に注意が必要なのが「タイポセグミリア現象」です。

タイポセグミリア現象とは、単語の最初と最後の文字が正しければ、間の文字順が違っていても人間は問題なく読んでしまう現象のことです。

この現象を防ぐために、次の方法を試してみましょう。

文節ごとに区切って読む
音読する
指やペンで文字をなぞりながらチェック

誤字脱字チェックツールもおすすめですが、ツールでは対応しきれない「画像内の文字」や「文脈の違和感」があるケースもあります。必ず人の目でもチェックしましょう。

同じ単語や言葉でも、ページ内で表記が異なると読者に違和感を与える原因になります。

固有名詞の誤字・表記ゆれ（例：「渡辺」と「渡邉」、「iPhone」と「アイフォン」）
日付や価格の表記ゆれ（例：「2023年12月20日」と「2023/12/20」）
表現の揺れ（例：「ください」と「下さい」）

②リンクが正しく設定されているか

リンクのミスは、せっかくのLPの効果を損なう原因になります。

確認すべきリンクは、たとえば以下のようなものです。

CTA（Call To Action）
プライバシーポリシー
サイトロゴに設定されたリンク（サイトTOPに飛ばしたいときなど）
フッターに配置された外部リンクや内部リンク

確認する際は以下に気を付けましょう。

リンク先が正しいか：各ボタンを実際にクリックして、意図したページに遷移するか確認
どのデバイスでも正しく動作するか：PCとスマホのURLが分かれている場合など、それぞれ正しいページに遷移するか確認

③画像が正しく表示・使用されているか

画像が正しく表示されないまま公開されてしまうと、LPの印象が大きく損なわれます。

画像が正しく表示されているか

画像をアップロードしているのに表示されないときは、HTMLでのリンク指定ミスが原因であることが多いです。このような場合はコーディング担当者に依頼し、リンクが正しく設定されているかを確認しましょう。

ウォーターマーク付き画像を使用していないか

LPのイメージをつくるときに仮の素材として配置していた画像を、そのまま本番公開時に使ってしまうケースがあります。これは不正利用とみなされ、大きな問題になりかねません。

必ず正式に購入した素材やライセンスを取得済みの画像に差し替えましょう。

alt属性は記載しているか

alt属性とは、画像が何らかの理由で表示されないときに代わりに表示されるテキスト情報です。

視覚に障害があるユーザーがスクリーンリーダーで内容を読み上げる際にも使用されるため、アクセシビリティ向上のために非常に重要な要素です。また、Google画像検索の評価指標の一部としても扱われており、SEO観点でも有効です。

商品画像やコンテンツの主旨を補う画像には、簡潔かつ内容を的確に表すテキストを入れましょう。一方で、通常の装飾画像（例：背景の矢印や装飾用アイコンなど）には alt="" と空で設定し、スクリーンリーダーで読み上げられないようにするのが推奨されます。

PCブラウザのデベロッパーツール（検証モード）を使って、画像の内容に沿った情報が設定されているか確認しましょう。

④PC・スマホの表示崩れはないか

現在、多くのウェブページはレスポンシブデザインを採用しており、同じURLでもデバイスに応じて表示を切り替えるのが一般的です。しかし、コードの指定方法によっては表示が崩れてしまうことがあります。

ページをPC版とスマホ版それぞれで表示し、以下のような表示崩れがないかをチェックしましょう。

スマホ版の横幅が画面内におさまっていない
PC版のフォントサイズが適用されていて、スマホでは文字が小さすぎる
PC版で文字がスマホサイズになり、大きすぎる

表示崩れがあると、ユーザーは読みにくい・使いにくいと感じ、離脱の原因になります。

モバイル版の見え方は、PCブラウザのデベロッパーツール（検証モード）を使うと手軽に確認できます。しかし、検証モードでは問題なく表示されていても、実際のスマホで見たら表示が崩れていることがあるため、注意が必要です。たとえば、iOSやAndroid独自のブラウザ仕様、フォントの違い、スクロール時の挙動などが原因で、検証モードでは気づけない表示崩れが発生することがあります。

最終確認ではユーザーの利用状況に近い環境で見え方をチェックしましょう。

⑤ページの表示速度は基準を満たしているか

表示速度が遅いページはユーザーの離脱率を高め、プロモーションの成果にも悪影響を与えることがあります。

ページの表示速度を計る方法としては、Googleが提供する無料ツール「PageSpeed Insights」を使うのがオススメです。

PageSpeed Insightsの採点方式は「100点満点」でなく「正規分布」、つまり偏差値のような形で計算されています。またスコアの測定は海外で行われているため、日本のサイトは点数が低くなる傾向があります。まずは公式サイトで目安としている「50点」を目指しましょう。

点数の改善には「画像を圧縮する」、「不要なデータの削除」、「データの遅延読み込みをさせる」といった方法があります。具体的な項目の見方と、速度の改善方法については以下の記事をご参照ください。

PageSpeed Insightsの見方を徹底解説！2つの評価方法の違いとは

Webページの表示速度を改善するには？PageSpeed Insightsでよく提案される改善項目と対応方法を解説

⑥フォーム送信や追従ボタンなどが正しく動作するか

フォームの送信や、カルーセル、追従ボタンなどページ内の処理が意図したとおりに動作しているかを確認しましょう。確認する際は必ずPC、スマホそれぞれ実機で確認を行います。

フォームのテストをする場合は事前にクライアントや関連部署に共有し、申し込み名に「テスト」と入れるなど配慮しましょう。

⑦計測タグが埋め込まれているか＆動作するか

せっかく広告用のLPを作っても、タグが埋まっていなければ効果測定ができません。

埋め込むタグの例

GA4など各種アクセス解析ツールの計測タグ
各広告媒体の計測タグ
Googleタグマネージャー（以下、GTM）のコンテナタグ　など

必要なタグがきちんと埋め込まれているかどうかは、ブラウザの検証モードを使って確認できます。

＜Chromeのデベロッパーツールを用いた確認方法＞

Webページ上で右クリックをして「検証」を選択
Ctrl + F（Macは Cmd + F）で検索窓を開き、「Google Tag Manager」「Meta Pixel」「gtag.js」などのキーワードを入力
「gtag.js」「fbq」「GTM-XXXXXX」などのタグが埋まっているか確認

タグの埋め込みを確認したら次は「タグが正しく動作するか」を確認します。

コンバージョンタグの動作確認の方法は、大きく分けて下記の2種類です。

（GTMを使用している場合）GTMのプレビューモードで確認する
各媒体が提供するツールやブラウザのデベロッパーツールで確認する

GTMでの確認方法はこちらをご参照ください。

Googleタグマネージャー（GTM）「プレビューモード」の使い方の基本～タグ発火を本番反映前に確認しよう～

各媒体が提供するツールやブラウザのデベロッパーツールでの確認方法はこちらをご参照ください。

タグの実行状況を簡単にチェックできる、Chrome拡張機能・デベロッパーツールの使い方

⑧OGPは設定されているか

OGPとは、SNSなどでページをシェアした際に表示される情報をコントロールする仕組みのことです。

「LPは広告で配信するためのものだから、別にOGPを設定しなくても問題はない」と思っていませんか？

ページを公開している以上、ユーザーが他の人に共有しないとも限りません。XやLINEなどの外部サイトにリンクを投稿したときの見え方をコントロールするためにも、OGPはきちんと設定しておく方がよいでしょう。

記載されているかどうかは、デベロッパーツールを使って確認できます。

Webページ上で右クリックをして「検証」を選択
Ctrl + F（Macは Cmd + F）で検索窓を開き、「meta」を入力
metaタグ内のテキストを確認

OGPをmetaタグで設定する例はこちらです。

<meta property="og:title" content="ページのタイトル">
OGPとして表示されます。

<meta property="og:type" content="ページの種類">
「website」（トップページ）、「article」（記事）、「product」（商品ページ）など、ページの性質に応じて適切な型を指定しましょう。

<meta property="og:url" content="ページのURL">
OGPに掲載したいURLを記載。

<meta property="og:image" content="画像のURL">
OGPとして表示したい画像のURLを記載しましょう。URLは必ず「http(s)〜」から始まる絶対パスで指定する必要があります。相対パス（例：/assets/image.jpg）では正常に表示されないため注意。推奨サイズは1200px×630pxです。

<meta property="og:site_name" content="ホームぺージのタイトル">
サイト名を記載。

<meta property="og:description" content="ページの説明">
掲載メディアによって表示される文字数は異なるため、全角80〜100文字程度を目安に、冒頭で重要な情報を伝えると効果的です。

X（Twitter）で正しくカード表示をさせるには、基本のOGPタグに加えて、専用のmetaタグ（Twitterカードタグ）を追加する必要があります。OGPタグだけでも最低限の情報は表示されますが、小さなカード形式になってしまったり画像が表示されないことがあるので、Twitterカード用のタグも併せて設定しておきましょう。

具体的には、以下のようなコードをHTMLの<head>内に記述します。

<meta name="twitter:card" content="カードの種類">
「summary_large_image」か「summary」のどちらかを記載。「summary_large_image」はXで大きなアイキャッチ画像を表示する形式です。目立ちやすく、投稿からの流入を狙いたいページではこの形式がよく使われます。小さな画像のカードを使いたい場合は「summary」を指定します。

<meta name="twitter:title" content="ページタイトル">
カードに掲載したいタイトルを記載。

<meta name="twitter:description" content="ページの説明文">
2023年以降、Xではタイムライン上に説明文が表示されなくなっていますが、将来的な仕様変更に備えて記述しておくのがおすすめです。

<meta name="twitter:image" content="画像のURL">
表示したい画像のURLを記載。URLは必ず「http(s)〜」から始まる絶対パスで指定する必要があります。相対パス（例：/assets/image.jpg）では正常に表示されないため注意。推奨サイズは1200px×630pxです。

設定が確認できたら、実際に既存のSNSにアップした時の見え方を確認しましょう。以下のサイトを利用すると、一括でXとFacebookでシェアされたときのOGPがチェックできます。

OGPチェッカー - X(Twitter)・Facebookシェア用画像確認 | Web ToolBox