WEBCAN.
Free Consultation無料相談
  1. TOP
  2. デザイン参考集
  3. 動物・ペット
  4. 緑の森どうぶつ病院

webcan analyze midori-no-mori.jp

ANIMAL & PET · 北海道 · PICKED 2026.10.17

緑の森どうぶつ病院動物・ペットのホームページデザイン参考 — 動物病院・グリーン・手描きイラスト

緑の森どうぶつ病院のトップページ（PC）
PC（1440px）
緑の森どうぶつ病院のトップページ（スマホ）
スマホ（375px）
出典：midori-no-mori.jp ↗確認日 2026.10.17
緑の森どうぶつ病院動物・ペット · 北海道
サイトを見る ↗ワイヤーDL

EDITOR'S NOTE編集部の視点

手描きの森と動物のイラストで囲んだ犬の写真で迎え、病院の緊張感をやわらげる。

北海道の旭川・札幌などに病院を持つ動物病院グループのサイト。ファーストビューは、手描きの木や花、動物のイラストの中央に、葉の輪で囲んだ柴犬の丸い写真を置いている。病院の考え方、お知らせ、動物ごと・内容ごとの診療案内、獣医師・スタッフの紹介、6つの特徴、LINEでの問い合わせ・予約、はじめての人向けのよくある質問と続き、フッターに各病院の電話番号と診療時間をまとめている。

  1. 01手描きの森と動物のイラストで画面を埋め、中央に葉の輪で囲んだ犬の写真を置いたファーストビュー
  2. 02診療案内を「どうぶつごと」「診療内容」「ケア」に分け、白いアイコン付きの緑のタイルで並べている
  3. 03グリーンを主役に、黄色と水色の水彩風の丸い模様を背景に敷いている

CONVERSION集客の工夫

✓電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線ネット予約 / しつけ・ホリスティック相談
✓LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内

診療時間とネット予約を右下に固定する

PCでは画面の右下に「診療時間」と「ネット予約」のボタンと、問い合わせのチャットのボタンを固定している。ヘッダーにも「電話」「アクセス」「獣医当番表」のボタンを置き、急いで調べる飼い主がすぐに必要な情報にたどり着ける。

LINEで問い合わせ・予約ができることを見せる

「スマホ1つでカンタンにお問い合わせ・予約ができます」として、LINEの画面の写真と、QRコードを表示するボタンを置いている。フードや薬の注文もLINEから受けていることを伝え、電話以外の窓口を増やしている。

はじめての人の質問に先に答える

「はじめての方へ」として、予約の取り方、予約なしでも診てもらえるか、待ち時間、料金など、飼い主が不安に思う質問をアコーディオンで並べている。

チェック項目は 2026.10.17 に実ブラウザで描画したトップページを自動判定したものです。

COLOR配色

#3FA037メインカラー（ヘッダー・タイル・特徴） · グリーン
#FEFEFB背景 · オフホワイト
#FFFFFFカード背景・ボタン
#D3EDD1淡いグリーン（補助） · ペールグリーン
#1A6585チャットボタン · ディープブルー
#828282補足テキスト

背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。

TYPOGRAPHYフォント

用途
和文見出し・本文
使用フォント
Zen Maru Gothic
無料で近いもの
Zen Maru Gothic
用途
英字（大きな見出し）
使用フォント
Nunito
無料で近いもの
Nunito
要素PC サイズ / 太さPC 行間SP サイズ / 太さ
h216px / 7001.0016px / 700
h332px / 7001.5028px / 700
本文（p）14px / 7001.7020px / 700

実測値（PC 1440px・SP 375px、2026.10.17 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。

STRUCTUREページ構成（上から順に）

  1. 01

    ヘッダー

    緑の帯にロゴ、採用情報、「電話」「アクセス」「獣医当番表」のボタン、ナビ。

    ヘッダー／電話番号＋予約ボタン常設型
  2. 02

    ファーストビュー

    手描きの森と動物のイラストの中央に、葉の輪で囲んだ犬の写真。

    ファーストビュー／全面写真＋コピー型
  3. 03

    病院の考え方

    中央ぞろえの短い文章と、病院の建物の写真。

    コンセプト／写真＋メッセージ型
  4. 04
  5. 05

    MEDICAL TREATMENT（診療について）

    どうぶつごと・診療内容・ケアに分け、アイコン付きの緑のタイルで並べる。

    メニュー・サービス／アイコン／写真グリッド型
  6. 06

    DOCTOR & STAFF

    獣医師・動物看護師・スタッフの紹介と、紹介ページへのリンク。

    人・代表／代表・院長あいさつ型
  7. 07

    FEATURES（私たちの特徴）

    緑の背景に、番号付きの写真カードで6つの特徴。

    強み・選ばれる理由／番号つき3〜4項目型
  8. 08

    LINEでの問い合わせ・予約

    LINEの画面の写真と、QRコードを表示するボタン。

    行動喚起／メルマガ・LINE登録型
  9. 09

    FAQ（はじめての方へ）

    よくある質問／アコーディオン型
  10. 10

    フッター

    各病院の電話番号・診療時間・休診日と、サイト内のリンク。

    フッター／店舗情報＋ナビ型
緑の森どうぶつ病院の構成をWEBCANの部品で組んだワイヤーフレーム（PC）

DOWNLOADワイヤーフレームをダウンロード

この構成を、Figmaで編集できるワイヤーに

上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。

PC版（1440px）SVG スマホ版（375px）SVG

Figmaでの使い方

  1. SVGをダウンロードする
  2. Figmaのキャンバスにファイルをドラッグ＆ドロップする
  3. セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める

文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。

REPRODUCEこのサイトを参考にするときのポイント

  1. 01手描きのイラストと写真を組み合わせて、病院の緊張感をやわらげる
  2. 02診療案内は「動物の種類」と「診療の内容」に分け、アイコンのタイルで探しやすくする
  3. 03診療時間とネット予約のボタンを画面の端に固定し、急いでいる人を待たせない
  4. 04電話以外に、LINEなどの問い合わせ・予約の窓口を用意して案内する

FAQよくある質問

緑の森どうぶつ病院のサイトで使われているフォントは？

和文は Zen Maru Gothic、英字の大きな見出しは Nunito です。どちらも Google Fonts で無料で使えます。

動物病院のサイトで、診療案内はどう並べるとよいですか？

飼い主は「うちの子（犬・猫など）を診てもらえるか」と「何の診療か」の両方で探します。このサイトのように、動物の種類と診療の内容を分けてアイコンで並べると、目的のページに進みやすくなります。

どんな業種の参考になりますか？

動物病院のほか、トリミングサロン、ペットホテル、ペットの保育園など、飼い主の安心感と予約のしやすさが大切な業種に応用できます。

スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は緑の森どうぶつ病院および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。

FROM REFERENCE TO YOUR SITE

このテイストで、
御社のペット関連のサイトを。

「緑の森どうぶつ病院のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。

無料相談はこちら