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

提供するものを書き出しましたが、訪問者からの電話はまだありません。 スタンフォード大学のウェブ信頼性に関する調査によると、75％の人が会社の信頼性をウェブサイトのデザインで判断しています。弱いサービスページレイアウトは、挨拶する前に信頼を失います。

最初のサービスページを作成したとき、提供するものは正確にわかっていましたが、ページはテキストの壁のようでした。スキャン可能なものは何もなく、連絡ボタンは一番下にありました。ドラッグ＆ドロップビルダーに切り替えたら、訪問者が見ているものを実際に確認でき、その違いはすぐに現れました。

このガイドでは、WordPressで明確でプロフェッショナル、そしてコンバージョンを生み出すように設計されたサービスページを作成する方法を、コーディング不要で説明します。

私がカバーする内容は次のとおりです。

• どの方法を使用すべきか？
• コピーする価値のあるサービスページデザインの例
• ステップ1：WordPressにSeedProdをインストールする
• ステップ2：サービスページテンプレートを選択する
• ステップ3：サービスページレイアウトをカスタマイズする
• ステップ4：サービスセクションを追加する
• ステップ5：WordPressサービスページを公開する
• 無料プラグインの代替案
• サービスページをSEO向けに最適化する方法
• サービスページデザインのよくある質問

どの方法を使用すべきか？

スタンドアロンのサービスページをゼロから構築している場合は、SeedProdを使用してください。デザインコントロールはそれだけの価値があり、パフォーマンスの違いは本物です。私のGTmetrixテストでは、SeedProdページは556ミリ秒で16リクエストで読み込まれましたが、Elementorで構築された同じページは1,882ミリ秒で32リクエストでした。ページが速いほど、訪問者はサービスを読む前に離脱しません。

既存のページにサービスセクションを追加するだけで、別のプラグインをインストールしたくない場合は、WordPressブロックエディターを使用してください。柔軟性は低いですが、テーマを制御するシンプルなレイアウトには機能します。

このガイドの古いバージョンでも推奨されている無料のService Box Showcaseプラグインについても説明します。インストールする前に知っておくべき理由があるため、下にセクションを残しておきました。

コピーする価値のあるサービスページデザインの例

ここでは、学ぶ価値のある6つの実際のサービスページを紹介します。それぞれが特定の機能を持っており、SeedProdで同じアプローチをコピーできます。

ウェブデザインエージェンシー：Orbit Media Studios

Orbit Media Studiosは、エージェンシーの資格情報ではなく、クライアントのフラストレーションでサービスページを開きます。ヒーローは次のように読みます：「ウェブサイトが時代遅れまたはブランドに合っていない場合、すべてのキャンペーンは2倍の努力をしなければなりません。」

ポートフォリオの各アイテムには、一般的な証言ではなく、具体的な数値（イベントの139％増加、質の高いリードの26％増加）も含まれています。具体的な結果は、曖昧な賞賛よりも効果的です。

デジタルマーケティングエージェンシー：Online Optimism

Online Optimismは、各サービスに実際の担当者名を付けています。ストックフォトの代わりに、各サービスタイルにはその作業を担当した実際の人物が表示されます。

「実際、誰と仕事をしているのだろう？」という、通常は無視されがちな代理店サービスページにありがちな摩擦を取り除きます。レイアウトは意図的にシンプルにし、サービス名と写真のみを表示し、詳細は専用のサブページに記載します。

概要ページでの意思決定が少なければ、クリック数は増えます。

地域サービスビジネス：Van Matre Construction

Van Matre Constructionは、ジャンプリンク、つまり訪問者が必要なセクションにスキップできるページ上部の短い目次でリードしています。基礎修理のような技術的なサービスの場合、訪問者はすべてを読むというより、具体的な質問を持ってアクセスします。

このページでは、連絡先ページへのリンクではなく、連絡先フォームをインラインで下部に配置しています。コンバージョンまでのクリック数が少なければ、コンバージョン数は増えます。

一人で運営する商品化されたサービス：Designjoy

Designjoyは、1つの公開価格で1つのものを販売しています。ページには月額4,995ドルと表示され、以前の5,995ドルは取り消し線が引かれています。見積もりフォームや比較するティアはありません。

価格を公開することで、資格審査は自動的に行われます。価格に見合わない人は時間を無駄にすることなく去り、残った人はすでに費用を把握しています。

プロジェクトごとに価格が異なる場合は、「〜から」という金額表示が同じような効果を発揮します。

サービスリストの長い代理店：Huemor

Huemorは多くのサービスを提供していますが、それを長いリストとして提示することを拒否しています。すべては、クライアントが望むことである「構築」「サポート」「成長」という3つのグループに分類されています。

各グループには、バッジで開始価格が表示されます。再設計は25,000ドルから、サポートは月額2,500ドルから、SEOは月額2,000ドルからです。

これは「12種類の異なるものを提供しています」という問題の解決策です。クライアントが購入している成果でグループ化し、あなたが何をするかではなく、詳細を掘り下げられるようにします。

開始価格を表示することで、ページがパンフレットのように読まれるのを防ぎます。

個人コンサルタント：Jonathan Stark

Jonathan Starkのプライベートサービスページは約600語で、作品の写真は一切ありません。まず、対象となるのは、より良い価格設定、より強力な提案、またはより収益性の高いビジネスに投資する準備ができている自営業の専門家であることを明記しています。

次に、3つのオファーがリストアップされており、それぞれが名前の中にその形状を持っています。隔週でミーティングを行う4ヶ月のコーチングプログラム、2週間の価格設定スプリント、および通話の代わりに4ヶ月のSlackアクセスです。

Slackオファーでは、含まれないものまで明記されています。「キックオフコールなし。スケジュールされた通話なし。自動更新なし。」人々が「得られないもの」を伝えることは自信の表れであり、そうでなければ受信トレイに届くであろう質問を事前に防ぎます。

SeedProdでWordPressサービスページテンプレートを作成する方法

SeedProdは、ドラッグ＆ドロップのWordPressウェブサイトビルダー（コードを書かずに視覚的にカスタムレイアウトを作成できるツール）です。見出しや画像からCTAボタンまで、すべてのデザイン要素をビジュアルエディター内で簡単に制御できるため、プロフェッショナルなサービスページを作成するのに最適です。

デフォルトのWordPressブロックエディターとは異なり、SeedProdはリアルタイムですべての要素を移動、リサイズ、カスタマイズする完全な自由を提供します。すぐに使えるテンプレート、既製のサービスセクション、モバイルプレビューやフォーム連携などの組み込み機能があり、プロセス全体を迅速かつコードなしで行えます。

SeedProdをお勧めするのは、初心者向けでパワフル、そしてWordPress専用に構築されているからです。WordPressテーマ全体を作成することもできるため、デザインまたは開発サービスを提供するフリーランサー、代理店、またはビジネスオーナーに最適です。

さらに、SeedProdはメールマーケティングプラットフォームのようなトップツールと統合されており、デザインを任意のデバイスでプレビューできます。すべてが連携するため、追加のプラグインをインストールしたり、コードに触れたりする必要はありません。

それでは、SeedProdを使用して独自のWordPressサービスページを構築する手順を説明します。

ステップ1. SeedProdのインストールと有効化

まず、WordPressウェブサイトにSeedProdプラグインをインストールしてアクティブ化する必要があります。これについてサポートが必要な場合は、SeedProdのインストール方法に関するドキュメントを参照してください。

ドキュメントには、インストールプロセスとSeedProdライセンスキーのアクティブ化方法が記載されています。

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

プラグインがアクティブ化されたら、WordPress管理パネルから SeedProd » Landing Pages に移動し、Add New Landing Page ボタンをクリックします。

次に、サービスページの設計アイデアに合ったレイアウトを選択します。

上部にあるフィルターを使用して、近日公開、リード獲得、販売ページ、ウェビナーなど、さまざまなキャンペーンタイプのテンプレートを表示できます。

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

次に、Save and Start Editing the Page ボタンをクリックする前に、ページの名前とURLを指定します。

ステップ3. WordPressサービスページのレイアウトをカスタマイズする

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

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

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

または、サービスページテンプレートに価格表が含まれている場合は、クリックして各項目を編集したり、フォントを変更したり、列を並べ替えたりできます。

不要な要素を削除するのは、要素にカーソルを合わせてゴミ箱アイコンをクリックするのと同じくらい簡単です。 bsp;

デザインに新しい要素（例：CTAボタン）を追加したい場合は、左側のパネルからブロックをドラッグし、プレビューにドラッグして配置します。

その後、選択して外観、コンテンツ、その他の設定をカスタマイズできます。

サービスページのレイアウトを選択する場合、3列のデザインは、3〜6のサービスを持つほとんどのビジネスに適しています。訪問者はスクロールせずに一目でオファーを比較できます。6つ以上のサービスを提供している場合は、各サービスを個別にリストするのではなく、カテゴリ別にグループ化してください。

行の間隔にも注意してください。SeedProdでは、行の設定で直接パディングを調整できます。サービスセクションでは、モバイルで窮屈に感じられないように、通常、上下のパディングを少なくとも60pxに設定します。

レイアウトを決定する前に、コンバージョンを損なうWordPressのレイアウトミスに陥っていないことを確認してください。メニューが乱雑だったり、CTAが弱かったりするような小さなことが、大きな違いを生む可能性があります。

ステップ4：WordPressページにサービスセクションを追加する

もう1つの便利なSeedProd機能は、既製のセクションです。機能セクションは、視覚的なサービスセクションの構築に最適です。左側のパネルの[セクション]タブをクリックすると見つけることができます。

セクションはミニテンプレートのようなもので、行、列、ブロックを組み合わせて、FAQ、ヒーローエリア、ヘッダーなどの既製のデザインを作成します。

たとえば、機能セクションは、WordPressページにサービスセクションを追加するのに理想的です。見出し、画像、段落、列の組み合わせを使用して、サービス情報に魅力的なレイアウトを作成します。

画像、テキスト、ボタンの組み合わせを持つレイアウトを探してください。これらは、クリーンでプロフェッショナルなサービスセクションデザインに最適です。

以下は、3つのサービスとカスタムヒーロー画像用のスペースが用意されたCTA 6セクションです。

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

デフォルトでは、新しいセクションはページの下部に表示されます。ただし、セクション全体をクリックしてドラッグし、適切な場所に移動できます。

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

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

見た目が満足いくまでサービスページをカスタマイズし続けてください。ユーザーが連絡を取りやすくするために電話番号を含めたり、今後のウェビナーやカンファレンスのためのイベントカレンダーを含めたりすることもできます。 bsp;

サービスページの内容を入力する際は、各項目で次の形式を使用してください。成果重視の名前（「リードを獲得するウェブサイトデザイン」）、結果に関する1文（「訪問者をリードに変える、クリーンで高速なサイトを構築します」）、短いCTAボタンラベル（「見積もりを依頼する」）。

各説明は30語未満にしてください。訪問者はサービスページをスキャンするのであって、読むのではありません。結果について具体的に記述するほど、適切なクライアントがあなたを認識しやすくなります。

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

サービスセクションのデザインに満足したら、[保存]ボタンのドロップダウン矢印をクリックし、[公開]を選択します。

ページはWordPressサイトで自動的に公開され、潜在顧客はすぐにあなたのサービスを確認できるようになります。

デフォルトのWordPressブロックエディターとSeedProdを使用したサービスページのデザインのどちらにするか迷っている場合は、簡単な比較表をご覧ください。

特徴	ブロックエディター	SeedProd
使いやすさ	基本的なブロック、あまり視覚的ではない	ドラッグ＆ドロップでライブプレビュー
テンプレート	テーマ依存	数十個の既製サービスページテンプレート
モバイルプレビュー	表示の切り替えが必要	電話、タブレット、デスクトップ向けの組み込みプレビュー
デザインコントロール	手動調整またはカスタムCSS	コード不要のビジュアルコントロール
カスタムセクション	手動ブロック設定	FAQ、サービス、CTAなどの既製セクション

無料プラグインの代替案（インストール前に日付を確認してください）

長年、ここでの標準的な無料の回答は、ショートコードからサービスセクションを構築するプラグインであるService Box Showcaseでした。それはまだ機能しており、約3,000サイトでまだ実行されており、93件のレビューから96％の評価を維持しています。

私はもうそれを使っていません。その理由は、プラグインページ自体に記載されています。最後のリリースは2024年12月で、WordPress 6.7.7までしかテストされていません。

WordPressは7.1です。これは、いくつかのメジャーバージョンにまたがって、20か月以上アップデートがないことを意味します。

それらのどれも明日壊れることを意味するわけではありません。それは、あなたの代わりに誰もそれを監視していないことを意味します。

誰かに連絡を取るのに十分な信頼を得させるためのページで、それは悪い取引です。あなたは半日を節約し、ページが存在する目的を危険にさらすことになります。

無料のままでいたい場合は、ブロックエディタ独自のColumnsブロックとImageブロックを使用してサービスセクションを構築してください。より多くの手間がかかり、見栄えは地味になりますが、WordPressを維持しているのと同じ人々によって維持されています。

手間をかけたくない場合は、SeedProdのFeatureセクションで数回のクリックで完了できます。これが上記のウォークスルーです。

WordPressサービスページのSEOを最適化する方法

数十のWordPressサイトの最適化に基づいた、これらの3つのSEOステップは、サービスページの成果を向上させます。

• URL、ページタイトル、最初のH2でキーワードをターゲットにします。サービスページの設計では、yoursite.com/services/web-designのようなURLと、「Web Design Services for Small Businesses」のようなH2は、Googleにページが何をカバーしているかを正確に伝えます。
• 関連ページへの内部リンクを追加します。サービスページを、一般的なクライアントの質問に答えるポートフォリオ、ケーススタディ、またはブログ投稿にリンクします。SeedProdのボタンとテキストブロックを使用すると、これらのリンクを簡単に簡単に追加できます。
• ローカルクライアントにサービスを提供している場合は、場所を記載します。サービスページに最も影響を与えるローカルSEOの変更は、見出しまたは最初の段落に都市または地域を追加することです。

サービスページデザインのよくある質問

サービスページには何を含めるべきですか？

サービスページには、明確なヘッドライン、各サービスの簡単な説明、クライアントが期待できる結果、お客様の声やクライアントロゴなどのソーシャルプルーフ、そして各セクションに分かりやすいCTA（行動喚起）を含めるべきです。各サービスの簡単な説明は30語未満にし、プロセスではなく結果を前面に出しましょう。

WordPressのサービスページの最適なレイアウトは何ですか？

アイコン付きの3カラムレイアウトは、3〜6のサービスを持つほとんどのビジネスに最適です。各カラムには、サービス名、結果に関する1文、CTAボタンを含めます。6つ以上のサービスがある場合は、カテゴリ別にグループ化し、アコーディオンレイアウトを使用してページをスキャンしやすくします。

サービスページに価格を含めるべきですか？

ビジネスモデルによります。固定価格パッケージを提供している場合は、価格を表示することで不適切なリードをフィルタリングし、時間を節約できます。プロジェクトの範囲によって価格が変動する場合は、範囲または「〜から」の金額を使用します。価格を完全に非表示にすると、訪問者はあなたが価格が高すぎると想定するため、コンバージョン率が低下することがよくあります。

WordPressのサービスページに問い合わせフォームを追加するにはどうすればよいですか？

フォームを作成するにはWPFormsのようなプラグインを使用し、それをページに追加します。SeedProdでは、Contact Formブロックをサービスページにドラッグし、Select a Formドロップダウンからフォームを選択すると、WPFormsがまだインストールされていない場合はインストールするようにプロンプトが表示されます。訪問者があなたに連絡する方法を探す必要がないように、各サービスセクションの下部に連絡フォームを配置してください。

サービスページがモバイルでうまく表示されるようにするにはどうすればよいですか？

SeedProdに組み込まれているモバイルプレビューを使用すると、公開前にレイアウトを確認できます。エディタで電話表示に切り替え、サービスカラムがきれいに積み重なっているか、CTAボタンをタップしやすいか、テキストが読みやすいかを確認します。ほとんどの訪問者は電話でサービスページを表示するため、公開ボタンを押す前にこれをテストしてください。

WordPressページ作成のためのボーナスガイド

このガイドがWordPressでプロフェッショナルなサービスページを作成するのに役立ったことを願っています。

次のステップに進む準備ができたら、SeedProdを試して、コーディング不要で独自のカスタムサービスセクションの設計を今日から始めましょう。

これらのチュートリアルも役立つかもしれません：

• ウェブサイトのウェルカムページを作成する方法
• WordPressで「会社概要」ページを作成する方法
• カスタムWordPress著者ページの作成方法
• WordPressで404ページを作成する方法
• WordPressに「スタッフ紹介」ページを追加する方法
• WordPressでFAQページを作成する方法
• WordPressでブログページを作成する方法
• WordPressでクライアントログインページを作成する方法

お読みいただきありがとうございます！皆様のご意見をお聞かせいただければ幸いです。お気軽に会話にご参加ください YouTube, X および Facebook で、ビジネスを成長させるための役立つアドバイスやコンテンツをさらにご覧ください。