ワイヤーDL&CAT（アンドキャット）
猫のいる部屋の写真に商品名と縦書きのコピーを重ね、ファーストビューから商品ページへつなぐ。
webcan analyze kinswith-vet.com
ANIMAL & PET · 東京都 · PICKED 2026.10.21
KINS WITH 動物病院動物・ペットのホームページデザイン参考 — くすみピンク・角丸・線画イラスト
出典：kinswith-vet.com ↗確認日 2026.10.21
EDITOR'S NOTE編集部の視点
くすみピンクと線画のイラストで、診療科目から予約までを静かに並べる動物病院。
東京都世田谷区の二子玉川本院と立川院をもつ動物病院のサイト。ファーストビューは角丸の大きな枠の写真に「それは、『常在菌から診る』あたらしい動物病院。」のコピーと最新のお知らせを重ねている。続いて考え方、2つの院の紹介、5つの診療科目、線画のイラストで描いた3ステップの診療の流れ、院長の紹介とメッセージ、地図と道順、ブログ「診療の記録」、お知らせと診療科目ごとの診療時間表、電話番号と24時間受付のWEB予約へと続く。
- 01背景のオフホワイトに、くすみピンクと赤茶色の文字を合わせ、写真の枠やカードを角丸でそろえている
- 02「診療の流れ」を、事前問診・受付／診療／アフターフォローの3ステップの線画イラストで見せている
- 03診療時間を歯科・消化器内科・皮膚科・一般診療科の科目ごとの表に分け、肉球のアイコンで診療日を示している
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線24時間受付WEB予約 / オンライン相談
✓LINEで相談・予約LINE公式アカウント
✓営業・診療時間の明記トップページ内
予約の入口を常に見せる
PCでは画面右上に「ご予約」のアイコンを置き、スマホではヘッダーに「二子玉川院」「立川院」「予約」のアイコンを並べている。ページの最後にも電話番号と「24時間受付WEB予約」のボタンを置いている。
診療科目ごとに入口を分ける
一般診療・皮膚科・歯科・消化器内科・癌（がん）・腫瘍科を写真つきのカードで並べ、それぞれ「詳しく見る」から詳細ページへ進める。症状や科目で探している飼い主が、目的のページにたどり着きやすい。
ブログで診療の内容を伝える
「診療の記録」として、検査や症例についての記事をイラストや写真つきのカードで並べている。来院の前に、どんな診療をしているのかを知ってもらえる。
チェック項目は 2026.10.21 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#F7F6F4背景 · オフホワイト
#FFFFFFカード背景
#F1F0EEセクション背景
#EBD5CD差し色・表の見出し · くすみピンク
#965D57見出し・ボタン · 赤茶
#5A3C37本文テキスト · ブラウン
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- LINE Seed JP（YakuHanJP で約物を詰める）
- 無料で近いもの
- LINE Seed JP
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h2 | 15px / 700 | 2.20 | 14px / 700 |
| h3 | 20px / 700 | 2.20 | 18px / 700 |
| 本文（p） | 15px / 300 | 2.20 | 14px / 300 |
| ボタン | 15px / 300 | 1.50 | 14px / 300 |
実測値（PC 1440px・SP 375px、2026.10.21 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
- 07
- 08
- 09
DOCTOR'S BLOG（診療の記録）
記事・メディア／記事カードグリッド型 - 10
- 11
- 12
フッター
フッター／店舗情報＋ナビ型
PARTSパーツ別に見る
PC
SP
PC
SP
PC
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.21 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01診療の流れを、線画のイラストつきのステップで見せる
- 02診療科目ごとに、写真つきのカードと詳細ページへの入口を用意する
- 03診療時間を科目ごとの表に分けて、曜日ごとの診療日をアイコンで示す
- 04予約の入口を、ヘッダーとページの最後の両方に置く
FAQよくある質問
KINS WITH 動物病院のサイトで使われているフォントは？
和文は LINE Seed JP で、約物の詰めに YakuHanJP を使っています。どちらも無料で使えます。
診療科目が多いと、トップページが長くなりませんか？
このサイトでは、診療科目を写真・短い説明・「詳しく見る」だけのカードにまとめ、詳しい内容は科目ごとのページに分けています。トップでは「どの科目があるか」だけを伝えると、長くなりすぎません。
どんな業種の参考になりますか？
動物病院のほか、診療科目や専門外来が複数あるクリニック・整骨院・歯科医院など、科目ごとに探される医療・ケアの業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はKINS WITH 動物病院および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの動物・ペットの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のペット関連のサイトを。
「KINS WITH 動物病院のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。