WordPressで1ページウェブサイトを作成する方法(ステップバイステップ)

開発者を雇わずにWordPressでモダンな1ページウェブサイトを作成したいですか?

1ページウェブサイトは、ランディングページ、ポートフォリオ、中小企業サイトに最適です。なぜなら、魅力的で、モバイルフレンドリーで、訪問者が行動を起こすように誘導するからです。

しかし、適切なアプローチなしでは、構築はフラストレーションの原因となる可能性があります。読み込み速度の低下、モバイルでの応答性の悪さ、訪問者をサイトから遠ざける混乱したユーザーエクスペリエンスにつながる可能性があります。

このステップバイステップガイドでは、初心者の方でも、WordPressでプロフェッショナルな1ページウェブサイトを正確に作成する方法を説明します。

WordPressで1ページウェブサイトを作成する方法

なぜ1ページウェブサイトを作成するのか?

ほとんどのビジネスや組織はウェブサイトを必要としています。対面式のビジネスを運営している場合でも、ウェブサイトは新しい人々があなたのブランドを発見し、次のステップを踏み出すのに役立ちます。それは、予約のリクエストから連絡先情報の取得、実店舗への旅行の計画まで、何でもあり得ます。

しかし、ブログ全体やウェブサイトを構築することは、本当に頭痛の種になり得ます。複数のページをデザインし、すべてのコンテンツを常に最新の状態に保つための時間、予算、または専門知識がないかもしれません。

ワンページウェブサイトは、それほど要求の少ないオプションです。

さらに、場合によっては、複数ページのウェブサイトは必要ありません。物理的な店舗やビジネスがある場合、ウェブサイトは単なるデジタル名刺として機能するかもしれません。Googleであなたを見つけやすくし、電話番号や営業時間などの基本的な情報を提供できます。

その場合、1ページのビジネスウェブサイトがあれば、より短時間で、より少ない労力で目標を達成できます。 

また、オンラインポートフォリオや リンクインバイオページ として1ページサイトを使用している多くのフリーランサーや起業家とも協力してきました。

1ページウェブサイトの例

1ページウェブサイトは、会議やワークショップのような短期イベントにも最適です。

通常、訪問者は単一の特定の目標を念頭に置いているため、使用されない複雑なマルチページサイトを作成する必要はありません。

そして一番良いところは?イベントが終了したら、サイトを簡単に削除できます。もう必要のないものを維持する心配はありません。

シングルページサイトの例

要するに、オンラインプレゼンスを迅速、簡単、かつ手頃な価格で作成する必要があるなら、1ページウェブサイトが最適なソリューションになる可能性があります。 

それでは、シングルページウェブサイトを作成する方法を見ていきましょう。

ステップ1:ウェブサイトビルダーを選択する

1ページのサイトを作成するために使用できるウェブサイトビルダーはたくさんありますが、WordPressをお勧めします。

まず、オープンソースで無料なので、使用料はかかりません。ほとんどのプレミアムビルダーはマルチページウェブサイト専用に設計されているため、1ページのデザインには必要のない機能にお金を払うことになる可能性があります。

WordPressを選択することで、高額な費用なしに強力で信頼性の高いプラットフォームを入手できます。このトピックの詳細については、WordPressが無料である理由に関する記事をご覧ください。

さらに良いことに、当社のブログ統計によると、WordPressは世界で最も人気のあるウェブサイトプラットフォームであり、全ウェブサイトの約43%を支えています。これは、高額な費用なしで、ワンページウェブサイトに最適なプラットフォームを利用できることを意味します。まさにウィンウィンです。 

ただし、WordPressソフトウェアには2種類ありますので、正しい方を選ぶことが重要です。

まず、ブログホスティングプラットフォームであるWordPress.comがあります。次に、セルフホスト型WordPressとしても知られるWordPress.orgがあります。1ページウェブサイトの場合、ページビルダーを含むサードパーティプラグインをインストールできるWordPress.orgを使用することをお勧めします。

優れたデザインは、あらゆるWordPressウェブサイトにとって不可欠ですが、1ページサイトにとっては絶対に不可欠です。印象を強く与えるためのスペースが限られているため、すべてのピクセルが重要になります。

そのため、強力なページビルダープラグインは必須です。これにより、ページデザインを完全に制御でき、各要素がページ上のどこに表示されるかを正確に微調整できます。このように、ページビルダーは最小限のスペースで最大限の効果を発揮するのに役立ちます。

なぜすべての読者にWordPressを推奨するのかについて詳しく知るには、完全なWordPressレビューをご覧ください。

☝ このガイドを読む前に間違った決断をしましたか?パニックにならないでください!まだWordPress.comからWordPress.orgへウェブサイトを移行できます。

ステップ 2: 1 ページ ウェブサイトのホスティングを設定する

1ページウェブサイトを作成するには、ドメイン名とウェブホスティングが必要です。

ドメイン名は、インターネット上でのウェブサイトのアドレスです。これは、顧客がブラウザに入力して、aioseo.comやoptinmonster.comのようなあなたのワンページサイトにアクセスするために使用するものです。

ウェブホスティングは、ウェブサイトがオンラインで存在する場所です。お手伝いするために、新しいサイト用に購入できる 最適な WordPress ホスティング をいくつか厳選しました。 

WordPressソフトウェアは無料ですが、ホスティングとドメイン名で費用が実際にかさみ始める可能性があります。 

👉予算が心配ですか?WordPressウェブサイトの構築にかかる費用に関する完全なガイドを作成しましたので、途中で不快な驚きはありません。WordPressウェブサイトの構築にかかる費用についてはこちらをご覧ください。

ドメイン名は通常年間14.99ドル、ホスティングは月額7.99ドルからかかります。特に単一ページのサイトを作成している場合、これはかなりの金額です。

幸いなことに、Bluehostは無料のドメイン名を提供しており、読者はウェブホスティングを大幅に割引できます。Bluehostは世界最大級のホスティング会社であり、公式のWordPress推奨ホスティングパートナーです。

月額わずか2.99ドルから始められる下のボタンをクリックできます。これは、軽量な1ページサイトに最適です。

完了したら、新しいタブでBluehostのウェブサイトに移動し、黄色の「今すぐ始める」ボタンをクリックします。

WPBeginner読者向けBluehostオファー

これで価格ページに移動し、ウェブサイトのホスティングプランを選択できます。

成功するシングルページサイトを作成するために必要なすべてが含まれているため、「スターター」または「ビジネス」プランを選択することをお勧めします。

Bluehostの料金プランを選択

プランを選択するには、「プランを選択」ボタンをクリックするだけです。

次に、1ページウェブサイトのドメイン名を選択する時間です。

Bluehostでドメイン名を選択する

ドメイン名は、強力なオンラインブランドを構築するために不可欠なので、完璧なドメイン名を選ぶのに時間をかける価値は十分にあります。

理想的には、ドメインは発音しやすく、スペルも簡単で、覚えやすく、ブランドに関連している必要があります。インスピレーションが足りない場合は、ブログ名ジェネレーターを使用することもできます。

希望のドメイン名が利用できない場合は、その隣に地名を追加してみてください。これは対面式のビジネスに特に効果的で、ローカル検索結果でのドメインの可視性を高めます。 

1ページウェブサイトのドメイン名の選択に困っていますか?それなら、最適なドメイン名の選び方に関するガイドをご覧ください。

ドメイン名を選択すると、カートページに移動します。そこから「チェックアウトに進む」をクリックします。

Bluehost は、お客様の名前やメールアドレスなどのアカウント情報を尋ねます。

Bluehost 新規アカウント作成

これが完了したら、支払い情報を入力して購入を完了してください。

これが完了すると、ウェブホスティングコントロールパネルにログインする方法についての指示が記載されたメールが届きます。これは、メール通知の設定やWordPressサポートの問い合わせなど、1ページウェブサイトを管理できるダッシュボードです。

ステップ3.ウェブホスティングにWordPressをインストールする

Bluehost を 当社のリンク を使用してサインアップすると、Bluehost がドメイン名に WordPress を自動的にインストールします。

数分待って読み込みが完了したら、「サイトを編集」ボタンをクリックしてください。これにより、新しいウェブサイトの設定画面に移動します。

WordPress を使用して 1 ページ Web サイトを作成する

この時点で、WordPressサイトを移行するか、新しいセットアップを開始するかを尋ねる新しいウィンドウが表示されます。

新しいウェブサイトを作成するので、「セットアップ開始」ボタンをクリックします。

WordPress で1ページウェブサイトを設定する方法

セットアップウィザードで、作成しているウェブサイトの種類、ブログ、またはオンラインマーケットプレイスなどの基本的な情報が求められます。

1ページウェブサイトに最も適したカテゴリを選択し、「セットアップの続行」をクリックします。

WordPress でシングルページウェブサイトを作成する

Bluehost WordPressセットアップウィザード全体を完了したら、「セットアップを完了」をクリックします。

Bluehost が WordPress 管理画面に移動します。

Bluehost を使用して1ページウェブサイトを設定する方法

WordPressダッシュボードには、ウェブブラウザで直接 yoursite.com/wp-admin/ にアクセスしてログインすることもできます。

SiteGround、Hostinger、HostGator、またはWP Engineのような別のWordPressウェブサイトホストを使用している場合は、すべての主要なホスティングプロバイダー向けのWordPressのインストール方法に関する完全なガイドをご覧ください。

これで、WordPressで1ページウェブサイトの構築を開始する準備が整いました。

ステップ4:ページビルダープラグインをインストールする

魅力的な1ページウェブサイトを簡単に作成する方法をお探しですか?それなら、SeedProdを強くお勧めします。この人気のページビルダープラグインは、ドラッグ&ドロップインターフェースを備えているため、各要素がページ上のどこに表示されるかを正確に制御できます。

各レイアウトに独自のレイアウトを持つ無制限の行を作成することもできます。これは、散らかっているように感じさせることなく、1 ページ Web サイトに多くのコンテンツを含めることができることを意味します。

詳細については、ランディングページ、カスタムテーマ、さらにはウェブサイト全体を構築するためにSeedProdを使用した際に学んだことを共有している、完全なSeedProdレビューをご覧ください。

このチュートリアルでは、SeedProdの無料版を使用します。これは、美しい1ページウェブサイトを作成するために必要なすべてを備えています。サイトが確立され、多くのトラフィックとコンバージョンが得られるようになったら、いつでもプレミアムプラグインにアップグレードできます。

プレミアムプラグインには、追加のブロック、メールマーケティング連携、および動的テキストのサポートが含まれているため、シングルページサイトでパーソナライズされたコンテンツを表示できます。とはいえ、SeedProd プレミアムは、1 ページ ウェブサイトを次のレベルに引き上げるのに最適です。 

開始するには、SeedProdプラグインをインストールして有効化するだけです。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドを参照してください。WordPressプラグインのインストール方法

ステップ5:新しいページを作成する

さて、いよいよ1ページウェブサイトを作成する時が来ました!始めるには、SeedProd » Landing Pages にアクセスし、「新しいランディングページを追加」をクリックしてください。

SeedProdを使用して1ページウェブサイトを作成する方法

SeedProd には、近日公開404ページなどのキャンペーンタイプ別に整理されたデザインが多数用意されています。画面上部のタブをクリックすることで、キャンペーンタイプに基づいてテンプレートを絞り込むことができます。

1ページウェブサイトを作成する場合、通常は白紙の状態から始めるのが理にかなっています。単一のページをゼロからデザインするには、マウスを「空白テンプレート」にホバーし、表示されたらオレンジ色のチェックマークをクリックします。

SeedProd テンプレートを使用してシングルページウェブサイトを作成する方法

次に、1ページウェブサイトの名前を入力します。SeedProdはページのタイトルに基づいてURLを自動的に作成しますが、好きなものに変更できます。

説明的なURLは、検索エンジンがあなたのサイトが何についてのものであるかを理解するのに役立ち、それによってあなたのサイトのようなコンテンツを探している人々に表示できるようになります。

ワンページWordPressウェブサイトにURLを追加する

入力した情報に満足したら、「保存してページの編集を開始」ボタンをクリックします。

ステップ6:ブランディングを追加する

SeedProdは、空白のテンプレートをドラッグ&ドロップエディターで開きます。左側にさまざまな設定が表示され、右側にライブプレビューが表示されます。

1ページウェブサイトは、ブランディングを確立するための最初(そして唯一)のチャンスなので、正しく行うことが重要です。そうは言っても、まずグローバル設定を変更して、ページデザイン全体で一貫性を保つことから始めましょう。 

これを行うには、左下のメニューにある歯車のアイコンをクリックします。

SeedProdページのカスタム設定

ヘッダーと本文のテキストを微調整するには、「フォント」セクションをクリックして展開します。

ドロップダウンメニューを使用して、デフォルトのフォントとテキストスタイルを変更できるようになりました。

カスタムWordPressページのフォントとテキストスタイルの選択

次に、ヘッダー、テキスト、ボタン、リンク、背景の カラー スキーム を作成できます。

個々の要素に対してこれらの設定を上書きできますが、事前に定義しておくと、一貫したデザインを作成しやすくなります。さらに、長期的には時間を節約できます。

この変更を行うには、「色」セクションをクリックして展開します。ここで、変更したい色の上にカーソルを合わせ、スウォッチをクリックするだけです。これにより、使用したい正確な色合いを選択できるピッカーが開きます。

シングルページサイトにカスタムカラーとブランディングを追加する

探索できるグローバル設定は他にもいくつかありますが、ほとんどの1ページウェブサイトにとってこれは良い出発点です。

ステップ7:レイアウトを選択する

次にレイアウトを選択します。ワンページサイトには無制限に行を追加でき、各行は独自のレイアウトを持つことができます。

ただし、ナビゲーションを容易にするために、通常は各行で1列または2列のレイアウトにすることをお勧めします。これは、スマートフォンやタブレットなどの小さなデバイスでは特に当てはまります。

レイアウトを選択するには、使用したいオプションにマウスカーソルを合わせるだけです。その後、クリックしてください。

SeedProdを使用してコンテンツを整理する

これにより、新しい行が作成されます。 

まず、行にカーソルを合わせ、行の背景を変更したい場合が多いでしょう。次に、表示される小さな歯車のアイコンをクリックします。 

論理的な構造を使用してコンテンツを整理する

この時点で、左側のメニューの設定を使用して背景スタイルと色を変更できます。

ブランドを確立するために、先に設定したグローバルカラーから選択することをお勧めしますが、好きな色合いを使用することもできます。 

SeedProdとWordPressを使用してブランドページを作成する

ステップ 8: コンテンツブロックを追加する

ブロックはSeedProdのコアパーツであり、あらゆる種類の1ページデザインを作成できます。テキスト、画像、お問い合わせフォームなどを追加するためのブロックがあります。

SeedProdの左側メニューにブロックが表示されない場合は、点線のアイコンをクリックしてください。

カスタムページデザインに行ブロックを追加する

その後、「ブロック」タブが選択されていない場合は選択できます。1 ページサイトにブロックを追加するには、デザインにドラッグアンドドロップするだけです。

ブロックをカスタマイズするには、ページプレビューでクリックして選択し、左側のメニューで変更を行います。 

WordPressで1ページウェブサイトをデザインする方法

インスピレーションが湧かない、または単に1ページウェブサイトを素早く作成したいですか?SeedProdには、見出し、キャプション、行動喚起などのテキストを簡単に生成できる強力なAI機能が搭載されています。

通常通りデザインにテキストブロックを追加し、「AIテキストを生成」ボタンをクリックします。使用したいプロンプトを入力し、「テキストを生成」をクリックします。

SeedProd の高度な AI プロンプトを使用して 1 ページ ウェブサイトを作成する

SeedProdは、お客様の指示に基づいてテキストを生成します。

トーン、長さ、さらには言語を変更することで、テキストを微調整できます。

SeedProdを使用してAI生成テキストを微調整する方法

ワンページウェブサイトにユニークな画像やグラフィックを作成したいですか?

次にSeedProdはDALL-Eと統合されているため、数秒でオリジナルの画像を生成し、ワンクリックでワンページサイトに追加できます。

1 ページ Web サイト用の AI 画像を生成する方法

これらの機能により、専門的なコピーライティングやグラフィックデザインのスキルがなくても、プロフェッショナルで美しくデザインされた1ページウェブサイトを迅速に構築できます。

左側のメニューの設定を使用して、ブロックをページにドラッグして編集し続けます。ドラッグアンドドロップを使用して、レイアウト内のブロックを移動することもできます。 

ステップ9:無制限に行を追加する

コンテンツを整理するために、新しい行を作成したい場合があります。これを行うには、レイアウトの最後の行にカーソルを合わせ、表示された小さな「+」ボタンをクリックします。

ワンページサイトに行を追加する

これで新しい行が追加されます。

この行内で、「列を追加」アイコンにカーソルを合わせ、クリックします。

WordPressで複数の列を作成する

これにより、新しい「レイアウトを選択」セクションが追加され、1列または複数列のレイアウトを選択できます。

これらの手順を繰り返すだけで、好きなだけ行を追加できます。

ステップ 10: 「お問い合わせ」フォームを作成する

リードを生成したい場合でも、見積もりリクエストを受け付けたい場合でも、単にオーディエンスとつながりたい場合でも、お問い合わせフォームが必要です。これにより、人々があなたに連絡する方法が得られるため、事実上すべてのワンページウェブサイトに必須の機能となります。

朗報は、SeedProdがWPFormsフォームビルダーとシームレスに統合されることです。私たちはWPBeginnerウェブサイト全体で、すべてのフォームにWPFormsを使用しており、信頼性が高く使いやすいソリューションだと考えています。

詳細については、WPFormsの詳細レビューをご覧ください。

開始するには、フォームを追加したいページのSeedProdエディターを開きます。次に、左側のメニューで「お問い合わせフォーム」ブロックを見つけます。

シングルページサイトまたはブログに問い合わせフォームを追加する

次に、このブロックをライブSeedProdプレビューにドラッグします。

SeedProdは、WPFormsのインストールを求めます。 

WPFormsとSeedProdを使用してカスタムページデザインに問い合わせフォームを追加する方法

WPFormsは無料のプラグインなので、「WPFormsをインストール」をクリックしてください。SeedProdがWPFormsをインストールして有効化します。シームレスな統合であるとお伝えしました!

インストールが完了したら、左側のメニューの「新規フォーム」ボタンをクリックします。

WPForms連携を使用してSeedProdページにフォームを追加する

WPFormsウィンドウが画面に表示されます。

空のフォームから開始するか、テンプレートを選択できます。この場合、すべての種類の連絡フォームの優れた出発点となるため、「シンプルな連絡フォーム」テンプレートを使用することをお勧めします。

このデザインを使用するには、ホバーして、表示されたら「テンプレートを使用」をクリックしてください。 

WPFormsの既製のフォームテンプレート

SeedProdと同様に、WPFormsエディタは右側にライブプレビュー、左側に多くの既製のフィールドを表示します。

テンプレートにフィールドを追加するには、左側のメニューからドラッグしてライブプレビューにドロップするだけです。 

WPForms のドラッグ&ドロップ式フォームビルダー

フィールドを編集するには、右側のプレビューでクリックして選択するだけです。

次に、左側のメニューの設定を使用して変更を加えます。

WordPress のフォームフィールドを編集する方法

より詳細なチュートリアルについては、WordPressでお問い合わせフォームを作成する方法に関するガイドをご覧ください。

フォームの設定が完了したら、「保存」ボタンをクリックして変更を保存します。次に、「x」をクリックしてWPFormsウィンドウを閉じ、メインのSeedProdエディターに戻ります。

シングルページ Web サイトに「お問い合わせ」ページを公開する

SeedProdは、お問い合わせフォームをページに自動的に追加するはずです。 

ただし、表示されない場合は、単に「フォームを選択」ドロップダウンを開き、作成したばかりのフォームを選択してください。 

単一ページウェブサイトまたはブログに連絡フォームを埋め込む方法

ステップ 11: 1 ページ ウェブサイトを公開する

この時点で、ウェブサイトのすべての必須要素が準備完了になっているはずです。

しかし、さらに多くの機能がありますので、さまざまなSeedProdブロックや設定を試して、どのようなデザインを作成できるかを確認するために時間をかけることを強くお勧めします。

1ページサイトの外観に満足したら、保存ボタンをクリックしてウェブサイトを公開する時間です。次に、「公開」を選択します。 

1ページウェブサイトの公開

おめでとうございます。あなたの1ページウェブサイトが公開されました!

ボーナスのヒント:1ページウェブサイトを成長させる方法

これまでお読みいただいていれば、プロフェッショナルな見た目の1ページウェブサイトが完成しているはずです。それは素晴らしいスタートですが、最初のステップにすぎません。次に、人々をあなたのサイトに誘導し、リード、さらには顧客に転換させる必要があります。

ワンページサイトを大成功させるために、推奨する次のステップは次のとおりです: 

  • WordPress用のAll in One SEOを使用して、ウェブサイトのSEOランキングを向上させ、より多くの人があなたのワンページサイトを見つけられるようにしましょう。予算に関係なく検索エンジンのランキングを向上させることができるAIOSEOの無料バージョンもあります。
  • 新しいウェブサイトを関連する検索エンジンの結果に表示させるためのヒントやコツについては、初心者向けWordPress SEO完全ガイドをご覧ください。 
  • 1ページウェブサイトは多くのコンテンツを掲載することが多く、読み込みが遅くなる可能性があります。しかし、訪問者は遅いサイトにほとんど我慢できません。それを念頭に置いて、WordPressの速度とパフォーマンスを向上させるための究極のガイドをご覧ください。
  • 会社の電話番号プロフェッショナルなメールアドレスを作成して、サイトをよりプロフェッショナルに見せましょう。これはすべての Web サイトにとって重要ですが、特にすべての要素がブランドを強化し、良い第一印象を与える必要があるシングルページサイトでは非常に重要です。 
  • 多言語サイトを作成して、WPMLのような翻訳プラグインを使用して、世界中の人々をターゲットにしましょう。SeedProdを使用している場合は、ページビルダーの強力なAI機能を使用してワンページウェブサイトを翻訳することもできます。

この記事がWordPressで1ページウェブサイトを作成する方法を学ぶのに役立ったことを願っています。また、ビジネスウェブサイトに必須のWordPressプラグインの専門家のおすすめをチェックしたり、オンラインポートフォリオの作成方法に関するガイドを見たりすることもできます。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterFacebookでもフォローできます。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、当社が手数料を得る可能性があることを意味します。WPBeginnerがどのように資金提供されているか、それがなぜ重要か、そしてどのように私たちをサポートできるかについては、こちらをご覧ください。当社の編集プロセスはこちらです。

究極のWordPressツールキット

無料のツールキットにアクセスしましょう - すべてのプロフェッショナルが持つべきWordPress関連の製品とリソースのコレクションです!

読者とのインタラクション

コメント

  1. おめでとうございます。この記事の最初のコメント者になる機会を得ました。
    質問や提案はありますか?コメントを残して、議論を開始してください。

返信を残す

コメントを残していただきありがとうございます。すべてのコメントは、当社のコメントポリシーに従ってモデレーションされますので、ご了承ください。メールアドレスは公開されません。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。