WordPressで1ページのウェブサイトを構築することは、私がオンラインで存在感を示す最もシンプルで効果的な方法の1つであることが判明した。コードを学んだり、開発者を雇ったりする必要はなく、明確な目標と適切なツールがあればいいのだ。
このサイトでは、ドラッグ＆ドロップでWordPressを構築できるSeedProdを使用した。SeedProdは、デスクトップでもモバイルでも美しく動作する、スクロール可能な単一のページ上に、ヒーローセクションからコンタクトフォームまで、すべてを構成することができました。
もしあなたがフリーランサーや中小企業のオーナー、あるいは複数のページを管理する手間をかけずに、コンバージョンに特化したクリーンなウェブサイトを作りたいと思っているなら、このアプローチはゲームチェンジャーだ。また、ゼロから始める方でもご安心ください。
このガイドでは、技術的なスキルは必要なく、見栄えがよく、目標のために一生懸命働く1ページのWordPressウェブサイトを作る方法を具体的に紹介します。
ワンページ・ウェブサイトとは？
1ページのウェブサイトとは、異なるセクションのために複数のページを使用する代わりに、スクロール可能な単一のページにすべてのコンテンツを含むサイトのことです。ナビゲーションリンクは通常、アンカーリンクを使用して同じページの異なるセクションにジャンプします。
このレイアウトは、摩擦を減らし、ユーザーを1つの旅に集中させるため、ランディングページ、ポートフォリオ、スタートアップの立ち上げ、モバイルファーストの体験に人気がある。
なぜWordPressで1ページのウェブサイトを作るのか？
ワンページのWordPressウェブサイトは、ユーザーを圧倒することなくコンテンツを紹介する、スマートでモダン、モバイルフレンドリーな方法を提供します。複数のページ（会社概要、サービス、連絡先など）に情報を分散させる代わりに、スクロール可能な1つのページに情報をまとめることができます。
ここでは、1ページのWordPressデザインを使用する主な利点を説明します：
- ロード時間の短縮とナビゲーションの簡素化
- 焦点を絞ったコール・トゥ・アクションによるコンバージョンの向上
- モバイルとSEOの最適化が容易
- ランディングページ、ポートフォリオ、製品ショーケースに最適
- 管理するコンテンツが減り、メンテナンスが簡素化
さらに、SeedProdのようなツールを使えば、開発者を雇うことなく、視覚的にサイトを構築することができる。
1ページWordPressウェブサイトの必須セクション
ワンページサイトをデザインする場合、構造が重要です。各コンテンツブロックには明確な目的が必要です。成功しているワンページサイトの多くは、以下のような構成になっています：
- ヒーローセクション：見出し、小見出し、魅力的なCTA。ユーザーが最初に目にする部分です。
- 会社概要欄：あなたが何者で、何を提供するのかを簡潔に説明する。
- 機能またはサービス：中核となる製品や製品のハイライトを紹介しましょう。
- 社会的証明：顧客の声や信頼バッジを追加する。
- コール・トゥ・アクション（CTA）：サインアップ、購入、問い合わせなど、ユーザーに行動を促す。
- 連絡先セクション：電子メール、電話、または問い合わせフォームを含める。
- フッター：法的リンク、著作権情報、または二次ナビゲーションを追加します。
WordPressで1ページのウェブサイトを作る方法
以上のことを念頭に置いて、以下のステップに従ってWordPressで1ページのウェブサイトを作る方法を学ぶことができます：
- ステップ1.WordPressホスティングとドメインのセットアップ
- ステップ2.SeedProdウェブサイトビルダーをインストールする
- ステップ3.ウェブサイトのテンプレートを作成する
- ステップ4.ワンページウェブサイトをカスタマイズする
- ステップ5.メールマーケティングサービスに接続する
- ステップ6.ワンページウェブサイトを公開する
- 1ページWordPressウェブサイトに関するFAQ
ステップ1.WordPressホスティングとドメインのセットアップ
1ページのウェブサイトを構築する前に、まずドメイン名とウェブホスティングを購入する必要があります。ドメイン名はインターネット上のあなたのウェブサイトのアドレスであり、ホスティングはあなたのウェブサイトのファイルを保存するホームです。
多くのホスティング会社では、ホスティングプランの一部として無料のドメイン名が含まれています。例えば、BluehostのWordPressホスティングは、すべてのプランで1年間無料のドメイン名を提供しています。
Bluehostのスモールビジネスプランには以下も含まれます：
- 無制限のウェブサイト
- 無制限ストレージ
- 無料CDN
- 無料SSL証明書
価格は月額5ドル前後。
あなたはBluehostはまた、WordPressの公式推奨ホスティングパートナーであることを考慮すると、彼らはあなたのビジネスウェブサイトのための優れた最初の選択肢です。とはいえ、これらの最高のWordPressホスティングプロバイダをチェックアウトすることによって、買い物をすることができます。
ドメインとホスティングの他に、WordPressのテーマを選んで始める必要があります。
ほとんどの企業は、サイトを作成するためにモダンなシングルページのテーマを探します。しかし、このチュートリアルでは、ウェブサイトビルダーを使用するので、特別な1ページのWordPressテーマは必要ありません。
その代わりに、高速で最適化されたテーマを使用することをお勧めします。例えば、WordPressの公式デフォルトテーマを使うか、人気のWordPressテーマから選ぶことができます。
デザインやテーマオプションは重要ではないことを覚えておいてほしい。あなたが求めているのは、ウェブサイトを最適化し続けるためのクリーンなコードと高速性です。
サイトの立ち上げにヘルプが必要な場合は、ウェブサイトの作り方に関する究極のガイドをご覧ください。
このチュートリアルでは、アップル・プラグの1ページサイトを再現します。
このサイトは、大手企業向けにアプリを開発するNicer社によるアップル製品のパロディである。
このサイトを作成するために使用するのは、たったひとつの強力なWordPressプラグインだけです。
SeedProdは、市場で最高のWordPressウェブサイトビルダーの一つです。強力なドラッグアンドドロップエディタとWordPressテーマビルダーが含まれており、コードを書くことなく任意のレイアウトを作成、カスタマイズ、起動することができます。
SeedProdの使い方は超簡単です（初心者でも）。あなたのサイトを設定するのは、指をさしてクリックするだけで、変更がリアルタイムで自動的に行われるのを見るのと同じくらい簡単です。
ステップ2.SeedProdウェブサイトビルダーをインストールする
まず、SeedProdウェブサイト・ビルダー・プラグインをダウンロードし、WordPressサイトにインストールして有効化する必要があります。
注：SeedProdには無料版もありますが、このチュートリアルではテーマビルダー機能のためにSeedProd Proを使用します。
WordPressプラグインのインストール方法については、こちらをご覧ください。
SeedProdをアクティベートした後、WordPressのダッシュボードからSeedProd " Settingsにアクセスし、ライセンスキーを入力してください。この情報はSeedProdウェブサイトのアカウントページにあります。
ステップ3.ウェブサイトのテンプレートを作成する
SeedProdでカスタム1ページサイトを作るには、まずカスタムテンプレートを作成する必要があります。SeedProdでカスタムテンプレートを作成するのはとても簡単です。
まず、SeedProd " Theme Builderページにアクセスしてください。
通常、このページには現在のSeedProdテーマのテンプレート一覧が表示されます。まだ作っていないので、グローバルCSSテンプレートしか表示されません。
通常、ウェブサイトを構築する際には、SeedProdのプレメイドテーマの1つから始めることをお勧めします。しかし、私たちはアップルプラグのパロディサイトを再現したいので、ゼロから始めます。
そのためには、「新しいテーマ・テンプレートを追加」ボタンをクリックします。
次に、オーバーレイ・ウィンドウで、テンプレートに名前を付け、「タイプ」ドロップダウンメニューから「カスタム・ページ」を選択します。そこから「条件を追加」ボタンをクリックし、「サイト全体」オプションを選択します。
これらの設定により、SeedProdで作成したページがウェブサイト上のあらゆる場所に表示されるようになります。
テンプレートを作成した後、SeedProdのドラッグ＆ドロップページビルダーで開き、レイアウトやデザインをカスタマイズし、カスタムコンテンツを追加することができます。
ステップ4.ワンページウェブサイトをカスタマイズする
SeedProdのドラッグ＆ドロップページビルダーでは、右側にウェブサイトのプレビュー、左側に編集パネルが表示されます。
ワンページ・ウェブサイトのヘッダーを作成する
ウェブサイトを作り始めるには、まず新しいセクションを追加する必要があります。そのためには、列の追加アイコンをクリックし、レイアウトをクリックします。
アップル・プラグのウェブサイトのヘッダーは3カラムなので、3カラムのレイアウトを選ぶことにする。
次に、Imageブロックを左のパネルから新しいカラムにドラッグします：
画像ブロックをクリックし、メディアライブラリまたはコンピュータからロゴをアップロードできます。ロゴをアップロードした後、設定パネルのオプションをクリックすることで、サイズや配置を変更したり、リンクを追加したりすることができます。
では、メニュー項目を作り直しましょう。SeedProdのNav Menuブロックを使いますので、それを2列目にドラッグして、設定パネルに各メニュー項目を追加してください。
このデザインには「シンプル」メニュー・タイプを使いたい。なぜなら、後でアンカー・リンクを追加するからだ。
このセクションの最後のステップは、"購入ボタン "を追加することです。左側のパネルからButtonブロックをドラッグして、最後のカラムにドロップすればOKです。
そこから、ボタンをチェックアウトページにリンクさせることができます。その後、「詳細設定」タブで、ボタンの色、間隔、ボーダーをポイント＆クリックでカスタマイズできます。
1ページサイトのヘッダーに満足したら、保存をクリックします。
さまざまなコンテンツセクションを追加する
今回作成した例を見ると、ページには7つのセクションがあることがわかる：
- ヒーロー
- バイソン
- デザイン
- イノベーション
- 材料
- 特徴
- 行動への呼びかけ
各セクションは、スペースを取らずに製品の異なる側面を説明している。また、読者が行動喚起にたどり着くまで、ページ内を流れるように進むことができる。
SeedProdを使えば、各セクションの作成は簡単です。
まず、ヘッダーエリアと同じように、新しいシングルカラムセクションを追加します。次に、イメージブロックをドラッグし、もう一度ロゴをアップロードします。
次に、SeedProdの見出しブロックを追加する必要があります。このブロックでは、見出しのレベルをH1からH6まで設定できます。また、「詳細設定」タブをクリックして、フォント、色、間隔をカスタマイズすることもできます。
このステップを1ページのウェブサイトの各セクションに対して繰り返します。例えば、次のセクションでは、2カラムレイアウト、2つの見出しブロック、画像ブロック、シンプルなテキストブロックが必要です。
次の2つのセクションは同じです。最初のセクションを複製し、内容を変更することで、より簡単にすることができます。そのためには、セクションにカーソルを合わせ、複製アイコンをクリックします。
新しいセクションは元のセクションのすぐ下に表示されます。
アンカーリンクの追加
ほとんどの1ページのウェブサイトは、典型的なナビゲーション・メニューの代わりに、読者のナビゲーションを助けるアンカー・リンクを使用している。そうすることで、ユーザーは最も興味のあるセクションにジャンプすることができる。
SeedProdでアンカーリンクを追加するのは簡単です。アンカーブロックを見つけ、リンクしたいセクションにドラッグするだけです。
次に設定パネルで、アンカーに名前をつける。
それでは、セクションをメニュー項目にリンクしてみましょう。そのためには、メニュー項目をクリックし、「URLリンク」フィールドにハッシュタグシンボルとアンカーの名前を入力する。この場合、#visionsectionとなります。
次に進む前に、変更を保存することを忘れないでください。
登録フォームの追加
このシングルページのウェブサイトの最後のセクションは、コール・トゥ・アクションのエリアである。このウェブサイトはパロディなので、もっと知りたいと思う訪問者と連絡を取り合う方法が必要です。
最も簡単な方法は、SeedProdのオプトインフォームブロックを使用することです。あなたのサイトにカスタマイズ可能なフォームを追加し、ユーザーがメールアドレスを入力することで、更新や通知を受け取ることができます。
数回のクリックで、フォームフィールド、ボタン、色、間隔などをカスタマイズできます。
SeedProdで1ページサイトに追加できる他の重要な要素には、次のようなものがあります：
- ソーシャルメディアのフォロワーを増やすソーシャル・プロフィール・アイコン
- 信頼と信用を高める証言
- カウントダウン・タイマーで緊急性を演出
- ユーザーをWooCommerceのチェックアウトに誘導するカートに入れるボタン
オプションは無限にあり、思い通りのサイトに仕上げるのに時間はかからない。
サイトの見た目に満足したら、画面右上の保存ボタンをクリックします。
ステップ5.メールマーケティングサービスに接続する
次のステップは、Eメールマーケティングサービスに接続することです。これは、あなたのサイトからEメールアドレスを集めてEメールリストを作成することを計画している場合に良いアイデアです。
ページビルダーの上部にある[接続]タブをクリックし、利用可能な多くのメールサービスから選択します。お好みのメールサービスを選択し、接続をクリックし、指示に従ってメールリストを接続します。
各メールマーケティングサービスの具体的な統合方法については、メール統合のドキュメントをご覧ください。
ステップ6.ワンページウェブサイトを公開する
これで新しいウェブサイトを公開する準備ができました。これを行うには、ビルダーを終了し、テーマビルダーのダッシュボードに戻ります。
そこから、Enable SeedProd ThemeのトグルをOnにする。
これで、あなたのウェブサイトのホームページを訪問し、1ページのウェブサイトを実際に見ることができます。
ここで再びオリジナルを紹介しよう：
そして、これがSeedProdで作り直したウェブサイトです：
1ページWordPressウェブサイトに関するFAQ
素晴らしい仕事だ。あなたは今、オリジナルの例のようなウェブサイトを作った。簡単だったでしょう？
SeedProdを使ってWordPressで1ページのウェブサイトを作る方法はお分かりいただけたと思います。SeedProdの素晴らしいところは、1行もコードを触ることなく、様々なタイプのレイアウトを作ることができることです。
カスタム・ワン・ページのウェブサイトを作成する準備はできていますか？
まだサイトを公開する準備ができていない場合は、WordPressでcoming soonページを作成するガイドをご覧ください。
この記事を気に入っていただけたなら、YouTube、Twitter、Facebookで、あなたのビジネスを成長させるために役立つコンテンツをもっとご覧ください。
