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

公開: 2018-01-26

1ページのウェブサイトを作成する方法や1ページのWordPressテーマを販売するかどうかについて多くの質問があります。最初に、これらの両方の質問に答えさせてください。すべてのWordPressテーマは1ページのWebサイトにすることができ、それがいかにシンプルであるかをお見せします。

1ページのWebサイトとは何ですか？

1ページのWebサイトは、すべての重要なコンテンツが1つのページ（通常はホームページ）にあるWebサイトにすぎません。

これは主に、単一の製品またはサービスを明確かつ直接的な方法で宣伝したい企業によって使用されます。いくつかの例は、クライアントにポートフォリオを紹介したり、イベントを開催したり、新しいビジネスを開始したりすることです。

1ページのWebサイトで、ナビゲーションリンクをクリックしても新しいページに移動することはありませんが、同じページをジャンプするか、リンクに接続されているコンテンツセクションにスクロールダウンします。これにより、ユーザーエクスペリエンスが大幅に向上し、ユーザーエンゲージメントが向上します。

オンラインで利用できる1ページのWordPressテーマはたくさんありますが、すでに述べたように、少しの作業で任意のテーマを1ページのポケットベルに変えることができます。

WordPressで1ページのウェブサイトを作成するにはどうすればよいですか？

アンカーリンク

基本的な1ページのWebサイトの場合、必要なのはメニュー、コンテンツ、およびアンカーリンクだけです。メニューやコンテンツの機能をご存知だと思いますので、アンカーリンクについて少しお話しましょう。アンカーリンクは、アンカーとアンカー自体を指す通常のリンクから作成されます。アンカーを指すリンクは通常のリンクであり、 #文字で始まります。そして、アンカー自体はページのどこかにある特定の場所です。簡単な例を見てみましょう。

これは、アンカーを指しているメニューのリンクです。

 <a href="#middle">Go to the middle</a>

そして、これはアンカー自体を含むコンテンツです。

 <h1>Learning about anchor links</h1> <p> Some lorem ipsum content ….</p> <h2>Middle of the page</h2> <p> Some lorem ipsum content ….</p>

この場合、 #middleがアンカーリンクであり、 id=”middle”がアンカーです。「中央に移動」リンクをクリックすると、「ページの中央」というタイトルのアンカーにジャンプします。それでおしまい！これが私たちが最も基本的な1ページのウェブサイトを作る方法です。 Webサイトに必要な数のアンカーを追加できます。新しく習得した知識をWordPressサイトで活用していきましょう。

WordPressメニューでアンカーリンクを作成する

この目的のために、GrowthPressテーマを使用して簡単な1ページのWebサイトを作成しました。これは、実際の例になります。まず、新しいページを作成し、いくつかのコンテンツを追加しました。コンテンツは、いくつかの段落とタイトルのみで構成されています。ほとんどすべてのHTML要素にアンカーを追加できますが、この場合は、コンテンツ内のすべてのタイトルにアンカーを追加します。

1ページのWordPressウェブサイトのアンカー

スクリーンショットからわかるように、コンテンツのHTMLを編集するには、エディターをビジュアルからテキストに変更する必要があります。これで、コンテンツ内のすべてのHTMLタグを確認できます。この場合、すべてのタイトルで<h2>タグが使用され、アンカーを追加するために使用されます。上のスクリーンショットのように、これらのタグにアンカーを付けてIDを追加する必要があります。例： <h2 id=”our-anchor”>Some Title</h2> 。アンカーは#なしで記述されますが、すべてのアンカーリンクは#で始まる必要があることに注意してください。コンテンツにすべてのアンカーを追加したら、それらをアンカーリンクで接続できます。

WordPressに精通している場合は、wp-admin-> Appearance-> Menusでメニューリンクを変更できることをご存知でしょう。これがまさにアンカーリンクを作成する場所です。

1ページのWordPressウェブサイトのアンカーリンク

スクリーンショットから、カスタムリンクを選択し、従来のURLの代わりに#about-usアンカーリンクを追加したことがわかります。そのリンクをクリックすると、コンテンツ内のアンカーid=”about-us”にジャンプします。すべてのアンカーリンクを追加すると、単純な1ページのWebサイトが完成します。新しく作成されたリンクをクリックして、自分の目で確かめてください。

スムーズなスクロール

はい、私は完全に同意します。これまでに行った1ページのWebサイトは素晴らしいですが、これらのインスタントジャンプは、スムーズなスクロールほど素晴らしいものではありません。スムーズなスクロールを実現するには、WebサイトにJavaScriptコードを少し追加する必要があります。

ほとんどのプレミアムテーマには、カスタムコードを追加するための何らかのフィールドがあります。たとえば、テーマでは、wp-admin->カスタマイザー->テーマオプション->カスタムコードに移動できます。ここには、これから行うように、カスタムコードを追加するために使用できるフィールドがあります。

テーマにカスタムコードの場所がない場合は、適切なプラグインを使用できます。 WPBeginnerのInsertHeadersandFootersプラグインをお勧めします。プラグインをアクティブ化すると、wp-admin->設定->ヘッダーとフッターの挿入にカスタムコードを追加するためのフィールドが表示されます。

以下のコードをフィールドの1つに貼り付けます（フッター設定でスクリプトを使用することをお勧めします）。これで、アンカーリンクをスムーズにスクロールできます。おめでとう！ WordPressテーマで1ページのWebサイトを作成しました。

 <script> ( function( $ ) { $(document).on('click', 'a[href*="#"]:not([href="#"])', function(e) { if (location.pathname.replace(/^\//,'') === this.pathname.replace(/^\//,'') && location.hostname === this.hostname) { var hashStr = this.hash.slice(1); var target = $(this.hash); target = target.length ? target : $('[name=' + hashStr +']'); if (target.length) { $('html, body').animate({ scrollTop: target.offset().top }, 1000); window.location.hash = hashStr; return false; e.preventDefault(); } } }); }(jQuery)); </script>

上記のコードは、アンカーリンクをクリックするとスクロール効果をアニメーション化し、クリックされたアンカーリンクを反映するように現在のブラウザのURLも更新します。完成した1ページのWebサイトで最終結果を確認してください。

スムーズスクロールのオフセットを設定するにはどうすればよいですか？

スティッキーメニューを修正した場合は、オフセットも設定することをお勧めします。これにより、コンテンツの開始はスティッキーメニューの下から始まります。これを実現するには、次のコード行を編集する必要があります。

 $('html, body').animate({ scrollTop: target.offset().top}, 1000);

ここで行う必要があるのは、オフセットの値を追加することだけです。少なくとも、固定されたスティッキーメニューの高さと同じ大きさである必要があります。

 $('html, body').animate({ scrollTop: target.offset().top - 180 }, 1000);

これにより、コンテンツの先頭がメニューの後ろに隠れてしまう問題を回避できます。

1ページのウェブサイトの長所

1ページのWebサイトを作成する方法がわかったので、1ページのWebサイトを使用することの長所を見ていきましょう。

1ページのWebサイトは、より優れたモバイルユーザーエクスペリエンスを提供します

1ページのWebサイトは、モバイル表示に最適な1つの長いスクロールページで構成されています。 Facebookとそのニュースフィードについて考えてみてください。ウサギの穴をさらに下にスクロールし続けるしかないのです。 1ページのWebサイトはまさにそれを行うように設計されており、継続的なスクロールはモバイルデバイスに最適です。

モバイルデバイスの画面領域は限られているため、メニューが隠れている場所を特定してから正しいリンクをクリックしてWebサイトの次のページに移動するよりも、下にスクロールし続ける方がはるかに簡単です。つまり、1ページのWebサイトは、モバイルデバイスでWebサイトにアクセスするすべてのユーザーに優れたユーザーエクスペリエンスを提供します。

1ページのウェブサイトはより少ないテキストを必要とします

従来の複数ページのWebサイトは大量のテキストを必要とするため、空っぽに見えたり、さらに悪いことに未完成に見えたりすることはありません。コンテンツが多すぎると雑然としていて圧倒的に見える1ページのWebサイトとは対照的です。そのため、コピーを最小限に抑え、短い文と段落を使用して最も重要な情報を伝える必要があります。

このアプローチのもう1つの利点は、コピーの作成がWebサイトの立ち上げに関連するより困難な作業の1つになる可能性があるという事実です。 Webサイトのコピーを完全に具体化していない場合は、1ページのWebサイトが最適です。

1ページのウェブサイトは画像でうまく機能します

画像は、1ページのWebサイトを含め、あらゆるタイプのWebサイトで驚異的な効果を発揮します。実際、視差効果と組み合わせた画像を使用すると、Webサイトに視覚的に魅力的な効果を生み出すことができます。

視差効果を使用しない場合でも、1ページのWebサイトで画像を効果的に使用できます。共有フォトギャラリーやポートフォリオ画像は言うまでもなく、それらを使用してさまざまなセクションを区別することができます。

正しく最適化すると画像が検索エンジンの結果に表示される傾向があるため、画像を利用してWebサイトのSEOを向上させることもできます。そのため、説明的なタイトルを使用して画像に名前を付け、サイトに追加する各画像にaltタグを追加してください。

1ページのウェブサイトはユーザーエンゲージメントとコンバージョンを高めることができます

ある調査によると、1ページのWebサイトは、複数ページのWebサイトに比べてコンバージョン率が高くなる可能性があります。この背後にある理由は単純です。1ページのWebサイトは通常、訪問者に行動を起こさせるように非常に焦点を絞って設計されています。

より焦点を絞ったメッセージがあり、訪問者がページの最後に到達したときに何をしてほしいかを訪問者が理解しやすくなります。

選択肢が1つしかない場合は、ページ間を移動して次に何をすべきかを考えるのではなく、そのボタンをクリックするか、行動を起こすのが簡単です。

1ページのWebサイトはナビゲートしやすい

また、1ページのWebサイトの方がナビゲートしやすいことにも言及する価値があります。すべてが1つのページにあるため、特にモバイルデバイスでは、迷子になって最初に戻る方法を見つけるのは非常に困難です。

アンカーリンクを使用してページのさまざまなセクションにジャンプできますが（この記事に示されているように）、上下にスクロールして目的のセクションを見つけるのも同じくらい簡単です。

それに加えて、うまく設計された1ページのWebサイトは、論理的な方法であなたのビジネスやブランドのストーリーを伝える旅に訪問者を導きます。

1ページのWebサイトにより、特定のオーディエンスを簡単にターゲティングできます

前述のように、単一ページのWebサイトは、訪問者に行動を起こさせるように設計されています。これを有利に使用して、次のステップに進む準備ができている非常に特定のオーディエンスをターゲットにすることができます。あなたのウェブサイトのさまざまなセクションを通して彼らを導くことによって、あなたはあなたの製品やサービスを提示し、それが彼らの問題をどのように解決するかを彼らに示し、行動を促す形で彼らに解決策を提供することができます。

このアプローチは、特定の問題があることをすでに知っていて解決策を探している非常に特定のキーワードまたはオーディエンスをターゲットにしている場合に最適です。

1ページのWebサイトを使用することの短所

プロが邪魔にならないように、1ページのWebサイトを使用することの欠点のいくつかを見てみましょう。

GoogleAnalyticsデータの分析は難しくなります

今までに、あなたはおそらくグーグルアナリティクスがあなたにあなたのウェブサイト訪問者についての有用な情報の山を与えることができることを知っているでしょう。サイトにインストールすると、人気のあるページ、新しい訪問者を呼び込む投稿、サイトに長く滞在するために最適化する必要のあるページを確認できます。

1ページのWebサイトでは、1ページだけに制限されます。あなたの訪問者は同じページに着陸し、同じページに立ち寄り、あなたのウェブサイトのどの部分を改善する必要があるかを知るのを難しくしています。 1ページのWebサイトルートを使用する場合は、Hotjarなどのツールにサインアップして、人々がWebサイトをどのように使用しているかを視覚的に示すヒートマップを取得してください。

ソーシャルメディアであなたのウェブサイトを共有するのは難しい

1ページのWebサイトでは、ソーシャルメディアで共有できるURLは1つだけです。これはすぐに繰り返される可能性がありますが、問題の答えを見つけるためにWebサイトのさまざまな部分に人々を送る機会があまりないことは言うまでもありません。メインのURLを共有すると、複数ページのWebサイトのように特定のページやセクションではなく、Webサイト全体が共有されます。

簡単な回避策は、視聴者を引き付ける有用で役立つコンテンツを共有できるブログをWebサイトに組み込むことです。これにより、情報の大部分を1つのページに凝縮したまま、ソーシャルメディアでWebサイトを簡単に共有できます。。

1ページのウェブサイトの読み込みに時間がかかる場合があります

1ページのWebサイトのサイズと共有するコンテンツの種類によっては、Webサイトの読み込みに時間がかかる場合があることに注意してください。

一般的に、1ページのWebサイトはかなり軽い傾向がありますが、Web用に最適化されていない画像がたくさんある場合は、読み込み時間が遅くなります。あなたのサイトにたくさんのビデオコンテンツがある場合も同じことが当てはまります。

そのため、画像を適切な形式で保存し、サイトに追加する前にサイズを圧縮することが重要です。考慮すべきもう1つのことは、画像や動画の遅延読み込みを使用して、ユーザーがサイトの特定のセクションにスクロールダウンしたときに、すぐに読み込むのではなく、画像や動画を読み込むようにすることです。

キーワードターゲティングに制限があります

1ページのウェブサイトは複数のキーワードをターゲットにするための多くの機会を提供しません。複数ページのWebサイトでは、ターゲットにしようとしているキーワードごとに個別のページを作成できます。 1ページのWebサイトは同じようには機能しません。

プロのセクションで述べたように、1ページのWebサイトは、特定の目的と対象者を念頭に置いて設計されています。これは通常、特定のキーワードとそのバリエーションをターゲットにすることを意味します。つまり、複数の異なるキーワードをターゲットにする必要がある場合は、複数ページのWebサイトを作成する方がよいでしょう。

ページごとに複数の個別のキーワードを組み込むことができないという規則はありませんが、特にライトコピーが1ページのWebサイトでより適切に機能することを考慮すると、ページを適切に最適化することはできません。

高度なSEO戦術を使用することはできません

SEOと言えば、1ページのWebサイトでは、サイロ化と呼ばれる高度なSEO戦術を使用できません。 Siloingとは、Webサイトを主要な関心領域に構造化して、それらの領域での権限を示すことができるようにすることを指します。素人の言葉で言えば、それはあなたのコンテンツを整理するためにカテゴリーとサブカテゴリーを作成する習慣です。

サイロ化の主な利点は、関心のある訪問者が持つ可能性のあるほとんどすべての質問をカバーし、考えられるすべての反対意見をカバーする多数のキーワードおよびキーワードフレーズのランク付けの可能性を開くことです。

複数ページのWebサイトはこれに優れていますが、1ページのWebサイトはすぐに圧倒されて雑然とし、視聴者を苛立たせます。

1ページのウェブサイトは詳細を提供するのに欠けている可能性があります

最後に、短く簡潔なコピーとメッセージングのために、1ページのWebサイトでは、訪問者に必要なすべての詳細を提供できない場合があります。これにより、説明を求めたり、訪問者を混乱させたりする電子メールの数が増える可能性があります。

この問題は、1ページのWebサイトにブログを追加し、訪問者にさらに詳細なコンテンツを提供し、質問が発生したときに回答することで解決できます。

1ページのWebサイトを使用する必要がありますか？

ご覧のとおり、1ページのWebサイトを使用することには確かに長所と短所があります。では、1ページのWebサイトがあなたのビジネスにとって正しい選択であるかどうかをどうやって知るのでしょうか？

あなたがあなたのビジネスを始めたばかりで、口コミを通して多くのビジネスを生み出すなら、1ページのウェブサイトはあなたがデザインと開発にあまり多くの時間を費やすことなくあなたのビジネスをオンラインにすることを可能にします。

一方、SEOに焦点を当ててより多くのオーガニックトラフィックを獲得することに焦点を当てたい場合、および事業運営を拡大している場合は、複数ページのWebサイトの方が適しています。

結局、それは個人的な好みとあなたのビジネス目標の問題です。あなたがあなたのビジネスでどこにいるかを評価し、あなたが達成しようとしていることに注意してください。次に、最終決定を行う前に、上記の長所と短所を検討してください。

結論

ある種の1ページのテーマがあるかどうかという質問が本当にたくさんありますが、状況は他のテーマの作者と同じだと思います。この記事では、すべてのWordPressテーマを1ページのWebサイトとしても使用でき、必要に応じて、現在のWebサイトをすぐに1ページのポケットベルに変更できることを明確にする必要があります。また、1ページのWebサイトの長所と短所についても説明し、これがWebサイトにとって正しい選択であるかどうかを判断する方法を共有しました。

この記事が1ページのWebサイトをよりよく理解するのに役立ったかどうかを知らせてください。さらに質問がある場合は、コメントを残してください。