Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressでサービスセクションを作成する方法(2つの簡単な方法)

編集メモ: WPBeginner のパートナーリンクから手数料を得ています。手数料は編集者の意見や評価に影響を与えません。編集プロセスについて詳しく知る。

WordPressでサービスセクションを作成したいですか?

潜在的なカスタマイザーがサイトを訪れたとき、彼らはあなたが何を提供しているのか知りたいと思うでしょう。サービスセクションは、訪問者があなたのビジネスについてさらに詳しく知りたいかどうかを判断できるように、迅速かつ簡単な方法でこの情報を伝えることができます。

この投稿では、WordPressで簡単にサービスセクションを作成する方法を紹介します。

How to create a services section in WordPress

なぜWordPressにサービスセクションを作るのか?

WordPressサイトにサービスセクションを設けることは、サービスサイトを運営する上で重要です。訪問者に、メリット、価格、技術仕様など、提供するサービスについて必要な情報をすべて提供することができます。

そうすることで、訪問者は特定のサービスについてもっと詳しく知りたいかどうかを素早く簡単に判断することができる。

An example of a services section

通常、ホームページやランディングページのサービスセクションは、各項目の詳細を記載したカスタマイザーページにリンクされます。

これは、訪問者がカスタムページで各サービスについてさらに詳しく知ることができるようにするためである。

An example of a services section with CTA buttons

サービスセクションの最後に行動喚起を追加することもできます。例えば、訪問者が個別に見積もりを依頼できるフォームを追加することもできます。

次の画像は、明確な行動喚起ボタンがあるサービスセクションを示しています。

An example of a contact us form

そこで、WordPressでサービスセクションを作成し、ビジネスサイトの任意のページに追加する、初心者にやさしい2つの方法を見てみましょう。以下のクイックリンクからお好きな方法にジャンプしてください:

方法1:SeedProdでサービスセクションを作成する(推奨)

プロフェッショナルにデザインされたサービスセクションを作成する最も簡単な方法は、ページビルダーを使用することです。優れたページビルダープラグインを使えば、好きなだけ多くのサービスを宣伝し、ユーザーフレンドリーなレイアウトでそれらを配置することができます。

また、CTA、リンク、ボタンなどを追加することで、訪問者にサービスについてさらに詳しく知ってもらうことができます。

SeedProdはWordPressのための最高のドラッグアンドドロップページビルダーです。300以上のプロフェッショナルなウェブデザインテンプレートと、サービスセクションを作成するのに最適な既製のセクションが付属しています。

SeedProdはまた、コンバージョンを獲得・管理するためにすでに使用している多くの人気のあるサードパーティツールと連携します。これには、トップクラスのメールマーケティングサービス、WooCommerce、Google アナリティクスなどが含まれます。

SeedProd Website and Theme Builder

さらに詳しく知りたい方は、SeedProdの詳細レビューをご覧ください。

まず、SeedProdプラグインをインストールして有効化する必要があります。詳しくは、WordPressプラグインのインストール方法のステップバイステップガイドをご覧ください。

注: SeedProdには無料版もありますが、テンプレートやブロックの数が多いSeedProd Proを使うことにします。

プラグインを有効化した後、SeedProdはライセンスキーを要求します。

SeedProd license key

この情報は、SeedProdサイトのアカウントで確認できます。ライセンスキーを入力したら、先に進み、「Verify key」をクリックします。

プロがデザインしたテンプレートを選ぶ

次のステップは、サービスセクションを追加する新しいページを作成することです。これを行うには、WordPressダッシュボードのSeedProd ” ランディングページに移動します。

そうしたら、「新規ランディングページを追加」ボタンをクリックします。

SeedProd's page design templates

SeedProdの既製テンプレートからお好きなものをお選びいただけます。

最適なテンプレートを見つけるために、SeedProdのサイトデザインは、スクイーズ、リード、セールス、カミングスーンなどのキャンペーンタイプ別に構成されています。

画面上部のタブをクリックすると、キャンペーンタイプに基づいてテンプレートをフィルターできます。

The SeedProd template library

ゼロから始めたい場合、SeedProdには初期設定のコンテンツやデザイン要素がないブランクテンプレートもあります。

デザインを詳しく見るには、テンプレートの上にマウスオーバーし、小さな虫眼鏡アイコンをクリックするだけです。

Previewing a SeedProd template

使いたいレイアウトが見つかったら、「このテンプレートを選択」をクリックします。画像ではすべて「Masterclass Sales Page」テンプレートを使用していますが、お好きなテンプレートを使用することができます。

テンプレートを選択したら、カスタムページの名前を入力します。SeedProdはタイトルを使って自動的にURLを作成しますが、必要であれば変更することができます。

説明的なURLは、検索エンジンがページの内容を理解するのに役立ち、あなたのようなコンテンツを探している人にそのページを届けることができます。

Creating a new page using SeedProd

あなたのページが関連する検索結果に表示される可能性を高めるために、関連するキーワードをURLに追加するとよいでしょう。これにより、WordPressのSEOを向上させることができます。

入力した情報に問題がなければ、「保存してページの編集を開始する」ボタンをクリックします。

カスタムページのデザイン

SeedProdのドラッグ&ドロップページビルダーが表示されます。右側にはページのプレビューが表示され、左側にはいくつかの設定が表示されます。

The SeedProd page builder

ほとんどのSeedProdテンプレートにはすでにいくつかのブロックが含まれており、これらはSeedProdレイアウトの中核をなす部分です。

ブロックをカスタマイズするには、クリックして選択するだけです。左側のメニューには、フォントサイズの変更など、ブロックを編集するための設定がすべて表示されます。

Customizing a SeedProd block

ページテンプレートからブロックを削除したい場合は、そのブロックをクリックするだけです。

次に、フローティングツールバー内の小さなゴミ箱アイコンをクリックします。

Deleting blocks from a custom layout

デザインに新規ブロックを追加するには、左側のメニューからブロックをクリックし、エディター上にドラッグするだけです。

その後、クリックしてブロックを選択し、左側のメニューで変更を加えることができます。

これらのステップを繰り返して、どんな種類のページでも作ることができる。

サービスセクションの追加

SeedProdには、「セクション」も用意されています。これは、行とブロックの組み合わせで、よく一緒に使用されます。例えば、SeedProdには、よくある質問、フッター、ヘッダー、カスタマイザーなどのセクションがあります。

また、WordPressでサービスセクションを作成するのに最適な様々なセクションがあります。さまざまなセクションを見るには、「セクション」タブをクリックしてください。

これらのミニテンプレートは異なるカテゴリーで構成されています。サービスセクションを作成するには、「機能」カテゴリーをご覧になることをお勧めします。

SeedProd 'Features' sections

ここでは、段落、小見出し、画像を使用したセクションが見事にレイアウトされている。

次の画像では、アイコンの付いたフィーチャー・ボックスに似た「フィーチャー3」セクションが見えます。これをサービスセクションにするには、独自のテキストと画像を追加するだけです。

An example section template

また、「Call To Action」カテゴリーもご覧ください。これには、あなたのサービスを宣伝するために使用できるいくつかのセクションを含む、多くの異なるセクションがあります。

次の画像では、「Call To Action 6」セクションがあり、すでに3つのサービスのためのスペースがあります。

An example CTA section template

セクションをプレビューするには、そのセクションにマウスオーバーし、外観に表示される虫眼鏡アイコンをクリックするだけです。

使いたいセクションが見つかったら、そのセクションの上にマウスを移動させ、小さな「+」アイコンをクリックするだけです。

Adding a services section to your WordPress website

これでセクションがページの一番下に追加されますが、ドラッグ&ドロップでセクションやブロックをデザインのあちこちに移動させることができます。

セクションを追加した後、そのセクション内のブロックをクリックするだけでカスタマイズできます。まずは、あなたのサービスに関する情報を入力してください。

これを行うには、任意のテキスト、見出し、または同様のセクションをクリックするだけです。次に、左側のメニューに表示されるテキストフィールドに入力します。

Editing a services section in WordPress

WordPressのコンテンツエディターでテキストをスタイル設定するのと同じように、テキストをフォーマットすることもできます。

また、訪問者がサービスについてさらに詳しく知ることができるよう、リンクを追加するのも良いアイデアだ。

Customizing the services section in WordPress

もう一つのオプションは、「行動喚起」ボタンを使うことです。セクションにビルトインのボタンがなくても、簡単に追加できます。

左側のメニューで、小さな点がたくさん並んだような「ブロック」アイコンをクリックする。

How to add blocks to a services section

次に、「ボタン」ブロックをセクションにドラッグ・アンド・ドロップします。

ボタン’ブロックを追加した場合は、他のブロックの編集とまったく同じ方法でカスタマイズできます。ブロックをクリックし、左側のメニューから変更を加えてください。

Adding a CTA button to a services section with WordPress

上記と同じ手順でブロックを増やすことができる。

例えば、’Image’ブロックを使って、各サービスの動作を見せることができる。

Adding images to a services section

CSSアニメーションを追加して、サービスセクションを目立たせることもできる。

ページの見た目に満足したら、「保存」ボタンの隣にあるドロップダウンの矢印をクリックして公開しましょう。

次に、「公開する」オプションを選択します。

Publishing a services section to your WordPress website

ページがWordPressサイト上で公開され、訪問者はすべてのサービスを一目で確認できるようになります。

SeedProdでサービスセクションをカスタマイズするためのヒントやコツをもっと知りたいですか?以下のチュートリアルをご覧ください:

方法2: サービスボックスショーケースでサービスセクションを作成する(無料)

無料のサービスボックスショーケースプラグインを使ってサービスセクションを作成し、ショートコードを使ってページや投稿に追加することもできます。

プラグインにあらかじめ用意されているサービスセクションのレイアウトのいずれかを使用する必要があるので、最もカスタマイズしやすい方法とは言えません。

しかし、このプラグインでは、使い慣れたWordPressのブロックエディターを使ってサービスセクションを作成できるので、素早く簡単に作成できます。

まずは、無料のサービスボックスショーケース プラグインをインストールして有効化してください。詳しくは、WordPressプラグインのインストール方法をご覧ください。

有効化したら、Service Box ” Add New Service Boxにアクセスしてください。

The Service Box Showcase plugin

まずはじめに、サービスセクションのタイトルを入力してください。このタイトルはダッシュボードにのみ表示され、サイトには表示されません。

その後、使用したいレイアウトを見つけ、その「選択」ボタンをクリックします。

Choosing a design for the services section

次に「Add Service Box」までスクロールし、初期設定では2つのサービスがある。

セクションにさらにサービスを追加するには、先に進み、「新しいサービスボックスを追加」をクリックします。

How to add more services to the service box

それができたら、各サービスのタイトルを入力し、説明を追加します。

訪問者が目にするテキストなので、必要な情報はすべて伝えるようにしましょう。

Creating a services section using a free WordPress plugin

初期設定では、プラグインはすべてのサービスに同じアイコンを使用します。各サービスに固有のアイコンに変更することをお勧めします。

使用可能なさまざまなアイコンを見るには、「サービス・アイコン」フィールドをクリックしてください。ポップアップが開きますので、さまざまな画像をスクロールして、使用したいものをクリックしてください。

Adding a custom icon to each service

また、訪問者が各サービスについてさらに詳しく知ることができるページへのリンクを追加したり、訪問者が直接あなたと話すことができるように、問い合わせフォームがあるページを追加するのも良いアイデアです。

そのためには、「Add Your Service Or Read More Link Here」フィールドにリンクを入力するだけです。

Adding a link to a services section

これらの情報をすべて追加した後、「サービスボックスの設定」を使用してサービスセクションの外観を変更することができます。

これらの設定のほとんどはかなり簡単です。例えば、フォントのサイズやスタイルを変更することができます。また、リンクの色やタイトル、説明文の色なども変更できます。

サービスセクションのアイコンを使用したくない場合は、「アイコンを表示」スイッチをクリックしてアイコンを削除することができます。

Hide and show the services icon

さまざまな設定があり、WordPressテーマによって見栄えが異なる場合があります。

もし、あなたのサイトのサービスセクションの見栄えに不満があれば、いつでも「サービスボックスの設定」に戻って変更することができます。

サービスボックスの設定に問題がなければ、ページ上部の「公開する」ボタンをクリックして変更を保存してください。

ショートコードを使用して、eコマースサイトにサービスセクションを追加できるようになりました。ServiceBox Shortcode’までスクロールし、コードをコピーしてください。

Adding a services section to your WordPress website using shortcode

これで、テーマの投稿、ページ、サイドバー、その他のウィジェット対応エリアにサービスボックスを追加する準備ができました。ショートコードの設置方法の詳細については、WordPressでショートコードを追加する方法のガイドを参照してください。

ショートコードを貼り付けたら、’更新’または’公開’をクリックするだけで、変更が反映されます。これで、サイトにアクセスすると、サービスセクションが表示されます。

A services section, created using a free plugin

この時点で、背景色を変えたり、サービスを増やしたりと、いくつか変更を加えたいことに気づくかもしれません。

セクションを編集するには、単にサービスボックス ” すべてのサービスボックスに移動します。サービスボックスを見つけて「編集」リンクをクリックしてください。

Editing your services using a free plugin

ここで、「サービスボックスの設定」やその他のセクションを使って変更を加える。

変更内容に満足したら、「更新」をクリックするのをお忘れなく。

Updating the services box

これで、サービスボックスを追加したページや投稿にアクセスすると、変更内容が表示されます。

さらに詳しく訪問者をリード/カスタマイザーにする方法

あなたのビジネスサイトにサービスセクションを設けることは、あなたのビジネスが何をし、それがターゲットとする読者にどのような利益をもたらすかをアピールするための素晴らしいステップです。

あなたのサイトを次のレベルに引き上げたいのであれば、サイトに他の要素を追加して、訪問者をリードに変える必要があります。ここでは、いくつかのアイデアをご紹介します:

WordPressでサービスセクションを作成する方法について、この投稿がお役に立てれば幸いです。WordPressで支払いを受け付けるのに最適なWordPress PayPalプラグインやWordPressで美しい価格テーブルを追加する方法についての投稿もご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

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

Reader Interactions

1件のコメント返信を残す

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

返信を残す

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