ワイヤーDL16動物病院
「16」のロゴと、動物の顔になった数字のイラストで、町の動物病院を親しみやすく見せる。
webcan analyze www.and-cat.com
ANIMAL & PET · 愛知県 · PICKED 2026.10.28
&CAT（アンドキャット）動物・ペットのホームページデザイン参考 — グレージュ・明朝体・縦書き
出典：www.and-cat.com ↗確認日 2026.10.28
EDITOR'S NOTE編集部の視点
猫のいる部屋の写真に商品名と縦書きのコピーを重ね、ファーストビューから商品ページへつなぐ。
愛知県半田市の猫用品ブランドのオンラインショップ。ファーストビューは、猫と人が過ごす部屋の写真のスライドに、左上の縦書きのコピー「猫と、あなたと、日々と」と、左下の商品名・説明・「View Product」を重ねている。PICK UP、CATEGORY、NEW ITEMS、RECOMMEND ITEMS、PRODUCTS と商品の一覧が続き、そのあとに商品を使う猫の写真を集めたGALLERY、購入者の感想を並べた&CAT LOVER’S VOICE、ABOUT、NEWS、JOURNAL、Instagram、問い合わせを置いている。
- 01ファーストビューのスライドごとに、写真に写っている商品の名前・種類・説明と商品ページへのリンクを添えている
- 02商品の一覧は、猫や人と一緒に写した写真に、英字の商品名・種類・価格を小さく添えている
- 03グレージュの背景に、明朝体と細い英字で文字を控えめに載せている
CONVERSION集客の工夫
－電話番号をヘッダーに常設PC・ファーストビュー
－タップで電話できるSP・tel:リンク 0か所
－SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線—
－LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
ファーストビューから商品ページに入れる
スライドの写真ごとに商品名と「View Product」を置き、見た人が気になった商品のページにそのまま進めるようにしている。ブランドの雰囲気を見せる写真が、商品の入口も兼ねている。
購入者の猫の写真と感想を載せる
「&CAT LOVER’S VOICE」では、購入者の名前・猫の名前・猫種・年齢と感想に、使っている商品へのリンクを添えて並べている。実際に猫が使っている様子が、買う前の判断材料になる。
選び方の記事で商品に案内する
JOURNALに「猫の年齢・体格で選ぶ、器の選び方」「猫の性格で選ぶ、TOGシリーズ爪とぎの選び方」のような記事を置いている。どれを選べばよいか迷う人に、記事から商品を案内している。
チェック項目は 2026.10.28 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#E8E7E4背景 · グレージュ
#121212ボタン・見出し
#000000本文テキスト
#FFFFFF写真の上の文字
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文見出し・本文
- 使用フォント
- 筑紫オールド明朝（Adobe Fonts）
- 無料で近いもの
- Shippori Mincho
- 用途
- 和文（ボタン・補足）
- 使用フォント
- Noto Sans JP
- 無料で近いもの
- Noto Sans JP
- 用途
- 英字（商品名・見出し）
- 使用フォント
- silk
- 無料で近いもの
- Cormorant Garamond
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 18px / 400 | 1.60 | 13px / 400 |
| h2 | 24px / 400 | 1.00 | 18px / 400 |
| 本文（p） | 16px / 300 | 1.40 | 15px / 300 |
| ボタン | 11px / 400 | 1.00 | 10px / 400 |
実測値（PC 1440px・SP 375px、2026.10.28 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
- 04
- 05
- 06
RECOMMEND ITEMS
メニュー・サービス／アイコン／写真グリッド型 - 07
- 08
- 09
- 10
- 11
NEWS
お知らせ／お知らせ一覧型 - 12
- 13
- 14
- 15
PARTSパーツ別に見る
PC
PC
PC
PC
PC番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.28 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01ファーストビューの写真ごとに、写っている商品の名前と商品ページへのリンクを添える
- 02購入者の感想には、使っている商品へのリンクを付ける
- 03「どれを選べばいいか」に答える記事を作り、商品ページへつなぐ
- 04商品の写真は、実際に使っている場面で撮って一覧にそろえる
FAQよくある質問
&CATのサイトで使われているフォントは？
和文は Adobe Fonts の筑紫オールド明朝、ボタンなどの補足は Noto Sans JP、英字の商品名や見出しは silk という欧文書体です。無料で近づけるなら、和文に Shippori Mincho、英字に Cormorant Garamond が使えます。
商品数が多くても、トップで全部見せたほうがよいですか？
このサイトは、新商品・おすすめ・全商品を分けたうえで、カテゴリの入口も用意しています。トップでは代表的な商品を見せ、残りはカテゴリから探せるようにしておくと、ページが長くなりすぎません。
どんな業種の参考になりますか？
ペット用品のほか、家具・器・雑貨など、暮らしの中で使う様子を写真で見せたい商品のネットショップに応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は&CAT（アンドキャット）および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの動物・ペットの参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社のペット関連のサイトを。
「&CAT（アンドキャット）のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。