ワイヤーDL公園墓地 菩提樹苑
筆文字の「菩提樹苑」と縦書きのメニューで、寺院が営む霊園の落ち着いた雰囲気を伝える。
webcan analyze www.saranosono.jp
FUNERAL & TEMPLE · 熊本県 · PICKED 2026.10.18
沙羅の苑葬儀・寺社のホームページデザイン参考 — ペット霊園・余白多め・左サイドメニュー
出典：www.saranosono.jp ↗確認日 2026.10.18
EDITOR'S NOTE編集部の視点
電話・LINE・メールの3つの連絡手段を、PCでは右端、スマホでは画面下にいつも出しておく。
熊本市西区の、寺院が運営するペット霊園のサイト。ファーストビューは、紫の法衣の僧侶が白いプードルを抱き上げて笑う写真に、「「大好き」だから きちんとしたお別れを。」のコピーを重ねている。PCは左側にメニューとフリーダイヤル・受付時間を置き、右端に縦書きの「LINEで聞く」「電話する」を置く。お知らせ、プラン・料金、移動火葬車をしないことの説明、霊園の考え方、ペットが亡くなったら、ご予約・お問い合わせと続く。
- 01PCは左側の列にメニュー・SNS・電話番号と受付時間をまとめ、中央に角丸の大きな写真を置いている
- 02淡い水色の筆でなでたような模様と白い背景で、静かな印象にしている
- 03「ペットが亡くなったら」を、メニューの1つ目とページ後半の両方に置いている
CONVERSION集客の工夫
✓電話番号をヘッダーに常設PC・ファーストビュー
✓タップで電話できるSP・tel:リンク 1か所
✓SPの追従ボタンSP・画面下に固定
✓予約・問い合わせ導線お問い合わせ / お問い合わせフォーム
✓LINEで相談・予約LINE公式アカウント
－営業・診療時間の明記トップページ内
連絡手段を3つ並べて、いつでも出しておく
PCでは右端に「LINEで聞く」「電話する」を縦に固定し、スマホでは画面下に「LINEで聞く」「電話する」「メニュー」を固定している。ページの最後でも、電話・LINE・メールの3つを並べて案内している。
亡くなった直後の人のための入口
「ペットが亡くなったら」をメニューの最初に置き、ページ後半にも同じ案内の枠を設けている。急いで調べている人が、まず何をすればよいかのページへすぐ進める。
選ばない理由になりそうなことを先に書く
プラン・料金のすぐ下に「私たちは、「移動火葬車」はしません」という囲みを置き、その考え方へのリンクを添えている。ほかの業者と比べている人に、違いを最初に伝えている。
チェック項目は 2026.10.18 に実ブラウザで描画したトップページを自動判定したものです。
COLOR配色
#FFFFFF背景
#F8F2EB案内の枠の背景 · ベージュ
#444444本文テキスト
背景は面積、文字は文字数で重み付けして実測した色から、役割ごとに整理しています。
TYPOGRAPHYフォント
- 用途
- 和文（見出し・本文・ナビ）
- 使用フォント
- Zen Kaku Gothic Antique
- 無料で近いもの
- Zen Kaku Gothic Antique
| 要素 | PC サイズ / 太さ | PC 行間 | SP サイズ / 太さ |
|---|---|---|---|
| h1 | 19.4px / 500 | 1.65 | 18px / 500 |
| h2 | 17.4px / 500 | 1.65 | 16px / 500 |
| 本文（p） | 15.1px / 400 | 2.00 | 13px / 400 |
| ボタン | 13px / 400 | 1.00 | 13px / 400 |
実測値（PC 1440px・SP 375px、2026.10.18 計測）。同じ要素で最も多く使われている指定を表示しています。h1 をロゴや小さな見出しに使っているサイトでは、h1 の値が小さく出ます。
STRUCTUREページ構成（上から順に）
- 01
- 02
- 03
お知らせ
お知らせ／お知らせ一覧型 - 04
- 05
- 06
- 07
ペットが亡くなったら
イベント・キャンペーン／特集バナー並び型 - 08
- 09
- 10
PARTSパーツ別に見る
PC
SP
PC
SP番号は上のページ構成の順番です。部品名から、同じ部品を使っているほかのサイトの実例を見られます。スクリーンショットは 2026.10.18 以降に撮影したもので、現在の表示とは異なる場合があります。
DOWNLOADワイヤーフレームをダウンロード
この構成を、Figmaで編集できるワイヤーに
上のページ構成を、WEBCANのワイヤーフレーム部品で組み直したものです。元サイトの文章・画像・コードは含みません。
Figmaでの使い方
- SVGをダウンロードする
- Figmaのキャンバスにファイルをドラッグ＆ドロップする
- セクションごとにレイヤーが分かれた状態で開くので、順番の入れ替えや文言の差し替えから始める
文字はテキストレイヤーとして入ります（フォントは Noto Sans JP）。
REPRODUCEこのサイトを参考にするときのポイント
- 01電話・LINE・メールなど連絡手段を複数用意し、スクロール中も見えるようにする
- 02「亡くなったらまず何をするか」のページを、メニューの最初に置く
- 03ほかの業者との違いを、料金の近くで短く伝える
- 04余白の多い画面と柔らかい写真で、落ち着いて読める雰囲気にする
FAQよくある質問
沙羅の苑のサイトで使われているフォントは？
見出し・本文・ナビすべて Zen Kaku Gothic Antique です。Google Fonts で無料で使えます。
ペット霊園のサイトで、LINEの窓口は必要ですか？
電話をかけにくい時間や気持ちのときに、文字で問い合わせられる窓口があると連絡しやすくなります。このサイトのように、電話とLINEを並べて常に表示しておくと選びやすくなります。
どんな業種の参考になりますか？
ペット霊園・ペット葬儀のほか、葬儀社・寺院・霊園など、急いで探す人と落ち着いて比べる人の両方に向けて案内する業種に応用できます。
スクリーンショットは、解説に添える引用として縮小して掲載しています。デザイン・文章・画像の権利は沙羅の苑および各権利者に帰属します。ワイヤーフレームは元サイトを写したものではなく、構成をWEBCANの部品で組み直したものです。権利者・制作者の方からの掲載の取り下げ・修正のご依頼はお問い合わせから承り、原則2営業日以内に対応します。
MOREほかの葬儀・寺社の参考サイト
FROM REFERENCE TO YOUR SITE
このテイストで、
御社の葬儀・寺社サイトを。
「沙羅の苑のような構成で」とお伝えいただくだけで構いません。無料相談で御社の現状サイトを拝見し、地域と業種に合わせた構成案をお持ちします。
無料相談はこちらFREE SITE CHECK（ 無料診断 ）
自社サイトの今の状態を、30秒で確かめる。
URLを入れるだけで、GoogleのSEOとAI検索の両方から見た対応度と、優先して直すべき点がわかります。会員登録・メールアドレス不要です。