ワードプレスで初めてのサービスページをデザインしようと、真っ白なページを見つめたことを覚えている。何を提供するかは分かっていたが、実際にそれを分かりやすく、信頼できるように見せるのは予想以上に難しく感じた。
もしあなたも行き詰まりを感じているなら、このガイドはWordPressでプロフェッショナルなサービスページのデザインを構築する方法を説明します。最も大きな違いをもたらしたツールを含め、私が使った正確な手順をお見せします。
SeedProdのようなビジュアル・ビルダーを使えば、メインのサービスページを1つ作ることもできるし、サービスごとに独立したページを作ることもできる。私は、どの程度詳細を見せたいかによって、両方を行っている。
ワードプレスのサービスページをデザインするために、私が行った手順は以下の通りです：
- ステップ1: SeedProd for WordPressをインストールする
- ステップ2：サービスページのテンプレートを選ぶ
- ステップ3：サービスページのレイアウトをカスタマイズする
- ステップ4：サービスセクションの追加
- ステップ5：ワードプレスのサービスページを公開する
- 代替案SeedProdの代わりにブロックエディタを使う
なぜサービスページのデザインが必要なのか？
強力なサービスページのレイアウトデザインは、あなたのビジネスが何を提供し、なぜ誰かがあなたと仕事をする必要があるのかを示します。サービス詳細ページには、価格、メリット、よくある質問などを掲載するとよいでしょう。
すべてを掲載した1つのメインのサービスページにすることもできるし、オファーごとに別々のページを作ることもできる。私は、どの程度詳細にしたいかに応じて、両方を行ってきた。
例えば、ホームページに簡単なサービスセクションのデザインを追加し、より詳細なサービス一覧ページのデザインにリンクさせることができます。電話予約や問い合わせのためのCTAボタンを設置することもできます。
私自身のサイトではこうしている。会社概要のページにシンプルなサービスセクションを追加した。
サービスページがコンバージョンに重要な理由
あなたのサービスページは、単にあなたの仕事をリストアップするためだけにあるのではありません。訪問者を顧客に変えるための最も重要なページのひとつです。
最初に作ったときは、細部まで掲載することに集中していた。しかし、レイアウトをシンプルにし、明確なコール・トゥ・アクションを追加し、いくつかの結果を表示したところ、問い合わせが大幅に増えました。
優れたサービスページがコンバージョンを大幅にアップさせる理由はここにある：
- 明確さ：あなたが何をしているのか、誰のためにしているのかを示す。
- 信頼：訪問者に、あなたなら助けてくれると思わせる。
- ディレクション：次に何をすべきかを正確に伝える（電話を予約する、フォームに記入するなど）
もし誰かがあなたのサービスページにたどり着き、混乱したと感じたら、彼らは去っていくでしょう。しかし、あなたが何を提供し、それがどのように彼らの問題を解決するのかを即座に理解できれば、彼らはずっと近くに留まり、コンバージョンに至る可能性が高くなります。
コンバージョン率の高いサービスページのベストプラクティス
強力なサービスページのレイアウトは、プロフェッショナルに見えるだけでなく、訪問者の行動を促します。WordPressでサービスページをデザインする際に私が実践しているベストプラクティスをご紹介します：
- 主要なサービスは折り目の上に掲載する。訪問者はスクロールすることなく、即座に何を提供しているかがわかるはずです。
- 明確な見出しと説明を使う。曖昧な用語は避け、シンプルで直接的な言葉で各サービスを説明する。
- 社会的証拠を示す。信頼を築くために、証言、顧客のロゴ、ケーススタディを追加しましょう。
- すべてのスクロールに連絡方法を含める。ユーザーが探す必要がないように、各主要セクションにコール・トゥ・アクションのボタンまたはフォームを使用する。
- 各サービスにビジュアルを加える。画像やアイコンはテキストを分割し、サービスを理解しやすくします。
- レイアウトをすっきりさせる。競合する複数のリンクではなく、1つの主要なコールトゥアクション（「電話を予約する」や「見積もりを取る」など）に焦点を当てましょう。
SeedProdでWordPressのサービスページテンプレートを作成する方法
サービスページの見た目をもっとコントロールしたいと思ったとき、SeedProdを使いました。SeedProdは、私が思い描いたとおりにページを動かすことができます。コーディングのスキルは必要なく、組み込みのブロックやテンプレートを使って簡単に独自のサービスセクションのデザインを作ることができます。
SeedProdを使うのが好きなのは、WordPressが初めての人でも簡単に理解できるからだ。だから、このようなページを作るのにお気に入りのツールなんだ。
あらかじめ用意されたセクションとテンプレートのおかげで、たくさんのサービスページのインスピレーションを得ることができます。また、フルカスタムテーマを作成することもできるので、WordPressでサービスを提供する場合（ウェブデザインや開発など）には最適です。
また、付属のエクストラも気に入っている。モバイルでページをプレビューしたり、Eメールツールを接続したり、ヘッダーやフッターをカスタマイズしたりできる。これらはすべて追加のプラグインなしで動作します。
SeedProdでサービスページのデザインを作成するには、以下のチュートリアルの手順に従ってください。
ステップ1.SeedProdのインストールとアクティベート
まず、WordPressウェブサイトにSeedProdプラグインをインストールし、有効化する必要があります。SeedProdのインストール方法については、こちらをご覧ください。
ドキュメントでは、インストール手順とSeedProdライセンスキーのアクティベーション方法を説明します。
ステップ2.ランディングページのテンプレートを選ぶ
プラグインを有効化したら、WordPressの管理パネルからSeedProd " Landing Pagesに移動し、Add New Landing Pageボタンをクリックします。
あなたのサービスページのデザインアイデアに合ったレイアウトを選んでください。
上部のフィルターを使って、近日公開、リードスクイーズ、セールスページ、ウェビナーなど、さまざまなキャンペーンタイプのテンプレートを見ることができます。
気に入ったテンプレートが見つかったら、オレンジ色のチェックマークアイコンをクリックするだけです。
保存してページの編集を開始する」ボタンをクリックする前に、ページに名前とURLを付けることができます。
ステップ3.サービスページのレイアウトをカスタマイズする
次の画面では、テンプレートがSeedProdのビジュアルドラッグアンドドロップページビルダーに読み込まれます。右側にはライブプレビューがあり、左側にはいくつかのWordPressブロックと設定があります。
SeedProdのテンプレートの多くは、全体的なレイアウトを構成するためにブロックを使用しています。それらをカスタマイズするには、1つをクリックするだけで、左側のメニューにある設定が開きます。
例えば、見出しやテキストブロックをクリックすると、内容、フォントサイズ、スタイルなどを変更するための設定が開きます。
また、サービスページのテンプレートに料金表が含まれている場合は、クリックして各項目を編集したり、フォントを変更したり、列を並べ替えたりすることもできます。
不要な要素を削除するには、その要素にカーソルを合わせてゴミ箱アイコンをクリックするだけと簡単です。
コールトゥアクションボタンのような新しい要素をデザインに追加したい場合は、左側のパネルからブロックをドラッグしてプレビュー上の所定の位置にドラッグします。
それを選択して、外観や内容、その他の設定をカスタマイズすることができる。
レイアウトを決める前に、コンバージョンに悪影響を与えるWordPressレイアウトのミスに陥っていないか確認してください。ごちゃごちゃしたメニューや弱いCTAなど、小さなことが大きな違いを生むことがあります。
ステップ4.WordPressページにサービスセクションを追加する
SeedProdのもう一つの便利な機能は、あらかじめ用意されたセクションです。機能セクションは、ビジュアルなサービスセクションを構築するのに最適です。左側のパネルのセクションタブをクリックすると見つけることができます。
セクションとは、行、列、ブロックを組み合わせたミニテンプレートのようなもので、FAQ、ヒーローエリア、ヘッダーなど、あらかじめ用意されたデザインを作ることができます。
例えば、特集セクションはWordPressページにサービスセクションを追加するのに理想的です。見出し、画像、段落、カラムを組み合わせて、サービス情報を魅力的にレイアウトすることができます。
画像、テキスト、ボタンがミックスされたレイアウトを探しましょう。これらは、クリーンでプロフェッショナルなサービスセクションのデザインに最適です。
下には、Call to Action 6のセクションがあり、3つのサービスとカスタムヒーロー画像のためのスペースがあります。
ページにセクションを追加するには、そのセクションにカーソルを合わせ、オレンジ色のプラスアイコンをクリックします。
デフォルトでは、新しいセクションはページの一番下に表示されます。しかし、セクション全体をクリック、ドラッグ、ドロップすることで、適切な場所に移動させることができます。
セクションの位置を変更したら、要素をクリックしてコンテンツをカスタマイズできます。例えば、画像を入れ替えるには、画像をクリックし、左パネルのゴミ箱アイコンを選んで削除します。
そこから、コンピュータまたはWordPressのメディアライブラリから新しい画像をアップロードすることができます。
あなたが満足するまで、サービスページのカスタマイズを続けましょう。ユーザーが連絡を取りやすいように電話番号を入れたり、今後のウェビナーやカンファレンスのためのイベントカレンダーを入れたりすることもできます。
ステップ5.サービスページのデザインをWordPressで公開する
サービスセクションのデザインに満足したら、保存ボタンのドロップダウン矢印をクリックし、公開を選択します。
このページは、あなたのWordPressサイト上で自動的に公開され、潜在的な顧客があなたのサービスを一度に見ることができます。
WordPressのデフォルトのブロックエディタとSeedProdのどちらを使ってサービスページをデザインするかを決めている場合、ここで簡単に並べて比較してみましょう。
| 特徴 | ブロックエディター | シードプロ |
|---|---|---|
| 使いやすさ | 基本的なブロック、あまり視覚的ではない | ライブ・プレビュー付きドラッグ・アンド・ドロップ |
| テンプレート | テーマに依存 | 数十種類のプリビルド・サービスページ・テンプレート |
| モバイルプレビュー | ビューの切り替えが必要 | 電話、タブレット、デスクトップ用の内蔵プレビュー |
| デザイン・コントロール | 手動調整またはカスタムCSS | コード不要のビジュアルコントロール |
| カスタムセクション | 手動ブロック・セットアップ | FAQ、サービス、CTAなど、あらかじめ用意されたセクション |
代替案WordPressのブロックエディタを使ってサービスセクションを作成する
WordPressのウェブサイトにサービスを追加するもう一つの方法は、Service Box Showcaseプラグインを使うことです。このプラグインはシンプルで、ショートコードを使ってWordPressにサービスセクションを作ることができます。
SeedProdほどの柔軟性はありませんが、それでもクリーンなサービスページのレイアウトを構築するための迅速なオプションです。
まずは、WordPressサイトにサービスボックスショーケース プラグインをインストールして有効化してください。WordPressプラグインのインストールと有効化については、こちらのガイドをご覧ください。
プラグインを有効化したら、WordPressのダッシュボードからService Box " Add New Service Boxに移動します。次に、新しいサービスボックスのタイトルを入力します。
次に、「選択」ボタンをクリックして、あらかじめ用意されているテーマからサービスボックスのデザインを選択します。
デフォルトでは2つのボックスがあります。それ以上必要な場合は、「新しいサービスボックスを追加」ボタンをクリックしてください。
これで、各サービスボックスにタイトルと説明を追加できます。訪問者があなたのウェブサイトを閲覧する際にこのテキストが表示され、必要なサービス情報を見つけるのに役立ちます。
各ボックスには、デフォルトで同じアイコンが表示されます。しかし、「サービス・アイコン」フィールドをクリックすることで、各ボックスのアイコンをより適切なものに変更することができます。
ポップアップボックスが表示され、さまざまなFont Awesomeアイコンを検索して選択することができます。
その下に、各サービスのカスタムURLを追加することができます。これは、各サービスの専用ページやお問い合わせフォームにリンクしたい場合に便利です。
サービス情報を入力した後、サービスボックスの設定パネルを使用してスタイルをカスタマイズすることができます。これらの設定は一般的に使いやすく、テキストの色やサイズ、フォントファミリー、カラムレイアウトなどのオプションがあります。
サービスセクションのアイコンを非表示にしたい場合は、アイコンの表示スイッチを無効にする必要があります。
あなたのスタイルに合うように、これらの設定を弄ってみてください。後でいつでもこのページに戻って変更することができます。
サービスボックスに満足したら、画面右上の「Publish」ボタンをクリックしてください。
その後、Service Box Shortcodeセクションまでスクロールダウンし、最初のフィールドからショートコードをコピーします。
このショートコードをコンテンツエディターに貼り付ければ、WordPressサイトのどの投稿やページにも追加できる。そこから、投稿やページを公開または更新するだけで、変更が反映されます。
SEOのためにWordPressのサービスページを最適化する方法
サービスページを検索結果で上位に表示させたいですか？高度なツールやコードがなくても、各ページが上位表示される可能性を最大限に高めるために私が使っている簡単なSEOのコツをご紹介します。
- ページタイトル、URL、大見出しにターゲットキーワードを使用する。
- 何を提供するかを明確に説明する短いメタディスクリプションを追加する。
- 掲載する個々のサービスには、明確な小見出しを使用すること
- ブログ記事、お客様の声、お問い合わせフォームなど、役立つ他のページへのリンク
- ローカルサービスを提供している場合は、所在地を明記する（ローカルSEOに最適）
- すべての画像にaltテキストを追加し、検索エンジンが何を表示しているかを把握できるようにする。
サービスページのデザインに関するFAQ
- 見出しのあるヒーロー・セクション
- あなたのビジネスについての短い紹介
- 明確なサービス・セクション
- 証言のような社会的証明
- 電話を予約したり、あなたに連絡するためのCTA
WordPressページ作成のためのボーナスガイド
このガイドで、WordPressでプロフェッショナルなサービスページを構築するのが簡単になったことを願っています。
次のステップに進む準備ができたら、SeedProdを試してみてください。コード不要で、独自のカスタムサービスセクションを今すぐデザインできます。
これらのチュートリアルもお好きかもしれない：
- ウェブサイトのウェルカムページの書き方
- WordPressで会社概要ページを作成する方法
- カスタムWordPress著者ページの作成方法
- WordPressで404ページを作る方法
- WordPressにチーム紹介ページを追加する方法
- WordPressでFAQページを作る方法
- ワードプレスでブログページを作成する方法
- WordPressで顧客ログインページを作成する方法
お読みいただきありがとうございました！ご質問やご意見がありましたら、お気軽にコメントをお寄せください。
また、YouTube、X（旧Twitter）、Facebookでも、ビジネスの発展に役立つコンテンツを配信しています。
