要約：9ステップでWordPressスプラッシュページを作成する方法
WordPressスプラッシュページは、ホームページの前に表示されるフルスクリーンの紹介ページで、注意を引き、訪問者を特定の行動に誘導するように設計されています。
- 概要 — スプラッシュページ（ウェルカムページまたはイントロ画面とも呼ばれます）は、メインサイトの前に表示され、メインサイトの代わりではありません。
- 一般的な用途 — メール収集、製品発売、年齢確認、国/言語選択、お知らせ。
- 重要な要件 — 訪問者がスキップして先に進めるように、またGoogleがメインコンテンツをクロールできるように、常に表示されるスキップ/エンターリンクを含めてください。
- 推奨ツール — SeedProd。WordPress用のドラッグアンドドロップウェブサイトビルダーで、既製のスプラッシュページテンプレートが含まれています。
- 構築時間 — インストールから公開まで約9ステップ。コーディングは不要です。
製品発売が近づいていますが、ホームページは別のストーリーを語っています。訪問者はホームページにアクセスし、サイト全体、ナビゲーション、ブログ、価格設定を見ますが、最初に見てほしいのは、1つの集中したメッセージです。
まさにそこでWordPressスプラッシュページがその価値を発揮します。ほとんどのスプラッシュページが失敗するのは、アイデアが間違っているからではなく、重すぎたり、遅すぎたり、スキップオプションが欠けているからです。これが訪問者をイライラさせ、誰も一言も読む前にSEOに悪影響を与える可能性があります。
このガイドでは、スプラッシュページとは何かを正確に説明し、WordPress初心者向けのドラッグアンドドロップウェブサイトビルダーであるSeedProdを使用して作成する手順をステップバイステップで紹介します。
WordPressスプラッシュページとは？
WordPressスプラッシュページとは、ホームページの前に表示されるフルスクリーンの紹介ページで、メインサイトに到達する前に訪問者の注意を引き、特定の行動に誘導するように設計されています。
ロゴ、ウェルカムメッセージ、または特別オファーなどの重要な詳細を含めることができます。多くのサイトでは、年齢確認、工事中のお知らせ、または言語と場所の選択にスプラッシュスクリーンを使用しています。
WordPressスプラッシュページの目的は何ですか？
WordPressスプラッシュページの目的は、訪問者がメインサイトに到達する前に注意を引き、適切な次のステップに誘導することです。
- 特別オファーまたは新製品を宣伝する
- 年齢確認の免責事項を表示する
- 今後のイベントを強調する
- 連絡先の詳細を収集し、メールリストを増やす
- ソーシャルメディアプロフィールを宣伝する
- 新しいウェブサイトがまもなく公開されることを訪問者に伝える
要するに、適切に設計されたウェルカムページは、強い第一印象を作り、訪問者を必要な場所に正確に誘導します。
スプラッシュページとランディングページの違い
スプラッシュページとランディングページは混同しやすいですが、目的は完全に異なります。
| スプラッシュページ | ランディングページ | |
|---|---|---|
| 表示されるタイミング | ホームページの前、エントリー時 | 特定のキャンペーンのためのスタンドアロンページ |
| 主な目的 | 簡単な紹介、確認、または告知 | リードの獲得またはコンバージョンの促進 |
| スキップ/終了オプション | 必須（表示されるスキップリンク） | 意図的になし（ナビゲーションなし） |
| SEOフォーカス | 主要なコンバージョンページではない | 特定のキーワード/アクションに最適化 |
スプラッシュスクリーンは一時的にゲートキーパーとして機能します。ランディングページは目的地です。特定のキーワードをターゲットにしたキャンペーンを実行している場合は、ランディングページが必要です。訪問者がサイトに到達する前にサイトを紹介またはゲートしたい場合は、スプラッシュページが必要です。
「近日公開ページ」はさらに異なります。サイトが構築されている間の暫定的な措置です。スプラッシュページは永続的です。これは、サイトが起動する前のプレースホルダーではなく、ライブサイトの機能です。
スプラッシュページに含めるべきものは？
優れたスプラッシュページには、最小限のエッセンシャルのみが含まれます。サイトを紹介し、重要な情報を共有し、訪問者がすぐに先に進めるようにするのに十分です。
- ロゴまたはデザイン要素：ブランドを即座に強化します。
- 短いメッセージまたはミッションステートメント：あなたのサイトの目的を説明します。
- ナビゲーションリンク：訪問者をウェブサイトの適切なエリアに誘導します。
- スキップオプション：ユーザーが希望する場合、スプラッシュページをバイパスできるようにします。
- 読み込みインジケーター：サイトの読み込みに時間がかかる場合に進行状況を示します。
- 言語または地域セレクター：グローバルな視聴者に役立ちます。
目標はシンプルに保つことです。スプラッシュページを明確、高速、そして必要に応じて簡単にスキップできるようにします。
WordPressスプラッシュページの作成方法
WordPressのスプラッシュページを作成する最も簡単な方法は、SeedProdを使用することです。コードに触れたり、開発者を雇ったりすることなく、数分でプロフェッショナルなページを作成できます。
SeedProdには、事前に構築されたテンプレート、ポイントアンドクリックカスタマイズ、および組み込みの近日公開およびメンテナンスモードオプションが付属しているため、サイトをプロフェッショナルに見せながらプライベートで作業できます。
SeedProdが際立っている点は次のとおりです。
- 既製のテンプレートから始めて、空白ページの課題をスキップする
- 追加のプラグインなしで、リードキャプチャフォーム、景品ブロック、サインアップフィールドをドロップインする
- ビルダーを離れることなく、ワンクリックでメールサービスを接続する
- 変更をリアルタイムで確認する—推測もリフレッシュも不要
- 同じエディター内でモバイルレイアウトをプレビューおよび調整する
- 556ミリ秒で読み込まれる軽量コード—私のGTmetrixテストではElementor（1,882ミリ秒）の3.4倍高速
SeedProdは速度に最適化されているため、初日からパフォーマンスが向上します。これはSEOと、スプラッシュスクリーンが作成する第一印象にとって重要です。
スプラッシュページを迅速かつ効果的に立ち上げたい場合は、SeedProdを使用してステップバイステップで実行する方法を次に示します。
ステップ1：SeedProd WordPressランディングページビルダーをインストールする
まず、ここをクリックしてSeedProdを開始し、プラグインをダウンロードします。次に、WordPressウェブサイトにプラグインをインストールしてアクティブ化します。これに役立つヘルプが必要な場合は、WordPressプラグインのインストールに関するこのチュートリアルを確認してください。
SeedProdをアクティブ化した後、ライセンスキーの入力を求めるウェルカム画面が表示されます。登録に使用したメール、またはSeedProdアカウントにログインしてダウンロードセクションを確認することで見つけることができます。
ライセンスキーをコピーし、提供されたフィールドに貼り付けて、キーの検証ボタンをクリックします。
次に、ページを少し下にスクロールし、最初のページを作成ボタンをクリックします。
ステップ2：WordPressで新しいランディングページを作成する
次の画面はSeedProdのランディングページダッシュボードです。上部には、近日公開モード、メンテナンスモード、404ページなど、いくつかのページモードが表示されます。
各モードをワンクリックで有効化して、カスタマイズされたランディングページをウェブサイト訪問者に表示できます。
さまざまなページモードの下には、作成後にランディングページが表示される場所です。このセクションにはまだ何も表示されませんが、作成するとリストに表示されます。
最初のページを作成するには、新しいランディングページを作成ボタンをクリックします。
ステップ3：WordPressスプラッシュページテンプレートを選択する
次のページには、SeedProdのレスポンシブランディングページテンプレートのライブラリが表示されます。各デザインは、ドラッグアンドドロップビルダーで完全にカスタマイズ可能です。
テンプレートをすばやく見つけるのに役立つように、カテゴリでフィルタリングできます。利用可能なテンプレートを表示するには、上部にある任意のカテゴリラベルをクリックするだけです。
さらに絞り込むには、検索ボックスを使用することもできます。
スプラッシュページの外観に最も近いテンプレートを選択します。次に、テンプレート画像にマウスカーソルを合わせ、チェックアイコンをクリックします。
例として、スプラッシュページとして使用するためにカスタマイズするパーソナルリンクリード・スクイーズ・テンプレートを選択しました。
テンプレートを選択すると、ページ名とURLを入力するように求めるポップアップが表示されます。
その後、保存してページ編集を開始ボタンをクリックして、ビジュアルエディターでテンプレートを起動できます。
ステップ4：スプラッシュページにコンテンツを追加する
SeedProdのビジュアルエディターには2つの明確なセクションがあります。左側は使用できるすべてのページブロックとセクションを示すパネルで、右側はページの表示方法のライブプレビューです。
ページへのコンテンツの追加は、左側のパネルからブロックをドラッグして右側のプレビューにドロップするのと同じくらい簡単です。
ページ上のいずれかの要素をクリックすると、そのブロックの設定が左側のパネルに表示されます。
たとえば、画像ブロックをクリックして元の写真を削除し、自分の写真に置き換えることができます。
SeedProdのランディングページブロックは、標準ブロックと高度なブロックの2つのセクションに分かれています。
標準ブロックは、画像、ボタン、スペーサー、区切り線、リストなど、あらゆるページに必要な基本的な要素です。
高度なブロックは、主にリードジェネレーションに焦点を当てている点で少し異なります。
これは、数回クリックするだけで、連絡先フォーム、景品、サインアップフォーム、星評価、アンカーリンクなどをページに挿入できることを意味します。
SeedProdのブロックのほとんどには、既製のテンプレートも含まれています。これらの異なるスタイルはワンクリックで実装できるため、各ブロックを手動でカスタマイズする必要はありません。
たとえば、ボタンブロックをクリックしてテンプレートタブを選択すると、いくつかの異なるボタンのスタイルが表示されます。
個々のブロックに加えて、SeedProdにはランディングページのセクションがあります。ページセクション全体をブロックごとに手動で構築する必要はありません。セクションタブをクリックすると、さまざまな領域を確認できます。
そこから、新しいものを選択できます：
- ヘッダー
- ヒーローエリア
- 行動喚起
- FAQセクション
- 機能エリア
- フッター
訪問者に見てもらいたいすべての情報が含まれるまで、スプラッシュページにコンテンツを追加し続けます。
右上隅にある緑色の保存ボタンをクリックして、進捗状況を保存できます。
ステップ5：スプラッシュページのデザインをカスタマイズする
コンテンツを配置した後、WordPressスプラッシュページのデザインの一部がまだ正しく表示されていない可能性があります。背景色が間違っているか、フォントが場違いに見えるかもしれません。
良いニュースは、SeedProdの簡単なカスタマイズ設定を使用して、これらすべてを変更できることです。
画面左下隅にある歯車アイコンをクリックするだけで、グローバル設定が表示されます。
この領域では、グローバルな以下をカスタマイズできます。
- 背景
- 色
- フォント
- カスタムCSS
フォントの見出しの下で、グローバルなヘッダーと本文のフォントとウェイトを変更できます。それぞれのドロップダウンメニューから新しいフォントまたはウェイトを選択するだけです。
または、フォントテーマボタンをクリックして、SeedProdがキュレーションしたフォントの組み合わせライブラリを参照することもできます。
これにより、どのフォントの組み合わせが最も美しく見えるかがわかります。フォントの組み合わせをクリックするだけで、選択したものをページに即座に追加できます。
色の見出しは同様に機能します。便利なカラーピッカーツールを使用して、グローバルリンク、ヘッダー、テキスト、ボタン、背景に個別に異なる色を選択できます。
または、必要に応じて、カラーパレットボタンをクリックして、20以上の既製のカラー スキームから選択することもできます。
背景セクションは、スプラッシュ ページの背景を簡単にカスタマイズする方法を提供します。単色またはグラデーションとして設定したり、WordPress メディア ライブラリまたはコンピューターから全幅の背景画像をアップロードしたりできます。
各設定のトグルを選択することで、ビデオ背景または背景スライドショーを追加することも可能です。
カスタマイズ設定を保存するには、保存をクリックすることを忘れないでください。
ステップ6：メールマーケティングプロバイダーを接続する
多く のスプラッシュ ページでは、連絡先情報を取得する代わりに、ユーザーに無料ダウンロードを提供しています。このタイプ のスプラッシュ ページを作成するには、メール マーケティング サービスに接続する機能が必要になります。
一部のプロバイダーにしか接続できない他のページ ビルダーとは異なり、SeedProd は以下を含む一般的なメールニュースレター サービスと統合されています。
- ActiveCampaign
- AWeber
- キャンペーンモニター
- Constant Contact
- ConvertKit
- Drip
- GetResponse
- iContact
- Mad Mimi
- Sendy
- Mailchimp
ページ ビルダーの上部にある接続タブをクリックするだけで、利用可能なプロバイダーを確認できます。次に、好みのサービスを選択し、指示に従ってアカウントを承認してください。
Zapier を使用して、ページを他の何千もの一般的なアプリケーションとリンクし、マーケティング活動を自動化することもできます。
まだメール マーケティング プロバイダーをお持ちでない場合でも、心配しないでください。
代わりに、SeedProd に組み込まれているサブスクライバー管理ダッシュボードを使用できます。スプラッシュ ページを通じて誰かが購読すると、その詳細は WordPress ウェブサイトに自動的に保存されます。
WordPress ダッシュボードからSeedProd » Subscribersにアクセスすると、それらを確認できます。
ステップ7：ページ設定を構成する
スプラッシュ ページの設計が完了したら、いくつか必要な設定を構成する必要があります。これを行うには、ページ ビルダーの上部にあるページ設定タブをクリックします。
このページでは、ページの設定を変更できます。
- 一般詳細 – ページ名とURLを変更し、下書きまたは公開に設定します。
- SEO – All in One SEOのようなSEO プラグインを使用して、ページ タイトルとメタ ディスクリプションに関連キーワードを使用してオンページ SEO 情報を入力します。
- 分析 – MonsterInsightsのような分析プラグインを使用して、スプラッシュ ページのパフォーマンスを表示します。
- スクリプト – CookieやFacebookトラッキングピクセルなどのトラッキングおよびリターゲティングスクリプトを入力します。
次のステップに進む前に、保存ボタンをクリックすることを忘れないでください。
ヒント：スプラッシュページを誰に見せるべきか？
ほとんどのユースケースでは、サイトをすでに知っているリピーターではなく、初めて訪問者にのみスプラッシュスクリーンを表示したいでしょう。また、ホームページにのみ表示するように設定することもできます—すべてのページに表示するのではなく—メンバー限定の告知を実行している場合は、ログアウトユーザーにのみ表示するように設定することもできます。
SeedProdのページ設定では、ページURLとステータスを直接制御できるため、公開する前にターゲティング戦略を計画してください。
ステップ8：ページがモバイルフレンドリーであることを確認する
今日、ほとんどの人がモバイル デバイスからインターネットを閲覧しています。これらの特定のウェブサイト訪問者に、より合理化されたエクスペリエンスを提供するには、モバイルフレンドリーなスプラッシュ ページが必要です。
そのため、SeedProd にはモバイル プレビュー オプションが組み込まれています。モバイル プレビュー アイコンをクリックするだけで、スプラッシュ ページがモバイル デバイスでどのように表示されるかを確認できます。
何か正しくないように見える場合は、訪問者が携帯電話、タブレット、ラップトップ、またはデスクトップから簡単に閲覧できるページになるまで、すぐに調整できます。
同じアイコンをクリックして、元のデスクトップ表示に戻します。
心配いりません。変更は失われません。モバイル表示で行った変更は、デスクトップ表示にも適用されます。
保存ボタンをクリックするのを忘れないでください。
ステップ9：WordPressスプラッシュページを公開する
デザインが希望通りになったら、WordPressサイトにスプラッシュページを公開する時です。
これを行うには、[保存]ボタンの横にある下向き矢印をクリックし、[公開]を選択します。
すると、ページが公開されたことを知らせるポップアップが表示されます。
「ライブページを表示」ボタンをクリックして、どのように表示されるかを確認してください。
ヒント：「ウェブサイトに入る」ボタンのデザイン。
最も人気のあるスプラッシュページパターンの1つは、単一の「ウェブサイトに入る」または「クリックして入る」ボタンを備えた最小限のイントロ画面です。SeedProdでこれを構築するには、コンテンツをロゴと1つの見出しに絞り、CTAテキストがホームページURLを指すボタンブロックをドロップインします。
モバイルでタップできるように、ボタンを十分に大きくしてください。このデザインは、ブランドステートメントのスプラッシュページや制限付きコンテンツサイトに適しています。
ボーナス：SeedProdを使用して完全なローンチワークフローを構築する。
新しいサイトを構築する場合、サイト構築中はSeedProdの「Coming Soon」モードをプレローンチ用のスプラッシュスクリーンとして使用し、公開と同時に恒久的なスプラッシュページに切り替えることができます。これにより、訪問者はあらゆる段階で情報を把握でき、サードパーティのビルダーでは再現できないワークフローとなります。これはSeedProdの組み込み「Coming Soon」モードに依存しているためです。
WordPressスプラッシュページは時間とともにどのように改善できますか？
スプラッシュページを改善する最善の方法は、A/Bテストを実行して、どちらのバージョンがより多くの結果をもたらすかを確認することです。
A/Bテスト（またはスプリットテスト）は、ページの2つのバージョンを比較します。バージョンA（コントロール）とバージョンB（変更が1つあるもの）です。その変更は、異なるコールトゥアクション、新しい配色、レイアウトの微調整、あるいは完全な再設計である可能性があります。
両方のバージョンにトラフィックを送信し、コンバージョンを追跡することで、どちらのデザインがより効果的かを知ることができます。私はSeedProdで複製してテストするアプローチを使用しています。公開されたページを複製し、コピーに1つの変更を加え、両者を切り替えて、同じトラフィック期間でどちらが多くクリックされるかを確認します。
専用のスプリットテストツールが必要な場合は、VWOがSeedProdページと連携し、統計的な信頼スコアを提供するため、推測に頼る必要がなくなります。
WordPressスプラッシュページをSEOとスピードのために最適化するにはどうすればよいですか？
読み込みが遅い、またはGoogleがメインコンテンツに到達するのをブロックするスプラッシュページは、全体的なSEOに悪影響を与える可能性があります。正しく行うべきことは次のとおりです。
軽量に保ちます。自動再生ビデオ、大きな非圧縮画像、レンダリングをブロックするスクリプトは使用しないでください。読み込みの遅いスプラッシュスクリーンは、より悪い第一印象を与え、検索エンジンはコンテンツへのアクセスを遅延させるページに気づきます。
目に見えるスキップまたはエンターリンクを含めます。Googleのクローラーは、メインコンテンツに到達するためにスプラッシュページを通過する方法が必要です。スキップリンクがない場合、ホームページが正しくインデックスされない可能性があります。私がSeedProdで構築したすべてのスプラッシュページには、訪問者（およびGoogle）をメインサイトに直接誘導するボタンまたはテキストリンクが含まれています。
公開前にモバイルパフォーマンスをテストします。イントロ画面は、モバイル訪問者が最初に目にするものです。電話で読み込みに2秒以上かかる場合、かなりの数の訪問者が他の何も見ずに離れてしまいます。
ブロート（余分なコード）を追加しないビルダーを使用します。GTmetrixテストでは、SeedProdは556ミリ秒で読み込まれました。Elementorの場合は1,882ミリ秒でした。この3.4倍の違いは、コアウェブバイタルに現れ、Googleがスプラッシュスクリーンを通じてメインコンテンツにどれだけ早く到達できるかに影響します。
WordPressスプラッシュページの例
実際のスプラッシュページを見ることは、何が機能するかを理解する最も速い方法です。これら4つの例はそれぞれ異なる目的を果たしているため、ユースケースに合ったものをモデルにすることができます。
Zara：国と言語セレクター
訪問者はメインサイトに入る前に地域を選択します。これは古典的なグローバルブランドのユースケースです。スプラッシュスクリーンは、買い物客を適切なローカライズされたストアに誘導し、無関係なコンテンツや通貨の混乱を減らします。
Spritz Society：年齢確認ゲート
最小限のコピー、グラデーションの背景、単一の「はい/いいえ」ボタン。アルコールや制限コンテンツのブランドが、重いデザインのオーバーヘッドなしで法的要件を遵守するためにスプラッシュスクリーンをどのように使用するかを示すクリーンな例です。
Jack Daniel’s：生年月日入力による年齢確認
単純なはい/いいえボタンの代わりに、訪問者はサイトが読み込まれる前に完全な生年月日を入力します。このフォームベースのアプローチは、主要なスピリッツブランドの標準であり、コンプライアンス要件を満たしながら、年齢確認をどのように円滑に行えるかを示しています。
Shiseido：地域と言語セレクター
訪問者は入る前に国を選択し、スプラッシュスクリーンはフルスクリーンの画像とクリーンな「Enter」プロンプトを使用して、製品ページが読み込まれる前にトーンを設定します。これにより、ジオセレクターがトラフィックをルーティングする以上のことができること、つまり、あなたが誰であるかを伝えることができることがわかります。
これらのパターンのいずれかをSeedProdで構築したい場合は、探しているものに最も近いレイアウトのテンプレートライブラリを確認してください。カスタマイズする前に構造を正しく設定するために、ランディングページのベストプラクティスから始めることもできます。
WordPressスプラッシュページに関するFAQ
スプラッシュページと近日公開ページの違いは何ですか？
スプラッシュページは、ライブサイトの永続的な機能です。特定の目的（年齢確認、メール収集、ブランド紹介）のためにホームページの前に表示されますが、メインサイトはその後ろで完全にアクセス可能です。
一時的なのは近日公開ページです。サイトがまだ構築中である間はメインサイトに取って代わり、起動後に削除されます。2つのページは似ていますが、サイトのライフサイクルの完全に異なる段階に対応しています。
WordPressのスプラッシュページを初回訪問者のみに表示するにはどうすればよいですか？
SeedProdにはネイティブの初回訪問クッキーフィルターはありませんが、いくつかの方法でこれを実現できます。1つのオプションは、Redirect Engineのようなプラグインを使用するか、最初の訪問後にフラグを設定する軽量クッキー スクリプトを使用して、再訪問者がスプラッシュページを自動的にスキップするようにすることです。
別の方法は、スプラッシュページをSeedProdの近日公開ページとして一時的に使用することです。これは、ログインしていない訪問者にのみ表示されます。これは、オーディエンスが主に新規トラフィックである場合に適しています。
WordPressのスプラッシュページを削除するにはどうすればよいですか？
SeedProdでは、WordPressダッシュボードからSeedProd » Landing Pagesに移動します。リストでスプラッシュページを見つけて、ステータスをDraftに設定するか、Deleteをクリックします。
スプラッシュページに訪問者をルーティングするためにリダイレクトを使用した場合は、そのリダイレクトも削除して、訪問者が直接ホームページにアクセスできるようにしてください。
スプラッシュページとランディングページの違いは何ですか？
スプラッシュページは、ホームページの前に表示される短い紹介画面です。スキップリンクが表示され、コンバージョンを目的としたものではありません。特定の瞬間（発表、確認、ブランド紹介）のために構築されています。
ランディングページは、ナビゲーションや終了リンクなしで、1つのコンバージョン目標を中心に構築されたスタンドアロンページです。ランディングページは、リードキャプチャ、製品販売、ウェビナー登録などのキャンペーンに使用されます。これら2つは異なる役割を果たし、互換性があるものとして使用されるべきではありません。
WordPressのスプラッシュページはSEOに悪いですか？
正しく構築されていれば、そうではありません。読み込みが速く、スキップリンクが表示され、Googleのクローラーがメインコンテンツに到達するのを妨げないスプラッシュページは、ランキングを損なうことはありません。
スプラッシュページがSEOの問題を引き起こす場合：コアウェブバイタルに影響する読み込み時間の遅延、クローラーがホームページをインデックスするのを妨げるスキップリンクの欠落、モバイルでの煩わしいポップアップ（Googleがペナルティを課すもの）。スプラッシュスクリーンを軽量でスキップ可能にすれば、問題にはなりません。
独自のページを作成する準備はできましたか？SeedProdを使用すると、わずか半日でプロフェッショナルなスプラッシュページを作成して公開できます。
スプラッシュページを設定する際に、これらのガイドも役立つかもしれません。
お読みいただきありがとうございます！ご意見をお聞かせいただければ幸いですので、ビジネスを成長させるための役立つアドバイスやコンテンツについては、お気軽にYouTube、X、Facebookで会話にご参加ください。
