WordPressで1ページのウェブサイトを作る方法を学びたいですか？
1ページのウェブサイトは、シンプルでモダンなデザインの1つのウェブページのみを使用します。そうすることで、ユーザーはクリックすることなく、1ページで必要な情報をすべて見ることができます。
この記事では、WordPressで1ページのウェブサイトを作る方法をステップ・バイ・ステップでご紹介します。
なぜ1ページのウェブサイトを作るのか？
ほとんどのウェブサイトを見てみると、共通していることがある。それは、一般的にページナビゲーションがあり、ユーザーをサイト内の他のページ、例えば次のようなページに誘導していることだ：
ナビゲーションメニューは、大企業や情報量の多い企業には最適なソリューションです。しかし、小規模なブランドは、製品やサービスを説明するために、すべてのスペースを必要としないかもしれません。
さらに、1ページのウェブデザインは、標準的な複数ページのウェブサイトから情報を取り出し、それを1ページに縮小します。これは、ページをスクロールすると表示される明確なセクションを追加することによって行われます。
このタイプのウェブサイトを作ることには、いくつかの利点がある：
- ユーザーがより簡単にサイトをナビゲートできる
- コール・トゥ・アクションがより早く見られる
- 単一のウェブページをモバイル向けに最適化する方が簡単です。
- 1ページのウェブサイトはメンテナンスが簡単
さらに重要なのは、すべてのトラフィックが1つのページに集まるため、単一ページのサイトではコンバージョン率がはるかに高くなることだ。
当然ながら、大規模で複雑なビジネスでは、1ページのWordPressデザインにすべての情報を収めるのに苦労するでしょう。しかし、小規模なビジネスサイトやポートフォリオ、シンプルな店舗を運営するのであれば、このタイプのウェブサイトは優れた選択肢です。
1ページWordPressサイトに含めるべきもの
WordPressサイトは1ページしかないため、何を掲載するかを検討する必要があります。あなたの仕事は、デザインを乱雑にしたり訪問者を圧倒したりすることなく、あなたのビジネスについて知るために必要なものをすべて提供することです。
簡単に言えば、シングルページのウェブサイトに掲載するすべてのものには理由があるはずだ。
ここでは、1ページのWordPressサイトに含めるべきものの一般的なアイデアを紹介します：
- ロゴやキャッチフレーズなどのブランディング要素で、サイトを認知させる。
- あなたが何者で、何をしているのかを説明する「アバウト・セクション」。
- 提供する製品やサービスのリスト。
- 社会的証拠を示し、信頼を築くためのレビューや証言。
- 目立つコールトゥアクションで、ユーザーに詳細、サインアップ、購入を促す。
- ソーシャルメディアへのリンク
- ユーザーが連絡できるよう、連絡先情報を提供する。
これらの詳細をページに表示する順番も同様に重要だ。
CTAは最も重要な要素なので、ページの上の方に追加するのがベストプラクティスです。連絡先の詳細とソーシャルリンクは、サイトの下部付近に掲載する必要があります。
オーディエンスにまず見てもらいたいものは何かを考え、それに従ってページを配置する。
WordPressで1ページのウェブサイトを作る方法
以上のことを念頭に置いて、以下のステップに従ってWordPressで1ページのウェブサイトを作る方法を学ぶことができます：
ステップ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で作り直したウェブサイトです：
素晴らしい仕事だ。あなたは今、オリジナルの例のようなウェブサイトを作った。簡単だったでしょう？
SeedProdを使ってWordPressで1ページのウェブサイトを作る方法はお分かりいただけたと思います。SeedProdの素晴らしいところは、1行もコードを触ることなく、様々なタイプのレイアウトを作ることができることです。
カスタム・ワン・ページのウェブサイトを作成する準備はできていますか？
まだサイトを公開する準備ができていない場合は、WordPressでcoming soonページを作成するガイドをご覧ください。
この記事を気に入っていただけたなら、YouTube、Twitter、Facebookで、あなたのビジネスを成長させるために役立つコンテンツをもっとご覧ください。
