BtoBのサービスサイトは、ただ情報を掲載するだけでなく、見込み客の関心を引きつけ売上につなげる設計が求められます。しかし実際にはどのようなデザインや構成が効果的か判断しにくいものです。

成功事例を参考にポイントを押さえることで、自社サイトの改善や制作の際に具体的なイメージが持てるでしょう。

そこで今回は、サービスサイトの参考事例10選とBtoBの売上獲得に効果的な制作ポイントも解説しますので、ぜひ参考にしてください。

参考にしたいサービスサイト事例10選

参考にしたいサービスサイト事例を10選紹介します。

Chatwork（チャットワーク）

▲出典：Chatwork

ビジネスチャットツール「Chatwork（チャットワーク）」を紹介するためのサービスサイトです。サイトでは「無料登録して使う」「説明資料ダウンロード」といったCTAが、画面中央部と右上部分にアクセントカラーの赤色で目につくように配置されています。

「機能」や「料金プラン」といった基本情報はもちろん、「活用方法」や「導入事例」など、初めてChatworkを利用する人にも利用のイメージがしやすいようなコンテンツが下層サイトに入っています。また、「ビジネスチャット国内利用者数5年連続№1」や「有料プランが最大3ヶ月分無料」などベネフィットも盛り込まれているのが特徴です。

クラウド会計ソフト「freee（フリー）」

▲出典：クラウド会計ソフト freee

freee株式会社のクラウド会計ソフト「freee」を紹介するサービスサイトです。中央右部分に「会計」「人事労務」「販売管理」などのサービス内容がアイコンとテキストで一覧化しています。

CTAは右上部分が「ログイン一覧」と「新規登録」となっており、法人と個人事業主とで異なるサービス内容を記載しています。それぞれクリックすると、サービス内容について詳細を記載したページに遷移し、サービス内容を見てもらったうえで会員登録するという流れになっています。

カチアルサポート

▲出典：カチアルサポート

カチアルサポートは、経理・営業事務・採用/人事など様々なバックオフィス業務を代行するサービスです。サイトでは、サービス内容やプラン・料金、資料一覧、お知らせなどの情報を下層ページに配置し、基本的なサービス情報を紹介しています。

「お問い合わせ」「資料ダウンロード」といった2つのCVが右上と中央部にCTAとして配置され、どんな企業に向いているのか、どんなメリットがあるのかについて簡潔に説明されています。シンプルでサービスサイトの基本的な構成と言えるでしょう。

kintone（キントーン）

▲出典：kintone

会社内で使う工数管理アプリ「kintone」のサービスサイトは、機能や用途を紹介するための情報が多く、「部署別」「用途別」「事例」「初めての方へ」など下層サイトが多く盛り込まれています。

こうしたToBサービスは、社内で経営陣に利用のメリットを伝えるためにも、サービス提供側はそのための情報をしっかり提供する必要があります。会員登録のCTAは右側にあり、「試してみる」という文言になっていて、「キントーンのアプリ作成を体験する」もしくは30日間の「無料でお試しする」の選択肢が用意されています。

出典：kintone

U-NEXT

▲出典：U-NEXT

映画やドラマ、マンガなどを視聴・閲覧できるU-NEXT。こちらはBtoCサービスではありますが、ユーザーが会員登録するためのサイトとして機能しています。

画面中央部に会員登録を促すCTAがあるのは、他のサービスサイトと同じですが、右上にあるのは映画やマンガなどの作品を探すための検索窓です。ユーザーの利用目的を考えると、作品を見ることなので、ユーザーにとって会員登録するかどうかの判断となる重要な情報は見たい作品があるどうか。そのため、ユーザーにまず確認してもらうというアクションを取ってもらい、登録につなげるという仕掛けになっています。

ソニー銀行

▲出典：ソニー銀行

インターネット上の取引のみを扱うソニー銀行。ユーザーにとってもらいたいアクションは「口座開設」です。

右上に「口座開設」と既存ユーザーのための「ログイン」CTAを設置しており、中央部には「投資信託の積み立てで最大3,000円プレゼント」のベネフィット情報を大きく載せています。ターゲットユーザーにまずソニー銀行を利用するメリットを知ってもらい、口座開設につなげるという流れになっています。

出前館

▲出典：出前館

出前で飲食品を届けるサービスを提供している「出前館」。右上のCTAは「新規登録」と「ログイン」で、中央部のCTAは「お届け先からお店を探す」ための「郵便番号」「都道府県」「マップ」とカテゴリ別に検索する機能となっています。

こちらもU-NEXTのようにユーザーが利用したい飲食店があるかどうかの情報を提供する流れになっています。

ToCの場合、ユーザーがそのサービスを利用する判断材料は何なのかを踏まえたうえで、目立ちやすい場所にその情報を提供すると会員登録などのCVにつながりやすくなるでしょう。

PayPay（ペイペイ）カード

▲出典：PayPayカード

スマートフォンなどの電信端末を使った決済サービス「PayPay（ペイペイ）」のクレジットカードの利用・登録を促すサービスサイトです。

右上のCTAは「お申込み」だけでなく、「ご利用ガイド」「よくある質問」と既存ユーザーのための「ログイン」となっています。お金を扱うサービスであるため、単に利用を促すだけでなく、利用にあたって注意をしてほしいことや知ってほしいことなども目に留まる場所に配置しているのが特徴です。

中央部には「年会費無料」や「ポイント1%付与」といったベネフィットが記載され、「詳しくはこちら」のCTAで促しています。すぐに「お申込み」するのではなく、サービス内容や機能を詳しく知ってもらい、利用のメリットを理解したうえで登録に促す流れとなっています。

Lemino（レミノ）

▲出典：Lemino

「Lemino（レミノ）」はドコモが配信する映像サービスです。地上波で放送された「見逃し配信」の番組や映画、ドラマなどを見ることができます。

LeminoでもU-NEXTと同様、右上には「作品名、タイトル、俳優名で探す」の検索窓が配置されており、中央に視聴できる具体的な番組がスライダーで掲載されています。U-NEXTと異なる点は、その下に「邦画」「アニメ」などのジャンル別の絞り込み選択が配置されている点です。

スマホ用サイトでは、下部の固定メニューに検索窓や「マイリスト」などが配置されています。

まなびポケット

▲出典：まなびポケット

「まなびポケット」はインターネット上で学習ができる「クラウド型教育プラットフォーム」で、児童・生徒が各家庭で利用できるほか、学校や教育委員会などでも導入されています。

こちらのサイトでは、右上のCTAに「お問い合わせ・資料請求」を入れるとともに「サポートサイト」やワンクリックでダウンロードできる「申込書ダウンロード」「無料お申し込み」が配置されています。さらに中央部のCTAは「自動チャットによるお問い合わせ」となっており、まずはサービス内容を知ってもらうことを促す流れになっています。

こうした世の中にまだ広く浸透していないサービスや商品、一言で説明しにくい機能やメリットほど、トップページから詳細情報にスムーズにアクセスできる流れが必要となるでしょう。

サービスサイトのギャラリーサイト3選【国内】

国内のサービスサイトのギャラリーサイトを3つ紹介します。

matome（まとめ）

▲出典：matome

matome（まとめ）は、LeadGridが運営するサービスサイト・オウンドメディア・LPのWebサイト・Webデザインの参考サイトです。

採用サイトやコーポ―レートサイトなどのサイトのタイプやデザイン、色、業種・職種の別にカテゴリ検索することができます。

▲出典：matome

サービスサイトでは、ToBを中心にさまざまな業種・職種のサイトが掲載されており、参考になるサイトを見つけることができるでしょう。

▲出典：matome

URAGAWA（ウラガワ）

▲出典：URAGAWA

URAGAWA（ウラガワ）は、紹介しているサイトの制作会社もわかることが特色のギャラリーサイトです。上部の検索メニューで「サイトタイプ」を選んで「サービス紹介」をクリックすると、100個以上のサービスサイトを見ることができます。

さらに業種を絞って検索することもできます。

▲出典：URAGWA

Good Web Design（グッドウェブデザイン）

▲出典：GOOD WEB DESIGN

Good Web Design（グッドウェブデザイン）は、ピンタレストとも連携し、気になったサイトのピン止め記録が可能なギャラリーサイトです。掲載されているサイトは合計7,000以上あり、豊富なデザインを見つけることができます。

ただ、「サービスサイト」というカテゴリ検索機能はないため、業種別の検索から絞って見ると良いでしょう。

海外のWebデザインギャラリーサイト

国内にはないようなデザインを探している場合には、おしゃれな海外のWebデザインが掲載されたギャラリーサイトを参考にしてみましょう。次の3つのサイトを紹介します。

• Awwwards
• SiteInspire
• Hover States

Awwwards

▲出典：Awwwards月間や年間での優秀賞を選出しているWebサイトを紹介するAwwwards。海外のトレンドを取り入れたい場合におすすめのギャラリーサイトです。

SiteInspire

▲出典：SiteInspireSiteInspireは、ユーザーの閲覧履歴に基づいて近いサイトを表示させる機能がついています。参考にしたいサイトが見つかれば、より効率的に見つけられます。

Hover States

▲出典：Hover StatesHover Statesでは、グラフィックデザインに特徴のあるWebサイトが多く登録されています。気になるサイトにマウスを置くと、サイトに仕掛けられた動きを確認できます。

BtoBのサービスサイトを制作するポイント

BtoBの売上獲得に効果的なサービスサイトを制作するポイントは次の5つです。

1.  ターゲットを詳細に設定する
2. 自社の強みと差別化ポイントを明確にする
3. シンプルで見やすいデザインを心がける
4. 導入事例や実績を具体的に掲載する
5. 明確なCTA（コール・トゥ・アクション）を設置する

1.ターゲットを詳細に設定する

BtoBサイトでは、企業や担当者ごとに異なる課題やニーズに対応するため、ターゲットを詳細に設定することが重要です。業種や企業規模、担当部署や役職まで絞り込み、関係者それぞれの関心事に応じた情報設計を行います。これにより、訪問者が自社にとって価値のある情報を見つけやすくなり、効果的なリード獲得につながります。

2.自社の強みと差別化ポイントを明確にする

競合他社が多いBtoB市場では、自社の強みや他社にない特徴を具体的に示すことが必要です。導入実績やサポート体制、技術力など、数字や事実に基づいた信頼性のある情報を発信しましょう。これが潜在顧客の安心感や興味を引き、問い合わせなどの行動を促します。

3.シンプルで見やすいデザインを心がける

BtoBサイトは情報量が多くなりがちなため、デザインはシンプルで見やすさを重視します。煩雑な動きや過剰な装飾を避け、訪問者が目的の情報にスムーズにアクセスできる構造に整えることが大切です。操作性の良さはユーザーのストレス軽減と離脱防止につながります。

4.導入事例や実績を具体的に掲載する

顧客が検討段階で重視するのが実績や導入事例です。具体的な課題や解決策、効果をわかりやすく説明し、担当者の声や企業名の掲載が可能なら信頼度がさらにアップします。事例の充実は検討期間が長いBtoB商材での購入意思決定を後押しします。

5.明確なCTA（コール・トゥ・アクション）を設置する

サイト訪問者に次のアクションを促すため、資料請求や問い合わせへの誘導ボタン（CTA）を分かりやすく配置します。ファーストビューや各ページの適切な位置に設置し、クリックしやすいデザインにすることがポイントです。目標達成に直結する重要な要素です。

上記のポイントを押さえることで、BtoBのサービスサイトが効果的に機能し、売上獲得に結び付く制作が可能となります。

売上獲得に直結するコンテンツの作り方

以下では、売上獲得に直結するコンテンツの作り方を紹介します。

導入事例と顧客の声を具体的に掲載

導入事例や顧客の声は、見込み客に対して信頼感を与え、購入検討の後押しになります。具体的な課題や解決策、得られた効果を数字やエピソード中心にわかりやすく伝えることが重要です。担当者の名前や所属企業を掲載できれば、より信ぴょう性が増し、読者の共感を誘いやすくなります。多様なケースを網羅し、ターゲットごとに参考になる内容を揃えることで効果的です。

技術資料や製品スペックの分かりやすい提示

技術的なBtoB商材では、導入検討者が製品の機能や性能を正確に理解できることが重要です。専門用語を噛み砕いて説明したり、スペック表や比較表を用いて視覚的に整理することで理解を助けます。さらにホワイトペーパーやカタログのダウンロードを用意し、資料請求から営業接点につなげる導線も整えましょう。分かりやすい情報提供が購買意欲を高めます。

FAQやサポート情報の充実

購入前後の疑問や不安を払拭するため、よくある質問（FAQ）やサポート体制の情報を充実させることは重要です。導入や操作に関する具体的な質問を網羅し、回答も簡潔かつ丁寧にまとめます。問い合わせ窓口やオンラインチャット、マニュアルの掲載など、多様なサポートチャネルを示すことで信頼感を醸成し、検討者の安心感を高めて成約率向上に寄与します。

効果的なリード獲得のためのCTAと導線設計

次に、効果的なリード獲得のためのCTAと導線設計のやり方を解説します。

明確で押しやすいCTAボタンの配置

CTA（コール・トゥ・アクション）ボタンは、ユーザーに次の行動を促す重要な要素です。目立つ色やサイズで視認性を高め、ページのファーストビューやスクロール後の適切な位置に複数設置すると効果的です。文言はシンプルかつ具体的にし、「資料請求」「無料相談」など行動内容が一目でわかることが重要です。押しやすいデザインとユーザー目線を重視しましょう。

問い合わせフォームの簡易化

問い合わせフォームが複雑だとユーザーは途中で離脱しやすくなります。必要最低限の項目に絞り、入力しやすい設計を心がけることが大切です。また自動補完やエラーメッセージの分かりやすさ、スマホ対応も必須です。フォーム送信後の確認画面やサンクスメールで安心感を与え、問い合わせ完了までのストレスを減らす導線設計がリード獲得率を高めます。

資料請求や無料トライアルへの誘導

リード獲得のためには、興味を持ったユーザーに対して次のアクションを簡単に促すことが必要です。資料請求や無料トライアルなど、リスクの少ない体験型のCTAはユーザーのハードルを下げ、コンバージョン率を上げます。専用のランディングページを用意し、メリットや利用手順を明確に伝えることで誘導効果が高まります。継続的なフォローも重要です。

サービスサイト制作の依頼先

サービスサイトの依頼先には次の3つがあります。

• 自社の社内スタッフ（内製）
• 制作会社
• フリーランス

自社の社内スタッフ（内製）

まず、社内でリソースを確保できる場合にはスタッフに依頼します。社内で確保できない場合には、新たに採用する方法もあります。

ただ、いずれの場合にしても教育・運用・採用のコストが掛かります。継続的な事業としてスタッフを育成し、社内にノウハウを蓄積したい場合は別として、スピード感やコストを重視する場合には外注するほうが良いです。

制作会社

外注先としては、まず制作会社があります。Webサイトを制作できる会社であれば、基本的に依頼が可能で、広告代理店などでも依頼を請け負っており、各社のホームページで実績などの確認が可能です。

制作会社の特徴としては、一定のクオリティが期待できることや制作以外のサポートを期待できることがあります。ただ一方で、費用が割高になることや複数人が制作に携わるため、スピーディーな制作に期待できないことがデメリットです。

一定の規模を持っており、広告運用やプロモーションなど制作以外のサポートを期待したい場合、ページ数が多い場合などには制作会社に依頼すると良いでしょう。

フリーランス

スピーディーでコストを重視した制作を進めたい場合にはフリーランスがおすすめです。フリーランスに依頼すれば、制作会社と同じような依頼内容であっても、費用を大幅に抑えることができます。

ただし、フリーランスはスキルにバラツキがあるため、一定のスキルを持ったデザイナーでなければ、安く依頼できたとしても費用が無駄になることがあります。

とはいえ、デザイナー以外の人が事前にスキルがあるかどうかを判断するのは難しいことも多いです。そのため、登録には事前に審査を設けたデザイナーが登録しているエージェントサービスを利用すると良いでしょう。

下記では、フリーランスや副業人材デザイナーの採用事例を紹介しております。無料でダウンロードできますので、ぜひご覧ください。

【お役立ち資料】
フリーランス・副業人材デザイナー採用事例

xdesigner.jp

フリーランスに業務委託するメリットと活用方法

以下では、フリーランスに業務委託するメリットと活用方法について解説します。

専門スキルを柔軟に活用できる

フリーランスは特定の分野に高い専門性を持つ人材が多く、必要なスキルを的確にピンポイントで活用できます。プロジェクトの内容に合わせて最適な人材を選べるため、社内にない技術やノウハウを補完しやすいです。また、短期間やスポット的な依頼も可能なため、急な課題解決や多様なニーズに柔軟に対応できます。

コストパフォーマンスの向上

フリーランスへの業務委託は、正社員の採用や外注企業に比べてコストを抑えつつ高品質な成果を得られることが多いです。固定費や福利厚生の負担がなく、成果物単位や時間単位で契約できるため、無駄な経費が発生しにくいのが特徴です。これにより限られた予算内で最大限の効果を追求できます。

プロジェクト単位の効率的な対応

フリーランスはプロジェクト単位で契約できるため、進行中の業務に必要な期間だけリソースを確保できます。これにより、プロジェクトのピーク時や特定のフェーズに合わせた効率的な人員配置が可能です。加えて専門家として独立しているため、自己管理能力が高くスムーズな遂行が期待できます。

業務委託はコスト面や柔軟性など、企業にとってもメリットも多くある一方で、経験がないとメリットがわかりにくく、不安を感じる企業も少なくありません。下記の資料では、業務委託のメリットと注意点を網羅的に解説しますので、ぜひご参照ください。

【お役立ち資料】
業務委託のメリットと注意点

xdesigner.jp

サービスサイト制作をフリーランスへ依頼するならクロスデザイナーがおすすめ

本記事では、参考になるサービスサイトの事例を中心にギャラリーサイトの紹介、サービスサイトを制作するポイントなどについて解説してきました。

サービスサイト制作にあたっては、制作の目的やターゲット、数値目標を設定したうえで、自社に合った依頼先を選定するのが良いでしょう。選定にあたっては、デザイナーのスキルや実績を確認したうえで、依頼内容と得意とする分野がマッチしている場合がおすすめです。

制作会社に依頼すれば、費用が割高になり、スピーディーな制作が期待しにくいため、コストやスピード感を重視している場合には特に、フリーランスに依頼すると良いでしょう。フリーランスはスキルのバラツキがデメリットとしてありますが、デザイナー登録時に、厳正な審査を設けているエージェントサービス、クロスデザイナーなら安心して依頼できます。

クロスデザイナーでは、国内最大級の7,000人以上の厳選したデザイナーが在籍しており、貴社の依頼内容にマッチしたデザイナーを紹介することが可能です。最短3日でアサインもできるため、スピーディーな対応にも期待できます。

こちらよりサービス資料を無料でダウンロードできます。即戦力デザイナーをお探しの方は【お問い合わせ】ください。平均1営業日以内にご提案します。