出典：peststopboys.co.uk ↗ 確認日 2026.10.27
Editor's note
編集部の視点
害虫駆除を明るいイラストで見せ、画面左下に電話ボタンを残し続ける、イギリス・ブライトンの害虫駆除業者。
イギリス南部のブライトンとワージングを拠点にする害虫駆除業者 Pest Stop Boys のサイト。ファーストビューは葉や花を切り絵のように重ねたカラフルなイラストに、社名を大きく白抜きで置いただけ。続いて「We Stop. Insects / Rodents / Birds and More（虫・ネズミ・鳥など）」と扱う害虫を色違いの大きな文字で並べ、最初の電話で状況を聞き、当日か24時間以内に訪問する流れを説明する。画面左下には電話ボタンが常に残り、ページの最後にはブライトンとワージングの2つの電話番号を大きく載せている。
- 01 暗く描かれがちな害虫駆除を明るいイラストで見せ、「頼みにくさ」をやわらげる
- 02 電話ボタンを画面左下に残し続け、困っている人がすぐかけられるようにする
- 03 最初の電話から訪問・調査・処置までの流れと、「当日か24時間以内」の目安を書く
Conversion
集客の工夫
- 電話の導線 （あり） 画面左下に電話ボタンを常に表示（tel:リンク 6か所）
- 拠点ごとの電話番号 （あり） ブライトンとワージングの2番号を最後に大きく
- 対応までの目安 （あり） 当日のことが多く、できる限り24時間以内に訪問
- 進め方の説明 （あり） 電話で聞き取り → 訪問・調査 → 処置と再発防止
- 対応地域ページ （あり） ブライトン・ワージング・ホーヴなど6地域
- 害虫ごとのページ （あり） アリ・トコジラミ・ネズミ・ハトなど13種
- 第三者の評価 （あり） ヘッダーに Checkatrade 加盟のバッジ
- 料金の目安 （なし） トップにはなし
頼みにくい仕事を、明るく見せる
ファーストビューは、葉や花を切り絵のように重ねたイラストに社名を大きく置いただけです。害虫駆除は暗く描かれがちですが、カラフルな色で親しみやすさを出し、相談するときの気まずさをやわらげています。扱う害虫も「虫・ネズミ・鳥・その他」と大きな文字で並べ、何を頼めるかがすぐに分かります。
電話ボタンを、画面の隅に残す
画面左下には 電話のアイコンがスクロールしても残り続けます。ネズミや蜂の巣に気づいた人は、読み込むより先に電話をかけたいものです。ページの最後にはブライトンとワージングの2つの電話番号を大きく載せ、近いほうにかけられるようにしています。
来てもらえるまでの目安を書く
対応の流れとして、最初の電話で状況を聞き、当日のことが多く、できる限り24時間以内に訪問すると書いています。ナビにはブライトン・ワージング・ホーヴなど6地域のページと、アリやネズミなど13種の害虫ごとのページがあり、地名や害虫の名前で探す人の入口にもなっています。
チェック項目は 2026.10.27 に実ブラウザで描画したトップページ（PC 1440px・SP 375px）を確認したものです。
Colour
配色
- #1865F6 ヘッダー・セクションの背景（青）
- #FFFFFF 見出し・本文・電話ボタンの地
- #203D99 濃い青の面
- #FF303B 電話ボタンのアイコン（赤）
- #FFAE33 強調の文字（オレンジ）
- #EC7E89 強調の文字（ピンク）
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
Typography
フォント
| 用途 | 使用フォント | 無料で近いもの |
|---|---|---|
| 見出し・本文（すべて） | Siaga | Poppins |
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 144px / 400 | 1.00 | 38px / 400 |
| 本文（p） | 50px / 400 | 1.45 | 13px / 400 |
実測値（PC 1440px・SP 375px、2026.10.27 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
Structure
ページ構成（上から順に）
- 01 ヘッダー ロゴ、ホーム・会社・サービス・害虫・地域・問い合わせ・ブログのナビ、右端に Checkatrade のバッジ。 ヘッダー／ロゴ＋横並びナビ型
- 02 ファーストビュー 葉や花を重ねたカラフルなイラストに、社名を大きく白抜きで。 ファーストビュー／大きな文字型
- 03 扱う害虫 「We Stop.」に続けて、虫・ネズミ・鳥・その他を色違いの大きな文字で並べる。 メッセージ／大きな一文型
- 04 私たちの使命 ブライトンとワージングで住宅・事業者の両方に対応し、人・動物・環境に配慮すること。 コンセプト／写真＋メッセージ型
- 05 対応の流れ 最初の電話で状況を聞き、当日か24時間以内に訪問して調査し、処置と再発防止を行う。 進め方／番号つきステップ型
- 06 問い合わせ メールと、ブライトン・ワージングの電話番号を大きく。 行動喚起／ボタン帯型
- 07 フッター 著作権表示、プライバシーポリシー、制作会社。 フッター／ナビ＋会社情報型
- 08 電話ボタン（常時表示） 画面左下に電話のアイコンが残り続ける。 行動喚起／SP追従ボタンバー型
Download
ワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、DevNJ のワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
Reproduce
このサイトを参考にするときのポイント
- 01 緊急の相談が多い業種は、電話ボタンを画面の隅に常に残す
- 02 拠点が複数あるなら、拠点ごとの電話番号を分けて載せる
- 03 最初の電話から作業までの流れと、来てもらえるまでの目安を書く
- 04 対応地域ごとにページを作り、地名で探す人の入口にする
FAQ
よくある質問
Pest Stop Boys のサイトで使われているフォントは？
見出しから本文まで Siaga 1書体で組んでいます。無料で近い丸みのある雰囲気にするなら Poppins が候補です。
害虫駆除のような業種に、明るいデザインは合いますか？
Pest Stop Boys は害虫を怖く見せず、カラフルなイラストで親しみやすさを出しています。相談しづらい内容ほど、入口を明るくすると電話をかける心理的な負担が下がります。そのうえで、電話番号や対応の流れは分かりやすく置いています。
どんな業種の参考になりますか？
害虫駆除のほか、水道・鍵・家電の修理、清掃など、急ぎの電話で依頼を受ける地域の出張サービスに向きます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はPest Stop Boysおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成を DevNJ の部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。 掲載ギャラリー: Httpster
