ワイヤーDL&CAT（アンドキャット）
猫のいる部屋の写真に商品名と縦書きのコピーを重ね、ファーストビューから商品ページへつなぐ。
webcan analyze luma-pet.com
ANIMAL & PET · 大分県 · PICKED 2026.10.18
ペットホテル LUMA動物・ペットのホームページデザイン参考 — ペットホテル・グレージュ・写真大きめ
出典：luma-pet.com ↗確認日 2026.10.18
EDITOR'S NOTE編集部の視点
「ケージではなく個室」「動物病院が運営」を、FAQで飼い主の不安の言葉に置き換えて答える。
大分市の、獣医師や看護師が見守るペットホテルのサイト。ファーストビューはソファに座るビーグル犬の写真に白いロゴを重ね、右上に「RESERVE」を置いている。ABOUT USで個室で預かることと医療の体制を説明し、犬と猫のお預かりを丸角の写真カード2枚で分け、よくある質問6問、施設の写真、お知らせ、ご予約と続く。予約ボタンはLINEにつながる。
- 01明るいグレーの背景に白文字とMontserratの英字見出しで、落ち着いた色数の少ない画面にしている
- 02お預かりを「DOG」と「CAT」の2枚の写真カードに分けている
- 03よくある質問を6問、トップページに開閉式で並べている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
－予約・問い合わせ導線—
✓LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
予約の入口をLINEにまとめる
ヘッダー右上の「RESERVE」とページ下の「ご予約」のボタンは、どちらもLINEの友だち追加につながる。電話番号を載せず、問い合わせをLINEに集めている。
不安の言葉そのものを質問にする
「ケージに入れっぱなしになりますか？」「持病や投薬がある場合でも利用できますか？」など、飼い主が預ける前に気にすることを質問の形でトップに並べている。答えの中で、動物病院が運営していることと個室で預かることを繰り返し伝えている。
犬と猫で入口を分ける
サービスを「ワンちゃんのお預かり」「ネコちゃんのお預かり」の2枚の写真カードに分けている。飼っている動物の側から、自分に関係するページへ進める。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#EBEDEF背景 · ライトグレー
#FFFFFF見出し・FAQの枠
#7A8A93本文テキスト · ブルーグレー
#EEEEEE区切り線
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文（見出し・本文）
- 使用フォント
- 源ノ角ゴシック（Adobe Fonts）
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字（ナビ・見出し）
- 使用フォント
- Montserrat
- 無料で近いもの
- Montserrat
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 16px / 700 | 0.00 | 16px / 700 |
| h2 | 18px / 400 | 2.10 | 14px / 400 |
| h3 | 16px / 400 | 2.10 | 16px / 400 |
| 本文（p） | 17px / 400 | 2.10 | 14px / 400 |
| ボタン | 15px / 500 | 2.10 | 15px / 500 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
FAQ（よくある質問）
よくある質問／アコーディオン型 - 06
- 07
NEWS（お知らせ）
お知らせ／お知らせ一覧型 - 08
- 09
PARTSパーツ別に見る
PC
SP
PC
PC
SP
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.18 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01飼い主が預ける前に気にすることを、そのまま質問の形でトップに並べる
- 02犬と猫など、対象ごとにサービスの入口を分ける
- 03予約の窓口をLINEにまとめ、ヘッダーとページ下の両方に置く
- 04色数を抑えた背景と大きな写真で、清潔で静かな印象を出す
FAQよくある質問
ペットホテル LUMA のサイトで使われているフォントは？
和文は Adobe Fonts の源ノ角ゴシック、英字は Montserrat です。無料で近づけるなら、和文に Noto Sans JP（源ノ角ゴシックと同じ字形）、英字に Montserrat が使えます。
電話番号を載せずにLINEだけで予約を受けても大丈夫ですか？
写真や持病のことなど、文字と画像でやり取りしたい内容が多い業種では、LINEにまとめると受付が楽になります。電話でしか連絡しない世代のお客さまが多い場合は、電話番号も並べて載せると取りこぼしを減らせます。
どんな業種の参考になりますか？
ペットホテルのほか、トリミングサロン・動物病院・ペットシッターなど、飼い主の不安に答えることが申し込みにつながる業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利はペットホテル LUMAおよび各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの動物・ペットの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のペット関連のサイトを。
「ペットホテル LUMAのような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。