WordPressで1ページのWebサイトを作る方法

成功しているWebサイトの多くは、多くのページとコンテンツを持つ大規模で複雑なものです。 しかし、ウェブデザインの世界では、本当に多ければ多いほどいいということはありません。

この記事では、このタイプのサイトの利点と応用について、より詳しく説明します。 そして、わずか3つのステップでWordPressで1ページのWebサイトを作成する方法を紹介します。 それでは始めましょう！

📚 目次：

1ページのWebサイトを作成する理由

ほとんどのWebサイトには複数のページが存在します。 最低でも、ホームページ、連絡先ページ、会社概要ページ、提供するコンテンツやサービスのページがあります。

一方、1ページのホームページは、重要な情報をすべて1つのホームページに凝縮し、多くの場合、専用のセクションを含めることによって行います。

• シンプルなので、訪問者がサイトをナビゲートして必要なものを見つけるのが簡単になります。
• 維持するためのコンテンツが非常に少ないので、メンテナンスが簡単です。 大規模で複雑なサイトには、そのような場所があります。 しかし、中小企業のサイト、ポートフォリオ、またはシンプルな店頭を運営している場合は、この形式を検討するとよいでしょう。
  

  The essential elements of a one-page website

  ウェブサイトが1ページしかない場合、何を含めるかを非常に慎重に検討する必要があります。 ページを乱雑にしたり、視聴者を圧倒したりすることなく、視聴者が必要とするすべての情報を提供することが重要です。

  1ページのWebサイトを作成する場合に不可欠な要素をいくつか紹介します。

  • サインアップ、問い合わせ、購入ボタンなどの目立つ行動喚起（CTA）、
  • あなたやあなたの会社、組織が何者であるかを説明する会社概要セクション、ロゴとタグラインなどのブランディング要素。
  • 関連する場合は、製品やサービスのリスト。
  • ソーシャルメディア・プロフィールを含む、ウェブ上の他の場所やコンテンツへのリンク。
  • 可能であればさまざまなチャネルを含む連絡先情報。

  

  これらの要素の順序に注意を払うことも重要です。 一般に、最も重要な情報とCTAを早い段階で配置し、連絡先の詳細とリンクはページの一番下に近いところに配置するのがよいでしょう。 視聴者が何をどのような順番で見る必要があるのかを考えることで、どの要素をどのように配置するかを決めることができます。

  最後に、1ページのWebサイトのデザインを使用しているからといって、必ずしもブログを持つことができないわけではありません。

  How to create a one-page website (EXACT STEPS)

  さて、実際にどのようにサイトをデザインしていくかについて説明します。 まず、既存の1ページのWebサイトの例をいくつか見て、インスピレーションを得ましょう。

  ステップ1：サイトの焦点を決める

  

  これまで説明してきたように、1ページのWebサイトを選択すると、そのデザインについて非常に慎重でなければならないことを意味します。 これには、目標を明確にすることも含まれます。 1470>

  これを行うには、サイトを設計する際の主要なCTAを検討します。 会員登録、製品の購入、イベントへの参加、仕事の依頼など、訪問者に何をしてもらいたいのか。 ページ上のあらゆるものが、その行動を促すものでなければなりません。 これは、必要な情報を提供し、メリットを説明し、次のステップを明確にすることを意味します。

  Step 2: 質の高い1ページテーマを選択する

  

  WordPressで1ページサイトを作成すると決めた場合、好きなテーマを使用することができます。 しかし、賢明な戦略は、多くの場合、このタイプのサイトを設計するのに役立つように特別に構築された 1 ページのテーマを選択することです。

  1ページのテーマを選ぶとき、以下のものを探してみてください：

  • 連絡先セクションなど、必要な要素があらかじめ組み込まれているページビルダー。
  • ページを視覚的に区別できる複数のセクションに分割する方法。
  • 訪問者がページ内のさまざまなセクションにジャンプできるようにするナビゲーション。 たとえば、Neveは、簡潔でありながら包括的な1ページサイトに最適な多目的テーマです。 これは、多くの一般的なページビルダーと互換性があり、ライブカスタマイザーが含まれており、ワンページサイトをすばやくセットアップすることができます。 また、連絡先、経歴、店頭などのセクションもあらかじめ用意されています。
    

    Step 3: Design your site

    サイトに何を含めたいか、その焦点について明確で、強力なテーマを選択したら、実際にページの設計を開始できます。

    • ページはシンプルに保ち、明確な目的を果たさないものは含めない
    • さまざまなヘッダーや背景で、異なるセクションを明確に区別する。
    • 訪問者が必要なセクションにすばやく移動できるようなナビゲーションを作成する。
    • 主要なCTAを目立たせ、説得力を持たせる。

    このアドバイスに従って、すぐに素晴らしい1ページサイトを作成できるようになる。

    Elementorで1ページサイトを構築する

    Elementorは使いやすく、機能豊富なページビルダーで、WordPressサイト内に任意の数のページを簡単に作成することができます。 これは、優れた 1 ページの Web サイトを作成するのに最適なツールです。

    以下のセクションでは、それを行う方法を紹介します。 今回使用する例は、青果店のサイトです。

    • コンテンツを収容する多くのセクションを持つ1ページ
    • 訪問者がクリックして関連セクションに直接移動できるメニュー
    • ロゴとメニューを収容するヘッダー
    • フッター

    最後にウェブサイトがどう見えるかのプレビューをお見せします。

    

    各ステップを詳細に説明しますが、基本的なプロセスは次のとおりです。

  • まだインストールしていなければ、Elementor プラグインをインストールします。
  • ウェブサイトの「キャンバス」（ヘッダー、フッター、メニュー）を設定します。
  • Elementorでコンテンツを追加します。
  • メニューをデザインの異なるセクションにリンクし、1ページナビゲーション効果を生み出します。

  無料のテーマ Neve をインストールします

  • WordPressダッシュボードで外観→テーマ→新規追加に移動します。
  • 「Neve」を検索
  • インストールボタンをクリック
  • WordPressにテーマがインストールされましたら。 有効化] をクリックして、本稼働させます

  

  無料の Elementor プラグインをインストールします

  • プラグイン → 新規追加
  • “Elementor”
  • 無料 Elementor Page Builder プラグインをインストールして有効化してください。

  

  これで、WordPress のクリーン インストール、アクティブな Neve テーマ、Elementor ページ ビルダーがあれば、1 ページのウェブサイトを構築する準備はすべて整いました。

  ヘッダー、フッター、メニューを設定する

  1ページWebサイトのヘッダー、フッター、メニューを設定するために、Neveテーマを使用します。

  ヘッダー

  WordPressのダッシュボードで、外観 → テーマ → カスタマイズをクリックし、Neveテーマをカスタマイズしてください。

  

  まず、ウェブサイトの色と背景を選択します

  

  次に、カスタマイズパネルで、ヘッダー → ロゴの変更をクリックして、あなたのサイトのロゴを追加してください。 ロゴの幅を調整し、サイトタイトル、サイトアイコン、キャッチフレーズを追加します。 ヘッダーにサイト名とキャッチフレーズを表示するかしないかを選択します。

  

  ［レイアウト］タブで、ヘッダーのレイアウトと色を選択し、パディングと余白を設定する。 または、ヘッダーのプリセットから 1 つを選択します。

  メニュー

  次に、ヘッダーに表示されるナビゲーション メニューを作成する必要があります。 これを行うには、メニュー → 新しいメニューを作成 をクリックします。 名前を付けて、そのメニューの場所をプライマリメニューと同じに設定します。

  「次へ」をクリックして、項目を追加します。 ここで、これから作成するセクションの名前を追加します。 例えば、「Main」「About Us」「Products」「Contact」などです。 これを行うには、［カスタムリンク］ボタンをクリックします。

  URLフィールドに、ハッシュタグの後にそのセクションの名前を入力します。 後で Elementor を設定するときに、これらのリンクがデザイン内の特定のセクションに移動するように設定します。 例：

  • #about-us
  • #products
  • #contact

  

  Footer

  Footerに移動してテキストと背景色を追加してください。 ここで好きなコンテンツを追加できます。

  

  すべての変更を保存するには、公開をクリックします

  この段階で、あなたのサイトにはヘッダー、フッター、メニューが備わっています。 以下のような外観になるはずです。

  

  新しいページを作成して Elementor でコンテンツを追加する

  始めるには、ページ → 新規追加で新しいページを作成します。 ページには名前をつけます。 テーマがサイドバーを提供している場合は、それも表示されます。 しかし、「ページの属性」を全幅に調整することで、サイドバーをカットすることができます。

  

  開いた新しいページで、[Elementor で編集] をクリックします。 左側にパネルが表示されます。 右側には、ウェブサイトが形作られるのを見る編集エリアがあります。

  

  Elementor インターフェイスの簡単な紹介

  次に進む前に、Elementor パネルを見てみましょう。 見出し、段落、画像または動画のような多くの創造的な要素またはウィジェットを備えています。 これらをドラッグしてコンテンツに追加できます。

  パネルの左上にはハンバーガーメニューがあり、多くのオプションが表示されます。 ここでは、色、フォント、およびテーマ スタイルをグローバル レベルで調整することができます。 言うまでもなく、これは、新しいページを追加する際の多くの時間を節約します。

  

  このタブから、いつでも WordPress ダッシュボードに移動できます。

  パネルの下部には、ページ設定の調整、ページの名前、編集履歴、および応答モードの間のスイッチングのオプションがあります。 また、ページの整理されたビューを表示するナビゲーターがあります。

  目のアイコンをクリックすると、ページをプレビューでき、公開する準備ができたら、公開ボタンを押します。

  さて、いよいよコンテンツの追加です。

  Elementorで1ページのWebサイトを作成する2つの方法

  この段階で、Elementorで1ページのWebサイトを構築するには、2つの方法を選択することができます。

  1. Elementor の事前構築されたテンプレートの 1 つを挿入し、それを希望どおりにカスタマイズします。 この目的のために、あなたのデザインのライブプレビューでフォルダアイコンをクリックすると、それはいくつかの無料と多くのプロのテンプレートが開かれます。 ページ]タブでは、ページ全体の完全に完成されたデザインを見つけることができます。 ブロック] タブには、大きなページの特定のセクションのための構築済みのテンプレートがあります (これは 1 ページの Web サイトに最も便利です)。 その後、すべての要素を完全にカスタマイズすることができます。

  

  または、プラス ボタンをクリックしてセクションを追加し、白紙の状態からデザインを構築することによって、最初から始めることができます。

  このチュートリアルの目的のために、両方の方法の組み合わせを採用します。

  Elementor で 1 ページの Web サイトのセクションを作成する方法

  Elementor では、セクション、列、およびウィジェットを使用して、任意のページのレイアウトを作成します。 セクションは最大の構成要素であり、その中にカラムを追加することができます。 これらのセクションやカラムの中に、あなたが望むウィジェットを追加することができるでしょう。

  

  「+」記号をクリックしてセクションを追加し、列の構造を選択します。

  セクションにカーソルを合わせると、上部にハンドルが付いた青い枠線が表示されます。 このハンドルで、既存のセクションの上に新しい空白のセクションを追加したり、セクションを編集/削除したりすることができます。 中央のドットをクリックすると、レイアウト、スタイル、詳細といったセクションのコントロールにアクセスできます。 さらに、ドット上をドラッグしてセクションを上下に移動したり、右クリックで複製や削除などのオプションを表示したりできます。

  同様に、上部の角にある列アイコン ハンドルをクリックすると、セクション内の列レイアウトを選択することができます。 また、列の幅や列と列の間のスペースを調整することができます。 ボックスを右クリックして、列を追加したり、既存の列を複製したり、削除したりできます。

  Elementorパネルから、任意の要素（ウィジェットと呼ばれる）を列にドラッグすることができます。 要素をカラムやセクションに追加すると、右上にペンシルのアイコンが表示されます。 このアイコンをクリックすると、Elementor パネルにコンテンツ、スタイリング、および高度な編集オプションが表示されます。

  最初のセクションの作成方法

  最初のセクションは、訪問者にビジネスの性質とそれについて少し知ってもらうために使用することにします。 そのため、セクションの幅をフルに使って、背景画像を載せることができます。 セクションのレイアウトを編集しながら、ボタンを切り替えるだけで、コンテンツの幅を調整し、セクションをページの幅いっぱいに引き伸ばすことができます。

  背景画像を追加するには、ハンドルのドットをクリックして、セクションの編集オプションを選択します。 パネルに表示される [スタイル] タブにアクセスし、メディア ライブラリから画像をアップロードします。 オーバーレイと同様に画像のサイズを調整します。

  

  私たちは、セクション内に 1 つの列を追加し、セクション内の中央に配置します。 カラム内では、新鮮な果物や野菜を販売していることを訪問者に伝える見出し、宅配オプションに注目させるテキスト エディタ、訪問者が注文できるボタンの 3 つのウィジェットを使用します。

  見出しウィジェットの追加：

  

  テキストウィジェットのドラッグ：

  

  ボタンウィジェットの追加：

  

  ここで編集オプションを使って、各ウィジェットをカスタマイズすることができます。

  

  必要であれば、列アイコンをクリックして列を追加することにより、ウィジェットを 3 つの別々の列に追加することもできます。 ここで重要なことは、各ウィジェットはレイアウトやスタイルなどを細かく調整できることです。

  残りのセクションを作成する

  最初のセクションが完了したので、残りの 3 つ、「会社概要」、「製品」、「お問い合わせ」に移ります。

  

  前述のように、これら 3 つのセクションを構築するには、Elementor ライブラリの既製品のテンプレート ブロックを使用します。 Elementor には、これらの各カテゴリの下に多くの無料のテンプレート ブロックがあり、ライブラリは検索可能です。

  会社概要セクションについては、見出し、テキスト エディタ、およびビデオ ウィジェットを備えたシンプルなテンプレート ブロックを選択します。 このすべてを独自のコンテンツに置き換えることができます。

  

  置換したコンテンツを含むテンプレート ブロック：

  

  同じ方法で、製品および連絡先セクションにテンプレート ブロックを使用することができます。 Contact セクションに使用するテンプレートには、ソーシャルメディア アイコンが付属しています。 スタイル] タブをクリックして、アイコンの色、サイズ、パディングなどを制御します。

  Elementor では非常に多くのカスタマイズができるので、これらのセクションをインポートしたテンプレートと異なる外観にすることができます。

  必要な変更を行い終わったら、緑色の [公開] ボタンをクリックし、変更をサイトに反映します。

  1 ページのセクションにメニューをリンクする

  クリックできるナビゲーション メニューを持つために、ステップ 3 で作成したナビゲーション メニューと Elementor デザイン内の各種セクションを接続する必要があります。 これを行うには、セクションの ID を開き、Advanced タブに移動します。 対応するセクションの Elementor Panel の CSS ID フィールドに、ハッシュタグなしで正しいセクション名を記入します。

  たとえば、メニューが #about-us にリンクしているなら、CSS ID を about-us として追加することになります。

  

  デザインをホームページに設定する

  最後のステップとして、先ほど作成したページを、Elementor で作成した 1 ページサイトのホームページとして設定することが可能です。 そのためには、「設定」→「リーディング」に進みます。 Your homepage displays の下にある Select a static page をクリックし、作成したデザインを選択します。 最後に、「変更を保存」をクリックします。

  

  どのステップでも混乱している場合は、WordPress の静的ホームページのセットアップに関する完全ガイドを用意していますので、ご覧ください。 以下は、その例です。

  

  Conclusion

  場合によっては、1 つか 2 つの重要なタスクだけを実行するウェブサイトが必要なことがあります。 そのような状況では、1ページのサイトが最適なソリューションとなります。 あなたが奨励したい行動を取るために訪問者が必要とする情報だけを含めることができ、あなたのサイトを維持する仕事をできるだけ簡単にすることができます。

  今日から1ページのWebサイトを作成するための3つの簡単なステップを紹介します。

  1. サイトの焦点を決定する。