シードプロッド最新ニュース

ビジネスの成長に役立つWordPressのチュートリアル、ヒント、リソース

WordPressでサービスページのデザインを作成する方法

WordPressでサービスページのデザインを作成する方法 

執筆者 著者イメージ ステイシー・コリン
著者イメージ ステイシー・コリン
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。
     レビュー Turner John
レビュアーイメージ Turner John
ジョン・ターナーはSeedProdの共同設立者です。彼は20年以上のビジネスと開発の経験があり、彼のプラグインは2500万回以上ダウンロードされています。

WordPressでサービスページのデザインを簡単に作成する方法をお探しですか?

あなたのサイトを訪れた人々は、あなたが提供するサービスについて知りたいと思うでしょう。サービスセクションやページデザインがあれば、その情報を素早く提供することができ、潜在顧客があなたのスモールビジネスについてより簡単に知ることができます。

この記事では、WordPressで1行もコードを書かずにサービスページのデザインを作る方法を紹介します。

なぜサービスページのデザインが必要なのか?

優れたデザインのサービス・ページは、貴社の製品やサービスを紹介し、潜在顧客が貴社が何を提供し、なぜ貴社のビジネスを選ぶべきなのかを理解しやすくするために不可欠です。サービスページに掲載する内容には、価格情報、技術仕様、メリットなどを含めることができます。

サービスページのデザイン例

これは多くの情報なので、各サービスごとにカスタムページを作成し、そこでユーザーがより詳細な情報を得られるようにした方がよい場合が多い。

また、サービス紹介のランディングページやセクションをホームページ上に設け、各サービスの簡単な概要を掲載することで、コンパクトにまとめ、閲覧しやすくすることもできます。そして、ユーザーがより詳細な情報を得られるよう、個々のサービスページへのリンクを含めることができます。

顧客がコールバックを要求したり、フォームに記入したりするための行動喚起(CTA)ボタンを追加することもできる。

一言で言えば、最高のビジネスウェブサイトは、ユーザー体験を向上させ、顧客ベースとオンラインプレゼンスを高めるために、自社のサービスを紹介する専用の明確なセクションやページを持っている。

これを念頭に置いて、WordPressのコンテンツ管理システムでサービスページのデザインを作成する方法を見てみましょう。

SeedProdでWordPressのサービスページをデザインする方法

WordPressでプロフェッショナルなサービスセクションやサービスページのデザインを作る最も簡単な方法の一つは、ページビルダーを使うことです。優れたWordPressページビルダープラグインを使えば、ページに好きなだけサービスを追加し、魅力的なレイアウトで並べることができます。

さらに、コンバージョンを増やすために、CTAボタン、リンク、ウィジェット、その他のカスタム要素を含めることができます。

このガイドでは、ドラッグ&ドロップ機能を備えた最高のWordPressページビルダー、SeedProdを使用します。何百ものプロがデザインしたテンプレートと既製のセクションがあり、カスタムサービスのページデザインを作成するのに最適です。

SeedProd ドラッグ&ドロップWordPressウェブサイトビルダー

ランディングページのカスタムデザインを作るのに役立つだけでなく、このプラグインを使えば、コードなしでゼロからカスタムWordPressテーマを作成することができる。

その他の人気機能には、eコマースのサポート、カスタムサイドバー、ヘッダー、フッター、購読者管理、カスタムドメイン、アニメーションなどがあります。

この強力なWordPressプラグインは、コンバージョンを促進するために既にお使いのサードパーティツールともシームレスに連携します。例えば、一般的なメールマーケティングサービス、Google Analytics、WooCommerceなどと統合できます。

SeedProdでサービスページのデザインを作成するには、以下のチュートリアルの手順に従ってください。

ステップ1.SeedProdのインストールとアクティベート

まず、WordPressウェブサイトにSeedProdプラグインをインストールし、有効化する必要があります。SeedProdのインストール方法については、こちらをご覧ください。

ドキュメントでは、インストール手順とSeedProdライセンスキーのアクティベーション方法を説明します。

ステップ2.ランディングページのテンプレートを選ぶ

プラグインを有効にしたら、WordPressの管理パネルからSeedProd " Landing Pagesに移動し、新しいランディングページを追加ボタンをクリックします。

新しいランディングページを追加する

そこから、デザインの出発点として使用するレスポンシブ・ランディングページ・テンプレートのライブラリを閲覧することができます。

SeedProdランディングページテンプレート

上部のフィルターを使って、近日公開、リードスクイーズ、セールスページ、ウェビナーなど、さまざまなキャンペーンタイプのテンプレートを見ることができます。

気に入ったテンプレートが見つかったら、オレンジ色のチェックマークアイコンをクリックするだけです。

ランディングページのテンプレートを選ぶ

保存してページの編集を開始する」ボタンをクリックする前に、ページに名前とURLを付けることができます。

ランディングページの名前とURLを追加する

ステップ3.WordPressでサービスページのデザインをカスタマイズする

次の画面では、テンプレートがSeedProdのビジュアルドラッグアンドドロップページビルダーに読み込まれます。右側にはライブプレビューがあり、左側にはいくつかのWordPressブロックと設定があります。

SeedProd ドラッグ&ドロップ式ページビルダー

SeedProdのテンプレートの多くは、全体的なレイアウトを構成するためにブロックを使用しています。それらをカスタマイズするには、1つをクリックするだけで、左側のメニューにある設定が開きます。

例えば、見出しやテキストブロックをクリックすると、内容、フォントサイズ、スタイルなどを変更するための設定が開きます。

WordPressでサービスページの見出しを編集する

不要な要素を削除するには、その要素にカーソルを合わせてゴミ箱アイコンをクリックするだけと簡単です。 

SeedProdの要素を削除する

コールトゥアクションボタンのような新しい要素をデザインに追加したい場合は、左側のパネルからブロックをドラッグしてプレビュー上の所定の位置にドラッグします。

SeedProd CTAボタンブロックを追加する

それを選択して、外観や内容、その他の設定をカスタマイズすることができる。

ボタンブロックの設定 SeedProd

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

SeedProdのもう一つの便利な機能は、あらかじめ用意されたセクションです。左側のパネルにあるセクションタブをクリックすると見つけることができます。

SeedProdセクションパネル

セクションとは、行、列、ブロックを組み合わせたミニテンプレートのようなもので、FAQ、ヒーローエリア、ヘッダーなど、あらかじめ用意されたデザインを作ることができます。

例えば、特集セクションはWordPressページにサービスセクションを追加するのに理想的です。見出し、画像、段落、カラムを組み合わせて、サービス情報を魅力的にレイアウトすることができます。

SeedProdの機能セクション

下には、Call to Action 6のセクションがあり、3つのサービスとカスタムヒーロー画像のためのスペースがあります。

WordPress サービスセクションのデザイン SeedProd

ページにセクションを追加するには、そのセクションにカーソルを合わせ、オレンジ色のプラスアイコンをクリックします。

ワードプレスにサービスセクションを追加

デフォルトでは、新しいセクションはページの一番下に表示されます。しかし、セクション全体をクリック、ドラッグ、ドロップすることで、適切な場所に移動させることができます。

サービス部門のポジションを移動

セクションの位置を変更したら、要素をクリックしてコンテンツをカスタマイズできます。例えば、画像を入れ替えるには、画像をクリックし、左パネルのゴミ箱アイコンを選んで削除します。

サービスセクションの画像を削除

そこから、コンピュータまたはWordPressのメディアライブラリから新しい画像をアップロードすることができます。

あなたが満足するまで、サービスページのカスタマイズを続けましょう。ユーザーが連絡を取りやすいように電話番号を入れたり、今後のウェビナーやカンファレンスのためのイベントカレンダーを入れたりすることもできます。 

ステップ5.サービスページのデザインをWordPressで公開する

新しいサービスページを公開する準備ができたら、保存ボタンのドロップダウン矢印をクリックし、公開を選択するだけです。

サービスページのデザインをWordPressで公開する

このページは、あなたのWordPressサイト上で自動的に公開され、潜在的な顧客があなたのサービスを一度に見ることができます。

SeedProdサービスページデザイン例

代替案WordPressのブロックエディタを使ってサービスセクションを作成する

WordPressのウェブサイトにサービスを追加するもう一つの方法は、Service Box Showcaseプラグインを使うことです。このツールを使えば、サービスセクションを作成し、WordPressのブロックエディタを使って投稿やページに追加することができます。

ただし、プラグインのプリメイドレイアウトのいずれかを使用する必要があるため、最もカスタマイズ性の高いオプションではありません。サービスセクションのデザインに柔軟性が必要な場合は、最初の方法を使用することをお勧めします。

まずは、WordPressサイトにサービスボックスショーケース プラグインをインストールして有効化してください。WordPressプラグインのインストールと有効化については、こちらのガイドをご覧ください。

プラグインを有効化したら、WordPressのダッシュボードからService Box " Add New Service Boxに移動します。次に、新しいサービスボックスのタイトルを入力します。

新しいサービスボックスを追加 WordPress

次に、「選択」ボタンをクリックして、あらかじめ用意されているテーマからサービスボックスのデザインを選択します。

サービスボックスのテーマデザインを選択する

デフォルトでは2つのボックスがあります。それ以上必要な場合は、「新しいサービスボックスを追加」ボタンをクリックしてください。

ワードプレスにサービスボックスを追加

これで、各サービスボックスにタイトルと説明を追加できます。訪問者があなたのウェブサイトを閲覧する際にこのテキストが表示され、必要なサービス情報を見つけるのに役立ちます。

各ボックスには、デフォルトで同じアイコンが表示されます。しかし、「サービス・アイコン」フィールドをクリックすることで、各ボックスのアイコンをより適切なものに変更することができます。

ポップアップボックスが表示され、様々なFont Awesomeアイコンを検索して選択することができます。

その下に、各サービスのカスタムURLを追加することができます。これは、各サービスの専用ページやお問い合わせフォームにリンクしたい場合に便利です。

サービス情報を入力した後、サービスボックスの設定パネルを使用してスタイルをカスタマイズすることができます。これらの設定は一般的に使いやすく、テキストの色やサイズ、フォントファミリー、カラムレイアウトなどのオプションがあります。

サービス・ボックスのカスタマイズ・オプション

サービスセクションのアイコンを非表示にしたい場合は、アイコンの表示スイッチを無効にする必要があります。

あなたのスタイルに合うように、これらの設定を弄ってみてください。後でいつでもこのページに戻って変更することができます。

サービスボックスに満足したら、画面右上の「Publish」ボタンをクリックしてください。

その後、Service Box Shortcodeセクションまでスクロールダウンし、最初のフィールドからショートコードをコピーします。

サービスボックスのショートコードをコピーする

このショートコードをコンテンツエディターに貼り付ければ、WordPressサイトのどの投稿やページにも追加できる。そこから、投稿やページを公開または更新するだけで、変更が反映されます。

サービスボックスの設計例

サービスページのデザインに関するFAQ

WordPressのサービスセクションに画像を追加するには?

画像を追加するには、WordPressのメディアライブラリから直接アップロードできます。SeedProdElementor、Diviなどのページビルダーを使用している場合は、エディタに画像ブロックを追加するオプションがあります。

どのようなサービスをサービスページに追加できますか?

ビジネスオーナーは、ウェブサイトデザインサービス、ウェブホスティング、メンテナンスサービス、ソーシャルメディア、ウェブ開発、検索エンジン最適化(SEO)など、あらゆるタイプのサービスを表示できます。デジタルマーケティング会社、ウェブデザイン会社、グラフィックデザイン会社のいずれであっても、サービスページは新しいウェブサイトをプロフェッショナルに見せ、コンバージョン率を高めるのに役立ちます。

サービスセクションにコンタクトフォームを追加できますか?

はい、あなたのサービスセクションにコンタクトフォームを追加することができます。WPFormsのようなWordPressプラグインを使用することで可能です。

WordPressのサービスセクションにお客様の声を追加するには?

SeedProdのTestimonialsブロックを使用して、サービスセクションにお客様の声を追加することができます。これにより、お客様のヘッドショットを使用したお客様の声のカルーセルを含めることができます。

SeedProdの証言例
サービス欄をモバイル対応にするには?

SeedProdはすぐにモバイル対応できるため、あなたのサービスページは常にモバイルデバイスでうまく表示されます。また、ライブモバイルプレビューオプションを使用して、公開前にページを確認することもできます。

サービス・セクションを複製して他のページで使用することはできますか?

SeedProdでは、レイアウトナビゲータのコピーセクションオプションを使用するか、セクションをテンプレートとして保存することで、任意のセクションを複製することができます。

WordPressセクションの複製
SEOのためにサービスセクションを最適化するには?

検索エンジンのランキングのためにサービスセクションを最適化するには、関連キーワードを使用し、画像にaltテキストを追加し、メタディスクリプションを含めます。All in One SEOのようなWordPress SEOプラグインは、SeedProdとシームレスに統合し、プロセスをガイドするのに役立ちます。

そうだ!

このガイドが、WordPressでサービスページのデザインを作成する方法を学ぶのにお役に立てば幸いです。

サービスページのコンバージョンを高める方法をお探しなら、ソーシャルプルーフが役立ちます。ここでは、WordPressにGoogleとYelpのレビューを追加して、あなたのビジネスに関する肯定的なフィードバックを強調する方法について説明します。

あなたのウェブサイトが速く、安全で、最高の状態であることを保証するための最高のWordPressホスティングサービスに関するこのガイドも気に入るかもしれません。

お読みいただきありがとうございました!ご質問やご意見がありましたら、お気軽にコメントをお寄せください。

また、YouTubeX(旧Twitter)Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。

著者アバター
ステイシー・コリン ライター
ステイシーはWordPressとデジタルマーケティングについて10年以上、その他のトピックについてはもっと長い間執筆している。また、ウェブデザイン、ユーザーエクスペリエンス、SEOにも造詣が深い。

情報開示私たちのコンテンツは読者支援型です。つまり、あなたが私たちのリンクをクリックした場合、私たちはコミッションを得る可能性があります。私たちは、読者に付加価値をもたらすと信じる製品のみを推薦します。